use TextLayout in privacy, terms and docs

components/jambonz-ui.js

@@ -163,4 +163,12 @@ export function Icon({ name, style = 'inline', subStyle = null, ...props }) {
 
   // Inline icon
   return <Component {...props} />;
-}
+}
+
+export function TextLayout({ data }) {
+  return (
+    <div className="text__layout">
+      <div dangerouslySetInnerHTML={{ __html: data.contentHtml }} />
+    </div>
+  );
+}

components/text-layout.js

@@ -1,11 +0,0 @@
-export default function TextLayout({ data }) {
-  return (
-    <div className="text__layout">
-      <div className="wrap text__layout__wrap">
-        <div className="text__layout__html">
-          <div dangerouslySetInnerHTML={{ __html: data.contentHtml }} />
-        </div>
-      </div>
-    </div>
-  );
-}

pages/docs/[[...slug]].js

@@ -7,7 +7,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 
 import Layout from '../../components/layout';
-import { Icon } from '../../components/jambonz-ui';
+import { Icon, TextLayout } from '../../components/jambonz-ui';
 import { getData, getDocs, getDocsPaths } from '../../lib/data';
 
 function Sidebar({data}) {
@@ -90,9 +90,7 @@ export default function Docs({ data, docs }) {
       <div className="docs">
         <div className="wrap docs__wrap">
           <Sidebar data={data.docs} />
-          <div className="docs__html">
-            <div dangerouslySetInnerHTML={{ __html: docs.contentHtml }} />
-          </div>
+          <TextLayout data={docs} />
         </div>
       </div>
     </Layout>

pages/privacy.js

@@ -1,25 +1,29 @@
 import Layout from '../components/layout';
-import { Hero } from '../components/jambonz-ui';
-import { getData, getDocs } from '../lib/data';
-import TextLayout from '../components/text-layout';
+import { Hero, TextLayout } from '../components/jambonz-ui';
+import { getData, getParsedMarkdown } from '../lib/data';
 
-export default function Privacy({ data, docs }) {
+// You'll need to load the nodejs path module
+import path from 'path';
+
+export default function Privacy({ data, parsed }) {
   return (
     <Layout siteData={data.site}>
       <Hero data={data.privacy.hero} subStyle="privacy" />
-      <TextLayout data={docs} />
+      <TextLayout data={parsed} />
     </Layout>
   );
 }
 
 export async function getStaticProps() {
   const data = getData('privacy');
-  const docs = await getDocs(['rest', 'privacy.md']);
+
+  // Use the new public method in a more ad hoc manner like this...
+  const parsed = await getParsedMarkdown(path.join(process.cwd(), 'pages', 'privacy.md'));
 
   return {
     props: {
       data,
-      docs,
+      parsed,
     },
   };
 }

pages/terms.js

@@ -1,25 +1,29 @@
 import Layout from '../components/layout';
-import { Hero } from '../components/jambonz-ui';
-import { getData, getDocs } from '../lib/data';
-import TextLayout from '../components/text-layout';
+import { Hero, TextLayout } from '../components/jambonz-ui';
+import { getData, getParsedMarkdown } from '../lib/data';
 
-export default function Terms({ data, docs }) {
+// You'll need to load the nodejs path module
+import path from 'path';
+
+export default function Terms({ data, parsed }) {
   return (
     <Layout siteData={data.site}>
       <Hero data={data.terms.hero} subStyle="terms" />
-      <TextLayout data={docs} />
+      <TextLayout data={parsed} />
     </Layout>
   );
 }
 
 export async function getStaticProps() {
   const data = getData('terms');
-  const docs = await getDocs(['rest', 'terms.md']);
+  
+  // Use the new public method in a more ad hoc manner like this...
+  const parsed = await getParsedMarkdown(path.join(process.cwd(), 'pages', 'terms.md'));
 
   return {
     props: {
       data,
-      docs,
+      parsed,
     },
   };
 }

styles/_layout.scss

@@ -82,6 +82,10 @@
     }
   }
 
+  &--privacy, &--terms {
+    padding-bottom: 16px;
+  }
+
   &__wrap {
     @include flex-cols();
   }

styles/_text-layout.scss

@@ -1,111 +1,100 @@
 $font-mono: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 
 .text__layout {
-  &__wrap {
-    margin: -80px auto 96px;
+  max-width: $width-tablet-2;
+  width: 100%;
+  margin: 0 auto;
+
+  @media (max-width: $width-tablet-1) {
+    max-width: 100%;
   }
 
-  &__html {
-    max-width: $width-tablet-2;
-    width: 100%;
-    margin: 0 auto;
-
-    @media (max-width: $width-tablet-1) {
-      max-width: 100%;
-    }
-
+  > div {
     h1 {
-      font-size: 42px;
+      @include h2();
     }
+
     h2 {
-      font-size: 32px;
+      @include h3();
     }
-    blockquote > p {
+
+    > p, > blockquote > p {
+      @include ms();
+    }
+
+    > blockquote > p {
+      font-family: 'objectivityregular_slanted';
       border-left: inset;
       padding-left: 10px;
-      font-size: 16px;
-      line-height: 2;
     }
 
-    > div {
-      > p, > blockquote > p {
-        @include ms();
-      }
+    > h1, > h2, > h3, > h4, > h5, > h6, > p, > div, > ul, > ol, > table, > blockquote {
+      margin: 16px 0;
+    }
 
-      > blockquote > p {
-        font-family: 'objectivityregular_slanted';
-      }
+    > ol {
+      padding-left: 16px;
 
-      > h1, > h2, > h3, > h4, > h5, > h6, > p, > div, > ul, > ol, > table, > blockquote {
+      > li {
+        list-style-type: decimal;
         margin: 16px 0;
-      }
 
-      > ol {
-        padding-left: 16px;
-
-        > li {
-          list-style-type: decimal;
-          margin: 16px 0;
-  
-          > p {
-            @include p();
-            font-size: 14px;
-          }
-        }
-      }
-
-      > ul {
-        padding-left: 48px;
-
-        @media (max-width: $width-tablet-1) {
-          padding-left: 32px;
-        }
-
-        > li {
-          list-style-type: disc;
+        > p {
           @include p();
           font-size: 14px;
         }
       }
+    }
 
+    > ul {
+      padding-left: 48px;
 
-      > table {
+      @media (max-width: $width-tablet-1) {
+        padding-left: 32px;
+      }
+
+      li {
+        list-style-type: disc;
         @include ms();
-        width: 100%;
+      }
+    }
 
-        td, th {
-          padding: 8px 12px;
-          border: 1px solid $grey-light;
-        }
+    > table {
+      @include ms();
+      width: 100%;
 
-        th {
-          @include font-bold();
-        }
-
-        tbody {
-          tr:nth-child(odd) {
-            background-color: $grey;
-          }
-        }
+      td, th {
+        padding: 8px 12px;
+        border: 1px solid $grey-light;
       }
 
-      code[class*="language-"],
-      pre[class*="language-"] {
-        font-size: 0.82em;
-
-        @media (max-width: $width-tablet-1) {
-          font-size: 13px;
-        }
+      th {
+        @include font-bold();
       }
 
-      code:not([class*="language-"]) {
-        font-family: $font-mono;
+      tbody {
+        tr:nth-child(odd) {
+          background-color: $grey;
+        }
+      }
+    }
+
+    code[class*="language-"],
+    pre[class*="language-"] {
+      font-size: 0.82em;
+
+      @media (max-width: $width-tablet-1) {
         font-size: 13px;
       }
     }
 
-    > div > :first-child {
-      margin-top: 0;
+    code:not([class*="language-"]) {
+      font-family: $font-mono;
+      font-size: 13px;
     }
   }
-}
+
+  > div > :first-child {
+    margin-top: 0;
+  }
+}

styles/pages/_docs.scss

@@ -28,91 +28,6 @@ $font-mono: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
     }
   }
 
-  &__html {
-    max-width: $width-tablet-2;
-    width: 100%;
-    margin: 0 auto;
-
-    @media (max-width: $width-tablet-1) {
-      max-width: 100%;
-    }
-
-    > div {
-      h1 {
-        @include h2();
-      }
-
-      h2 {
-        @include h3();
-      }
-
-      > p, > blockquote > p {
-        @include ms();
-      }
-
-      > blockquote > p {
-        font-family: 'objectivityregular_slanted';
-        border-left: inset;
-        padding-left: 10px;
-      }
-
-      > h1, > h2, > h3, > h4, > h5, > h6, > p, > div, > ul, > ol, > table, > blockquote {
-        margin: 16px 0;
-      }
-
-      > ol, > ul {
-        padding-left: 48px;
-
-        @media (max-width: $width-tablet-1) {
-          padding-left: 32px;
-        }
-
-        li {
-          list-style-type: disc;
-          @include ms();
-        }
-      }
-
-      > table {
-        @include ms();
-        width: 100%;
-
-        td, th {
-          padding: 8px 12px;
-          border: 1px solid $grey-light;
-        }
-
-        th {
-          @include font-bold();
-        }
-
-        tbody {
-          tr:nth-child(odd) {
-            background-color: $grey;
-          }
-        }
-      }
-
-      code[class*="language-"],
-      pre[class*="language-"] {
-        font-size: 0.82em;
-
-        @media (max-width: $width-tablet-1) {
-          font-size: 13px;
-        }
-      }
-
-      code:not([class*="language-"]) {
-        font-family: $font-mono;
-        font-size: 13px;
-      }
-    }
-
-    > div > :first-child {
-      margin-top: 0;
-    }
-  }
-
   &__item {
     margin-top: 16px;
   }