King's Past Project

The King's Past project explores the most important moments that shaped King's College London and discovers the individuals, organisations, and themes that influenced its journey. Through a comprehensive digital archive, it connects historical records, people, places, and events.

Technical Overview

The project is built with modern web technologies focused on performance, accessibility, and maintainability:

Core Technologies

• SvelteKit - Web application framework
• Schema.org - Data model for content structure
• Supabase - PostgreSQL database

UI and Styling

• Open Props - CSS custom properties
• Lucide - Icon set
• Unpic - Image optimisation

Content and Data

• Mdsvex - Markdown support with Svelte components
• Svelte Headless Table - Data tables
• MapLibre GL - Map visualization
• Pagefind - Static search indexing

Deployment

• Static site generation for optimal performance and reduced environmental impact
• Easy deployment to any static hosting platform

Project Structure

The project structure is as follows:

├── .frontmatter/   # Frontmatter content types
├── frontmaid/      # Small utility to generate ER data models from frontmatter content types
├── scripts/        # Utility scripts
├── src/            # Main project source code
│ ├── lib/          # Utility functions and types
│ │ └── assets/     # Static assets such as stylesheets and images
│ ├── components/   # Svelte components
│ ├── supabase/     # Supabase client, functions and types
│ │ └── routes/     # SvelteKit routes
│ └── static/       # Static assets for the production build
└── supabase/       # Supabase project files

Development Setup

Prerequisites

• Node.js version 20 or higher
• Supabase CLI (optional, for local development)

Environment Variables

Create a .env file in the root directory with the following variables:

SUPABASE_URL=your_supabase_project_url
SUPABASE_KEY=your_supabase_anon_key

Installation

1. Install dependencies:

npm install

1. Set up git hooks:

npx simple-git-hooks

Development Server

1.Start the development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

1. Generate the search index:

npm run build:pagefind

Deployment

Building for Production

1. Create a production build:

npm run build

1. Generate the search index:

npm run build:pagefind

1. Or run both commands together:

npm run build:all

Preview Production Build

To preview the production build locally:

npm run preview

Data model

The data model was automatically generated from the frontmatter content types, unsing the frontmaid package in this repository.

erDiagram
  languages {
  }
  occupations {
  }
  placeTypes {
  }
  FeatureImageFields {
    feature__image image
    feature__title string
    feature__description string
  }
  GeoCoordinatesFields {
    geoCoordinates__latitude number
    geoCoordinates__longitude number
  }
  URLFields {
    name string
    url string
  }
  default {
    title string
    slug slug
    type string
    excerpt string
    feature__image image
    feature__title string
    feature__description string
    tags tags
  }
  donation ||--|| organisation: recipient
  donation ||--|| person: agent
  donation {
    title string
    slug slug
    price number
    priceCurrency string
    startTime string
    endTime string
  }
  event ||--o{ person: attendeePerson
  event ||--o{ organisation: attendeeOrganisation
  event ||--|| place: location
  event ||--|| URLFields: url
  event {
    title string
    slug slug
    startDate string
    endDate string
    tags tags
  }
  moment ||--o{ theme: themes
  moment {
    title string
    slug slug
    type string
    excerpt string
    feature__image image
    feature__title string
    feature__description string
    tags tags
  }
  organisation ||--|| place: location
  organisation ||--|| URLFields: url
  organisation ||--|| languages: knowsLanguage
  organisation ||--o{ person: funder
  organisation ||--o{ organisation: memberOf
  organisation ||--o{ moment: subjectOfMoment
  organisation ||--o{ theme: subjectOfTheme
  organisation {
    title string
    slug slug
    type string
    alternateName string
    foundingDate number
    dissolutionDate number
    feature__image image
    feature__title string
    feature__description string
    tags tags
  }
  person ||--|| URLFields: url
  person ||--|| languages: knowsLanguage
  person ||--|| occupations: hasOccupation
  person ||--o{ person: knows
  person ||--o{ organisation: memberOf
  person ||--o{ moment: subjectOfMoment
  person ||--o{ theme: subjectOfTheme
  person {
    title string
    slug slug
    type string
    alternateName string
    feature__image image
    feature__title string
    feature__description string
    tags tags
  }
  place ||--|| placeTypes: additionalType
  place ||--|| URLFields: url
  place {
    title string
    slug slug
    alternateName string
    type string
    geoCoordinates__latitude number
    geoCoordinates__longitude number
    feature__image image
    feature__title string
    feature__description string
    tags tags
  }
  theme {
    title string
    slug slug
    type string
    feature__image image
    feature__title string
    feature__description string
    tags tags
  }

Loading