/astroverse

An Astro theme tailored for impactful image-text blogging, ideal for content creators.

Primary LanguageAstroMIT LicenseMIT

CI/CD to Github Pages Astro npm version

Getting Started with Astro

A feature full Astro documentation template...

...that works out of the box with Github Pages

Run it locally with: 👈  
cd Docs
npm install
npm run dev #http://localhost:4321/astrotest/

npm run build
#npm install -g http-server
#http-server

#python3 -m http.server 8080

Deploy it with any of:

Github Pages

Cloudflare Pages

#npx wrangler pages project create
npx wrangler pages deploy dist #<BUILD_OUTPUT_DIRECTORY>

Firebase

npm install -g firebase-tools
firebase --version

firebase init
firebase deploy

Thanks to ❤️


🌍Language Versions / 语言版本

🇺🇸English 🇨🇳中文

🚀 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.

AstroVerse Screenshot

💯Lighthouse Score

AstroVerse 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 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:

  1. Fork or use this template

  2. Install dependencies:

pnpm install
  1. Run the development server:
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
npm install Installs dependencies
npm run dev Starts local dev server at localhost:4321
npm run build Build your production site to ./dist/
npm run preview Preview your build locally, before deploying
npm run format Code formatter using prettier

🔧Configuration

Basic configuration file: ./src/consts.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/astrodotbuild",
    icon: "tabler:brand-twitter",
    label: "Twitter",
  },
  {
    href: "https://github.com/isooosi",
    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:

Deploy to Vercel

✨ 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!