Home

Awesome

[!NOTE]
2024-08-29 - I'm archiving this repository. While this was a fun experiment and a good opportunity to learn Astro, I've found that this is not quite how I wish to develop websites. I hope the demo can still be useful as a learning tool. Feel free to contact me if you have any questions.


filament-peek-demo-with-astro

A demo project showcasing the Peek plugin for Filament. This version is a remix of the main demo, using Astro as a decoupled front-end.

<p class="filament-hidden"> <img src="https://repository-images.githubusercontent.com/683738801/fe1d8f1b-b8d7-4f82-b3f7-d65d1d58bcee" alt="Screenshots of the edit page and preview modal"> </p>

The idea is to explore Filament as a light, headless content management system (CMS). You'll find simple content types such as Pages, Posts and Menus, with support for image uploads. For content entry, Pages feature a rich-text editor (Tiptap) while Posts feature a block-based content editor (Builder).

The approach chosen is to run both Filament and Astro locally for content entry, then generate a full static site from the command line. From there, the site can be easily deployed in a variety of ways. Alternatively, it's also possible to run Filament on a server dedicated to content entry, then build and deploy the static site on the server or through automation (e.g. GitHub Actions). Both approaches support live content previews while editing in the CMS.

Requirements

Local setup

Filament

composer install
cp .env.example .env
touch database/database.sqlite
php artisan migrate:fresh --seed
php artisan storage:link
php artisan serve

You can log into the admin at localhost:8000/admin with the following credentials:

Astro

cd frontend
cp .env.example .env
npm install
npm run dev

You can access the site at localhost:3000