Roadmap aspect ratios

assets/svgs/socials/session.svg

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   viewBox="0 0 650 650"
+   xml:space="preserve"
+   id="svg2"
+   version="1.1"
+   sodipodi:docname="session.svg"
+   inkscape:version="1.0.1 (0767f8302a, 2020-10-17)"><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1014"
+     id="namedview12"
+     showgrid="false"
+     inkscape:zoom="0.96675634"
+     inkscape:cx="-18.247714"
+     inkscape:cy="227.84825"
+     inkscape:window-x="1080"
+     inkscape:window-y="34"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2" /><metadata
+     id="metadata8"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs6"><clipPath
+       id="clipPath18"
+       clipPathUnits="userSpaceOnUse"><path
+         id="path16"
+         d="M 0,336.305 H 303.064 V 0 H 0 Z" /></clipPath></defs><g
+     transform="matrix(1.3333333,0,0,-1.3333333,127.84248,540.25561)"
+     id="g10"
+     style="fill:#000000;fill-opacity:1"><g
+       id="g12"
+       style="fill:#000000;fill-opacity:1"><g
+         clip-path="url(#clipPath18)"
+         id="g14"
+         style="fill:#000000;fill-opacity:1"><g
+           transform="translate(216.4556,21.0229)"
+           id="g20"
+           style="fill:#000000;fill-opacity:1"><path
+             id="path22"
+             style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             d="m 0,0 h -147.251 c -25.182,0 -46.881,19.311 -48.123,44.461 -1.328,26.885 20.162,49.182 46.765,49.182 h 84.804 c 5.189,0 9.395,4.206 9.395,9.394 v 69.229 L 29.025,126.032 C 51.087,113.807 64.975,90.781 65.565,65.646 66.415,29.551 36.104,0 0,0 m -158.872,168.227 c -22.062,12.225 -35.95,35.251 -36.541,60.386 -0.849,36.095 29.462,65.646 65.565,65.646 H 17.403 c 25.182,0 46.881,-19.311 48.124,-44.462 1.328,-26.884 -20.162,-49.181 -46.764,-49.181 0,0 -60.987,-0.01 -84.808,-0.014 -5.186,-0.001 -9.374,-4.206 -9.376,-9.392 l -0.016,-69.217 z M 39.213,144.42 -24.265,179.593 h 43.028 c 37.408,0 67.845,30.434 67.845,67.843 0,37.408 -30.437,67.846 -67.845,67.846 h -150.224 c -46.864,0 -84.995,-38.131 -84.995,-84.995 0,-33.425 18.162,-64.248 47.396,-80.449 l 63.477,-35.172 h -43.026 c -37.41,0 -67.847,-30.435 -67.847,-67.843 0,-37.408 30.437,-67.846 67.847,-67.846 H 1.613 c 46.866,0 84.995,38.13 84.995,84.995 0,33.425 -18.162,64.248 -47.395,80.448" /></g></g></g></g></svg>

components/navigation/SideMenuInner.tsx

@@ -7,6 +7,7 @@ import { v4 as uuid } from 'uuid';
 import DiscordSVG from '../../assets/svgs/socials/discord.svg';
 import GithubSVG from '../../assets/svgs/socials/github.svg';
 import RedditSVG from '../../assets/svgs/socials/reddit.svg';
+import SessionSVG from '../../assets/svgs/socials/session.svg';
 import TelegramSVG from '../../assets/svgs/socials/telegram.svg';
 import TwitterSVG from '../../assets/svgs/socials/twitter.svg';
 import YouTubeSVG from '../../assets/svgs/socials/youtube.svg';
@@ -141,6 +142,13 @@ const SocialsRow = () => {
       >
         <RedditSVG className="h-12 placeholder-current duration-300 border rounded-full cursor-pointer fill-current stroke-current tablet:h-10 hover:bg-primary hover:text-secondary border-primary" />
       </a>
+      <a
+        href="#"
+        // target="_blank"
+        // rel="noreferrer"
+      >
+        <SessionSVG className="h-12 placeholder-current duration-300 border rounded-full cursor-pointer fill-current stroke-current tablet:h-10 hover:bg-primary hover:text-secondary border-primary" />
+      </a>
     </div>
   );
 };

pages/[page].tsx

