Documentation

Content

The content of Astral Themes websites is designed to be easy to locate and straightforward to customize for your project.

---

Website Data

Core website information and metadata can be configured in the Head.astro component, located in the global components directory.

---
// Change website metadata here
const {
  title = "Website title",
  description = "Description",
  pageTitle,
  keywords = "SEO keywords",
  ogImage = "/og-image.jpg", // from public directory
  canonicalURL,
} = Astro.props;

const siteURL = ""; // Change to your actual domain
const fullURL = canonicalURL || `${siteURL}${Astro.url.pathname}`;
const imageURL = `${siteURL}${ogImage}`;
---

---

Components

Most of the website’s content can be edited directly in the frontmatter of the component that contains it.

Example — Updating review links:

---
// Components
import Container from '../../elements/Container.astro';
import Subtitle from '../../elements/Subtitle.astro';
import Link from '../../elements/Link.astro';

// Change review links here
const links = [
  {
    title: "Google",
    href: "https://google.com"
  },
  {
    title: "Yelp!",
    href: "https://yelp.com"
  },
  {
    title: "Trip Advisor",
    href: "https://tripadvisor.com"
  },
]
---

Example — Updating the address:

---
// Components
import Container from "../../elements/Container.astro";
import Subtitle from "../../elements/Subtitle.astro";
import Text from "../../elements/Text.astro";

// Change address here
const address = {
  street: '120 Bloomingdale Rd, White Plains',
  city: 'New York, 10605'
}
---
<Container>
  <Subtitle>Address</Subtitle>
  <address class="text-gray-800 not-italic">
    <Text>{address.street}</Text>
    <Text>{address.city}</Text>
  </address>
</Container>

For simpler components containing only a few lines of text, content can be edited directly in the HTML template.

Example — Editing inline content:

---
// Components
import Container from "../../elements/Container.astro";
import Text from "../../elements/Text.astro";
import Subtitle from "../../elements/Subtitle.astro";
---
<Container>
  <Subtitle>Welcome to Calzone</Subtitle>
  <Text variant={'lg'} class="text-gray-800">
    We bring the heart of Italy to your table with exquisite dishes crafted from the finest ingredients.
  </Text>
  <Text variant={'sm'} class="text-gray-800">
    If you're looking to celebrate a special occasion or indulge in a casual dinner, our warm ambiance and dedicated service ensure an unforgettable dining experience.
  </Text>
</Container>

---

Content Collections

For content focused pages, you can manage everything from the content folder which will house markdown and JSON/YAML files for each content collection, divided by subfolders.

Markdown files are used for:

• Blog functionality
• Heavy content pages such as legal pages (Privacy policy, Terms of Use, etc)
• Content collections where each entry requires its own page (Projects, documentation, product showcases, etc)

JSON/YAML files are used for:

• Collections of content that is organized in a list format where each entry does not need its own page (restaurant menu, services, testimonials, etc)

Configuration

You can add and edit content collections in the src/content.config.ts file.

For collections like a blog, you will want to edit the category names here.

import { defineCollection } from "astro:content";
import { glob, file } from "astro/loaders";
import { z } from "astro/zod";

const blog = defineCollection({
    loader: glob({pattern: "src/content/blog/**/*.md"}),
    schema: ({image}) => z.object({
        slug: z.string().max(50),
        title: z.string().max(50),
        tagline: z.string().max(50),
        description: z.string().max(340),
        pubDate: z.string(),
        image: image(),
        category: z.enum(['Events', 'News', 'Opinions']), // change and add blog categories here
        isDraft: z.boolean()
    })
})

const menu = defineCollection({
    loader: file("src/content/menu/menu.yaml"),
    schema: ({image}) => z.object({
        category: z.enum(['Antipasti', 'Pizza', 'Pasta', 'Sides', 'Desserts', 'Drinks']),  // change and add menu categories here
        id: z.number(),
        name: z.string().max(50),
        price: z.string().max(10),
        ingredients: z.string().max(80),
        image: image()
    })
})

export const collections = { blog, menu };

---