tidying up, fixed mobile sizing, updated readme

README.md

@@ -1,59 +1,31 @@
 # Next.js MDX Template
-subtitle
+Using Next.js 14 App Directory
+
+Simple, easy-to-modify template to use for creating a blog, portfolio, or content-based website
 
 ## Features
-- :white_check_mark: ✅ `next-mdx-remote` 
-- :white_check_mark: ✅ RSS Feed
-- :white_check_mark: ✅ Sitemap generation
+- :white_check_mark: `next-mdx-remote` 
+- :white_check_mark: RSS Feed
+- :white_check_mark: Sitemap generation
+- Tailwind CSS
+- Syntax highlighting in `.mdx`
+- Custom components embeddable in `.mdx` files
+- Utility functions to customize further
 
 ## Config
-- `config/site.ts` 
+- `config/site.ts` - Site title, description, and URL
 - `.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
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+The majority of the structure should be self evident, based on [Next.js docs](https://nextjs.org/docs)
 
-## Deploy on Vercel
+- `content/` - Location for posts (.mdx files)
+- `utils/mdx-utils.ts` - Main functions for handling `.mdx` and converting frontmatter
+- `lib/helpers.ts` - _extra (i.e. not required)_ Options for handling `.mdx`
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+### Notes
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+- `gray-matter` and `date-fns` are included but not required
+  - If you'd like to remove them, remove the `lib/helpers.ts` file and its connections
+- Based off of [leerob.io repo](https://github.com/leerob/leerob.io)

app/post/page.tsx → app/blog/page.tsx

@@ -1,3 +1,9 @@
+/**
+ * 
+ * Optional page for separating posts from homepage
+ * 
+ */
+
 import BlogPosts from '@/components/posts'
 
 

app/globals.css

@@ -2,56 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-/* https://github.com/leerob/leerob.io/blob/main/app/global.css */
-
-/* ::selection {
-  background-color: #47a3f3;
-  color: #fefefe;
-}
-
-:root {
-  --sh-class: #e5c890;
-  --sh-identifier: #949cbb;
-  --sh-sign: #41916d;
-  --sh-property: #8caaee;
-  --sh-entity: #249a97;
-  --sh-jsxliterals: #6266d1;
-  --sh-string: #a6d189;
-  --sh-keyword: #ca9ee6;
-  --sh-comment: #949cbb;
-} */
-
-::selection {
-  background-color: #47a3f3;
-  color: #fefefe;
-}
-
-/* :root {
-  --sh-class: #2d5e9d;
-  --sh-identifier: #354150;
-  --sh-sign: #8996a3;
-  --sh-string: #007f7a;
-  --sh-keyword: #e02518;
-  --sh-comment: #a19595;
-  --sh-jsxliterals: #6266d1;
-  --sh-property: #e25a1c;
-  --sh-entity: #e25a1c;
-} */
-
-/* Tried to copy the Obsidian syntax highlighting (which idk if Nord or Catpuccin variant) */
-/* :root {
-  --sh-identifier: #88c0d0;
-  --sh-keyword: #fa99cd;
-  --sh-string: #a3be8c;
-  --sh-class: #88c0d0;
-  --sh-property: #ebcb8b;
-  --sh-entity: #bf616a;
-  --sh-jsxliterals: #bf7db6;
-  --sh-sign: #88c0d0;
-  --sh-comment: #d8dee9;
-} */
-
-/* Second go, trying to use official Catpuccin palette */
 :root {
   --sh-identifier: #88c0d0;
   --sh-keyword: #ca9ee6;
@@ -64,20 +14,12 @@
   --sh-comment: #949cbb;
 }
 
-/* @media (prefers-color-scheme: dark) {
-  :root {
-    --sh-class: #4c97f8;
-    --sh-identifier: white;
-    --sh-keyword: #f47067;
-    --sh-string: #0fa295;
-  }
-  html {
-    color-scheme: dark;
-  }
-} */
-
 html {
-  min-width: 360px;
+  @apply selection:bg-sky-400 selection:text-white;
+}
+
+body {
+  @apply mx-3;
 }
 
 .prose .anchor {
@@ -111,10 +53,6 @@ html {
   @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 {
-  @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;
 }

app/layout.tsx

@@ -58,7 +58,7 @@ export default function RootLayout({
         GeistMono.variable
       )}
     >
-      <body className="antialiased max-w-xl mx-4 mt-8 lg:mx-auto">
+      <body className="antialiased">
         <MainLayout>
           {children}
         </MainLayout>

app/page.tsx

@@ -1,13 +1,10 @@
-import NavBar from '@/components/layout/navbar'
 import BlogPosts from '@/components/posts'
 
 
 export default function Home() {
   return (
     <>
-      <main className='container mx-auto flex flex-col'>
-        <BlogPosts />
-      </main>
+      <BlogPosts />
     </>
-  );
+  )
 }

app/post/[slug]/page.tsx

@@ -7,6 +7,7 @@ import { postUrl, siteConfig } from '@/config/site'
 
 import { unstable_noStore as noStore } from 'next/cache'
 
+
 export async function generateStaticParams() {
   let posts = getBlogPosts()
 
@@ -94,7 +95,7 @@ export default function Blog({ params }) {
           {formatDate(post.metadata.publishedAt)}
         </p>
       </div>
-      <article className="prose max-w-none">
+      <article className="prose w-[90vw] md:w-prose">
         <CustomMDX source={post.content} />
       </article>
     </section>

app/rss/route.ts

@@ -1,4 +1,4 @@
-import { siteConfig } from '@/config/site'
+import { postUrl, siteConfig } from '@/config/site'
 import { getBlogPosts } from '@/utils/mdx-utils'
 
 export async function GET() {
@@ -15,7 +15,7 @@ export async function GET() {
       (post) =>
         `<item>
           <title>${post.metadata.title}</title>