@@ -43,8 +43,8 @@ export async function getStaticProps({ params }) {
     };
   }
 
-  const api = new CmsApi();
-  const page = await api.fetchPageById(SideMenuItem[id]);
+  const cms = new CmsApi();
+  const page = await cms.fetchPageById(SideMenuItem[id]);
 
   if (!page) {
     return { notFound: true };
@@ -66,8 +66,6 @@ function Page({
   page: ISplitPage | null;
   isRoadmap?: boolean;
 }) {
-  console.log('[page] ➡️ isRoadmap:', isRoadmap);
-
   const dispatch = useDispatch();
   useEffect(() => {
     dispatch(setPageType(PageType.NORMAL));
@@ -86,73 +84,23 @@ function Page({
       </Head>
 
       <div className="bg-alt">
-        {isRoadmap ? (
-          <Roadmap />
-        ) : (
-          <>
-            <div className="relative flex items-center justify-center w-full h-full pt-3 bg-gradient-to-bl from-hyper to-blush">
-              <img
-                style={{ maxHeight: '33vh' }}
-                src={page?.hero?.imageUrl}
-                className="object-contain w-full"
-              />
-            </div>
-
-            <Contained>
-              <h1 className="mt-12 mb-4 text-4xl font-bold leading-none text-primary font-prompt">
-                {page?.title}
-              </h1>
-
-              <div className="mb-10">
-                <RichBody body={page?.body} />
-              </div>
-            </Contained>
-          </>
-        )}
-      </div>
-    </>
-  );
-}
-
-function Roadmap() {
-  return (
-    <>
-      <h1 className="px-6 mt-12 -mb-3 text-3xl font-medium tablet:text-5xl font-prompt text-primary">
-        Oxen's 2021 Roadmap
-      </h1>
-
-      <div className="aspect-w-16 aspect-h-10">
-        <div className="flex items-center justify-center">
+        <div className="relative flex items-center justify-center w-full h-full pt-3 bg-gradient-to-bl from-hyper to-blush">
           <img
-            style={{ maxHeight: '90%' }}
-            src={'img/roadmap.png'}
-            className="w-full"
-          />
-        </div>
-      </div>
-
-      <div className="flex flex-col px-6 pb-6 space-y-10">
-        <div>
-          <h2 className="mt-6 mb-3 text-3xl font-medium tablet:text-4xl font-prompt text-primary">
-            Session in 2021
-          </h2>
-          <img
-            style={{ maxHeight: '90%' }}
-            src={'img/session-roadmap.jpg'}
-            className="w-full rounded-md"
+            style={{ maxHeight: '33vh' }}
+            src={page?.hero?.imageUrl}
+            className="object-contain w-full"
           />
         </div>
 
-        <div>
-          <h2 className="mt-6 mb-3 text-3xl font-medium tablet:text-4xl font-prompt text-primary">
-            Lokinet in 2021
-          </h2>
-          <img
-            style={{ maxHeight: '90%' }}
-            src={'img/lokinet-roadmap.jpg'}
-            className="w-full rounded-md"
-          />
-        </div>
+        <Contained>
+          <h1 className="mt-12 mb-4 text-4xl font-bold leading-none text-primary font-prompt">
+            {page?.title}
+          </h1>
+
+          <div className="mb-10">
+            <RichBody body={page?.body} />
+          </div>
+        </Contained>
       </div>
     </>
   );

pages/blog/[slug].tsx

@@ -13,25 +13,20 @@ interface IPath {
 }
 
 export async function getStaticPaths() {
-  const api = new CmsApi();
+  const cms = new CmsApi();
   let posts: IPost[] = [];
   let page = 1;
   let foundAllPosts = false;
 
   // Contentful only allows 100 at a time
   while (!foundAllPosts) {
-    const { posts: _posts } = await api.fetchBlogEntries(100, page);
+    const { posts: _posts } = await cms.fetchBlogEntries(100, page);
 
     if (_posts.length === 0) {
       foundAllPosts = true;
       continue;
     }
 
-    console.log('[slug] ➡️ page:', page);
-    console.log('[slug] ➡️ foundAllPosts:', foundAllPosts);
-    console.log('[slug] ➡️ _posts.length:', _posts.length);
-    console.log('[slug] ➡️ posts.length:', posts.length);
-
     posts = [...posts, ..._posts];
     page++;
   }
@@ -44,10 +39,10 @@ export async function getStaticPaths() {
 }
 
 export async function getStaticProps({ params }) {
-  console.log(`Building page: ${params.slug}`);
+  console.log(`Building page: %c${params.slug}`, 'color: purple;');
 
-  const api = new CmsApi();
-  const post = await api.fetchBlogBySlug(String(params?.slug) ?? '');
+  const cms = new CmsApi();
+  const post = await cms.fetchBlogBySlug(String(params?.slug) ?? '');
 
   if (!post) {
     return { notFound: true };

pages/blog/index.tsx

@@ -16,7 +16,7 @@ import { IPost } from '../../types/cms';
 import { generateTitle } from '../../utils/metadata';
 
 export const getServerSideProps: GetServerSideProps = async context => {
-  const api = new CmsApi();
+  const cms = new CmsApi();
 
   // Get tag query
   const tag = String(context.query.tag ?? '') ?? null;
@@ -25,7 +25,7 @@ export const getServerSideProps: GetServerSideProps = async context => {
   // Fetch posts even when tag, for related etc
   // Pagination only occurs when tag isnt defined.
   // If tag is defined, pagination is for tag results
-  const { posts, total: totalPosts } = await api.fetchBlogEntries(
+  const { posts, total: totalPosts } = await cms.fetchBlogEntries(
     tag ? 8 : CMS.BLOG_RESULTS_PER_PAGE,
     tag ? 1 : page,
   );
@@ -37,7 +37,7 @@ export const getServerSideProps: GetServerSideProps = async context => {
     const {
       posts: _tagPosts = [],
       total: _tagTotalPosts,
-    } = await api.fetchBlogEntriesByTag(
+    } = await cms.fetchBlogEntriesByTag(
       tag ?? '',
       CMS.BLOG_RESULTS_PER_PAGE,
       page,

pages/roadmap.tsx

@@ -0,0 +1,70 @@
+import Head from 'next/head';
+import React from 'react';
+import { useMeasure } from 'react-use';
+import { NAVIGATION } from '../constants';
+import { SideMenuItem } from '../state/navigation';
+import { generateTitle } from '../utils/metadata';
+
+function Roadmap() {
+  const [ref, { width, height }] = useMeasure();
+  const aspectRatio = width / height;
+
+  // Control the aspect ratio of the page images
+  const horizontal = width > 600 && aspectRatio > 0.65;
+
+  console.log('roadmap ➡️ horizontal:', horizontal);
+
+  console.log('roadmap ➡️ height:', height);
+  console.log('roadmap ➡️ width:', width);
+  console.log('roadmap ➡️ ratio:', aspectRatio);
+
+  return (
+    <>
+      <Head>
+        <title>
+          {generateTitle(
+            NAVIGATION.SIDE_MENU_ITEMS[SideMenuItem.ROADMAP].label,
+          )}
+        </title>
+      </Head>
+
+      <div className="mx-4">
+        <div className="flex items-center justify-center mt-8">
+          <img
+            style={{ maxHeight: '90%' }}
+            src={`img/roadmap-${horizontal ? 'x' : 'y'}.png`}
+            className="w-full"
+          />
+        </div>
+      </div>
+
+      <div ref={ref} className="w-full h-full">
+        <div className="flex flex-col px-6 pb-6 space-y-10">
+          <div>
+            <h2 className="mt-6 mb-3 text-3xl font-medium text-center tablet:text-4xl font-prompt text-primary">
+              Session in 2021
+            </h2>
+            <img
+              style={{ maxHeight: horizontal ? '90%' : 'auto' }}
+              src={`img/session-${horizontal ? 'x' : 'y'}.jpg`}
+              className="w-full rounded-md"
+            />
+          </div>
+
+          <div>
+            <h2 className="mt-6 mb-3 text-3xl font-medium text-center tablet:text-4xl font-prompt text-primary">
+              Lokinet in 2021
+            </h2>
+            <img
+              style={{ maxHeight: '90%' }}
+              src={`img/lokinet-${horizontal ? 'x' : 'y'}.jpg`}
+              className="w-full rounded-md"
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Roadmap;