First pass at hero section.

2023-02-12 20:49:04 -05:00 · 2023-02-12 20:49:04 -05:00 · df3aa36e26
commit df3aa36e26
parent 95842b73bd
14 changed files with 112 additions and 18 deletions
--- a/docs/parser/helpers.js
+++ b/docs/parser/helpers.js
@ -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 linesAsArray = []
-
-  let contentDepth = -1
+  if (includeCurrent) linesAsArray.push(line())
+  let contentDepth = includeCurrent ? level() : -1

  while(await next(rootLevel)) {
    if (contentDepth === -1 && !!line()) contentDepth = level()
--- a/docs/parser/nodes/Button.js
+++ b/docs/parser/nodes/Button.js
@ -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
+}
--- a/docs/parser/nodes/index.js
+++ b/docs/parser/nodes/index.js
@ -1,7 +1,15 @@
 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.Logo = doc => ({ type: `Logo` })
+module.exports.Logo = doc => ({
+  type: `Logo`,
+  variant: doc.tail() || 'light'
+})
 module.exports.Markdown = require('./Markdown.js')
 module.exports.CodeExample = require('./CodeExample.js')
+module.exports.Button = require('./Button.js')
--- a/docs/src/_includes/layout.njk
+++ b/docs/src/_includes/layout.njk
@ -12,6 +12,7 @@
  <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500&display=swap" rel="stylesheet">
 </head>
 <body class="text-base">
+  {{ Node('Navbar') }}
  {% for child in children %}
    {{ Node(child.type, child) }}
  {% endfor %}
--- a/docs/src/_includes/nodes/Button.njk
+++ b/docs/src/_includes/nodes/Button.njk
@ -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 %}
--- a/docs/src/_includes/nodes/CodeExample.njk
+++ b/docs/src/_includes/nodes/CodeExample.njk
@ -26,7 +26,7 @@ set languageMeta = {
          {{ languageMeta[id].name }}
        </summary>
        <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();"
        >{{ code | highlight(id) | safe }}</pre>
      </details>
--- a/docs/src/_includes/nodes/Logo.njk
+++ b/docs/src/_includes/nodes/Logo.njk
@ -1,2 +1,13 @@
 {% 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 %}
--- a/docs/src/_includes/nodes/Markdown.njk
+++ b/docs/src/_includes/nodes/Markdown.njk
@ -1,5 +1,5 @@
 {% 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 }}
  </div>
 {% endmacro %}
--- a/docs/src/_includes/nodes/Navbar.njk
+++ b/docs/src/_includes/nodes/Navbar.njk
@ -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 %}
--- a/docs/src/_includes/nodes/SearchBox.njk
+++ b/docs/src/_includes/nodes/SearchBox.njk
@ -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 %}
--- a/docs/src/_includes/nodes/Section.njk
+++ b/docs/src/_includes/nodes/Section.njk
@ -1,9 +1,17 @@
 {% 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) %}
-  <section class="{{ node.class }}">
-    {% for child in node.children %}
-      {{ Node(child.type, child) }}
-    {% endfor %}
+  <section class="{{ variants[node.variant] }} {{ node.class }} py-32">
+    <div class="container mx-auto flex gap-48">
+      {% for child in node.children %}
+        {{ Node(child.type, child) }}
+      {% endfor %}
+    </div>
  </section>
 {% endmacro %}
--- a/docs/src/index.tce
+++ b/docs/src/index.tce
@ -5,13 +5,10 @@ description
  Terrace gets out of your way to let you just write

 Section light
-  class flex gap-16
-
+  class pb-64
  Div
-    class flex flex-column gap-16
-
-    Logo
-
+    class flex flex-col gap-8 w-full items-start
+    Logo light
    Markdown
      A simple structured data syntax for
        - **Configuration**
@ -20,6 +17,9 @@ Section light

      Terrace gets out of your way to let you
        - **just write**
+    Button primary
+      href /docs/getting-started
+      Get Started

  CodeExample
    terrace
--- a/docs/src/public/logo.png
+++ b/docs/src/public/logo.png
--- a/docs/tailwind.config.js
+++ b/docs/tailwind.config.js
@ -44,7 +44,7 @@ module.exports = {
      '2xl': '1.563rem',
      '3xl': '1.953rem',
      '4xl': '2.441rem',
-      '5xl': '3.052rem',
+      '5xl': '3.25rem',
    },
    extend: {
      fontFamily: {