Cleaning up

travisvn · May 4, 2024 · e3162c8 · e3162c8
1 parent fcad930
commit e3162c8
Show file tree

Hide file tree

Showing 25 changed files with 99 additions and 237 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,26 @@
+# Next.js MDX Template
+subtitle
+
+## Features
+- :white_check_mark: ✅ `next-mdx-remote` 
+- :white_check_mark: ✅ RSS Feed
+- :white_check_mark: ✅ Sitemap generation
+
+## Config
+- `config/site.ts` 
+- `.env` to set `BASE_URL` if you'd like to override the base URL you set in `config/site.ts`
+
+## Structure
+- `` placeholder
+
+### To-do
+- [ ] Test
+
+
+___
+
+
+
 This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
 ## Getting Started

diff --git a/app/(default)/mdx-page/layout.tsx b/app/(default)/mdx-page/layout.tsx
diff --git a/app/(default)/mdx-page/page.tsx b/app/(default)/mdx-page/page.tsx
diff --git a/app/globals.css b/app/globals.css
@@ -107,13 +107,13 @@ html {
   @apply visible;
 }
 
-/* .prose pre {
+.prose pre {
   @apply bg-neutral-50 dark:bg-neutral-900 rounded-lg overflow-x-auto border border-neutral-200 dark:border-neutral-900 py-2 px-3 text-sm;
-} */
+}
 
