{"id":16485369,"url":"https://github.com/morganconrad/ptwd-sveltedemo","last_synced_at":"2026-05-13T17:45:06.812Z","repository":{"id":214258984,"uuid":"734143104","full_name":"MorganConrad/ptwd-sveltedemo","owner":"MorganConrad","description":"Demo for PTWD Meetup","archived":false,"fork":false,"pushed_at":"2024-01-10T01:40:58.000Z","size":64,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-11T14:45:59.474Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MorganConrad.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-21T01:21:53.000Z","updated_at":"2023-12-27T00:04:04.000Z","dependencies_parsed_at":"2023-12-27T01:23:07.477Z","dependency_job_id":"3f523cf9-d26c-4535-baaa-b626efb439ac","html_url":"https://github.com/MorganConrad/ptwd-sveltedemo","commit_stats":null,"previous_names":["morganconrad/ptwd-sveltedemo"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorganConrad%2Fptwd-sveltedemo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorganConrad%2Fptwd-sveltedemo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorganConrad%2Fptwd-sveltedemo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorganConrad%2Fptwd-sveltedemo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MorganConrad","download_url":"https://codeload.github.com/MorganConrad/ptwd-sveltedemo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241261861,"owners_count":19936046,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T13:25:38.185Z","updated_at":"2026-05-13T17:45:06.760Z","avatar_url":"https://github.com/MorganConrad.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ptwd-sveltedemo\n\nSvelte - Sveltekit Demo for the Jan 10 2024 [Port Townsend Web Developers Meetup](https://www.meetup.com/port-townsend-web-developers-meetup/)\n\nThis is a bit of a mish-mash illustrating the many possibilities of SvelteKit.  It is definitely not intended as an example of \"good design\".  The major routes:\n\n - `/books` an example Rare Book Store\n - `/presentation` the PTWD presentation, but also an example of a blog\n - `/game` a simple game showing reactivity on a web page\n\n[A version of this might be online at Netlify](https://pensive-hugle-9e5891.netlify.app/)\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/46e07044-1e46-4fb0-8b95-0ac51772a14c/deploy-status)](https://app.netlify.com/sites/pensive-hugle-9e5891/deploys)\n\n## Install and Run\n\n```\ngit clone https://github.com/MorganConrad/ptwd-sveltedemo.git\nnpm install\nnpm run dev\n\n  then point your browser at http://localhost:5173/\n```\n\n## static folder\n\n - Truly static files - images, local css files, favicon.png\n - One _could_ put about.html  _etc._ here but you'd lose the templating\n\n## src folder\n\n - **app.html**\n\n   - framework HTML.\n   - good place to put global CSS files (this uses Chota.css for some basic styling)\n   - SEO meta tags could go here\n     - there are modules to help with SEO via `%sveltekit.head%`\n\n - **+page.svelte**\n   - landing page\n   - corresponds to /index.html in a \"normal\" web site\n\n - **+error.svelte**\n   - main error page (e.g. for 404s).  I think it only handles 400s, not 500s.\n\n### src/lib\n\n - \"Library\" .js or .ts files\n - Svelte Components go here - standard Headers, Buttons, Footers, etc...\n - Not much here!\n\n### src/routes\n\n - **The heart of the Sveltekit routing and app.**\n\n#### About, Help\n\n - [Mdsvex](https://mdsvex.pngwn.io/) preprocessor concerts these +page.md files to Svelte\n\n#### books\n\n - Demo of a site that sells products\n - **+layout.svelte:** a layout template for _all_ pages about books (and subfolders)\n - **+page.js:** retrieves all books from the API and puts them into +page.svelte's `data`\n - **+page.svelte:** demonstrates the `{#each}` to list all books.\n\n#### books/[id]\n\n - `[id]` in brackets means this is a variable path parameter\n   - doesn't need to be \"id\", could use \"uid\", \"ISBN\", \"slug\", whatever...\n - **+page.server.js:**\n   - loads data from the \"backend DB API\"  (see below)\n   - `*.server.js` means this _must run on the server_ to _protect secrets_\n     - will matter when the app gets \"adapted\" and deployed\n   - also provides \"Form Actions\" under `export const actions`\n - **+page.svelte:**\n   - Details about an individual book\n   - Form / Buttons to \"Buy\" and \"Return\"\n   - `$: book = data.books[0];` funky syntax means that **book** is reactive.\n\n\n### src/routes/api\n\n - simulates an external API (e.g. a database) to get books from a \"backend\"\n - underlying folder structure typically mimics your routes\n - **+server.js:** for _all_ books (could add some actual query stuff)\n - **[id]/+server.js:** for an individual book\n   - GET\n   - POST for form actions (Buy and Return a book)\n     - notice the redirect, this was hard to figure out.\n\n\n### Routes that are not part of the \"Book Store\"\n\n#### src/presentation\n\n - unrelated to the \"store\", slides for a presentation\n - Example of how one would structure a Markdown blog\n   - md folder has the files\n   - base folder lists them (vite incantation in presentation/page.js)\n   - [slug] is dynamic path to an individual \"blog article\"\n\n#### game\n\n - Demo of a highly \"reactive\" game using simple Svelte\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorganconrad%2Fptwd-sveltedemo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmorganconrad%2Fptwd-sveltedemo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorganconrad%2Fptwd-sveltedemo/lists"}