adam/vscode-front-matter
1
0
Fork 0
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-08-07 09:23:00 +02:00
Code Issues Packages Projects Releases Wiki Activity

Added sponsor message ❤️

Browse Source
This commit is contained in:
Elio Struyf
2021-08-26 13:21:00 +02:00
parent 975bb10001
commit aac34c96f7
9 changed files with 79 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/media/styles.css
+36
View File
@@ -470,4 +470,40 @@ input:checked + .field__toggle__slider:before {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* Sponsor */
.sponsor {
opacity: 0.5;
}
.sponsor:hover {
opacity: 1;
}
.sponsor:hover svg {
fill: currentcolor;
}
.sponsor svg {
height: 20px;
width: 20px;
margin-right: .25rem;
}
.sponsor a {
display: flex;
align-items: center;
justify-content: center;
color: var(--vscode-foreground);
text-decoration: none;
}
.sponsor a:hover {
color: var(--vscode-foreground);
text-decoration: none;
}
.sponsor a > span {
margin-right: .25rem;
}
src/commands/Dashboard.ts
+1 -1
View File
@@ -222,7 +222,7 @@ export class Dashboard {
<title>Front Matter Dashboard</title>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;" class="bg-gray-100 text-vulcan-500 dark:bg-vulcan-500 dark:text-whisper-500">
<body style="width:100%;height:100%;margin:0;padding:0;overflow:hidden" class="bg-gray-100 text-vulcan-500 dark:bg-vulcan-500 dark:text-whisper-500">
<div id="app" style="width:100%;height:100%;margin:0;padding:0;"></div>
<img style="display:none" src="https://api.visitorbadge.io/api/combined?user=estruyf&repo=frontmatter-usage&countColor=%23263759" alt="Daily usage" />
src/pagesView/components/Dashboard.tsx
+6 -2
View File
@@ -25,7 +25,7 @@ export const Dashboard: React.FunctionComponent<IDashboardProps> = ({}: React.Pr
return (
<main className={`h-full w-full`}>
<div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
<div className="flex flex-col h-full overflow-auto">
<Header currentTab={tab}
currentSorting={sorting}
groups={pageGroups}
@@ -42,7 +42,11 @@ export const Dashboard: React.FunctionComponent<IDashboardProps> = ({}: React.Pr
settings={settings}
/>
{ loading ? <Spinner /> : <Overview pages={pageItems} settings={settings} /> }
<div className="flex-grow max-w-7xl mx-auto py-6 px-4">
{ loading ? <Spinner /> : <Overview pages={pageItems} settings={settings} /> }
</div>
<p className={`text-vulcan-50 dark:text-whisper-900 py-2 text-center`}>If you find FrontMatter useful, please consider <a className={`text-vulcan-500 dark:text-whisper-500 hover:text-vulcan-600 dark:hover:text-whisper-300`} href="https://github.com/sponsors/estruyf" title="Sponsor Front Matter">sponsoring</a> it, or if you use FrontMatter for work, please encourage your employer to <a className={`text-vulcan-500 dark:text-whisper-500 hover:text-vulcan-600 dark:hover:text-whisper-300`} href="https://github.com/sponsors/estruyf" title="Sponsor Front Matter">sponsoring</a> it.</p>
</div>
</main>
);
src/pagesView/components/Header.tsx
+2 -2
View File
@@ -48,8 +48,8 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({currentTab, curre
};
return (
<div className={`mb-6 sticky top-0 z-40 bg-gray-100 dark:bg-vulcan-500`}>
<div className={`px-4 mb-2 flex items-center justify-between`}>
<div className={`w-full max-w-7xl mx-auto sticky top-0 z-40 bg-gray-100 dark:bg-vulcan-500`}>
<div className={`px-4 my-2 flex items-center justify-between`}>
<Searchbox onSearch={onSearch} />
<div className={`flex items-center space-x-4`}>
src/pagesView/components/Overview.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ export const Overview: React.FunctionComponent<IOverviewProps> = ({pages, settin
if (!pages || !pages.length) {
return (
<div className={`flex items-center justify-center mt-16`}>
<div className={`flex items-center justify-center h-full`}>
<div className={`max-w-xl text-center`}>
<MarkdownIcon className={`text-vulcan-300 dark:text-whisper-800 h-32 mx-auto`} />
{
src/viewpanel/ViewPanel.tsx
+3
View File
@@ -10,6 +10,7 @@ import useMessages from './hooks/useMessages';
import { TagType } from './TagType';
import { FolderAndFiles } from './components/FolderAndFiles';
import { Metadata } from './components/Metadata';
import { SponsorMsg } from './components/SponsorMsg';
export interface IViewPanelProps {
}
@@ -51,6 +52,8 @@ export const ViewPanel: React.FunctionComponent<IViewPanelProps> = (props: React
<OtherActions settings={settings} isFile={true} />
</div>
<SponsorMsg />
</div>
);
};
src/viewpanel/components/BaseView.tsx
+3
View File
@@ -8,6 +8,7 @@ import { OtherActions } from './OtherActions';
import { FileList } from './FileList';
import { VsLabel } from './VscodeComponents';
import { FolderAndFiles } from './FolderAndFiles';
import { SponsorMsg } from './SponsorMsg';
export interface IBaseViewProps {
settings: PanelSettings | undefined;
@@ -46,6 +47,8 @@ export const BaseView: React.FunctionComponent<IBaseViewProps> = ({settings, fol
<OtherActions settings={settings} isFile={false} isBase />
</div>
<SponsorMsg />
</div>
);
};
src/viewpanel/components/Icons/HeartIcon.tsx
+13
View File
@@ -0,0 +1,13 @@
import * as React from 'react';
export interface IHeartIconProps {
className?: string;
}
export const HeartIcon: React.FunctionComponent<IHeartIconProps> = ({className}: React.PropsWithChildren<IHeartIconProps>) => {
return (
<svg xmlns="http://www.w3.org/2000/svg" className={`${className || ""}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
);
};
src/viewpanel/components/SponsorMsg.tsx
+14
View File
@@ -0,0 +1,14 @@
import * as React from 'react';
import { HeartIcon } from './Icons/HeartIcon';
export interface ISponsorMsgProps {}
export const SponsorMsg: React.FunctionComponent<ISponsorMsgProps> = (props: React.PropsWithChildren<ISponsorMsgProps>) => {
return (
<p className={`sponsor`}>
<a href="https://github.com/sponsors/estruyf" title="Sponsor Front Matter">
<span>Sponsor</span> <HeartIcon className={`h-5 w-5 mr-2`} /> <span>FrontMatter</span>
</a>
</p>
);
};