update,

aastock/1/blog/app/blog/[slug]/page.tsx

@@ -0,0 +1,98 @@
+import { notFound } from 'next/navigation'
+import { CustomMDX } from 'app/components/mdx'
+import { formatDate, getBlogPosts } from 'app/blog/utils'
+import { baseUrl } from 'app/sitemap'
+
+export async function generateStaticParams() {
+  let posts = getBlogPosts()
+
+  return posts.map((post) => ({
+    slug: post.slug,
+  }))
+}
+
+export function generateMetadata({ params }) {
+  let post = getBlogPosts().find((post) => post.slug === params.slug)
+  if (!post) {
+    return
+  }
+
+  let {
+    title,
+    publishedAt: publishedTime,
+    summary: description,
+    image,
+  } = post.metadata
+  let ogImage = image
+    ? image
+    : `${baseUrl}/og?title=${encodeURIComponent(title)}`
+
+  return {
+    title,
+    description,
+    openGraph: {
+      title,
+      description,
+      type: 'article',
+      publishedTime,
+      url: `${baseUrl}/blog/${post.slug}`,
+      images: [
+        {
+          url: ogImage,
+        },
+      ],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title,
+      description,
+      images: [ogImage],
+    },
+  }
+}
+
+export default function Blog({ params }) {
+  let post = getBlogPosts().find((post) => post.slug === params.slug)
+
+  if (!post) {
+    notFound()
+  }
+
+  return (
+    <section>
+      <script
+        type="application/ld+json"
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify({
+            '@context': 'https://schema.org',
+            '@type': 'BlogPosting',
+            headline: post.metadata.title,
+            datePublished: post.metadata.publishedAt,
+            dateModified: post.metadata.publishedAt,
+            description: post.metadata.summary,
+            image: post.metadata.image
+              ? `${baseUrl}${post.metadata.image}`
+              : `/og?title=${encodeURIComponent(post.metadata.title)}`,
+            url: `${baseUrl}/blog/${post.slug}`,
+            author: {
+              '@type': 'Person',
+              name: 'My Portfolio',
+            },
+          }),
+        }}
+      />
+      <h1 className="title font-semibold text-2xl tracking-tighter">
+        {post.metadata.title}
+      </h1>
+      <div className="flex justify-between items-center mt-2 mb-8 text-sm">
+        <p className="text-sm text-neutral-600 dark:text-neutral-400">
+          {formatDate(post.metadata.publishedAt)}
+        </p>
+      </div>
+      <article className="prose">
+        <CustomMDX source={post.content} />
+      </article>
+    </section>
+  )
+}

aastock/1/blog/app/blog/page.tsx

@@ -0,0 +1,15 @@
+import { BlogPosts } from 'app/components/posts'
+
+export const metadata = {
+  title: 'Blog',
+  description: 'Read my blog.',
+}
+
+export default function Page() {
+  return (
+    <section>
+      <h1 className="font-semibold text-2xl mb-8 tracking-tighter">My Blog</h1>
+      <BlogPosts />
+    </section>
+  )
+}

aastock/1/blog/app/blog/posts/spaces-vs-tabs.mdx