-          <link>${siteConfig.baseUrl}/blog/${post.slug}</link>
+          <link>${siteConfig.baseUrl}/${postUrl}/${post.slug}</link>
           <description>${post.metadata.summary || ''}</description>
           <pubDate>${new Date(
           post.metadata.publishedAt
@@ -27,9 +27,9 @@ export async function GET() {
   const rssFeed = `<?xml version="1.0" encoding="UTF-8" ?>
   <rss version="2.0">
     <channel>
-        <title>My Portfolio</title>
+        <title>${siteConfig.title}</title>
         <link>${siteConfig.baseUrl}</link>
-        <description>This is my portfolio RSS feed</description>
+        <description>RSS feed for ${siteConfig.title} - ${siteConfig.description}</description>
         ${itemsXml}
     </channel>
   </rss>`

components/layout/main-layout.tsx

@@ -8,16 +8,17 @@ type Props = {
 const MainLayout = ({ children }: Props) => {
   return (
     <>
-      <div className="flex flex-col mx-auto items-center">
-        <div className={cn(
-          'md:my-3',
-          'items-center md:items-start ',
-          'place-content-center ',
-        )}>
+      <div className="mt-8 flex flex-col mx-auto items-center">
+        <div
+          className={cn(
+            'md:my-3',
+            'items-center md:items-start ',
+            'place-content-center ',
+            'md:max-w-prose w-full',
+          )}>
           <NavBar />
           {children}
         </div>
-        {/* <Footer /> */}
       </div>
     </>
   )

components/layout/navbar.tsx

@@ -9,12 +9,13 @@ const NavBar = () => {
   return (
     <>
       <nav
-        className="flex flex-row mx-auto max-w-screen-lg w-full justify-between"
+        className="flex flex-row mx-auto justify-between w-full"
       >
-        <div className="text-ctp-rosewater font-bold text-2xl">
+        <div className="text-sky-600 font-bold text-2xl">
           <Link
             href='/'
-            className=''>
+            className=''
+          >
             {siteConfig.title}
           </Link>
         </div>

components/mdx.tsx

@@ -3,7 +3,7 @@ import Image from 'next/image'
 import { MDXRemote } from 'next-mdx-remote/rsc'
 import { highlight } from 'sugar-high'
 import React from 'react'
-import TestComponent from './test-component'
+import TestComponent from '@/components/test-component'
 
 function Table({ data }) {
   let headers = data.headers.map((header, index) => (

components/posts.tsx

@@ -1,3 +1,4 @@
+import { postUrl } from '@/config/site'
 import { formatDate, getBlogPosts } from '@/utils/mdx-utils'
 import Link from 'next/link'
 
@@ -19,7 +20,7 @@ const BlogPosts = () => {
           <Link
             key={post.slug}
             className="flex flex-col space-y-1 mb-4"
-            href={`/blog/${post.slug}`}
+            href={`/${postUrl}/${post.slug}`}
           >
             <div className="w-full flex flex-col md:flex-row space-x-0 md:space-x-2">
               <p className="text-neutral-600 dark:text-neutral-400 w-[160px] tabular-nums">

components/test-component.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from 'react'
 
+
 const TestComponent = () => {
 
   const [count, setCount] = useState(0)