Merge branch 'main' into svelte-html-tutorial

Author: teemingc

.github/workflows/docs-preview-create.yml

@@ -1,31 +1,59 @@
 name: Docs preview create
 
 on:
-  repository_dispatch:
-    types: [docs-preview-create]
+  workflow_dispatch:
+    inputs:
+      repo:
+        description: 'Repository name (not fully-qualified, eg. `svelte` or `kit`)'
+        required: true
+        type: string
+      pr:
+        description: 'PR number'
+        required: true
+        type: string
+      owner:
+        description: 'Owner (eg. sveltejs)'
+        required: true
+        type: string
+      branch:
+        description: 'Branch (eg. my-feature-branch)'
+        required: true
+        type: string
+
+permissions:
+  contents: write
 
 env:
-  BRANCH: preview-${{ github.event.client_payload.package }}-${{ github.event.client_payload.pr }}
+  BRANCH: preview-${{ inputs.repo }}-${{ inputs.pr }}
 
 jobs:
   Sync:
+    name: Sync
     runs-on: ubuntu-latest
+
+    concurrency:
+      group: preview-${{ inputs.repo }}-${{ inputs.pr }} # can't reference env here
+      cancel-in-progress: true
+
     steps:
       - uses: actions/checkout@v4
         with:
           token: ${{ secrets.GH_TOKEN }}
+          ref: main # Explicitly checkout main branch first
       - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
           node-version: 22
           cache: pnpm
       - run: pnpm install --frozen-lockfile
 
-      - name: Checkout
-        run: git fetch origin ${{ env.BRANCH }} && git checkout ${{ env.BRANCH }} || git checkout -b ${{ env.BRANCH }}
+      - name: Create or reset branch from main
+        run: |
+          git fetch origin
+          git checkout -B ${{ env.BRANCH }} # Force create/reset branch based on current main
 
       - name: Sync
-        run: cd apps/svelte.dev && pnpm sync-docs --owner="${{ github.event.client_payload.owner }}" -p "${{ github.event.client_payload.package }}#${{ github.event.client_payload.branch }}"
+        run: cd apps/svelte.dev && pnpm sync-docs --owner="${{ inputs.owner }}" -p "${{ inputs.repo }}#${{ inputs.branch }}"
 
       - name: Configure Git
         run: |
@@ -34,27 +62,14 @@ jobs:
 
       - name: Push
         id: push
-        run: git add -A && git commit -m "sync docs" && git push -u origin ${{ env.BRANCH }}
+        run: git add -A && git commit -m "sync docs" && git push -u origin ${{ env.BRANCH }} --force
 
-      - name: Find comment
-        id: fc
-        uses: peter-evans/find-comment@v3
-        with:
-          token: ${{ secrets.COMMENTER_TOKEN }}
-          repository: ${{ github.event.client_payload.repo }}
-          issue-number: ${{ github.event.client_payload.pr }}
-          comment-author: 'Rich-Harris' # it's using my personal access token, not sure if there's a way to comment as a bot instead
-          body-includes: _this is an automated message_
-
-      - name: Create comment
-        if: steps.fc.outputs.comment-id == ''
-        uses: peter-evans/create-or-update-comment@v4
+      - name: Request preview comment
+        uses: peter-evans/repository-dispatch@v3
         with:
-          token: ${{ secrets.COMMENTER_TOKEN }}
-          repository: ${{ github.event.client_payload.repo }}
-          issue-number: ${{ github.event.client_payload.pr }}
-          body: |
-            preview: https://svelte-dev-git-${{ env.BRANCH }}-svelte.vercel.app/
-
-            _this is an automated message_
-          edit-mode: replace
+          event-type: 'request-preview-comment'
+          client-payload: |-
+            {
+              "repo": "${{ inputs.repo }}",
+              "pr": "${{ inputs.pr }}"
+            }

.github/workflows/docs-preview-delete.yml

@@ -1,11 +1,19 @@
 name: Docs preview delete
 
 on:
-  repository_dispatch:
-    types: [docs-preview-delete]
+  workflow_dispatch:
+    inputs:
+      repo:
+        description: 'Repository name (not fully-qualified, eg. `svelte` or `kit`)'
+        required: true
+        type: string
+      pr:
+        description: 'PR number'
+        required: true
+        type: string
 
 env:
-  BRANCH: preview-${{ github.event.client_payload.package }}-${{ github.event.client_payload.pr }}
+  BRANCH: preview-${{ inputs.repo }}-${{ inputs.pr }}
 
 jobs:
   Sync:

