CLS Foundation Website Content Management Guide

Overview

  • Website built with Quarto
  • Content written in plain text files with markdown formatting
  • Automatically displays listings of programs, events, stories, and team members
  • No coding skills required to add or update content

Repository Structure

cls-website/
├── programs/     # Add program files here
├── events/       # Add event files here
├── stories/      # Add story files here
└── members/      # Add team member files here

As a content editor, you’ll primarily work with files in these four directories.

Setup: What You Need

  1. Required Software:
  2. Initial Setup:
    • Clone/download website repository
    • Open project in RStudio: cls-website.Rproj
    • Install dependencies: renv::restore()

Markdown Basics

  • Simple text-based formatting:
    • Bold text with **bold**
    • Italic text with *italic*
    • Links with [text](url)
    • Lists using - or 1.
    • Headings with # symbols

How Listings Work

The website automatically:

  1. Creates cards on listing pages (programs, events, stories)
  2. Generates dedicated pages for each item
  3. Includes items on the homepage

Just add content files with the right metadata in the correct folders!

Note

Each content file have specific set of metadata fields.

From Files to Web Pages

Stories Directory:

stories/
├── story_1.qmd
│   ├── title: "How CompanyX Increased Efficiency"
│   ├── description: "CompanyX streamlined operations..."
│   ├── client: "CompanyX"
│   ├── thumbnail: "https://picsum.photos/300/200?random=1"
│   ├── date: "2024-03-20"
│   ├── categories: ["Digital Transformation"]
│   └── industry: "Manufacturing"
│
├── story_2.qmd
│   ├── title: "Research Lab Collaboration"
│   ├── description: "How we helped researchers..."
│   ├── client: "University Research Lab"
│   ├── thumbnail: "https://picsum.photos/300/200?random=2"
│   ├── date: "2024-02-15"
│   ├── categories: ["Research", "Collaboration"]
│   └── industry: "Academic"
│
└── story_3.qmd
    ├── title: "Healthcare Data Integration"
    ├── description: "Improving patient outcomes..."
    ├── client: "Regional Hospital"
    ├── thumbnail: "https://picsum.photos/300/200?random=3"
    ├── date: "2024-01-10"
    ├── categories: ["Healthcare", "Data Integration"]
    └── industry: "Healthcare"

Resulting Stories Page:

Adding Programs

Create file in programs/your-program-name.qmd with:

---
title: "Program Title"
description: "Brief description of the program"
image: "URL to program image"
categories: "Program Category"
priority: 4  # Lower numbers appear first
url: "URL to more information"
---

Adding Events

Create file in events/your-event-name.qmd with:

---
title: "Event Title"
description: "Brief event description"
date: "YYYY-MM-DD"
end_date: "YYYY-MM-DD"  # Optional
image: "URL to event image"
location: "Event Location"
url: "URL for more info"  # Optional
categories: ["Category1", "Category2"]
---

Adding Success Stories

Create file in stories/story-name.qmd with:

---
draft: false  # Set to true if the story is not ready to be published
title: "Story Title"
description: "Brief description of the story"
date: "YYYY-MM-DD"
client: "Client Name"
image: "URL to story image"  # Optional
categories: ["Category1", "Category2"]
industry: "Industry Type"
---

Adding Team Members

Create file in members/person-name.qmd with:

---
title: "Person Name"
draft: false  # Set to true if the member should not be displayed yet
position: "Job Title"
email: "email@example.com"
image: "URL to profile image"  # Optional
order: 3  # Lower numbers appear first
description: "Brief bio that appears in the member card"
---

Default Placeholders

If no image is provided in the frontmatter, default placeholders will be used:

Programs

Events

Stories

News

Previewing Your Changes

To see changes before publishing:

  1. Open terminal in project folder
  2. Run: quarto preview
  3. Browser will open showing the site
  4. Changes automatically refresh

Publishing Changes

When you’re satisfied with your changes:

  1. Commit and push changes to the main branch
  2. Website automatically builds and deploys to https://clsfoundation.org/

Common Operations

  • Update content: Edit the corresponding .qmd file
  • Remove content: Delete the corresponding .qmd file
  • Change order: Adjust priority or order values
  • Update styling: Contact the web developer

Questions?