GameMaker Releases Summary UI

🔥 IN ACTIVE DEVELOPMENT 🔥 Expect breaking changes.

Contents

• Data loading functionality for fetching summaries GameMaker releases
• SvelteKit component for displaying that data

Usage

Adding to a Svelte project

Install to project deps: npm install @bscotch/gamemaker-releases-ui

Fetching the release notes will need to be done server-side to avoid CORS issues. For SvelteKit, you could use a server-only loader, e.g.:

1/** @file +page.server.ts */
2
3import { loadReleasesSummary } from '@bscotch/gamemaker-releases-ui';
4import type { PageServerLoad } from './$types.js';
5
6export const load: PageServerLoad = async () => {
7  const releases = await loadReleasesSummary();
8  return {
9    releases,
10  };
11};

1<!-- +page.svelte -->
2<script lang="ts">
3  import GameMakerReleases from '$lib/GameMakerReleases.svelte';
4  import type { PageData } from './$types.js';
5
6  export let data: PageData;
7</script>
8
9<main>
10  <h1>GameMaker Releases</h1>
11  <GameMakerReleases releases={data.releases} />
12</main>
13
14<style>
15  /* Available CSS Custom Properties, for specifying colors. */
16  main {
17    --color-lts: rgb(0, 226, 192);
18    --color-stable: rgb(0, 217, 255);
19    --color-beta: rgb(255, 234, 0);
20    --color-unstable: rgb(255, 0, 93);
21    --color-text: rgb(213, 213, 213);
22    --color-text-muted: rgb(150, 150, 150);
23    --color-background: rgb(27, 27, 27);
24  }
25  h1 {
26    color: var(--color-text);
27  }
28  main {
29    width: 100%;
30    max-width: 960px;
31    padding: 1em 2em;
32    margin: auto;
33    font-family: Arial, Helvetica, sans-serif;
34  }
35</style>
36

Development

• Install Node.js 16+
• Enable Corepack or manually install pnpm
• Clone the repo containing this package
• In the repo root, run pnpm install
• Run: cd packages/releases-ui
• Run: pnpm dev
• The console should provide a local URL to visit the demo page.

TODO

1. Figure out how to get it packaged for use in Stitch Desktop
2. Create a GitHub Pages or CloudFlare Pages to host