An example app built using Astro.
Astro is a dynamic static site generator that harmoniously integrates with Tailwind CSS. It empowers you to construct websites effortlessly and swiftly, all while maintaining optimal performance.
Features
This project is an experiment to see how a modern app, with features using MDX, Notion API and more, can be built using Astro.
Astro
Responsive, React components, Layouts, scripts and API routes.
MDX
Markdown and MDX support with amazing code styling.
PRISMA
ORM using Prisma; deploy to PlanetScale or Vercel.
Components
UI components built using Tailwind CSS.
NOTION as CMS
Use Notion as a CMS with the Notion API.
Typescript
Typescript support out of the box and some useful scripts.
You can configure the project to get data from Notion or MDX.
Proudly Open Source
This page is open source and powered by open source software.
The code is available on
GitHub
.
FAQs
- What is this?
- This is a astro template that uses tailwindcss and notion as CMS
- We use pure js/ts for scripts functionality and some react components, why?
- Because we want to keep the bundle size as small as possible, so we don't use any framework for the scripts
- But I don't need React, can I remove it?
- Of course, but some components use it and you'll have to edit these
- Can I remove also tailwidcss?
- I mean, you can, but you'll have to basically rewrite all the template, so I don't recommend it
- I don't need dark mode, how can I remove it?
- Dark mode is embedded into tailwindcss, so you can't remove it, but you can remove the switch from the navbar
- How can I configure the Notion CMS
- To configure Notion as CMS do the followings:
- Clone the template for notion Notion Templatey
- Update the .env with the db or pages that you want
- Change the configuration in providers.config.ts file