mirror of
https://github.com/jackwaterloo/astro-spherical.git
synced 2026-03-08 01:30:42 +00:00
This is a blog/portfolio template I plan on using for my own site.
https://astro-spherical.netlify.app/
| .docs | ||
| .vscode | ||
| public | ||
| src | ||
| .gitignore | ||
| .nvmrc | ||
| .prettierignore | ||
| .prettierrc.mjs | ||
| _lighthouse.png | ||
| AGENTS.md | ||
| astro.config.mjs | ||
| eslint.config.mjs | ||
| LICENSE | ||
| package-lock.json | ||
| package.json | ||
| pnpm-lock.yaml | ||
| README.md | ||
| tailwind.config.mjs | ||
| tsconfig.json | ||
Astro Spherical
This is an astro template meant to display blog posts and projects.
Based off Astro Sphere - a static, minimalist, lightweight, lightning fast theme built primarily with Astro, Tailwind and TypeScript, with a small amount of SolidJS for stateful components.
🚀 Major Additions
This fork includes significant enhancements:
- Enhanced Code Blocks - Expressive Code with copy-to-clipboard, line numbers, and terminal frames
- Table of Contents - Auto-generated TOC for blog posts and projects with active section highlighting
- Hero Images - Support for hero images in blog posts and content previews
- ContentImage Component - Consistent image styling with captions for MDX content
- Redesigned Content Previews - Modern card design with hover animations and reading time
- Developer Experience - ESLint, Prettier, and AI agent guidelines (AGENTS.md)
For a comprehensive list of all features and usage instructions, see the New Features blog post.
📋 Features
- ✅ 100/100 Lighthouse performance
- ✅ Responsive
- ✅ Accessible
- ✅ SEO-friendly
- ✅ Typesafe
- ✅ Minimal style
- ✅ Light/Dark Theme
- ✅ Animated UI
- ✅ Tailwind styling
- ✅ Auto generated sitemap
- ✅ Auto generated RSS Feed
- ✅ Markdown support
- ✅ MDX Support (components in your markdown)
- ✅ Searchable content (posts and projects)
- ✅ Code Blocks - copy to clipboard
💯 Lighthouse score
🕊️ Lightweight
All pages under 100kb (including fonts)
⚡︎ Fast
Rendered in ~40ms on localhost
💻 Commands
All commands are run from the root of the project, from a terminal:
Replace npm with your package manager of choice. npm, pnpm, yarn, bun, etc
| Command | Action |
|---|---|
npm install |
Installs dependencies |
npm run dev |
Starts local dev server at localhost:4321 |
npm run dev:network |
Starts dev server on local network |
npm run sync |
Generates TypeScript types for all Astro modules. |
npm run build |
Build your production site to ./dist/ |
npm run preview |
Preview your build locally, before deploying |
npm run preview:network |
Starts preview server on local network |
npm run astro ... |
Run CLI commands like astro add, astro check |
npm run astro -- --help |
Get help using the Astro CLI |
npm run lint |
Run ESLint |
npm run lint:fix |
Auto-fix ESLint issues |
npm run format |
Check code formatting with Prettier |
npm run format:fix |
Auto-fix formatting issues with Prettier |
✨ Acknowledgement
Built with Astro Sphere theme by Mark Horn
Theme inspired by Paco Coursey, Lee Robinson and Hayden Bleasel
🏛️ License
MIT