.github/workflows/sync-docs.yml

@@ -1,8 +1,16 @@
 name: Sync docs
 
 on:
-  repository_dispatch:
-    types: [sync-request]
+  workflow_dispatch:
+    inputs:
+      repo:
+        description: 'Repository name (not fully-qualified, eg. `svelte` or `kit`)'
+        required: true
+        type: string
+
+permissions:
+  contents: write
+  pull-requests: write
 
 jobs:
   Sync:
@@ -17,13 +25,13 @@ jobs:
       - run: pnpm install --frozen-lockfile
 
       - name: Sync
-        run: cd apps/svelte.dev && pnpm sync-docs -p ${{ github.event.client_payload.package }}
+        run: cd apps/svelte.dev && pnpm sync-docs -p ${{ inputs.repo }}
 
       - name: Create or update pull request
         uses: peter-evans/create-pull-request@v7
         with:
-          commit-message: sync ${{ github.event.client_payload.package }} docs
-          title: Sync `${{ github.event.client_payload.package }}` docs
+          commit-message: sync ${{ inputs.repo }} docs
+          title: Sync `${{ inputs.repo }}` docs
           body: This is an automated pull request. See the [README](../tree/main/apps/svelte.dev/scripts/sync-docs/README.md) for more information
-          branch: sync-${{ github.event.client_payload.package }}
+          branch: sync-${{ inputs.repo }}
           base: main

apps/svelte.dev/.env

@@ -3,3 +3,6 @@ SUPABASE_KEY=
 
 GITHUB_CLIENT_ID=
 GITHUB_CLIENT_SECRET=
+
+# disable prerendering with `PRERENDER=false pnpm build` — this is useful for speeding up builds when previewing locally
+PRERENDER=true

apps/svelte.dev/.gitignore

@@ -6,9 +6,13 @@
 /src/routes/_home/Supporters/contributors.js
 /src/routes/_home/Supporters/donors.jpg
 /src/routes/_home/Supporters/donors.js
+/scripts/svelte-template
+/static/svelte-template.json
 
 # git-repositories of synced docs go here
 /repos/
 
 # TODO remove this after https://github.com/sveltejs/kit/pull/12718 is merged
 /content/docs/kit/50-reference
+.vercel
+.env*.local

apps/svelte.dev/README.md

@@ -35,3 +35,11 @@ When writing content for the tutorial, you need to be aware of the differences o
 ### Dependencies
 
 If you look in the site's package.json you'll notice several dependencies that don't appear to be used, such as `@testing-library/svelte`. These are present because they're referenced in the docs, and Twoslash needs to be able to find type definitions in order to typecheck snippets. Installing the dependencies was deemed preferable to faking it with `declare module`, since we're liable to end up with fictional types that way.
+
+### Prerendering
+
+Most of the site is prerendered. Since that involves some fairly expensive work, it can take a while. To build the site _without_ prerendering — for example, because you need to debug an issue that's affecting production builds — set the `PRERENDER` environment variable to `false`:
+
+```bash
+PRERENDER=false pnpm build
+```

apps/svelte.dev/content/blog/2016-11-26-frameworks-without-the-framework.md

@@ -2,7 +2,7 @@
 title: "Frameworks without the framework: why didn't we think of this sooner?"
 description: You can't write serious applications in vanilla JavaScript without hitting a complexity wall. But a compiler can do it for you.
 author: Rich Harris
-authorURL: https://twitter.com/Rich_Harris
+authorURL: https://bsky.app/profile/rich-harris.dev
 ---
 
 > Wait, this new framework has a _runtime_? Ugh. Thanks, I'll pass.
@@ -12,7 +12,7 @@ We're shipping too much code to our users. Like a lot of front end developers, I
 
 But I was wrong. 100kb of .js isn't equivalent to 100kb of .jpg. It's not just the network time that'll kill your app's startup performance, but the time spent parsing and evaluating your script, during which time the browser becomes completely unresponsive. On mobile, those milliseconds rack up very quickly.
 
