├── .gitignore ├── netlify.toml ├── public ├── images │ ├── favicon.png │ ├── furryous.png │ ├── imposster.png │ ├── possumbowl.png │ ├── possumtimes.png │ ├── furryous-back.png │ ├── poss-and-cons.png │ ├── possum-posse.png │ ├── imposster-back.png │ ├── og-image-banner.jpg │ ├── possumbowl-back.png │ ├── possumtimes-back.png │ ├── do-the-impossumble.png │ ├── eleventy-one-when.png │ ├── face-the-possum-1.png │ ├── face-the-possum-2.png │ ├── face-the-possum-3.png │ ├── poss-and-cons-back.png │ ├── possum-posse-back.png │ ├── do-the-impossumble-back.png │ ├── eleventy-one-when-back.png │ ├── face-the-possum-1-back.png │ ├── face-the-possum-2-back.png │ └── face-the-possum-3-back.png └── fonts │ └── Atkinson │ ├── Atkinson-Hyperlegible-Bold.ttf │ ├── Atkinson-Hyperlegible-Bold.woff │ ├── Atkinson-Hyperlegible-Bold.woff2 │ ├── Atkinson-Hyperlegible-Italic.ttf │ ├── Atkinson-Hyperlegible-Italic.woff │ ├── Atkinson-Hyperlegible-Italic.woff2 │ ├── Atkinson-Hyperlegible-Regular.ttf │ ├── Atkinson-Hyperlegible-Regular.woff │ ├── Atkinson-Hyperlegible-BoldItalic.ttf │ ├── Atkinson-Hyperlegible-BoldItalic.woff │ ├── Atkinson-Hyperlegible-Regular.woff2 │ └── Atkinson-Hyperlegible-BoldItalic.woff2 ├── slinkity.config.js ├── .eleventy.js ├── src ├── _includes │ ├── add-to-cart.jsx │ ├── Slinky.jsx │ ├── layout.njk │ ├── Slinky.svelte │ └── Slinky.vue ├── deployment.md ├── index.jsx ├── shirts.jsx ├── _data │ └── tshirts.yaml ├── react-page.jsx ├── svelte-page.svelte └── vue-page.vue ├── package.json ├── LICENSE.md ├── styles ├── slinky.scss └── index.scss └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | _site 3 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | command = "npx slinkity" 3 | publish = "_site" -------------------------------------------------------------------------------- /public/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/images/favicon.png -------------------------------------------------------------------------------- /public/images/furryous.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/images/furryous.png -------------------------------------------------------------------------------- /public/images/imposster.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/images/imposster.png -------------------------------------------------------------------------------- /public/images/possumbowl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/images/possumbowl.png -------------------------------------------------------------------------------- /public/images/possumtimes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/images/possumtimes.png -------------------------------------------------------------------------------- /public/images/furryous-back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/images/furryous-back.png -------------------------------------------------------------------------------- /public/images/poss-and-cons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/images/poss-and-cons.png -------------------------------------------------------------------------------- /public/images/possum-posse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/images/possum-posse.png -------------------------------------------------------------------------------- /public/images/imposster-back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/images/imposster-back.png -------------------------------------------------------------------------------- /public/images/og-image-banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/images/og-image-banner.jpg -------------------------------------------------------------------------------- /public/images/possumbowl-back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/images/possumbowl-back.png -------------------------------------------------------------------------------- /public/images/possumtimes-back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/images/possumtimes-back.png -------------------------------------------------------------------------------- /public/images/do-the-impossumble.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/images/do-the-impossumble.png -------------------------------------------------------------------------------- /public/images/eleventy-one-when.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/images/eleventy-one-when.png -------------------------------------------------------------------------------- /public/images/face-the-possum-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/images/face-the-possum-1.png -------------------------------------------------------------------------------- /public/images/face-the-possum-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/images/face-the-possum-2.png -------------------------------------------------------------------------------- /public/images/face-the-possum-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/images/face-the-possum-3.png -------------------------------------------------------------------------------- /public/images/poss-and-cons-back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/images/poss-and-cons-back.png -------------------------------------------------------------------------------- /public/images/possum-posse-back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/images/possum-posse-back.png -------------------------------------------------------------------------------- /public/images/do-the-impossumble-back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/images/do-the-impossumble-back.png -------------------------------------------------------------------------------- /public/images/eleventy-one-when-back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/images/eleventy-one-when-back.png -------------------------------------------------------------------------------- /public/images/face-the-possum-1-back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/images/face-the-possum-1-back.png -------------------------------------------------------------------------------- /public/images/face-the-possum-2-back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/images/face-the-possum-2-back.png -------------------------------------------------------------------------------- /public/images/face-the-possum-3-back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/images/face-the-possum-3-back.png -------------------------------------------------------------------------------- /public/fonts/Atkinson/Atkinson-Hyperlegible-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/fonts/Atkinson/Atkinson-Hyperlegible-Bold.ttf -------------------------------------------------------------------------------- /public/fonts/Atkinson/Atkinson-Hyperlegible-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/fonts/Atkinson/Atkinson-Hyperlegible-Bold.woff -------------------------------------------------------------------------------- /public/fonts/Atkinson/Atkinson-Hyperlegible-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/fonts/Atkinson/Atkinson-Hyperlegible-Bold.woff2 -------------------------------------------------------------------------------- /public/fonts/Atkinson/Atkinson-Hyperlegible-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/fonts/Atkinson/Atkinson-Hyperlegible-Italic.ttf -------------------------------------------------------------------------------- /public/fonts/Atkinson/Atkinson-Hyperlegible-Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/fonts/Atkinson/Atkinson-Hyperlegible-Italic.woff -------------------------------------------------------------------------------- /public/fonts/Atkinson/Atkinson-Hyperlegible-Italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/fonts/Atkinson/Atkinson-Hyperlegible-Italic.woff2 -------------------------------------------------------------------------------- /public/fonts/Atkinson/Atkinson-Hyperlegible-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/fonts/Atkinson/Atkinson-Hyperlegible-Regular.ttf -------------------------------------------------------------------------------- /public/fonts/Atkinson/Atkinson-Hyperlegible-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/fonts/Atkinson/Atkinson-Hyperlegible-Regular.woff -------------------------------------------------------------------------------- /public/fonts/Atkinson/Atkinson-Hyperlegible-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/fonts/Atkinson/Atkinson-Hyperlegible-BoldItalic.ttf -------------------------------------------------------------------------------- /public/fonts/Atkinson/Atkinson-Hyperlegible-BoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/fonts/Atkinson/Atkinson-Hyperlegible-BoldItalic.woff -------------------------------------------------------------------------------- /public/fonts/Atkinson/Atkinson-Hyperlegible-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/fonts/Atkinson/Atkinson-Hyperlegible-Regular.woff2 -------------------------------------------------------------------------------- /public/fonts/Atkinson/Atkinson-Hyperlegible-BoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learnwithjason/lets-learn-slinkity/main/public/fonts/Atkinson/Atkinson-Hyperlegible-BoldItalic.woff2 -------------------------------------------------------------------------------- /slinkity.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'slinkity' 2 | import reactRenderer from '@slinkity/renderer-react' 3 | import vueRenderer from '@slinkity/renderer-vue' 4 | import svelteRenderer from '@slinkity/renderer-svelte' 5 | 6 | export default defineConfig({ 7 | renderers: [reactRenderer, vueRenderer, svelteRenderer], 8 | }) 9 | -------------------------------------------------------------------------------- /.eleventy.js: -------------------------------------------------------------------------------- 1 | const yaml = require('js-yaml'); 2 | 3 | module.exports = function (eleventyConfig) { 4 | eleventyConfig.addDataExtension('yaml', (contents) => yaml.load(contents)); 5 | eleventyConfig.addPassthroughCopy('public'); 6 | 7 | return { 8 | markdownTemplateEngine: 'njk', 9 | dir: { 10 | input: 'src', 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/_includes/add-to-cart.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function AddToCart() { 4 | const [added, setAdded] = React.useState(false); 5 | 6 | function updateAdded() { 7 | setAdded(true); 8 | } 9 | 10 | return ( 11 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /src/deployment.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Deployment 3 | layout: layout 4 | --- 5 | 6 | Slinkity projects can be hosted with the same `build` command and `publish` directory on any of the common Jamstack hosting providers such as [Netlify](https://ajcwebdev-slinkity.netlify.app/), [Vercel](https://ajcwebdev-slinkity.vercel.app/), or [Cloudflare Pages](https://ajcwebdev-slinkity.pages.dev/). All three of these options allow you to create a custom domain name as well. 7 | 8 | ### Deploy to Netlify 9 | 10 | The `netlify.toml` file includes `npx slinkity` for the build command and `_site` for the publish directory. 11 | 12 | ```toml 13 | [build] 14 | command = "npx slinkity" 15 | publish = "_site" 16 | ``` -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lets-learn-slinkity", 3 | "version": "1.0.0", 4 | "description": "A splendid starter for my Slinkity site!", 5 | "main": ".eleventy.js", 6 | "scripts": { 7 | "start": "slinkity --serve --incremental", 8 | "build": "slinkity" 9 | }, 10 | "dependencies": { 11 | "js-yaml": "^4.1.0", 12 | "react": "^17.0.2", 13 | "react-dom": "^17.0.2", 14 | "svelte": "^3.46.2", 15 | "vue": "^3.2.28" 16 | }, 17 | "devDependencies": { 18 | "@11ty/eleventy": "^1.0.0-beta.8", 19 | "@slinkity/renderer-react": "^0.1.0", 20 | "@slinkity/renderer-svelte": "^0.1.0", 21 | "@slinkity/renderer-vue": "^0.1.0", 22 | "slinkity": "^0.6.1-canary.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const frontMatter = { 4 | title: '11tees', 5 | layout: 'layout', 6 | // hydrate: { 7 | // mode: 'eager', 8 | // props({ tshirts }) { 9 | // return { tshirts }; 10 | // } 11 | // } 12 | }; 13 | 14 | export default function StoreFront({ tshirts }) { 15 | return ( 16 |
17 | {tshirts.map((tshirt) => ( 18 |
19 |

20 | {tshirt.name} 21 |

22 | {tshirt.images.map((img) => ( 23 | {tshirt.name} 24 | ))} 25 |
26 | ))} 27 |
28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /src/shirts.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import AddToCart from './_includes/add-to-cart'; 3 | 4 | export const frontMatter = { 5 | layout: 'layout', 6 | pagination: { 7 | data: 'tshirts', 8 | size: 1, 9 | alias: 'tshirt', 10 | }, 11 | permalink: ({ tshirt }) => `/${tshirt.slug}/`, 12 | eleventyComputed: { 13 | title: ({ tshirt }) => tshirt.name, 14 | }, 15 | hydrate: { 16 | mode: 'eager', 17 | props: ({ tshirt }) => ({ tshirt }), 18 | }, 19 | }; 20 | 21 | export default function ShirtView({ tshirt }) { 22 | return ( 23 |
24 | {tshirt.images.map((img) => ( 25 | {tshirt.name} 26 | ))} 27 | 28 |

29 | 30 |

31 |
32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2021 Benjamin Holmes @holben888 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | 23 | Source: http://opensource.org/licenses/MIT -------------------------------------------------------------------------------- /styles/slinky.scss: -------------------------------------------------------------------------------- 1 | .slinky__container { 2 | display: grid; 3 | position: relative; 4 | justify-content: center; 5 | margin-bottom: 3rem; 6 | background: var(--purple-2); 7 | padding: 1rem; 8 | border-radius: 0.5rem; 9 | } 10 | 11 | .slinky { 12 | background: var(--purple-2); 13 | width: 400px; 14 | max-width: 90vw; 15 | height: auto; 16 | 17 | path { 18 | animation-duration: 0.6s; 19 | animation-fill-mode: forwards; 20 | transform-origin: 50% 80%; 21 | } 22 | 23 | @for $i from 1 through 7 { 24 | &.right > path:nth-child(#{$i}) { 25 | animation-name: slinky-right-#{$i}; 26 | @keyframes slinky-right-#{$i} { 27 | 0% { 28 | transform: rotate(0); 29 | } 30 | 50% { 31 | transform: rotate(($i - 1) * 27.5deg); 32 | } 33 | 100% { 34 | transform: rotate(165deg); 35 | } 36 | } 37 | } 38 | &.left > path:nth-child(#{$i}) { 39 | animation-name: slinky-left-#{$i}; 40 | @keyframes slinky-left-#{$i} { 41 | 0% { 42 | transform: rotate(165deg); 43 | } 44 | 50% { 45 | transform: rotate((7 - $i) * 27.5deg); 46 | } 47 | 100% { 48 | transform: rotate(0); 49 | } 50 | } 51 | } 52 | } 53 | } 54 | 55 | .slinky__button { 56 | --starting-color: var(--purple-3); 57 | padding: 0.5rem 1rem; 58 | border-radius: 0.3rem; 59 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | Learn With Jason 4 | 5 |

6 |

7 | Learn About Islands Architecture With Slinkity (with Ben Holmes) 8 |

9 |

10 | This app was built live on Learn With Jason and it was super fun and I’m sad you weren’t there. 11 |

12 |

13 | But don’t worry! You can still: 14 | watch the video · 15 | see upcoming episodes 16 |

17 | 18 |   19 | 20 | Partial hydration lets you ship zero JS by default. In this episode, Ben Holmes will teach us how Slinkity lets us use any component framework to build low-JS dynamic apps on the Jamstack. 21 | 22 |   23 | 24 | ## More Information 25 | 26 | - [Watch this app get built live + see links and additional resources][episode] 27 | - [Follow _Learn With Jason_ on Twitch][twitch] to watch future episodes live 28 | - [Add the _Learn With Jason_ schedule to your Google Calendar][cal] 29 | 30 |   31 | 32 | [episode]: https://www.learnwithjason.dev/learn-about-islands-architecture-with-slinkity 33 | [twitch]: https://jason.af/twitch 34 | [cal]: https://lwj.dev/cal 35 | -------------------------------------------------------------------------------- /src/_data/tshirts.yaml: -------------------------------------------------------------------------------- 1 | - name: Face the possum ed. 1 2 | images: 3 | ['/images/face-the-possum-1.png', '/images/face-the-possum-1-back.png'] 4 | slug: face-the-possum-1 5 | - name: 11ty was the Imposster 6 | images: ['/images/imposster.png', '/images/imposster-back.png'] 7 | slug: imposster 8 | - name: Weighing the poss and cons 9 | images: ['/images/poss-and-cons.png', '/images/poss-and-cons-back.png'] 10 | slug: poss-and-cons 11 | - name: 2 Fast 2 Furryous 12 | images: ['/images/furryous.png', '/images/furryous-back.png'] 13 | slug: furryous 14 | - name: Me and the possum posse 15 | images: ['/images/possum-posse.png', '/images/possum-posse-back.png'] 16 | slug: possum-posse 17 | - name: Face the possum ed. 3 18 | images: 19 | ['/images/face-the-possum-3.png', '/images/face-the-possum-3-back.png'] 20 | slug: face-the-possum-3 21 | - name: Do the impossumble 22 | images: 23 | ['/images/do-the-impossumble.png', '/images/do-the-impossumble-back.png'] 24 | slug: do-the-impossumble 25 | - name: Anything is possumbowl 26 | images: ['/images/possumbowl.png', '/images/possumbowl-back.png'] 27 | slug: possumbowl 28 | - name: 11ty 1.0 when? 29 | images: 30 | ['/images/eleventy-one-when.png', '/images/eleventy-one-when-back.png'] 31 | slug: eleventy-one-when 32 | - name: It possumtimes be like that 33 | images: ['/images/possumtimes.png', '/images/possumtimes-back.png'] 34 | slug: possumtimes 35 | - name: Face the possum ed. 2 36 | images: 37 | ['/images/face-the-possum-2.png', '/images/face-the-possum-2-back.png'] 38 | slug: face-the-possum-2 39 | -------------------------------------------------------------------------------- /src/react-page.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const frontMatter = { 4 | title: 'React to this chat', 5 | layout: 'layout', 6 | // hydrate: 'eager', 7 | }; 8 | 9 | function ReactDemo() { 10 | const [count, setCount] = React.useState(0); 11 | 12 | return ( 13 | <> 14 |

15 | To create the page you see here, we placed areact-page.jsx{' '} 16 | file alongside the other pages on our site. That's because component 17 | pages are like any other template on your 11ty site, just with 1 extra 18 | superpower: 19 | you can hydrate the page with JavaScript. 20 |

21 | 22 |

Hydrating this page

23 | 24 |

25 | We opted-in to shipping JavaScript using the hydrate key in 26 | our 27 | frontMatter. Learn more on 28 | 29 | our partial hydration docs. 30 | 31 |

32 | 33 |

34 | Tip: try setting hydrate to "none", or 35 | removing the key entirely. The counter below should stop working! This 36 | is because we're no longer sending our component to the client, 37 | effectively turning React into just another templating language. 38 |

39 | 40 |

41 | Count: {count} 42 | 43 |

44 | 45 |

Front matter

46 | 47 |

48 | Our included frontMatter wires up the layout and passes 49 | information "upstream" for other templates to read from. It works the 50 | same way for component-based pages as it does for 51 | 52 | 11ty's front matter 53 | 54 | . Here, the title key is accessible from any layout 55 | templates applied to our page. 56 |

57 | 58 | ); 59 | } 60 | 61 | export default ReactDemo; 62 | -------------------------------------------------------------------------------- /src/svelte-page.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 15 | 16 |

17 | To create the page you see here, we placed a 18 | svelte-page.svelte file alongside the other pages on our site. 19 | That's because component pages are like any other template on your 11ty site, 20 | just with 1 extra superpower: 21 | you can hydrate the page with JavaScript. 22 |

23 | 24 |

Hydrating this page

25 | 26 |

27 | We opted-in to shipping JavaScript using the hydrate key in our 28 | frontMatter. Learn more on 29 | our partial hydration docs. 32 |

33 | 34 |

35 | Tip: try setting hydrate to "none", or removing the 36 | key entirely. The counter below should stop working! This is because we're no 37 | longer sending our component to the client, effectively turning Svelte into 38 | just another templating language. 39 |

40 |

41 | Count: {count} 42 | 43 |

44 | 45 |

Front matter

46 | 47 |

48 | Our included frontMatter wires up the layout and passes 49 | information "upstream" for other templates to read from. It works the same way 50 | for component-based pages as it does for 51 | 11ty's front matter. 52 | Here, the title key is accessible from any layout templates applied 53 | to our page. 54 |

55 | 56 | 69 | -------------------------------------------------------------------------------- /src/vue-page.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | 62 | 63 | -------------------------------------------------------------------------------- /src/_includes/Slinky.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import '/@root/styles/slinky.scss' 3 | // woah, what's that /@root doing here? 4 | // see our "import alias" docs to learn more! 5 | // https://slinkity.dev/docs/import-aliases/ 6 | 7 | export default function SpinningLogo({ hydrate = 'none' }) { 8 | const [slinkDirection, setSlinkDirection] = React.useState('left') 9 | 10 | function toggleSlinkDirection() { 11 | if (slinkDirection === 'left') { 12 | setSlinkDirection('right') 13 | } else { 14 | setSlinkDirection('left') 15 | } 16 | } 17 | 18 | return ( 19 |
20 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 57 | 65 | 66 | 67 | 68 | 69 | 70 | {hydrate !== 'none' ? ( 71 | 74 | ) : null} 75 |
76 | ) 77 | } 78 | -------------------------------------------------------------------------------- /src/_includes/layout.njk: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 21 | 27 | 33 | 39 | {{ __slinkity.head | safe }} 40 | {{ title }} 41 | 42 | 43 | 50 |
51 |

{{ title }}

52 |
53 | ☝️ Who generated that heading? 54 |

55 | That heading came from a wrapper layout. If you check out this page's source ({{ page.fileSlug }}), you'll notice some frontmatter applied between those 56 | 57 | {% raw %}---{% endraw %} 58 | 59 | blocks: 60 |

61 |
62 |
title:
63 |
The title we'll apply as the page heading and the browser tab title. You'll see this applied using 64 | {`{{ title }}`} 65 | in the layout file described below 👇
66 |
layout:
67 |
The name of the layout file to apply. In this case, 68 | layout: layout 69 | translates to 70 | _includes/layout.njk 71 | since 11ty looks in the _includes folder by default.
72 |
73 |

You'll notice this page is wrapped in a layout. This pulls in a few parameters using 74 | 11ty's data cascade: 75 |

76 | 86 |
87 | {{ content | safe }} 88 |
89 | 90 | -------------------------------------------------------------------------------- /styles/index.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: Atkinson; 3 | src: url('/fonts/Atkinson/Atkinson-Hyperlegible-Regular.woff2'), 4 | url('/fonts/Atkinson/Atkinson-Hyperlegible-Regular.woff'), 5 | url('/fonts/Atkinson/Atkinson-Hyperlegible-Regular.ttf'); 6 | font-display: swap; 7 | } 8 | 9 | @font-face { 10 | font-family: Atkinson; 11 | src: url('/fonts/Atkinson/Atkinson-Hyperlegible-Italic.woff2'), 12 | url('/fonts/Atkinson/Atkinson-Hyperlegible-Italic.woff'), 13 | url('/fonts/Atkinson/Atkinson-Hyperlegible-Italic.ttf'); 14 | font-style: italic; 15 | font-display: swap; 16 | } 17 | 18 | @font-face { 19 | font-family: Atkinson; 20 | src: url('/fonts/Atkinson/Atkinson-Hyperlegible-Bold.woff2'), 21 | url('/fonts/Atkinson/Atkinson-Hyperlegible-Bold.woff'), 22 | url('/fonts/Atkinson/Atkinson-Hyperlegible-Bold.ttf'); 23 | font-weight: bold; 24 | font-display: swap; 25 | } 26 | 27 | @font-face { 28 | font-family: Atkinson; 29 | src: url('/fonts/Atkinson/Atkinson-Hyperlegible-BoldItalic.woff2'), 30 | url('/fonts/Atkinson/Atkinson-Hyperlegible-BoldItalic.woff'), 31 | url('/fonts/Atkinson/Atkinson-Hyperlegible-BoldItalic.ttf'); 32 | font-weight: bold; 33 | font-style: italic; 34 | font-display: swap; 35 | } 36 | 37 | :root { 38 | --purple-1: hsl(258, 47%, 2%); 39 | --purple-2: hsl(258, 47%, 12%); 40 | --purple-3: hsl(258, 47%, 22%); 41 | --purple-4: hsl(258, 47%, 62%); 42 | 43 | --pink: #ff00d6; 44 | --yellow: #faff02; 45 | --primary: var(--pink); 46 | --secondary: var(--yellow); 47 | 48 | --content-max-width: 700px; 49 | } 50 | 51 | html { 52 | font-family: 'Atkinson', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 53 | line-height: 1.3; 54 | } 55 | 56 | body { 57 | box-sizing: border-box; 58 | background: var(--purple-1); 59 | background-image: linear-gradient(var(--purple-3) 1px, transparent 0), 60 | linear-gradient(90deg, var(--purple-3) 1px, transparent 0); 61 | background-size: 2rem 2rem; 62 | 63 | color: white; 64 | margin: 2rem; 65 | 66 | &::before { 67 | content: ''; 68 | position: fixed; 69 | inset: 0; 70 | z-index: -1; 71 | background: linear-gradient(transparent 25%, var(--purple-1) 50%); 72 | background-size: 100% 200%; 73 | animation: fade-in-grid 0.8s linear forwards; 74 | 75 | @keyframes fade-in-grid { 76 | from { 77 | background-position-y: 100%; 78 | } 79 | to { 80 | background-position-y: 0%; 81 | } 82 | } 83 | } 84 | } 85 | 86 | main { 87 | max-width: var(--content-max-width); 88 | margin: auto; 89 | } 90 | 91 | a, a:visited, button { 92 | transition-property: background-position-x, color, opacity; 93 | transition-duration: 0.2s; 94 | transition-timing-function: linear; 95 | background: linear-gradient( 96 | 80deg, 97 | var(--starting-color, var(--purple-1)) 33%, 98 | var(--primary), 99 | var(--secondary) 100 | ); 101 | background-size: 300% 100%; 102 | background-position-x: 0; 103 | 104 | &:hover { 105 | background-position-x: 100%; 106 | color: var(--purple-1); 107 | text-decoration: none; 108 | } 109 | } 110 | 111 | a, a:visited { 112 | color: var(--primary); 113 | padding: 2px; 114 | } 115 | 116 | button { 117 | border: none; 118 | color: inherit; 119 | font-family: inherit; 120 | font-size: inherit; 121 | cursor: pointer; 122 | } 123 | 124 | details { 125 | border: 1px solid var(--purple-3); 126 | padding: 0.5rem 1rem; 127 | background: var(--purple-2); 128 | margin-bottom: 0.5rem; 129 | box-shadow: 0 6px 20px 10px var(--purple-1); 130 | border-radius: 0.5rem; 131 | } 132 | 133 | .counter { 134 | display: flex; 135 | align-items: center; 136 | gap: 1rem; 137 | 138 | button { 139 | border: 1px solid var(--pink); 140 | border-radius: 0.5rem; 141 | padding: 0.2rem 0.6rem; 142 | font-weight: 700; 143 | } 144 | } -------------------------------------------------------------------------------- /src/_includes/Slinky.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 |
15 | 23 | 27 | 31 | 35 | 39 | 43 | 47 | 51 | 52 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | {#if hydrate !== "none"} 67 | 74 | {/if} 75 |
76 | 77 | 138 | -------------------------------------------------------------------------------- /src/_includes/Slinky.vue: -------------------------------------------------------------------------------- 1 | 61 | 62 | 83 | 84 | --------------------------------------------------------------------------------