This blog uses Markdown, with GitHub's flavor¹. To parse the markdown it uses some remark and rehype (unified) packages like next-mdx-remoteand next-prism.

https://github.com/timlrx/tailwind-nextjs-starter-blog

Title 1

Title 2

Title 3

Title 4

Title 5

This is normal text.

This is bold text.

This is italics text.

Link to title

Link to internal page

This is a link

This is a link with title

This is a reference link

This is a footnote reference ²

• Item 1

• Item 2
  • Item 3

1. Item 1
2. Item 2
   1. Item 3

This is inline code.

Next is a code block in Python 🐍:

def fib():
    a, b = 0, 1
    while True:            # First iteration:
        yield a            # yield 0 to start with and then
        a, b = b, a + b    # a will now be 1, and b will also be 1, (0 + 1)

for index, fibonacci_number in zip(range(10), fib()):
     print('{i:3}: {f:3}'.format(i=index, f=fibonacci_number))

In the new computer age the proliferation of typefaces and type manipulations represents a new level of visual pollution threatening our culture. Out of thousands of typefaces, all we need are a few basic ones, and trash the rest.

— Massimo Vignelli

Next is the author of the bible:

GitHub flavor

This is an autolink: https://www.example.com/

This is an automail: example@example.com

This was mistaken text

This text is extremely important

All this text is important

• Finish my changes
• Push my commits to GitHub
• Open a pull request

Images

For images it uses the next/Image react component, for convenience a script replaces the markdown img tag to the correct Image component. You can also call it directly inside MDX but need to specify width and height.

	<Image src="/static/images/avatar.jpg" alt="Picture of the author" width={500} height={500} />

We use this react component because it:

1. Optimizes images (30% more than jpeg).
2. Makes them responsive.
3. Applies lazy loading (loads them on demand).
4. Easy to organize using flexbox and tailwind css.

This comes at the cost of a call to a CDN highly optimized image server that only Vercel hosting fully supports. You could use another package like next-optimized-images however most of them use webpack and with higher load times, you could use other hosting options like Imgix or Cloudinary or you could disable the processing entirely by deleting lib/img-to-jsx.js and it's references. Also some browsers will treat the image with the webp format.

Example Gallery:

Math

We can parse and display math equations with remark-math and rehype-katex that use KaTeX. Both are enabled in _document.js for every page.

For inline math use the $ symbol like $2+4x = y$ this.

For math code blocks use the $$ symbol.

Result:

Given:

Finally:

Template

This template is a Next.js and Tailwind CSS 2.0 starter. You can see the demo a real example or the inspiration behind it. The design is mostly a copy of the Tailwind Blog. It has most of the features of the popular Beautiful Jekyll starter, including: Good lighthouse score, lightweight with preact, responsive, dark theme, MDX for JSX code, syntax highlighting using rehype-prism, math with KaTeX, image optimization with next/image, data retrieval with next-mdx-remote, SEO, RSS, Sitemap, and Heroicons.

Quick start

1. npx degit https://github.com/timlrx/tailwind-nextjs-starter-blog.git
2. Personalize siteMetadata.json, projectsData.js, headerNavLinks.js
3. Run npm install, npm rebuild.
4. Add mdx or md blog posts to Pages/Blog.
5. Runnpm run build, npm run dev. Deploy to Vercel.
6. Style it with css/tailwind.css.
7. Pass JSX or React components by adding them to components/MDXComponents.js

Posts use the Hugo Standard frontmatter meaning they require a title (string), date (YY-MM-DD) and tags (array). Optional fields are lastmod (YY-MM-DD), draft (boolean), summary (string), images (array). Also the script compose.js creates a prefilled frontmatter post, use it by running node ./scripts/compose.js "PostTitle".md