Multilanguage blogs with a SSG Astro Editor
TL;DR Finally getting to try i18n languages with Astro SSGs
+++ Plus adding interesting shortcodes / components : https://github.com/JAlcocerT/just-ssg
Intro
I failed to understand properly i18n on this podcast post.
I got a way with a cool Astro Pod Theme Fork though
The
An Editor for Astro Blog Posts
I know there are few ways to do markdown edits…
But after trying react markdown and toast ui with the typography theme, I stay with ToastUI:
My Initial requirements for Cursor 📌
This document details the features and functionality for a local-first markdown editor.
The application should be built with a focus on an efficient content creation workflow for static sites, specifically for Astro themes.
Core Requirements - The following features are mandatory for the initial build of the application:
Folder Selection: The user must be able to select a local folder to scan for files inside astro-themes. This should be implemented via a visible input field or a file picker dialog.
File Tree/List: After selecting a folder, the application must display a list of all .md and .mdx files found within that folder and its subdirectories.
Side-by-Side Editor: When a file is selected from the list, the ToastUI Editor should open on the right-hand side of the screen, with the file list remaining visible on the left.
Editor Functionality: The ToastUI Editor must be fully functional, including markdown editing, saving the .md or .mdx to local storage and a live preview of the content.
Focus Mode: A button or toggle that hides the file list, expanding the editor to full width for a distraction-free writing experience.
File Saving: The application must have a clear mechanism to save the current editor content directly back to the selected local .md or .mdx file.
Good-to-Have Features - I did not mentioned these on the first go
These features are highly recommended to elevate the user experience and create a more complete tool.
Real-time Saving: The application must automatically save the editor state locally as edits are made to prevent data loss.
Frontmatter Editor: A dedicated UI panel, separate from the main markdown content, for editing a file’s frontmatter (e.g., title, date, tags, description). This prevents syntax errors and provides a structured way to manage metadata.
Asset Handling: The ability to drag and drop images directly into the editor. The application should handle placing the image file into a specified local directory (e.e., src/assets/images) and automatically insert the correct markdown link into the document.
File Management: Add basic file management capabilities such as creating new files, creating new folders, and deleting existing files directly from the UI.
Keyboard Shortcuts: Implement standard keyboard shortcuts for common actions, like saving (Ctrl + S), toggling focus mode, and opening the file picker.
Multi-Tab Editing: Allow users to open and switch between multiple files in a tabbed interface, similar to a code editor, without losing their editing state.
Git Integration: A basic UI for committing changes, viewing the file’s Git status (e.g., modified, untracked), and pushing/pulling from a remote repository.
After using 3 of my 4 monkey fingers with cursor.
I got this:
Cool Blogging Themes
The Jekyll Chirpy theme is so cool that others have taken it as inspiration.
Which is kind of an improved jekyll theme that i used for the RPi: https://jalcocert.github.io/RPi/
- Fuwari
- Frosti
- HUGO has also something to say: Hugo Theme Stack
Those helped me to make a better HUGO documentation Theme :)
Fuwari
I wanted to try for long Fuwari Theme:
#from the route of the astro editor
#git clone https://github.com/JAlcocerT/astro-editor
#Editing FUWARI via astro editor - Example
git clone https://github.com/saicaca/fuwari ./astro-themes/fuwari
#git clone https://github.com/JAlcocerT/jmodels-web
#https://github.com/JAlcocerT/j-models
cd ./astro-themes/fuwari
pnpm install && pnpm run devThis can be combined with PB.
Frosti
I got to know:
MIT | A clean, elegant, and fast static blog template! 🚀 Developed with Astro
Hugo Theme Stack
I would say this is the Fuwari in Hugo :)
MIT | A quickstart template to create a Hugo blog using hugo-theme-stack
Other Blog Themes
Apache v2 | ⭐ A simple, fast and powerful blog & document theme built by Astro
MIT
FAQ
How to create an Astro-Editor
git init
git branch -m main
git config user.name
git config --global user.name "JAlcocerT"
git config --global user.name
git add .
git commit -m "Initial commit: Starting astro editor via NextJS and ToastUI"
#sudo apt install gh
gh auth login
gh repo create astro-editor --private --source=. --remote=origin --push
#git init && git add . && git commit -m "Initial commit: Starting astro editor via NextJS and ToastUI" && gh repo create astro-editor --private --source=. --remote=origin --push