Documentation for Twnty Astro

#Introduction

Twnty is a sleek Astro theme designed for professionals to showcase their resume, CV, portfolio, and blog. Fully responsive, SEO-friendly, and easy to customize, Twnty helps you create a standout online presence and share your work with the world.

#File Structure

The theme files are structured as follows:

 ./theme-files
│
├── public
│  
├── src
│  │
│  ├── assets
│  │  │
│  │  └── images
│  │
│  ├── components
│  │
│  ├── config
│  │
│  ├── content
│  │
│  ├── layouts
│  │
│  ├── pages
│  │
│  ├── styles
│  │
│  └── utils
│  
├── .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

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

  "site": {
    "logo_title" : "Twnty Watts",
    "logo_subtitle" : "Designer x Writer",
    "blog_paginate" : 5,
    "project_paginate" : 4
  },

  "metadata": {
    "title" : "Personal Blog x Portfolio",
    "description" : "Twnty is a personal blog and portfolio theme for AstroJS based on TailwindCSS.",
    "author" : "Platoltheme",
    "keywords" : "twnty, minimal, react, astrojs, blog, portfolio, template, theme",
    "image" : "https://yourwebsite.com/assets/ogimage.jpg"
  }
}

#Menu (Header and Footer)

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

[{
  "name": "Writing",
  "link": "/blog",
  "target": "",
  "rel": ""
},
{
  "name": "Project",
  "link": "/project",
  "target": "",
  "rel": ""
},
{
  "name": "Contact",
  "link": "/#contact",
  "target": "",
  "rel": ""
}]

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

#Contact info

Update the Contact Page content by editing theme-files/src/content/_index/_index.mdx line no 212 file content.
Contact form works with https://formsubmit.co/

In contact params, you will find email_to

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

#Changing Font

We are using Astro's fonts API to load Google Font
Update the fonts form theme-files/astro.config.mjs file Line no 35 and 40

Check Astro Font API Doc and Google Fonts to choose your desired font.