Bento grid

bau/bau.d.ts

@@ -135,118 +135,12 @@ export type TagFunc<Result extends HTMLElement> = (
   ...rest: readonly ChildDom[]
 ) => Result;
 
-interface TagsBase {
-  readonly [key: string]: TagFunc<HTMLElement>;
-}
-
-interface Tags extends TagsBase {
-  // Register known element types
-  // Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
-
-  // Main root
-  readonly html: TagFunc<HTMLHtmlElement>;
-
-  // Document metadata
-  readonly base: TagFunc<HTMLBaseElement>;
-  readonly head: TagFunc<HTMLHeadElement>;
-  readonly link: TagFunc<HTMLLinkElement>;
-  readonly meta: TagFunc<HTMLMetaElement>;
-  readonly style: TagFunc<HTMLStyleElement>;
-  readonly title: TagFunc<HTMLTitleElement>;
-
-  // Sectioning root
-  readonly body: TagFunc<HTMLBodyElement>;
-
-  // Content sectioning
-  readonly h1: TagFunc<HTMLHeadingElement>;
-  readonly h2: TagFunc<HTMLHeadingElement>;
-  readonly h3: TagFunc<HTMLHeadingElement>;
-  readonly h4: TagFunc<HTMLHeadingElement>;
-  readonly h5: TagFunc<HTMLHeadingElement>;
-  readonly h6: TagFunc<HTMLHeadingElement>;
-
-  // Text content
-  readonly blockquote: TagFunc<HTMLQuoteElement>;
-  readonly div: TagFunc<HTMLDivElement>;
-  readonly dl: TagFunc<HTMLDListElement>;
-  readonly hr: TagFunc<HTMLHRElement>;
-  readonly li: TagFunc<HTMLLIElement>;
-  readonly menu: TagFunc<HTMLMenuElement>;
-  readonly ol: TagFunc<HTMLOListElement>;
-  readonly p: TagFunc<HTMLParagraphElement>;
-  readonly pre: TagFunc<HTMLPreElement>;
-  readonly ul: TagFunc<HTMLUListElement>;
-
-  // Inline text semantics
-  readonly a: TagFunc<HTMLAnchorElement>;
-  readonly br: TagFunc<HTMLBRElement>;
-  readonly data: TagFunc<HTMLDataElement>;
-  readonly q: TagFunc<HTMLQuoteElement>;
-  readonly span: TagFunc<HTMLSpanElement>;
-  readonly time: TagFunc<HTMLTimeElement>;
-
-  // Image and multimedia
-  readonly area: TagFunc<HTMLAreaElement>;
-  readonly audio: TagFunc<HTMLAudioElement>;
-  readonly img: TagFunc<HTMLImageElement>;
-  readonly map: TagFunc<HTMLMapElement>;
-  readonly track: TagFunc<HTMLTrackElement>;
-  readonly video: TagFunc<HTMLVideoElement>;
-
-  // Embedded content
-  readonly embed: TagFunc<HTMLEmbedElement>;
-  readonly iframe: TagFunc<HTMLIFrameElement>;
-  readonly object: TagFunc<HTMLObjectElement>;
-  readonly picture: TagFunc<HTMLPictureElement>;
-  readonly source: TagFunc<HTMLSourceElement>;
-
-  // Scripting
-  readonly canvas: TagFunc<HTMLCanvasElement>;
-  readonly script: TagFunc<HTMLScriptElement>;
-
-  // Demarcating edits
-  readonly del: TagFunc<HTMLModElement>;
-  readonly ins: TagFunc<HTMLModElement>;
-
-  // Table content
-  readonly caption: TagFunc<HTMLTableCaptionElement>;
-  readonly col: TagFunc<HTMLTableColElement>;
-  readonly colgroup: TagFunc<HTMLTableColElement>;
-  readonly table: TagFunc<HTMLTableElement>;
-  readonly tbody: TagFunc<HTMLTableSectionElement>;
-  readonly td: TagFunc<HTMLTableCellElement>;
-  readonly tfoot: TagFunc<HTMLTableSectionElement>;
-  readonly th: TagFunc<HTMLTableCellElement>;
-  readonly thead: TagFunc<HTMLTableSectionElement>;
-  readonly tr: TagFunc<HTMLTableRowElement>;
-
-  // Forms
-  readonly button: TagFunc<HTMLButtonElement>;
-  readonly datalist: TagFunc<HTMLDataListElement>;
-  readonly fieldset: TagFunc<HTMLFieldSetElement>;
-  readonly form: TagFunc<HTMLFormElement>;
-  readonly input: TagFunc<HTMLInputElement>;
-  readonly label: TagFunc<HTMLLabelElement>;
-  readonly legend: TagFunc<HTMLLegendElement>;
-  readonly meter: TagFunc<HTMLMeterElement>;
-  readonly optgroup: TagFunc<HTMLOptGroupElement>;
-  readonly option: TagFunc<HTMLOptionElement>;
-  readonly output: TagFunc<HTMLOutputElement>;
-  readonly progress: TagFunc<HTMLProgressElement>;
-  readonly select: TagFunc<HTMLSelectElement>;
-  readonly textarea: TagFunc<HTMLTextAreaElement>;
-
-  // Interactive elements
-  readonly details: TagFunc<HTMLDetailsElement>;
-  readonly dialog: TagFunc<HTMLDialogElement>;
-
-  // Web Components
-  readonly slot: TagFunc<HTMLSlotElement>;
-  readonly template: TagFunc<HTMLTemplateElement>;
-}
+type Tags = Readonly<Record<string, TagFunc<Element>>> & {
+  [K in keyof HTMLElementTagNameMap]: TagFunc<HTMLElementTagNameMap[K]>;
+};
 
 declare function state<T>(initVal: T): State<T>;
