diff --git a/lib/markdown-it-code-enhancements.js b/lib/markdown-it-code-enhancements.js index 7e3a315c..fac1ac38 100644 --- a/lib/markdown-it-code-enhancements.js +++ b/lib/markdown-it-code-enhancements.js @@ -19,7 +19,7 @@ function renderCodeBlockWithLanguage(code, language) { `; } -function renderGlitchFrame(code) { +function renderSwupDemo(code) { const isSrc = (line) => line.startsWith('https://'); const lines = code.trim().split(/\r?\n/); const srcLine = lines.find(isSrc); @@ -27,16 +27,16 @@ function renderGlitchFrame(code) { 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*/ ` -
-
+
+ @@ -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 ```