Blog System
Relevant source files
The following files were used as context for generating this wiki page:
The Blog System for the Vandore Heritage website is a statically generated feature designed to display news and articles. It is managed through the Stackbit CMS, with content stored in JSON files. The system is comprised of a main blog listing page (blog.html) which displays summaries of multiple posts, and a single post page (single_blog.html) for viewing individual articles in detail.
The blog is integrated as a primary section of the website, accessible from the main navigation menu under the "News" category. The content structure for the blog post listings is explicitly defined within the Stackbit configuration, ensuring consistency across the site.
Architecture and Data Flow
The blog's architecture is based on a static site generation model where content and presentation are separated. Content is defined in JSON files and the structure of this content is defined by models in the Stackbit configuration.
Data Model
The data model for the blog is defined within the Page model in the Stackbit configuration. Specifically, the blog listing page utilizes a blogPosts field, which is a list of objects, each representing a blog post summary. There is no distinct model for a single blog post; it is handled as a generic Page.
Sources: stackbit.config.ts:10-101
Blog Post List Item Schema
The following Mermaid diagram illustrates the entity relationship for a blog post item as defined for the listing page.
This diagram shows that a Page (like the main blog page) can contain multiple blogPosts items.
Sources: stackbit.config.ts:88-101
The fields for each blog post item are detailed in the table below:
| Field | Type | Required | Description |
|---|---|---|---|
title | string | Yes | The title of the blog post. |
excerpt | text | No | A short summary or excerpt of the post. |
date | string | No | The publication date of the post. |
url | string | No | The URL to the full single post page. |
Sources: stackbit.config.ts:92-99
Content to Render Flow
The process of rendering the blog pages involves the static site generator parsing the JSON content files based on the models and injecting the data into the corresponding HTML templates.
The following diagram illustrates the data flow for the blog listing page.
This flow shows that the blog.json file, which adheres to the Page model structure, is used by the generator to populate the blog.html template, resulting in the final static page served to the user.
Sources: stackbit.config.ts:10-20
Frontend Components
The blog system is composed of two primary user-facing pages.
Blog Listing Page (blog.html)
This page serves as the main entry point for the "News" section. It is responsible for displaying a collection of blog post summaries or "cards". Each card contains the post's title, excerpt, and date, and links to the full article. The content for this page is sourced from a corresponding JSON file (e.g., content/pages/blog.json) which contains the blogPosts array.
Single Post Page (single_blog.html)
This page displays the full content of a single blog article. A direct link to single_blog.html exists in the 404.html page, suggesting it may function as a static template or a specific example post rather than being dynamically generated for every unique post slug. The content for this page would be sourced from a corresponding JSON file (e.g., content/pages/single_blog.json) and rendered within the Page model structure.
Sources: 404.html:81-84
Site Integration and Navigation
The blog is a key feature of the website, and is accessible from the main off-canvas navigation menu present on major pages like about.html, contact.html, and properties.html.
User Navigation Flow
The diagram below shows how a user navigates to the blog section from another page on the site.
This flow is consistent across the main pages of the website.
Sources: about.html:110-116, contact.html:111-117, properties.html:111-117
The navigation link is explicitly defined in the HTML of these pages:
<div class="navigation">
<span class="header-text" data-i18n="07_news">07. Jaunumi</span>
<img src="image/img26.png" class="img-fluid rounded-3 " style="aspect-ratio: 9/5;" height="175" width="311" alt="Vandore Heritage">
<a href="blog.html" class="d-flex" style="justify-self: end;">
<i class="rtmicon rtmicon-arrow-right fs-1 fw-bold"></i>
</a>
</div>
Sources: about.html:111-116