Updates

components/pages/blog/(sections)/BlogPostsList.tsx

@@ -0,0 +1,25 @@
+import EmptyContent from "@/components/lib/elements/EmptyContent";
+import Section from "@/components/lib/layout/Section";
+import { AppContext } from "@/pages/_app";
+import React from "react";
+import BlogPostsListCard from "./BlogPostsListCard";
+import Stack from "@/components/lib/layout/Stack";
+
+export default function BlogPostsList() {
+    const { pageProps } = React.useContext(AppContext);
+    const { blogPosts } = pageProps;
+
+    if (!blogPosts?.[0]) {
+        return <EmptyContent title={`No Blog Posts at this moment`} />;
+    }
+
+    return (
+        <Section className="!mt-0 !pt-0">
+            <Stack className="w-full">
+                {blogPosts.map((post, index) => {
+                    return <BlogPostsListCard post={post} key={index} />;
+                })}
+            </Stack>
+        </Section>
+    );
+}

components/pages/blog/(sections)/BlogPostsListCard.tsx

@@ -0,0 +1,42 @@
+import Card from "@/components/lib/elements/Card";
+import H2 from "@/components/lib/layout/H2";
+import Row from "@/components/lib/layout/Row";
+import Span from "@/components/lib/layout/Span";
+import Stack from "@/components/lib/layout/Stack";
+import { DSQL_TBENME_BLOG_POSTS } from "@/types";
+import {
+    ArrowRight,
+    ArrowUpRight,
+    CircleArrowOutUpRight,
+    Clock,
+} from "lucide-react";
+import React from "react";
+
+type Props = {
+    post: DSQL_TBENME_BLOG_POSTS;
+};
+
+export default function BlogPostsListCard({ post }: Props) {
+    return (
+        <Card
+            href={`/blog/${post.slug}`}
+            linkProps={{ className: "p-0 !text-white" }}
+        >
+            <Row className="w-full justify-between">
+                <Stack className="gap-1">
+                    <H2>{post.title}</H2>
+                    <Span size="large" className="mb-2">
+                        {post.excerpt}
+                    </Span>
+                    <Row>
+                        <Clock size={13} opacity={0.4} />
+                        <Span size="smaller" variant="faded">
+                            {post.date_created?.substring(0, 24)}
+                        </Span>
+                    </Row>
+                </Stack>
+                <ArrowUpRight />
+            </Row>
+        </Card>
+    );
+}

components/pages/blog/(sections)/Hero.tsx

@@ -0,0 +1,24 @@
+import EmptyContent from "@/components/lib/elements/EmptyContent";
+import H1 from "@/components/lib/layout/H1";
+import Section from "@/components/lib/layout/Section";
+import Span from "@/components/lib/layout/Span";
+import Stack from "@/components/lib/layout/Stack";
+import { AppContext } from "@/pages/_app";
+import React from "react";
+
+export default function Hero() {
+    const { pageProps } = React.useContext(AppContext);
+    const { blogPosts } = pageProps;
+
+    return (
+        <Section>
+            <Stack className="w-full gap-0">
+                <H1 className="leading-snug">Tech Musings</H1>
+                <Span>
+                    A few takes and tips from my encyclopedia of knowledge in
+                    the tech industry
+                </Span>
+            </Stack>
+        </Section>
+    );
+}

components/pages/blog/index.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import Hero from "./(sections)/Hero";
+import BlogPostsList from "./(sections)/BlogPostsList";
+
+export default function Main() {
+    return (
+        <React.Fragment>
+            <Hero />
+            <BlogPostsList />
+        </React.Fragment>
+    );
+}

components/pages/blog/slug/index.tsx

@@ -0,0 +1,65 @@
+import Breadcrumbs from "@/components/lib/elements/Breadcrumbs";
+import EmptyContent from "@/components/lib/elements/EmptyContent";
+import Divider from "@/components/lib/layout/Divider";
+import H1 from "@/components/lib/layout/H1";
+import Row from "@/components/lib/layout/Row";
+import Section from "@/components/lib/layout/Section";
+import Span from "@/components/lib/layout/Span";
+import Stack from "@/components/lib/layout/Stack";
+import { useMDXComponents } from "@/components/lib/mdx/mdx-components";
+import { AppContext } from "@/pages/_app";
+import { Clock } from "lucide-react";
+import { MDXRemote } from "next-mdx-remote";
+import React from "react";
+
+export default function Main() {
+    const { pageProps } = React.useContext(AppContext);
+    const { blogPost } = pageProps;
+
+    const mdxSource = pageProps.mdxSource;
+    const { components, codeBgColor } = useMDXComponents();
+
+    if (!mdxSource) {
+        return <EmptyContent title="No Content For this Post" />;
+    }
+
+    return (
+        <Section>
+            <Stack className="w-full max-w-full xl:max-w-[800px]">
+                {/* <Divider dashed className="border-[2px] my-6" /> */}
+                <Stack className="gap-1">
+                    <H1 className="leading-snug mb-1">{blogPost?.title}</H1>
+                    <Span>{blogPost?.excerpt}</Span>
+                    <Stack className="gap-2 mt-2">
+                        <Breadcrumbs
+                            divider={<span className="opacity-40">/</span>}
+                            linkProps={{
+                                className: "!text-white border-none",
+                            }}
+                            currentLinkProps={{
+                                className: " opacity-40 pointer-events-none",
+                            }}
+                        />
+                        <Row className="mt-1">
+                            <Clock
+                                size={13}
+                                opacity={0.5}
+                                className="-mt-[1px]"
+                            />
+                            <Span size="smaller" variant="faded">
+                                {blogPost?.date_created?.substring(0, 24)}
+                            </Span>
+                        </Row>
+                    </Stack>
+                </Stack>
+                <Divider dashed className="border-[2px] my-6" />
+                <MDXRemote
+                    {...mdxSource}
+                    components={{
+                        ...components,
+                    }}
+                />
+            </Stack>
+        </Section>
+    );
+}