Switch to https://swup-demos.onrender.com for the demos

lib/markdown-it-code-enhancements.js

@@ -19,24 +19,24 @@ function renderCodeBlockWithLanguage(code, language) {
 		</div>`;
 }
 
-function renderGlitchFrame(code) {
+function renderSwupDemo(code) {
 	const isSrc = (line) => line.startsWith('https://');
 	const lines = code.trim().split(/\r?\n/);
 	const srcLine = lines.find(isSrc);
 	if (!srcLine) {
 		return renderCodeBlockRaw(code);
 	}
 	const src = srcLine.trim();
-	const linkSlug = (src.match(/^https:\/\/([\w-]+?)\.glitch\.me/i) || [])[1] || '';
-	const link = `https://glitch.com/edit/#!/${linkSlug}`;
+	const path = new URL(src).pathname;
+	const link = `https://github.com/swup/demos/tree/main${path}`;
 	const description = lines.filter((line) => !isSrc(line)).join(' ').trim();
 	return /*html*/ `
-		<div class="glitch" data-src="${src}" data-title="${encode(description)}">
-			<div class="glitch__frame">
+		<div class="swupdemo" data-src="${src}" data-title="${encode(description)}">
+			<div class="swupdemo__frame">
   			<iframe src="${src}" loading="lazy" title="${encode(description)}" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
-				<p class="glitch__link">
-					<a href="${link}" class="glitch__pill" target="_blank">
-						Edit on Glitch
+				<p class="swupdemo__link">
+					<a href="${link}" class="swupdemo__pill" target="_blank">
+						View Source
 					</a>
 				</p>
 			</div>
@@ -50,8 +50,8 @@ function renderCodeBlock(originalRule) {
 		const info = tokens[idx].info;
 		const language = synonyms[info] || info || 'unknown';
 
-		if (language === 'glitch') {
-			return renderGlitchFrame(content);
+		if (language === 'swupdemo') {
+			return renderSwupDemo(content);
 		}
 
 		let code = originalRule(...args);

src/_assets/scss/inc/demos.scss

@@ -1,13 +1,13 @@
-.glitch {
-	--glitch-scale: 0.8;
+.swupdemo {
+	--swupdemo-scale: 0.8;
 	position: relative;
 }
 
-.glitch__frame {
+.swupdemo__frame {
 	position: relative;
 	width: 100%;
 	min-width: 300px;
-	height: calc((500px + 6vh) * var(--glitch-scale));
+	height: calc((500px + 6vh) * var(--swupdemo-scale));
 	position: relative;
 	resize: both;
 	border: 1px solid var(--color-transparent-1);
@@ -20,24 +20,24 @@
 		left: 0;
 		width: 100%;
 		height: 100%;
-		width: calc(100% / var(--glitch-scale));
-		height: calc(100% / var(--glitch-scale));
+		width: calc(100% / var(--swupdemo-scale));
+		height: calc(100% / var(--swupdemo-scale));
 		background: transparent;
-		transform: scale(var(--glitch-scale));
+		transform: scale(var(--swupdemo-scale));
 		transform-origin: 0 0;
 	}
 }
 
 @include bp(s) {
-	.glitch {
-		--glitch-scale: 0.667;
+	.swupdemo {
+		--swupdemo-scale: 0.667;
 	}
-	.glitch__frame {
+	.swupdemo__frame {
 		width: 80%;
 	}
 }
 
-.glitch__link {
+.swupdemo__link {
 	position: absolute;
 	bottom: 0.4rem;
 	right: 0.4rem;
@@ -48,7 +48,7 @@
 	margin: 0;
 }
 
-.glitch__pill {
+.swupdemo__pill {
 	display: inline-block;
 	line-height: 1;
 	white-space: nowrap;
@@ -62,7 +62,7 @@
 	box-shadow: var(--shadow-4);
 	vertical-align: middle;
 }
-.glitch__pill--dummy {
+.swupdemo__pill--dummy {
 	position: relative;
 	top: -0.1em;
 	margin-inline: 0.2rem;

src/docs/getting-started/demos.md

@@ -15,42 +15,42 @@ Looking for a demo of swup animations in action? You are in fact looking at one!
 with swup and CSS-only animations. See below for more isolated examples showcasing swup's
 features and options.
 
-Click the <span class="glitch__pill glitch__pill--dummy">Edit on Glitch</span> button
+Click the <span class="swupdemo__pill swupdemo__pill--dummy">View Source</span> button
 of each demo to see the code and fork it for experimenting yourself.
 
 ## Basic animation
 
 Default swup installation with two containers and a fade animation between pages.
 
-```glitch
-https://swup-demo-basic.glitch.me
+```swupdemo
+https://swup-demos.onrender.com/basic/
 Swup Demo: Basic
 ```
 
 ## Slide animation
 
 Slide pages into view horizontally.
 
-```glitch
-https://swup-demo-slide.glitch.me
+```swupdemo
+https://swup-demos.onrender.com/slide/
 Swup Demo: Slide
 ```
 
 ## Overlay animation
 
 Cover content while loading the new page.
 
-```glitch
-https://swup-demo-overlay.glitch.me
+```swupdemo
+https://swup-demos.onrender.com/overlay/
 Swup Demo: Overlay
 ```
 
 ## Multiple animations
 
 Use swup's animation classes for other elements than the main content containers.
 
-```glitch
-https://swup-demo-multiple.glitch.me
+```swupdemo
+https://swup-demos.onrender.com/multiple/
 Swup Demo: Mulitple animations
 ```
 
@@ -59,8 +59,8 @@ Swup Demo: Mulitple animations
 Animate between pages as a horizontal slideshow. Uses the [Parallel Plugin](/plugins/parallel-plugin/) to show both pages at the same time
 and the [Preload Plugin](/plugins/preload-plugin/) to preload the slides.
 
-```glitch
-https://swup-demo-slideshow.glitch.me
+```swupdemo
+https://swup-demos.onrender.com/slideshow/
 Swup Demo: Slideshow
 ```
 
@@ -69,8 +69,8 @@ Swup Demo: Slideshow
 Reveal the next page using masks and gradients.
 Uses the [Parallel Plugin](/plugins/parallel-plugin/) to show both pages at the same time.
 
-```glitch
-https://swup-demo-reveal.glitch.me
+```swupdemo
+https://swup-demos.onrender.com/reveal/
 Swup Demo: Reveal
 ```
 
@@ -79,43 +79,43 @@ Swup Demo: Reveal
 Load sub-pages as modals.
 Uses the [Fragment Plugin](/plugins/fragment-plugin/) to dynamically select containers based on route.
 
-```glitch
-https://swup-demo-fragment-modal.glitch.me
+```swupdemo
+https://swup-demos.onrender.com/fragment-modal/
 Swup Fragment Demo: Modal
 ```
 
 ## Fragment support: list
 
 Uses the [Fragment Plugin](/plugins/fragment-plugin/) to replace only the items of a list when applying filters.
 
-```glitch
-https://swup-demo-fragment-list.glitch.me
+```swupdemo
+https://swup-demos.onrender.com/fragment-list/
 Swup Fragment Demo: List
 ```
 
 ## Animated forms
 
 Animate form submissions using the [Forms Plugin](/plugins/forms-plugin/).
 
-```glitch
-https://swup-demo-forms.glitch.me
+```swupdemo
+https://swup-demos.onrender.com/forms/
 Swup Demo: Animated forms
 ```
 
 ## Inline forms
 
 Submit simple forms in place without full page loads using the [Forms Plugin](/plugins/forms-plugin/).
 
-```glitch
-https://swup-demo-inline-forms.glitch.me
+```swupdemo
+https://swup-demos.onrender.com/inline-forms/
 Swup Demo: Inline forms
 ```
 
 ## Infinite scroll cache
 
 Persist items loaded with infinite scroll between page visits.
 
-```glitch
-https://swup-demo-infinite-scroll-cache.glitch.me
+```swupdemo
+https://swup-demos.onrender.com/infinite-scroll-cache/
 Swup Demo: Infinite Scroll Cache
 ```

src/docs/getting-started/example.md

@@ -100,7 +100,7 @@ Here's an interactive demo to try out the fade animation we've just built togeth
 
 Head to the [demo page](/getting-started/demos/) for more examples.
 
-```repl
-https://swup-demo-basic-temp.replit.app
+```swupdemo
+https://swup-demos.onrender.com/basic/
 Swup Demo: Basic
 ```