Merge pull request #209 from swup/feat/demos-on-glitch

feat: demos on Glitch

Author: hirasso

lib/markdown-it-code-enhancements.js

@@ -19,25 +19,24 @@ function renderCodeBlockWithLanguage(code, language) {
 		</div>`;
 }
 
-function renderReplFrame(code) {
+function renderGlitchFrame(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 replSlug = (src.match(/^https:\/\/([\w-]+?)(-temp)?\.replit\.app/i) || [])[1] || '';
-	const linkSlug = replSlug.replace(/(?:^|-)\w/g, (m) => m.toUpperCase().replace('-', ' ')).replace(/ /g, '-').replace('-A-', '-a-');
-	const link = `https://replit.com/@philippdaun/${linkSlug}`;
+	const linkSlug = (src.match(/^https:\/\/([\w-]+?)\.glitch\.me/i) || [])[1] || '';
+	const link = `https://glitch.com/edit/#!/${linkSlug}`;
 	const description = lines.filter((line) => !isSrc(line)).join(' ').trim();
 	return /*html*/ `
-		<div class="repl" data-src="${src}" data-title="${encode(description)}">
-			<div class="repl__frame">
+		<div class="glitch" data-src="${src}" data-title="${encode(description)}">
+			<div class="glitch__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="repl__link">
-					<a href="${link}" target="_blank">
-						<img src="https://replit.com/badge?theme=dark&variant=small&caption=Try%20with%20Replit" alt="Try this demo with Replit">
+				<p class="glitch__link">
+					<a href="${link}" class="glitch__pill" target="_blank">
+						Edit on Glitch
 					</a>
 				</p>
 			</div>
@@ -51,8 +50,8 @@ function renderCodeBlock(originalRule) {
 		const info = tokens[idx].info;
 		const language = synonyms[info] || info || 'unknown';
 
-		if (language === 'repl') {
-			return renderReplFrame(content);
+		if (language === 'glitch') {
+			return renderGlitchFrame(content);
 		}
 
 		let code = originalRule(...args);

src/_assets/scss/inc/demos.scss

@@ -1,14 +1,13 @@
-.repl {
-	--repl-scale: 0.8;
+.glitch {
+	--glitch-scale: 0.8;
 	position: relative;
 }
 
-.repl__frame {
+.glitch__frame {
 	position: relative;
 	width: 100%;
 	min-width: 300px;
-	height: calc((500px + 6vh) * var(--repl-scale));
-	// max-height: 500px;
+	height: calc((500px + 6vh) * var(--glitch-scale));
 	position: relative;
 	resize: both;
 	border: 1px solid var(--color-transparent-1);
@@ -21,53 +20,51 @@
 		left: 0;
 		width: 100%;
 		height: 100%;
-		width: calc(100% / var(--repl-scale));
-		height: calc(100% / var(--repl-scale));
+		width: calc(100% / var(--glitch-scale));
+		height: calc(100% / var(--glitch-scale));
 		background: transparent;
-		transform: scale(var(--repl-scale));
+		transform: scale(var(--glitch-scale));
 		transform-origin: 0 0;
 	}
 }
 
 @include bp(s) {
-	.repl {
-		--repl-scale: 0.667;
+	.glitch {
+		--glitch-scale: 0.667;
 	}
-	.repl__frame {
+	.glitch__frame {
 		width: 80%;
 	}
 }
 
-.repl__link {
+.glitch__link {
 	position: absolute;
-	bottom: 0.2rem;
+	bottom: 0.4rem;
 	right: 0.4rem;
 	@include bp(s) {
-		bottom: 0.5rem;
-		right: 0.7rem;
+		bottom: 0.6rem;
+		right: 0.6rem;
 	}
 	margin: 0;
-	a {
-		background: none !important;
-	}
 }
 
-img[src*='https://replit.com/badge']
-{
+.glitch__pill {
 	display: inline-block;
-	margin-inline: 0.3em;
-	transition: opacity 150ms;
-	a & {
-		opacity: 0.7;
-	}
-	a:hover & {
-		opacity: 1;
-	}
-	filter: drop-shadow(0 0 1px var(--color-transparent-2))
-		drop-shadow(0 0 5px hsl(var(--shadow-color) / var(--shadow-strength-dark)));
+	line-height: 1;
+	white-space: nowrap;
+	padding: 0.5em 0.8em;
+	background: black;
+	color: white;
+	font-size: 0.7rem;
+	border-radius: 0.5em;
+	border: 1px solid rgb(255 255 255 / 0.2);
+	--shadow-color: 239 80% 90%;
+	box-shadow: var(--shadow-4);
+	vertical-align: middle;
 }
-
-.page_body > p > img[src*='https://replit.com/badge']
-{
-	transform: translateY(0.3em);
+.glitch__pill--dummy {
+	position: relative;
+	top: -0.1em;
+	margin-inline: 0.2rem;
+	pointer-events: none;
 }

src/_assets/scss/inc/props.scss

@@ -6,7 +6,7 @@
 	--font-mono: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco,
 		Droid Sans Mono, Source Code Pro, monospace;
 
-	--font-size-fluid-0-B: clamp(.8rem, 1.5vw, .8rem);
+	--font-size-fluid-0-B: clamp(0.8rem, 1.5vw, 0.8rem);
 	--font-size-fluid-0: clamp(1rem, 2vw, 1.15rem);
 	--font-size-fluid-1: clamp(1.15rem, 3vw, 1.35rem);
 	--font-size-fluid-2: clamp(1.35rem, 4vw, 1.7rem);

src/_assets/scss/inc/showcase.scss

@@ -14,7 +14,7 @@
 	border: 1px solid var(--color-transparent-1);
 	border-radius: var(--radius-1);
 	overflow: hidden;
-	padding-bottom: .8rem;
+	padding-bottom: 0.8rem;
 	a {
 		position: relative;
 		z-index: 2;
@@ -35,7 +35,7 @@ header.showcase_header {
 	display: flex;
 	justify-content: space-between;
 	align-items: baseline;
-	padding: .8rem 1rem 0;
+	padding: 0.8rem 1rem 0;
 	border-top: 1px solid var(--color-transparent-1);
 	svg {
 		position: relative;
@@ -58,7 +58,7 @@ ul.showcase_credits {
 	list-style: none;
 	padding: 0;
 	margin: 0;
-	margin-top: .25em;
+	margin-top: 0.25em;
 	padding: 0 1rem;
 	display: flex;
 	flex-wrap: wrap;

src/docs/getting-started/demos.md

@@ -15,52 +15,52 @@ 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 <img src="https://replit.com/badge?theme=dark&variant=small&caption=Try%20with%20Replit"> button
+Click the <span class="glitch__pill glitch__pill--dummy">Edit on Glitch</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.
 
-```repl
-https://swup-demo-basic-temp.replit.app
+```glitch
+https://swup-demo-basic.glitch.me
 Swup Demo: Basic
 ```
 
 ## Slide animation
 
 Slide pages into view horizontally.
 
-```repl
-https://swup-demo-slide-temp.replit.app
+```glitch
+https://swup-demo-slide.glitch.me
 Swup Demo: Slide
 ```
 
 ## Overlay animation
 
 Cover content while loading the new page.
 
-```repl
-https://swup-demo-overlay-temp.replit.app
+```glitch
+https://swup-demo-overlay.glitch.me
 Swup Demo: Overlay
 ```
 
 ## Multiple animations
 
 Use swup's animation classes for other elements than the main content containers.
 
-```repl
-https://swup-demo-multiple-temp.replit.app
+```glitch
+https://swup-demo-multiple.glitch.me
 Swup Demo: Mulitple animations
 ```
 
 ## Slideshow animation
 
-Animate between pages as a horizontal slideshow.
-Uses the [Parallel Plugin](/plugins/parallel-plugin/) to show both pages at the same time.
+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.
 
-```repl
-https://swup-demo-slideshow-temp.replit.app
+```glitch
+https://swup-demo-slideshow.glitch.me
 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.
 
-```repl
-https://swup-demo-reveal-temp.replit.app
+```glitch
+https://swup-demo-reveal.glitch.me
 Swup Demo: Reveal
 ```
 
@@ -79,41 +79,43 @@ Swup Demo: Reveal
 Load sub-pages as modals.
 Uses the [Fragment Plugin](/plugins/fragment-plugin/) to dynamically select containers based on route.
 
-```repl
-https://swup-demo-modal-overlay-temp.replit.app/
+```glitch
+https://swup-demo-fragment-modal.glitch.me
+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.
 
-```repl
-https://swup-demo-filter-a-list-temp.replit.app/
+```glitch
+https://swup-demo-fragment-list.glitch.me
+Swup Fragment Demo: List
 ```
 
 ## Animated forms
 
 Animate form submissions using the [Forms Plugin](/plugins/forms-plugin/).
 
-```repl
-https://swup-demo-forms-temp.replit.app
+```glitch
+https://swup-demo-forms.glitch.me
 Swup Demo: Animated forms
 ```
 
 ## Inline forms
 
 Submit simple forms in place without full page loads using the [Forms Plugin](/plugins/forms-plugin/).
 
-```repl
-https://swup-demo-inline-forms-temp.replit.app
+```glitch
+https://swup-demo-inline-forms.glitch.me
 Swup Demo: Inline forms
 ```
 
 ## Infinite scroll cache
 
 Persist items loaded with infinite scroll between page visits.
 
-```repl
-https://swup-demo-infinite-scroll-cache-temp.replit.app
+```glitch
+https://swup-demo-infinite-scroll-cache.glitch.me
 Swup Demo: Infinite Scroll Cache
 ```

src/showcase/showcase.json

@@ -1,3 +1,3 @@
 {
-	"tags": ["showcase"]
+  "tags": ["showcase"]
 }