Restructured home page

- Added latest post and project to home screen - Removed home page button components Signed-off-by: Alan P John <[email protected]>
alanpjohn · May 24, 2024 · 577478c · 577478c
1 parent b094317
commit 577478c
Show file tree

Hide file tree

Showing 16 changed files with 4,570 additions and 11,523 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [4.0.2] - 2024-05-24
+## Added
+- Latest post and project to home screen
+## Removed
+- Home page button components
+
 ## [4.0.1] - 2024-03-15
 Removed Notion Support
 ### Added

diff --git a/_projects/ukfaasd.md b/_projects/ukfaasd.md
@@ -4,7 +4,6 @@ tags:
   - serverless
   - unikernel
   - openfaas
-  - unikraft
 date: 2023-09-01
 url: https://github.com/alanpjohn/ukfaas
 cover: ukfaas

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "next-notion-portfolio",
-    "version": "4.0.1",
+    "version": "4.0.2",
     "private": true,
     "scripts": {
         "dev": "next dev",
@@ -31,7 +31,6 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-markdown": "^8.0.7",
-        "react-notion-x": "^6.16.0",
         "remark": "^14.0.3",
         "remark-html": "^15.0.2",
         "sass": "^1.66.1",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -5,8 +5,8 @@ import { AppProps } from "next/app";
 import Script from "next/script";
 import "prismjs/themes/prism-tomorrow.css";
 import React, { useEffect } from "react";
-import "react-notion-x/src/styles.css";
 
+import "@styles/notion.css";
 import "@styles/styles.scss";
 
 function MyApp({ Component, pageProps, router }: AppProps): JSX.Element {

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,9 +1,12 @@
-import { HomeButton } from "@components/button/home";
+import { HomeCard } from "@components/card/home";
+import { Tag } from "@components/card/tag";
 import { CustomImage } from "@components/image";
 import { Layout } from "@components/layout";
 import { Section } from "@components/section";
 
 import { domain } from "@util/config";
+import { BlogArticle, ITag, Project } from "@util/interface";
+import { getFeaturedProject, getLatestBlog } from "@util/markdown";
 import { getPreviewImage } from "@util/preview-image";
 
 import { GetStaticProps, NextPage } from "next";
@@ -12,9 +15,11 @@ import { PreviewImage } from "notion-types";
 
 type Props = {
     preview: PreviewImage;
+    blog: BlogArticle;
+    project: Project;
 };
 
-const Home: NextPage<Props> = ({ preview }: Props) => {
+const Home: NextPage<Props> = ({ preview, blog, project }: Props) => {
     return (
         <Layout>
             <NextSeo
@@ -28,57 +33,56 @@ const Home: NextPage<Props> = ({ preview }: Props) => {
                 ]}
             />
             <Section className="mt-32 lg:mt-24 flex-grow mx-auto justify-center">
-                <div className="flex flex-col font-sans px-4">
+                <div className="flex flex-col px-4">
                     <h1
-                        className="text-2xl lg:text-4xl 
+                        className="text-3xl lg:text-4xl 
                         font-light pr-12 mb-4 pb-2 w-min whitespace-nowrap border-dotted
                         border-b-4 border-accent-alternate"
                     >
                         Alan John
                     </h1>
-                    <h2 className="text-3xl md:text-7xl md:pl-4 whitespace-pre-wrap">
+                    <h2 className="text-3xl md:text-5xl lg:text-7xl md:pl-4 whitespace-pre-wrap">
                         Software Developer
                     </h2>
                 </div>
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 grid-flow-row mx-auto mt-6">
-                    <div className="md:row-span-2 max-w-sm p-4 mr-4">
+                <div className="grid grid-cols-1 md:grid-cols-2 grid-flow-row mx-auto mt-6">
+                    <div className="md:row-span-2 max-w-sm p-4 mx-auto">
                         <CustomImage
                             alt="Alan John"
                             src="/images/Alan.jpg"
                             height={preview.originalHeight}
                             width={preview.originalWidth}
+                            className="rounded-md"
                             placeholder="blur"
                             blurDataURL={preview.dataURIBase64}
                         />
                     </div>
-                    <HomeButton
-                        href={"/about"}
-                        title={"about"}
-                        subtitle={"There is more to him"}
-                        description={
-                            "Considering this page does not have much about him"
-                        }
-                    />
-                    <HomeButton
-                        href={"/blog"}
-                        title={"blog"}
-                        subtitle={"He writes"}
-                        description={"He ought to be more regular with it"}
-                    />
-                    <HomeButton
-                        href={"https://photos.alanjohn.dev"}
-                        title={"Photos"}
-                        subtitle={"He clicks pictures"}
-                        description={
-                            "He is trying his best to be artsy about it"
-                        }
-                    />
-                    <HomeButton
-                        href={"/projects"}
-                        title={"projects"}
-                        subtitle={"He has projects"}
-                        description={"Surprise, surprise"}
-                    />
+                    <HomeCard
+                        title={blog.title}
+                        subtitle={blog.description}
+                        isBlog={true}
+                        url={"/blog/" + blog.url}
+                    >
+                        {blog.tags.length > 0 && (
+                            <div className="flex flex-wrap shrink">
+                                {blog.tags.map((tag: ITag) => (
+                                    <Tag key={tag.id} {...tag} />
+                                ))}
+                            </div>
+                        )}
+                    </HomeCard>
+                    <HomeCard
+                        title={project.title}
+                        subtitle={project.description}
+                    >
+                        {project.tags.length > 0 && (
+                            <div className="flex flex-wrap shrink">
+                                {blog.tags.map((tag: ITag) => (
+                                    <Tag key={tag.id} {...tag} />
+                                ))}
+                            </div>
+                        )}
+                    </HomeCard>
                 </div>
             </Section>
         </Layout>
@@ -90,9 +94,14 @@ export const getStaticProps: GetStaticProps<Props> = async () => {
         cacheKey: "home",
     });
 
+    const project = await getFeaturedProject();
+    const blogArticle = await getLatestBlog();
+
     return {
         props: {
             preview: preview,
+            blog: blogArticle,
+            project: project,
         },
         revalidate: 86400,
     };

diff --git a/src/components/button/home.tsx b/src/components/button/home.tsx
diff --git a/src/components/card/home.tsx b/src/components/card/home.tsx
@@ -0,0 +1,52 @@
+import { CustomLink } from "@components/link";
+
+import { PropsWithChildren } from "react";
+import { BsArrowRight } from "react-icons/bs";
+
+type Props = PropsWithChildren<{
+    title: string;
+    subtitle: string;
+    url?: string;
+    isBlog?: boolean;
+}>;
+
+export const HomeCard: React.FC<Props> = ({
+    title,
+    subtitle,
+    url = "/projects",
+    isBlog = false,
+    children,
+}: Props) => {
+    let keyText = "Featured Project";
+    if (isBlog) {
+        keyText = "Featured Blog Article";
+    }
+    return (
+        <CustomLink
+            href={url}
+            className="m-2 p-4
+            max-w-md
+border-background-primary dark:border-foreground-primary 
+bg-background-secondary dark:bg-foreground-secondary
+border-2 rounded-md
+flex flex-col justify-between
+"
+        >
+            <span className="text-xs font-mono text-accent-primary dark:text-accent-secondary text-opacity-70">
+                {keyText}
+            </span>
+            <span className="px-1 text-xl font-sans text-foreground-primary dark:text-background-primary">
+                {title}
+            </span>
+            <span className="px-1 text-s text-foreground-primary dark:text-background-primary">
+                {subtitle}
+            </span>
+            {children}
+
+            <div className="flex flex-row items-center w-full justify-end">
+                <span className="text-xs font-mono mr-2">Check out</span>
+                <BsArrowRight />
+            </div>
+        </CustomLink>
+    );
+};
diff --git a/src/components/card/tag.tsx b/src/components/card/tag.tsx
@@ -8,10 +8,10 @@ export const Tag: React.FC<Props> = ({ id, name }: Props) => {
     return (
         <span
             key={id}
-            className=" text-jet
+            className=" text-background-secondary
             bg-accent-primary dark:bg-accent-secondary whitespace-nowrap
-       h-8 px-4 m-1 rounded-full 
-        font-sans text-lg"
+       h-6 px-4 m-1 rounded-full items-center flex
+        font-sans text-sm"
         >
             {name}
         </span>

diff --git a/src/components/header/blog.tsx b/src/components/header/blog.tsx
@@ -10,7 +10,7 @@ export const NotionHeader: React.FC = () => {
                 <div className="notion-nav-header-rhs">
                     <CustomLink
                         href="/blog"
-                        className="font-sans text-xl font-normal flex flex-row items-center hover:text-accent dark:hover:text-accent-secondary"
+                        className="font-sans text-xl font-normal flex flex-row items-center hover:text-accent-primary dark:hover:text-accent-secondary"
                     >
                         <BsArrowLeftCircle className="mx-2" /> Explore Blog
                     </CustomLink>

diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
@@ -19,7 +19,7 @@ export const Header: React.FC = () => {
                 <div className="p-1 flex flex-row justify-center items-center">
                     {internalLinks.map((link) => (
                         <CustomLink
-                            className="hover:text-accent dark:hover:text-accent-secondary mx-2 uppercase font-mono text-sm sm:text-lg font-medium"
+                            className="hover:text-accent-primary dark:hover:text-accent-secondary mx-2 uppercase font-mono text-sm sm:text-lg font-medium"
                             key={link.text}
                             href={link.url.toString()}
                         >