diff --git a/docs/.eleventy.js b/docs/.eleventy.js index 0e5c251..c0e0ca3 100644 --- a/docs/.eleventy.js +++ b/docs/.eleventy.js @@ -1,11 +1,16 @@ -const HighlightJS = require('highlight.js') const EleventyVitePlugin = require('@11ty/eleventy-plugin-vite') +const EleventyGoogleFonts = require("eleventy-google-fonts"); +const EleventyFeatherIcons = require('eleventy-plugin-feathericons'); + +const HighlightJS = require('highlight.js') const { useDocument } = require('@terrace/js/document') const { createFileReader } = require('@terrace/js/readers/node-readline') -const parsePage = require('./parser/page.js') +const parsePage = require('./parser/page.js'); module.exports = function (config) { config.addPlugin(EleventyVitePlugin) + config.addPlugin(EleventyGoogleFonts) + config.addPlugin(EleventyFeatherIcons) config.addPassthroughCopy('src/public') config.addPassthroughCopy('src/styles') diff --git a/docs/package.json b/docs/package.json index 598e7c8..e9a3743 100644 --- a/docs/package.json +++ b/docs/package.json @@ -11,6 +11,8 @@ "@11ty/eleventy-plugin-vite": "^4.0.0", "@tailwindcss/typography": "^0.5.9", "@terrace/js": "workspace:*", + "eleventy-google-fonts": "^0.1.0", + "eleventy-plugin-feathericons": "^1.0.1", "highlight.js": "^11.7.0", "marked": "^4.2.12", "tailwindcss": "^3.2.6", diff --git a/docs/parser/nodes/CodeExample.js b/docs/parser/nodes/CodeExample.js index e92839a..7b1684a 100644 --- a/docs/parser/nodes/CodeExample.js +++ b/docs/parser/nodes/CodeExample.js @@ -4,17 +4,18 @@ const languages = ['terrace', 'json', 'yaml', 'toml', 'javascript', 'typescript' module.exports = async (doc, rootLevel) => { const { next, level, line, head, tail } = doc - const codeExample = { - type: 'CodeExample', + + const node = { + type: head(), languages: {} } while (await next(rootLevel)) { const languageLevel = level() if (languages.includes(head())) { - codeExample.languages[head()] = await contentAsText(doc, languageLevel) + node.languages[head()] = await contentAsText(doc, languageLevel) } } - return codeExample + return node } diff --git a/docs/parser/nodes/Header.js b/docs/parser/nodes/Header.js new file mode 100644 index 0000000..77d335d --- /dev/null +++ b/docs/parser/nodes/Header.js @@ -0,0 +1,16 @@ +module.exports = async function (doc, rootLevel) { + const { next, line, match, tail, level, head } = doc + + const node = { + type: head(), + level: tail().split(' ')[0], + text: tail().split(' ').slice(1).join(' '), + class: '' + } + + while (await next(rootLevel)) { + if (match('class')) node.class = tail() + } + + return node +} diff --git a/docs/parser/nodes/Icon.js b/docs/parser/nodes/Icon.js new file mode 100644 index 0000000..3a564d0 --- /dev/null +++ b/docs/parser/nodes/Icon.js @@ -0,0 +1,10 @@ +module.exports = async function (doc) { + const { head, tail } = doc + + const node = { + type: head(), + icon: tail() + } + + return node +} diff --git a/docs/parser/nodes/Markdown.js b/docs/parser/nodes/Markdown.js index 4f03879..6fa5ffa 100644 --- a/docs/parser/nodes/Markdown.js +++ b/docs/parser/nodes/Markdown.js @@ -1,9 +1,9 @@ const { contentAsText } = require('../helpers.js') const marked = require('marked') -module.exports = async (...args) => { +module.exports = async (doc, rootLevel) => { return { - type: `Markdown`, - text: marked.parse(await contentAsText(...args)) + type: doc.head(), + text: marked.parse(await contentAsText(doc, rootLevel)) } } diff --git a/docs/parser/nodes/index.js b/docs/parser/nodes/index.js index d986170..7793fb8 100644 --- a/docs/parser/nodes/index.js +++ b/docs/parser/nodes/index.js @@ -1,15 +1,17 @@ const parseNode = require('./Node.js') +module.exports.Div = parseNode module.exports.Section = async (doc, rootLevel) => { const variant = doc.tail() return { variant, ...(await parseNode(doc, rootLevel)) } } +module.exports.Header = require('./Header.js') +module.exports.Button = require('./Button.js') +module.exports.Icon = require('./Icon.js') -module.exports.Div = parseNode +module.exports.Markdown = require('./Markdown.js') +module.exports.CodeExample = require('./CodeExample.js') 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') diff --git a/docs/src/_includes/layout.njk b/docs/src/_includes/layout.njk index 6b47b0c..4012ee7 100644 --- a/docs/src/_includes/layout.njk +++ b/docs/src/_includes/layout.njk @@ -4,12 +4,10 @@ - - {{ title }} - + {% eleventyGoogleFonts 'https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500&display=swap' %} {{ Node('Navbar') }} diff --git a/docs/src/_includes/nodes/Button.njk b/docs/src/_includes/nodes/Button.njk index a0f88cf..694c62f 100644 --- a/docs/src/_includes/nodes/Button.njk +++ b/docs/src/_includes/nodes/Button.njk @@ -4,9 +4,9 @@ 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" + class="{{ node.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" + class="{{ node.class }} {{ commonClasses }} bg-gradient-to-b from-neutral-500 to-neutral-800" {% endif %} > {{ node.text | safe }} diff --git a/docs/src/_includes/nodes/Header.njk b/docs/src/_includes/nodes/Header.njk new file mode 100644 index 0000000..a1669c7 --- /dev/null +++ b/docs/src/_includes/nodes/Header.njk @@ -0,0 +1,14 @@ +{% 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' +} %} + +{% macro render(node) %} + + {{ node.text | safe }} + +{% endmacro %} diff --git a/docs/src/_includes/nodes/Icon.njk b/docs/src/_includes/nodes/Icon.njk new file mode 100644 index 0000000..9ac190a --- /dev/null +++ b/docs/src/_includes/nodes/Icon.njk @@ -0,0 +1,3 @@ +{% macro render(node) %} + {% feather node.icon %} +{% endmacro %} diff --git a/docs/src/_includes/nodes/Logo.njk b/docs/src/_includes/nodes/Logo.njk index ebf3900..f18e52a 100644 --- a/docs/src/_includes/nodes/Logo.njk +++ b/docs/src/_includes/nodes/Logo.njk @@ -1,13 +1,13 @@ {% macro render(node) %} - {% if node.variant != 'small' %} -
- - Terrace -
- {% else %} + {% if node.variant == 'small' %}
Terrace
+ {% else %} +
+ +

Terrace

+
{% endif %} {% endmacro %} diff --git a/docs/src/_includes/nodes/Markdown.njk b/docs/src/_includes/nodes/Markdown.njk index fba2c0e..18e785f 100644 --- a/docs/src/_includes/nodes/Markdown.njk +++ b/docs/src/_includes/nodes/Markdown.njk @@ -1,5 +1,5 @@ {% macro render(node) %} -
+
{{ node.text | safe }}
{% endmacro %} diff --git a/docs/src/_includes/nodes/Navbar.njk b/docs/src/_includes/nodes/Navbar.njk index 2e5bb4f..f668279 100644 --- a/docs/src/_includes/nodes/Navbar.njk +++ b/docs/src/_includes/nodes/Navbar.njk @@ -1,7 +1,7 @@ {% from "./Node.njk" import Node %} {% macro render(node) %} -