From f4a85a8c57833ab2f8aa0d7e4b6ed2f4ff09852f Mon Sep 17 00:00:00 2001 From: kchenturtles <94144671+kchenturtles@users.noreply.github.com> Date: Sat, 23 Dec 2023 11:19:21 -0500 Subject: [PATCH] getstaticpaths and getstaticprops --- app/blog/styles.module.css | 6 ++ app/posts/[slug]/page.tsx | 50 +++++++---- app/posts/styles.module.css | 170 +++++++++++++++++++++++++++++++++++- components/postPreview.tsx | 2 +- lib/api.ts | 2 +- 5 files changed, 211 insertions(+), 19 deletions(-) create mode 100644 app/blog/styles.module.css diff --git a/app/blog/styles.module.css b/app/blog/styles.module.css new file mode 100644 index 0000000..be552c4 --- /dev/null +++ b/app/blog/styles.module.css @@ -0,0 +1,6 @@ +.posts { + margin: auto; + display: flex; + flex-wrap: wrap; + gap: 1rem; +} \ No newline at end of file diff --git a/app/posts/[slug]/page.tsx b/app/posts/[slug]/page.tsx index 15da861..1ec7977 100644 --- 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 ( -
-
Logo
-

NEWSLETTER | {post.date}

+
+
Logo
+

NEWSLETTER | {getPost.date}

-

{post.title}

+

{getPost.title}

< div className = { styles["markdown"]} dangerouslySetInnerHTML = {{ __html: content }} />
@@ -37,7 +32,32 @@ export default async function Page ({ params }: { params: { slug: string } }) { Email icon
Website icon
-
); } + +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; \ No newline at end of file diff --git a/app/posts/styles.module.css b/app/posts/styles.module.css index be552c4..5e52f41 100644 --- 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; } \ No newline at end of file diff --git a/components/postPreview.tsx b/components/postPreview.tsx index 3782873..e1ad38d 100644 --- a/components/postPreview.tsx +++ b/components/postPreview.tsx @@ -15,7 +15,7 @@ export default function PostPreview({ post }: { post: Items }) { return (
- {post.title} + {post.title}
{post.date}
diff --git a/lib/api.ts b/lib/api.ts index f5c77ed..40aac48 100644 --- 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;