getstaticpaths and getstaticprops

lobstahbots · Dec 23, 2023 · f4a85a8 · f4a85a8
1 parent 86fe069
commit f4a85a8
Show file tree

Hide file tree

Showing 5 changed files with 211 additions and 19 deletions.
diff --git a/app/blog/styles.module.css b/app/blog/styles.module.css
@@ -0,0 +1,6 @@
+.posts {
+  margin: auto;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
diff --git a/app/posts/[slug]/page.tsx b/app/posts/[slug]/page.tsx
@@ -1,28 +1,23 @@
-
-import { getPostBySlug } from "../../../lib/api";
+import { getAllPosts, getPostSlugs, getPostBySlug } from "../../../lib/api";
 import markdownToHtml from "../../../lib/markdownToHTML";
 import styles from "./styles.module.css";
 import Image from "next-image-export-optimizer";
 import Link from "next/link";
+import { InferGetStaticPropsType, GetStaticProps, GetStaticPaths } from 'next';
 
-export default async function Page ({ params }: { params: { slug: string } }) {
-
-  if(params.slug.includes(".txt")) {
-    console.log(params.slug.substring(0, params.slug.length-4));
-  }
-
-  const post = getPostBySlug(params.slug, ["title", "author", "content", "date"]);
+async function Page({ params }: { params: { slug: string } }) {
 
+   const getPost = getPostBySlug(params.slug, ["title", "author", "content", "date"]);
 
-  const content = await markdownToHtml(post["content"] || "");
+  const content = await markdownToHtml(getPost["content"] || "");
 
   return (
-    <div className = "section container">
-      <div className = { styles.logoLine }><Image className = {`responsive-image ${styles.logo}`} width = "564" height = "564" id="2" alt = "Logo" src = "https://mcusercontent.com/b62ff52e31b232a8696b02d06/images/5d14253b-cfaf-9ad4-6bb2-c09779fc9abd.png"/></div>
-      <div className = {styles.newsletterName}> <div id="17"> <p> <strong><span> NEWSLETTER </span><span className = {styles.vert}><span>|</span > </span><span className = {styles.date}> {post.date} </span> </strong></p> </div></div>    
+    <div className = "section container" >
+    <div className = { styles.logoLine }><Image className = {`responsive-image ${styles.logo}`} width = "564" height = "564" id="2" alt = "Logo" src = "https://mcusercontent.com/b62ff52e31b232a8696b02d06/images/5d14253b-cfaf-9ad4-6bb2-c09779fc9abd.png"/></div>
+      <div className = {styles.newsletterName}> <div id="17"> <p> <strong><span> NEWSLETTER </span><span className = {styles.vert}><span>|</span > </span><span className = {styles.date}> {getPost.date} </span> </strong></p> </div></div>    
       <div className = {styles.breakLine} > </div>
       <div className = {styles.content}> 
-        <h1 className = {styles.title} > {post.title} </h1>
+        <h1 className = {styles.title} > {getPost.title} </h1>
         < div className = { styles["markdown"]} dangerouslySetInnerHTML = {{ __html: content }} />
         </div>
         <div className = {styles.button}>
@@ -37,7 +32,32 @@ export default async function Page ({ params }: { params: { slug: string } }) {
   <Link href="mailto:lobstahbots@gmail.com" target = "_blank" > <Image className = { `responsive-image ${styles.icon}` } width = "40" height = "40" alt = "Email icon" src = "https://cdn-images.mailchimp.com/icons/social-block-v3/block-icons-v3/email-filled-dark-40.png"/> </Link> </div>
   <div className = { styles.icon }> <Link href = "https://lobstahbots.com" target = "_blank" > <Image className = { `responsive-image ${styles.icon}` } width = "40" height = "40" alt = "Website icon" src = "https://cdn-images.mailchimp.com/icons/social-block-v3/block-icons-v3/website-filled-dark-40.png"/> </Link> </div>
   </div>
-
     </div>
   );
 }
+
+export async function getStaticPaths() {
+
+  var paths = getPostSlugs();
+
+  paths = paths.map((bit) => { return ("/posts/".concat(bit.replace(/\.md$/, ''))); });
+
+  return {
+    paths,
+    fallback: true,
+  }
+}
+
+export async function getStaticProps({ params }: { params: { slug: string } }) {
+  console.log(params);
+  const slug = params.slug;
+  const post = await getPostBySlug(slug);
+
+  return {
+    props: {
+      post,
+    },
+  };
+}
+
+export default Page;
diff --git a/app/posts/styles.module.css b/app/posts/styles.module.css
@@ -1,6 +1,172 @@
-.posts {
+.logoLine {
+  padding-top: 12px;
+  padding-bottom: 0;
   margin: auto;
+}
+
+.logo {
+  height: auto;
+  width: 100%;
+  display: block;
+  margin: auto;
+}
+
+@media (min-width: 640px) {
+  .logo {
+    max-width: 564px;
+  }
+}
+
+.newsletterName {
+  padding-top: 0;
+  padding-bottom: 12px;
+  font-size: 1.25rem;
+  color: black;
+  font-weight: 400;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  margin: auto;
+  max-width: fit-content;
+}
+
+.vert {
+  color: #c40000;
+}
+
+.breakLine {
+  height: 7px;
+  background-color: #c40000;
+  border-radius: 5px 0px 5px 0px;
+  margin: 20px 50px;
+  margin: auto;
+  max-width: 100%;
+}
+
+@media (min-width: 640px) {
+  .breakLine {
+    max-width: 1000px;
+  }
+}
+
+.title {
+  font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
+  text-align: center;
+  font-size: 2.5rem;
+  padding-top: 1rem;
+}
+
+.date {
+  text-transform: uppercase;
+}
+
+.button {
+  margin: auto;
+  max-width: fit-content;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  margin-bottom: 2rem;
+}
+
+.donateButton {
+  background-color: var(--color-brand);
+  border: 2px solid var(--color-brand);
+  border-radius: 12px;
+  color: white;
+  padding: 12px 1.5rem;
+  transition: background-color 0.2s ease, color 0.2s ease;
+  font-weight: 500;
+  font-size: 1.25rem;
+}
+
+.donateButton:hover {
+  background-color: transparent;
+  color: var(--color-brand);
+}
+
+.mediaIcons {
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
+  gap: 3rem;
+  margin: auto;
+  align-items: center;
+  justify-content: center;
+  justify-items: center;
+  justify-self: center;
+  padding-top: 2rem;
+}
+
+.icon {
+  display: flex;
+  border: 0;
+  width: 50px;
+  height: auto;
+  max-width: 100%;
+  align-items: center;
+  justify-content: center;
+  justify-items: center;
+  justify-self: center;
+}
+
+.markdown {
+  margin: auto;
+  margin-bottom: 2rem;
+}
+
+@media (min-width: 1280px) {
+  .markdown {
+    width: 1280px;
+    padding: 0 10rem;
+  }
+}
+
+@media (min-width: 1536px) {
+  .markdown {
+    max-width: 1536px;
+    padding: 0 10rem;
+  }
+}
+
+.markdown p,
+.markdown ul,
+.markdown ol,
+.markdown blockquote {
+  font-size: 1.25rem;
+  font-weight: 200;
+  text-align: justify;
+}
+
+.markdown img {
+  width: 1000px;
+  height: auto;
+  max-width: 100%;
+  border-radius: 10px;
+  display: block;
+}
+
+.markdown h1,
+.markdown h2 {
+  font-weight: bold;
+  font-size: 2rem;
+  color: #c40000;
+  text-align: center;
+  line-height: 4rem;
+  margin-top: 2rem;
+}
+
+.markdown h4 {
+  background-color: transparent;
+  padding-top: 0;
+  padding-bottom: 12px;
+  text-align: center;
+  font-size: 1.25rem;
+  font-weight: 200;
+  color: gray;
+}
+
+.markdown a {
+  color: #c40000;
+}
+
+.markdown a:hover {
+  color: #c40000;
+  text-decoration: underline;
 }
diff --git a/components/postPreview.tsx b/components/postPreview.tsx
@@ -15,7 +15,7 @@ export default function PostPreview({ post }: { post: Items }) {
 
   return (
     <div className = {styles.preview}>
-    <Link className = { styles.title } href = { `/posts/${post["slug"]}`}> {post.title}
+    <Link className = { styles.title } href = { `/posts/${encodeURIComponent(post.slug)}`}> {post.title}
       </Link>
       <div> {post.date} </div>
     </div>

diff --git a/lib/api.ts b/lib/api.ts
@@ -23,7 +23,7 @@ export function getPostBySlug(slug: string, fields: string[] = []) {
   // Ensure only the minimal needed data is exposed
   fields.forEach((field) => {
     if (field === "slug") {
-      items[field] = slug;
+      items[field] = realSlug;
     }
     if (field === "content") {
       items[field] = content;