Documentation for Aver Astro

#Introduction

Aver is a modern and elegant Astro theme designed for portfolios and blogs. It features a sleek header, smooth scrolling, and a clean minimal design with dark-light mixed mode.

#File Structure

The theme files are structured as follows:

 ./theme-files
│
├── public
│  │
│  ├── fonts
│  │
│  ├── images
│  │
│  └── plugins
│  
├── src
│  │
│  ├── components
│  │
│  ├── config
│  │
│  ├── content
│  │
│  ├── layouts
│  │
│  ├── lib
│  │
│  ├── pages
│  │
│  ├── styles-plugin
│  │
│  └── styles
│  
├── .gitignore
│
├── astro.config.mjs
│
├── package.json
│
└── tsconfig.json

#Installation

Checkout Official AstroJS Documentation if you need.

#System Requirements

• Node.js - v18.17.1 or v20.3.0, v22.0.0 or higher. ( v19 and v21 are not supported.)
• Text editor - We recommend VS Code with our Official Astro extension.
• Terminal - Astro is accessed through its command-line interface (CLI).

#Install dependencies

Nevigate to theme-files/ then open terminal and install dependencies by running

npm install

#Preview Theme

Run npm run dev on your terminal and open http://localhost:4321 at your browser to see the local development preview

npm run dev

#Configaration

Open theme-files/src/config/site.config.json Change Default settings with yours

{
  "metaData": {
    "title" : "Aver - Astrojs Portfolio and Blog Theme",
    "description" : "Astrojs Portfolio and Blog Theme",
    "ogImage" : "/images/ogimage.jpg",
    "keywords" : "Astrojs, Portfolio, Astrojs Portfolio"
  },

  "logo" : "/images/logo.svg",
  "logoText" : "Aver",
  "favicon" : "/images/favicon.png",
  "baseUrl" : "https://aver-astro.vercel.app/",
  "basePath" : "/",
  "trailingSlash" : false,

  "settings" : {
    "deviceIndicator" : false,
    "pagination_limit" : 6
  },

  "socialLinks" : [
    {
      "name": "FB",
      "fullName": "Facebook",
      "link": "https://facebook.com/"
    },
    ...
  ]
}

#Menu (Header and Footer)

Open theme-files/src/config/menus.json
Customize(add or remove) menu Links by changing the name and link value

{
  "mainMenu": [
    {
      "name": "Home",
      "link": "/"
    },
    {
      "name": "About",
      "link": "/about"
    },
    ...
  ],
  "footerMenu": [
    {
      "name": "Imprint",
      "link": "!#"
    },
    {
      "name": "Privacy policy",
      "link": "/privacy"
    }
  ]
}

#Content Update

All the contents are located in theme-files/src/content/ folder
You will find different folders for different content types like blog, project, about, etc.
Open the respective folder and edit the .mdx files to update the content.

#Content Editing Guide

• Each article lives in a .mdx file with YAML front matter at the top (--- block).
• Update fields like title, date, description, image, category, and tags to control how the post appears.
• Write or edit your article content below the front matter using standard Markdown syntax.
• Keep indentation and quotes consistent to avoid YAML errors.
• After saving changes, rebuild or refresh the site to see your updates live.

#🔴 Video preview

#Contact info

Update the Contact Page content by editing theme-files/src/content/pages/contact.mdx file content.
Contact form works with https://formsubmit.co/

In contactForm params, you will find contact_email

• contact_email: "platoltheme@gmail.com"
  update email with your email-address to recive the message directly to your email.

#Changing Font

We are using one Self Hosted Font and one Google Font
Update the fonts form theme-files/src/layouts/Layout.astro file Line no 45 and 49