From 9d5f7c0a803ad7ae7338af14f702c96dc0c0fc93 Mon Sep 17 00:00:00 2001 From: Thomas Osmonson Date: Mon, 10 Aug 2020 20:19:42 -0500 Subject: [PATCH] feat: use fathom, meta improvements --- .github/workflows/main.yml | 18 -------------- next.config.js | 3 +++ public/images/og_image.png | Bin 0 -> 2271 bytes src/common/hooks/use-fathom.ts | 7 ++---- src/common/utils/index.ts | 2 ++ src/components/app-wrapper.tsx | 30 ++++++++++++++---------- src/components/mdx/markdown-wrapper.tsx | 19 ++++++++++++++- src/components/mdx/md-contents.tsx | 2 +- src/components/meta-head.tsx | 29 ++++++++++++++++++++++- src/components/page-top.tsx | 10 ++++---- 10 files changed, 76 insertions(+), 44 deletions(-) create mode 100644 public/images/og_image.png diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 5b356f4a..ee13dfa4 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -7,31 +7,13 @@ jobs: steps: - name: Checkout uses: actions/checkout@v2 - - name: Set Node Version uses: actions/setup-node@v1.4.2 with: node-version: 14 - - - name: Get yarn cache directory path - id: yarn-cache-dir-path - run: echo "::set-output name=dir::$(yarn cache dir)" - - - name: Check Cache - uses: actions/cache@v2 - id: yarn-cache - with: - path: ${{ steps.yarn-cache-dir-path.outputs.dir }} - key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} - restore-keys: | - ${{ runner.os }}-yarn- - - name: Install deps run: yarn --frozen-lockfile - if: steps.yarn-cache.outputs.cache-hit != 'true' - - name: Lint run: yarn lint - - name: Typecheck run: yarn typecheck diff --git a/next.config.js b/next.config.js index 39f8547c..a5e8e21f 100755 --- a/next.config.js +++ b/next.config.js @@ -321,6 +321,9 @@ module.exports = withFonts( jsconfigPaths: true, trailingSlash: true, }, + env: { + FATHOM_ID: 'EPNTIXUM', + }, redirects, pageExtensions: ['js', 'ts', 'tsx', 'md', 'mdx'], webpack: (config, options) => { diff --git a/public/images/og_image.png b/public/images/og_image.png new file mode 100644 index 0000000000000000000000000000000000000000..0293ed9b4d096f5e1757de31504b13a9589156b2 GIT binary patch literal 2271 zcmbuAeO!`P6vr#HZ>+% zmgTI4>C=3~rBs^WTTN5Rt;`n~%dpfk(`>j>_UQKCw$Ep?^T$2+x%Zs!=XdWppXVMA z3h*Hl&4~a2vhSzsLjb@b0ATkM=AbJH=QD(;a|`lgd+YW3ZzUC1r8N`3zme56N#Lsf zfoBbO+Q(jvH@E%VtA3>Xsq4W*_1LS|x9VD+zj#?8Q%GRhDt@U10K#_P^9qrG!FZ@-afdg5l&Y(~PdK>UJG-tT}Kjgj0%{5&Itoftj|WjMYl7(xv2% z1**y>L(Js0Ia~Xz_o>X}lIE+8$GewFA>(oCik4XHN^Z`*FOb?1HDE z{&6DqbYTR8vDZN$sy=ZiNecb;dcj72up9pP^m*{Xg0w*6izW$i$A9fLlaqR!myqqL z&OP`R3P~6BLcNEQ_N_Bfe=~<=hiyxiuJGJhRJr2kOMKBd!vzv6rCoIYlaJ$r2^y#^ zzrn)_I*>|>HUZUq*w=C!CSgA8>jjiLUYp7mtZcNg>P!P6`(s7#f$A7xcD4Yslm`OJ z6uxz5OMymA+X$ElIG6ihJ!N20y060xw`7=aW+S;|I_wwdb0*r10Ql$2;i5mY#jZeWBCLxCg)K9(a z&I>Tbi{K>t-uhMc(SviTP_yF1#vvEXo^LvqDX>9w-lktm-UN5mp*&9NHTxaNC4c&K zjyZfiKJX!D%O_|MjdxbcWsNj<6R1#$VlaosUmL{rK>(YaJ6dG3UW?||61hkkdg`Y> zihN=_vLVVJN0OHb=N@1^6w^$m*%a{?c8u?gaU|w_!S#;z5~_A3Dl-PzW&12^bCcY` z3RO0`@hpo}^_~L|r$%LjIJLQiNpg>lV+S}3q1^bei4UJ^B?36lmxWsK!K;Q6^tuS_*mk>DY?a5GW8 zIFXHBgz*-uC+p_*3DYNNO^9db2>~YgnJQG+<7~pbx3I>MURj}UrN$`>qZ=Arm_FFH zi6<}czL4eOQyvtMg16)jvjKq`&%3?}t-d@`8-Rxdm~`>~*$hs$xLtlztIBVAfj=4q z0*$!I=8sxk-M>s9e(TvEd)GY$zd9;A#zKGE-6*7B%9@2hD{!S3`Yv8+`DkC! z0Y;okyIl!r!OjF~kUP&m=bXENleq$0Vlec+P2BhSMUSm{Xqm|6akuwo6nP~icz@ri_>)Ck1iEmee$Y)F8IB4thv_GN z4|{3uT_M15QfWe!Gdb9WNJSf}?0M6aL-5F>Xe0DP3u;^~NL8qo>3M-v!zP}a)+i2# z7gpZtzpgVTp&bzBHk_BAr`z?i&vrys-4pWk{?ToYc076CXi{G?e${Ui-*wVGcYbsR zU8>)c`nj-ArPNm4uu@-Z3H=2}N?;2+vg&Eex+4chovOx^8yZ}*4o}(eQ;AhjLqh5>VTyXZA|x@b#>DX5{b_;U)~qkK1kljR@$V2wMva9hC~ z&CM&C*t*+Putv6>?nDC@+3;ln=AvJ@9|8qak4S*7l|9&EV7OLu=Bjc5Yb&N*)w~zh zQbAyxw;8JzJ5?E80d-ld)li;f<-v^-7kNhI;UA6pPJ@(@8_!oiNxz#e!%ju>vnE&l z5*j*6&VA5*s5^_p|A(J=#9t31$kxX$FD{w25fkH=&b$tf_1%P7Q%Xwe7F!Z#I1{yQ zDeu5R3=Of<9OhKn*M+m^*gscb=Asy=P+!(#T0EodZ$rH44pDd~HQItdz2)m2u>SkC Hf|Nf1+AGXy literal 0 HcmV?d00001 diff --git a/src/common/hooks/use-fathom.ts b/src/common/hooks/use-fathom.ts index e4c8c5d9..abe8a267 100644 --- a/src/common/hooks/use-fathom.ts +++ b/src/common/hooks/use-fathom.ts @@ -2,23 +2,20 @@ import { useEffect } from 'react'; import { useRouter } from 'next/router'; import * as Fathom from 'fathom-client'; -// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types export const useFathom = () => { const router = useRouter(); useEffect(() => { - // Initialize Fathom when the app loads Fathom.load(process.env.FATHOM_ID, { - includedDomains: ['blockstack.design'], + excludedDomains: ['localhost'], }); function onRouteChangeComplete() { Fathom.trackPageview(); } - // Record a page view when route changes + router.events.on('routeChangeComplete', onRouteChangeComplete); - // Un assign event listener return () => { router.events.off('routeChangeComplete', onRouteChangeComplete); }; diff --git a/src/common/utils/index.ts b/src/common/utils/index.ts index b1bc1c43..752c588d 100644 --- a/src/common/utils/index.ts +++ b/src/common/utils/index.ts @@ -18,6 +18,8 @@ export const slugify = (string: string): string => .replace(/^-+/, '') // Trim - from start of text .replace(/-+$/, ''); // Trim - from end of text +export const capitalize = ([s, ...tring]: string): string => [s.toUpperCase(), ...tring].join(''); + export const border = ( width = 1, style: Property.BorderStyle = 'solid', diff --git a/src/components/app-wrapper.tsx b/src/components/app-wrapper.tsx index 52468b62..07084c56 100644 --- a/src/components/app-wrapper.tsx +++ b/src/components/app-wrapper.tsx @@ -7,17 +7,21 @@ import { ProgressBar } from '@components/progress-bar'; import { BaseLayout } from '@components/layouts/base-layout'; import { ColorModes } from '@components/color-modes/styles'; import { Meta } from '@components/meta-head'; +import { useFathom } from '@common/hooks/use-fathom'; -export const AppWrapper: React.FC = ({ children, isHome }) => ( - <> - - - - - - - {children} - - - -); +export const AppWrapper: React.FC = ({ children, isHome }) => { + useFathom(); + return ( + <> + + + + + + + {children} + + + + ); +}; diff --git a/src/components/mdx/markdown-wrapper.tsx b/src/components/mdx/markdown-wrapper.tsx index f258efb4..0d851f9d 100644 --- a/src/components/mdx/markdown-wrapper.tsx +++ b/src/components/mdx/markdown-wrapper.tsx @@ -1,8 +1,9 @@ import React from 'react'; import { MDContents } from '@components/mdx/md-contents'; import Head from 'next/head'; -import { getTitle } from '@common/utils'; +import { capitalize, getTitle } from '@common/utils'; import { PageTop } from '@components/page-top'; +import { MetaLabels } from '@components/meta-head'; const defaultFrontmatter = { headings: [], @@ -14,12 +15,28 @@ export const MDWrapper: React.FC = React.memo( ({ frontmatter = defaultFrontmatter, dynamicHeadings = [], ...props }) => { const { headings, description } = frontmatter; + const labels = [ + frontmatter.experience + ? { + label: 'Experience', + data: capitalize(frontmatter.experience), + } + : undefined, + frontmatter.duration + ? { + label: 'Duration', + data: frontmatter.duration, + } + : undefined, + ].filter(item => item); + return ( <> {getTitle(frontmatter)} | Blockstack + } headings={[...headings, ...dynamicHeadings]} diff --git a/src/components/mdx/md-contents.tsx b/src/components/mdx/md-contents.tsx index e8acf60b..d7ade54a 100644 --- a/src/components/mdx/md-contents.tsx +++ b/src/components/mdx/md-contents.tsx @@ -265,7 +265,7 @@ export const MDContents: React.FC = ({ pageTop: PageTop = null, headings, c display={['none', 'none', 'none', 'block']} > - + {/**/} {headings?.length ? : null} diff --git a/src/components/meta-head.tsx b/src/components/meta-head.tsx index df572ed9..ab17cdb9 100644 --- a/src/components/meta-head.tsx +++ b/src/components/meta-head.tsx @@ -3,11 +3,38 @@ import React from 'react'; import Head from 'next/head'; import { useFaviconName } from '@common/hooks/use-favicon'; -export const Meta: React.FC = props => { +export const MetaLabels = ({ labels }: any) => { + return labels?.length ? ( + + {labels.map(({ label, data }, key: number) => ( + + + + + ))} + + ) : null; +}; + +export const Meta: React.FC = () => { const filename = useFaviconName(); return ( + + + + + + ); }; diff --git a/src/components/page-top.tsx b/src/components/page-top.tsx index ea310d4b..a5c47a19 100644 --- a/src/components/page-top.tsx +++ b/src/components/page-top.tsx @@ -30,11 +30,11 @@ export const PageTop: React.FC = React.memo( headings, })} - {isHome ? ( - - - - ) : null} + {/*{isHome ? (*/} + {/* */} + {/* */} + {/* */} + {/*) : null}*/} {description ? (