John D Wells Jr johndwells
johndwells
/ fragment.twig
Last active
January 26, 2024 18:08
Lazyload DOM fragment with AlpineJS + Unpoly
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div up-id="replace-me-lazy"> | |
| Hello, world! | |
| </div> |
johndwells
/ smoothscroll.js
Created
December 8, 2023 11:39
SmoothScroll component built with AlpineJS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Given a query selector, will use native smooth scrolling to scroll to element. | |
| * | |
| * Usage: | |
| * import smoothscroll from 'path/to/smoothscroll.js'; | |
| * import Alpine from 'alpinejs'; | |
| * Alpine.data("smoothscroll", smoothscroll); | |
| * Alpine.start(); | |
| * ... | |
| * <button x-data="smoothscroll('#main')">Scroll to #main div</button> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import "unpoly"; | |
| /** | |
| * Helper to fetch user session info | |
| * https://craftcms.com/docs/4.x/dev/controller-actions.html#ajax | |
| */ | |
| const getSessionInfo = function() { | |
| return fetch('/actions/users/session-info', { | |
| headers: { | |
| 'Accept': 'application/json', |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* src/js/app.js */ | |
| import Alpine from 'alpinejs'; | |
| import intersect from '@alpinejs/intersect'; | |
| import video from '@js/parts/alpine/video'; | |
| Alpine.plugin(intersect); | |
| Alpine.data("video", video); | |
| window.Alpine = Alpine; | |
| Alpine.start(); |
johndwells
/ index.html
Last active
December 4, 2022 22:40
Use Tailwind CSS & Alpine JS to emulate `object-fit: cover` with a Vimeo embed
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script> | |
| </head> | |
| <body> | |
| <div class="relative w-[100vw] h-[100vh]"> |
johndwells
/ lazyload-youtube-vimeo-alpinejs.twig
Last active
April 27, 2022 22:22
Lazyload Youtube/Vimeo player with AlpineJS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {% set video = craft.embeddedAssets.get(asset) %} | |
| {% if video %} | |
| <div x-data="{ play : false }" | |
| class="relative" | |
| style="padding-bottom: {{ video.aspectRatio ~ '%' }}"> | |
| <button x-show="!play" | |
| x-on:click.prevent="play = true" | |
| class="group block" | |
| aria-label="Play video"> | |
| <img src="{{ video.image }}" |
johndwells
/ command.txt
Created
August 17, 2021 12:53
DDEV remove all containers when router is unhealthy
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $: ddev rm -a | |
| $: ddev start |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // https://github.com/drud/ddev/issues/2383#issuecomment-860913830 | |
| $ ddev composer -- --version | |
| Composer version 2.0.13 2021-04-27 13:11:08 | |
| $ ddev config --composer-version=1 | |
| $ ddev restart | |
| $ ddev composer -- --version | |
| Composer version 1.10.22 2021-04-27 13:10:45 |
johndwells
/ alpine.js
Last active
April 27, 2022 22:20
Example of Disqus integration with Unpoly & AlpineJS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Alpine from 'alpinejs'; | |
| import disqus from './disqus.js'; | |
| Alpine.data('disqus', disqus); | |
| window.Alpine = Alpine; | |
| Alpine.start(); |
johndwells
/ boost.unpoly.js
Created
June 5, 2020 17:06
Automatically pass all same-domain links through unpoly.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Automatically bind internal links to `up-follow` behaviour | |
| // Unpoly will already catch and handle links with explicit `up-follow` etc, | |
| // so we are safe to assume that if our handler below is triggered, the link | |
| // doesn't already have an up- attribute. | |
| // | |
| // Scenarios to handle: | |
| // Hat-tip to https://github.com/instantpage/instant.page/blob/master/instantpage.js | |
| // ✅ cmd+click | |
| // ✅ empty links | |
| // ✅ links to another domain |
NewerOlder