-.prose pre {
+/* .prose pre {
   @apply from-ctp-mantle to-ctp-crust border-ctp-overlay0 dark:bg-neutral-900 rounded-lg overflow-x-auto border dark:border-neutral-900 py-2 px-3 text-sm;
-}
+} */
 
 .prose code {
   @apply px-1 py-0.5 rounded-lg;

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -3,6 +3,7 @@ import type { Metadata, Viewport } from 'next'
 import { GeistSans } from 'geist/font/sans'
 import { GeistMono } from 'geist/font/mono'
 import { siteConfig } from '@/config/site'
+import MainLayout from '@/components/layout/main-layout'
 
 export const viewport: Viewport = {
   width: 'device-width',
@@ -58,7 +59,9 @@ export default function RootLayout({
       )}
     >
       <body className="antialiased max-w-xl mx-4 mt-8 lg:mx-auto">
-        {children}
+        <MainLayout>
+          {children}
+        </MainLayout>
       </body>
     </html>
   )

diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -1,5 +1,4 @@
-import NotFoundReturnButton from '@/components/404-return-button'
-// import Link from 'next/link'
+import Link from 'next/link'
 
 
 export default function NotFound() {
@@ -8,18 +7,22 @@ export default function NotFound() {
     <>
       <div className="px-4 flex flex-col mx-auto items-center">
         <div className="text-center">
-          <h1 className="text-8xl sm:text-9xl font-black text-ctp-yellow">404</h1>
+          <h1 className="text-8xl sm:text-9xl font-black text-yellow-400">404</h1>
 
-          <p className="text-2xl font-bold tracking-tight sm:text-4xl text-white">
+          <p className="text-2xl font-bold tracking-tight sm:text-4xl text-gray-600">
             Uh-oh!
           </p>
 
-          <p className="mt-4 text-gray-300">We can&apos;t find that page.</p>
+          <p className="mt-4 text-gray-800">We can&apos;t find that page.</p>
 
         </div>
         <div className="text-center mt-[100px]">
+          <Link
+            href={'/'}
+            className=''>
+            Return to homepage
+          </Link>
         </div>
-        <NotFoundReturnButton />
       </div>
     </>
   )

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,27 +1,11 @@
-import fs from 'fs'
-import path from 'path'
-import NavBar from "@/components/layout/navbar";
-import Link from "next/link";
-import { Navbar } from '@/components/layout/nav';
-import { BlogPosts } from '@/components/posts';
-
-export async function generateStaticParams() {
-  const files = fs.readdirSync(path.join('_blog'))
-
-  const paths = files.map(filename => ({
-    slug: filename.replace('.mdx', '')
-  }))
-
-  return paths
-}
+import NavBar from '@/components/layout/navbar'
+import BlogPosts from '@/components/posts'
 
 
 export default function Home() {
   return (
     <>
-      <NavBar />
-      <Navbar />
-      <main className="container mx-auto flex flex-col">
+      <main className='container mx-auto flex flex-col'>
         <BlogPosts />
       </main>
     </>

diff --git a/app/(default)/blog/[slug]/page.tsx → app/post/[slug]/page.tsx b/app/(default)/blog/[slug]/page.tsx → app/post/[slug]/page.tsx
@@ -3,7 +3,7 @@ import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 import { CustomMDX } from '@/components/mdx'
 import { formatDate, getBlogPosts } from '@/utils/mdx-utils'
-import { siteConfig } from '@/config/site'
+import { postUrl, siteConfig } from '@/config/site'
 
 import { unstable_noStore as noStore } from 'next/cache'
 
@@ -39,7 +39,7 @@ export async function generateMetadata({
       description,
       type: 'article',
       publishedTime,
-      url: `${siteConfig.baseUrl}/blog/${post.slug}`,
+      url: `${siteConfig.baseUrl}/${postUrl}/${post.slug}`,
       images: [
         {
           url: ogImage,
@@ -78,7 +78,7 @@ export default function Blog({ params }) {
             image: post.metadata.image
               ? `${siteConfig.baseUrl}${post.metadata.image}`
               : `/og?title=${encodeURIComponent(post.metadata.title)}`,
-            url: `${siteConfig.baseUrl}/blog/${post.slug}`,
+            url: `${siteConfig.baseUrl}/${postUrl}/${post.slug}`,
             author: {
               '@type': 'Person',
               name: 'My Portfolio',

diff --git a/app/(default)/blog/page.tsx → app/post/page.tsx b/app/(default)/blog/page.tsx → app/post/page.tsx
@@ -1,4 +1,5 @@
-import { BlogPosts } from '@/components/posts'
+import BlogPosts from '@/components/posts'
+
 
 export const metadata = {
   title: 'Blog',

diff --git a/app/sitemap.ts b/app/sitemap.ts
@@ -1,15 +1,15 @@
 
-import { siteConfig } from '@/config/site'
+import { postUrl, siteConfig } from '@/config/site'
 import { getBlogPosts } from '@/utils/mdx-utils'
 
 
 export default async function sitemap() {
   let blogs = getBlogPosts().map((post) => ({
-    url: `${siteConfig.baseUrl}/blog/${post.slug}`,
+    url: `${siteConfig.baseUrl}/${postUrl}/${post.slug}`,
     lastModified: post.metadata.publishedAt,
   }))
 
-  let routes = ['', '/blog'].map((route) => ({
+  let routes = ['', `/${postUrl}`].map((route) => ({
     url: `${siteConfig.baseUrl}${route}`,
     lastModified: new Date().toISOString().split('T')[0],
   }))

diff --git a/archive/globals.css b/archive/globals.css
diff --git a/components/404-return-button.tsx b/components/404-return-button.tsx
diff --git a/components/banner-button.tsx b/components/banner-button.tsx
diff --git a/components/layout/main-layout.tsx b/components/layout/main-layout.tsx
@@ -1,4 +1,5 @@
 import { cn } from '@/lib/utils'
+import NavBar from '@/components/layout/navbar'
 
 type Props = {
   children?: React.ReactNode
@@ -7,12 +8,13 @@ type Props = {
 const MainLayout = ({ children }: Props) => {
   return (
     <>
-      <div className="flex flex-col mx-auto items-center ">
+      <div className="flex flex-col mx-auto items-center">
         <div className={cn(
           'md:my-3',
           'items-center md:items-start ',
           'place-content-center ',
         )}>
+          <NavBar />
           {children}
         </div>
         {/* <Footer /> */}

diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { siteConfig } from '@/config/site'
+import { navItems, siteConfig } from '@/config/site'
 import Link from 'next/link'
 
 
@@ -19,7 +19,19 @@ const NavBar = () => {
           </Link>
         </div>
         <div className="">
-          Links here
+          <div className="flex flex-row space-x-3">
+            {Object.entries(navItems).map(([path, { name }]) => {
+              return (
+                <Link
+                  key={path}
+                  href={path}
+                  className="transition-all hover:text-neutral-800 dark:hover:text-neutral-200 flex align-middle relative py-1 px-2 m-1"
+                >
+                  {name}
+                </Link>
+              )
+            })}
+          </div>
         </div>
       </nav>
     </>

diff --git a/components/mdx.tsx b/components/mdx.tsx
@@ -49,7 +49,7 @@ function RoundedImage(props) {
   return <Image alt={props.alt} className="rounded-lg" {...props} />
 }
 
-function CodeSugarHigh({ children, ...props }) {
+function Code({ children, ...props }) {
   let codeHTML = highlight(children)
   return <code dangerouslySetInnerHTML={{ __html: codeHTML }} {...props} />
 }
@@ -96,7 +96,7 @@ let components = {
   h6: createHeading(6),
   Image: RoundedImage,
   a: CustomLink,
-  code: CodeSugarHigh,
+  code: Code,
   Table,
   TestComponent: TestComponent,
 }

diff --git a/components/posts.tsx b/components/posts.tsx
@@ -1,7 +1,7 @@
 import { formatDate, getBlogPosts } from '@/utils/mdx-utils'
 import Link from 'next/link'
 
-export function BlogPosts() {
+const BlogPosts = () => {
   let allBlogs = getBlogPosts()
 
   return (
@@ -33,4 +33,6 @@ export function BlogPosts() {
         ))}
     </div>
   )
-}
+}
+
+export default BlogPosts