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

First pass at hero section.

Browse Source
This commit is contained in:
Joshua Bemenderfer 2023-02-12 20:49:04 -05:00
parent 95842b73bd
commit df3aa36e26
14 changed files with 112 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/parser/helpers.js
View File

@ -1,9 +1,9 @@
module.exports.contentAsText = async function(doc, rootLevel) { module.exports.contentAsText = async function(doc, rootLevel, includeCurrent = false) {
const { level, next, line, head } = doc const { level, next, line, head } = doc
const linesAsArray = [] const linesAsArray = []
if (includeCurrent) linesAsArray.push(line())
let contentDepth = -1 let contentDepth = includeCurrent ? level() : -1
while(await next(rootLevel)) { while(await next(rootLevel)) {
if (contentDepth === -1 && !!line()) contentDepth = level() if (contentDepth === -1 && !!line()) contentDepth = level()

23
docs/parser/nodes/Button.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
}

12
docs/parser/nodes/index.js
View File

@ -1,7 +1,15 @@
const parseNode = require('./Node.js') const parseNode = require('./Node.js')
module.exports.Section = parseNode module.exports.Section = async (doc, rootLevel) => {
const variant = doc.tail()
return { variant, ...(await parseNode(doc, rootLevel)) }
}
module.exports.Div = parseNode module.exports.Div = parseNode
module.exports.Logo = doc => ({ type: `Logo` }) module.exports.Logo = doc => ({
type: `Logo`,
variant: doc.tail() || 'light'
})
module.exports.Markdown = require('./Markdown.js') module.exports.Markdown = require('./Markdown.js')
module.exports.CodeExample = require('./CodeExample.js') module.exports.CodeExample = require('./CodeExample.js')
module.exports.Button = require('./Button.js')

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

@ -12,6 +12,7 @@
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500&display=swap" rel="stylesheet">
</head> </head>
<body class="text-base"> <body class="text-base">
{{ Node('Navbar') }}
{% for child in children %} {% for child in children %}
{{ Node(child.type, child) }} {{ Node(child.type, child) }}
{% endfor %} {% endfor %}

14
docs/src/_includes/nodes/Button.njk Normal file
View File

@ -0,0 +1,14 @@
{% set commonClasses = "px-12 py-3 text-white rounded-md w-auto" %}
{% macro render(node) %}
<a
href="{{ node.href }}"
target="{{ node.target }}"
{% if node.variant == "primary" %}
class="{{ commonClasses }} bg-gradient-to-b from-primary-500 to-primary-600 hover:from-primary-400 hover:to-primary-600 active:from-primary-600 active:to-primary-500"
{% elseif node.variant == 'neutral' %}
class="{{ commonClasses }} bg-gradient-to-b from-neutral-500 to-neutral-800"
{% endif %}
>
{{ node.text | safe }}
</a>
{% endmacro %}

2
docs/src/_includes/nodes/CodeExample.njk
View File

@ -26,7 +26,7 @@ set languageMeta = {
{{ languageMeta[id].name }} {{ languageMeta[id].name }}
</summary> </summary>
<pre <pre
class="absolute left-0 right-0 w-full bg-neutral-800 text-neutral-50 p-4 rounded-bl-md rounded-br-md rounded-tr-md" class="absolute left-0 right-0 w-full bg-neutral-800 text-neutral-50 p-4 rounded-bl-md rounded-br-md rounded-tr-md whitespace-pre-wrap"
onclick="event.preventDefault(); event.stopPropagation();" onclick="event.preventDefault(); event.stopPropagation();"
>{{ code | highlight(id) | safe }}</pre> >{{ code | highlight(id) | safe }}</pre>
</details> </details>

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

@ -1,2 +1,13 @@
{% macro render(node) %} {% macro render(node) %}
{% if node.variant != 'small' %}
<div class="flex gap-4 items-center">
<img src="/logo.png" class="w-16 h-16" alt=""/>
<span class="text-5xl text-transparent bg-clip-text bg-gradient-to-b from-primary-400 to-primary-600">Terrace</span>
</div>
{% else %}
<div class="flex gap-2 items-center">
<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>
</div>
{% endif %}
{% endmacro %} {% endmacro %}

2
docs/src/_includes/nodes/Markdown.njk
View File

@ -1,5 +1,5 @@
{% macro render(node) %} {% macro render(node) %}
<div class="prose text-base"> <div class="prose prose-neutral prose-lg text-base prose-p:my-2 prose-ul:my-2 prose-ul:list-none prose-li:my-0">
{{ node.text | safe }} {{ node.text | safe }}
</div> </div>
{% endmacro %} {% endmacro %}

21
docs/src/_includes/nodes/Navbar.njk Normal file
View File

@ -0,0 +1,21 @@
{% from "./Node.njk" import Node %}
{% macro render(node) %}
<nav class="bg-neutral-800 text-neutral-50 h-16 flex items-center">
<div class="container mx-auto flex items-center space-between">
<a href="/" class="w-full">
{{ Node('Logo', { variant: 'small' }) }}
</a>
<div class="flex gap-8 items-stretch">
<a href="/docs" class="flex items-center hover:text-primary-400">Docs</a>
<a href="/docs" class="flex items-center hover:text-primary-400">Examples</a>
<a href="/docs" class="flex items-center hover:text-primary-400">About</a>
<a href="/docs" class="flex items-center hover:text-primary-400">Contribute</a>
{{ Node('SearchBox', { class: 'w-72' }) }}
<a href="https://git.thederf.com/thederf/Terrace" target="_blank" class="flex items-center hover:text-primary-400">
<svg class="w-8 h-8 fill-current" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
</a>
</div>
</div>
</nav>
{% endmacro %}

8
docs/src/_includes/nodes/SearchBox.njk Normal file
View File

@ -0,0 +1,8 @@
{% macro render(node) %}
<div class="{{ node.class }} flex gap-4 px-4 py-2 rounded-md border-2 border-neutral-50/75 focus-within:border-primary-400 focus-within:text-primary-400 bg-transparent text-neutral-50">
<input type="text" placeholder="Search" class="w-full bg-transparent outline-none"/>
<svg class="h-6 w-6 fill-current" viewBox="0 0 512 512">
<!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/>
</svg>
</div>
{% endmacro %}

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

@ -1,9 +1,17 @@
{% from "./Node.njk" import Node %} {% from "./Node.njk" import Node %}
{% set variants = {
light: "bg-gradient-to-t from-neutral-50/50 to-neutral-50",
dark: "bg-gradient-to-t from-neutral-900 to-neutral-800"
}
%}
{% macro render(node) %} {% macro render(node) %}
<section class="{{ node.class }}"> <section class="{{ variants[node.variant] }} {{ node.class }} py-32">
{% for child in node.children %} <div class="container mx-auto flex gap-48">
{{ Node(child.type, child) }} {% for child in node.children %}
{% endfor %} {{ Node(child.type, child) }}
{% endfor %}
</div>
</section> </section>
{% endmacro %} {% endmacro %}

12
docs/src/index.tce
View File

@ -5,13 +5,10 @@ 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 flex gap-16 class pb-64
Div Div
class flex flex-column gap-16 class flex flex-col gap-8 w-full items-start
Logo light
Logo
Markdown Markdown
A simple structured data syntax for A simple structured data syntax for
- **Configuration** - **Configuration**
@ -20,6 +17,9 @@ Section light
Terrace gets out of your way to let you Terrace gets out of your way to let you
- **just write** - **just write**
Button primary
href /docs/getting-started
Get Started
CodeExample CodeExample
terrace terrace

BIN
docs/src/public/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

2
docs/tailwind.config.js
View File

@ -44,7 +44,7 @@ module.exports = {
'2xl': '1.563rem', '2xl': '1.563rem',
'3xl': '1.953rem', '3xl': '1.953rem',
'4xl': '2.441rem', '4xl': '2.441rem',
'5xl': '3.052rem', '5xl': '3.25rem',
}, },
extend: { extend: {
fontFamily: { fontFamily: {