thederf/Terrace
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Tidy up styling, add basic ToC component.

Browse Source
This commit is contained in:
Joshua Bemenderfer 2023-02-14 16:47:38 -05:00
parent 54ad373744
commit 3b464c523e
13 changed files with 305 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/src/_includes/layout.njk
View File

@ -9,10 +9,10 @@
<meta name="description" content="{{ description | join(' ') }}"/> <meta name="description" content="{{ description | join(' ') }}"/>
{% eleventyGoogleFonts 'https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500&display=swap' %} {% eleventyGoogleFonts 'https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500&display=swap' %}
</head> </head>
<body class="text-base"> <body class="text-base pt-16">
{{ Node('Navbar', {}, page) }} {{ Node('Navbar', {}, { headings: headings, url: page.url }) }}
{% for child in children %} {% for child in children %}
{{ Node(child.type, child, page) }} {{ Node(child.type, child, { headings: headings, url: page.url }) }}
{% endfor %} {% endfor %}
<script type="module" src="/main.js"></script> <script type="module" src="/main.js"></script>
</body> </body>

4
docs/src/_includes/nodes/Logo.njk
View File

@ -1,11 +1,11 @@
{% macro render(node) %} {% macro render(node) %}
{% if node.variant == 'small' %} {% if node.variant == 'small' %}
<div class="flex gap-2 items-center"> <div class="flex gap-2 items-center {{node.class}}">
<img src="/logo.png" class="w-8 h-8" alt=""/> <img src="/logo.png" class="w-8 h-8" alt=""/>
<span class="text-3xl text-transparent bg-clip-text bg-gradient-to-b from-primary-400 to-primary-600">Terrace</span> <span class="text-3xl text-transparent bg-clip-text bg-gradient-to-b from-primary-400 to-primary-600">Terrace</span>
</div> </div>
{% else %} {% else %}
<div class="flex gap-4 items-center"> <div class="flex gap-4 items-center {{node.class}}">
<img src="/logo.png" class="w-8 h-8 md:w-16 md:h-16" alt=""/> <img src="/logo.png" class="w-8 h-8 md:w-16 md:h-16" alt=""/>
<h1 class="text-xl md:text-5xl text-transparent bg-clip-text bg-gradient-to-b from-primary-400 to-primary-600">Terrace</h1> <h1 class="text-xl md:text-5xl text-transparent bg-clip-text bg-gradient-to-b from-primary-400 to-primary-600">Terrace</h1>
</div> </div>

14
docs/src/_includes/nodes/Navbar.njk
View File

@ -1,13 +1,11 @@
{% from "./Node.njk" import Node %} {% from "./Node.njk" import Node %}
{{ page | dump }}
{% macro navlink(href, text, active) %} {% macro navlink(href, text, active) %}
<a href="{{ href }}" class="flex items-center hover:text-primary-400 {{ 'text-primary-400' if href in active }}">{{ text }}</a> <a href="{{ href }}" class="flex items-center hover:text-primary-400 {{ 'text-primary-400' if href in active }}">{{ text }}</a>
{% endmacro %} {% endmacro %}
{% macro render(node, page) %} {% macro render(node, ctx) %}
<nav class="fixed left-0 right-0 top-0 lg:relative bg-neutral-800 text-neutral-50 h-20 flex items-center z-10"> <nav class="fixed left-0 right-0 top-0 lg:absolute bg-neutral-800 text-neutral-50 h-20 flex items-center z-10">
<div class="container mx-auto px-8 flex items-center space-between"> <div class="container mx-auto px-8 flex items-center space-between">
<a id="nav" class="peer" href="#nav" aria-hidden="true" tabindex="-1"></a> <a id="nav" class="peer" href="#nav" aria-hidden="true" tabindex="-1"></a>
@ -29,10 +27,10 @@
lg:pointer-events-auto lg:pointer-events-auto
lg:relative lg:top-0 lg:px-0 lg:flex-row lg:flex-1 lg:h-20 lg:bg-neutral-800 lg:text-white lg:relative lg:top-0 lg:px-0 lg:flex-row lg:flex-1 lg:h-20 lg:bg-neutral-800 lg:text-white
"> ">
{{ navlink("/docs/", "Docs", page.url) }} {{ navlink("/docs/", "Docs", ctx.url) }}
{{ navlink("/examples/", "Examples", page.url) }} {{ navlink("/examples/", "Examples", ctx.url) }}
{{ navlink("/about/", "About", page.url) }} {{ navlink("/about/", "About", ctx.url) }}
{{ navlink("/contribute/", "Contribute", page.url) }} {{ navlink("/contribute/", "Contribute", ctx.url) }}
<a href="/docs/" class="flex items-center hover:text-primary-400">Contribute</a> <a href="/docs/" class="flex items-center hover:text-primary-400">Contribute</a>
<div class="-order-1 lg:order-2 flex items-center">{{ Node('SearchBox', { class: 'w-full lg:w-72' }) }}</div> <div class="-order-1 lg:order-2 flex items-center">{{ Node('SearchBox', { class: 'w-full lg:w-72' }) }}</div>
<a href="https://git.thederf.com/thederf/Terrace" target="_blank" class="flex items-center hover:text-primary-400 order-3"> <a href="https://git.thederf.com/thederf/Terrace" target="_blank" class="flex items-center hover:text-primary-400 order-3">

