You can explore the layout diff-ing function in the following section, but the major takeaway: 💡 page transitions will only animate the pieces that change, and ignore the pieces that don't (as far as layouts are concerned anyways). But with our data-page attributes hooking our layouts together, there's no need for all that work! We could walk through the page element-by-element to figure out "what's changed" (similar to how the virtual DOM works in React). Inside here, we have some new content to animate into view.
These pages are obviously identical until we hit that main tag. About Me Get in touch Get in touch Fill out this shiny form!. About Me Get in touch All about me I got a lot to say lemme tell ya. The /build output for these pages might look like this: Let's say we're animating between two pages that both use the same layout. How can I pull this off if I'm not using React or something similar? Since I'm not reloading the browser to load a new page, I can apply whatever page transitions I want while loading new content.Īs it stands, there's only one page transition across the site: sliding in from the bottom of the screen.īut as you can see, I only animate in the new page, while the navigation bar stays put. This feature is one of the main reasons for my " Single Page App" setup. You can think of this like fitting a bunch of lego bricks together, where data-page attributes are those little teeth that hold the bricks together 🧱 💨 Page transitions Neat table of contents Section 1 Section 2 Section 3 Very cool post! With text and such. Say I'm writing a post in cool-blog-post.md with a template like this: This lets me pull off animated page transitions, style scoping, JS scoping, and more! In short, this is an identifier I use to figure out how all my layout chains fit together. To understand how this system ties together, I'll need to explain one magical attribute. We'll explore how this works in the following sections! 🔖 The concept of For instance, contact.scss applies styles to the /contact page, and contact.mjs runs some JavaScript whenever the /contact page loads. This is how I "group" all my logic together by route. pug file, a scss file, and an mjs file of the same name. You'll also notice a general rhythm for all the route-name files: there's a. Utils # Helper JS functions used server and clientside * # Templates, styles, and scripts for *actual routes* on the site _main.mjs # 🧵 A magical file that makes the whole app work _includes # 🎒 Templates and SVG graphics *imported into* pages _layouts # 🗂 Templates, styles, and scripts *wrapping around* pages _data # 🗄 Data globally available to all pages Here's a breakdown of the folder hierarchy + naming conventions:Īssets # Dump for images, fonts, and icons eleventy.js file if you're so inclined, but that's beyond the scope of this README 😁 🗂 General file structure You can check out that configuration in the.
I wanted to stay on the bleeding edge of modern browser APIs.I wanted a single page app feel with sexy page transitions to boot ✨ This was not easy to pull off given the first goal, but not impossible!.So no React, Vue, Svelte, or even JQuery to be found. I did not want to lean on existing frameworks to make it work, mostly as a learning exercise.
I built this project with a few goals in mind:
Event listener iteration pug template full#
Well, this certainly ain't your grandma's Gatsby site! This thing is lightweight, framework-free, and full of custom configuration. You can check out DEV's API docs to pull from your personal account and see what happens 😁 🏆 Goals of this project
This is totally normal! Since blog posts previewed on the homepage are pulled from DEV, you'll need an environment variable to render them properly. You should also notice a softly thrown exception in your console. This will spin up a local development server using Browsersync with live reloading on file changes.
0 kommentar(er)
