From 32192442280640e82c281c9f2c15923f949c83d0 Mon Sep 17 00:00:00 2001 From: Brian Perry Date: Fri, 25 Oct 2024 08:47:24 -0500 Subject: [PATCH 1/5] Scaffold initial post --- src/components/BaseHead.astro | 4 ++-- src/content/posts/2024/html-web-components-drupal.md | 10 ++++++++++ 2 files changed, 12 insertions(+), 2 deletions(-) create mode 100644 src/content/posts/2024/html-web-components-drupal.md diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro index 9ea1284..4e33ace 100644 --- a/src/components/BaseHead.astro +++ b/src/components/BaseHead.astro @@ -24,7 +24,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site); const { title, description, image = "/og_image.jpg" } = Astro.props; --- - + diff --git a/src/content/posts/2024/html-web-components-drupal.md b/src/content/posts/2024/html-web-components-drupal.md new file mode 100644 index 0000000..33f2143 --- /dev/null +++ b/src/content/posts/2024/html-web-components-drupal.md @@ -0,0 +1,10 @@ +--- +title: HTML Web Components are a Great Fit for Drupal +description: Paired with Single Directory Components, HTML Web Components are an excellent way to provide well encapsulated interactivity when needed. +author: Brian +date: 2024-10-25 +tags: + - drupal +--- + +Recently I've been working on my first honest to god Drupal theme in years after primarily working in decoupled front ends. From 41f20908d43190a9a5ca652af1dc876fc4cb55cd Mon Sep 17 00:00:00 2001 From: Brian Perry Date: Mon, 18 Nov 2024 10:35:08 -0600 Subject: [PATCH 2/5] Post drafting --- src/components/BaseHead.astro | 4 +- .../posts/2024/html-web-components-drupal.md | 93 ++++++++++++++++++- 2 files changed, 93 insertions(+), 4 deletions(-) diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro index 4e33ace..9ea1284 100644 --- a/src/components/BaseHead.astro +++ b/src/components/BaseHead.astro @@ -24,7 +24,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site); const { title, description, image = "/og_image.jpg" } = Astro.props; --- - + diff --git a/src/content/posts/2024/html-web-components-drupal.md b/src/content/posts/2024/html-web-components-drupal.md index 33f2143..a936ede 100644 --- a/src/content/posts/2024/html-web-components-drupal.md +++ b/src/content/posts/2024/html-web-components-drupal.md @@ -2,9 +2,98 @@ title: HTML Web Components are a Great Fit for Drupal description: Paired with Single Directory Components, HTML Web Components are an excellent way to provide well encapsulated interactivity when needed. author: Brian -date: 2024-10-25 +date: 2024-11-17 tags: - drupal --- -Recently I've been working on my first honest to god Drupal theme in years after primarily working in decoupled front ends. +Recently I've been working on my first honest to God Drupal theme in years after primarily building decoupled front ends. This also proved to be the first time I could really put [Single Directory Components](https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components) (SDCs) to the test, after following along with development and experimenting in small side projects. I found pretty quickly that SDCs offered a bridge to the component based workflow I was familiar with that felt pretty comfortable. Further more, as my workflow established itself an interesting pattern emerged around progressive enhancement and custom elements. + +### Initial Component Scaffolding + +When I identified a component that I needed to build, I'd start by creating the simplest possible representation of it as a single directory component. First I'd create a `component.yml` file in the `components` directory of my theme. The simplest possible version would be. + +```yml +# components/header/header.component.yml +name: Header +props: + type: object + properties: {} +``` + +That's a component with no props or slots, so basically not a component at all. But it exists, which is still a small victory. + +We can take the step of adding some obvious slots since we're here: + +```yml +# components/header/header.component.yml +name: Header +props: + type: object + properties: {} +slots: + logo: + title: Logo + description: Site logo + content: + title: Content + description: Header content +``` + +Those slots are quite broad, but in my work with SDCs thus far I've found that using Drupal's markup where you can is usually a good idea. So often start with broad slots and narrow them down as needed. We'll also see in a bit how drastically altering markup for things like images or menus often isn't necessary. + +At this point, I'd add a bare bones twig template to start getting something on the screen. But this is also where I found myself bringing a little more flavor from my framework component workflow to Drupal. + +### I Want My Cool Custom Tag + +If I was using a framework like React, I'd create my header component and be off to the races. Something like: + +```jsx +// Header.js +import React from "react"; + +export const Header = ({ logo, content }) => ( +
+
{logo}
+
{content}
+
+); +``` + +And then I'd have a `
` component that I could import and use anywhere in my app. + +Single Directory Components end up getting close to that. + +```twig +{# components/header/header.html.twig #} +
+ {% block logo %}{%endblock%} + {% block content %}{%endblock%} +
+``` + +And then I'd use it in a template like: + +```twig +{# templates/page.html.twig #} +{% embed 'mytheme:header' %} + {% block logo %}{# my logo markup #}{% endblock %} + {% block content %} + {# my content markup - {{page.header}} for example #} + {% endblock %} +{% endembed %} +``` + +That's nice, but I found that combining this with custom elements was a great way to get a little closer to the React experience, and also had some nice side effects. + +### TAC CSS Methodology + +... + +### HTML Web Components + +... + +### One WYSIWG-Related Catch + +Using custom elements in CKEditor is tricky. Or maybe I just don't know how to do it. From bab29acb66dc1f64adb38537c763439e9f213cfd Mon Sep 17 00:00:00 2001 From: Brian Perry Date: Sat, 18 Jan 2025 17:46:47 -0600 Subject: [PATCH 3/5] Repurpose post as My SDC Workflow --- .../my-sdc-workflow.md} | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) rename src/content/posts/{2024/html-web-components-drupal.md => 2025/my-sdc-workflow.md} (93%) diff --git a/src/content/posts/2024/html-web-components-drupal.md b/src/content/posts/2025/my-sdc-workflow.md similarity index 93% rename from src/content/posts/2024/html-web-components-drupal.md rename to src/content/posts/2025/my-sdc-workflow.md index a936ede..0bbac7c 100644 --- a/src/content/posts/2024/html-web-components-drupal.md +++ b/src/content/posts/2025/my-sdc-workflow.md @@ -1,8 +1,8 @@ --- -title: HTML Web Components are a Great Fit for Drupal -description: Paired with Single Directory Components, HTML Web Components are an excellent way to provide well encapsulated interactivity when needed. +title: My Single Directory Components Workflow +description: A walkthrough of the workflow I used to build a custom Drupal theme that relies heavily on Single Directory Components author: Brian -date: 2024-11-17 +date: 2025-01-18 tags: - drupal --- From d0bcce1dc287fc8dd91461dfeba63322250cce0b Mon Sep 17 00:00:00 2001 From: Brian Perry Date: Tue, 21 Jan 2025 08:28:30 -0600 Subject: [PATCH 4/5] Additional drafting --- src/content/posts/2025/my-sdc-workflow.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/content/posts/2025/my-sdc-workflow.md b/src/content/posts/2025/my-sdc-workflow.md index 0bbac7c..d801f87 100644 --- a/src/content/posts/2025/my-sdc-workflow.md +++ b/src/content/posts/2025/my-sdc-workflow.md @@ -7,7 +7,11 @@ tags: - drupal --- -Recently I've been working on my first honest to God Drupal theme in years after primarily building decoupled front ends. This also proved to be the first time I could really put [Single Directory Components](https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components) (SDCs) to the test, after following along with development and experimenting in small side projects. I found pretty quickly that SDCs offered a bridge to the component based workflow I was familiar with that felt pretty comfortable. Further more, as my workflow established itself an interesting pattern emerged around progressive enhancement and custom elements. +Recently I've been working on my first honest to God Drupal theme in years after primarily building decoupled front ends. This also proved to be the first time I could really put [Single Directory Components](https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components) (SDCs) to the test, after following along with development and experimenting in small side projects. I found pretty quickly that SDCs offered a bridge to the component based workflow I was familiar with that felt pretty comfortable. Further more, as my workflow established itself, an interesting pattern emerged around progressive enhancement and custom elements. + +### Identify Your Components + +This is kind of self explanatory, but is still an important part of the process. And it isn't necessarily Drupal specific. Look at your design, and identify the components that you'll need to build. I used astro for prototyping. ### Initial Component Scaffolding From 10882e2fcd6fbb80c3e6a28cd39f36844aab5c02 Mon Sep 17 00:00:00 2001 From: Brian Perry Date: Sat, 25 Jan 2025 18:25:37 -0600 Subject: [PATCH 5/5] Ongoing SDC workflow drafting --- src/content/posts/2025/my-sdc-workflow.md | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/content/posts/2025/my-sdc-workflow.md b/src/content/posts/2025/my-sdc-workflow.md index d801f87..ab4a612 100644 --- a/src/content/posts/2025/my-sdc-workflow.md +++ b/src/content/posts/2025/my-sdc-workflow.md @@ -9,11 +9,22 @@ tags: Recently I've been working on my first honest to God Drupal theme in years after primarily building decoupled front ends. This also proved to be the first time I could really put [Single Directory Components](https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components) (SDCs) to the test, after following along with development and experimenting in small side projects. I found pretty quickly that SDCs offered a bridge to the component based workflow I was familiar with that felt pretty comfortable. Further more, as my workflow established itself, an interesting pattern emerged around progressive enhancement and custom elements. -### Identify Your Components +### Initial Prototyping -This is kind of self explanatory, but is still an important part of the process. And it isn't necessarily Drupal specific. Look at your design, and identify the components that you'll need to build. I used astro for prototyping. +When possible, I prefer to do initial prototyping outside of Drupal. This often allows front end work to proceed before the back end functionality it depends on has been implemented. It also allows me to work in a lighter weight environment, and to focus on the design and user experience without the constraints of a CMS. -### Initial Component Scaffolding +My current tool of choice for this is [Astro](https://astro.build/). But maybe for you it is [Storybook](https://storybook.js.org/), or a simple HTML file. The important thing is that it is a familiar environment that allows you to iterate as quickly as possible. And ideally this should also be something that you can easily deploy somewhere for others to see and provide early feedback. + +At this point, I also include a few libraries or frameworks that I know I'll be using in the final build. For many, this might be something like adding [Tailwind](https://tailwindcss.com/). For me, I currently lean on the following in custom Drupal themes: + +- [Pico](https://picocss.com/) - a minimal CSS framework based on semantic HTML. +- [Open Props](https://open-props.style/) - pre-packaged CSS variables for common design tokens. + +With that out of the way, pour over your design and identify the reusable components that you'll need to build. + +I won't get too deep into the Astro worflow, but in general you have your HTML, CSS, Props, etc which you'll find translate to your SDCs nicely. + +### Component Scaffolding When I identified a component that I needed to build, I'd start by creating the simplest possible representation of it as a single directory component. First I'd create a `component.yml` file in the `components` directory of my theme. The simplest possible version would be.