From a85ed5b5ed3a55719b2c2e62c87e24903d143358 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kristj=C3=A1n=20Oddsson?= Date: Wed, 28 Dec 2022 18:11:28 +0000 Subject: [PATCH] No idea why this doesn't work --- .eleventy.js | 11 +++++ _includes/navigation.html | 32 +++++++++---- learn/index.md | 4 +- tutorial/index.md | 21 +++++++++ tutorial/setting-up.md | 86 ++++++++++++++++++++++++++++++++++ tutorial/tutorials.11tydata.js | 14 ++++++ tutorials/index.md | 6 --- tutorials/tutorials.json | 4 -- 8 files changed, 156 insertions(+), 22 deletions(-) create mode 100644 tutorial/index.md create mode 100644 tutorial/setting-up.md create mode 100644 tutorial/tutorials.11tydata.js delete mode 100644 tutorials/index.md delete mode 100644 tutorials/tutorials.json diff --git a/.eleventy.js b/.eleventy.js index 6dc16ce..d6a2dab 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -6,6 +6,7 @@ const glob = require("glob") const path = require("node:path") const highlight = require("@11ty/eleventy-plugin-syntaxhighlight") const dedent = require("dedent") +const util = require('node:util') module.exports = (eleventyConfig) => { eleventyConfig.addPlugin(css) @@ -39,6 +40,15 @@ module.exports = (eleventyConfig) => { .sort((a, b) => a.data.order - b.data.order) }) } + + eleventyConfig.addCollection("tutorial", (api) => { + const items = api + .getFilteredByGlob("tutorial/**/*.md") + .filter((item) => item.data.group === "Tutorial") + .sort((a, b) => a.data.order - b.data.order) + console.log(items) + return items; + }) const icon = (icon) => `` @@ -64,6 +74,7 @@ module.exports = (eleventyConfig) => { } const menu = (first, ...rest) => [menumap[first] || `${first}`, ...rest].join(icon("chevron-right")) + eleventyConfig.addShortcode("json", util.inspect) eleventyConfig.addShortcode("icon", icon) eleventyConfig.addShortcode("shortcut", shortcut) eleventyConfig.addShortcode("menu", menu) diff --git a/_includes/navigation.html b/_includes/navigation.html index cd05be9..7e5abb8 100644 --- a/_includes/navigation.html +++ b/_includes/navigation.html @@ -1,17 +1,29 @@ diff --git a/learn/index.md b/learn/index.md index 4ff3e34..fee085a 100644 --- a/learn/index.md +++ b/learn/index.md @@ -1,7 +1,7 @@ --- order: 1 -group: Getting Started -title: Introduction +group: getting started +title: introduction --- ## What are Web Components? diff --git a/tutorial/index.md b/tutorial/index.md new file mode 100644 index 0000000..48618e7 --- /dev/null +++ b/tutorial/index.md @@ -0,0 +1,21 @@ +--- +order: 1 +group: Tutorial +title: Introduction +--- + +Welcome to this tutorial on building a Mastodon toot embed element using Web Components! In this tutorial, we will walk through the process of creating a custom element that can be used to easily display Mastodon toots on any website or application. + +Our Mastodon toot embed element will allow users to share and display toots from the Mastodon social network, and will include features such as the ability to show or hide the user handle and avatar image, as well as the option to customize the appearance of the toot. + +Here's a example of a Mastodon toot embed. We'll be making something similar. + + + +We will start by setting up the project files and dependencies, and then move on to defining the Mastodon toot embed element class, extending the HTMLElement class, and registering the element with the browser. We will also cover adding properties and methods to the element, using a shadow DOM for improved styling and separation of concerns, and adding interactivity to the element. + +Finally, we will look at integrating the Mastodon toot embed element with a real-world project, including tips for building and using the element in a production environment. + +Throughout this tutorial, we will explore the various features and capabilities of Web Components, and how they can be used to build reusable and modular components for the web. + +So let's get started! diff --git a/tutorial/setting-up.md b/tutorial/setting-up.md new file mode 100644 index 0000000..547d2ee --- /dev/null +++ b/tutorial/setting-up.md @@ -0,0 +1,86 @@ +--- +order: 2 +group: Tutorial +title: Setting Up Your Environment +--- + +Welcome to this tutorial on using Web Components to build a custom element for embedding Mastodon toots! In this tutorial, we will walk through the process of creating a custom element that can be used to display Mastodon toots on any website or application. + +The Mastodon toot embed element will allow users to easily share and display toots from the Mastodon social network on their own websites. It will include features such as the ability to show or hide the user handle and avatar image, as well as the option to customize the appearance of the toot. + +To get started, we will need to set up the project files and dependencies. This will include creating the files needed for the element and a demo site to showcase the Web Component. + +Once the project is set up, we will move on to defining the Mastodon toot embed element class, extending the HTMLElement class, and registering the element with the browser using the customElements.define() method. + +If you don't want to do all the manual work you can use [this GitHub template](https://github.com/github/custom-element-boilerplate/) which should have the project set up in the correct way. I'd still reccomend setting the project up manually as you can tweak systems as you set them up. + +I hope you're excited to get started! Let's begin by setting up the project files and dependencies. + +First, create a new project folder and navigate to it in your terminal. Then, initialize a new npm project by running the following command: + +`npm init -y` + +This will create a package.json file in your project folder. + +Next, create the following file and folder structure: + +``` +├── package.json +├── index.html +├── README.md +└── src + └── toot-embed-element.js +``` + +In the `src` folder, create a new file called `toot-embed-element.js`. This file will contain the logic and behavior for your Mastodon toot embed element. + +To get started, you can use the following template as a starting point for your element class: + +```js +class TootEmbedElement extends HTMLElement { + constructor() { + super(); + } + + connectedCallback() { + // This method is called when the element is added to the DOM + } + + disconnectedCallback() { + // This method is called when the element is removed from the DOM + } + + static get observedAttributes() { + // This method returns an array of attribute names to be observed for changes + } + + attributeChangedCallback(attrName, oldVal, newVal) { + // This method is called when an observed attribute has been changed + } +} +customElements.define('toot-embed', TootEmbedElement); +``` + +This boilerplate code defines a basic custom element class that extends the HTMLElement class, and includes the `connectedCallback`, `disconnectedCallback`, and `observedAttributes` methods. The `connectedCallback` method is called when the element is added to the DOM, the `disconnectedCallback` method is called when the element is removed from the DOM, and the `observedAttributes` method is called when an observed attribute changes. + +To register the element with the browser, we use the `customElements.define()` method, passing in the element name and the element class as arguments. + +In your `index.html` file, include a script tag to import your `toot-embed-element.js` file, and a link tag to import any CSS styles that you want to apply to your element. For example: + +```html + + + + <toot-embed> demo + + + +

Here's a example toot:

+ + + +``` + +With these steps, you should now have a project setup with a basic Mastodon toot embed element that can be used to display toots from the Mastodon social network on any website or application. + +The Web Component of course doesn't do anything yet. We need to implement the actual functionality and render the contents on the page. diff --git a/tutorial/tutorials.11tydata.js b/tutorial/tutorials.11tydata.js new file mode 100644 index 0000000..7d575c3 --- /dev/null +++ b/tutorial/tutorials.11tydata.js @@ -0,0 +1,14 @@ +module.exports = { + layout: "learn.html", + tags: ["tutorial"], + eleventyComputed: { + nextGroup(data) { + const i = data.groups.indexOf(data.group) + return i >= 0 ? data.groups[i + 1] : null + }, + prevGroup(data) { + const i = data.groups.indexOf(data.group) + return i >= 0 ? data.groups[i - 1] : null + }, + }, +} diff --git a/tutorials/index.md b/tutorials/index.md deleted file mode 100644 index 7930c74..0000000 --- a/tutorials/index.md +++ /dev/null @@ -1,6 +0,0 @@ ---- ---- - -There doesn't appear to be anything here! - -{% stub %} diff --git a/tutorials/tutorials.json b/tutorials/tutorials.json deleted file mode 100644 index 4f780fe..0000000 --- a/tutorials/tutorials.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "layout": "tutorials.html", - "tags": ["tutorials"] -}