Use 11ty config to try swup fragments in a more realistic setup

Add swup & swup fragment plugin to test its implementation w/ the boilerplate
2026-01-15 00:55:08 +08:00 · 2024-01-18 18:06:53 -05:00 · 2024-01-18 11:42:17 -05:00
16 changed files with 345 additions and 123 deletions
--- a/assets.json
+++ b/assets.json
@@ -1,3 +1,3 @@
 {
-    "version": 1705616220986
+    "version": 1705619201399
 }
--- a/assets/scripts/modules.js
+++ b/assets/scripts/modules.js
@@ -1,3 +1,4 @@
-export {default as Example} from './modules/Example';
+// export {default as Example} from './modules/Example';
+export {default as Dialog} from './modules/Dialog';
 export {default as Load} from './modules/Load';
 export {default as Scroll} from './modules/Scroll';
--- a/assets/scripts/modules/Dialog.js
+++ b/assets/scripts/modules/Dialog.js
@@ -0,0 +1,36 @@
+import { module } from 'modujs';
+
+export default class extends module {
+    constructor(m) {
+        super(m);
+
+        this.$closeBtn = this.$('close')[0]
+    }
+
+    init() {
+        // Prevent ESC to close dialog
+        this.onKeyDown = this.onKeyDown.bind(this)
+    }
+
+    onKeyDown(e) {
+        if(e.key === 'Escape') {
+            console.log('ESCAPE');
+            e.preventDefault()
+            this.$closeBtn.click();
+        }
+    }
+
+    populate(container) {
+        this.el.appendChild(container)
+    }
+
+    show() {
+        this.el.showModal();
+        window.addEventListener('keydown', this.onKeyDown);
+    }
+
+    close() {
+        window.removeEventListener('keydown', this.onKeyDown);
+        this.el.close();
+    }
+}
--- a/assets/scripts/modules/Load.js
+++ b/assets/scripts/modules/Load.js
@@ -1,5 +1,6 @@
 import { module } from 'modujs';
-import modularLoad from 'modularload';
+import Swup from 'swup';
+import SwupFragmentPlugin from '@swup/fragment-plugin';

 export default class extends module {
    constructor(m) {
@@ -7,16 +8,70 @@ export default class extends module {
    }

    init() {
-        const load = new modularLoad({
-            enterDelay: 0,
-            transitions: {
-                customTransition: {}
+        const load = new Swup({
+            containers: ['[data-load-container]'],
+            // cache: false,
+            plugins: [
+                new SwupFragmentPlugin({
+                    rules: [
+                        {
+                            from: ['/projects/:page?'],
+                            to: ['/projects/:page?'],
+                            containers: ['#paginated']
+                        },
+                        {
+                            from: ['/projects/:page?'],
+                            to: ['/project/:slug'],
+                            containers: ['#modal'],
+                            name: 'open-modal'
+                        },
+                        {
+                            from: ['/project/:slug'],
+                            to: ['/project/:slug'],
+                            containers: ['#modal'],
+                            name: 'modal-update'
+                        },
+                        {
+                            from: ['/project/:slug'],
+                            to: ['/projects/:page?'],
+                            containers: ['#modal', '#paginated'],
+                            name: 'close-modal'
+                        },
+                    ]
+                })
+            ]
+        });
+
+        load.hooks.before('content:replace', async (visit) => {
+            console.log('before content replace:', visit);
+
+            for(let container of visit.containers) {
+                const oldContainer = this.el.querySelector(container)
+                console.log('old container: ', oldContainer)
+                this.call('destroy', oldContainer, 'app');
            }
        });

-        load.on('loaded', (transition, oldContainer, newContainer) => {
-            this.call('destroy', oldContainer, 'app');
-            this.call('update', newContainer, 'app');
+        load.hooks.on('content:replace', (visit) => {
+            console.log('On content replace:', visit);
+
+            if(visit.fragmentVisit) {
+                if(visit.fragmentVisit.name == 'open-modal') {
+                    this.call('populate', document.getElementById('modal'), 'Dialog');
+                    this.call('show', null, 'Dialog')
+                } else if(visit.fragmentVisit.name == 'close-modal') {
+                    this.call('close', null, 'Dialog')
+                }
+            }
+
+            for(let container of visit.containers) {
+                const newContainer = this.el.querySelector(container)
+                console.log('new container: ', newContainer)
+                newContainer.classList.add('transition-fade')
+                this.call('update', newContainer, 'app');
+            }
        });
+
+        console.log(this, load);
    }
 }
--- a/assets/styles/elements/_document.scss
+++ b/assets/styles/elements/_document.scss
@@ -69,3 +69,27 @@ a {
        color: $color-link-hover;
    }
 }
+
+/* Define a transition duration during page visits */
+html.is-changing .transition-fade {
+    transition: opacity 0.1s;
+    opacity: 1;
+}
+/* Define the styles for the unloaded pages */
+html.is-animating .transition-fade {
+    opacity: 0;
+}
+
+#paginated.is-changing {
+    transition: opacity 250ms;
+}
+#paginated.is-animating {
+    opacity: 0;
+}
+
+#modal.is-changing {
+    transition: opacity 100ms;
+}
+#modal.is-animating {
+    opacity: 0;
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,11 +8,13 @@
            "name": "@locomotivemtl/boilerplate",
            "version": "1.0.0",
            "dependencies": {
+                "@swup/fragment-plugin": "^0.3.7",
                "locomotive-scroll": "^5.0.0-beta.9",
                "modujs": "^1.4.2",
                "modularload": "^1.2.6",
                "normalize.css": "^8.0.1",
-                "svg4everybody": "^2.1.9"
+                "svg4everybody": "^2.1.9",
+                "swup": "^4.5.1"
            },
            "devDependencies": {
                "@11ty/eleventy": "^2.0.1",
@@ -1158,6 +1160,25 @@
            "resolved": "https://registry.npmjs.org/@studio-freight/lenis/-/lenis-1.0.27.tgz",
            "integrity": "sha512-1I6EaWR9rxdFjIJtF52CtETJt9ngfY4AjawrJY5pLxCvHa/lQZ+1v2gTUntwNZkuks6E2It6YEXV6jnpnCZFjA=="
        },
+        "node_modules/@swup/fragment-plugin": {
+            "version": "0.3.7",
+            "resolved": "https://registry.npmjs.org/@swup/fragment-plugin/-/fragment-plugin-0.3.7.tgz",
+            "integrity": "sha512-tTu8K9gpec4EPy4tiV6xLghwW5YHGb5jQtJvN6gx28eOErk0k3hvD5whoe3zfnSzP8ZrdbK++EzzRoEwn2Tvyw==",
+            "dependencies": {
+                "@swup/plugin": "^4.0.0"
+            },
+            "peerDependencies": {
+                "swup": "^4.0.0"
+            }
+        },
+        "node_modules/@swup/plugin": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/@swup/plugin/-/plugin-4.0.0.tgz",
+            "integrity": "sha512-3Kq31BJxnzoPg643YxGoWQggoU6VPKZpdE5CqqmP7wwkpCYTzkRmrfcQ29mGhsSS7xfS7D33iZoBiwY+wPoo2A==",
+            "dependencies": {
+                "swup": "^4.0.0"
+            }
+        },
        "node_modules/@types/cookie": {
            "version": "0.4.1",
            "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
@@ -2543,6 +2564,17 @@
                "node": ">=0.10.0"
            }
        },
+        "node_modules/delegate-it": {
+            "version": "6.0.1",
+            "resolved": "https://registry.npmjs.org/delegate-it/-/delegate-it-6.0.1.tgz",
+            "integrity": "sha512-ZS2hRm/SaoPzaeWcWyYjzVVF4/PgALZqma9FXsunFt4XQGVAtQ79Vx7v57vNQNaI75Rl12C+x6TkLqHS5PNKLg==",
+            "dependencies": {
+                "typed-query-selector": "^2.10.0"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/fregante"
+            }
+        },
        "node_modules/depd": {
            "version": "1.1.2",
            "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -5186,6 +5218,14 @@
                "wrappy": "1"
            }
        },
+        "node_modules/opencollective-postinstall": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
+            "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==",
+            "bin": {
+                "opencollective-postinstall": "index.js"
+            }
+        },
        "node_modules/opn": {
            "version": "5.3.0",
            "resolved": "https://registry.npmjs.org/opn/-/opn-5.3.0.tgz",
@@ -5334,8 +5374,7 @@
        "node_modules/path-to-regexp": {
            "version": "6.2.1",
            "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
-            "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==",
-            "dev": true
+            "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw=="
        },
        "node_modules/picocolors": {
            "version": "1.0.0",
@@ -7343,6 +7382,17 @@
                "node": ">=0.8.0"
            }
        },
+        "node_modules/swup": {
+            "version": "4.5.1",
+            "resolved": "https://registry.npmjs.org/swup/-/swup-4.5.1.tgz",
+            "integrity": "sha512-FH9+x7sXzU19OgrLP23wdC8KZOkpBXC0cBKcnf0gM5Unurm5cn5LunCLesA6WZJmT/o5o9TZguM1cFmPaD6K4Q==",
+            "hasInstallScript": true,
+            "dependencies": {
+                "delegate-it": "^6.0.0",
+                "opencollective-postinstall": "^2.0.2",
+                "path-to-regexp": "^6.2.1"
+            }
+        },
        "node_modules/tar-fs": {
            "version": "3.0.4",
            "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.4.tgz",
@@ -7497,6 +7547,11 @@
                "node": ">=10"
            }
        },
+        "node_modules/typed-query-selector": {
+            "version": "2.11.0",
+            "resolved": "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.11.0.tgz",
+            "integrity": "sha512-qBs4sfmnLlPOyo2oSdvHbIFHe2CPgU54/1UGfSNceb7LARpIEVxUaeRX0Doje6oKpuySS2stqy90R3YrynR8Kg=="
+        },
        "node_modules/ua-parser-js": {
            "version": "1.0.33",
            "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.33.tgz",
@@ -8604,6 +8659,22 @@
            "resolved": "https://registry.npmjs.org/@studio-freight/lenis/-/lenis-1.0.27.tgz",
            "integrity": "sha512-1I6EaWR9rxdFjIJtF52CtETJt9ngfY4AjawrJY5pLxCvHa/lQZ+1v2gTUntwNZkuks6E2It6YEXV6jnpnCZFjA=="
        },
+        "@swup/fragment-plugin": {
+            "version": "0.3.7",
+            "resolved": "https://registry.npmjs.org/@swup/fragment-plugin/-/fragment-plugin-0.3.7.tgz",
+            "integrity": "sha512-tTu8K9gpec4EPy4tiV6xLghwW5YHGb5jQtJvN6gx28eOErk0k3hvD5whoe3zfnSzP8ZrdbK++EzzRoEwn2Tvyw==",
+            "requires": {
+                "@swup/plugin": "^4.0.0"
+            }
+        },
+        "@swup/plugin": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/@swup/plugin/-/plugin-4.0.0.tgz",
+            "integrity": "sha512-3Kq31BJxnzoPg643YxGoWQggoU6VPKZpdE5CqqmP7wwkpCYTzkRmrfcQ29mGhsSS7xfS7D33iZoBiwY+wPoo2A==",
+            "requires": {
+                "swup": "^4.0.0"
+            }
+        },
        "@types/cookie": {
            "version": "0.4.1",
            "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
@@ -9654,6 +9725,14 @@
                }
            }
        },
+        "delegate-it": {
+            "version": "6.0.1",
+            "resolved": "https://registry.npmjs.org/delegate-it/-/delegate-it-6.0.1.tgz",
+            "integrity": "sha512-ZS2hRm/SaoPzaeWcWyYjzVVF4/PgALZqma9FXsunFt4XQGVAtQ79Vx7v57vNQNaI75Rl12C+x6TkLqHS5PNKLg==",
+            "requires": {
+                "typed-query-selector": "^2.10.0"
+            }
+        },
        "depd": {
            "version": "1.1.2",
            "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -11707,6 +11786,11 @@
                "wrappy": "1"
            }
        },
+        "opencollective-postinstall": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
+            "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q=="
+        },
        "opn": {
            "version": "5.3.0",
            "resolved": "https://registry.npmjs.org/opn/-/opn-5.3.0.tgz",
@@ -11813,8 +11897,7 @@
        "path-to-regexp": {
            "version": "6.2.1",
            "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
-            "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==",
-            "dev": true
+            "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw=="
        },
        "picocolors": {
            "version": "1.0.0",
@@ -13433,6 +13516,16 @@
            "resolved": "https://registry.npmjs.org/svg4everybody/-/svg4everybody-2.1.9.tgz",
            "integrity": "sha1-W9n23vwTOFmgRGRtR0P6vCjbfi0="
        },
+        "swup": {
+            "version": "4.5.1",
+            "resolved": "https://registry.npmjs.org/swup/-/swup-4.5.1.tgz",
+            "integrity": "sha512-FH9+x7sXzU19OgrLP23wdC8KZOkpBXC0cBKcnf0gM5Unurm5cn5LunCLesA6WZJmT/o5o9TZguM1cFmPaD6K4Q==",
+            "requires": {
+                "delegate-it": "^6.0.0",
+                "opencollective-postinstall": "^2.0.2",
+                "path-to-regexp": "^6.2.1"
+            }
+        },
        "tar-fs": {
            "version": "3.0.4",
            "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.4.tgz",
@@ -13562,6 +13655,11 @@
                "walk": "2.3.x"
            }
        },
+        "typed-query-selector": {
+            "version": "2.11.0",
+            "resolved": "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.11.0.tgz",
+            "integrity": "sha512-qBs4sfmnLlPOyo2oSdvHbIFHe2CPgU54/1UGfSNceb7LARpIEVxUaeRX0Doje6oKpuySS2stqy90R3YrynR8Kg=="
+        },
        "ua-parser-js": {
            "version": "1.0.33",
            "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.33.tgz",
--- a/package.json
+++ b/package.json
@@ -14,11 +14,13 @@
        "build": "node --experimental-json-modules --no-warnings build/build.js"
    },
    "dependencies": {
+        "@swup/fragment-plugin": "^0.3.7",
        "locomotive-scroll": "^5.0.0-beta.9",
        "modujs": "^1.4.2",
        "modularload": "^1.2.6",
        "normalize.css": "^8.0.1",
-        "svg4everybody": "^2.1.9"
+        "svg4everybody": "^2.1.9",
+        "swup": "^4.5.1"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.13",
--- a/views/partials/header.twig
+++ b/views/partials/header.twig
@@ -1,5 +1,9 @@
+{% set _logo_tag = page.url == '/' ? 'h1' : 'span' %}
+
 <header>
-    <a href="/"><h1>Locomotive Boilerplate</h1></a>
+    <a href="/">
+        <{{_logo_tag}} style="text-decoration: underline;">Locomotive Boilerplate</{{_logo_tag}}>
+    </a>
    <nav>
        <ul>
            <li><a href="/images">Images</a></li>
--- a/views/templates/images.twig
+++ b/views/templates/images.twig
@@ -1,89 +1,69 @@
 {% extends "@layouts/base.twig" %}

 {% block content %}
-    <div data-module-scroll="main">
-        <div class="o-container">
-            <h1 class="c-heading -h1">Images</h1>
+    <div class="o-container">
+        <h1 class="c-heading -h1">Images</h1>

-            <section>
-                <h2 class="c-heading -h2">Lazy load demo</h2>
+        <section>
+            <h3 class="c-heading -h3">Relative to scroll</h3>

-                <h3 class="c-heading -h3">Basic</h3>
+            <h4 class="c-heading -h3">Using o-ratio & img</h3>

-                <div style="width: 640px; max-width: 100%;">
-                    <div class="o-ratio u-4:3"><img data-load-src="http://picsum.photos/800/600?v=1" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></div>
-                    <div class="o-ratio u-4:3"><img data-load-src="http://picsum.photos/800/600?v=2" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></div>
+            <div style="width: 640px; max-width: 100%;">
+                <div class="o-ratio u-4:3">
+                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=1" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
                </div>
-
-                <h4 class="c-heading -h3">Using o-ratio & background-image</h3>
-
-                <div style="width: 480px; max-width: 100%;">
-                    <div class="o-ratio u-16:9" data-load-style="background-size: cover; background-position: center; background-image: url(http://picsum.photos/640/480?v=1);"></div>
-                    <div class="o-ratio u-16:9" data-load-style="background-size: cover; background-position: center; background-image: url(http://picsum.photos/640/480?v=2);"></div>
+                <div class="o-ratio u-4:3">
+                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=2" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
                </div>
-            </section>
-
-            <section>
-                <h3 class="c-heading -h3">Relative to scroll</h3>
-
-                <h4 class="c-heading -h3">Using o-ratio & img</h3>
-
-                <div style="width: 640px; max-width: 100%;">
-                    <div class="o-ratio u-4:3">
-                        <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=1" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
-                    </div>
-                    <div class="o-ratio u-4:3">
-                        <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=2" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
-                    </div>
-                    <div class="o-ratio u-4:3">
-                        <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=3" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
-                    </div>
-                    <div class="o-ratio u-4:3">
-                        <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=4" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
-                    </div>
-                    <div class="o-ratio u-4:3">
-                        <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=5" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
-                    </div>
+                <div class="o-ratio u-4:3">
+                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=3" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
                </div>
-
-                <h4 class="c-heading -h3">Using o-ratio & background-image</h3>
-
-                <div style="width: 480px; max-width: 100%;">
-                    <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=1"></div>
-                    <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=2"></div>
-                    <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=3"></div>
-                    <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=4"></div>
-                    <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=5"></div>
+                <div class="o-ratio u-4:3">
+                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=4" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
                </div>
-
-                <h4 class="c-heading -h3">Using SVG viewport for ratio</h3>
-
-                <div style="width: 480px; max-width: 100%;">
-                    <img
-                        data-scroll
-                        data-scroll-call="lazyLoad, Scroll, main"
-                        data-src="http://picsum.photos/640/480?v=6"
-                        alt=""
-                        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3C/svg%3E"
-                    />
-
-                    <img
-                        data-scroll
-                        data-scroll-call="lazyLoad, Scroll, main"
-                        data-src="http://picsum.photos/640/480?v=7"
-                        alt=""
-                        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3C/svg%3E"
-                    />
-
-                    <img
-                        data-scroll
-                        data-scroll-call="lazyLoad, Scroll, main"
-                        data-src="http://picsum.photos/640/480?v=8"
-                        alt=""
-                        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3C/svg%3E"
-                    />
+                <div class="o-ratio u-4:3">
+                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=5" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
                </div>
-            </section>
-        </div>
+            </div>
+
+            <h4 class="c-heading -h3">Using o-ratio & background-image</h3>
+
+            <div style="width: 480px; max-width: 100%;">
+                <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=1"></div>
+                <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=2"></div>
+                <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=3"></div>
+                <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=4"></div>
+                <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=5"></div>
+            </div>
+
+            <h4 class="c-heading -h3">Using SVG viewport for ratio</h3>
+
+            <div style="width: 480px; max-width: 100%;">
+                <img
+                    data-scroll
+                    data-scroll-call="lazyLoad, Scroll, main"
+                    data-src="http://picsum.photos/640/480?v=6"
+                    alt=""
+                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3C/svg%3E"
+                />
+
+                <img
+                    data-scroll
+                    data-scroll-call="lazyLoad, Scroll, main"
+                    data-src="http://picsum.photos/640/480?v=7"
+                    alt=""
+                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3C/svg%3E"
+                />
+
+                <img
+                    data-scroll
+                    data-scroll-call="lazyLoad, Scroll, main"
+                    data-src="http://picsum.photos/640/480?v=8"
+                    alt=""
+                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3C/svg%3E"
+                />
+            </div>
+        </section>
    </div>
 {% endblock %}
--- a/views/templates/index.twig
+++ b/views/templates/index.twig
@@ -6,6 +6,6 @@ title: Home

 {% block content %}
    <div class="o-container">
-        <h1 class="c-heading -h1">Hello</h1>
+        <h2 class="c-heading -h2">Hello world!</h2>
    </div>
 {% endblock %}
--- a/views/templates/project.twig
+++ b/views/templates/project.twig
@@ -9,8 +9,18 @@ permalink: "project/{{ project.title | slug }}/index.html"
 {% extends "@layouts/base.twig" %}

 {% block content %}
-    <div data-module-scroll="main">
-        <h1 class="c-heading -h1">{{project.title}}</h1>
-        <p>{{project.desc}}</p>
+    <div class="o-container">
+        <main id="modal">
+            <h1 class="c-heading -h1">{{project.title}}</h1>
+            <p>{{project.desc}}</p>
+
+            {% if pagination.page.previous %}
+            <a style="float: left;" href="/project/{{pagination.page.previous.title | slug}}">← {{pagination.page.previous.title}}</a>
+            {% endif %}
+            {% if pagination.page.next %}
+            <a style="float: right;" href="/project/{{pagination.page.next.title | slug}}">{{pagination.page.next.title}} →</a>
+            {% endif %}
+            <div style="clear: both;"></div>
+        </main>
    </div>
 {% endblock %}
--- a/views/templates/projects.twig
+++ b/views/templates/projects.twig
@@ -6,25 +6,37 @@ pagination:

 {% extends "@layouts/base.twig" %}

-{% block content %}
-    <div data-module-scroll="main">
+{% block beforeMain %}
+<dialog id="dialog" data-module-dialog>
+    <a href="/" data-swup-link-to-fragment="#paginated" style="float: right;" data-dialog="close">Close</a>
+</dialog>

+<div data-module-scroll="main">
+    {% include "@partials/header.twig" %}
+{% endblock %}
+
+{% block content %}
+    <div class="o-container">
        <h1 class="c-heading -h1">Projects</h1>

-        <ul>
-        {% for item in pagination.items %}
-            <li><a href="/project/{{item.title|slug}}">{{ item.title }}</a></li>
-        {% endfor %}
-        </ul>
+        <div id="paginated">
+            <ul>
+            {% for item in pagination.items %}
+                <li><a href="/project/{{item.title|slug}}">{{ item.title }}</a></li>
+            {% endfor %}
+            </ul>

-        <ol>
-        {% for pageEntry in pagination.pages %}
-            {% if page.url == pagination.hrefs[ loop.index0 ] %}
-                <span aria-current="page">{{ loop.index }}</span>
-            {% else %}
-                <a href="{{ pagination.hrefs[ loop.index0 ] }}">{{ loop.index }}</a>
-            {% endif %}
-        {% endfor %}
-        </ol>
+            <ol>
+            {% for pageEntry in pagination.pages %}
+                {% if page.url == pagination.hrefs[ loop.index0 ] %}
+                    <span aria-current="page">{{ loop.index }}</span>
+                {% else %}
+                    <a href="{{ pagination.hrefs[ loop.index0 ] }}">{{ loop.index }}</a>
+                {% endif %}
+            {% endfor %}
+            </ol>
+        </div>
    </div>
+
+    <template id="modal"></template>
 {% endblock %}
--- a/www/assets/scripts/app.js
+++ b/www/assets/scripts/app.js
--- a/www/assets/scripts/app.js.map
+++ b/www/assets/scripts/app.js.map
--- a/www/assets/styles/main.css
+++ b/www/assets/styles/main.css
--- a/www/assets/styles/main.css.map
+++ b/www/assets/styles/main.css.map
Author	SHA1	Message	Date
Jérémy Minié	098019ad5e	Use 11ty config to try swup fragments in a more realistic setup	2024-01-18 18:06:53 -05:00
Jérémy Minié	d9c3bd9f92	Add swup & swup fragment plugin to test its implementation w/ the boilerplate	2024-01-18 11:42:17 -05:00