Configuration Data

What Is This Folder?

src/data/configuration/ is the navigation and metadata layer of Astro Docus. It does not describe page content like home.json does. Instead, it defines the shared chrome that appears across every page:

• Navbar — the top navigation menu
• Footer — the multi-column footer at the bottom
• Blog meta — titles and descriptions for blog, categories, and tags pages
• Site meta — icon, image, and general site info

Where home.json powers one page, configuration/ powers all pages.

---

Where It Lives

src/data/
└── configuration/
    ├── blog/
    │   └── blogpage.json
    └── home/
        └── homepage.json

File	Powers
home/homepage.json	Navbar + footer for landing and docs
blog/blogpage.json	Navbar + metadata for blog pages

Both files share the same general shape: site metadata at the top, an array of navigation items in the middle, and footer groups at the bottom.

---

File 1 — home/homepage.json

This is the main navigation configuration for the entire site. It defines the navbar that appears at the top of every landing and documentation page, plus the four-column footer that appears at the bottom.

Top-level metadata

Key	Type	Purpose
title	string	Site title shown in navbar and browser tab
description	string	Default SEO description
icon	string	Small icon used in navbar and meta
image	string	Default social preview image

The navbar

"navbar": [
  { "nav": "Home", "link": "/" },
  { "nav": "Docs", "link": "/getstart/" },
  { "nav": "Blog", "link": "/blog/" },
  { "nav": "Pricing", "link": "/pricing/" }
]

Every item has exactly two keys:

• nav — the visible label
• link — where the item points

To add a new menu item, add one object. To remove one, delete it. To reorder, move it up or down in the array.

The footer

The footer is organized into four columns, each with a title and a list of links:

Column key	Title key	Items key
1	footer1	footer1_nav
2	footer2	footer2_nav
3	footer3	footer3_nav
4	footer4	footer4_nav

Example — the first column:

"footer1": "Product",
"footer1_nav": [
  { "nav": "Home", "link": "/" },
  { "nav": "Documentation", "link": "/getstart/" },
  { "nav": "Blog", "link": "/blog/" },
  { "nav": "Pricing", "link": "/pricing/" }
]

This pattern repeats for footer2 (Guides), footer3 (Resources), and footer4 (Contact). Each column is independent — you can add, remove, or rename columns by editing the corresponding keys.

Note: The footer does not loop over a dynamic list of columns. It expects exactly four columns named footer1 through footer4. If you need more, you must also update the footer widget.

---

File 2 — blog/blogpage.json

The blog has its own navigation configuration because the blog lives in a different context. It uses a slightly different navbar (with icons) and defines metadata for three separate pages: the blog index, categories index, and tags index.

Blog metadata keys

Key	Purpose
url	Canonical URL of the blog
title	Blog page title
description	Blog page meta description
categories_page_title	Title for /categories/
categories_page_description	Meta description for /categories/
tags_page_title	Title for /tags/
tags_page_description	Meta description for /tags/
icon	Blog icon
image	Blog social preview image

Blog navbar

"navbar": [
  { "nav": "Home", "icon": "/src/assets/homeblog.svg", "link": "/" },
  { "nav": "Doc", "icon": "/src/assets/homedoc.svg", "link": "/getstart/" },
  { "nav": "Blog", "icon": "/src/assets/bloggers.svg", "link": "/blog/" },
  { "nav": "Plan", "icon": "/src/assets/blogcontact.svg", "link": "/pricing/" }
]

The blog navbar has one extra key compared to the homepage navbar: icon. This allows each blog menu item to display a small icon next to its label, which fits the blog’s more visual style.

Key	Purpose
nav	Visible label
icon	Icon shown next to the label
link	Where the item points

---

Why Two Files Instead of One?

You might wonder why the site needs both homepage.json and blogpage.json when they both contain a navbar and metadata. The reason is context.

• The landing/docs context is minimal and text-driven. It uses a plain navbar and a four-column footer.
• The blog context is visual and content-heavy. It uses an icon-based navbar and does not have the same footer structure.

By separating them, each context can evolve independently. You can redesign the blog navbar without touching the docs navbar.

This is the same “separation of concerns” pattern used in Plan & Pricing Data — different files for different purposes.

