init reference token guide

packages/demo/components/pages/guides/layout.tsx

@@ -7,6 +7,14 @@ export default function GuidesLayout({
   desc,
   sidebarItems,
   image,
+  authors,
+}: {
+  children;
+  title;
+  desc;
+  sidebarItems: { to: string; label: string }[];
+  image;
+  authors?: { url: string; image: string; name: string; about: string }[];
 }) {
   return (
     <main className="pb-16 lg:pb-24 bg-white dark:bg-gray-900">
@@ -32,7 +40,7 @@ export default function GuidesLayout({
               Sidebar
             </h3>
             <div className="mb-8">
-              <StickySidebar sidebarItems={sidebarItems} />
+              <StickySidebar sidebarItems={sidebarItems} authors={authors} />
             </div>
           </div>
         </aside>

packages/demo/components/ui/stickySidebar.tsx

@@ -1,9 +1,46 @@
 import { Link } from 'react-scroll';
 
-export default function StickySidebar({ sidebarItems }) {
+export default function StickySidebar({
+  sidebarItems,
+  authors,
+}: {
+  sidebarItems: { to: string; label: string }[];
+  authors?: { url: string; image: string; name: string; about: string }[];
+}) {
   return (
     <div className="hidden mb-6 xl:block lg:w-72">
       <div className="sticky top-20">
+        {authors && (
+          <div className="p-6 mb-6 text-gray-500 rounded-lg border border-gray-200 dark:border-gray-700 dark:text-gray-400">
+            {authors &&
+              authors!.map((author, i) => {
+                return (
+                  <a
+                    href={author.url}
+                    className="flex items-center mb-4"
+                    target="_blank"
+                    rel="noreferrer"
+                    key={i}
+                  >
+                    <div className="mr-3 shrink-0">
+                      <img
+                        className="mt-1 w-8 h-8 rounded-full"
+                        src={author.image}
+                        alt={author.name}
+                      />
+                    </div>
+                    <div className="mr-3">
+                      <span className="block font-medium text-gray-900 dark:text-white">
+                        {author.name}
+                      </span>
+                      <span className="text-sm">{author.about}</span>
+                    </div>
+                  </a>
+                );
+              })}
+          </div>
+        )}
+
         <aside aria-labelledby="categories-label">
           <h3 id="categories-label" className="sr-only">
             Topics

packages/demo/pages/guides/index.tsx

@@ -28,6 +28,12 @@ const GuidesPage: NextPage = () => {
       link: '/guides/smart-contract',
       thumbnail: '/guides/integrating-smart-contract.png',
     },
+    {
+      title: 'Minting Reference Token',
+      desc: 'Something to describe this guide',
+      link: '/guides/minting-reference-token',
+      thumbnail: '/guides/?.png',
+    },
   ];
 
   return (

packages/demo/pages/guides/minting-reference-token.tsx

@@ -0,0 +1,71 @@
+import type { NextPage } from 'next';
+import Link from 'next/link';
+import GuidesLayout from '../../components/pages/guides/layout';
+import Codeblock from '../../components/ui/codeblock';
+import { Element } from 'react-scroll';
+import Metatags from '../../components/site/metatags';
+
+const GuideMintingReferenceTokenPage: NextPage = () => {
+  const sidebarItems = [
+    { label: 'System setup', to: 'systemsetup' },
+    { label: 'Project setup', to: 'projectsetup' },
+    // { label: 'Build minting transaction', to: 'minttx' },
+  ];
+
+  const authors = [
+    {
+      url: 'https://twitter.com/jamesdunseith',
+      image: 'https://pbs.twimg.com/profile_images/1582866510405636096/85X30CfV_400x400.jpg',
+      name: 'James Dunseith',
+      about: 'Co-founder Gimbalabs',
+    },
+  ];
+
+  let codePackage = `{\n`;
+  codePackage += `  ...\n`;
+  codePackage += `  "type": "module",\n`;
+  codePackage += `  "scripts": {\n`;
+  codePackage += `    "start": "tsc && node ./dist/main.js"\n`;
+  codePackage += `  }\n`;
+  codePackage += `  ...\n`;
+  codePackage += `}`;
+
+  return (
+    <>
+      <Metatags
+        title="Minting Reference Token"
+        description="Something to describe this guide"
+        image="/guides/minting-application.png"
+      />
+      <GuidesLayout
+        title="Minting Reference Token"
+        desc="Something to describe this guide"
+        sidebarItems={sidebarItems}
+        image="/guides/art-g68512aa8d_1280.jpg"
+        authors={authors}
+      >
+        <p>write about the purpose of this guide and who is it for</p>
+        <p>write some background here.</p>
+        <Element name="systemsetup">
+          <h2>First major component</h2>
+
+          <h3>1. do this first</h3>
+          <p>about this task</p>
+          <Codeblock data={`npm install --global yarn`} isJson={false} />
+
+          <h3>2. then do this</h3>
+          <p>some more things here</p>
+          <Codeblock data={codePackage} isJson={false} />
+        </Element>
+
+        <Element name="projectsetup">
+          <h2>another main component</h2>
+          <p>Firstly, you need to bla bla bla</p>
+          <Codeblock data={`yarn init .`} isJson={false} />
+        </Element>
+      </GuidesLayout>
+    </>
+  );
+};
+
+export default GuideMintingReferenceTokenPage;