@@ -0,0 +1,31 @@
+---
+title: 'Spaces vs. Tabs: The Indentation Debate Continues'
+publishedAt: '2024-04-08'
+summary: 'Explore the enduring debate between using spaces and tabs for code indentation, and why this choice matters more than you might think.'
+---
+
+The debate between using spaces and tabs for indentation in coding may seem trivial to the uninitiated, but it is a topic that continues to inspire passionate discussions among developers. This seemingly minor choice can affect code readability, maintenance, and even team dynamics.
+
+Let's delve into the arguments for both sides and consider why this debate remains relevant in the software development world.
+
+## The Case for Spaces
+
+Advocates for using spaces argue that it ensures consistent code appearance across different editors, tools, and platforms. Because a space is a universally recognized character with a consistent width, code indented with spaces will look the same no matter where it's viewed. This consistency is crucial for maintaining readability and avoiding formatting issues when code is shared between team members or published online.
+
+Additionally, some programming languages and style guides explicitly recommend spaces for indentation, suggesting a certain number of spaces (often two or four) per indentation level. Adhering to these recommendations can be essential for projects that aim for best practices in code quality and readability.
+
+## The Case for Tabs
+
+On the other side of the debate, proponents of tabs highlight the flexibility that tabs offer. Because the width of a tab can be adjusted in most text editors, individual developers can choose how much indentation they prefer to see, making the code more accessible and comfortable to read on a personal level. This adaptability can be particularly beneficial in teams with diverse preferences regarding code layout.
+
+Tabs also have the advantage of semantic meaning. A tab is explicitly meant to represent indentation, whereas a space is used for many purposes within code. This distinction can make automated parsing and manipulation of code simpler, as tools can more easily recognize and adjust indentation levels without confusing them with spaces used for alignment.
+
+## Hybrid Approaches and Team Dynamics
+
+The debate often extends into discussions about hybrid approaches, where teams might use tabs for indentation and spaces for alignment within lines, attempting to combine the best of both worlds. However, such strategies require clear team agreements and disciplined adherence to coding standards to prevent formatting chaos.
+
+Ultimately, the choice between spaces and tabs often comes down to team consensus and project guidelines. In environments where collaboration and code sharing are common, agreeing on a standard that everyone follows is more important than the individual preferences of spaces versus tabs. Modern development tools and linters can help enforce these standards, making the choice less about technical limitations and more about team dynamics and coding philosophy.
+
+## Conclusion
+
+While the spaces vs. tabs debate might not have a one-size-fits-all answer, it underscores the importance of consistency, readability, and team collaboration in software development. Whether a team chooses spaces, tabs, or a hybrid approach, the key is to make a conscious choice that serves the project's needs and to adhere to it throughout the codebase. As with many aspects of coding, communication and agreement among team members are paramount to navigating this classic programming debate.

aastock/1/blog/app/blog/posts/static-typing.mdx

@@ -0,0 +1,52 @@
+---
+title: 'The Power of Static Typing in Programming'
+publishedAt: '2024-04-07'
+summary: 'In the ever-evolving landscape of software development, the debate between dynamic and static typing continues to be a hot topic.'
+---
+
+In the ever-evolving landscape of software development, the debate between dynamic and static typing continues to be a hot topic. While dynamic typing offers flexibility and rapid development, static typing brings its own set of powerful advantages that can significantly improve the quality and maintainability of code. In this post, we'll explore why static typing is crucial for developers, accompanied by practical examples through markdown code snippets.
+
+## Improved Code Quality and Safety
+
+One of the most compelling reasons to use static typing is the improvement it brings to code quality and safety. By enforcing type checks at compile time, static typing catches errors early in the development process, reducing the chances of runtime errors.
+
+```ts
+function greet(name: string): string {
+  return `Hello, ${name}!`
+}
+
+// This will throw an error at compile time, preventing potential runtime issues.
+let message: string = greet(123)
+```
+
+## Enhanced Readability and Maintainability
+
+Static typing makes code more readable and maintainable. By explicitly declaring types, developers provide a clear contract of what the code does, making it easier for others (or themselves in the future) to understand and modify the codebase.
+
+## Facilitates Tooling and Refactoring
+
+Modern IDEs leverage static typing to offer advanced features like code completion, refactoring, and static analysis. These tools can automatically detect issues, suggest fixes, and safely refactor code, enhancing developer productivity and reducing the likelihood of introducing bugs during refactoring.
+
+```csharp
+// Refactoring example: Renaming a method in C#
+public class Calculator {
+    public int Add(int a, int b) {
+        return a + b;
+    }
+}
+
+// After refactoring `Add` to `Sum`, all references are automatically updated.
+public class Calculator {
+    public int Sum(int a, int b) {
+        return a + b;
+    }
+}
+```
+
+## Performance Optimizations
+
+Static typing can lead to better performance. Since types are known at compile time, compilers can optimize the generated code more effectively. This can result in faster execution times and lower resource consumption.
+
+## Conclusion
+
+Static typing offers numerous benefits that contribute to the development of robust, efficient, and maintainable software. By catching errors early, enhancing readability, facilitating tooling, and enabling optimizations, static typing is an invaluable asset for developers. As the software industry continues to mature, the importance of static typing in ensuring code quality and performance cannot be overstated. Whether you're working on a large-scale enterprise application or a small project, embracing static typing can lead to better software development outcomes.