---

How These Files Are Consumed

Navbar widget

A typical Nav.astro widget imports homepage.json (or blogpage.json, depending on context) and loops through the navbar array:

---
import Data from '../../data/configuration/home/homepage.json';
---
<nav>
  {Data.navbar.map(({ nav, link }) => (
    <a href={link}>{nav}</a>
  ))}
</nav>

Each object in navbar becomes one link.

Footer widget

A typical Footer.astro widget reads the four footer columns:

---
import Data from '../../data/configuration/home/homepage.json';
---
<footer>
  <div class="col">
    <h4>{Data.footer1}</h4>
    {Data.footer1_nav.map(({ nav, link }) => <a href={link}>{nav}</a>)}
  </div>
  <div class="col">
    <h4>{Data.footer2}</h4>
    {Data.footer2_nav.map(({ nav, link }) => <a href={link}>{nav}</a>)}
  </div>
  <div class="col">
    <h4>{Data.footer3}</h4>
    {Data.footer3_nav.map(({ nav, link }) => <a href={link}>{nav}</a>)}
  </div>
  <div class="col">
    <h4>{Data.footer4}</h4>
    {Data.footer4_nav.map(({ nav, link }) => <a href={link}>{nav}</a>)}
  </div>
</footer>

Because the footer columns are hardcoded in the widget (footer1–footer4), the JSON must use those exact keys.

---

Editing Workflow

Scenario 1 — Add a new navbar item

1. Open src/data/configuration/home/homepage.json.
2. Find the "navbar" array.
3. Add a new object:

{ "nav": "About", "link": "/about/" }

4. Save. The new menu item appears on every page that uses this navbar.

Scenario 2 — Rename a footer column

1. Find "footer2": "Guides".
2. Change the value to "footer2": "Tutorials".
3. Save. The column title updates automatically.

Scenario 3 — Reorder footer links

1. Find footer1_nav.
2. Cut and paste objects within the array.
3. Save.

Scenario 4 — Change blog meta description

1. Open src/data/configuration/blog/blogpage.json.
2. Find "description".
3. Replace the value.
4. Save. The blog page’s meta description updates.

Scenario 5 — Add an icon to a homepage navbar item

The homepage navbar does not use icons by default, but you can add one:

{ "nav": "Docs", "icon": "/src/assets/homedoc.svg", "link": "/getstart/" }

Then update the navbar widget to render icon if present. (By default, the homepage navbar widget does not read the icon key.)

---

Rules for Editing These Files

1. Keep valid JSON. No trailing commas, no comments, double quotes only.
2. Footer keys are fixed. You cannot add footer5 without updating the widget.
3. Navbar items must have nav and link. Blog navbar items also need icon.
4. Links can be internal or external. Internal links start with /. External links start with https://.
5. Do not rename footer1_nav to footer1_links. The widget expects the exact key name.

---

Difference From Other Data Files

Data file	Scope	Used by
home.json	One page (landing)	Landing widgets
plan/data.json	One page (plan)	plan.mdx
pricing/pricing.json	Price list	Pricing widget
configuration/home/homepage.json	All pages (navbar + footer)	Nav + Footer widgets
configuration/blog/blogpage.json	All blog pages	Blog nav + meta

Configuration data is the only data shared across every page, which is why it lives in its own folder.

---

Quick Recap

src/data/configuration/
├── home/homepage.json   → navbar + footer for landing/docs
└── blog/blogpage.json   → navbar + meta for blog/categories/tags

homepage.json
├── title, description, icon, image
├── navbar[]              (nav, link)
├── footer1 + footer1_nav
├── footer2 + footer2_nav
├── footer3 + footer3_nav
└── footer4 + footer4_nav

blogpage.json
├── url, title, description
├── categories_page_title, categories_page_description
├── tags_page_title, tags_page_description
├── icon, image
└── navbar[]              (nav, icon, link)

• Configuration drives navigation, not content.
• Navbar and footer are stored as arrays of { nav, link } objects.
• Blog navbar has icons; homepage navbar does not.
• Footer is fixed at four columns — key names matter.
• Edit one file to update navbar/footer across every page.

👉 Next: docs/data/index-page.md — how JSON powers the documentation landing pages.