mito-ds · marthacryan · Feb 20, 2024 · Feb 15, 2024 · Feb 15, 2024 · Feb 15, 2024
diff --git a/trymito.io/components/CTACards/DownloadCTACard.tsx b/trymito.io/components/CTACards/DownloadCTACard.tsx
@@ -1,11 +1,11 @@
 import titleStyles from '../../styles/Title.module.css';
 import CTAButtons from '../CTAButtons/CTAButtons';
 
-const DownloadCTACard = (): JSX.Element => {
+const DownloadCTACard = (props: { headerStyle?: React.CSSProperties}): JSX.Element => {
 
     return (
         <div> 
-            <h2 className={titleStyles.title}>
+            <h2 style={props.headerStyle} className={titleStyles.title}>
                 Want to install Mito locally?
             </h2>
             <div className='center'>

diff --git a/trymito.io/components/Glossary/PageTOC/PageTOC.tsx b/trymito.io/components/Glossary/PageTOC/PageTOC.tsx
@@ -9,9 +9,11 @@ type Heading = {
 
     // The level of the heading (e.g., "h2", "h3") is used to determine the indentation of the TOC item
     level: string;
+
+    text: string;
 }
 
-const PageTOC = () => {
+const PageTOC = (props: { style?: React.CSSProperties }) => {
     const [headings, setHeadings] = useState<Heading[]>([]);
     const [activeHeading, setActiveHeading] = useState<Heading | undefined>(undefined);
 
@@ -23,6 +25,7 @@ const PageTOC = () => {
         const headingsArray: Heading[] = Array.from(headingElements).map((heading) => ({
             level: heading.tagName.toLowerCase(),
             id: heading.id,
+            text: heading.textContent!,
         })).filter((heading) => heading.id !== "");
 
         setHeadings(headingsArray);
@@ -97,8 +100,12 @@ const PageTOC = () => {
         }
     };
 
+    if (headings.length === 0) {
+        return null;
+    }
+
     return (
-        <aside className={pageTOCStyles.container}>
+        <aside style={props.style} className={pageTOCStyles.container}>
             <p>On this Page</p>
             {headings.map((heading) => (
                 <p
@@ -111,7 +118,7 @@ const PageTOC = () => {
                         {'text-highlight': activeHeading?.id === heading.id}
                     )}
                 >
-                    {heading.id}
+                    {heading.text}
                 </p>
             ))}
         </aside>

diff --git a/trymito.io/pages/blog/[slug].tsx b/trymito.io/pages/blog/[slug].tsx
@@ -5,11 +5,12 @@ import { GetStaticProps } from 'next/types';
 import { useEffect } from 'react';
 import DownloadCTACard from '../../components/CTACards/DownloadCTACard';
 import Footer from '../../components/Footer/Footer';
-import Header from '../../components/Header/Header';
+import PageTOC from '../../components/Glossary/PageTOC/PageTOC';
 import pageStyles from '../../styles/Page.module.css';
 import postStyles from '../../styles/[slug].module.css';
 import { getPosts, getSinglePost } from '../../utils/posts';
 import { SLUG_REDIRECTS } from '../blog';
+import Header from '../../components/Header/Header';
 
 declare global {
   interface Window { Prism: any; }
@@ -28,61 +29,77 @@ const PostPage = (props: {post: PostOrPage}) => {
   }
 
   const authorName = props.post.primary_author?.name;
-  const pulishedAt = props.post.published_at && new Intl.DateTimeFormat('en-US').format(new Date(props.post.published_at));
+  const publishedAt = props.post.published_at && new Intl.DateTimeFormat('en-US').format(new Date(props.post.published_at));
+  const readingTime = props.post.reading_time;
 
   return (
     <>
+      {/* Standard Mito header - includes navigation for the website. */}
       <Head>
-          <title>{props.post.title} | Mito </title>
-          <meta
-            name="description"
-            content={props.post.meta_description || props.post.excerpt?.slice(0, 99)}
-          />
-          <meta name="viewport" content="width=device-width, initial-scale=1" />
-        </Head>
+        <title>{props.post.title} | Mito </title>
+        <meta
+          name="description"
+          content={props.post.meta_description || props.post.excerpt?.slice(0, 99)}
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </Head>
+
+      <Header />
 
-        <Header/>
-
-        <div className={pageStyles.container}>
-          <main className={pageStyles.main}>
-
-            <div className={postStyles.post}>
-              <div className={postStyles.post_title}>
-
-                <div className={postStyles.post_metadata}>
-                  {authorName &&
-                    <p>
-                      By {props.post.primary_author?.name}
-                    </p>
-                  }
-                  {!authorName &&
-                    <p>
-                      The Mito Team
-                    </p>
-                  }
-                  {/* A line with space on either side*/}
-                  <p style={{marginLeft: '.5rem', marginRight: '.5rem'}}> - </p>
-                  {pulishedAt &&
-                    <p>
-                      {pulishedAt}
-                    </p>
-                  }
-                </div>
-                <h1 style={{marginTop: '0'}}>{props.post.title}</h1>
+      {/* All blog post related content */}
+      <main className={pageStyles.main}>
+        <div className={postStyles.post}>
+
+        {/* Blog Title Banner */}
+        <div className={postStyles.post_title}>
+            <div className={postStyles.post_metadata}>
+              <p>
+                { authorName ? 'By '+ props.post.primary_author?.name: 'The Mito Team' }
+              </p>
+              {publishedAt && <p style={{ marginLeft: '15px' }}> {publishedAt}</p>}
+              {readingTime && <p style={{ marginLeft: '15px'}}>{readingTime} min read</p>}
             </div>
-              <div className={postStyles.post_content}>
+            <h1 style={{marginTop: '0'}}>{props.post.title}</h1>
+          </div>
+
+          {/* Table of Contents, post contents, and CTA */}
+          <div style={{ display: 'flex', flexDirection: 'row', alignContent: 'space-between' }}>
+            {/* Table of Contents */}
+            <div className={postStyles.post_toc}>
+              <PageTOC />
+            </div>
+            {/* Post Contents */}
+            <div className={postStyles.post_content}>
                 <div dangerouslySetInnerHTML={{ __html: props.post.html }} />
-              </div>
             </div>
 
-            <section className={pageStyles.background_card}>
-              <DownloadCTACard />
-            </section>
-          </main>
-
-          <Footer />
+            {/* CTA */}
+            <div className={postStyles.post_cta}>
+              <DownloadCTACard headerStyle={{ fontSize: '2rem', color: 'var(--color-light-background-accent)', fontWeight: 'normal' }} />
+            </div>
+          </div>
         </div>
-      </>
+
+        {/* Suggested Blogs */}
+        <div className={postStyles.suggested_blogs_section}>
+          <h1>More Like This</h1>
+          <div className={postStyles.suggested_blogs_links}>
+            { /* For each post, render a card with the post title and excerpt */}
+            { ['','','','', '',''].map((value, index) => {
+              return (
+                <div key={index} className={postStyles.suggested_blog_card}>
+                  <h2>Post Title</h2>
+                  <p>Post Excerpt</p>
+                </div>
+              )
+            }) }
+          </div>
+        </div>
+
+        {/* Footer */}
+        <Footer />
+      </main>
+    </>
   )
 }
 

diff --git a/trymito.io/styles/[slug].module.css b/trymito.io/styles/[slug].module.css
@@ -2,18 +2,35 @@
 .post {
     margin-top: 4rem;
     margin-bottom: 4rem;
+    font-family: Inter, Ubuntu, Helvetica, Arial, sans-serif;
+}
+
+.post a {
+    text-decoration: underline 0.15em rgba(0, 0, 0, 0);
+    transition: text-decoration-color 300ms;
+}
+
+.post a:hover {
+text-decoration-color: rgba(0, 0, 0, 1);
 }
 
 .post_title {
-    max-width: min(800px, 90vw);
+    background-color: var(--color-purple);
+    padding: 50px 325px;
+    width: 100%;
 }
 
 .post_title h1 {
     font-size: 3rem;
 }
 
+.post_title p {
+    margin-top: 0
+}
+
 .post_content {
-    max-width: min(720px, 90vw);
+    margin: 0 30px;
+    max-width: 720px;
 }
 
 /* Make lists start at the right place*/
@@ -47,17 +64,22 @@
 
 .post_content h1 {
     margin-top: 3rem;
+    font-size: 2.7rem;
 }
 .post_content h2 {
     margin-top: 2rem;
+    font-size: 2.3rem;
 }
 .post_content h3 {
     margin-top: 2rem;
 }
-.post_content figcaption {
-    color: var(--color-text-secondary);
-    font-size: .7rem;
-    text-align: center;
+.post_content p, .post_content li, .post_content a {
+    font-size: 1.4rem;
+    color: var(--color-text-primary);
+    font-weight: 100;
+}
+.post_content a {
+    color: var(--color-purple);
 }
 
 .post_content blockquote {
@@ -102,11 +124,75 @@
   border-bottom: 1.5px solid black; 
 }
 
+.post_toc {
+    width: 265px;
+    min-width: 265px;
+    height: fit-content;
+    position: sticky;
+    top: 67px;
+    margin-left: 30px;
+}
+
 .post_content table thead {
     background-color: black;
     border-radius: 1rem;
 }
 
+.post_cta {
+    width: 265px;
+    min-width: 265px;
+    height: fit-content;
+    position: sticky;
+    top: 100px;
+    right: 0;
+    background-color: #F2C94C;
+    border-radius: 15px;
+    padding: 30px 30px 0 30px;
+    margin-right: 30px;
+    margin-top: 30px;
+}
+
+.suggested_blogs_section {
+    margin: 60px;
+    display: flex;
+    flex-direction: column;
+}
+
+.suggested_blogs_section h1 {
+    margin: 30px;
+    color: var(--color-light-purple);
+}
+
+.suggested_blogs_links {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.suggested_blog_card {
+    width: 250px;
+    margin: 30px;
+}
+
+@media only screen and (max-width: 1400px) {
+    .post_cta {
+        display: none;
+    }
+
+    .post_title {
+        padding: 50px 100px 50px 325px;
+    }
+}
+
+@media only screen and (max-width: 800px) {
+    .post_toc {
+        display: none;
+    }
+
+    .post_title {
+        padding: 50px;
+    }
+}
+
 @media only screen and (min-width: 50em) {
     .post_content blockquote {
         font-size: 1.5rem;