https://github.com/penboxlab/astroverse
An Astro theme tailored for impactful image-text blogging, ideal for content creators.
https://github.com/penboxlab/astroverse
astro astro-theme astro-themes astrojs blog blog-template blog-theme jamstack static tailwindcss-template theme
Last synced: about 1 month ago
JSON representation
An Astro theme tailored for impactful image-text blogging, ideal for content creators.
- Host: GitHub
- URL: https://github.com/penboxlab/astroverse
- Owner: penboxlab
- License: mit
- Created: 2023-09-11T07:06:43.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-11T12:35:59.000Z (about 1 month ago)
- Last Synced: 2025-03-11T13:39:27.684Z (about 1 month ago)
- Topics: astro, astro-theme, astro-themes, astrojs, blog, blog-template, blog-theme, jamstack, static, tailwindcss-template, theme
- Language: Astro
- Homepage: https://verse-astro.vercel.app/
- Size: 5.93 MB
- Stars: 171
- Watchers: 2
- Forks: 47
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## ๐Language Versions / ่ฏญ่จ็ๆฌ
๐บ๐ธ[English](README.md) ๐จ๐ณ[ไธญๆ](README_CN.md)
## ๐ **AstroVerse**: An Astro Theme for Visual Storytelling
AstroVerse is an Astro theme tailored for captivating photo-text storytelling.
It seamlessly merges visuals and written content, empowering creators to deliver compelling narratives with high-impact imagery.
Ideal for bloggers and content creators seeking to make their stories stand out through the fusion of striking visuals and engaging prose, AstroVerse provides a platform to create immersive and influential digital experiences.
## ๐ฏLighthouse Score
## ๐ Features
- โ
Powered by Astro
- โ
Development with Tailwind CSS and Preline UI
- โ
Fully Responsive Design
- โ
Perfect 100/100 Lighthouse Performance Score
- โ
SEO Optimized
- โ
Inbuilt Site Search
- โ
Sitemap and RSS Feed Support
- โ
Markdown & MDX Ready
- โ
Tag Statistics and Last Modified Time Display
- โ
Optimized Image Handling
- โ
Automatic Dark Mode Switching
- โ
Pagination for Easy Navigation
- โ
Code formatted with Prettier in one click
## ๐ก Live demo
Experience [**AstroVerse**](https://verse-astro.vercel.app) in action.
## ๐ Showcase
Share your project built with AstroVerse! Open an issue titled "Showcase Submission" with your project's details to be featured in our Showcase.
## ๐ป Running Locally
**Recommended extensions for VSCode:**
- [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss).
- [Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode).
1. Fork or use this [template](https://github.com/inotelab/astroverse)
2. Install dependencies:
```bash
pnpm install
```
3. Run the development server:
```bash
pnpm run dev
```
## ๐ Adding a post
Adding a post is as simple as adding a .md or .mdx file to the blog folder at the path **src/content/posts**.
## ๐ง Commands
All commands are run from the root of the project, from a terminal:
| Command | Action |
| :---------------- | :------------------------------------------- |
| `pnpm install` | Installs dependencies |
| `pnpm run dev` | Starts local dev server at `localhost:4321` |
| `pnpm run build` | Build your production site to `./dist/` |
| `pnpm run preview` | Preview your build locally, before deploying |
| `pnpm run format` | Code formatter using prettier |
| `npx @astrojs/upgrade` | To upgrade |
### ๐งConfiguration
Basic configuration file: `./src/consts.ts`
```ts
// Place any global data in this file.
// You can import this data from anywhere in your site by using the `import` keyword.
// Base Page Metadata, src/layouts/BaseLayout.astro
export const BRAND_NAME = "AstroVerse";
export const SITE_TITLE = "AstroVerse";
export const SITE_DESCRIPTION = "An Astro Theme for Visual Storytelling";
// Tags Page Metadata, src/pages/tags/index.astro
export const Tags_TITLE = "AstroVerse - All Tags";
export const Tags_DESCRIPTION =
"AstroVerse - All tags and the count of articles related to each tag";
// Tags Page Metadata, src/pages/tags/[tag]/[page].astro
export function getTagMetadata(tag: string) {
return {
title: `All articles on '${tag}' tag in AstroVerse`,
description: `Explore articles about ${tag} for different perspectives and in-depth analysis.`,
};
}
// Category Page Metadata, src/pages/category/[category]/[page].astro
export function getCategoryMetadata(category: string) {
return {
title: `All articles in '${category}' category in AstroVerse`,
description: `Browse all articles under the ${category} category in AstroVerse`,
};
}
// Header Links, src/components/Header.astro
export const HeaderLinks = [
{ href: "/category/One/1/", title: "One" },
{ href: "/category/Two/1/", title: "Two" },
{ href: "/category/Three/1/", title: "Three" },
];
// Footer Links, src/components/Footer.astro
export const FooterLinks = [
{ href: "/posts/why-astro/", title: "Astro" },
{ href: "/posts/tailwind-typography/", title: "Tailwind" },
{ href: "/tags/", title: "Tags" },
];
// Social Links, src/components/Footer.astro
export const SocialLinks = [
{ href: "/rss.xml", icon: "tabler:rss", label: "RSS" },
{
href: "https://twitter.com/inotelab",
icon: "tabler:brand-twitter",
label: "Twitter",
},
{
href: "https://github.com/inotelab",
icon: "tabler:brand-github",
label: "GitHub",
},
];
// Search Page Metadata, src/pages/search.astro
export const SEARCH_PAGE_TITLE = `${SITE_TITLE} - Site Search`;
export const SEARCH_PAGE_DESCRIPTION = `Search all content on ${SITE_TITLE}`;
```
## Deployment
Click the button below to start deploying your project on Vercel:
[](https://vercel.com/import/project?template=https://github.com/inotelab/astroverse)
## โจ Join and Contribute
Your contributions make AstroVerse better! Whether it's through code, design, bug reports, or feature ideas, we value your input. Check our Issues or submit a Pull Request to get started. Together, let's enhance AstroVerse!