4
docs/src/_includes/nodes/Node.njk
View File

@ -1,4 +1,4 @@
{% macro Node(name, params, page) %} {% macro Node(name, params, ctx) %}
{% from "./" + name + ".njk" import render %} {% from "./" + name + ".njk" import render %}
{{ render(params, page) }} {{ render(params, ctx) }}
{% endmacro %} {% endmacro %}

6
docs/src/_includes/nodes/Section.njk
View File

@ -6,14 +6,14 @@
} }
%} %}
{% macro render(node, page) %} {% macro render(node, ctx) %}
<svg class="w-full -mt-[55px] {{ 'text-neutral-50' if node.variant == 'light' else 'text-neutral-800' }}" viewBox="0 0 1920 55"> <svg class="w-full -mt-[55px] {{ 'text-neutral-50' if node.variant == 'light' else 'text-neutral-800' }}" viewBox="0 0 1920 55">
<path d="M0 55H1920V6.99994C1811 55 1150 55 403.5 6.99994C141.541 -9.84407 0 6.99996 0 55Z" fill="currentColor"/> <path d="M0 55H1920V6.99994C1811 55 1150 55 403.5 6.99994C141.541 -9.84407 0 6.99996 0 55Z" fill="currentColor"/>
</svg> </svg>
<section class="group/{{node.variant}} {{ variants[node.variant] }}"> <section class="group/{{node.variant}} {{ variants[node.variant] }}">
<div class="{{ node.class }} container mx-auto px-8 pt-16 md:pt-8 pb-32"> <div class="{{ node.class }} container mx-auto px-8 pt-16 pb-48">
{% for child in node.children %} {% for child in node.children %}
{{ Node(child.type, child, page) }} {{ Node(child.type, child, ctx) }}
{% endfor %} {% endfor %}
</div> </div>
</section> </section>

19
docs/src/_includes/nodes/TableOfContents.njk Normal file
View File

@ -0,0 +1,19 @@
{% macro renderHeadings(headings) %}
<ul class="pl-4">
{% for heading in headings %}
<li class="my-4">
<a href="#{{ heading.slug }}" class="hover:text-primary-400">{{ heading.text }}</a>
{% if heading.children %}
{{ renderHeadings(heading.children)}}
{% endif %}
</li>
{% endfor %}
</ul>
{% endmacro %}
{% macro render(node, ctx) %}
<div class="my-4 font-medium text-2xl">Table of Contents</div>
<div class="-ml-3">
{{ renderHeadings(ctx.headings) }}
</div>
{% endmacro %}

23
docs/src/about.tce
View File

@ -5,7 +5,15 @@ description
Terrace gets out of your way to let you just write Terrace gets out of your way to let you just write
Section dark Section dark
class pt-40 md:pt-32 max-w-prose class flex flex-col md:flex-row gap-16
Block
class w-full lg:w-1/3
TableOfContents
Block
class max-w-prose
Heading 1 About Terrace Heading 1 About Terrace
@ -36,7 +44,14 @@ Section dark
[This page](https://git.thederf.com/thederf/Terrace/src/branch/main/docs/src/about.tce) is written using Terrace! [This page](https://git.thederf.com/thederf/Terrace/src/branch/main/docs/src/about.tce) is written using Terrace!
Section light Section light
class flex flex-col md:flex-row gap-16
Block
class w-1/3
Block
class max-w-prose class max-w-prose
Heading 2 Background Heading 2 Background
Markdown Markdown
@ -211,6 +226,12 @@ Section light
Six or seven parser rewrites later, it finally works mostly how I envisioned it. :) Six or seven parser rewrites later, it finally works mostly how I envisioned it. :)
Section dark Section dark
class flex flex-col md:flex-row gap-16
Block
class w-1/3
Block
class max-w-prose class max-w-prose
Heading 2 Development Goals Heading 2 Development Goals

10
docs/src/index.tce
View File

