fix: 🐛 Build ability (#9)

## Status **READY** ## Description - Fixed broken static page building due to the changes that I last made. - Changed `yarn` commands to `npm`.
aweandreverence · Dec 14, 2023 · 982bbc0 · 982bbc0
1 parent 5d71b4d
commit 982bbc0
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 1,633 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+v20.10.0
diff --git a/Makefile b/Makefile
@@ -4,23 +4,23 @@ help:
 
 ## install - install dependency packages
 install:
-	yarn install
+	npm install
 
 ## dev - starts the Next.js development server on port 3000
 dev: install
-	yarn run dev
+	npm run dev
 
 ## run - run the Next.js app server
 run: install
-	yarn run build && yarn run start
+	npm run build && npm run start
 
 ## clean - clean previous builds
 clean:
 	rm -rf out/*
 
 ## build - build the app for release
 build: clean install
-	yarn build
+	npm run build
 	cp CNAME out/
 	touch out/.nojekyll
 

diff --git a/README.md b/README.md
@@ -1,2 +1,17 @@
 # www.theology101.church
 https://www.theology101.church powered by NextJS + GitHub
+
+## Installation
+
+All required commands are in `Makefile`.
+
+- **`make` | `make help`** Shows list of available commands.
+- **`make install`** Installs required external packages.
+- **`make dev`** Runs the project in `dev` mode.
+- **`make build`** Runs build scripts and generates static pages.
+
+## Development process
+
+- Run the `dev` server with `make dev`
+- When your job is done, check if the static page building is working or not
+  with `make build` and ensure that no errors are being produced.
diff --git a/components/topics_tags.jsx b/components/topics_tags.jsx
@@ -1,25 +1,10 @@
 import React from 'react';
-import { useRouter } from 'next/router';
 
-import { NAMES_BY_SLUG } from '@constants/seo';
-import THEOLOGY101_DATA from '@data/theology101.json';
 import { VideoCard } from '@components/video_card';
-import Custom404 from '@pages/404';
 import Head from 'next/head';
 import { buildTitle } from '@utils/seo';
 
-export function TopicsTagsPage({ title, type, lookup }) {
-    const {
-        query: { slug },
-    } = useRouter();
-
-    const entry = NAMES_BY_SLUG[type][slug];
-    if (!entry) {
-        return <Custom404 />;
-    }
-
-    const videoIds = THEOLOGY101_DATA.lookups[lookup][entry] || [];
-
+export function TopicsTagsPage({ title, entry, videoIds }) {
     return (
         <>
             <Head>

diff --git a/pages/tags/[slug].jsx b/pages/tags/[slug].jsx
@@ -1,5 +1,10 @@
+import { staticPathFactory, categoryStaticPropsFactory } from '@utils/static';
 import { TopicsTagsPage } from '@components/topics_tags';
 
-export default function Page() {
-    return <TopicsTagsPage title="Tag" type="tags" lookup="tag" />;
+export const getStaticPaths = staticPathFactory('tags');
+
+export const getStaticProps = categoryStaticPropsFactory('tags');
+
+export default function Page({ entry, videoIds }) {
+    return <TopicsTagsPage title="Tag" entry={entry} videoIds={videoIds} />;
 }
diff --git a/pages/topics/[slug].jsx b/pages/topics/[slug].jsx
@@ -1,5 +1,10 @@
+import { staticPathFactory, categoryStaticPropsFactory } from '@utils/static';
 import { TopicsTagsPage } from '@components/topics_tags';
 
-export default function Page() {
-    return <TopicsTagsPage title="Topic" type="topics" lookup="topic" />;
+export const getStaticPaths = staticPathFactory('topics');
+
+export const getStaticProps = categoryStaticPropsFactory('topics');
+
+export default function Page({ entry, videoIds }) {
+    return <TopicsTagsPage title="Topic" entry={entry} videoIds={videoIds} />;
 }
diff --git a/pages/videos/[slug].jsx b/pages/videos/[slug].jsx
@@ -1,34 +1,33 @@
 import Head from 'next/head';
-import { useRouter } from 'next/router';
 
-import Custom404 from '@pages/404';
 import { VideoTags } from '@components/video_tags';
 import { buildTitle } from '@utils/seo';
 
+import { staticPathFactory } from '@utils/static';
 import THEOLOGY101_DATA from '@data/theology101.json';
 
-export default function Page() {
-    const {
-        query: { slug },
-    } = useRouter();
+export const getStaticPaths = staticPathFactory('video_id');
 
+export const getStaticProps = ({ params: { slug } }) => {
     const video = THEOLOGY101_DATA.lookups.video_id[slug];
-    if (!video) {
-        return <Custom404 />;
-    }
+    return video ? { props: { video } } : { notFound: true };
+};
+
+export default function Page({ video }) {
+    const title = video.lessonName !== null ? video.lessonName : video.title;
 
     return (
         <>
             <Head>
                 <title>
-                    {buildTitle(`${video.lessonName || video.title}`)}
+                    {buildTitle(title)}
                 </title>
             </Head>
-            <h3 className="my-5">{video.lessonName || video.title}</h3>
+            <h3 className="my-5">{title}</h3>
             <div className="ratio ratio-16x9">
                 <iframe
                     src={`https://www.youtube.com/embed/${video.videoId}`}
-                    title={video.title}
+                    title={title}
                     frameBorder="0"
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                     allowFullScreen

diff --git a/utils/static.js b/utils/static.js
@@ -0,0 +1,25 @@
+import THEOLOGY101_DATA from '@data/theology101.json';
+import { NAMES_BY_SLUG } from '@constants/seo';
+
+export function staticPathFactory(key) {
+    const obj = key == 'video_id' ? THEOLOGY101_DATA.lookups : NAMES_BY_SLUG;
+    return async () => ({
+        paths: Object.keys(obj[key]).map((slug) => ({
+            params: { slug },
+        })),
+        fallback: false,
+    });
+}
+
+export function categoryStaticPropsFactory(category) {
+    return async ({ params: { slug } }) => {
+        const entry = NAMES_BY_SLUG[category][slug];
+
+        return entry ? {
+            props: {
+                entry,
+                videoIds: THEOLOGY101_DATA.lookups.tag[entry] || [],
+            },
+        } : { notFound: true };
+    };
+}