Documentation for Qurno 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
│  │
│  ├── admin
│  │
│  └── scripts
│  
├── src
│  │
│  ├── assets
│  │
│  ├── components
│  │
│  ├── config
│  │
│  ├── content
│  │
│  ├── layouts
│  │
│  ├── pages
│  │
│  ├── styles
│  │
│  └── utils
│
├── tina
│  │
│  ├── collections
│  │
│  ├── fields
│  │
│  ├── options
│  │
│  └── config.ts
│  
├── .gitignore
│
├── .ncurc
│
├── astro.config.mjs
│  
├── package.json
│
└── tsconfig.json

Tailwind v4 is config-free — there's no tailwind.config.js or postcss.config.cjs. Theme tokens (colors, fonts) live directly in src/styles/styles.css via the @theme block.

#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

{
  "baseURL" : "https://qurno-astro.vercel.app",
  "favicon" : "/favicon.png",
  "basePath": "/",
  "trailingSlash": false,

  "logo": {
    "src" : "/assets/logo.svg",
    "src_light" : "/assets/logo-white.svg",
    "alt" : "Qurno",
    "width" : 115,
    "height" : 35
  },

  "metadata": {
    "title" : "Qurno - Minimal AstroJS Blog Theme",
    "description" : "A minimal AstroJS & TailwindCSS Blog Theme",
    "author" : "Platol",
    "keywords" : "qurno, minimal, react, astrojs, blog, template, theme",
    "image" : "https://qurno-astro.vercel.app/assets/ogimage.jpg"
  },

  "settings": {
    "homepage_post_count" : 6,
    "pagination" : 6,
    "copyright" : "© 2025 Qurno. All rights reserved."
  }
}

#Menu (Header and Footer)

Open theme-files/src/config/menus.json
Customize(add or remove) menu(header & footer) Links by changing the name and link value
You can also add submenu by adding submenu param

{
  "mainMenu": [
    {
      "name": "Home",
      "link": "#",
      "submenu": [
        {
          "name": "Home 01",
          "link": "/",
          "target": "",
          "rel": ""
        },
        ...
      ]
    },
    {
      "name": "About",
      "link": "/about",
      "target": "",
      "rel": ""
    },
    ...
    {
      "name": "Pages",
      "link": "#",
      "submenu": [
        {
          "name": "Archive",
          "link": "/blog/archive",
          "target": "",
          "rel": ""
        },
        ...
      ]
    },
    {
      "name": "Contact",
      "link": "/contact",
      "target": "",
      "rel": ""
    }
  ],
  "footerMenu": [
    {
      "name": "Privacy Policy",
      "link": "/privacy",
      "target": "",
      "rel": ""
    },
    ...
  ]
}

#📚 CMS

Qurno has full support of TinaCMS. Check out TinaCMS Documentation if you need.
check tina configuration in theme-files/src/config/tina.config.ts
update clientId and token value with your TinaCMS credentials - https://app.tina.io/projects.
also update search indexerToken value with your

To use TinaCMS on local run npm run dev and
open http://localhost:4321/admin/index.html at your browser.

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

#Post Shortcodes

Blog posts can use a few ready-made components for richer content — callouts, optimized images, YouTube/Vimeo embeds, and link preview cards. They live in theme-files/src/components/shortcodes/ and theme-files/src/components/helpers/AstroImage.astro.

Unlike plain Markdown, these are not globally available — import each one at the top of the .mdx file before using it:

import AstroImage from "@components/helpers/AstroImage.astro";
import Callout from "@components/shortcodes/Callout.astro";
import LinkPreview from "@components/shortcodes/LinkPreview.astro";
import YouTube from "@components/shortcodes/YouTube.astro";
import Vimeo from "@components/shortcodes/Vimeo.astro";

Then use them anywhere below the front matter:

<Callout theme="info" title="Note">
  **Bold text works here.** `theme` accepts `info`, `warning`, `success`, `error`, or `default`.
</Callout>

<AstroImage
  src="/assets/blog/elements.jpg"
  alt="description"
  width={970}
  height={500}
  caption="Photo credit"
/>

<YouTube id="dsTXcSeAZq8" />

<Vimeo id="341490793" />

<LinkPreview id="https://astro.build/" />

theme-files/src/content/blog/elements.mdx has a full working example of every shortcode, including the responsive table and image gallery markup.

#🔴 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.

Change TailwindCSS config (if you need) from theme-files/src/styles/styles.css — Tailwind v4 is CSS-first, so colors and other design tokens are set in the @theme block there instead of a tailwind.config.js file:

@theme {
  --color-primary: #f26855;
  --color-primary-dark: #29bc88;
  --color-dark: #152035;
  --color-dark-dark: #232936;
  --color-gray: #505050;
  --color-gray-dark: #c8c9cb;
  --color-light: #fafafa;
  --color-body: #fff6ef;
  --color-body-dark: #131926;
}

#Changing Font

Qurno uses Astro's built-in Fonts API — no third-party font library needed.

Open theme-files/astro.config.mjs and edit the fonts array:

fonts: [
  {
    provider: fontProviders.google(),
    name: "Crete Round",
    cssVariable: "--font-primary",
    fallbacks: ["serif"],
  },
  {
    provider: fontProviders.google(),
    name: "Work Sans",
    cssVariable: "--font-secondary",
    weights: ["400 700"],
    fallbacks: ["sans-serif"],
  },
],

Swap name for any Google Font name. Keep the cssVariable values (--font-primary / --font-secondary) as they are — they're wired into theme-files/src/styles/styles.css and used across the theme's typography.

The fonts are rendered in theme-files/src/layouts/Layout.astro via:

<Font cssVariable="--font-primary" preload />
<Font cssVariable="--font-secondary" preload />