aastock/1/blog/app/blog/posts/vim.mdx

@@ -0,0 +1,39 @@
+---
+title: 'Embracing Vim: The Unsung Hero of Code Editors'
+publishedAt: '2024-04-09'
+summary: 'Discover why Vim, with its steep learning curve, remains a beloved tool among developers for editing code efficiently and effectively.'
+---
+
+In the world of software development, where the latest and greatest tools frequently capture the spotlight, Vim stands out as a timeless classic. Despite its age and initial complexity, Vim has managed to retain a devoted following of developers who swear by its efficiency, versatility, and power.
+
+This article delves into the reasons behind Vim's enduring appeal and why it continues to be a great tool for coding in the modern era.
+
+## Efficiency and Speed
+
+At the heart of Vim's philosophy is the idea of minimizing keystrokes to achieve maximum efficiency.
+
+Unlike other text editors where the mouse is often relied upon for navigation and text manipulation, Vim's keyboard-centric design allows developers to perform virtually all coding tasks without leaving the home row. This not only speeds up coding but also reduces the risk of repetitive strain injuries.
+
+## Highly Customizable
+
+Vim can be extensively customized to suit any developer's preferences and workflow. With a vibrant ecosystem of plugins and a robust scripting language, users can tailor the editor to their specific needs, whether it's programming in Python, writing in Markdown, or managing projects.
+
+This level of customization ensures that Vim remains relevant and highly functional for a wide range of programming tasks and languages.
+
+## Ubiquity and Portability
+
+Vim is virtually everywhere. It's available on all major platforms, and because it's lightweight and terminal-based, it can be used on remote servers through SSH, making it an indispensable tool for sysadmins and developers working in a cloud-based environment.
+
+The ability to use the same editor across different systems without a graphical interface is a significant advantage for those who need to maintain a consistent workflow across multiple environments.
+
+## Vibrant Community
+
+Despite—or perhaps because of—its learning curve, Vim has cultivated a passionate and active community. Online forums, dedicated websites, and plugins abound, offering support, advice, and improvements.
+
+This community not only helps newcomers climb the steep learning curve but also continually contributes to Vim's evolution, ensuring it remains adaptable and up-to-date with the latest programming trends and technologies.
+
+## Conclusion
+
+Vim is not just a text editor; it's a way of approaching coding with efficiency and thoughtfulness. Its steep learning curve is a small price to pay for the speed, flexibility, and control it offers.
+
+For those willing to invest the time to master its commands, Vim proves to be an invaluable tool that enhances productivity and enjoyment in coding. In an age of ever-changing development tools, the continued popularity of Vim is a testament to its enduring value and utility.

aastock/1/blog/app/blog/utils.ts

