/astros

Template with astro, tailwind and alpinejs

Primary LanguageAstroGNU General Public License v3.0GPL-3.0

Astro Tailwind Alpine js

Astros is a template made with Astro, Tailwind and AlpineJS.

This project is strongly inspired by Astroship, Flowbite and Tailwind UI components, make sure to check them out as well!

Deploy to Cloudflare Workers

Deploy to Netlify

Deploy with Vercel


Preview

Alt text

Astros Preview

๐Ÿงช Test

On the folder run

  1. bun install (or yarn or pnpm i)
  2. bun run dev (or yarn dev or pnpm dev)

(if it's not working report an issue)

๐Ÿš€ Deploy

Cloudflare pages (suggested)

You can either click on the button above to deploy to Cloudflare automatically, or you can fork this repository and deploy manually from cloudflare dashboard.

You can leave build settings as defaults.

Cloudflare configuration

Alt text

Netlify

TODO

Vercel

TODO

Others

You can check the deploy documentation at https://docs.astro.build/en/guides/deploy/

โœ… Features

  • Localization (with astro-i18next)
  • Light/Dark mode (provided by tailwind)
  • Discussion on articles (thanks to giscus)
  • Blog
  • CMS for editing blog post (thanks to Sveltia CMS)
  • PWA (thanks to vite-pwa)
  • AI to generate article posts

โœ๏ธ Admin dashboard

You can access the admin dashboard for editing blog post at /admin (https://astros.zank.studio/admin)

For more information follow Sveltia CMS documentation at https://github.com/sveltia/sveltia-cms

๐Ÿงž Dependencies

Astros depends on the following packages:

Dependency Version
@astrojs/mdx ^0.19.7
@astrojs/rss ^2.4.3
@astrojs/sitemap ^1.3.3
@astrojs/tailwind ^3.1.3
@fontsource-variable/inter ^5.0.2
astro ^2.6.1
astro-i18next ^1.0.0-beta.21
astro-icon ^0.8.1
astro-seo ^0.7.4
bad-words ^3.0.4
dotenv ^16.1.4
openai ^3.2.1
rehype-autolink-headings ^6.1.1
rehype-slug ^5.1.0
rss-parser ^3.13.0
tailwindcss ^3.3.2

Known issues

  • Localization is not detected automatically

FAQ


What is this?
This is a astro template that uses tailwindcss and alpinejs

Why alpinejs? Why don't just use js?
Alpine js is less than 17kb and it make javascript very fast to write, there are also various open source ready to use components like https://js.hyperui.dev, https://devdojo.com/pines, https://www.alpinetoolbox.com/examples, https://alpinejs.dev/components#components

But I don't need alpine js, can I remove it?
Of course, but some components use it and you'll have to edit these, more specifically you ll have to:
  • First remove the package with the command npm unistall @astrojs/alpinejs @types/alpinejs alpinejs
  • Adjust all components that uses alpine js: faq.astro, themeselector.astro, navbar.astro

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 client routing, how can I remove it?
From astro 2.9 you can opt-in for client routing (https://astro.build/blog/astro-290) by activating the experimental flag viewTransitions
You can remove client routing by removing viewTransitions: true from astro.config.mjs And the ViewTransitions component from Layout.astro

I don't need multiple language, how can I remove it?
One way is to simply keep one language and remove the selector from the footer but in order to fully remove the localization you have to:
  • Remove the i18next pacakage npm unistall astro-i18next
  • Remove astro-i18next.config.mjs file
  • Remove locales folder from public
  • Remove languageselector.astro file and from footer
  • Find all reference to i18next and astro-i18next and replace with your text

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 Sveltia CMS authentication with cloudflare?
To configure Sveltia CMS with cloudflare follow this guide https://github.com/sveltia/sveltia-cms

How can I change the localization languages?
In order to change the languages you have to change the languages in the file astro-i18next.config.mjs and in the netlifyCMS configuration on the file astro.config.mjs
Then change the locales files folders in public/locales

What are the files in the function folder used for?
These are cloudflare function that are used for the authentication to the decap CMS

The build on cloudflare keep failing, why?
One of the problem could be that the Build system version is setted to version 1, make sure that version 2 is selected

Work with modules in relink
This is helpful if you want to apply some changes to various modules while you are working on the website. To do so you have to go into each module and run
npm link


zank.studio