@ -5,10 +5,12 @@ description
Terrace gets out of your way to let you just write Terrace gets out of your way to let you just write
Section light Section light
class pt-40 md:pt-36 pb-48 md:pb-64 flex flex-col gap-16 md:flex-row md:gap-48 class pt-24 flex flex-col gap-16 md:flex-row lg:gap-48
Block Block
class flex flex-col gap-8 w-full items-start class flex flex-col gap-8 w-full items-start
Logo light Logo light
class hidden lg:flex
Markdown Markdown
class prose-ul:list-none class prose-ul:list-none
A simple structured data syntax for A simple structured data syntax for
@ -74,7 +76,7 @@ Section dark
Heading 2 Uses Heading 2 Uses
Block Block
class flex flex-col space-between gap-16 md:flex-row md:gap-48 class flex flex-col space-between gap-16 md:flex-row lg:gap-48
Block Block
class max-w-prose class max-w-prose
@ -122,7 +124,7 @@ Section light
Heading 2 Core Heading 2 Core
Block Block
class flex flex-col space-between gap-16 md:flex-row md:gap-48 class flex flex-col space-between gap-16 md:flex-row lg:gap-48
Block Block
Heading 3 Tiny - <strong>Really Tiny</strong> Heading 3 Tiny - <strong>Really Tiny</strong>
@ -165,7 +167,7 @@ Section dark
Heading 2 Learn More Heading 2 Learn More
Block Block
class flex flex-col space-between gap-16 md:flex-row md:gap-48 class flex flex-col space-between gap-16 md:flex-row lg:gap-48
Block Block
class max-w-prose class max-w-prose

5
docs/src/parser/nodes/Heading.js
View File

@ -4,7 +4,7 @@ module.exports = async function (doc, rootLevel, pageData) {
const { next, line, match, tail, level, head } = doc const { next, line, match, tail, level, head } = doc
const headingLevel = tail().split(' ')[0] const headingLevel = +tail().split(' ')[0]
const text = tail().split(' ').slice(1).join(' ') const text = tail().split(' ').slice(1).join(' ')
const slug = slugify(text) const slug = slugify(text)
@ -13,7 +13,8 @@ module.exports = async function (doc, rootLevel, pageData) {
level: headingLevel, level: headingLevel,
text, text,
slug, slug,
class: '' class: '',
children: []
} }
while (await next(rootLevel)) { while (await next(rootLevel)) {

23
docs/src/parser/nodes/Logo.js Normal file
View File

@ -0,0 +1,23 @@
const { contentAsText } = require('../helpers.js')
module.exports = async function (doc, rootLevel) {
const { next, line, match, tail, level, head } = doc
const node = {
type: head(),
variant: tail() || 'neutral',
class: '',
href: '',
text: ''
}
while (await next(rootLevel)) {
if (match('class')) node.class = tail()
else if (match('href')) node.href = tail()
else {
node.text = await contentAsText(doc, rootLevel, true)
}
}
return node
}

14
docs/src/parser/nodes/TableOfContents.js Normal file
View File

@ -0,0 +1,14 @@
module.exports = async function (doc, rootLevel) {
const { next, head, tail, match } = doc
const node = {
type: head(),
class: '',
}
while (await next(rootLevel)) {
if (match('class')) node.class = tail()
}
return node
}

6
docs/src/parser/nodes/index.js
View File

@ -5,6 +5,7 @@ module.exports.Section = async (doc, rootLevel, ...args) => {
const variant = doc.tail() const variant = doc.tail()
return { variant, ...(await parseNode(doc, rootLevel, ...args)) } return { variant, ...(await parseNode(doc, rootLevel, ...args)) }
} }
module.exports.TableOfContents = require('./TableOfContents.js')
module.exports.Heading = require('./Heading.js') module.exports.Heading = require('./Heading.js')
module.exports.Button = require('./Button.js') module.exports.Button = require('./Button.js')
module.exports.Icon = require('./Icon.js') module.exports.Icon = require('./Icon.js')
@ -12,9 +13,6 @@ module.exports.Icon = require('./Icon.js')
module.exports.Markdown = require('./Markdown.js') module.exports.Markdown = require('./Markdown.js')
module.exports.CodeBlock = require('./CodeBlock.js') module.exports.CodeBlock = require('./CodeBlock.js')
module.exports.CodeExample = require('./CodeExample.js') module.exports.CodeExample = require('./CodeExample.js')
module.exports.Logo = doc => ({ module.exports.Logo = require('./Logo.js')
type: `Logo`,
variant: doc.tail() || 'light'
})
module.exports.Footer = require('./Footer.js') module.exports.Footer = require('./Footer.js')

15
docs/src/parser/page.js
View File

@ -27,7 +27,20 @@ module.exports = async function(doc) {
} }
} }
console.dir(pageData, { depth: null }) // Structure headings into tree.
pageData.headings.forEach((heading, index) => {
let parent = null
for (let i = index; i > 0; --i) {
if (pageData.headings[i].level === heading.level - 1) {
parent = pageData.headings[i]
}
}
if (parent) parent.children.push(heading)
})
pageData.headings = pageData.headings.filter(h => h.level === 2)
console.dir(pageData.headings, { depth: null })
return pageData return pageData
} }