+
@@ -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);
diff --git a/src/_assets/scss/inc/demos.scss b/src/_assets/scss/inc/demos.scss
index 7fbbca69..5902b9cb 100644
--- a/src/_assets/scss/inc/demos.scss
+++ b/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;
diff --git a/src/docs/getting-started/demos.md b/src/docs/getting-started/demos.md
index 1040292a..7ccfda78 100644
--- a/src/docs/getting-started/demos.md
+++ b/src/docs/getting-started/demos.md
@@ -15,15 +15,15 @@ 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
Edit on Glitch button
+Click the
View Source 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
```
@@ -31,8 +31,8 @@ Swup Demo: Basic
Slide pages into view horizontally.
-```glitch
-https://swup-demo-slide.glitch.me
+```swupdemo
+https://swup-demos.onrender.com/slide/
Swup Demo: Slide
```
@@ -40,8 +40,8 @@ Swup Demo: Slide
Cover content while loading the new page.
-```glitch
-https://swup-demo-overlay.glitch.me
+```swupdemo
+https://swup-demos.onrender.com/overlay/
Swup Demo: Overlay
```
@@ -49,8 +49,8 @@ Swup Demo: Overlay
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,8 +79,8 @@ 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
```
@@ -88,8 +88,8 @@ Swup Fragment Demo: Modal
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
```
@@ -97,8 +97,8 @@ Swup Fragment Demo: List
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
```
@@ -106,8 +106,8 @@ Swup Demo: Animated 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
```
@@ -115,7 +115,7 @@ Swup Demo: Inline forms
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
```
diff --git a/src/docs/getting-started/example.md b/src/docs/getting-started/example.md
index f67b736f..ea1e1d6b 100644
--- a/src/docs/getting-started/example.md
+++ b/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
```