@@ -0,0 +1,90 @@
+import fs from 'fs'
+import path from 'path'
+
+type Metadata = {
+  title: string
+  publishedAt: string
+  summary: string
+  image?: string
+}
+
+function parseFrontmatter(fileContent: string) {
+  let frontmatterRegex = /---\s*([\s\S]*?)\s*---/
+  let match = frontmatterRegex.exec(fileContent)
+  let frontMatterBlock = match![1]
+  let content = fileContent.replace(frontmatterRegex, '').trim()
+  let frontMatterLines = frontMatterBlock.trim().split('\n')
+  let metadata: Partial<Metadata> = {}
+
+  frontMatterLines.forEach((line) => {
+    let [key, ...valueArr] = line.split(': ')
+    let value = valueArr.join(': ').trim()
+    value = value.replace(/^['"](.*)['"]$/, '$1') // Remove quotes
+    metadata[key.trim() as keyof Metadata] = value
+  })
+
+  return { metadata: metadata as Metadata, content }
+}
+
+function getMDXFiles(dir) {
+  return fs.readdirSync(dir).filter((file) => path.extname(file) === '.mdx')
+}
+
+function readMDXFile(filePath) {
+  let rawContent = fs.readFileSync(filePath, 'utf-8')
+  return parseFrontmatter(rawContent)
+}
+
+function getMDXData(dir) {
+  let mdxFiles = getMDXFiles(dir)
+  return mdxFiles.map((file) => {
+    let { metadata, content } = readMDXFile(path.join(dir, file))
+    let slug = path.basename(file, path.extname(file))
+
+    return {
+      metadata,
+      slug,
+      content,
+    }
+  })
+}
+
+export function getBlogPosts() {
+  return getMDXData(path.join(process.cwd(), 'app', 'blog', 'posts'))
+}
+
+export function formatDate(date: string, includeRelative = false) {
+  let currentDate = new Date()
+  if (!date.includes('T')) {
+    date = `${date}T00:00:00`
+  }
+  let targetDate = new Date(date)
+
+  let yearsAgo = currentDate.getFullYear() - targetDate.getFullYear()
+  let monthsAgo = currentDate.getMonth() - targetDate.getMonth()
+  let daysAgo = currentDate.getDate() - targetDate.getDate()
+
+  let formattedDate = ''
+
+  if (yearsAgo > 0) {
+    formattedDate = `${yearsAgo}y ago`
+  } else if (monthsAgo > 0) {
+    formattedDate = `${monthsAgo}mo ago`
+  } else if (daysAgo > 0) {
+    formattedDate = `${daysAgo}d ago`
+  } else {
+    formattedDate = 'Today'
+  }
+
+  let fullDate = targetDate.toLocaleString('en-us', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  })
+
+  if (!includeRelative) {
+    return fullDate
+  }
+
+  return `${fullDate} (${formattedDate})`
+}

aastock/1/blog/app/components/footer.tsx

@@ -0,0 +1,61 @@
+function ArrowIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2.07102 11.3494L0.963068 10.2415L9.2017 1.98864H2.83807L2.85227 0.454545H11.8438V9.46023H10.2955L10.3097 3.09659L2.07102 11.3494Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+export default function Footer() {
+  return (
+    <footer className="mb-16">
+      <ul className="font-sm mt-8 flex flex-col space-x-0 space-y-2 text-neutral-600 md:flex-row md:space-x-4 md:space-y-0 dark:text-neutral-300">
+        <li>
+          <a
+            className="flex items-center transition-all hover:text-neutral-800 dark:hover:text-neutral-100"
+            rel="noopener noreferrer"
+            target="_blank"
+            href="/rss"
+          >
+            <ArrowIcon />
+            <p className="ml-2 h-7">rss</p>
+          </a>
+        </li>
+        <li>
+          <a
+            className="flex items-center transition-all hover:text-neutral-800 dark:hover:text-neutral-100"
+            rel="noopener noreferrer"
+            target="_blank"
+            href="https://github.com/vercel/next.js"
+          >
+            <ArrowIcon />
+            <p className="ml-2 h-7">github</p>
+          </a>
+        </li>
+        <li>
+          <a
+            className="flex items-center transition-all hover:text-neutral-800 dark:hover:text-neutral-100"
+            rel="noopener noreferrer"
+            target="_blank"
+            href="https://vercel.com/templates/next.js/portfolio-starter-kit"
+          >
+            <ArrowIcon />
+            <p className="ml-2 h-7">view source</p>
+          </a>
+        </li>
+      </ul>
+      <p className="mt-8 text-neutral-600 dark:text-neutral-300">
+        © {new Date().getFullYear()} MIT Licensed
+      </p>
+    </footer>
+  )
+}

aastock/1/blog/app/components/mdx.tsx

@@ -0,0 +1,109 @@
+import Link from 'next/link'
+import Image from 'next/image'
+import { MDXRemote } from 'next-mdx-remote/rsc'
+import { highlight } from 'sugar-high'
+import React from 'react'
+
+function Table({ data }) {
+  let headers = data.headers.map((header, index) => (
+    <th key={index}>{header}</th>
+  ))
+  let rows = data.rows.map((row, index) => (
+    <tr key={index}>
+      {row.map((cell, cellIndex) => (
+        <td key={cellIndex}>{cell}</td>
+      ))}
+    </tr>
+  ))
+
+  return (
+    <table>
+      <thead>
+        <tr>{headers}</tr>
+      </thead>
+      <tbody>{rows}</tbody>
+    </table>
+  )
+}
+
+function CustomLink(props) {
+  let href = props.href
+
+  if (href.startsWith('/')) {
+    return (
+      <Link href={href} {...props}>
+        {props.children}
+      </Link>
+    )
+  }
+
+  if (href.startsWith('#')) {
+    return <a {...props} />
+  }
+
+  return <a target="_blank" rel="noopener noreferrer" {...props} />
+}
+
+function RoundedImage(props) {
+  return <Image alt={props.alt} className="rounded-lg" {...props} />
+}
+
+function Code({ children, ...props }) {
+  let codeHTML = highlight(children)
+  return <code dangerouslySetInnerHTML={{ __html: codeHTML }} {...props} />
+}
+
+function slugify(str) {
+  return str
+    .toString()
+    .toLowerCase()
+    .trim() // Remove whitespace from both ends of a string
+    .replace(/\s+/g, '-') // Replace spaces with -
+    .replace(/&/g, '-and-') // Replace & with 'and'
+    .replace(/[^\w\-]+/g, '') // Remove all non-word characters except for -
+    .replace(/\-\-+/g, '-') // Replace multiple - with single -
+}
+
+function createHeading(level) {
+  const Heading = ({ children }) => {
+    let slug = slugify(children)
+    return React.createElement(
+      `h${level}`,
+      { id: slug },
+      [
+        React.createElement('a', {
+          href: `#${slug}`,
+          key: `link-${slug}`,
+          className: 'anchor',
+        }),
+      ],
+      children
+    )
+  }
+
+  Heading.displayName = `Heading${level}`
+
+  return Heading
+}
+
+let components = {
+  h1: createHeading(1),
+  h2: createHeading(2),
+  h3: createHeading(3),
+  h4: createHeading(4),
+  h5: createHeading(5),
+  h6: createHeading(6),
+  Image: RoundedImage,
+  a: CustomLink,
+  code: Code,
+  Table,
+}
+
+export function CustomMDX(props) {
+  return (
+    <MDXRemote
+      {...props}
+      components={{ ...components, ...(props.components || {}) }}
+    />
+  )
+}

aastock/1/blog/app/components/nav.tsx

@@ -0,0 +1,40 @@
+import Link from 'next/link'
+
+const navItems = {
+  '/': {
+    name: 'home',
+  },
+  '/blog': {
+    name: 'blog',
+  },
+  'https://vercel.com/templates/next.js/portfolio-starter-kit': {
+    name: 'deploy',
+  },
+}
+
+export function Navbar() {
+  return (
+    <aside className="-ml-[8px] mb-16 tracking-tight">
+      <div className="lg:sticky lg:top-20">
+        <nav
+          className="flex flex-row items-start relative px-0 pb-0 fade md:overflow-auto scroll-pr-6 md:relative"
+          id="nav"
+        >
+          <div className="flex flex-row space-x-0 pr-10">
+            {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>
+        </nav>
+      </div>
+    </aside>
+  )
+}

aastock/1/blog/app/components/posts.tsx

@@ -0,0 +1,36 @@
+import Link from 'next/link'
+import { formatDate, getBlogPosts } from 'app/blog/utils'
+
+export function BlogPosts() {
+  let allBlogs = getBlogPosts()
+
+  return (
+    <div>
+      {allBlogs
+        .sort((a, b) => {
+          if (
+            new Date(a.metadata.publishedAt) > new Date(b.metadata.publishedAt)
+          ) {
+            return -1
+          }
+          return 1
+        })
+        .map((post) => (
+          <Link
+            key={post.slug}
+            className="flex flex-col space-y-1 mb-4"
+            href={`/blog/${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-[100px] tabular-nums">
+                {formatDate(post.metadata.publishedAt, false)}
+              </p>
+              <p className="text-neutral-900 dark:text-neutral-100 tracking-tight">
+                {post.metadata.title}
+              </p>
+            </div>
+          </Link>
+        ))}
+    </div>
+  )
+}

aastock/1/blog/app/global.css

@@ -0,0 +1,150 @@
+@import 'tailwindcss';
+
+::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;
+}
+
+@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;
+}
+
+.prose .anchor {
+  @apply absolute invisible no-underline;
+
+  margin-left: -1em;
+  padding-right: 0.5em;
+  width: 80%;
+  max-width: 700px;
+  cursor: pointer;
+}
+
+.anchor:hover {
+  @apply visible;
+}
+
+.prose a {
+  @apply underline transition-all decoration-neutral-400 dark:decoration-neutral-600 underline-offset-2 decoration-[0.1em];
+}
+
+.prose .anchor:after {
+  @apply text-neutral-300 dark:text-neutral-700;
+  content: '#';
+}
+
+.prose *:hover > .anchor {
+  @apply visible;
+}
+
+.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 code {
+  @apply px-1 py-0.5 rounded-lg;
+}
+
+.prose pre code {
+  @apply p-0;
+  border: initial;
+  line-height: 1.5;
+}
+
+.prose code span {
+  @apply font-medium;
+}
+
+.prose img {
+  /* Don't apply styles to next/image */
+  @apply m-0;
+}
+
+.prose p {
+  @apply my-4 text-neutral-800 dark:text-neutral-200;
+}
+
+.prose h1 {
+  @apply text-4xl font-medium tracking-tight mt-6 mb-2;
+}
+
+.prose h2 {
+  @apply text-xl font-medium tracking-tight mt-6 mb-2;
+}
+
+.prose h3 {
+  @apply text-xl font-medium tracking-tight mt-6 mb-2;
+}
+
+.prose h4 {
+  @apply text-lg font-medium tracking-tight mt-6 mb-2;
+}
+
+.prose strong {
+  @apply font-medium;
+}
+
+.prose ul {
+  @apply list-disc pl-6;
+}
+
+.prose ol {
+  @apply list-decimal pl-6;
+}
+
+.prose > :first-child {
+  /* Override removing top margin, causing layout shift */
+  margin-top: 1.25em !important;
+  margin-bottom: 1.25em !important;
+}
+
+pre::-webkit-scrollbar {
+  display: none;
+}
+
+pre {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+/* Remove Safari input shadow on mobile */
+input[type='text'],
+input[type='email'] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+table {
+  display: block;
+  max-width: fit-content;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.title {
+  text-wrap: balance;
+}

aastock/1/blog/app/layout.tsx

@@ -0,0 +1,66 @@
+import './global.css'
+import type { Metadata } from 'next'
+import { GeistSans } from 'geist/font/sans'
+import { GeistMono } from 'geist/font/mono'
+import { Navbar } from './components/nav'
+import { Analytics } from '@vercel/analytics/react'
+import { SpeedInsights } from '@vercel/speed-insights/next'
+import Footer from './components/footer'
+import { baseUrl } from './sitemap'
+
+export const metadata: Metadata = {
+  metadataBase: new URL(baseUrl),
+  title: {
+    default: 'Next.js Portfolio Starter',
+    template: '%s | Next.js Portfolio Starter',
+  },
+  description: 'This is my portfolio.',
+  openGraph: {
+    title: 'My Portfolio',
+    description: 'This is my portfolio.',
+    url: baseUrl,
+    siteName: 'My Portfolio',
+    locale: 'en_US',
+    type: 'website',
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      'max-video-preview': -1,
+      'max-image-preview': 'large',
+      'max-snippet': -1,
+    },
+  },
+}
+
+const cx = (...classes) => classes.filter(Boolean).join(' ')
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html
+      lang="en"
+      className={cx(
+        'text-black bg-white dark:text-white dark:bg-black',
+        GeistSans.variable,
+        GeistMono.variable
+      )}
+    >
+      <body className="antialiased max-w-xl mx-4 mt-8 lg:mx-auto">
+        <main className="flex-auto min-w-0 mt-6 flex flex-col px-2 md:px-0">
+          <Navbar />
+          {children}
+          <Footer />
+          <Analytics />
+          <SpeedInsights />
+        </main>
+      </body>
+    </html>
+  )
+}

aastock/1/blog/app/not-found.tsx

@@ -0,0 +1,10 @@
+export default function NotFound() {
+  return (
+    <section>
+      <h1 className="mb-8 text-2xl font-semibold tracking-tighter">
+        404 - Page Not Found
+      </h1>
+      <p className="mb-4">The page you are looking for does not exist.</p>
+    </section>
+  )
+}

aastock/1/blog/app/og/route.tsx

@@ -0,0 +1,22 @@
+import { ImageResponse } from 'next/og'
+
+export function GET(request: Request) {
+  let url = new URL(request.url)
+  let title = url.searchParams.get('title') || 'Next.js Portfolio Starter'
+
+  return new ImageResponse(
+    (
+      <div tw="flex flex-col w-full h-full items-center justify-center bg-white">
+        <div tw="flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between p-8">
+          <h2 tw="flex flex-col text-4xl font-bold tracking-tight text-left">
+            {title}
+          </h2>
+        </div>
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 630,
+    }
+  )
+}

aastock/1/blog/app/page.tsx

@@ -0,0 +1,21 @@
+import { BlogPosts } from 'app/components/posts'
+
+export default function Page() {
+  return (
+    <section>
+      <h1 className="mb-8 text-2xl font-semibold tracking-tighter">
+        My Portfolio
+      </h1>
+      <p className="mb-4">
+        {`I'm a Vim enthusiast and tab advocate, finding unmatched efficiency in
+        Vim's keystroke commands and tabs' flexibility for personal viewing
+        preferences. This extends to my support for static typing, where its
+        early error detection ensures cleaner code, and my preference for dark
+        mode, which eases long coding sessions by reducing eye strain.`}
+      </p>
+      <div className="my-8">
+        <BlogPosts />
+      </div>
+    </section>
+  )
+}

aastock/1/blog/app/robots.ts

@@ -0,0 +1,12 @@
+import { baseUrl } from 'app/sitemap'
+
+export default function robots() {
+  return {
+    rules: [
+      {
+        userAgent: '*',
+      },
+    ],
+    sitemap: `${baseUrl}/sitemap.xml`,
+  }
+}

aastock/1/blog/app/rss/route.ts

@@ -0,0 +1,42 @@
+import { baseUrl } from 'app/sitemap'
+import { getBlogPosts } from 'app/blog/utils'
+
+export async function GET() {
+  let allBlogs = await getBlogPosts()
+
+  const itemsXml = allBlogs
+    .sort((a, b) => {
+      if (new Date(a.metadata.publishedAt) > new Date(b.metadata.publishedAt)) {
+        return -1
+      }
+      return 1
+    })
+    .map(
+      (post) =>
+        `<item>
+          <title>${post.metadata.title}</title>
+          <link>${baseUrl}/blog/${post.slug}</link>
+          <description>${post.metadata.summary || ''}</description>
+          <pubDate>${new Date(
+            post.metadata.publishedAt
+          ).toUTCString()}</pubDate>
+        </item>`
+    )
+    .join('\n')
+
+  const rssFeed = `<?xml version="1.0" encoding="UTF-8" ?>
+  <rss version="2.0">
+    <channel>
+        <title>My Portfolio</title>
+        <link>${baseUrl}</link>
+        <description>This is my portfolio RSS feed</description>
+        ${itemsXml}
+    </channel>
+  </rss>`
+
+  return new Response(rssFeed, {
+    headers: {
+      'Content-Type': 'text/xml',
+    },
+  })
+}

aastock/1/blog/app/sitemap.ts

@@ -0,0 +1,17 @@
+import { getBlogPosts } from 'app/blog/utils'
+
+export const baseUrl = 'https://portfolio-blog-starter.vercel.app'
+
+export default async function sitemap() {
+  let blogs = getBlogPosts().map((post) => ({
+    url: `${baseUrl}/blog/${post.slug}`,
+    lastModified: post.metadata.publishedAt,
+  }))
+
+  let routes = ['', '/blog'].map((route) => ({
+    url: `${baseUrl}${route}`,
+    lastModified: new Date().toISOString().split('T')[0],
+  }))
+
+  return [...routes, ...blogs]
+}