Skip to content

Commit dc06ebd

Browse files
RoyalIcingRoyalIcing
committed
Reuse multi-column layout
1 parent e960395 commit dc06ebd

File tree

8 files changed

+76
-55
lines changed

8 files changed

+76
-55
lines changed

‎assets/js/app.js

+33-1
Original file line numberDiff line numberDiff line change
@@ -80,4 +80,36 @@ window.customElements.define('loading-stopwatch', class extends HTMLElement {
8080
this.interval = undefined;
8181
}
8282
}
83-
})
83+
});
84+
85+
customElements.define('navigable-article', class extends HTMLElement {
86+
constructor() {
87+
super();
88+
89+
const document = this.ownerDocument;
90+
91+
function El(base, props, ...children) {
92+
const el = typeof base === 'string' ? document.createElement(base) : base.cloneNode(false);
93+
Object.assign(el, props);
94+
el.append(...children);
95+
return el;
96+
}
97+
98+
const aside = this.querySelector('aside');
99+
aside.hidden = false;
100+
101+
const navItemsSlot = this.querySelector('slot[name=nav-items]');
102+
const navItemsTemplates = navItemsSlot.querySelector('template').content;
103+
const linkTemplate = navItemsTemplates.querySelector('a');
104+
const ulTemplate = navItemsTemplates.querySelector('ul');
105+
const liTemplate = navItemsTemplates.querySelector('li');
106+
107+
const article = this.querySelector('article');
108+
const headings = article.querySelectorAll('h2');
109+
const items = Array.from(headings, (headingEl) => {
110+
return El(liTemplate, {}, El(linkTemplate, { href: '#' + headingEl.id }, headingEl.innerText));
111+
});
112+
113+
navItemsSlot.append(El(ulTemplate, {}, ...items));
114+
}
115+
});

‎lib/components_guide_web/templates/react_typescript/_nav.html.heex

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<nav class="">
1+
<nav>
22
<p class="px-2 pb-6 mb-6 text-5xl text-blue-200 border-b-4 border-blue-200"><%= "React & TypeScript Guide" %></p>
33
<ul class="text-xl" data-links="block p-2 current-page-bold">
44
<li><%= link(@conn, "Fundamentals", to: "/react+typescript") %></li>

‎lib/components_guide_web/templates/react_typescript/_top.html.eex

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<div class="mx-auto max-w-4xl">
2-
<h1 y-y x-x=md class="pt-8 row space-x-4 text-4xl text-center font-bold leading-tight">
2+
<h2 y-y x-x=md class="pt-8 row space-x-4 text-4xl text-center font-bold leading-tight">
33
<div class="row">
44
<img class="inline-block mr-2" src="<%= "https://cdn.jsdelivr.net/gh/gilbarbara/logos@618de63f309bbf56b67364fd6a441cbbf79403cc/logos/react.svg" %>" alt="React logo" width=48 height=48>
55
<span class="mr-2 text-3xl">❤️</span>
66
<img class="inline-block mr-2" src="<%= "https://cdn.jsdelivr.net/gh/gilbarbara/logos@02e637e09b55966e802dfe0bc93595594e0214bb/logos/typescript-icon.svg" %>" alt="TypeScript logo" width=48 height=48>
77
</div>
88
<span><%= "React & TypeScript Guide" %></span>
9-
</h1>
9+
</h2>
1010
<nav class="pt-6 pb-4">
1111
<ul y-y x-x=md class="flex-wrap gap-4 text-xl list-none font-bold gap-y-6" data-links="p-3">
1212
<li><%= link("Fundamentals", to: '/react+typescript') %>

‎lib/components_guide_web/templates/react_typescript/index.html.eex

-37
Original file line numberDiff line numberDiff line change
@@ -24,43 +24,6 @@
2424
</div>
2525
</navigable-article>
2626

