Awesome

Tailwind, NextJs, ShadCN Personal Blog

This is a Next.js, Tailwind CSS, ShadCN personal blog based on Next App directory with React Server Component and uses Contentlayer to manage markdown content.

Check out the documentation below to get started.

Features

Next.js with Typescript
ShadCN components
Prisma ORM (MongoDB)
Auth.js for the protected section (Under Development)
Custom Experience component (Looks like Linkedin, kinda..)
Custom Technologies component to showcase your favorite technologies
Contentlayer to manage content logic
Easy styling customization with Tailwind 3.0 and primary color attribute
MDX - write JSX in markdown documents!
Near perfect lighthouse score - Lighthouse report
Lightweight, 85kB first load JS
Mobile-friendly view
Light and dark theme
Font optimization with next/font
Integration with pliny that provides:
- Multiple analytics options including Umami, Plausible, Simple Analytics, Posthog and Google Analytics
- Comments via Giscus, Utterances or Disqus
- Newsletter API and component with support for Mailchimp, Buttondown, Convertkit, Klaviyo, Revue, and Emailoctopus
- Command palette search with Kbar or Algolia
Server-side syntax highlighting with line numbers and line highlighting via rehype-prism-plus
Math display supported via KaTeX
Citation and bibliography support via rehype-citation
Github alerts via remark-github-blockquote-alert
Automatic image optimization via next/image
Support for tags - each unique tag will be its own page
Support for multiple authors
3 different blog layouts
2 different blog listing layouts
Support for nested routing of blog posts
Projects page
Preconfigured security headers
SEO friendly with RSS feed, sitemaps and more!

Quick Start Guide

Clone the repo

npx degit 'andrew-sameh/andrewsam.xyz'

Personalize siteMetadata.js (site related information)
Modify the content security policy in next.config.js if you want to use other analytics provider or a commenting solution other than giscus.
Personalize authors/default.md (main author)
Modify projectsData.ts
Modify headerNavLinks.ts to customize navigation links
Add blog posts
Deploy on Vercel

Installation

yarn

Please note, that if you are using Windows, you may need to run:

$env:PWD = $(Get-Location).Path

Development

First, run the development server:

yarn dev

Open http://localhost:3000 with your browser to see the result.

Edit the layout in app or content in data. With live reloading, the pages auto-updates as you edit them.

Extend / Customize

data/siteMetadata.js - contains most of the site related information which should be modified for a user's need.

data/authors/default.md - default author information (required). Additional authors can be added as files in data/authors.

data/resume/default.mdx - default MDX Resume.

data/mainData.ts - data used to generate styled card on the projects page, the technologies, and the experience components in the root page.

data/headerNavLinks.js - navigation links.

data/logo.svg - replace with your own logo.

public/static/site - All site logo variations, make sure to update the SiteLogos components if you're using different names.

data/blog - replace with your own blog posts.

public/static - store assets such as images and favicons.

tailwind.config.js and css/tailwind.css - tailwind configuration and stylesheet which can be modified to change the overall look and feel of the site.

css/globals.css - for you ShadCn theme variables.

css/prism.css - controls the styles associated with the code blocks. Feel free to customize it and use your preferred prismjs theme e.g. prism themes.

contentlayer.config.ts - configuration for Contentlayer, including definition of content sources and MDX plugins used. See Contentlayer documentation for more information.

components/MDXComponents.js - pass your own JSX code or React component by specifying it over here. You can then use them directly in the .mdx or .md file. By default, a custom link, next/image component, table of contents component and Newsletter form are passed down. Note that the components should be default exported to avoid existing issues with Next.js.

layouts - main templates used in pages:

There are currently 3 post layouts available: PostLayout, PostSimple and PostBanner. PostLayout is the default 2 column layout with meta and author information. PostSimple is a simplified version of PostLayout, while PostBanner features a banner image.
There are 2 blog listing layouts: ListLayout, the layout used in version 1 of the template with a search bar and ListLayoutWithTags, currently used in version 2, which omits the search bar but includes a sidebar with information on the tags.

app - pages to route to. Read the Next.js documentation for more information.

next.config.js - configuration related to Next.js. You need to adapt the Content Security Policy if you want to load scripts, images etc. from other domains.

Post

Content is modelled using Contentlayer, which allows you to define your own content schema and use it to generate typed content objects. See Contentlayer documentation for more information.

Frontmatter

Frontmatter follows Hugo's standards.

Please refer to contentlayer.config.ts for an up to date list of supported fields. The following fields are supported:

title (required)
date (required)
tags (optional)
lastmod (optional)
draft (optional)
summary (optional)
images (optional)
authors (optional list which should correspond to the file names in `data/authors`. Uses `default` if none is specified)
layout (optional list which should correspond to the file names in `data/layouts`)
canonicalUrl (optional, canonical url for the post for SEO)

Here's an example of a post's frontmatter:

---
title: 'Introducing Tailwind Nexjs Starter Blog'
date: '2021-01-12'
lastmod: '2021-01-18'
tags: ['next-js', 'tailwind', 'guide']
draft: false
summary: 'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.'
images: ['/static/images/canada/mountains.jpg', '/static/images/canada/toronto.jpg']
authors: ['default', 'sparrowhawk']
layout: PostLayout
canonicalUrl: https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog
---