Merge branch 'main' of https://github.com/timlrx/tailwind-nextjs-starter-blog into upstream

Add faq to deploy with docker

.gitea/workflows/build.yml

@@ -1,37 +1,73 @@
-name: Build docker container
+name: Build and Deploy docker container
 
 on:
   push:
     branches: main
-  workflow_dispatch:
-
-concurrency:
-  cancel-in-progress: false
 
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      # -
+      # - uses: actions/setup-go@v5
-      #   name: Set up Docker Buildx
-      #   uses: docker/setup-buildx-action@v3
-      # -
-      #   name: Login to Docker Hub
-      #   uses: docker/login-action@v3
       #   with:
-      #     registry: git.jonb.io
+      #     go-version: 'stable'
-      #     username: ${{ gitea.actor }}
+      - uses: actions/checkout@v4
-      #     password: ${{ secrets.JONBIO_CI }}
+      - name: Install Yarn
-      # -
+        run: npm install -g yarn
-      #   name: Build and push
+      - name: Set Node.js 22.x
-      #   uses: docker/build-push-action@v6
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22.x
+          cache: 'yarn'
+      # - name: Hash files for cache
+      #   uses: https://gitea.com/actions/go-hashfiles@v0.0.1
+      #   id: get-hash
       #   with: 
-      #     push: true
+      #     patterns: |-
-      #     tags: git.jonb.io/jblu/jonbio:latest
+      #       **/yarn.lock
+      #       **/*.js
+      #       **/*.jsx
+      #       **/*.ts
+      #       **/*.tsx
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
+      
+      - uses: actions/cache@v4
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: |
+            ${{ steps.yarn-cache-dir-path.outputs.dir }}
+            ${{ github.workspace }}/.next/cache
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+      - run: yarn
+      - run: EXPORT=1 UNOPTIMIZED=1 yarn build
+      -
+        name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      -
+        name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          registry: git.jonb.io
+          username: ${{ gitea.actor }}
+          password: ${{ secrets.JONBIO_CI }}
+      -
+        name: Build and push
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          push: true
+          tags: git.jonb.io/jblu/jonbio:latest
+          cache-from: type=registry,ref=git.jonb.io/jblu/jonbio:buildcache
+          cache-to: type=registry,image-manifest=true,oci-mediatypes=true,ref=git.jonb.io/jblu/jonbio:buildcache,mode=max
       -
         name: Deploy App
         uses: fjogeleit/http-request-action@v1
         with:
           url: 'http://192.168.4.11:7777/v1/update'
           method: 'GET'
-          customHeaders: '{"Authorization": "Bearer ${{ secrets.DEPLOYTOKEN }}"}'
+          bearerToken: ${{ secrets.DEPLOYTOKEN }}
+          timeout: 60000

Dockerfile

@@ -3,10 +3,7 @@ FROM node:22-alpine
 ENV NEXT_TELEMETRY_DISABLED=1
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
-COPY . /app
+COPY ./out /app/out
-RUN corepack enable
-RUN yarn;
-RUN yarn build;
 
 ENV NODE_ENV=production
 ENV PORT=3000
@@ -14,4 +11,4 @@ ENV HOSTNAME="0.0.0.0"
 
 EXPOSE 3000
 
-CMD ["yarn", "serve"]
+CMD ["npx", "serve", "out"]

README.md

