Whitespace Theme Guide

If you are looking for general Bufferthemes Guides, you can find instructions for shared functionality here:

For more specific documentation about this theme, see below.

Customize pages

To customize the pages for the Whitespace theme, you will need to modify the .astro files located in the /src/pages directory.

/src/pages/index.astro - The main landing page, you can find the alternative landing pages as home-2.astro and home-3.astro in the same directory.
/src/pages/projects/[id].astro - The project detail page.
/src/pages/projects/index.astro - The projects overview page.

To customize the navigation for the Whitespace theme, you will need to modify the navigationItems array located in the /src/config/navigation.ts file.

The navigationItems array defines the main navigation links for your site. Each item in the array is an object with a title and a url. Here’s an example of how to add a new navigation item:

export const navigationItems = [
    {
        title: "Home 2",
        url: "/home-2",
    },
    {
        title: "Home 3",
        url: "/home-3",
    },
];

To customize the social items for the Whitespace theme, you will need to modify the socialItems array located in the /src/config/social.ts file.

The socialItems array defines the main social media links for your site. Each item in the array is an object with a title, url, and icon. The icons are based on the Astro Icon package. You can find instructions for using Astro Icons in the Astro Icon documentation.

If you want to add different icon packs, you can find the instructions for that in the Astro Icon customization guide. Here’s an example of how to add a new social item:

export const socialItems = [
    {
        title: "Github",
        url: "#",
        icon: "mdi:github",
    },
    {
        title: "Dribbble",
        url: "#",
        icon: "mdi:dribbble",
    },
    {
        title: "Instagram",
        url: "#",
        icon: "mdi:instagram",
    },
    {
        title: "Linkedin",
        url: "#",
        icon: "mdi:linkedin",
    },
];

Manage Projects

This guide explains how to add a new project to the content collection in your Astro project. Projects are stored as markdown files in /data/projects, with assets such as images and logos located in /data/projects/assets.

Add new project

Each project is represented as a markdown (.md) file inside the /data/projects directory. To add a new project:

Navigate to /data/projects/.
Create a new markdown file with a descriptive name, e.g., myproject.md.

Define Project Properties

Inside the markdown file, define the project properties using frontmatter (YAML at the top of the file). Example:

---
title: "MyProject"
description: "A brief description of MyProject."
image: "./assets/myproject.png"
logo: "./assets/myproject_logo.svg"
priority: 10
tags: ["webdesign", "development"]
---

title: The project name (string, required).
description: A short description (string, required).
image: Path to the main project image (required, located in assets/).
logo: Path to the project logo (optional, located in assets/).
priority: A number used for ordering projects (integer, required).
tags: An array of category tags (required).

Add Logo and Images

Make sure the referenced assets (images, logos) exist inside /data/projects/assets/.

Place myproject.png in /data/projects/assets/.
If you want to use a logo, place myproject_logo.svg in /data/projects/assets/.

Extend Projects Content Collection

If you want to add additional attributes to your projects you can do so by adapting the projects definition inside of content.config.ts.

const projects = defineCollection({
  loader: glob({ pattern: ["*.md"], base: "./src/data/projects" }),
  schema: ({ image }) =>
    z.object({
      title: z.string(),
      description: z.string(),
      image: image(),
      priority: z.number(),
      tags: z.array(z.string()),
      logo: image().optional(),
    }),
});

If you need to add new fields, update this schema accordingly. For more information visit the Astro docs for defining content collections.