HalfStack Website: Next

The next version of halfstackconf.com. ✨

Development

After forking the repo from GitHub and installing pnpm:

git clone https://github.com/<your-name-here>/halfstackconf-next
cd halfstackconf-next
pnpm install

This repository includes a list of suggested VS Code extensions. It's a good idea to use VS Code and accept its suggestion to install them, as they'll help with development.

You'll now be able to run a local Next.js dev server with:

pnpm dev

Building a Static Site

To create a full static site build and serve it locally:

pnpm build
pnpm start

Other Commands

Formatting

Prettier is used to format code. It should be applied automatically when you save files in VS Code or make a Git commit.

Alternately, you can manually format everything with:

pnpm format:write

Linting

This package includes several forms of linting to enforce consistent code quality and styling. Each should be shown in VS Code, and can be run manually on the command-line:

• pnpm lint (ESLint with typescript-eslint): Lints JavaScript and TypeScript source files
• pnpm lint:md (Markdownlint): Checks Markdown source files
• pnpm lint:package (npm-package-json-lint): Lints the package.json file
• pnpm lint:packages (pnpm-deduplicate): Deduplicates packages in the pnpm-lock.yml file
• pnpm lint:prune (ts-prune): Detects unused exports in TypeScript source files
• pnpm lint:spelling (cspell): Spell checks across all source files

Type Checking

Run TypeScript locally to type check and build source files from src/ into output files in lib/:

pnpm tsc --watch

You should also see suggestions from TypeScript in your editor.

Updating the Lockfile

Sometimes the pnpm-lock.yaml file can get out of sync if different versions of pnpm are used over time. When that happens, to refresh it:

1. Uninstall pnpm
2. Install the latest version of pnpm
3. rm -rf pnpm-lock.yaml node_modules
4. (Optional, for if you want the latest version of everything) npx npm-check-updates -u
5. pnpm install

Deployment (Testbed)

This runs on a cron and picks up changes every 5 minutes. Saving the commands here for reference.

# Stop pm2
pm2 stop "pnpm testbed"

echo "Updating main"
git fetch
git reset --hard origin/main
pnpm install

# Start pm2
pm2 start "pnpm testbed"

Deployment (Production)

This has to be manually run as the website user. Navigate to the production directory, then:

# Stop pm2
pm2 stop "pnpm production"

echo "Updating main"
git fetch
git reset --hard origin/main
pnpm install

# Start pm2
pm2 start "pnpm production"

Events Management

Events are all stored in src/data as .json files.

• src/data/events/index.ts contains the array of event lines that are listed on the homepage
• The `src/data/events/ directory contains a directory for each of those event lines, each of which contains:
  • current.json: Data for the current event shown on and linked to by the homepage
  • default.json: Default data for the current event and all historical events in that line
  • 20**.json: Files for each past year in that event line

Event pages read in that data by utilities in src/data/index.ts. See src/data/types.ts for the precise data formats expected.

Adding a New Event Date

Adding a new year for an event generally involves changing the event's current year to a historical event, and adding a new current event:

1. Copy the event's current.json to a file with current year (e.g. 2023.json)
2. Create a new blank current.json copying over any data that's the same year-to-year (most likely: "description" and "geolocation")
3. Copy over any fields from the past event data to the current event data as they become known

Adding Event Sessions

Speaker speaker are stored in order in the event's sessions data. Each "by" field should be given a kebab-case.jpg image in public/speakers.

Adding Event Sponsors

Event sponsors are stored under the "sponsors" data, within their tier: "complete", "large", "medium", or "small". Each should have a "src" with a path starting with /logos/ that points to an image under public/images/.

If the event's sponsorship is available, it should have a "sponsorship" object with the property "available": true in its event data.

Adding a New Event Line

1. Copy and paste an exting event folder into the new slug for the event
2. Delete any historical data from the folder
3. Modify the event's default.json and current.json for the new event's details
4. Add the event's slug to src/data/events/index.ts
5. Add branding images and styles for the new event line:
   1. In src/components/EventTheme/index.module.css, add a new class selector for the event slug
   2. Create a new folder for the event's images under public/events/
   3. For each of the images referenced in those styles, add it under that new folder

Contributing

See .github/CONTRIBUTING.md. Thanks! 💖