Anchor improvements to the documentation

CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-## [4.0.0] - (upcoming release)
+## [4.0.0] - (upcoming release) - [Release Notes](https://beta.frontmatter.codes/updates/v4_0_0)
 
 - [#101](https://github.com/estruyf/vscode-front-matter/issues/101): Date picker available on the metadata section
 - [#102](https://github.com/estruyf/vscode-front-matter/issues/102): Support comma separated arrays in front matter

docs/components/Docs/Markdown.tsx

@@ -1,3 +1,4 @@
+import { LinkIcon } from '@heroicons/react/outline';
 import Link from 'next/link';
 import * as React from 'react';
 import { useEffect } from 'react';
@@ -20,6 +21,14 @@ export const Markdown: React.FunctionComponent<IMarkdownProps> = ({content}: Rea
     return title.toLowerCase().replace(/\s/g, '-');
   };
 
+  const generateLink = (props: any) => {
+    return (
+      <a href={`#${generateId(props)}`} aria-hidden="true" title={getTitle(props)} className={`hidden group-hover:inline-block`}>
+        <LinkIcon className={`ml-4 h-6 inline-block`} />
+      </a>
+    );
+  };
+
   useEffect(() => {
     const elms = document.querySelectorAll('blockquote > p > strong');
     for (let i = 0; i < elms.length; i++) {
@@ -48,9 +57,9 @@ export const Markdown: React.FunctionComponent<IMarkdownProps> = ({content}: Rea
             }
             return <Link key={url as string} href={url as string}><a title={title}>{title}</a></Link>;
           },
-          h1: ({node, ...props}) => (<h1 id={generateId(props)}>{getTitle(props)}</h1>),
-          h2: ({node, ...props}) => (<h2 id={generateId(props)}>{getTitle(props)}</h2>),
-          h3: ({node, ...props}) => (<h3 id={generateId(props)}>{getTitle(props)}</h3>),
+          h1: ({node, ...props}) => (<h1 id={generateId(props)} className={`header__offset group`}>{getTitle(props)}{generateLink(props)}</h1>),
+          h2: ({node, ...props}) => (<h2 id={generateId(props)} className={`header__offset group`}>{getTitle(props)}{generateLink(props)}</h2>),
+          h3: ({node, ...props}) => (<h3 id={generateId(props)} className={`header__offset group`}>{getTitle(props)}{generateLink(props)}</h3>),
         }}
         rehypePlugins={[rehypeRaw]} 
         children={content} />

docs/components/Docs/Page.tsx

@@ -9,13 +9,15 @@ export interface IPageProps {
 }
 
 export const Page: React.FunctionComponent<IPageProps> = ({items, page, children}: React.PropsWithChildren<IPageProps>) => {
+  
+  
   return (
     <div className={`mb-6 py-8 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8`}>
       <div className={`lg:flex`}>
 
-        <div className={`h-screen top-16 lg:block hidden lg:w-60 xl:w-72`}>
+        <aside className={`h-screen top-16 lg:block hidden lg:w-80 xl:w-96`}>
           <Sidebar items={items} />
-        </div>
+        </aside>
 
         <div className={`min-w-0 w-full flex-auto lg:static lg:max-h-full lg:overflow-visible`}>
           {children}

docs/components/Docs/PageInfo.tsx

@@ -20,7 +20,7 @@ export const PageInfo: React.FunctionComponent<IPageInfoProps> = ({page}: React.
       {
         date && (
           <div className="text-base">
-            <span>Last updated on</span>{` `}<span>{format(date, `MMM dd, yyyy`)}</span>
+            <span>Last updated on</span>{` `}<span><time dateTime={format(date, 'yyyy-MM-dd')}>{format(date, `MMM dd, yyyy`)}</time></span>
           </div>
         )
       }

docs/content/changelog/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-## [4.0.0] - (upcoming release)
+## [4.0.0] - (upcoming release) - [Release Notes](https://beta.frontmatter.codes/updates/v4_0_0)
 
 - [#101](https://github.com/estruyf/vscode-front-matter/issues/101): Date picker available on the metadata section
 - [#102](https://github.com/estruyf/vscode-front-matter/issues/102): Support comma separated arrays in front matter

docs/content/changelog/v4_0_0.md

@@ -1,6 +1,8 @@
 ---
 title: Version 4.0.0 release notes
-description: In this new major release of Front Matter, we got some great new features to announce to you.
+description: 'In this new major release of Front Matter, we got some great new features to announce to you.'
+date: '2021-09-20T11:51:43.926Z'
+lastmod: '2021-09-20T11:51:45.273Z'
 ---
 
 ## Team level settings
@@ -52,4 +54,4 @@ In the content type, we support the following field types currently:
 - [#106](https://github.com/estruyf/vscode-front-matter/issues/106): Introduction of team level settings for Front Matter
 - [#107](https://github.com/estruyf/vscode-front-matter/issues/107): Number field support added in content type fields
 - [#108](https://github.com/estruyf/vscode-front-matter/issues/108): Choice field support added in content type fields
-- [#109](https://github.com/estruyf/vscode-front-matter/issues/109): JSON Config script added to automate the JSON schema
+- [#109](https://github.com/estruyf/vscode-front-matter/issues/109): JSON Config script added to automate the JSON schema

docs/pages/updates/[slug].tsx

@@ -1,11 +1,13 @@
+import { format, parseJSON } from 'date-fns';
 import React from 'react';
 import { Markdown } from '../../components/Docs/Markdown';
 import { Description, OtherMeta, Title } from '../../components/Meta';
 import { Layout } from '../../components/Page/Layout';
 import { getAllPosts, getPostByFilename } from '../../lib/api';
 
-export default function Home({ title, content, description }: any) {
-  
+export default function Home({ title, content, description, date }: any) {
+  const pubDate = date ? parseJSON(date) : '';
+
   return (
     <>
       <Title value={title} />
@@ -18,6 +20,8 @@ export default function Home({ title, content, description }: any) {
             <h1 className="text-5xl tracking-tight font-extrabold sm:leading-none lg:text-5xl xl:text-6xl">{title}</h1>
             
             <p className="mt-3 text-base text-whisper-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">{description}</p>
+
+            { pubDate && <p className="mt-3 text-whisper-900">Published: <time dateTime={format(pubDate, 'yyyy-MM-dd')}>{format(pubDate, 'MMM dd, yyyy')}</time></p> }
           </div>
 
           <div className={`changelog`}>
@@ -30,7 +34,7 @@ export default function Home({ title, content, description }: any) {
 }
 
 export const getStaticProps = async ({ params }: any) => {
-  const changes = getPostByFilename('changelog', `${params.slug}.md`, ['title', 'content', 'description']);
+  const changes = getPostByFilename('changelog', `${params.slug}.md`, ['title', 'content', 'description', 'date']);
 
   return {
     props: { ...changes }

docs/styles/globals.css

@@ -6,6 +6,13 @@
 
 html, body {height: 100%;}
 
+.header__offset:before {
+  content: "";
+  display: block;
+  height: 100px;
+  margin: -100px 0 0;
+}
+
 .changelog {
   @apply py-8 space-y-4;