![]() ![]() ![]() That’s the 11ty shortcode with a generated page that uses it. This makes everything more self-contained if we publish our component library as an npm package. When we run this, we’ll get a hot-reloading dev server that generates the component HTML on each change.Įagle-eyed readers will notice that we didn’t use Nunjucks, Liquid, or any of the usual suspects as the template language. With this in place, we can add a “build” command in the projects package.json file: "eleventy": "eleventy -serve", One step up, in the root of the 11ty site, we’ll create a catalog of all our components at src/index.md: We need this to be used in a page somewhere, so in the same component directory, we will need to add an 11ty page at src/header/index.md: Here is the header “component” at src/header/index.js: This registered an 11ty “shortcode” which we will treat as kind of a component. Now we’ll add 11ty, a shortcode, and start generating that HTML file.įirst, we need to add 11ty using: $ npm install -S setup 11ty, we need to add an. We’ve used the Storybook scaffold to generate a “Storybook for HTML” site, and provided one story for a “header” component. You have an 11ty sample site, you do your stuff, generate output, and Storybook reads it. “That’s just reading some HTML from disk!” And indeed it is. The repo has a cleaned-up check-in of the Storybook scaffold, plus the parts below. Here you can see an example of the story for a rendered “header” component. I’ve made a repo for you (look out for the Code on GitHub at each stage of this tutorial). Storybook makes setup easy by providing a scaffold that generates a sample project. With this, you write a function that gets called when you want the story’s HTML. ![]() Storybook for HTML, is Storybook’s solution for essentially any rendering it doesn’t handle. Is that the end of the story (pun intended)? Not quite yet. The attempts at workarounds? More painful. In fact, you can’t even read a file from disk. When Storybook renders the stories, it doesn’t have access to NodeJS and its API/library. ![]() So a piece of cake, right? I just write my render functions to call 11ty, get an HTML string, and feed it to the story?īzzzt. The secret idea behind it is: I want to use 11ty shortcodes as components in the workflow of component-driven development. It’s a productive, collaborative workflow. I can even hook these stories up to Jest and do automated testing. The stories get rendered into a “book” and folks can see them, read about them, etc. This lets me break my development down into components and write stories about each of them. I want a productive way to iterate on developing and discussing the ported UI.Įnter Storybook. Suffice it to say, we’re looking at slimming down the JS used, and Eleventy, aka 11ty, is a popular choice for static websites. I’m working on a Gatsby-less rewrite of the WebStorm Guide. For the purposes of this blog post, let’s set the scene. The unboxing video is a quick introduction. While it’s well-known, Storybook isn’t super well-known. It’s a little messy, but the end result is – surprisingly! – quite fun. But with Storybook for HTML, you can control the “component rendering” yourself. I introduced Storybook in my First Five on Storybook “unboxing” video.īut what if you want Storybook for a less-JS project, such as 11ty as a static site generator? Storybook is heavily-tilted towards framework projects – React, Vue, Angular, etc. It lets you organize all your components, and all their variations, in a productive workflow. Storybook is great for component-driven development. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |