diff --git a/assets/media/styles.css b/assets/media/styles.css index 10f0ac03..2df5fbea 100644 --- a/assets/media/styles.css +++ b/assets/media/styles.css @@ -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; } \ No newline at end of file diff --git a/src/commands/Dashboard.ts b/src/commands/Dashboard.ts index fad5f4a7..cb3fdb9c 100644 --- a/src/commands/Dashboard.ts +++ b/src/commands/Dashboard.ts @@ -222,7 +222,7 @@ export class Dashboard { Front Matter Dashboard - +
Daily usage diff --git a/src/pagesView/components/Dashboard.tsx b/src/pagesView/components/Dashboard.tsx index 2284d05e..77575184 100644 --- a/src/pagesView/components/Dashboard.tsx +++ b/src/pagesView/components/Dashboard.tsx @@ -25,7 +25,7 @@ export const Dashboard: React.FunctionComponent = ({}: React.Pr return (
-
+
= ({}: React.Pr settings={settings} /> - { loading ? : } +
+ { loading ? : } +
+ +

If you find FrontMatter useful, please consider sponsoring it, or if you use FrontMatter for work, please encourage your employer to sponsoring it.

); diff --git a/src/pagesView/components/Header.tsx b/src/pagesView/components/Header.tsx index 59fcc8e0..3e48a656 100644 --- a/src/pagesView/components/Header.tsx +++ b/src/pagesView/components/Header.tsx @@ -48,8 +48,8 @@ export const Header: React.FunctionComponent = ({currentTab, curre }; return ( -
-
+
+
diff --git a/src/pagesView/components/Overview.tsx b/src/pagesView/components/Overview.tsx index 2c451608..e9934bf9 100644 --- a/src/pagesView/components/Overview.tsx +++ b/src/pagesView/components/Overview.tsx @@ -15,7 +15,7 @@ export const Overview: React.FunctionComponent = ({pages, settin if (!pages || !pages.length) { return ( -
+
{ diff --git a/src/viewpanel/ViewPanel.tsx b/src/viewpanel/ViewPanel.tsx index a3a42002..830ae365 100644 --- a/src/viewpanel/ViewPanel.tsx +++ b/src/viewpanel/ViewPanel.tsx @@ -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 = (props: React
+ +
); }; \ No newline at end of file diff --git a/src/viewpanel/components/BaseView.tsx b/src/viewpanel/components/BaseView.tsx index 14e9ab46..c1a2b73a 100644 --- a/src/viewpanel/components/BaseView.tsx +++ b/src/viewpanel/components/BaseView.tsx @@ -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 = ({settings, fol
+ +
); }; \ No newline at end of file diff --git a/src/viewpanel/components/Icons/HeartIcon.tsx b/src/viewpanel/components/Icons/HeartIcon.tsx new file mode 100644 index 00000000..1cfa4c22 --- /dev/null +++ b/src/viewpanel/components/Icons/HeartIcon.tsx @@ -0,0 +1,13 @@ +import * as React from 'react'; + +export interface IHeartIconProps { + className?: string; +} + +export const HeartIcon: React.FunctionComponent = ({className}: React.PropsWithChildren) => { + return ( + + + + ); +}; \ No newline at end of file diff --git a/src/viewpanel/components/SponsorMsg.tsx b/src/viewpanel/components/SponsorMsg.tsx new file mode 100644 index 00000000..4f876b98 --- /dev/null +++ b/src/viewpanel/components/SponsorMsg.tsx @@ -0,0 +1,14 @@ +import * as React from 'react'; +import { HeartIcon } from './Icons/HeartIcon'; + +export interface ISponsorMsgProps {} + +export const SponsorMsg: React.FunctionComponent = (props: React.PropsWithChildren) => { + return ( +

+ + Sponsor FrontMatter + +

+ ); +}; \ No newline at end of file