@@ -44,8 +44,8 @@ Internationalization support - [Template with i18n](https://tailwind-nextjs-star
 - [thetalhatahir.com](https://www.thetalhatahir.com) - Talha Tahir's personal blog. Added article thumbnails, linkedIn card, Beautiful hero content, technology emoticons.
 - [homing.so](https://homing.so) - Homing's personal blog about the stuff he's learning ([source code](https://github.com/hominsu/blog))
 - [zS1m's Blog](https://contrails.space) - zS1m's personal blog for recording and sharing daily learning technical content ([source code](https://github.com/zS1m/nextjs-contrails))
-- [dariuszwozniak.net](https://dariuszwozniak.net/) - Software development blog
+- [dariuszwozniak.net](https://dariuszwozniak.net/) - Software development blog ([source code](https://github.com/dariusz-wozniak/dariuszwozniak.net-v2))
-- [Terminals.run](https://terminals.run) - Blog site for some thoughts and records for life and technology.
+- [dreams.plus](https://dreams.plus) - Blog site for some thoughts and records for life and technology.
 - [francisaguilar.co blog](https://francisaguilar.co) - Francis Aguilar's personal blog that talks about tech, fitness, and personal development.
 - [Min71 Dev Blog](https://min71.dev) - Personal blog about Blockchain, Development and etc. ([source code](https://github.com/mingi3442/blog))
 - [Bryce Yu's Blog](https://earayu.github.io/) - Bryce Yu's personal Blog about distributed system, database, and web development. ([source code](https://github.com/earayu/earayu.github.io))
@@ -70,6 +70,9 @@ Internationalization support - [Template with i18n](https://tailwind-nextjs-star
 - [LyricsDecode.com](https://lyricsdecode.com) - A song lyrics website offering original lyrics, Romanisation, and English translations with customisable viewing options.
 - [bmacharia.com](https://bmacharia.com/) - Benson Macharia's technical blog about Cybersecurity and IT Risk Management.
 - [armujahid.me](https://armujahid.me/) - Abdul Rauf's personal blog about tech and random stuff.
+- [leohuynh.dev](leohuynh.dev) - 🇻🇳 Leo's dev blog – stories, insights, and ideas. Add `/snippets`, `/books` pages, add `ProfileCard`, `CareerTimeline` components and many more.
+- [OpenSats Blog](https://opensats.org/blog) - A 501(c)(3) public charity which aims to sustainably fund free and open-source projects. ([source code](https://github.com/OpenSats/website))
+- [Schedles Blog](https://schedles.com/blog) - Social media scheduling tips, strategies, and product updates for content creators. ([Project Link](https://schedles.com))
 
 Using the template? Feel free to create a PR and add your blog to this list.
 
@@ -82,7 +85,6 @@ Thanks to the community of users and contributors to the template! We are no lon
 - [Aloisdg's cookbook](https://tambouille.vercel.app/) - with pictures and recipes!
 - [GautierArcin's demo with next translate](https://tailwind-nextjs-starter-blog-seven.vercel.app/) - includes translation of mdx posts, [source code](https://github.com/GautierArcin/tailwind-nextjs-starter-blog/tree/demo/next-translate)
 - [David Levai's digital garden](https://davidlevai.com/) - customized design and added email subscriptions
-- [Leo's Blog](https://leohuynh.dev) - Tuan Anh Huynh's personal site. Add Snippets Page, Author Profile Card, Image Lightbox, ...
 - [thvu.dev](https://thvu.dev) - Added `mdx-embed`, view count, reading minutes and more.
 - [irvin.dev](https://www.irvin.dev/) - Irvin Lin's personal site. Added YouTube embedding.
 - [KirillSo.com](https://www.kirillso.com/) - Personal blog & website.
@@ -318,8 +320,8 @@ Consider removing the following features that cannot be used in a static build:
 
 ## Frequently Asked Questions
 
-- [How can I add a custom MDX component?](/faq/custom-mdx-component.md)
+- [How can I add a custom MDX component?](faq/custom-mdx-component.md)
-- [How can I customize the `kbar` search?](/faq/customize-kbar-search.md)
+- [How can I customize the `kbar` search?](faq/customize-kbar-search.md)
 
 ## Support
 

app/api/newsletter/route.ts

@@ -1,6 +1,8 @@
 import { NewsletterAPI } from 'pliny/newsletter'
 import siteMetadata from '@/data/siteMetadata'
 
+export const dynamic = 'force-static'
+
 const handler = NewsletterAPI({
   // @ts-ignore
   provider: siteMetadata.newsletter.provider,

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

@@ -21,11 +21,10 @@ const layouts = {
   PostBanner,
 }
 
-export async function generateMetadata({
+export async function generateMetadata(props: {
-  params,
+  params: Promise<{ slug: string[] }>
-}: {
-  params: { slug: string[] }
 }): Promise<Metadata | undefined> {
+  const params = await props.params
   const slug = decodeURI(params.slug.join('/'))
   const post = allBlogs.find((p) => p.slug === slug)
   const authorList = post?.authors || ['default']
@@ -78,7 +77,8 @@ export const generateStaticParams = async () => {
   return allBlogs.map((p) => ({ slug: p.slug.split('/').map((name) => decodeURI(name)) }))
 }
 
-export default async function Page({ params }: { params: { slug: string[] } }) {
+export default async function Page(props: { params: Promise<{ slug: string[] }> }) {
+  const params = await props.params
   const slug = decodeURI(params.slug.join('/'))
   // Filter out drafts in production
   const sortedCoreContents = allCoreContent(sortPosts(allBlogs))

app/blog/page/[page]/page.tsx

@@ -11,7 +11,8 @@ export const generateStaticParams = async () => {
   return paths
 }
 
-export default function Page({ params }: { params: { page: string } }) {
+export default async function Page(props: { params: Promise<{ page: string }> }) {
+  const params = await props.params
   const posts = allCoreContent(sortPosts(allBlogs))
   const pageNumber = parseInt(params.page as string)
   const initialDisplayPosts = posts.slice(

app/likes/page.tsx

@@ -1,3 +1,35 @@
-export default function Page() {
+import projectsData from '@/data/likesData'
-  return <div>hello world</div>
+import Card from '@/components/Card'
+import { genPageMetadata } from 'app/seo'
+
+export const metadata = genPageMetadata({ title: 'Likes' })
+
+export default function Likes() {
+  return (
+    <>
+      <div className="divide-y divide-gray-200 dark:divide-gray-700">
+        <div className="space-y-2 pb-8 pt-6 md:space-y-5">
+          <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
+            Likes
+          </h1>
+          <p className="text-lg leading-7 text-gray-500 dark:text-gray-400">
+            These things are pretty cool, check 'em out.
+          </p>
+        </div>
+        <div className="container py-12">
+          <div className="-m-4 flex flex-wrap">
+            {projectsData.map((d) => (
+              <Card
+                key={d.title}
+                title={d.title}
+                description={d.description}
+                imgSrc={d.imgSrc}
+                href={d.href}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  )
 }

app/robots.ts

@@ -1,6 +1,8 @@
 import { MetadataRoute } from 'next'
 import siteMetadata from '@/data/siteMetadata'
 
+export const dynamic = 'force-static'
+
 export default function robots(): MetadataRoute.Robots {
   return {
     rules: {

app/sitemap.ts

@@ -2,6 +2,8 @@ import { MetadataRoute } from 'next'
 import { allBlogs } from 'contentlayer/generated'
 import siteMetadata from '@/data/siteMetadata'
 
+export const dynamic = 'force-static'
+
 export default function sitemap(): MetadataRoute.Sitemap {
   const siteUrl = siteMetadata.siteUrl
 

app/tag-data.json

@@ -1 +1 @@
-{"cygnus":1,"self-hosted":1,"server":1}
+{"python":1,"projects":1,"code":1,"cygnus":1,"self-hosted":1,"server":1}

app/tags/[tag]/page.tsx

@@ -8,7 +8,10 @@ import { genPageMetadata } from 'app/seo'
 import { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 
-export async function generateMetadata({ params }: { params: { tag: string } }): Promise<Metadata> {
+export async function generateMetadata(props: {
+  params: Promise<{ tag: string }>
+}): Promise<Metadata> {
+  const params = await props.params
   const tag = decodeURI(params.tag)
   return genPageMetadata({
     title: tag,
@@ -31,7 +34,8 @@ export const generateStaticParams = async () => {
   return paths
 }
 
-export default function TagPage({ params }: { params: { tag: string } }) {
+export default async function TagPage(props: { params: Promise<{ tag: string }> }) {
+  const params = await props.params
   const tag = decodeURI(params.tag)
   // Capitalize first letter and convert space to dash
   const title = tag[0].toUpperCase() + tag.split(' ').join('-').slice(1)

components/Footer.tsx

@@ -16,6 +16,7 @@ export default function Footer() {
           <SocialIcon kind="x" href={siteMetadata.x} size={6} />
           <SocialIcon kind="instagram" href={siteMetadata.instagram} size={6} />
           <SocialIcon kind="threads" href={siteMetadata.threads} size={6} />
+          <SocialIcon kind="medium" href={siteMetadata.medium} size={6} />
         </div>
         <div className="mb-2 flex space-x-2 text-sm text-gray-500 dark:text-gray-400">
           <div>{siteMetadata.author}</div>

components/Header.tsx

@@ -28,10 +28,8 @@ const Header = () => {
           )}
         </div>
       </Link>
-      {/* Changed this so I can get all of my links in the header 10-19-2024. Backup Config */}
       <div className="flex items-center space-x-4 leading-5 sm:space-x-6">
-        <div className="no-scrollbar max-w-50 hidden items-center space-x-4 overflow-x-auto sm:flex md:flex lg:flex">
+        <div className="no-scrollbar hidden max-w-40 items-center space-x-4 overflow-x-auto sm:flex sm:space-x-6 md:max-w-72 lg:max-w-96">
-          {/* <div className="no-scrollbar hidden max-w-50 items-center space-x-4 overflow-x-auto sm:flex sm:space-x-6 md:max-w-72 lg:max-w-96"> */}
           {headerNavLinks
             .filter((link) => link.href !== '/')
             .map((link) => (

components/social-icons/icons.tsx

@@ -93,3 +93,12 @@ export function Instagram(svgProps: SVGProps<SVGSVGElement>) {
     </svg>
   )
 }
+
+export function Medium(svgProps: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...svgProps}>
+      <title>Medium</title>
+      <path d="M13.54 12a6.8 6.8 0 01-6.77 6.82A6.8 6.8 0 010 12a6.8 6.8 0 016.77-6.82A6.8 6.8 0 0113.54 12zM20.96 12c0 3.54-1.51 6.42-3.38 6.42-1.87 0-3.39-2.88-3.39-6.42s1.52-6.42 3.39-6.42 3.38 2.88 3.38 6.42M24 12c0 3.17-.53 5.75-1.19 5.75-.66 0-1.19-2.58-1.19-5.75s.53-5.75 1.19-5.75C23.47 6.25 24 8.83 24 12z" />
+    </svg>
+  )
+}

components/social-icons/index.tsx

@@ -9,6 +9,7 @@ import {
   Mastodon,
   Threads,
   Instagram,
+  Medium,
 } from './icons'
 
 const components = {
@@ -22,6 +23,7 @@ const components = {
   mastodon: Mastodon,
   threads: Threads,
   instagram: Instagram,
+  medium: Medium,
 }
 
 type SocialIconProps = {

contentlayer.config.ts

@@ -18,6 +18,7 @@ import {
 import rehypeSlug from 'rehype-slug'
 import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import rehypeKatex from 'rehype-katex'
+import rehypeKatexNoTranslate from 'rehype-katex-notranslate'
 import rehypeCitation from 'rehype-citation'
 import rehypePrismPlus from 'rehype-prism-plus'
 import rehypePresetMinify from 'rehype-preset-minify'
@@ -169,6 +170,7 @@ export default makeSource({
         },
       ],
       rehypeKatex,
+      rehypeKatexNoTranslate,
       [rehypeCitation, { path: path.join(root, 'data') }],
       [rehypePrismPlus, { defaultLanguage: 'js', ignoreMissing: true }],
       rehypePresetMinify,

data/authors/default.mdx

@@ -1,12 +1,11 @@
 ---
 name: Jonathan Branan
-avatar: /static/images/avatar.png
+avatar: https://s3.jonb.io/cdn/author/2.JPG
 occupation: Software Engineer
 company: Fortra
 email: jonathan.branan@fortra.com
 linkedin: https://www.linkedin.com/in/jonathanbranan/
 github: https://github.com/jonbranan
-#gitea: https://git.jonb.io/jblu
 ---
 
 Jonathan Branan is a Software Engineer at Fortra. He is mostly self-taught however he did attend a vocational class at Rackspace Open Cloud Academy.

data/blog/howibuiltcygnus.mdx

@@ -1,9 +1,9 @@
 ---
-title: How I built Cygnus
+title: How I Built Cygnus
 date: '2024-10-14'
 tags: ['cygnus', 'self-hosted', 'server']
 draft: false
-summary: A story of how I started self-hosting
+summary: A story of how I started self-hosting.
 ---
 
 >   ####  Now that I think about it, they kind of took advantage of me

data/blog/qbitmaid.mdx

@@ -0,0 +1,11 @@
+---
+title: Qbitmaid
+date: '2024-11-3'
+tags: ['python', 'projects', 'code']
+draft: true
+summary: How I used python to keep my torrents in check
+layout: PostBanner
+images: ['https://s3.jonb.io/cdn/projects/qbitmaid.jpg']
+---
+
+[Source Code](https://git.jonb.io/jblu/qbit-maid)

data/headerNavLinks.ts

@@ -1,9 +1,7 @@
 const headerNavLinks = [
   { href: '/', title: 'Home' },
   { href: '/blog', title: 'Blog' },
-  { href: 'https://git.jonb.io/', title: 'Code' },
+  // { href: 'https://git.jonb.io/', title: 'Code' },
-  { href: 'https://up.jonb.io/status/default', title: 'Status' },
-  { href: 'https://castlemine-map.jonb.io/', title: 'Castlemine Map' },
   { href: '/likes', title: 'Likes' },
   { href: '/tags', title: 'Tags' },
   { href: '/projects', title: 'Projects' },

data/likesData.ts

@@ -0,0 +1,29 @@
+interface Likes {
+  title: string
+  description: string
+  href?: string
+  imgSrc?: string
+}
+
+const likesData: Likes[] = [
+  {
+    title: 'Gitea',
+    description: `My git server. Where all of the development happens.`,
+    href: 'https://git.jonb.io/',
+    imgSrc: 'https://s3.jonb.io/cdn/likes/gitea.jpeg',
+  },
+  {
+    title: 'Castlemine Map',
+    description: `Minecraft map for the castlemine.jonb.io server.`,
+    href: 'https://castlemine-map.jonb.io/',
+    imgSrc: 'https://s3.jonb.io/cdn/likes/minecraft.jpeg',
+  },
+  {
+    title: 'Uptime Kuma',
+    description: `App that monitors the kingdom.`,
+    href: 'https://up.jonb.io/status/default',
+    imgSrc: 'https://s3.jonb.io/cdn/likes/uptime-kuma.jpeg',
+  },
+]
+
+export default likesData

data/projectsData.ts

@@ -9,8 +9,8 @@ const projectsData: Project[] = [
   {
     title: 'qbit-maid',
     description: `Qbittorrent torrent cleaner built in python.`,
-    imgSrc: '/static/images/qbitmaid.jpg',
+    imgSrc: 'https://s3.jonb.io/cdn/projects/qbitmaid.jpg',
-    href: 'https://git.jonb.io/jblu/qbit-maid',
+    href: '/blog/qbitmaid',
   },
 ]
 

data/references-data.bib

@@ -1,33 +0,0 @@
-@article{Nash1950,
-  title={Equilibrium points in n-person games},
-  author={Nash, John},
-  journal={Proceedings of the national academy of sciences},
-  volume={36},
-  number={1},
-  pages={48--49},
-  year={1950},
-  publisher={USA}
-}
-
-@article{Nash1951,
-  title={Non-cooperative games},
-  author={Nash, John},
-  journal={Annals of mathematics},
-  pages={286--295},
-  year={1951},
-  publisher={JSTOR}
-}
-
-@Manual{Macfarlane2006,
-  url={https://pandoc.org/},
-  title={Pandoc: a universal document converter},
-  author={MacFarlane, John},
-  year={2006}
-}
-
-@book{Xie2016,
-  title={Bookdown: authoring books and technical documents with R markdown},
-  author={Xie, Yihui},
-  year={2016},
-  publisher={CRC Press}
-}

data/siteMetadata.js

@@ -1,9 +1,9 @@
 /** @type {import("pliny/config").PlinyConfig } */
 const siteMetadata = {
-  title: 'Jonathan\'s Blog and Likes',
+  title: 'JonB.io',
   author: 'Jonathan Branan',
-  headerTitle: 'JonB.IO',
+  headerTitle: 'JonB.io',
-  description: 'Thought\'s from someone with an internet connection.',
+  description: "Thought's from someone with an internet connection.",
   language: 'en-us',
   theme: 'system', // system, dark or light
   siteUrl: 'https://jonb.io',
@@ -11,7 +11,7 @@ const siteMetadata = {
   siteLogo: `${process.env.BASE_PATH || ''}/static/images/logo.png`,
   socialBanner: `${process.env.BASE_PATH || ''}/static/images/twitter-card.png`,
   // mastodon: 'https://mastodon.social/@mastodonuser',
-  email: 'jonbranan@gmail.com',
+  email: 'jonathan.branan@fortra.com',
   github: 'https://github.com/jonbranan',
   // x: 'https://twitter.com/x',
   // twitter: 'https://twitter.com/Twitter',
@@ -20,6 +20,7 @@ const siteMetadata = {
   linkedin: 'https://www.linkedin.com/in/jonathanbranan/',
   // threads: 'https://www.threads.net',
   // instagram: 'https://www.instagram.com',
+  // medium: 'https://medium.com',
   locale: 'en-US',
   // set to true if you want a navbar fixed to the top
   stickyNav: false,

faq/customize-kbar-search.md

@@ -66,7 +66,7 @@ function createSearchIndex(allBlogs) {
   ) {
     writeFileSync(
       `public/${siteMetadata.search.kbarConfig.searchDocumentsPath}`,
-      JSON.stringify((sortPosts(allBlogs)))
+      JSON.stringify(sortPosts(allBlogs))
     )
     console.log('Local search index generated...')
   }

faq/deploy-with-docker.md

@@ -0,0 +1,20 @@
+# Deploy with Docker
+
+Follow the [official Next.js repo docker build example and instructions](https://github.com/vercel/next.js/tree/canary/examples/with-docker) to deploy with docker. Copy the [`Dockerfile`](https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile) into the root of the project and modify the `next.config.js` file:
+
+```js
+// next.config.js
+module.exports = {
+  // ... rest of the configuration.
+  output: 'standalone',
+}
+```
+
+You can now build the docker image and run it:
+
+```bash
+docker build -t nextjs-docker .
+docker run -p 3000:3000 nextjs-docker
+```
+
+Alternatively, to use docker compose, refer to the [docker compose repo](https://github.com/vercel/next.js/tree/canary/examples/with-docker-compose).

layouts/PostLayout.tsx

@@ -10,7 +10,7 @@ import Tag from '@/components/Tag'
 import siteMetadata from '@/data/siteMetadata'
 import ScrollTopAndComment from '@/components/ScrollTopAndComment'
 
-const editUrl = (path) => `${siteMetadata.siteRepo}/blob/main/data/${path}`
+const editUrl = (path) => `${siteMetadata.siteRepo}/src/branch/main/data/${path}`
 const discussUrl = (path) =>
   `https://mobile.twitter.com/search?q=${encodeURIComponent(`${siteMetadata.siteUrl}/${path}`)}`
 
@@ -100,7 +100,7 @@ export default function PostLayout({ content, authorDetails, next, prev, childre
                   Discuss on Twitter
                 </Link>
                 {` • `}
-                <Link href={editUrl(filePath)}>View on GitHub</Link>
+                <Link href={editUrl(filePath)}>View on Gitea</Link>
               </div>
               {siteMetadata.comments && (
                 <div

next.config.js

@@ -10,7 +10,7 @@ const ContentSecurityPolicy = `
   script-src 'self' 'unsafe-eval' 'unsafe-inline' giscus.app analytics.umami.is;
   style-src 'self' 'unsafe-inline';
   img-src * blob: data:;
-  media-src *.s3.amazonaws.com;
+  media-src s3.jonb.io*;
   connect-src *;
   font-src 'self';
   frame-src giscus.app
@@ -77,6 +77,12 @@ module.exports = () => {
           protocol: 'https',
           hostname: 'picsum.photos',
         },
+        {
+          protocol: 'https',
+          hostname: 's3.jonb.io',
+          port: '',
+          pathname: '/cdn/**',
+        },
       ],
       unoptimized,
     },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-nextjs-starter-blog",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "private": true,
   "scripts": {
     "start": "next dev",
@@ -12,29 +12,30 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@headlessui/react": "1.7.19",
+    "@headlessui/react": "2.2.0",
-    "@next/bundle-analyzer": "14.2.3",
+    "@next/bundle-analyzer": "15.0.2",
-    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/forms": "^0.5.9",
-    "@tailwindcss/typography": "^0.5.12",
+    "@tailwindcss/typography": "^0.5.15",
     "autoprefixer": "^10.4.13",
     "body-scroll-lock": "^4.0.0-beta.0",
-    "contentlayer2": "0.5.1",
+    "contentlayer2": "0.5.3",
     "esbuild": "0.20.2",
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.2",
     "hast-util-from-html-isomorphic": "^2.0.0",
     "image-size": "1.0.0",
-    "next": "14.2.3",
+    "next": "15.0.2",
-    "next-contentlayer2": "0.5.1",
+    "next-contentlayer2": "0.5.3",
     "next-themes": "^0.3.0",
-    "pliny": "0.2.1",
+    "pliny": "0.4.0",
     "postcss": "^8.4.24",
-    "react": "18.3.1",
+    "react": "rc",
-    "react-dom": "18.3.1",
+    "react-dom": "rc",
     "reading-time": "1.5.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-citation": "^2.0.0",
     "rehype-katex": "^7.0.0",
+    "rehype-katex-notranslate": "^1.1.4",
     "rehype-preset-minify": "7.0.0",
     "rehype-prism-plus": "^2.0.0",
     "rehype-slug": "^6.0.0",
@@ -42,20 +43,20 @@
     "remark-gfm": "^4.0.0",
     "remark-github-blockquote-alert": "^1.2.1",
     "remark-math": "^6.0.0",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^3.4.14",
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.0.1",
     "@types/mdx": "^2.0.12",
     "@types/react": "^18.2.73",
-    "@typescript-eslint/eslint-plugin": "^6.1.0",
+    "@typescript-eslint/eslint-plugin": "^8.12.0",
-    "@typescript-eslint/parser": "^6.1.0",
+    "@typescript-eslint/parser": "^8.12.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.45.0",
+    "eslint": "^9.14.0",
-    "eslint-config-next": "14.2.3",
+    "eslint-config-next": "15.0.2",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-prettier": "^5.2.0",
     "husky": "^9.0.0",
     "lint-staged": "^13.0.0",
     "prettier": "^3.0.0",

public/static/favicons/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#000000</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

scripts/rss.mjs

@@ -3,10 +3,12 @@ import path from 'path'
 import { slug } from 'github-slugger'
 import { escape } from 'pliny/utils/htmlEscaper.js'
 import siteMetadata from '../data/siteMetadata.js'
-import tagData from '../app/tag-data.json' with { type: 'json' }
+import tagData from '../app/tag-data.json' assert { type: 'json' }
 import { allBlogs } from '../.contentlayer/generated/index.mjs'
 import { sortPosts } from 'pliny/utils/contentlayer.js'
 
+const outputFolder = process.env.EXPORT ? 'out' : 'public'
+
 const generateRssItem = (config, post) => `
   <item>
     <guid>${config.siteUrl}/blog/${post.slug}</guid>
@@ -40,14 +42,14 @@ async function generateRSS(config, allBlogs, page = 'feed.xml') {
   // RSS for blog post
   if (publishPosts.length > 0) {
     const rss = generateRss(config, sortPosts(publishPosts))
-    writeFileSync(`./public/${page}`, rss)
+    writeFileSync(`./${outputFolder}/${page}`, rss)
   }
 
   if (publishPosts.length > 0) {
     for (const tag of Object.keys(tagData)) {
       const filteredPosts = allBlogs.filter((post) => post.tags.map((t) => slug(t)).includes(tag))
       const rss = generateRss(config, filteredPosts, `tags/${tag}/${page}`)
-      const rssPath = path.join('public', 'tags', tag)
+      const rssPath = path.join(outputFolder, 'tags', tag)
       mkdirSync(rssPath, { recursive: true })
       writeFileSync(path.join(rssPath, page), rss)
     }

tailwind.config.js

@@ -25,7 +25,7 @@ module.exports = {
         sans: ['var(--font-space-grotesk)', ...fontFamily.sans],
       },
       colors: {
-        primary: colors.pink,
+        primary: colors.cyan,
         gray: colors.gray,
       },
       zIndex: {