First work on actual site contents.
This commit is contained in:
Joshua Bemenderfer
parent
4e10b07561
commit
95842b73bd
@ -1,3 +1,4 @@
|
|||||||
|
const HighlightJS = require('highlight.js')
|
||||||
const EleventyVitePlugin = require('@11ty/eleventy-plugin-vite')
|
const EleventyVitePlugin = require('@11ty/eleventy-plugin-vite')
|
||||||
const { useDocument } = require('@terrace/js/document')
|
const { useDocument } = require('@terrace/js/document')
|
||||||
const { createFileReader } = require('@terrace/js/readers/node-readline')
|
const { createFileReader } = require('@terrace/js/readers/node-readline')
|
||||||
@ -15,12 +16,27 @@ module.exports = function (config) {
|
|||||||
async compile(content) {
|
async compile(content) {
|
||||||
return async () => content
|
return async () => content
|
||||||
},
|
},
|
||||||
async getData(inputPath) {
|
getData(inputPath) {
|
||||||
const doc = useDocument(createFileReader(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 {
|
return {
|
||||||
dir: {
|
dir: {
|
||||||
input: 'src',
|
input: 'src',
|
||||||
|
|||||||
@ -11,6 +11,7 @@
|
|||||||
"@11ty/eleventy-plugin-vite": "^4.0.0",
|
"@11ty/eleventy-plugin-vite": "^4.0.0",
|
||||||
"@tailwindcss/typography": "^0.5.9",
|
"@tailwindcss/typography": "^0.5.9",
|
||||||
"@terrace/js": "workspace:*",
|
"@terrace/js": "workspace:*",
|
||||||
|
"highlight.js": "^11.7.0",
|
||||||
"marked": "^4.2.12",
|
"marked": "^4.2.12",
|
||||||
"tailwindcss": "^3.2.6",
|
"tailwindcss": "^3.2.6",
|
||||||
"vite": "^3.2.3"
|
"vite": "^3.2.3"
|
||||||
|
|||||||
@ -6,8 +6,7 @@ module.exports.contentAsText = async function(doc, rootLevel) {
|
|||||||
let contentDepth = -1
|
let contentDepth = -1
|
||||||
|
|
||||||
while(await next(rootLevel)) {
|
while(await next(rootLevel)) {
|
||||||
if (!line()) continue
|
if (contentDepth === -1 && !!line()) contentDepth = level()
|
||||||
if (contentDepth === -1) contentDepth = level()
|
|
||||||
|
|
||||||
const indent = ''.padStart(level() - contentDepth, ' ')
|
const indent = ''.padStart(level() - contentDepth, ' ')
|
||||||
linesAsArray.push(indent + line())
|
linesAsArray.push(indent + line())
|
||||||
|
|||||||
@ -5,7 +5,7 @@ const languages = ['terrace', 'json', 'yaml', 'toml', 'javascript', 'typescript'
|
|||||||
module.exports = async (doc, rootLevel) => {
|
module.exports = async (doc, rootLevel) => {
|
||||||
const { next, level, line, head, tail } = doc
|
const { next, level, line, head, tail } = doc
|
||||||
const codeExample = {
|
const codeExample = {
|
||||||
type: 'code-example',
|
type: 'CodeExample',
|
||||||
languages: {}
|
languages: {}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -3,7 +3,7 @@ const marked = require('marked')
|
|||||||
|
|
||||||
module.exports = async (...args) => {
|
module.exports = async (...args) => {
|
||||||
return {
|
return {
|
||||||
type: `markdown`,
|
type: `Markdown`,
|
||||||
text: marked.parse(await contentAsText(...args))
|
text: marked.parse(await contentAsText(...args))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,7 +1,7 @@
|
|||||||
const parseNode = require('./node.js')
|
const parseNode = require('./Node.js')
|
||||||
|
|
||||||
module.exports.section = parseNode
|
module.exports.Section = parseNode
|
||||||
module.exports.div = parseNode
|
module.exports.Div = parseNode
|
||||||
module.exports.logo = doc => ({ type: `logo` })
|
module.exports.Logo = doc => ({ type: `Logo` })
|
||||||
module.exports.markdown = require('./markdown.js')
|
module.exports.Markdown = require('./Markdown.js')
|
||||||
module.exports['code-example'] = require('./code-example.js')
|
module.exports.CodeExample = require('./CodeExample.js')
|
||||||
|
|||||||
@ -4,7 +4,7 @@ module.exports = async function(doc) {
|
|||||||
const { next, line, match, tail, level, head } = doc
|
const { next, line, match, tail, level, head } = doc
|
||||||
|
|
||||||
const pageData = {
|
const pageData = {
|
||||||
type: `page`,
|
type: `Page`,
|
||||||
title: '',
|
title: '',
|
||||||
description: [],
|
description: [],
|
||||||
layout: '',
|
layout: '',
|
||||||
@ -21,8 +21,8 @@ module.exports = async function(doc) {
|
|||||||
pageData.description.push(line(l))
|
pageData.description.push(line(l))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else if (match('section')) {
|
else if (match('Section')) {
|
||||||
pageData.children.push(await knownNodes.section(doc, level()))
|
pageData.children.push(await knownNodes.Section(doc, level()))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,12 +1,20 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
|
{% from "nodes/Node.njk" import Node %}
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>{{ title }}</title>
|
<title>{{ title }}</title>
|
||||||
<meta name="description" content="{{ description | join(' ') }}"/>
|
<meta name="description" content="{{ description | join(' ') }}"/>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500&display=swap" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="text-base">
|
||||||
|
{% for child in children %}
|
||||||
|
{{ Node(child.type, child) }}
|
||||||
|
{% endfor %}
|
||||||
<script type="module" src="/main.js"></script>
|
<script type="module" src="/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
41
docs/src/_includes/nodes/CodeExample.njk
Normal file
41
docs/src/_includes/nodes/CodeExample.njk
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
{%
|
||||||
|
set languageMeta = {
|
||||||
|
'terrace': { name: 'Terrace', icon: '<svg viewBox="0 0 64 64"><g clip-path="url(#a)"><rect width="64" height="64" fill="#fff" rx="8"/><mask id="b" width="64" height="64" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M0 0h64v64H0V0Z"/></mask><g mask="url(#b)"><path fill="url(#c)" d="M0 0h64v64H0V0Z"/><circle cx="4" cy="14" r="16" fill="url(#d)"/><circle cx="16" cy="27" r="15" fill="url(#e)"/><circle cx="30" cy="50" r="25" fill="url(#f)"/><circle cx="52" cy="57" r="16" fill="url(#g)"/><circle cx=".5" cy="30.5" r="11.5" fill="url(#h)"/><circle cx="16" cy="35" r="8" fill="url(#i)"/><circle cx="37" cy="45" r="13" fill="url(#j)"/><circle cx="15.5" cy="61.5" r="28.5" fill="url(#k)"/><circle cx="40" cy="61" r="8" fill="url(#l)"/><circle cx="23" cy="73" r="23" fill="url(#m)"/></g></g><defs><radialGradient id="d" cx="0" cy="0" r="1" gradientTransform="rotate(73.301 5.218 12.225) scale(23.8636 26.8465)" gradientUnits="userSpaceOnUse"><stop stop-color="#5CCA53"/><stop offset="1" stop-color="#22701B"/></radialGradient><radialGradient id="e" cx="0" cy="0" r="1" gradientTransform="rotate(73.301 1.693 26.631) scale(22.3721 25.1686)" gradientUnits="userSpaceOnUse"><stop stop-color="#5CCA53"/><stop offset="1" stop-color="#22701B"/></radialGradient><radialGradient id="f" cx="0" cy="0" r="1" gradientTransform="matrix(10.71426 35.71429 -40.17862 12.05355 47.857 33.929)" gradientUnits="userSpaceOnUse"><stop stop-color="#5CCA53"/><stop offset="1" stop-color="#22701B"/></radialGradient><radialGradient id="g" cx="0" cy="0" r="1" gradientTransform="rotate(73.301 .322 65.982) scale(23.8636 26.8465)" gradientUnits="userSpaceOnUse"><stop stop-color="#5CCA53"/><stop offset="1" stop-color="#22701B"/></radialGradient><radialGradient id="h" cx="0" cy="0" r="1" gradientTransform="matrix(4.92855 16.42854 -18.48212 5.54462 8.714 23.107)" gradientUnits="userSpaceOnUse"><stop stop-color="#5CCA53"/><stop offset="1" stop-color="#22701B"/></radialGradient><radialGradient id="i" cx="0" cy="0" r="1" gradientTransform="rotate(73.301 -9.207 29.52) scale(11.9318 13.4232)" gradientUnits="userSpaceOnUse"><stop stop-color="#5CCA53"/><stop offset="1" stop-color="#22701B"/></radialGradient><radialGradient id="j" cx="0" cy="0" r="1" gradientTransform="matrix(5.5714 18.5714 -20.89288 6.26785 46.286 36.643)" gradientUnits="userSpaceOnUse"><stop stop-color="#5CCA53"/><stop offset="1" stop-color="#22701B"/></radialGradient><radialGradient id="k" cx="0" cy="0" r="1" gradientTransform="rotate(73.301 -11.088 45.686) scale(42.507 47.8203)" gradientUnits="userSpaceOnUse"><stop stop-color="#5CCA53"/><stop offset="1" stop-color="#22701B"/></radialGradient><radialGradient id="l" cx="0" cy="0" r="1" gradientTransform="rotate(73.301 -14.68 58.65) scale(11.9318 13.4232)" gradientUnits="userSpaceOnUse"><stop stop-color="#5CCA53"/><stop offset="1" stop-color="#22701B"/></radialGradient><radialGradient id="m" cx="0" cy="0" r="1" gradientTransform="rotate(73.301 -19.407 55.604) scale(34.3039 38.5918)" gradientUnits="userSpaceOnUse"><stop stop-color="#5CCA53"/><stop offset="1" stop-color="#22701B"/></radialGradient><linearGradient id="c" x1="31" x2="32" y1="0" y2="64" gradientUnits="userSpaceOnUse"><stop stop-color="#70B8FB"/><stop offset="1" stop-color="#99C9F5" stop-opacity=".27"/></linearGradient><clipPath id="a"><rect width="64" height="64" fill="#fff" rx="8"/></clipPath></defs></svg>' },
|
||||||
|
'json': { name: 'JSON', icon: '<svg viewBox="0 0 160 160"><defs><linearGradient id="linearGradient8385"><stop offset="0"/><stop stop-color="#fff" offset="1"/></linearGradient><linearGradient id="linearGradient3002" x1="-553.27" x2="-666.12" y1="525.91" y2="413.05" gradientTransform="matrix(.99884 0 0 .9987 689.01 -388.84)" gradientUnits="userSpaceOnUse" xlink:href="#linearGradient8385"/><linearGradient id="linearGradient3005" x1="-666.12" x2="-553.27" y1="413.04" y2="525.91" gradientTransform="matrix(.99884 0 0 .9987 689.01 -388.84)" gradientUnits="userSpaceOnUse" xlink:href="#linearGradient8385"/></defs><g fill-rule="evenodd"><path d="m79.865 119.1c35.398 48.255 70.04-13.469 69.989-50.587-0.0602-43.886-44.541-68.414-70.018-68.414-40.892 0-79.836 33.796-79.836 80.036 0 51.396 44.64 79.865 79.836 79.865-7.9645-1.1468-34.506-6.834-34.863-67.967-0.23987-41.347 13.488-57.866 34.805-50.599 0.47743 0.17707 23.514 9.2645 23.514 38.951 0 29.56-23.427 38.715-23.427 38.715z" color="#000000" fill="url(#linearGradient3005)"/><path d="m79.823 41.401c-23.39-8.0619-52.043 11.216-52.043 49.829 0 63.048 46.721 68.77 52.384 68.77 40.892 0 79.836-33.796 79.836-80.036 0-51.396-44.64-79.865-79.836-79.865 9.7481-1.35 52.541 10.55 52.541 69.037 0 38.141-31.953 58.905-52.735 50.033-0.47743-0.17707-23.514-9.2645-23.514-38.951 0-29.56 23.367-38.818 23.367-38.818z" color="#000000" fill="url(#linearGradient3002)"/></g></svg>' },
|
||||||
|
'yaml': { name: 'YAML', icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 470.647" class="bg-white p-[1px]"><polygon id="Y" points="235.793 0 143.978 137.674 143.978 224.949 87.702 224.949 87.702 137.674 0 0 63.25 0 119.018 88.646 175.243 0 235.793 0 235.793 0"/><path id="A" fill="#cb171e" d="M330.294,175.451h-101.861l-20.717,50.024h-45.106l95.38,-224.949h46.137l91.51,224.949h-48.2l-17.144,-50.024zm-16.92,-44.911l-31.226,-82.55l-34.837,82.55h66.063z"/><polygon id="M" points="87.701 250.177 87.701 470.647 135.004 470.647 135.004 318.569 184.509 420.789 221.743 420.789 272.939 314.976 272.939 470.602 318.318 470.602 318.318 250.177 256.358 250.177 201.381 349.883 149.021 250.177 87.701 250.177 87.701 250.177"/><polygon id="L" points="512 422.735 395.638 422.735 395.638 250.125 347.442 250.125 347.442 469.647 512 469.647 512 422.737 512 422.735"/></svg>' },
|
||||||
|
'toml': { name: 'TOML', icon: '<svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><g><polygon class="fill-current text-orange-800" points="99.2359551 -7.08546829e-15 99.2359551 14.3820225 112.179775 14.3820225 112.179775 113.617978 99.2359551 113.617978 99.2359551 128 128 128 128 0"></polygon><polygon class="fill-current text-white" points="32.3595506 41.7078652 32.3595506 25.8876404 95.6404494 25.8876404 95.6404494 41.7078652 71.9101124 41.7078652 71.9101124 110.741573 56.0898876 110.741573 56.0898876 41.7078652"></polygon><polygon class="fill-current text-orange-800" points="28.7640449 0 28.7640449 14.3820225 15.8202247 14.3820225 15.8202247 113.617978 28.7640449 113.617978 28.7640449 128 0 128 0 0"></polygon></g></svg>' },
|
||||||
|
'c': { name: 'C', icon: '<svg viewBox="0 0 128 128"><path fill="#659AD3" d="M115.4 30.7L67.1 2.9c-.8-.5-1.9-.7-3.1-.7-1.2 0-2.3.3-3.1.7l-48 27.9c-1.7 1-2.9 3.5-2.9 5.4v55.7c0 1.1.2 2.4 1 3.5l106.8-62c-.6-1.2-1.5-2.1-2.4-2.7z"></path><path fill="#03599C" d="M10.7 95.3c.5.8 1.2 1.5 1.9 1.9l48.2 27.9c.8.5 1.9.7 3.1.7 1.2 0 2.3-.3 3.1-.7l48-27.9c1.7-1 2.9-3.5 2.9-5.4V36.1c0-.9-.1-1.9-.6-2.8l-106.6 62z"></path><path fill="#fff" d="M85.3 76.1C81.1 83.5 73.1 88.5 64 88.5c-13.5 0-24.5-11-24.5-24.5s11-24.5 24.5-24.5c9.1 0 17.1 5 21.3 12.5l13-7.5c-6.8-11.9-19.6-20-34.3-20-21.8 0-39.5 17.7-39.5 39.5s17.7 39.5 39.5 39.5c14.6 0 27.4-8 34.2-19.8l-12.9-7.6z"></path></svg>' },
|
||||||
|
'javascript': { name: 'JavaScript', icon: '<svg viewBox="0 0 128 128"><path fill="#F0DB4F" d="M1.408 1.408h125.184v125.185H1.408z"></path><path fill="#323330" d="M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724 5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 1.261-3.666.38-8.581zM69.462 58.943H57.753l-.048 30.272c0 6.438.333 12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z"></path></svg>' },
|
||||||
|
'typescript': { name: 'TypeScript', icon: '<svg viewBox="0 0 128 128"><path fill="#fff" d="M22.67 47h99.67v73.67H22.67z"></path><path data-name="original" fill="#007acc" d="M1.5 63.91v62.5h125v-125H1.5zm100.73-5a15.56 15.56 0 017.82 4.5 20.58 20.58 0 013 4c0 .16-5.4 3.81-8.69 5.85-.12.08-.6-.44-1.13-1.23a7.09 7.09 0 00-5.87-3.53c-3.79-.26-6.23 1.73-6.21 5a4.58 4.58 0 00.54 2.34c.83 1.73 2.38 2.76 7.24 4.86 8.95 3.85 12.78 6.39 15.16 10 2.66 4 3.25 10.46 1.45 15.24-2 5.2-6.9 8.73-13.83 9.9a38.32 38.32 0 01-9.52-.1 23 23 0 01-12.72-6.63c-1.15-1.27-3.39-4.58-3.25-4.82a9.34 9.34 0 011.15-.73L82 101l3.59-2.08.75 1.11a16.78 16.78 0 004.74 4.54c4 2.1 9.46 1.81 12.16-.62a5.43 5.43 0 00.69-6.92c-1-1.39-3-2.56-8.59-5-6.45-2.78-9.23-4.5-11.77-7.24a16.48 16.48 0 01-3.43-6.25 25 25 0 01-.22-8c1.33-6.23 6-10.58 12.82-11.87a31.66 31.66 0 019.49.26zm-29.34 5.24v5.12H56.66v46.23H45.15V69.26H28.88v-5a49.19 49.19 0 01.12-5.17C29.08 59 39 59 51 59h21.83z"></path></svg>' },
|
||||||
|
'python': { name: 'Python', icon: '<svg viewBox="0 0 128 128"><linearGradient id="python-original-a" gradientUnits="userSpaceOnUse" x1="70.252" y1="1237.476" x2="170.659" y2="1151.089" gradientTransform="matrix(.563 0 0 -.568 -29.215 707.817)"><stop offset="0" stop-color="#5A9FD4"></stop><stop offset="1" stop-color="#306998"></stop></linearGradient><linearGradient id="python-original-b" gradientUnits="userSpaceOnUse" x1="209.474" y1="1098.811" x2="173.62" y2="1149.537" gradientTransform="matrix(.563 0 0 -.568 -29.215 707.817)"><stop offset="0" stop-color="#FFD43B"></stop><stop offset="1" stop-color="#FFE873"></stop></linearGradient><path fill="url(#python-original-a)" d="M63.391 1.988c-4.222.02-8.252.379-11.8 1.007-10.45 1.846-12.346 5.71-12.346 12.837v9.411h24.693v3.137H29.977c-7.176 0-13.46 4.313-15.426 12.521-2.268 9.405-2.368 15.275 0 25.096 1.755 7.311 5.947 12.519 13.124 12.519h8.491V67.234c0-8.151 7.051-15.34 15.426-15.34h24.665c6.866 0 12.346-5.654 12.346-12.548V15.833c0-6.693-5.646-11.72-12.346-12.837-4.244-.706-8.645-1.027-12.866-1.008zM50.037 9.557c2.55 0 4.634 2.117 4.634 4.721 0 2.593-2.083 4.69-4.634 4.69-2.56 0-4.633-2.097-4.633-4.69-.001-2.604 2.073-4.721 4.633-4.721z" transform="translate(0 10.26)"></path><path fill="url(#python-original-b)" d="M91.682 28.38v10.966c0 8.5-7.208 15.655-15.426 15.655H51.591c-6.756 0-12.346 5.783-12.346 12.549v23.515c0 6.691 5.818 10.628 12.346 12.547 7.816 2.297 15.312 2.713 24.665 0 6.216-1.801 12.346-5.423 12.346-12.547v-9.412H63.938v-3.138h37.012c7.176 0 9.852-5.005 12.348-12.519 2.578-7.735 2.467-15.174 0-25.096-1.774-7.145-5.161-12.521-12.348-12.521h-9.268zM77.809 87.927c2.561 0 4.634 2.097 4.634 4.692 0 2.602-2.074 4.719-4.634 4.719-2.55 0-4.633-2.117-4.633-4.719 0-2.595 2.083-4.692 4.633-4.692z" transform="translate(0 10.26)"></path><radialGradient id="python-original-c" cx="1825.678" cy="444.45" r="26.743" gradientTransform="matrix(0 -.24 -1.055 0 532.979 557.576)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#B8B8B8" stop-opacity=".498"></stop><stop offset="1" stop-color="#7F7F7F" stop-opacity="0"></stop></radialGradient><path opacity=".444" fill="url(#python-original-c)" d="M97.309 119.597c0 3.543-14.816 6.416-33.091 6.416-18.276 0-33.092-2.873-33.092-6.416 0-3.544 14.815-6.417 33.092-6.417 18.275 0 33.091 2.872 33.091 6.417z"></path></svg>' }
|
||||||
|
}
|
||||||
|
%}
|
||||||
|
|
||||||
|
{% macro render(node) %}
|
||||||
|
<div class="text-white text-base relative flex w-full">
|
||||||
|
{% macro Language(id, code, isFirst) %}
|
||||||
|
<details
|
||||||
|
{{ 'open' if isFirst else '' }}
|
||||||
|
class="group first:rounded-tl-md last:rounded-tr-md overflow-hidden"
|
||||||
|
onclick="[...this.parentElement.children].forEach(c => (c.open = false))"
|
||||||
|
>
|
||||||
|
<summary
|
||||||
|
class="flex gap-2 items-center px-4 py-2 cursor-pointer text-neutral-50 group-open:text-primary-500 bg-neutral-800 border-b-2 border-b-neutral-50/25 group-open:border-b-primary-600"
|
||||||
|
>
|
||||||
|
<div class="w-[16px] h-[16px]">{{ languageMeta[id].icon | safe }}</div>
|
||||||
|
{{ 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"
|
||||||
|
onclick="event.preventDefault(); event.stopPropagation();"
|
||||||
|
>{{ code | highlight(id) | safe }}</pre>
|
||||||
|
</details>
|
||||||
|
{% endmacro %}
|
||||||
|
|
||||||
|
{% set isFirst = true %}
|
||||||
|
{% for id, code in node.languages %}
|
||||||
|
{{ Language(id, code, true if isFirst else false) }}
|
||||||
|
{% set isFirst = false %}
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endmacro %}
|
||||||
9
docs/src/_includes/nodes/Div.njk
Normal file
9
docs/src/_includes/nodes/Div.njk
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
{% from "./Node.njk" import Node %}
|
||||||
|
|
||||||
|
{% macro render(node) %}
|
||||||
|
<div class="{{ node.class }}">
|
||||||
|
{% for child in node.children %}
|
||||||
|
{{ Node(child.type, child) }}
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endmacro %}
|
||||||
2
docs/src/_includes/nodes/Logo.njk
Normal file
2
docs/src/_includes/nodes/Logo.njk
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
{% macro render(node) %}
|
||||||
|
{% endmacro %}
|
||||||
5
docs/src/_includes/nodes/Markdown.njk
Normal file
5
docs/src/_includes/nodes/Markdown.njk
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
{% macro render(node) %}
|
||||||
|
<div class="prose text-base">
|
||||||
|
{{ node.text | safe }}
|
||||||
|
</div>
|
||||||
|
{% endmacro %}
|
||||||
4
docs/src/_includes/nodes/Node.njk
Normal file
4
docs/src/_includes/nodes/Node.njk
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{% macro Node(name, params) %}
|
||||||
|
{% from "./" + name + ".njk" import render %}
|
||||||
|
{{ render(params) }}
|
||||||
|
{% endmacro %}
|
||||||
9
docs/src/_includes/nodes/Section.njk
Normal file
9
docs/src/_includes/nodes/Section.njk
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
{% from "./Node.njk" import Node %}
|
||||||
|
|
||||||
|
{% macro render(node) %}
|
||||||
|
<section class="{{ node.class }}">
|
||||||
|
{% for child in node.children %}
|
||||||
|
{{ Node(child.type, child) }}
|
||||||
|
{% endfor %}
|
||||||
|
</section>
|
||||||
|
{% endmacro %}
|
||||||
@ -4,23 +4,24 @@ description
|
|||||||
A simple structured data syntax for configuration, content authoring, and DSLs.
|
A simple structured data syntax for configuration, content authoring, and DSLs.
|
||||||
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 flex gap-16
|
||||||
|
|
||||||
div
|
Div
|
||||||
class flex flex-column gap-16
|
class flex flex-column gap-16
|
||||||
|
|
||||||
logo
|
Logo
|
||||||
|
|
||||||
markdown
|
Markdown
|
||||||
A simple structured data syntax for
|
A simple structured data syntax for
|
||||||
- **Configuration**
|
- **Configuration**
|
||||||
- **Content authoring**
|
- **Content authoring**
|
||||||
- **DSLs**
|
- **DSLs**
|
||||||
|
|
||||||
Terrace gets out of your way to let you
|
Terrace gets out of your way to let you
|
||||||
- **just write**
|
- **just write**
|
||||||
|
|
||||||
code-example
|
CodeExample
|
||||||
terrace
|
terrace
|
||||||
title Terrace - A simple structured data language
|
title Terrace - A simple structured data language
|
||||||
description
|
description
|
||||||
@ -31,13 +32,14 @@ section light
|
|||||||
- **Configuration**
|
- **Configuration**
|
||||||
- **Content authoring**
|
- **Content authoring**
|
||||||
- **DSLs**
|
- **DSLs**
|
||||||
|
|
||||||
Terrace gets out of your way to let you
|
Terrace gets out of your way to let you
|
||||||
- **just write**
|
- **just write**
|
||||||
json
|
json
|
||||||
{
|
{
|
||||||
"title": "Terrace - A simple structured data language",
|
"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",
|
"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
|
yaml
|
||||||
title: Terrace - A simple structured data language
|
title: Terrace - A simple structured data language
|
||||||
@ -49,6 +51,7 @@ section light
|
|||||||
- **Configuration**
|
- **Configuration**
|
||||||
- **Content authoring**
|
- **Content authoring**
|
||||||
- **DSLs**
|
- **DSLs**
|
||||||
|
|
||||||
Terrace gets out of your way to let you
|
Terrace gets out of your way to let you
|
||||||
- **just write**
|
- **just write**
|
||||||
toml
|
toml
|
||||||
@ -61,5 +64,6 @@ section light
|
|||||||
- **Configuration**
|
- **Configuration**
|
||||||
- **Content authoring**
|
- **Content authoring**
|
||||||
- **DSLs**
|
- **DSLs**
|
||||||
|
|
||||||
Terrace gets out of your way to let you
|
Terrace gets out of your way to let you
|
||||||
- **just write**"""
|
- **just write**"""
|
||||||
|
|||||||
@ -1 +1,2 @@
|
|||||||
import './styles/main.css'
|
import './styles/main.css'
|
||||||
|
import 'highlight.js/styles/atom-one-dark.css'
|
||||||
|
|||||||
@ -1,3 +1,11 @@
|
|||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
details summary {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
details summary::-webkit-details-marker, details summary::marker {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|||||||
@ -1,11 +1,54 @@
|
|||||||
const defaultTheme = require('tailwindcss/defaultTheme');
|
const defaultTheme = require('tailwindcss/defaultTheme');
|
||||||
|
const colors = require('tailwindcss/colors')
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
content: ['./src/**/*.html', './src/**/*.tce'],
|
content: ['./src/**/*.njk', './src/**/*.tce'],
|
||||||
theme: {
|
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: {
|
extend: {
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
|
sans: ['Fredoka', ...defaultTheme.fontFamily.sans],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
7
pnpm-lock.yaml
generated
7
pnpm-lock.yaml
generated
@ -18,6 +18,7 @@ importers:
|
|||||||
'@11ty/eleventy-plugin-vite': ^4.0.0
|
'@11ty/eleventy-plugin-vite': ^4.0.0
|
||||||
'@tailwindcss/typography': ^0.5.9
|
'@tailwindcss/typography': ^0.5.9
|
||||||
'@terrace/js': workspace:*
|
'@terrace/js': workspace:*
|
||||||
|
highlight.js: ^11.7.0
|
||||||
marked: ^4.2.12
|
marked: ^4.2.12
|
||||||
tailwindcss: ^3.2.6
|
tailwindcss: ^3.2.6
|
||||||
vite: ^3.2.3
|
vite: ^3.2.3
|
||||||
@ -26,6 +27,7 @@ importers:
|
|||||||
'@11ty/eleventy-plugin-vite': 4.0.0
|
'@11ty/eleventy-plugin-vite': 4.0.0
|
||||||
'@tailwindcss/typography': 0.5.9_tailwindcss@3.2.6
|
'@tailwindcss/typography': 0.5.9_tailwindcss@3.2.6
|
||||||
'@terrace/js': link:../packages/js
|
'@terrace/js': link:../packages/js
|
||||||
|
highlight.js: 11.7.0
|
||||||
marked: 4.2.12
|
marked: 4.2.12
|
||||||
tailwindcss: 3.2.6
|
tailwindcss: 3.2.6
|
||||||
vite: 3.2.5
|
vite: 3.2.5
|
||||||
@ -2272,6 +2274,11 @@ packages:
|
|||||||
function-bind: 1.1.1
|
function-bind: 1.1.1
|
||||||
dev: true
|
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:
|
/html-escaper/2.0.2:
|
||||||
resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
|
resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
|
||||||
dev: true
|
dev: true
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user