-declare function tagsNS(namespaceURI: string): TagsBase;
+declare function tagsNS(namespaceURI: string): Tags;
 declare function bind(input: BindInput): HTMLElement;
 declare function derive<T>(computed: () => T): ReadonlyState<T>;
 declare function loop<T, TElement extends HTMLElement>(

examples/bento-grid/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/bento-grid/.npmrc

@@ -0,0 +1,2 @@
+save-exact = true
+package-lock = false

examples/bento-grid/README.md

@@ -0,0 +1,23 @@
+# FrontendMentor Bento Grid
+
+Here is the implementation in _Bau.js_ of the [Frontend Mentor Bento Grid code challenge](https://www.frontendmentor.io/challenges/bento-grid-RMydElrlOj)
+
+## Workflow
+
+Install the dependencies:
+
+```sh
+npm install
+```
+
+Start a development server:
+
+```sh
+npm run dev
+```
+
+Build a production version:
+
+```sh
+npm run build
+```

examples/bento-grid/bentoGrid.js

@@ -0,0 +1,211 @@
+export default function (context) {
+  const { bau, css } = context;
+  const { h1, picture, em, img, p, i, strong, article, section } = bau.tags;
+
+  const className = css`
+    min-height: 95vh;
+    max-width: 900px;
+    display: grid;
+    gap: 1rem;
+    margin: 1rem;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-areas:
+      "section7 section1 section1 section4"
+      "section7 section2 section3 section4"
+      "section8 section2 section3 section4"
+      "section8 section6 section5 section5";
+
+    @media (max-width: 640px) {
+      grid-template-columns: 1fr;
+      grid-template-rows: auto;
+      grid-template-areas: "section1" "section2" "section3" "section4" "section5" "section6" "section7" "section8";
+    }
+
+    section {
+      background-color: var(--clr-white);
+      min-height: 100px;
+      min-width: 100px;
+      border-radius: 0.8rem;
+      padding: 1rem;
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      overflow: hidden;
+      h1 {
+      }
+      &.section1 {
+        grid-area: section1;
+        text-align: center;
+        background-color: var(--clr-primary-500);
+        color: var(--clr-white);
+        align-items: center;
+        h1 {
+          font-size: 2rem;
+          strong {
+            color: var(--clr-secondary-500);
+          }
+        }
+        img {
+          max-width: 200px;
+        }
+      }
+      &.section2 {
+        grid-area: section2;
+      }
+
+      &.section3 {
+        background-color: var(--clr-secondary-500);
+        grid-area: section3;
+        padding-bottom: 0;
+        justify-content: space-between;
+        picture {
+          max-height: 100px;
+          overflow: hidden;
+        }
+        img {
+          max-width: 250px;
+        }
+      }
+
+      &.section4 {
+        grid-area: section4;
+        background-color: var(--clr-primary-100);
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+        @media (max-width: 640px) {
+          align-items: center;
+        }
+
+        img {
+          max-height: 200px;
+        }
+        p {
+          font-size: smaller;
+        }
+      }
+      &.section5 {
+        grid-area: section5;
+        background-color: var(--clr-primary-500);
+        color: var(--clr-white);
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        @media (max-width: 640px) {
+          flex-direction: column;
+        }
+        img {
+          max-width: 200px;
+          max-height: 200px;
+        }
+        h1 {
+          text-align: center;
+        }
+      }
+
+      &.section6 {
+        grid-area: section6;
+        h1 {
+          font-size: xx-large;
+        }
+        img {
+          max-width: 300px;
+        }
+      }
+
+      &.section7 {
+        grid-area: section7;
+        background-color: var(--clr-secondary-100);
+        align-items: center;
+        h1 {
+          font-size: 1.7rem;
+          font-weight: 400;
+        }
+        img {
+          max-width: 150px;
+        }
+        em {
+          color: var(--clr-primary-500);
+        }
+      }
+
+      &.section8 {
+        grid-area: section8;
+        background-color: var(--clr-secondary-500);
+        h1 {
+          font-size: 1.7rem;
+          font-weight: 400;
+        }
+      }
+    }
+  `;
+
+  return function bentoGrid() {
+    return article(
+      { class: className },
+      section(
+        { class: "section1" },
+        h1("Social Media ", strong("10x"), i(" Faster"), " with AI"),
+        img({
+          src: "./assets/images/illustration-five-stars.webp",
+        }),
+        p("Over 4,000 5-star reviews")
+      ),
+      section(
+        { class: "section2" },
+        img({
+          src: "./assets/images/illustration-multiple-platforms.webp",
+        }),
+        h1("Manage multiple accounts and platforms.")
+      ),
+      section(
+        { class: "section3" },
+        h1("Maintain a consistent posting schedule."),
+        picture(
+          img({
+            src: "./assets/images/illustration-consistent-schedule.webp",
+          })
+        )
+      ),
+      section(
+        { class: "section4" },
+        h1("Schedule to social media."),
+        img({
+          src: "./assets/images/illustration-schedule-posts.webp",
+        }),
+        p(
+          "Optimize post timings to publish content at the perfect time for your audience."
+        )
+      ),
+      section(
+        { class: "section5" },
+        img({
+          src: "./assets/images/illustration-grow-followers.webp",
+        }),
+        h1("Grow followers with non-stop content.")
+      ),
+      section(
+        { class: "section6" },
+        h1("> 56%"),
+        p("faster audience growth"),
+        img({
+          src: "./assets/images/illustration-audience-growth.webp",
+        })
+      ),
+      section(
+        { class: "section7" },
+        h1("Create and schedule content ", em("quicker"), "."),
+        img({
+          src: "./assets/images/illustration-create-post.webp",
+        })
+      ),
+      section(
+        { class: "section8" },
+        h1("Write your content using AI."),
+        img({
+          src: "./assets/images/illustration-ai-content.webp",
+        })
+      )
+    );
+  };
+}