developr-nextjs-tailwind

Showcase your projects, blog, and gallery for Developers (markdown supported)

The repo uses the following tech :

• Next
• React
• TailwindCSS
• HeadlessUI
• ContentLayer
• KBar
• Tina CMS

Tooling ⚡️

• pnpm (package manager)
• Typescript (Type checking)
• Eslint (Linter)
• Prettier (Code Formatter)
• Husky (Checking for errors, linting and formatting on commit)
• Lint Staged
• MDX

Features

• System, Dark and Light Mode

Run the webapp:

$ cd next-js-template
$ pnpm run dev

run prettier ✨

$ pnpm exec prettier . --write

prettier --write . is great for formatting everything, but for a big project it might take a little while. You may run prettier --write app/ to format a certain directory, or prettier --write app/components/Button.js to format a certain file. Or use a glob like prettier --write "app/*/.test.js" to format all tests in a directory

If you have a CI setup, run the following as part of it to make sure that everyone runs Prettier. This avoids merge conflicts and other collaboration issues!

$ pnpm exec prettier . --check

--check is like --write, but only checks that files are already formatted, rather than overwriting them. prettier --write and prettier --check are the most common ways to run Prettier.

Eslint (This repository is enabled to auto-fix eslint errors on save.)✨

To make eslint errors visible in VSCode, you need to install the ESLint Plugin.

Pre-commit Check

This repository is enabled to test typescript files and lint errors check and automatically prettify if everything looks fine, before commit to git.

Note: If you want to skip the check, you can add a --no-verify flag to your commit command. For example: git commit --no-verify -m "Update README.md"

Install this VS Code Extensions

• Prettier Code Formatter
• Prettier ESLint
• Prettier Typescript Errors
• PostCSS Language Support
• Tailwind CSS Intellisense
• DotEnv
• Formatting Toggle
• Jest
• Preview.js

Support for MDX

• MDX - contentlayer
• Html Preprocessors - Rehype
• Rehype Autolink Headings
• HastScript

Features:

• Tina Headless CMS for authentication, content modeling, visual editing and team management.
• Vercel deployment to visually edit your site from the /admin route.
• Local development workflow from the filesystem with a local GraqhQL server.

Reference

https://medium.com/frontendweb/how-to-build-a-command-k-interface-with-nextjs-and-kbar-b10aa9b08a17 (done) https://www.braydoncoyer.dev/blog/build-a-glassmorphic-navbar-with-tailwindcss-backdrop-filter-and-backdrop-blur (done) https://www.kozhuhds.com/blog/how-to-build-a-static-mdx-blog-with-nextjs-and-contentlayer (done) https://nextjs.org/docs/app/building-your-application/configuring/mdx

TinaCMS

https://github.com/tinacms/tina-cloud-starter https://tina-cloud-starter-orcin.vercel.app/about https://github.com/tinacms/tina-cloud-starter https://github.com/tinacms/tina-barebones-starter/tree/main https://github.com/kikeonline/tina-next-js https://github.com/tinacms/llama-link

Inspiration

https://mambaui.com/components/article

https://www.braydoncoyer.dev/ https://bobbyhadz.com/

https://github.com/braydoncoyer/braydoncoyer.dev

https://tailwind-nextjs-starter-blog.vercel.app https://www.timlrx.com/ https://github.com/timlrx/timlrx.com https://github.com/timlrx/pliny/tree/main

https://github.com/osiux/osiux.ws/tree/main

https://zenorocha.com/ https://www.andredevries.dev/ https://ben.codes/ https://www.leohuynh.dev

Taxonomy - https://github.com/shadcn-ui/taxonomy https://tx.shadcn.com/

https://mikebifulco.com/posts/mdx-auto-link-headings-with-rehype-slug#why-you-should-link-to-headings-in-your-articles https://www.kartuzinski.com/how-to-set-up-links-in-headings-mdx-next-js https://contentlayer.dev/docs/sources/files/mdx-d747e46d https://github.com/shadcn-ui/taxonomy/blob/main/components/mdx-components.tsx

Use notion as data source

https://github.com/braydoncoyer/braydoncoyer.dev/blob/v3/lib/notion.ts

Use Wordpress as headless cms (data sourcex)

https://github.com/colbyfayock/next-wordpress-starter