27-
<script type="module">
28-
customElements.get('navigable-article') || customElements.define('navigable-article',
29-
class extends HTMLElement {
30-
constructor() {
31-
super();
32-
33-
const document = this.ownerDocument;
34-
35-
function El(base, props, ...children) {
36-
const el = typeof base === 'string' ? document.createElement(base) : base.cloneNode(false);
37-
Object.assign(el, props);
38-
el.append(...children);
39-
return el;
40-
}
41-
42-
const article = this.querySelector('article');
43-
const aside = this.querySelector('aside');
44-
45-
aside.hidden = false;
46-
47-
const navItemsSlot = this.querySelector('slot[name=nav-items]');
48-
const navItemsTemplates = navItemsSlot.querySelector('template').content;
49-
const linkTemplate = navItemsTemplates.querySelector('a');
50-
const ulTemplate = navItemsTemplates.querySelector('ul');
51-
const liTemplate = navItemsTemplates.querySelector('li');
52-
53-
const headings = article.querySelectorAll('h2');
54-
const items = Array.from(headings, (headingEl) => {
55-
return El(liTemplate, {}, El(linkTemplate, { href: '#' + headingEl.id }, headingEl.innerText));
56-
});
57-
58-
navItemsSlot.append(El(ulTemplate, {}, ...items));
59-
}
60-
}
61-
);
62-
</script>
63-
6427
<div class="bg-white" hidden>
6528
<section class="container pt-8 pb-16 text-2xl">
6629
<article class="mb-8">

‎lib/components_guide_web/templates/robust_javascript_interactivity/_nav.html.eex

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
<nav class="pt-6 pb-4">
2-
<ul y-y x-x=md class="flex-wrap gap-4 text-xl font-bold" data-links="p-3">
1+
<nav>
2+
<p class="px-2 pb-6 mb-6 text-5xl text-blue-200 border-b-4 border-blue-200"><%= "Robust JavaScript Interactivity" %></p>
3+
<ul class="text-xl" data-links="block p-2 current-page-bold">
34
<li><%= link("What goes wrong?", to: '/robust-javascript') %>
45
<li><%= link("Idempotency", to: '/robust-javascript/idempotent-javascript-operations') %>
56
</ul>

‎lib/components_guide_web/templates/robust_javascript_interactivity/_top.html.eex

-7
This file was deleted.

‎lib/components_guide_web/templates/robust_javascript_interactivity/_top.html.heex

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<div class="mx-auto max-w-4xl">
2+
<h2 y-y x-x="md" class="pt-8 row space-x-4 text-4xl text-center font-bold leading-tight">
3+
<span class="mr-1 text-5xl">🫵🏾🔨</span>
4+
<span><%= "Robust JavaScript Interactivity" %></span>
5+
</h2>
6+
<nav class="pt-6 pb-4">
7+
<ul y-y x-x="md" class="flex-wrap gap-4 text-xl list-none font-bold gap-y-6" data-links="p-3">
8+
<li><.link href="/robust-javascript">What goes wrong?</.link></li>
9+
<li><.link href="/robust-javascript/idempotent-javascript-operations">Idempotency</.link></li>
10+
</ul>
11+
</nav>
12+
</div>

‎lib/components_guide_web/templates/robust_javascript_interactivity/index.html.eex

+25-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,25 @@
1-
<%= render view_module(@conn), "_header.html" %>
2-
3-
<article class="prose md:prose-xl prose-invert max-w-4xl mx-auto py-16">
4-
<%= render(view_module(@conn), @article <> ".html", conn: @conn) %>
5-
</article>
1+
<navigable-article class="flex flex-col">
2+
<div class="mx-auto grid-flow-col md:grid md:grid-cols-[20rem_minmax(0,var(--max-width))] xl:grid-cols-[20rem_minmax(0,var(--max-width))_18rem] gap-8" style="--max-width: 46em">
3+
<div class="md:sticky top-0 md:h-screen pl-4 pt-16 text-white">
4+
<%= render view_module(@conn), "_nav.html", conn: @conn %>
5+
</div>
6+
<article class="text-white bg-gray-900 px-4 md:px-0">
7+
<div class="prose md:prose-xl prose-invert max-w-4xl mx-auto py-16">
8+
<%= render(view_module(@conn), @article <> ".html", conn: @conn) %>
9+
</div>
10+
</article>
11+
<aside class="sticky top-0 h-screen hidden xl:block" hidden>
12+
<nav class="pt-16 text-gray-200">
13+
<div class="pl-5 pb-2 font-bold uppercase text-white">On this page</div>
14+
<slot name="nav-items">
15+
<template>
16+
<ul class="list-none">
17+
<li class="border-l-4 border-gray-800 hover:border-blue-400"></li>
18+
</ul>
19+
<a href="#" class="inline-flex py-1 pl-4 hover:text-blue-400"></a>
20+
</template>
21+
</slot>
22+
</nav>
23+
</aside>
24+
</div>
25+
</navigable-article>

0 commit comments

Comments
 (0)