This is a blog/portfolio template I plan on using for my own site. https://astro-spherical.netlify.app/
Find a file
2025-12-21 15:59:37 -06:00
.docs added astro docs 2025-11-26 14:00:24 -06:00
.vscode updated eslint config 2025-11-20 23:31:02 -06:00
public added toc to blog/projects 2025-12-18 20:51:39 -06:00
src added example info 2025-12-21 15:59:37 -06:00
.gitignore heading offset when clicked 2025-12-14 20:05:56 -06:00
.nvmrc added required node version 2025-11-26 13:42:33 -06:00
.prettierignore updated packages, eslint, prettier, agents.md 2025-11-11 09:16:43 +09:00
.prettierrc.mjs updated packages, eslint, prettier, agents.md 2025-11-11 09:16:43 +09:00
_lighthouse.png initial 2024-03-18 20:56:17 +07:00
AGENTS.md added max image size 2025-12-18 17:58:18 -06:00
astro.config.mjs touch up for template 2025-12-14 13:41:39 -06:00
eslint.config.mjs updated eslint config 2025-11-20 23:31:02 -06:00
LICENSE updated license with my name 2025-12-14 16:44:51 -06:00
package-lock.json fixed code block horizontal scroll; added line numbers 2025-12-11 17:39:41 -06:00
package.json cleaned up repo 2025-12-21 15:42:49 -06:00
pnpm-lock.yaml v1.0.1 2024-04-04 00:04:15 +07:00
README.md cleaned up repo 2025-12-21 15:42:49 -06:00
tailwind.config.mjs added toc to blog/projects 2025-12-18 20:51:39 -06:00
tsconfig.json formatted with prettier 2025-11-11 14:47:10 +09:00

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

Astro Sphere 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