PGConf.dev 2027 Static Site

This is the source code of the PGConf.dev 2027 static site. The entire site is rendered with Svelte, SvelteKit, and adapter-static.

Table of Contents

• Prerequisites
• Setup
• Developing
• Building
• Publishing
• Svelte Overview
  • Adding a Page
  • Static Assets
• Content

Prerequisites

• NodeJS ≥ 20
• npm

macOS

Install with Homebrew:

brew install node

Debian/Ubuntu

Install via apt:

sudo apt install nodejs npm

Setup

Clone the repository and navigate into it:

git clone git@github.com:slonikevents/2027-pgconfdev-site.git
cd 2027-pgconfdev-site

Install dependencies:

npm install

On success, the output should resemble:

added 238 packages, and audited 239 packages in 2s

found 0 vulnerabilities

Developing

To start a development server:

npm run dev

Or to start the server and open the site in a new browser tab:

npm run dev -- --open

The development server supports hot module replacement (HMR). When files change, it uses a WebSocket connection to push updates or trigger a full browser reload, so no manual refresh is required, assuming the filesystem supports native watch events.

Before pushing a change or submitting a PR, run:

npm run check
npm run format
npm run lint

This ensures your code is properly formatted and free of common issues.

Building

The site served by the development server closely matches the production build, so building isn't typically required during development.

Regardless, to generate a production build:

npm run build

You can preview this with npm run preview.

Publishing

Simply push, or submit a pull request, to the main branch to publish the site. The "Deploy to GitHub Pages" workflow in GitHub Actions listens for changes on this branch.

Svelte Overview

Each .svelte file is a Svelte component made up of HTML, CSS, and TypeScript. CSS is scoped to the component by default.

SvelteKit uses the file structure in /site as the source of the site's pages.

• Each +page.svelte file in /site defines a page on the site.
• The site-wide layout is defined in /site/+layout.svelte.
• Files without a + prefix are helper components or static assets used within pages and layouts. Helper components should begin with a capital letter.
• You shouldn't need to modify files outside /site, except to add sponsor logos. Each sponsor's logo should be its own component in /common/logo.

For details on how SvelteKit uses different file types to construct the site, see SvelteKit routing.

Adding a Page

To add a new page, create a directory in /site matching the URL path where the page should appear, and add a +page.svelte file inside it with the page's content.

For example, to create a page at /info, add the file /root/info/+page.svelte with content such as:

<script>
  import view from './view.png';
</script>

<style>
  img {
    border-radius: var(--border-radius);
    margin: 1rem;
    max-width: 100%;
  }
</style>

<h1>Info</h1>

<p>This is some information that should be on this page.</p>

<img src={view} alt="View of this info" />

Static Assets

Static assets such as images or PDFs must be imported and referenced using interpolation. For example, to include a PDF:

<script>
  import schedule from './schedule.pdf';
</script>

<a href={schedule} download>Schedule</a>

Content

Keep it simple; this site is designed to be editable by non-technical people. When in doubt, write normal HTML and CSS.

Note: The only exception is that static assets (like images), must be imported and interpolated into the markup. See Static Assets below.

Text should be written in Standard Canadian English. In Vim, this is set spell spelllang=en_ca.

Ensure your content is accessible and responsive across both small and large screens. Target breakpoints are 480px, 768px, and 1200px.

Use semantic HTML. Eschew <div>, <span>, etc. when a more appropriate element exists.