diff --git a/docs/.eleventy.js b/docs/.eleventy.js index 3165af1..0e5c251 100644 --- a/docs/.eleventy.js +++ b/docs/.eleventy.js @@ -1,3 +1,4 @@ +const HighlightJS = require('highlight.js') const EleventyVitePlugin = require('@11ty/eleventy-plugin-vite') const { useDocument } = require('@terrace/js/document') const { createFileReader } = require('@terrace/js/readers/node-readline') @@ -15,12 +16,27 @@ module.exports = function (config) { async compile(content) { return async () => content }, - async getData(inputPath) { + getData(inputPath) { const doc = useDocument(createFileReader(inputPath)) - return await parsePage(doc) + return parsePage(doc) } }) + HighlightJS.registerLanguage('terrace', () => ({ + name: 'Terrace', + contains: [ + { + className: 'keyword', + begin: /^\s*(.*?)(?:\s|$)/, + relevance: 1 + } + ] + })) + + config.addFilter("highlight", function(value, language) { + return HighlightJS.highlight(value, { language }).value + }) + return { dir: { input: 'src', diff --git a/docs/package.json b/docs/package.json index 597b9f0..598e7c8 100644 --- a/docs/package.json +++ b/docs/package.json @@ -11,6 +11,7 @@ "@11ty/eleventy-plugin-vite": "^4.0.0", "@tailwindcss/typography": "^0.5.9", "@terrace/js": "workspace:*", + "highlight.js": "^11.7.0", "marked": "^4.2.12", "tailwindcss": "^3.2.6", "vite": "^3.2.3" diff --git a/docs/parser/helpers.js b/docs/parser/helpers.js index a4518b7..1c71356 100644 --- a/docs/parser/helpers.js +++ b/docs/parser/helpers.js @@ -6,8 +6,7 @@ module.exports.contentAsText = async function(doc, rootLevel) { let contentDepth = -1 while(await next(rootLevel)) { - if (!line()) continue - if (contentDepth === -1) contentDepth = level() + if (contentDepth === -1 && !!line()) contentDepth = level() const indent = ''.padStart(level() - contentDepth, ' ') linesAsArray.push(indent + line()) diff --git a/docs/parser/nodes/code-example.js b/docs/parser/nodes/CodeExample.js similarity index 95% rename from docs/parser/nodes/code-example.js rename to docs/parser/nodes/CodeExample.js index 34d2a0a..e92839a 100644 --- a/docs/parser/nodes/code-example.js +++ b/docs/parser/nodes/CodeExample.js @@ -5,7 +5,7 @@ const languages = ['terrace', 'json', 'yaml', 'toml', 'javascript', 'typescript' module.exports = async (doc, rootLevel) => { const { next, level, line, head, tail } = doc const codeExample = { - type: 'code-example', + type: 'CodeExample', languages: {} } diff --git a/docs/parser/nodes/markdown.js b/docs/parser/nodes/Markdown.js similarity index 89% rename from docs/parser/nodes/markdown.js rename to docs/parser/nodes/Markdown.js index 7005bb8..4f03879 100644 --- a/docs/parser/nodes/markdown.js +++ b/docs/parser/nodes/Markdown.js @@ -3,7 +3,7 @@ const marked = require('marked') module.exports = async (...args) => { return { - type: `markdown`, + type: `Markdown`, text: marked.parse(await contentAsText(...args)) } } diff --git a/docs/parser/nodes/node.js b/docs/parser/nodes/Node.js similarity index 100% rename from docs/parser/nodes/node.js rename to docs/parser/nodes/Node.js diff --git a/docs/parser/nodes/index.js b/docs/parser/nodes/index.js index afaaf9b..6b0d086 100644 --- a/docs/parser/nodes/index.js +++ b/docs/parser/nodes/index.js @@ -1,7 +1,7 @@ -const parseNode = require('./node.js') +const parseNode = require('./Node.js') -module.exports.section = parseNode -module.exports.div = parseNode -module.exports.logo = doc => ({ type: `logo` }) -module.exports.markdown = require('./markdown.js') -module.exports['code-example'] = require('./code-example.js') +module.exports.Section = parseNode +module.exports.Div = parseNode +module.exports.Logo = doc => ({ type: `Logo` }) +module.exports.Markdown = require('./Markdown.js') +module.exports.CodeExample = require('./CodeExample.js') diff --git a/docs/parser/page.js b/docs/parser/page.js index 36aa075..790525e 100644 --- a/docs/parser/page.js +++ b/docs/parser/page.js @@ -4,7 +4,7 @@ module.exports = async function(doc) { const { next, line, match, tail, level, head } = doc const pageData = { - type: `page`, + type: `Page`, title: '', description: [], layout: '', @@ -21,8 +21,8 @@ module.exports = async function(doc) { pageData.description.push(line(l)) } } - else if (match('section')) { - pageData.children.push(await knownNodes.section(doc, level())) + else if (match('Section')) { + pageData.children.push(await knownNodes.Section(doc, level())) } } diff --git a/docs/src/_includes/layout.njk b/docs/src/_includes/layout.njk index 3195222..523d100 100644 --- a/docs/src/_includes/layout.njk +++ b/docs/src/_includes/layout.njk @@ -1,12 +1,20 @@ +{% from "nodes/Node.njk" import Node %} + + + {{ title }} + - + + {% for child in children %} + {{ Node(child.type, child) }} + {% endfor %} diff --git a/docs/src/_includes/nodes/CodeExample.njk b/docs/src/_includes/nodes/CodeExample.njk new file mode 100644 index 0000000..f7f047b --- /dev/null +++ b/docs/src/_includes/nodes/CodeExample.njk @@ -0,0 +1,41 @@ +{% +set languageMeta = { + 'terrace': { name: 'Terrace', icon: '' }, + 'json': { name: 'JSON', icon: '' }, + 'yaml': { name: 'YAML', icon: '' }, + 'toml': { name: 'TOML', icon: '' }, + 'c': { name: 'C', icon: '' }, + 'javascript': { name: 'JavaScript', icon: '' }, + 'typescript': { name: 'TypeScript', icon: '' }, + 'python': { name: 'Python', icon: '' } +} +%} + +{% macro render(node) %} +
+ {% macro Language(id, code, isFirst) %} +
+ +
{{ languageMeta[id].icon | safe }}
+ {{ languageMeta[id].name }} + + 
{{ code | highlight(id) | safe }}
+
+ {% endmacro %} + + {% set isFirst = true %} + {% for id, code in node.languages %} + {{ Language(id, code, true if isFirst else false) }} + {% set isFirst = false %} + {% endfor %} +
+{% endmacro %} diff --git a/docs/src/_includes/nodes/Div.njk b/docs/src/_includes/nodes/Div.njk new file mode 100644 index 0000000..244d27a --- /dev/null +++ b/docs/src/_includes/nodes/Div.njk @@ -0,0 +1,9 @@ +{% from "./Node.njk" import Node %} + +{% macro render(node) %} +
+ {% for child in node.children %} + {{ Node(child.type, child) }} + {% endfor %} +
+{% endmacro %} diff --git a/docs/src/_includes/nodes/Logo.njk b/docs/src/_includes/nodes/Logo.njk new file mode 100644 index 0000000..392f957 --- /dev/null +++ b/docs/src/_includes/nodes/Logo.njk @@ -0,0 +1,2 @@ +{% macro render(node) %} +{% endmacro %} diff --git a/docs/src/_includes/nodes/Markdown.njk b/docs/src/_includes/nodes/Markdown.njk new file mode 100644 index 0000000..22d68df --- /dev/null +++ b/docs/src/_includes/nodes/Markdown.njk @@ -0,0 +1,5 @@ +{% macro render(node) %} +
+ {{ node.text | safe }} +
+{% endmacro %} diff --git a/docs/src/_includes/nodes/Node.njk b/docs/src/_includes/nodes/Node.njk new file mode 100644 index 0000000..5c3b5e2 --- /dev/null +++ b/docs/src/_includes/nodes/Node.njk @@ -0,0 +1,4 @@ +{% macro Node(name, params) %} + {% from "./" + name + ".njk" import render %} + {{ render(params) }} +{% endmacro %} diff --git a/docs/src/_includes/nodes/Section.njk b/docs/src/_includes/nodes/Section.njk new file mode 100644 index 0000000..88cf34b --- /dev/null +++ b/docs/src/_includes/nodes/Section.njk @@ -0,0 +1,9 @@ +{% from "./Node.njk" import Node %} + +{% macro render(node) %} +
+ {% for child in node.children %} + {{ Node(child.type, child) }} + {% endfor %} +
+{% endmacro %} diff --git a/docs/src/index.tce b/docs/src/index.tce index afaebe8..9e9af3b 100644 --- a/docs/src/index.tce +++ b/docs/src/index.tce @@ -4,23 +4,24 @@ description A simple structured data syntax for configuration, content authoring, and DSLs. Terrace gets out of your way to let you just write -section light +Section light class flex gap-16 - div + Div class flex flex-column gap-16 - logo + Logo - markdown + Markdown A simple structured data syntax for - **Configuration** - **Content authoring** - **DSLs** + Terrace gets out of your way to let you - **just write** - code-example + CodeExample terrace title Terrace - A simple structured data language description @@ -31,13 +32,14 @@ section light - **Configuration** - **Content authoring** - **DSLs** + Terrace gets out of your way to let you - **just write** json { "title": "Terrace - A simple structured data language", "description": "A simple structured data syntax for configuration, content authoring, and DSLs.\nTerrace gets out of your way to let you just write", - "markdown": "A simple structured data syntax for\n - **Configuration**\n - **Content authoring**\n - **DSLs**\nTerrace gets out of your way to let you\n - **just write**" + "markdown": "A simple structured data syntax for\n - **Configuration**\n - **Content authoring**\n - **DSLs**\n\nTerrace gets out of your way to let you\n - **just write**" } yaml title: Terrace - A simple structured data language @@ -49,6 +51,7 @@ section light - **Configuration** - **Content authoring** - **DSLs** + Terrace gets out of your way to let you - **just write** toml @@ -61,5 +64,6 @@ section light - **Configuration** - **Content authoring** - **DSLs** + Terrace gets out of your way to let you - **just write**""" diff --git a/docs/src/main.js b/docs/src/main.js index 20396d7..212da11 100644 --- a/docs/src/main.js +++ b/docs/src/main.js @@ -1 +1,2 @@ import './styles/main.css' +import 'highlight.js/styles/atom-one-dark.css' diff --git a/docs/src/styles/main.css b/docs/src/styles/main.css index b5c61c9..b226014 100644 --- a/docs/src/styles/main.css +++ b/docs/src/styles/main.css @@ -1,3 +1,11 @@ @tailwind base; @tailwind components; @tailwind utilities; + +details summary { + list-style: none; +} + +details summary::-webkit-details-marker, details summary::marker { + display: none !important; +} diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js index 8823eeb..c90727d 100644 --- a/docs/tailwind.config.js +++ b/docs/tailwind.config.js @@ -1,11 +1,54 @@ const defaultTheme = require('tailwindcss/defaultTheme'); +const colors = require('tailwindcss/colors') module.exports = { - content: ['./src/**/*.html', './src/**/*.tce'], + content: ['./src/**/*.njk', './src/**/*.tce'], theme: { + colors: { + ...colors, + primary: { + DEFAULT: '#4DB844', + 50: '#CBEBC9', + 100: '#BDE5BA', + 200: '#A1DA9C', + 300: '#84CF7E', + 400: '#68C460', + 500: '#4DB844', + 600: '#2A8823', + 700: '#2E6E28', + 800: '#1E481B', + 900: '#0F230D' + }, + neutral: { + DEFAULT: '#0E2B45', + 50: '#D4EAFF', + 100: '#BFDEF9', + 200: '#97C5EE', + 300: '#6EACE4', + 400: '#4993D6', + 500: '#287AC4', + 600: '#1F609A', + 700: '#17456F', + 800: '#0E2B45', + 900: '#05111B' + }, + warn: colors.orange, + danger: colors.red, + success: colors.green, + info: colors.sky, + }, + fontSize: { + sm: '0.8rem', + base: '1.125rem', + xl: '1.25rem', + '2xl': '1.563rem', + '3xl': '1.953rem', + '4xl': '2.441rem', + '5xl': '3.052rem', + }, extend: { fontFamily: { - sans: ['Inter var', ...defaultTheme.fontFamily.sans], + sans: ['Fredoka', ...defaultTheme.fontFamily.sans], }, }, }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 33d8417..c5096cb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -18,6 +18,7 @@ importers: '@11ty/eleventy-plugin-vite': ^4.0.0 '@tailwindcss/typography': ^0.5.9 '@terrace/js': workspace:* + highlight.js: ^11.7.0 marked: ^4.2.12 tailwindcss: ^3.2.6 vite: ^3.2.3 @@ -26,6 +27,7 @@ importers: '@11ty/eleventy-plugin-vite': 4.0.0 '@tailwindcss/typography': 0.5.9_tailwindcss@3.2.6 '@terrace/js': link:../packages/js + highlight.js: 11.7.0 marked: 4.2.12 tailwindcss: 3.2.6 vite: 3.2.5 @@ -2272,6 +2274,11 @@ packages: function-bind: 1.1.1 dev: true + /highlight.js/11.7.0: + resolution: {integrity: sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==} + engines: {node: '>=12.0.0'} + dev: true + /html-escaper/2.0.2: resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==} dev: true