isooosi / astroverse

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

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

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

• iNote

💻 Running Locally

Recommended extensions for VSCode:

• Tailwind CSS IntelliSense.
• Astro.

1. Fork or use this template

2. Install dependencies:

pnpm install

3. 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:

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

astroverse's Issues

pagination

hello
do you have pagination?
telegram yakushevhk

About cover picture file configuration problem

After reviewing the code, const socialImageURL = new URL(ogImage ? ogImage : '/open-graph. webp', Astro.url).href;The cover image found is a relative path by defaultsrc/images/visvrs1.webp. What if I want to configure absolute addresses such ashttps://www.notion.so/images/page-cover/rijksmuseum_jansz_1649.jpg?

搜索功能无法加载bug

只要先点击某个页面的链接,再点击搜索一定出现白屏. f5刷新页面后,搜索功能才能正常

Record sites that use this template

For ordinary users, we want to know which sites use this excellent website template, we can add friend chain, learn from each other

请问主题支持分页吗

我好像没有找到相关配置

Content duplication

Click the page number button from the first page to the second page, and the content is repeated, for example, the last three items on the first page are also displayed on the second page.
page 1

page 2

Dynamically set the category href within Header.astro

Currently, the category hrefs are hard coded within Header.astro.
Would setting the hrefs dynamically make more sense?

For example, starting here: https://github.com/isooosi/VisVrs/blob/502d1a6d721fff837081b7705c7bfb312c8a1844/src/components/Header.astro#L10-L12 they are hard coded.

I'm completely new to astro/JS and this is the first template i've used. Love the design!

Table of contents

Would be possible to add headings/table of contents to articles on the right?

About the document's fields

posts → aliases.md frontmatter does not match collection schema.
pubDate: Required
description: Required
coverAlt: Required
author: Required

---

Could you change 'description', 'coverAlt', 'author' to a non-required type ？or provide some default values,

readme information correction

readme content
Basic configuration file: ./src/config.yaml
can only find
consts.ts

FailedToFetchRemoteImageDimensions[v4.7]

After doing a complete new clone of v4.7 and installing dependencies, i'm running the dev server and clicking around i get this error:

what about i18n

languages