feat: use fathom, meta improvements

.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

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) => {

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);
     };

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',

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<any> = ({ children, isHome }) => (
-  <>
-    <Meta />
-    <MdxOverrides />
-    <ColorModes />
-    <ProgressBar />
-    <MDXProvider components={MDXComponents}>
-      <AppStateProvider>
-        <BaseLayout isHome={isHome}>{children}</BaseLayout>
-      </AppStateProvider>
-    </MDXProvider>
-  </>
-);
+export const AppWrapper: React.FC<any> = ({ children, isHome }) => {
+  useFathom();
+  return (
+    <>
+      <Meta />
+      <MdxOverrides />
+      <ColorModes />
+      <ProgressBar />
+      <MDXProvider components={MDXComponents}>
+        <AppStateProvider>
+          <BaseLayout isHome={isHome}>{children}</BaseLayout>
+        </AppStateProvider>
+      </MDXProvider>
+    </>
+  );
+};

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<any> = 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 (
       <>
         <Head>
           <title>{getTitle(frontmatter)} | Blockstack</title>
           <meta name="description" content={description} />
         </Head>
+        <MetaLabels labels={labels} />
         <MDContents
           pageTop={() => <PageTop {...frontmatter} />}
           headings={[...headings, ...dynamicHeadings]}

src/components/mdx/md-contents.tsx

@@ -265,7 +265,7 @@ export const MDContents: React.FC<any> = ({ pageTop: PageTop = null, headings, c
           display={['none', 'none', 'none', 'block']}
         >
           <Box position="sticky" top={0} pt={space('extra-loose')}>
-            <Search mb={space('extra-loose')} />
+            {/*<Search mb={space('extra-loose')} />*/}
             {headings?.length ? <TableOfContents limit={2} headings={headings} /> : null}
           </Box>
         </Box>

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<any> = props => {
+export const MetaLabels = ({ labels }: any) => {
+  return labels?.length ? (
+    <Head>
+      {labels.map(({ label, data }, key: number) => (
+        <React.Fragment key={key}>
+          <meta
+            name={`twitter:label${key + 1}`}
+            // @ts-ignore
+            content={label}
+          />
+          <meta
+            name={`twitter:data${key + 1}`}
+            // @ts-ignore
+            content={data}
+          />
+        </React.Fragment>
+      ))}
+    </Head>
+  ) : null;
+};
+
+export const Meta: React.FC<any> = () => {
   const filename = useFaviconName();
   return (
     <Head>
       <link rel="icon" type="image/svg+xml" href={`/${filename}`} />
+      <meta property="og:image" content="/images/og_image.png" />
+      <meta property="og:type" content="website" />
+      <meta property="og:site_name" content="Blockstack Docs" />
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:site" content="@blockstack" />
+      <meta name="twitter:creator" content="@blockstack" />
     </Head>
   );
 };

src/components/page-top.tsx

@@ -30,11 +30,11 @@ export const PageTop: React.FC<PageTopProps> = React.memo(
               headings,
             })}
           </H1>
-          {isHome ? (
-            <Box width="100%" maxWidth="208px">
-              <Search />
-            </Box>
-          ) : null}
+          {/*{isHome ? (*/}
+          {/*  <Box width="100%" maxWidth="208px">*/}
+          {/*    <Search />*/}
+          {/*  </Box>*/}
+          {/*) : null}*/}
         </Flex>
         {description ? (
           <Box mt="40px !important">