Skip to content

Update docs layout #97

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Update docs layout #97

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e8c91c0
Update navigation styles
stormwarning Mar 28, 2025
ecf7477
Update page header styles
stormwarning Mar 28, 2025
ac8f854
Update content styles
stormwarning Mar 31, 2025
9d34190
Add breadcrumb and site structure styles
stormwarning Mar 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 13 additions & 5 deletions docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,23 @@
"private": true,
"type": "module",
"scripts": {
"build": "eleventy --config=eleventy.config.js",
"dev": "TAILWIND_MODE=watch eleventy --config=eleventy.config.js --serve"
"build": "run-s build:*",
"build:11ty": "npx @11ty/eleventy",
"build:css": "npx @tailwindcss/cli -i ./src/assets/main.css -o ./dist/assets/styles.css",
"build:old": "eleventy --config=eleventy.config.js",
"dev": "run-p start:*",
"dev:old": "TAILWIND_MODE=watch npx @11ty/eleventy --config=eleventy.config.js --serve",
"start:11ty": "npx @11ty/eleventy --serve --quiet",
"start:css": "npx @tailwindcss/cli -i ./src/assets/main.css -o ./dist/assets/styles.css --watch"
},
"devDependencies": {
"@11ty/eleventy": "3.0.0",
"@11ty/eleventy-navigation": "0.3.5",
"@11ty/eleventy-navigation": "1.0.2",
"@11ty/eleventy-plugin-syntaxhighlight": "5.0.0",
"@fec/eleventy-plugin-remark": "4.0.0",
"@tailwindcss/typography": "0.5.2",
"@tailwindcss/cli": "4.0.17",
"@tailwindcss/postcss": "4.0.17",
"@tailwindcss/typography": "0.5.16",
"@types/hast": "3.0.4",
"@types/mdast": "4.0.4",
"autoprefixer": "10.3.4",
Expand All @@ -28,7 +36,7 @@
"rehype-slug": "6.0.0",
"remark": "15.0.1",
"remark-directive": "4.0.0",
"tailwindcss": "3.3.2",
"tailwindcss": "4.0.17",
"tailwindcss-opentype": "workspace:*",
"unified": "11.0.5",
"unist-util-visit": "5.0.0"
Expand Down
8 changes: 8 additions & 0 deletions docs/postcss.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
const config = {
plugins: {
'@tailwindcss/postcss': {},
autoprefixer: {},
},
}

export default config
8 changes: 6 additions & 2 deletions docs/remark/directives.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export function remarkDirectives() {
? node.children[0].value.split(',')
: undefined
let features = dedent`
<span aria-hidden="true" class="inline-flex self-center mx-4 h-6 w-px align-middle bg-grey-700 bg-opacity-20"></span>
<span aria-hidden="true" class="inline-flex self-center mx-4 h-6 w-px align-middle dark:bg-[color-mix(in_oklab,_var(--color-gray-900),white_20%)] bg-[color-mix(in_oklab,_var(--color-gray-900),white_90%)]"></span>
${tags.map((tag) => markupTagText(tag))}
`
.replaceAll('\n', '')
Expand All @@ -38,11 +38,15 @@ export function remarkDirectives() {

let parsed = unified().use(parse).parse(features)
let html = parsed.children[0]

/** @todo Fix type information here. */
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
children = html.children[1].children

hast = h(node.name, node.attributes, [children])
data.hProperties = {
class: 'not-prose',
}
data.hChildren = hast.children
break
}
Expand Down Expand Up @@ -82,7 +86,7 @@ export function remarkDirectives() {
}

function markupTagText(tag) {
return dedent`<span class="align-middle inline-flex items-center px-3 py-1 rounded-full text-sm font-medium leading-4 bg-grey-50 text-grey-600 tracking-tight">
return dedent`<span class="align-middle inline-flex items-center px-3 py-1 rounded-full text-xs font-medium leading-4 bg-grey-50 text-grey-600 tracking-tight dark:bg-grey-900 dark:text-gray-400">
<kbd>${tag}</kbd>
</span>`
}
86 changes: 53 additions & 33 deletions docs/remark/sample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@ import { visit } from 'unist-util-visit'
loadLanguages()

const previewBackground = {
amber: 'bg-gradient-to-r from-amber-50 to-amber-100 accent-amber',
orange: 'bg-gradient-to-r from-orange-50 to-orange-100 accent-orange',
rose: 'bg-gradient-to-r from-rose-50 to-rose-100 accent-rose',
fuchsia: 'bg-gradient-to-r from-fuchsia-50 to-fuchsia-100 accent-fuchsia',
indigo: 'bg-gradient-to-r from-indigo-50 to-indigo-100 accent-indigo',
emerald: 'bg-gradient-to-r from-emerald-50 to-teal-100 accent-emerald',
amber: 'accent-amber',
orange: 'accent-orange',
rose: 'accent-rose',
fuchsia: 'accent-fuchsia',
indigo: 'accent-indigo',
emerald: 'accent-emerald',
}

/**
Expand Down Expand Up @@ -84,70 +84,90 @@ export function remarkSample() {
type: 'element',
tagName: 'div',
properties: {
class: [
'rounded-t-xl overflow-hidden code-sample',
previewBackground[color],
],
class: ['code-sample', previewBackground[color]],
},
children: [
{
type: 'element',
tagName: 'div',
properties: {
class: 'flex overflow-x-auto',
class:
'not-prose text-grey-600 whitespace-nowrap overflow-auto rounded-lg bg-white outline outline-white/5 dark:text-gray-400 dark:bg-gray-950/50 p-8',
},
children: [
{
type: 'element',
tagName: 'div',
properties: {
class:
'p-10 text-grey-600 mix-blend-multiply whitespace-nowrap',
},
/** @todo Fix type information here. */
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
children: previewHast.children[0].children[1].children,
},
],
/** @todo Fix type information here. */
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
children: previewHast.children[0].children[1].children,
},
],
}

let snippet = {
type: 'element',
tagName: 'div',
properties: { class: 'overflow-hidden rounded-b-xl' },
properties: {
class:
'dark:bg-white/5 dark:inset-ring dark:inset-ring-white/10 not-prose p-1 rounded-xl scheme-dark text-sm',
},
children: [
{
type: 'element',
tagName: 'pre',
tagName: 'div',
properties: {
class: `scrollbar-none overflow-x-auto !m-0 !p-6 text-sm leading-snug !rounded-none language-${node.lang} text-white`,
class:
'*:flex *:*:max-w-none *:*:shrink-0 *:*:grow *:overflow-auto *:rounded-lg *:bg-white/10! *:p-5 dark:*:bg-white/5! **:[.line]:isolate **:[.line]:not-last:min-h-[1lh] *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5',
},
children: [
{
type: 'element',
tagName: 'code',
properties: { class: 'language-html' },
children: node.data?.hChildren ?? [
snippetHast.children[0].children[1],
tagName: 'pre',
properties: {
class: `scrollbar-none overflow-x-auto !m-0 !p-6 text-sm leading-snug language-${node.lang} text-white`,
},
children: [
{
type: 'element',
tagName: 'code',
properties: { class: 'language-html' },
children: node.data?.hChildren ?? [
snippetHast.children[0].children[1],
],
},
],
},
],
},
],
}

let codeBlock = {
type: 'element',
tagName: 'div',
properties: {
class: 'bg-gray-950 -mb-1 -mx-1 rounded-xl',
},
children: [snippet],
}

let figure = {
type: 'element',
tagName: 'figure',
properties: {
class:
'flex flex-col gap-1 rounded-xl bg-gray-950/5 p-1 inset-ring inset-ring-gray-950/5 dark:bg-white/10 dark:inset-ring-white/10',
},
children: [preview, codeBlock],
}

let n = node

n.type = 'code-sample'
n.data ??= {}

n.data.hName = 'div'
n.data.hProperties = {
className: ['relative overflow-hidden mb-8'],
className: ['not-prose isolate'],
}
n.data.hChildren = [preview, snippet]
n.data.hChildren = [figure]
})
}
}
27 changes: 19 additions & 8 deletions docs/src/assets/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@tailwind base;
@import "tailwindcss";

/*! purgecss start ignore */
.token.tag,
Expand Down Expand Up @@ -55,24 +55,27 @@

.token.deleted:not(.prefix)::after {
content: "";
@apply pointer-events-none absolute inset-0 block bg-rose-400 bg-opacity-25;
@apply pointer-events-none absolute inset-0 block bg-rose-400/25;
}

.token.deleted.prefix {
@apply text-gray-400 select-none;
}

.token.inserted:not(.prefix) {
@apply block bg-emerald-700 bg-opacity-50 -mx-4 px-4;
@apply block bg-emerald-700/50 -mx-4 px-4;
}

.token.inserted.prefix {
@apply text-emerald-200 text-opacity-75 select-none;
@apply text-emerald-200/75 select-none;
}
/*! purgecss end ignore */

@tailwind components;
@tailwind utilities;
/* @tailwind components;
@tailwind utilities; */

/* @import "./typography.css" layer(components); */
@config "../../tailwind.config.js";

@layer base {
@font-face {
Expand Down Expand Up @@ -136,14 +139,22 @@
}

@layer utilities {
.code-sample p {
margin: 0;
}
.code-sample mark {
color: var(--accent-color);
background: none;
}

.accent-amber {
--accent-color: theme("colors.amber.600");
}
.accent-orange {
--accent-color: theme("colors.orange.600");
}
.accent-rose {
--accent-color: theme("colors.rose.600");
--accent-color: light-dark(theme("colors.rose.600"), theme("colors.rose.400"));
}
.accent-fuchsia {
--accent-color: theme("colors.fuchsia.600");
Expand All @@ -152,7 +163,7 @@
--accent-color: theme("colors.indigo.600");
}
.accent-emerald {
--accent-color: theme("colors.emerald.600");
--accent-color: light-dark(theme("colors.emerald.600"), theme("colors.emerald.400"));
}

.code-highlight {
Expand Down
24 changes: 0 additions & 24 deletions docs/src/assets/styles.11ty.js
View file
Open in desktop

This file was deleted.

Loading
Loading