Merge pull request #126 from life-itself/wiki-pages-frontmatter

notes/neo-metallism.md

@@ -5,11 +5,14 @@ date: 2022-02-17
 image: /img/Neo-metallism_Thumb_vo3dhs.png
 description: "In this episode we examine Bitcoin and the Neo-Metallist thesis, i.e. that a gold-standard was a good idea and a Bitcoin-standard would be even better."
 youtube: https://www.youtube.com/embed/_o7pRFLzJHY
+podcast: https://anchor.fm/life-itself/episodes/Stephen-Diehl-on-Web3--Bitcoin--Neometalism-e1f5rca
+featured: false
+aliases: notes/neo-metallism.md
 ---
 
-https://www.youtube.com/watch?v=_o7pRFLzJHY&t=568s
+{/* https://www.youtube.com/watch?v=_o7pRFLzJHY&t=568s */}
 
-* Podcast: https://anchor.fm/life-itself/episodes/Stephen-Diehl-on-Web3--Bitcoin--Neometalism-e1f5rca
+{/* Podcast: https://anchor.fm/life-itself/episodes/Stephen-Diehl-on-Web3--Bitcoin--Neometalism-e1f5rca */}
 * Wiki topic: [is-digital-gold](../claims/is-digital-gold.md)
 
 ***

site/components/MDX.js

@@ -1,4 +1,5 @@
 import Head from 'next/head'