-If you're not convinced that this is a problem, follow [Alex Russell](https://twitter.com/slightlylate) on Twitter. Alex [hasn't been making many friends in the framework community lately](https://twitter.com/slightlylate/status/728355959022587905), but he's not wrong. But the proposed alternative to using frameworks like Angular, React and Ember – [Polymer](https://www.polymer-project.org/1.0/) – hasn't yet gained traction in the front end world, and it's certainly not for a lack of marketing.
+If you're not convinced that this is a problem, follow [Alex Russell](https://bsky.app/profile/infrequently.org) on BlueSky. Alex [hasn't been making many friends in the framework community lately](https://twitter.com/slightlylate/status/728355959022587905), but he's not wrong. But the proposed alternative to using frameworks like Angular, React and Ember – [Polymer](https://www.polymer-project.org/1.0/) – hasn't yet gained traction in the front end world, and it's certainly not for a lack of marketing.
 
 Perhaps we need to rethink the whole thing.
 
@@ -30,7 +30,7 @@ Svelte is a new framework that does exactly that. You write your components usin
 
 The [Svelte implementation of TodoMVC](https://svelte-todomvc.surge.sh/) weighs 3.6kb zipped. For comparison, React plus ReactDOM _without any app code_ weighs about 45kb zipped. It takes about 10x as long for the browser just to evaluate React as it does for Svelte to be up and running with an interactive TodoMVC.
 
-And once your app _is_ up and running, according to [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) **Svelte is fast as heck**. It's faster than React. It's faster than Vue. It's faster than Angular, or Ember, or Ractive, or Preact, or Riot, or Mithril. It's competitive with Inferno, which is probably the fastest UI framework in the world, for now, because [Dominic Gannaway](https://twitter.com/trueadm) is a wizard. (Svelte is slower at removing elements. We're [working on it](https://github.com/sveltejs/svelte/issues/26).)
+And once your app _is_ up and running, according to [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) **Svelte is fast as heck**. It's faster than React. It's faster than Vue. It's faster than Angular, or Ember, or Ractive, or Preact, or Riot, or Mithril. It's competitive with Inferno, which is probably the fastest UI framework in the world, for now, because [Dominic Gannaway](https://bsky.app/profile/trueadm.dev) is a wizard. (Svelte is slower at removing elements. We're [working on it](https://github.com/sveltejs/svelte/issues/26).)
 
 It's basically as fast as vanilla JS, which makes sense because it _is_ vanilla JS – just vanilla JS that you didn't have to write.
 

apps/svelte.dev/content/blog/2017-09-06-the-zen-of-just-writing-css.md

@@ -2,7 +2,7 @@
 title: The zen of Just Writing CSS
 description: I would say this is the future, but we're already doing it.
 author: Rich Harris
-authorURL: https://twitter.com/Rich_Harris
+authorURL: https://bsky.app/profile/rich-harris.dev
 ---
 
 It's fashionable to dislike CSS. There are lots of reasons why that's the case, but it boils down to this: CSS is _unpredictable_. If you've never had the experience of tweaking a style rule and accidentally breaking some layout that you thought was completely unrelated — usually when you're trying to ship — then you're either new at this or you're a much better programmer than the rest of us.
@@ -17,7 +17,7 @@ This article isn't in any way intended as criticism of the hard work the CSS-in-
 
 Everything in CSS is global. Because of that, styles intended for one bit of markup often end up affecting another. Because of _that_, developers often resort to wild namespacing conventions (not 'rules', since they're very difficult to enforce) that mostly just increase your risk of RSI.
 
-It gets worse when you're working on a team. No-one dares touch styles authored by someone else, because it's often unclear what they're doing, what markup they apply to, and what disasters will unfold if you remove them.
+It gets worse when you're working on a team. No one dares touch styles authored by someone else, because it's often unclear what they're doing, what markup they apply to, and what disasters will unfold if you remove them.
 
 The consequence of all this is the **append-only stylesheet**. There's no way of knowing which code can safely be removed, so it's common to undo some existing style with another, more specific style — even on relatively small projects.
 

apps/svelte.dev/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md

@@ -2,7 +2,7 @@
 title: 'Sapper: Towards the ideal web app framework'
 description: Taking the next-plus-one step
 author: Rich Harris
-authorURL: https://twitter.com/Rich_Harris
+authorURL: https://bsky.app/profile/rich-harris.dev
 ---
 
 > Quickstart for the impatient: [the Sapper docs](https://sapper.svelte.dev), and the [starter template](https://github.com/sveltejs/sapper-template)

apps/svelte.dev/content/blog/2018-04-18-version-2.md

@@ -2,7 +2,7 @@
 title: Svelte v2 is out!
 description: Here's what you need to know
 author: Rich Harris
-authorURL: https://twitter.com/Rich_Harris
+authorURL: https://bsky.app/profile/rich-harris.dev
 ---
 
 <aside>Our motto is 'move slowly and break things'. No, wait, that came out wrong...</aside>