Finished main home page layout. Not responsive yet.

docs/parser/nodes/Markdown.js

@@ -1,9 +1,21 @@
 const { contentAsText } = require('../helpers.js')
 const marked = require('marked')
 
-module.exports = async (doc, rootLevel) => {
-  return {
-    type: doc.head(),
-    text: marked.parse(await contentAsText(doc, rootLevel))
+module.exports = async function (doc, rootLevel) {
+  const { next, line, match, tail, level, head } = doc
+
+  const node = {
+    type: head(),
+    class: '',
+    text: ''
   }
+
+  while (await next(rootLevel)) {
+    if (match('class')) node.class = tail()
+    else {
+      node.text = marked.parse(await contentAsText(doc, rootLevel, true))
+    }
+  }
+
+  return node
 }

docs/src/_includes/nodes/Header.njk

@@ -1,6 +1,6 @@
 {% set levelClasses = {
   '2': 'text-5xl text-transparent bg-clip-text bg-gradient-to-b from-primary-400 to-primary-600 mb-12',
-  '3': 'text-2xl font-light mb-2'
+  '3': 'text-2xl font-light'
 } %}
 
 {% macro render(node) %}

docs/src/_includes/nodes/Markdown.njk

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

docs/src/_includes/nodes/Navbar.njk

@@ -13,7 +13,7 @@
         <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>
+          {{ Node('Icon', { icon: 'github' }) }}
         </a>
       </div>
     </div>

docs/src/_includes/nodes/SearchBox.njk

@@ -1,8 +1,8 @@
+{% from "./Node.njk" import Node %}
+
 {% 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>
+    {{ Node('Icon', { icon: 'search' }) }}
   </div>
 {% endmacro %}

docs/src/_includes/nodes/Section.njk

@@ -2,9 +2,7 @@
 
 {% set variants = {
   light: "bg-gradient-to-b from-neutral-50 to-neutral-50/50",
-  dark: "
-    bg-gradient-to-b from-neutral-800 to-neutral-900 text-neutral-50
-  "
+  dark: "bg-gradient-to-b from-neutral-800 to-neutral-900 text-neutral-50"
 }
 %}
 
@@ -13,7 +11,7 @@
     <path d="M0 55H1920V6.99994C1811 55 1150 55 403.5 6.99994C141.541 -9.84407 0 6.99996 0 55Z" fill="currentColor"/>
   </svg>
   <section class="{{ variants[node.variant] }}">
-    <div class="container mx-auto py-32 {{ node.class }}">
+    <div class="container mx-auto pt-8 pb-32 {{ node.class }}">
       {% for child in node.children %}
         {{ Node(child.type, child) }}
       {% endfor %}

docs/src/index.tce

@@ -5,7 +5,7 @@ description
   Terrace gets out of your way to let you just write
 
 Section light
-  class pb-64 flex gap-48
+  class pt-32 pb-64 flex gap-48
   Div
     class flex flex-col gap-8 w-full items-start
     Logo light
@@ -69,7 +69,6 @@ Section light
           - **just write**"""
 
 Section dark
-  class pt-8
   Header 2 Uses
 
   Div
@@ -118,7 +117,6 @@ Section dark
     See Examples
 
 Section light
-  class pt-8
   Header 2 Core
 
   Div
@@ -126,34 +124,80 @@ Section light
 
     Div
       Header 3 Tiny - <strong>Really Tiny</strong>
+        class mb-4
       Markdown
         The C version of the core parser is ~30 lines. Most other implementations are of comparable size.
 
       Header 3 Easy to Implement
-        class mt-16
+        class mb-4 mt-16
       Markdown
         Need to use Terrace in another runtime? The tiny core and reliance on rudimentary control structures makes that a cinch!
 
     Div
       Header 3 Zero Dependencies
+        class mb-4
       Markdown
         All Terrace implementations rely only on the built-ins of their language. The header-only C core has no dependencies, not even libc.
 
       Header 3 No Dynamic Memory
-        class mt-16
+        class mb-4 mt-16
       Markdown
         Terrace allocates no dynamic memory of its own, working entirely on the stack. A great fit for resource-constrained environments.
 
     Div
       Header 3 Unopinionated
+        class mb-4
       Markdown
         Terrace makes as few assumptions as possible about how you intend to use it, leaving you with the tools you need to use it as you see fit.
 
       Header 3 Available in 3+ languages
-        class mt-16
+        class mb-4 mt-16
       Markdown
         At launch, Terrace has a reference C implementation, a TypeScript/JavaScript implementation, and a Python version available as well. We’ll be adding more as time permits!
 
   Button primary
     class inline-block mt-8
     Add a Language
+
+Section dark
+  Header 2 Learn More
+
+  Div
+    class flex gap-48 space-between
+
+    Div
+      class max-w-prose
+      Div
+        class flex gap-4 items-center mb-4
+        Icon info
+        Header 3 About
+          class mb-0
+      Markdown
+        Why does Terrace exist? What is it based on? What is the development philosophy?
+
+    Div
+      class max-w-prose
+      Div
+        class flex gap-4 items-center mb-4
+        Icon file-text
+        Header 3 Documentation
+          class mb-0
+      Markdown
+        Setup instructions, API documentation, and recipes for how to perform common tasks with Terrace.
+
+    Div
+      class max-w-prose
+      Div
+        class flex gap-4 items-center mb-4
+        Icon users
+        Header 3 Contribute
+          class mb-0
+      Markdown
+        Join the community! Help out by answering issues, expanding documentation, or building additional language implementations!
+
+  Markdown
+    class text-center mt-32 mx-auto text-neutral-50/75 prose-a:text-primary-100/75
+    Maintained by the Terrace Team. Find an issue? [Let us know](/issues)!
+
+    Site contents licensed under the [CC BY 3.0 license](https://creativecommons.org/licenses/by/3.0/)<br/>
+    All code examples licensed under the [MIT license](https://opensource.org/licenses/MIT)