Introduction

AstroVerse is a cutting-edge Astro theme designed for visual storytelling and impactful image-text blogging. This theme is tailored for content creators who want to blend stunning visuals with engaging written content, creating immersive digital experiences. AstroVerse leverages the power of Astro, a modern static site generator, combined with Tailwind CSS and Preline UI for a responsive and visually appealing design.

Main Features

• Powered by Astro for fast, content-focused websites
• Responsive design using Tailwind CSS and Preline UI
• Perfect 100/100 Lighthouse Performance Score
• SEO optimized structure
• Built-in site search functionality
• Sitemap and RSS feed support
• Markdown and MDX ready for flexible content creation
• Tag statistics and last modified time display
• Optimized image handling for improved performance
• Automatic dark mode switching
• Pagination for easy content navigation
• Code formatting with Prettier

Installation Steps

1. Ensure you have Node.js and pnpm installed on your system.

2. Use the template or fork the repository:

   https://github.com/isooosi/astroverse/generate
   

3. Clone your new repository locally.

4. Navigate to the project directory:

   cd astroverse
   

5. Install dependencies:

   pnpm install
   

6. Start the development server:

   pnpm run dev
   

Usage Instructions

1. Adding content:

   • Create new .md or .mdx files in the src/content/posts directory to add blog posts.

2. Configuration:

   • Modify src/consts.ts to update global site information, metadata, and navigation links.

3. Customization:

   • Use Tailwind CSS classes to style components and pages.
   • Modify or create new components in the src/components directory.

4. Building for production:

   pnpm run build
   

5. Previewing the production build:

   pnpm run preview
   

6. Formatting code:

   pnpm run format
   

Important Notes

1. AstroVerse is optimized for photo-text storytelling. Ensure your content leverages this strength by using high-quality images alongside your text.

2. The theme supports automatic dark mode switching. Test your content in both light and dark modes to ensure readability.

3. When adding new posts, pay attention to the frontmatter in your Markdown files. This information is used for metadata, tags, and categories.

4. The built-in search functionality indexes your content automatically. No additional setup is required for search to work.

5. AstroVerse uses Astro's image optimization features. Follow Astro's guidelines for image handling to maintain optimal performance.

6. The theme is SEO-optimized out of the box, but consider customizing meta descriptions and titles for each post for best results.

7. Regularly update your dependencies to benefit from the latest features and security patches:

   npx @astrojs/upgrade
   

8. Contributions to the theme are welcome. Follow the project's contribution guidelines when submitting issues or pull requests.

9. For deployment, the theme is configured for easy deployment on Vercel. Follow the deployment button in the README for a quick setup.

10. While the theme provides a solid foundation, feel free to extend and modify it to suit your specific needs. The Astro and Tailwind CSS communities are great resources for additional customization ideas.