Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/inotelab/astroverse
An Astro theme tailored for impactful image-text blogging, ideal for content creators.
https://github.com/inotelab/astroverse
astro astro-theme astro-themes astrojs blog blog-template blog-theme jamstack static tailwindcss-template theme
Last synced: about 9 hours ago
JSON representation
An Astro theme tailored for impactful image-text blogging, ideal for content creators.
- Host: GitHub
- URL: https://github.com/inotelab/astroverse
- Owner: inotelab
- License: mit
- Created: 2023-09-11T07:06:43.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-14T14:44:47.000Z (about 11 hours ago)
- Last Synced: 2024-11-14T15:36:09.355Z (about 11 hours 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: 6.05 MB
- Stars: 128
- Watchers: 2
- Forks: 37
- 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!
