_app routing regex

components/cards/ArticleCardFeature.tsx

@@ -59,7 +59,7 @@ export function ArticleCardFeature(props: IPost) {
           <div className="flex-grow overflow-hidden">
             <p
               style={{ maxHeight: '7.25em' }}
-              className="overflow-hidden text-sm leading-tight "
+              className="overflow-hidden text-sm leading-tight"
             >
               {description.substring(0, 250)}...
             </p>

components/cards/CardGrid.tsx

@@ -18,10 +18,8 @@ export function CardGrid({ children }: Props) {
   const spacingX = `space-x-${spacing}`;
 
   const grouping = isHuge ? 4 : isDesktop ? 3 : isTablet ? 2 : 1;
-  const numPaddingCards = children.length % grouping;
-
-  console.log('CardGrid ➡️ grouping:', grouping);
-  console.log('CardGrid ➡️ paddingCards:', numPaddingCards);
+  const numPaddingCards =
+    Math.ceil(children.length / grouping) * grouping - children.length;
 
   // Add cards to ensure we fill up each row. Hidden where the row is incomplete
   // to keep even widths
@@ -30,8 +28,6 @@ export function CardGrid({ children }: Props) {
     ...Array.from(Array(numPaddingCards).keys()).map(i => <div key={i}></div>),
   ];
 
-  console.log('CardGrid ➡️ cards:', cards);
-
   return (
     <>
       {isMobile ? (

components/layout/index.tsx

@@ -1,5 +1,9 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useContext } from 'react';
+import { useSelector } from 'react-redux';
 import { UI } from '../../constants';
+import { ScreenContext } from '../../contexts/screen';
+import { PageType } from '../../state/navigation';
+import { IState } from '../../state/reducers';
 import { Header } from '../navigation/Header';
 import { SideMenu } from '../navigation/SideMenu';
 
@@ -8,6 +12,16 @@ interface Props {
 }
 
 export default function Layout({ children }: Props) {
+  const { isTablet, isDesktop } = useContext(ScreenContext);
+  const { pageType, sideMenuExpanded } = useSelector(
+    (state: IState) => state.navigation,
+  );
+
+  const marginLeft =
+    pageType === PageType.NORMAL && isTablet
+      ? UI.SIDE_MENU_SIDE_BAR_WIDTH_PX
+      : 0;
+
   return (
     <div
       style={{ height: '100vh', width: '100%' }}
@@ -22,7 +36,12 @@ export default function Layout({ children }: Props) {
         className="flex w-full h-full"
       >
         <SideMenu />
-        <div className="w-full py-6 overflow-y-auto duration-300 bg-alt">
+        <div
+          style={{
+            marginLeft: `${marginLeft}px`,
+          }}
+          className="w-full py-6 overflow-y-auto duration-300 bg-alt"
+        >
           {children}
         </div>
       </div>

components/navigation/SideMenuFullscreen.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { NAVIGATION, UI } from '../../constants';
+import { UI } from '../../constants';
 import { IState } from '../../state/reducers';
 import { SideMenuInner } from './SideMenuInner';
 import { SideBarMode, SideMenuSideBar } from './SideMenuSideBar';
@@ -15,11 +15,6 @@ export function SideMenuFullscreen({ withSideBar }: Props) {
     (state: IState) => state.navigation,
   );
 
-  console.log(
-    'SideMenuMobile ➡️ NAVIGATION.MENU_ITEMS:',
-    NAVIGATION.MENU_ITEMS,
-  );
-
   return (
     <div
       style={{

components/navigation/SideMenuSideBar.tsx

@@ -36,7 +36,11 @@ export function SideMenuSideBar({ mode }: Props) {
 
   const isBlog = pageType === PageType.BLOG;
   const isPost = pageType === PageType.POST;
-  const label = isPost ? postTitle : isBlog ? 'Blog' : selectedSideMenuItem;
+  const label = isPost
+    ? postTitle?.substr(0, 120)
+    : isBlog
+    ? 'Blog'
+    : selectedSideMenuItem;
   const isCollapsible = (isTablet || isMobile) && !isPost && !isBlog;
 
   const toggleSideMenu = () =>

constants/navigation.ts

@@ -91,18 +91,13 @@ const SIDE_MENU_ITEMS = {
     label: 'How can I find more?',
     href: '/explore',
   },
-  [SideMenuItem.BLOG]: {
-    id: 8,
-    label: 'Our blog',
-    href: '/blog',
-  },
 } as { [name: string]: ISideMenuItem };
 
 const NAVIGATION = {
   MENU_ITEMS,
   SIDE_MENU_ITEMS,
-  BLOG_REGEX: /^\/(blog)[/]?$/,
-  POST_REGEX: /^\/(blog\/\[slug\])[/]?$/,
+  BLOG_REGEX: /^\/(blog)[?tag=[\w]*]?$/,
+  POST_REGEX: /^\/(blog\/)(([\w-]{1,100})|(\[slug\]))$/,
 };
 
 export default NAVIGATION;

pages/_app.tsx

@@ -28,16 +28,17 @@ function App({ Component, pageProps }: AppProps) {
     const onBlog = NAVIGATION.BLOG_REGEX.test(url);
     const onPost = NAVIGATION.POST_REGEX.test(url);
 
-    console.log('_app ➡️ url:', url);
-    console.log('_app ➡️ onBlog:', onBlog);
-    console.log('_app ➡️ NAVIGATION.BLOG_REGEX:', NAVIGATION.BLOG_REGEX);
-
     const pageType = onBlog
       ? PageType.BLOG
       : onPost
       ? PageType.POST
       : PageType.NORMAL;
 
+    console.log('_app ➡️ url:', url);
+    console.log('_app ➡️ onBlog:', onBlog);
+    console.log('_app ➡️ onPost:', onPost);
+    console.log('_app ➡️ pageType:', pageType);
+
     store.dispatch(setPageType(pageType));
     store.dispatch(collapseSideMenu());
   };
@@ -47,11 +48,6 @@ function App({ Component, pageProps }: AppProps) {
     store.dispatch(setSplitPagesContent(pages));
     store.dispatch(collapseSideMenu());
     handleLocationChange(router.pathname);
-
-    console.log(
-      '_app ➡️ store.getState().navigation.pageType:',
-      store.getState().navigation.pageType,
-    );
   }, []);
 
   // Close side menu on page changed

pages/blog/[slug].tsx

@@ -1,17 +1,16 @@
 // [slug].js
 import Head from 'next/head';
 import React, { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { Article } from '../../components/article/Article';
 import { CmsApi } from '../../services/cms';
-import { setPostTitle } from '../../state/navigation';
-import { IState } from '../../state/reducers';
+import { PageType, setPageType, setPostTitle } from '../../state/navigation';
 import { IPost } from '../../types/cms';
 import { generateTitle } from '../../utils/metadata';
 
 export async function getServerSideProps({ params }) {
   const api = new CmsApi();
-  const post = await api.fetchBlogBySlug(String(params.slug) ?? '');
+  const post = await api.fetchBlogBySlug(String(params?.slug) ?? '');
 
   if (!post) {
     return {
@@ -24,13 +23,11 @@ export async function getServerSideProps({ params }) {
 }
 
 function Post({ post }: { post: IPost }) {
-  const { pageType, postTitle } = useSelector(
-    (state: IState) => state.navigation,
-  );
   const dispatch = useDispatch();
 
   useEffect(() => {
-    dispatch(setPostTitle(postTitle));
+    dispatch(setPageType(PageType.POST));
+    dispatch(setPostTitle(post.title));
   }, []);
 
   return (

pages/blog/index.tsx

@@ -1,24 +1,42 @@
-import { InferGetServerSidePropsType } from 'next';
+import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
 import Head from 'next/head';
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
 import { ArticleCard } from '../../components/cards/ArticleCard';
 import { ArticleCardFeature } from '../../components/cards/ArticleCardFeature';
 import { CardGrid } from '../../components/cards/CardGrid';
 import { Contained } from '../../components/Contained';
 import { CmsApi } from '../../services/cms';
+import { PageType, setPageType } from '../../state/navigation';
 import { generateTitle } from '../../utils/metadata';
 
-export async function getServerSideProps(context) {
+export const getServerSideProps: GetServerSideProps = async context => {
   const api = new CmsApi();
   const posts = await api.fetchBlogEntries();
 
-  console.log('index ➡️   posts:', posts);
+  // const { url } = context.req;
+  // const onBlog = NAVIGATION.BLOG_REGEX.test(url);
+  // const onPost = NAVIGATION.POST_REGEX.test(url);
+
+  // const pageType = onBlog
+  //   ? PageType.BLOG
+  //   : onPost
+  //   ? PageType.POST
+  //   : PageType.NORMAL;
+
   return { props: { posts } };
-}
+};
 
 const Blog = ({
   posts,
+  pageType,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(setPageType(PageType.BLOG));
+  }, []);
+
   return (
     <div>
       <Head>

services/cms.ts

@@ -43,7 +43,6 @@ export class CmsApi {
         'fields.slug[in]': slug,
       })
       .then(entries => {
-        console.log('blog ➡️           entries:', entries);
         if (entries && entries.items && entries.items.length > 0) {
           const post = this.convertPost(entries.items[0]);
           return post;
@@ -61,8 +60,6 @@ export class CmsApi {
       if (entries && entries.items && entries.items.length > 0) {
         const pagesArray = entries.items.map(entry => this.convertPage(entry));
 
-        console.log('cms ➡️ pagesArray:', pagesArray);
-
         const pages: TPages = {};
         pagesArray.forEach(page => {
           const pageExists = SideMenuItem[page.id];
@@ -86,7 +83,6 @@ export class CmsApi {
         'fields.id[in]': id,
       })
       .then(entries => {
-        console.log('blog ➡️           entries:', entries);
         if (entries && entries.items && entries.items.length > 0) {
           return this.convertPage(entries.items[0]);
         }
@@ -124,8 +120,6 @@ export class CmsApi {
       : null;
     const rawAuthor = rawPost.author ? rawPost.author.fields : null;
 
-    console.log('blog ➡️ author', rawAuthor);
-
     return {
       id: rawData.sys.id ?? null,
       body: rawPost.body ?? null,