🧑‍🚀 Hello, Astronaut!

Welcome to the official Astro blog starter template. This template serves as a lightweight, minimally-styled starting point for anyone looking to build a personal website, blog, or portfolio with Astro.

Button Component Examples

Here are some button variants using our custom color palette:

Usage Example

---
import Button from '../components/Button.astro';
---

<Button variant="primary">Click Me</Button>
<Button variant="secondary" href="/blog">Go to Blog</Button>
<Button variant="outline">Outlined</Button>

Color Palette Variables

:root {
  --bg-primary: #FFF4E0;
  --accent: #B46060;
  --accent-dark: #8B4545;
  --secondary: #FFBF9B;
  --text-primary: 77, 77, 77;
}

JavaScript Example

// Simple greeting function
function greetUser(name) {
  const greeting = `Hello, ${name}!`;
  console.log(greeting);
  return greeting;
}

// Object with methods
const Blog = {
  posts: [],
  addPost(title, content) {
    this.posts.push({ 
      id: Date.now(), 
      title, 
      content,
      published: new Date() 
    });
  },
  getPosts() {
    return this.posts.sort((a, b) => b.published - a.published);
  }
};

// Example usage
greetUser("Astronaut");
Blog.addPost("My First Post", "Welcome to my blog!");

This template comes with a few integrations already configured in your astro.config.mjs file. You can customize your setup with Astro Integrations to add tools like Tailwind, React, or Vue to your project.

Here are a few ideas on how to get started with the template:

• Edit this page in src/pages/index.astro
• Edit the site header items in src/components/Header.astro
• Add your name to the footer in src/components/Footer.astro
• Check out the included blog posts in src/content/blog/
• Customize the blog post page layout in src/layouts/BlogPost.astro

Have fun! If you get stuck, remember to read the docs or join us on Discord to ask questions.