+import ReactPlayer from 'react-player/lazy'
 import { Paragraph } from './Link'
 
 const components = {
@@ -8,20 +9,67 @@ const components = {
 
 export default function MdxPage({ children }) {
   const { Component, frontmatter } = children
+  
+  let podcastEmbed
+
+  if (frontmatter.podcast && frontmatter.podcast.includes("life-itself")) {
+    const url = frontmatter.podcast
+    podcastEmbed = ([
+      url.slice(0, "https://anchor.fm/life-itself".length),
+      "/embed",
+      url.slice("https://anchor.fm/life-itself".length)
+    ].join(""))
+  }
 
   return (
     <article className="prose dark:prose-invert mx-auto p-6">
       <header>
         <div className="mb-6">
-          <h1>{frontmatter.title}</h1>
+          {frontmatter.title && <h1 className="mb-0">{frontmatter.title}</h1>}
           {frontmatter.authors && (
-            <div className="-mt-6"><p className="opacity-60 pl-1">{frontmatter.authors}</p></div>
+            <div className="-mt-6">
+              <p className="opacity-60 pl-1">{frontmatter.authors}</p>
+            </div>
           )}
           {frontmatter.date && (
-            <p className="">{frontmatter.date}</p>
+            <p className="text-gray-900 dark:text-gray-500 text-sm pl-2">
+              on {frontmatter.date}
+            </p>
           )}
           {frontmatter.description && (
-            <p classname="">frontmatter.description}</p>
+            <p className="">{frontmatter.description}</p>
+          )}
+          {frontmatter.youtube && (
+            <div className="relative pt-[56.25%]">
+              <ReactPlayer
+                className="absolute top-0 left-0"
+                width="100%"
+                height="100%"
+                url={frontmatter.youtube}
+              />
+            </div>
+          )}
+          {frontmatter.podcast && (
+            <div className='pt-4'>
+              <ul className="list-disc">
+                <li>
+                  Podcast: &nbsp;
+                  <a href={frontmatter.podcast}>{frontmatter.podcast}</a>
+                </li>
+              </ul>
+              {podcastEmbed && (
+                <div className='md:mx-4'>
+                  <iframe
+                    src={podcastEmbed}
+                    height="100px"
+                    width="100%"
+                    frameBorder="0"
+                    scrolling="no"
+                    className="rounded-md"
+                  />
+                </div>
+              )}
+            </div>
           )}
         </div>
       </header>
@@ -29,5 +77,5 @@ export default function MdxPage({ children }) {
         <Component components={components} />
       </main>
     </article>
-  )
+  );
 }

site/config/siteConfig.js

@@ -2,9 +2,10 @@ import Logo from "../public/img/life-itself-logo.svg"
 
 const siteConfig = {
   title: "Making Sense of Crypto and Web3",
+  url: "https://web3.lifeitself.us",
   tagline: "",
   description:
-    "Introductions to key concepts and ideas in crypto and web3. Plus in-depth evaluation of its potential impact.",
+  "Introductions to key concepts and ideas in crypto and web3. Plus in-depth evaluation of its potential impact.",
   author: "Life Itself and collaborators",
   // logo image
   authorLogo: "/img//life-itself-logo.svg",

site/contentlayer.config.ts

@@ -1,19 +1,44 @@
-import { defineDocumentType, makeSource } from 'contentlayer/source-files'
+import { defineDocumentType, defineNestedType, makeSource } from 'contentlayer/source-files'
 // import readingTime from 'reading-time'
-import remarkGfm from 'remark-gfm';
+import remarkGfm from 'remark-gfm'
 import rehypeSlug from 'rehype-slug'
 import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import wikiLinkPlugin from "remark-wiki-link-plus"
 
+const ObsidianAliases = defineNestedType(() => ({
+  name: 'Obsidian',
+  filePathPattern: '**/*.md*',
+  fields: {
+    title: { type: 'string', required: true }
+  }
+}))
+
 const OtherPage = defineDocumentType(() => ({
   name: 'OtherPage',
   filePathPattern: '**/*.md*',
   contentType: 'mdx',
   fields: {
-    title: { type: 'string', required: false },
+    title: { type: 'string' },
-    date: { type: 'string', required: false },
+    date: { type: "date", description: "This will be the publication date" },
-    authors: { type: 'string', required: false },
+    image: { type: "string" },
-    description: { type: 'string', required: false },
+    description: { type: 'string' },
+    youtube: { type: "string" },
+    podcast: { type: "string" },
+    featured: { type: "boolean", default: false },
+    created: { type: "date", description: "The date this page was created (For internal use)" },
+    aliases: { type: 'reference', of: ObsidianAliases }
+  },
+  computedFields: {
+    date: {
+      type: "date",
+      resolve: (doc) => new Date(doc.date).toLocaleDateString('en-US', {
+        weekday: "long", year: "numeric", month: "long", day: "numeric"
+      })
+    },
+    created: {
+      type: "date",
+      resolve: (doc) => new Date(doc.created).toLocaleDateString('en-US')
+    },
   }
 }));
 

site/pages/[...slug].js

@@ -1,7 +1,8 @@
 import MdxPage from '../components/MDX';
 import { allOtherPages } from 'contentlayer/generated';
 import { useMDXComponent } from 'next-contentlayer/hooks';
-import { NewsArticleJsonLd, NextSeo } from 'next-seo';
+import { NextSeo } from 'next-seo';
+import siteConfig from "../config/siteConfig"
 
 
 export default function Page({ body, ...rest }) {
@@ -9,14 +10,17 @@ export default function Page({ body, ...rest }) {
   const children = {
     Component,
     frontmatter: {
-      authors: rest.authors,
       title: rest.title,
       date: rest.date,
       description: rest.description,
-      modified: rest.modified,
+      image: rest.image,
-      tags: rest.tags,
+      youtube: rest.youtube,
-    }
+      podcast: rest.podcast,
-  }
+      featured: rest.featured,
+      created: rest.created,
+      aliases: rest.aliases
+    },
+  };
 
   const titleFromUrl = rest._raw.flattenedPath
     .split("/")
@@ -27,7 +31,23 @@ export default function Page({ body, ...rest }) {
   
   return (
     <>
-      <NextSeo title={children.frontmatter.title ?? titleFromUrl} />
+      <NextSeo
+        title={children.frontmatter.title ?? titleFromUrl}
+        description={children.frontmatter.description}
+        canonical={siteConfig.url + "/" + rest._raw.flattenedPath}
+        openGraph={{
+          title: children.frontmatter.title ?? titleFromUrl,
+          description: children.frontmatter.description,
+          images: [
+            {
+              url: siteConfig.url + children.frontmatter.image,
+              width: 1200,
+              height: 627,
+              alt: children.frontmatter.title,
+            },
+          ],
+        }}
+      />
       <MdxPage children={children} />
     </>
   );

templates/template.md

@@ -0,0 +1,37 @@
+---
+title: Page title goes here
+date: YYYY-MM-DD (numbers only)
+description: "Description goes here and will be rendered on the page after the title"
+youtube: youtube video url
+podcast: podcast url
+image: thumbnail image for youtube
+featured: false
+created: YYYY-MM-DD (numbers only)
+aliases: claims/...
+---
+
+* wiki topic  [[editing]]
+* ...
+
+Note: All fields above are optional. Remove (or leave empty) the fields that are not in use to eliminate any errors during build.
+
+***
+
+# Episode Notes
+
+## Summary
+
+Summary content here ...
+
+## What is (topic here) ?
+
+...
+
+## Concepts Covered
+
+* [example](../concepts/(see concepts folder))
+* ...
+
+## References (if any)
+1. ...
+1. ...