Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sangeetagarwal/tailwind-remix-run-mdxjs-typescript-starter-blog

This is a Remix-run, Tailwind CSS blogging starter template. Write your technical blogs using MDX and comes with features that are super easy to customize. Perfect as a replacement to existing Jekyll and Hugo individual blogs.
https://github.com/sangeetagarwal/tailwind-remix-run-mdxjs-typescript-starter-blog

blog blogging mdx mdx-js publishing reactjs remix-run tailwindcss typescript

Last synced: 3 months ago
JSON representation

This is a Remix-run, Tailwind CSS blogging starter template. Write your technical blogs using MDX and comes with features that are super easy to customize. Perfect as a replacement to existing Jekyll and Hugo individual blogs.

Awesome Lists containing this project

README 

        
# Tailwind Remix-run MDX.js Starter Blog



[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/SangeetAgarwal/tailwind-remix-run-mdxjs-typescript-starter-blog/blob/main/LICENSE)



This is a [Remix-run](https://remix.run/), [Tailwind CSS](https://tailwindcss.com/), typescript blogging starter template.

This was made using the [Remix's blues stack](https://github.com/remix-run/blues-stack).



Easily the most feature rich Remix-run markdown blogging template in existence. Comes with built-in features that are very customizable to make the process of writing technical blogs super easy. Perfect as a replacement to existing Jekyll and Hugo individual blogs.



## Examples



![img.png](img.png)



- [Demo Blog](https://tailwind-remix-run-mdxjs-typescript-starter-blog.fly.dev/) - this repository is deployed to [fly.io](https://fly.io/)

- [My personal blog](https://www.makebitbyte.com/)



## Features



- **Easily customize styling with** [Tailwind 3.0](https://tailwindcss.com/blog/tailwindcss-v3)

- **Near perfect lighthouse score** - [Lighthouse report](https://www.webpagetest.org/result/230715_AiDc9Y_7E5/)

- **Mobile-friendly view**

- [MDX](https://mdxjs.com/) **allows you to use JSX in your markdown content**

- **Math display supported via** [KaTeX](https://katex.org/) **using the** [rehype-katex](https://www.npmjs.com/package/rehype-katex)

- **Initial attempt at SEO using** [remix-seo](https://github.com/chaance/remix-seo)

- **Typescript support**

- **Citation and bibliography support via** [rehype-citation](https://github.com/timlrx/rehype-citation)

- **TOC component**

- **Blog Templates**

- **Server-side syntax highlighting with line numbers and line highlighting via** [rehype-prism-plus](https://github.com/timlrx/rehype-prism-plus)

- **Auto adds `id`s to headings using** [rehype-slug](https://github.com/rehypejs/rehype-slug)

- **Easily retrieve data with [mdx-bundler](https://github.com/kentcdodds/mdx-bundler)**

- **A page to showcase all your projects**

- **Support for tags - each unique tag will be its own page**

- **Mobile-friendly view**

- **~~Support for analytics including Umami, Plausible, Simple Analytics, Posthog and Google Analytics~~** still to be implemented

- **~~Support for comments via Newsletter API and component with support for Mailchimp, Buttondown, Convertkit, Klaviyo, Revue, and Emailoctopus~~** still to be implemented

- **~~Newsletter API and component with support for Mailchimp, Buttondown, Convertkit, Klaviyo, Revue, and Emailoctopus~~** still to be implemented



Feature request or facing an issue? Check the [discussion page](https://github.com/SangeetAgarwal/tailwind-remix-run-mdxjs-typescript-starter-blog/discussions) to see if it has been brought up previously. Otherwise, feel free to start a new discussion thread. All ideas are welcome!



## Sample posts



- **[Synopsis of features in this starter blog app](https://tailwind-remix-run-mdxjs-typescript-starter-blog.fly.dev/blog/features-in-v1)**

- **[Guide for writing markdown text](https://tailwind-remix-run-mdxjs-typescript-starter-blog.fly.dev/blog/github-markdown-guide)**

- **[An expose of how to add markdown images in jsx](https://tailwind-remix-run-mdxjs-typescript-starter-blog.fly.dev/blog/pictures-of-canada)**

- **[An example of representing mathematical notations](https://tailwind-remix-run-mdxjs-typescript-starter-blog.fly.dev/blog/deriving-ols-estimator)**

- **[See how to present long prose](https://tailwind-remix-run-mdxjs-typescript-starter-blog.fly.dev/blog/the-time-machine)**



## Credits and Inspiration



- Template from [Tailwind nextjs starter blog template](https://github.com/timlrx/tailwind-nextjs-starter-blog) © [`@timlrx`](https://github.com/timlrx)



## ⭐ Found It Helpful? [Star It!](https://github.com/SangeetAgarwal/tailwind-remix-run-mdxjs-typescript-starter-blog//stargazers)



If you found this project helpful, let the community know by giving it a [star](https://github.com/SangeetAgarwal/tailwind-remix-run-mdxjs-typescript-starter-blog/stargazers): [👉⭐](https://github.com//SangeetAgarwal/tailwind-remix-run-mdxjs-typescript-starter-blog/stargazers)



## Licence



[MIT](https://github.com/SangeetAgarwal/tailwind-remix-run-mdxjs-typescript-starter-blog/blob/main/LICENSE) © [Sangeet Agarwal](https://www.makebitbyte.com/)