tsondb 0.7.4 → 0.7.6

package/dist/src/bin/tsondb.js

@@ -84,7 +84,7 @@ switch (passedArguments.command.name) {
         break;
     case "serve":
         debug(`running command: serve`);
-        await serve(config.schema, config.dataRootPath, config.defaultLocales, config.homeLayoutSections, config.serverOptions);
+        await serve(config.schema, config.dataRootPath, config.defaultLocales, config.homeLayoutSections, config.serverOptions, config.customStylesheetPath);
         break;
     case "validate":
         debug(`running command: validate`);

package/dist/src/node/config.d.ts

@@ -8,6 +8,7 @@ export type Config = {
     defaultLocales: string[];
     dataRootPath: string;
     homeLayoutSections?: HomeLayoutSection[];
+    customStylesheetPath?: string;
 };
 export type ServerOptions = {
     port: number;

package/dist/src/node/index.d.ts

@@ -9,7 +9,7 @@ type ValidationOptions = {
 };
 export declare const validate: (schema: Schema, dataRootPath: string, options?: Partial<ValidationOptions>) => Promise<void>;
 export declare const generateAndValidate: (schema: Schema, outputs: Output[], dataRootPath: string, validationOptions?: Partial<ValidationOptions>) => Promise<void>;
-export declare const serve: (schema: Schema, dataRootPath: string, defaultLocales: string[], homeLayoutSections?: HomeLayoutSection[], serverOptions?: Partial<ServerOptions>) => Promise<void>;
+export declare const serve: (schema: Schema, dataRootPath: string, defaultLocales: string[], homeLayoutSections?: HomeLayoutSection[], serverOptions?: Partial<ServerOptions>, customStylesheetPath?: string) => Promise<void>;
 export declare const generateValidateAndServe: (schema: Schema, outputs: Output[], dataRootPath: string, defaultLocales: string[], homeLayoutSections?: HomeLayoutSection[], serverOptions?: Partial<ServerOptions>, validationOptions?: Partial<ValidationOptions>) => Promise<void>;
 export declare const format: (schema: Schema, dataRootPath: string) => Promise<void>;
 export {};

package/dist/src/node/index.js

@@ -57,7 +57,7 @@ export const generateAndValidate = async (schema, outputs, dataRootPath, validat
     const instancesByEntityName = await getInstancesByEntityName(dataRootPath, entities);
     _validate(dataRootPath, entities, instancesByEntityName, validationOptions);
 };
-export const serve = async (schema, dataRootPath, defaultLocales, homeLayoutSections, serverOptions) => {
+export const serve = async (schema, dataRootPath, defaultLocales, homeLayoutSections, serverOptions, customStylesheetPath) => {
     if (defaultLocales.length === 0) {
         throw new Error("At least one default locale must be specified to start the server.");
     }
@@ -66,7 +66,7 @@ export const serve = async (schema, dataRootPath, defaultLocales, homeLayoutSect
     debug("prepared folders");
     const instancesByEntityName = await getInstancesByEntityName(dataRootPath, entities);
     debug("loaded instances");
-    await createServer(schema, dataRootPath, instancesByEntityName, defaultLocales, homeLayoutSections, serverOptions);
+    await createServer(schema, dataRootPath, instancesByEntityName, defaultLocales, homeLayoutSections, serverOptions, customStylesheetPath);
 };
 export const generateValidateAndServe = async (schema, outputs, dataRootPath, defaultLocales, homeLayoutSections, serverOptions, validationOptions) => {
     await generateOutputs(schema, outputs);

package/dist/src/node/server/index.d.ts

@@ -35,4 +35,4 @@ declare global {
         }
     }
 }
-export declare const createServer: (schema: Schema, dataRootPath: string, instancesByEntityName: InstancesByEntityName, defaultLocales: string[], homeLayoutSections?: HomeLayoutSection[], options?: Partial<ServerOptions>) => Promise<void>;
+export declare const createServer: (schema: Schema, dataRootPath: string, instancesByEntityName: InstancesByEntityName, defaultLocales: string[], homeLayoutSections?: HomeLayoutSection[], options?: Partial<ServerOptions>, customStylesheetPath?: string) => Promise<void>;

package/dist/src/node/server/index.js

@@ -16,7 +16,7 @@ const staticNodeModule = (moduleName) => {
     }
     return express.static(dirname(pathToPackageJson));
 };
-export const createServer = async (schema, dataRootPath, instancesByEntityName, defaultLocales, homeLayoutSections, options) => {
+export const createServer = async (schema, dataRootPath, instancesByEntityName, defaultLocales, homeLayoutSections, options, customStylesheetPath) => {
     const { port } = { ...defaultOptions, ...options };
     const app = express();
     app.use(express.static(join(import.meta.dirname, "../../../../public")));
@@ -44,6 +44,15 @@ export const createServer = async (schema, dataRootPath, instancesByEntityName,
             "preact-iso": "/js/node_modules/preact-iso/src/index.js",
         },
     }, null, 2);
+    const customStylesheetLinkHeader = customStylesheetPath
+        ? `
+  <link rel="stylesheet" href="/css/custom.css">`
+        : "";
+    if (customStylesheetPath) {
+        app.use("/css/custom.css", (_req, res) => {
+            res.sendFile(customStylesheetPath);
+        });
+    }
     app.get(/^\/.*/, (_req, res) => {
         res.send(`<!DOCTYPE html>
 <html lang="en">
@@ -51,7 +60,7 @@ export const createServer = async (schema, dataRootPath, instancesByEntityName,
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>TSONDB</title>
-  <link rel="stylesheet" href="/css/styles.css">
+  <link rel="stylesheet" href="/css/styles.css">${customStylesheetLinkHeader}
   <script type="importmap">${importMap}</script>
 </head>
 <body>

package/dist/src/shared/utils/markdown.d.ts

@@ -20,6 +20,10 @@ export type InlineMarkdownNode = {
 export type BlockMarkdownNode = {
     kind: "paragraph";
     content: InlineMarkdownNode[];
+} | {
+    kind: "heading";
+    level: number;
+    content: InlineMarkdownNode[];
 } | {
     kind: "list";
     ordered: boolean;
@@ -38,6 +42,9 @@ export type BlockSyntaxMarkdownNode = InlineMarkdownNode | {
 } | {
     kind: "tablemarker";
     content: string;
+} | {
+    kind: "headingmarker";
+    content: string;
 };
 export declare const parseBlockMarkdown: (text: string) => BlockMarkdownNode[];
 export declare const parseBlockMarkdownForSyntaxHighlighting: (text: string) => BlockSyntaxMarkdownNode[];

package/dist/src/shared/utils/markdown.js

@@ -234,6 +234,19 @@ const paragraphRule = {
         ...nodesForTrailingWhitespace(result[2]),
     ],
 };
+const headingRule = {
+    pattern: /^(#+)( +)([^\s\n][^\n]*?)(\n{2,}|\s*$)/,
+    map: result => ({
+        kind: "heading",
+        level: result[1]?.length ?? 1,
+        content: parseInlineMarkdown(result[3] ?? "", false),
+    }),
+    mapHighlighting: result => [
+        { kind: "headingmarker", content: (result[1] ?? "") + (result[2] ?? "") },
+        ...parseInlineMarkdown(result[3] ?? "", true),
+        ...nodesForTrailingWhitespace(result[4]),
+    ],
+};
 const removeSurroundingPipes = (text) => text.replace(/^\|/, "").replace(/\|$/, "");
 const tableMarker = (text) => ({
     kind: "tablemarker",
@@ -273,7 +286,7 @@ const tableRule = {
         ...nodesForTrailingWhitespace(result[6]),
     ],
 };
-const blockRules = [tableRule, listRule, paragraphRule];
+const blockRules = [headingRule, tableRule, listRule, paragraphRule];
 const parseActiveBlockRule = (rule, res) => [
     rule.map(res),
 ];

package/dist/src/web/components/Git.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { useLocation } from "preact-iso";
-import { useCallback, useEffect, useState } from "preact/hooks";
+import { useCallback, useContext, useEffect, useState } from "preact/hooks";
 import { getGitStatusForDisplay, getLabelForGitStatus, isChangedInIndex, isChangedInWorkingDir, } from "../../shared/utils/git.js";
 import { getAllEntities } from "../api/declarations.js";
 import { commitStagedFiles, createBranch, getBranches, getStatus, pullCommits, pushCommits, stageAllFiles, stageFileOfEntity, switchBranch, unstageAllFiles, unstageFileOfEntity, } from "../api/git.js";
+import { GitContext } from "../context/git.js";
 import { useSetting } from "../hooks/useSettings.js";
 const filterFilesForDisplay = (predicate, entities, data) => Object.entries(data.instances)
     .map(([entityName, instances]) => [
@@ -23,7 +24,7 @@ const GitFileList = ({ filesByEntity, onFile, isIndex = false }) => filesByEntit
                 }) })] }, entityName))) }));
 export const Git = () => {
     const [locales] = useSetting("displayedLocales");
-    const [isOpen, setIsOpen] = useState(false);
+    const [isOpen] = useContext(GitContext);
     const [commitsAhead, setCommitsAhead] = useState(0);
     const [commitsBehind, setCommitsBehind] = useState(0);
     const [commitMessage, setCommitMessage] = useState("");
@@ -157,9 +158,7 @@ export const Git = () => {
             }
         });
     };
-    return (_jsxs("aside", { class: "git", children: [_jsx("h2", { class: "h1-faded", children: "Version Control" }), _jsx("button", { onClick: () => {
-                    setIsOpen(b => !b);
-                }, children: "File changes" }), _jsxs("div", { className: `git-overlay ${isOpen ? "git-overlay--open" : ""}`, children: [_jsxs("div", { class: "sync", children: [_jsxs("button", { onClick: push, children: ["Push", commitsAhead > 0 ? ` (${commitsAhead.toString()})` : ""] }), _jsxs("button", { onClick: pull, children: ["Pull", commitsBehind > 0 ? ` (${commitsBehind.toString()})` : ""] })] }), _jsxs("div", { className: "branch", children: [_jsx("div", { className: "select-wrapper", children: _jsx("select", { value: currentBranch, onInput: onSwitchBranch, children: allBranches.map(branch => (_jsx("option", { value: branch, children: branch }, branch))) }) }), _jsx("button", { onClick: onCreateBranch, children: "New branch" })] }), _jsxs("div", { class: "commit", children: [_jsx("input", { type: "text", value: commitMessage, onInput: event => {
+    return (_jsxs("aside", { class: "git", children: [_jsx("h2", { class: "h1-faded", children: "Version Control" }), _jsxs("div", { className: `git-overlay ${isOpen ? "git-overlay--open" : ""}`, children: [_jsxs("div", { class: "sync", children: [_jsxs("button", { onClick: push, children: ["Push", commitsAhead > 0 ? ` (${commitsAhead.toString()})` : ""] }), _jsxs("button", { onClick: pull, children: ["Pull", commitsBehind > 0 ? ` (${commitsBehind.toString()})` : ""] })] }), _jsxs("div", { className: "branch", children: [_jsx("div", { className: "select-wrapper", children: _jsx("select", { value: currentBranch, onInput: onSwitchBranch, children: allBranches.map(branch => (_jsx("option", { value: branch, children: branch }, branch))) }) }), _jsx("button", { onClick: onCreateBranch, children: "New branch" })] }), _jsxs("div", { class: "commit", children: [_jsx("input", { type: "text", value: commitMessage, onInput: event => {
                                     setCommitMessage(event.currentTarget.value);
                                 }, placeholder: "added X to instance Y, \u2026" }), _jsx("button", { onClick: commit, disabled: commitMessage.length === 0 || indexFiles.length === 0, children: "Commit" })] }), _jsxs("div", { className: "git-section-title", children: [_jsx("h3", { children: "Files to be committed" }), _jsx("button", { onClick: unstageAll, children: "Unstage all" })] }), _jsx(GitFileList, { filesByEntity: indexFiles, isIndex: true, onFile: unstage }), _jsxs("div", { className: "git-section-title", children: [_jsx("h3", { children: "Working tree changes" }), _jsx("button", { onClick: stageAll, children: "Stage all" })] }), _jsx(GitFileList, { filesByEntity: workingTreeFiles, onFile: stage })] })] }));
 };

package/dist/src/web/components/Layout.js

@@ -1,5 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+import { useContext } from "preact/hooks";
+import { GitContext } from "../context/git.js";
 import { Settings } from "./Settings.js";
 export const Layout = ({ breadcrumbs, children }) => {
-    return (_jsxs(_Fragment, { children: [_jsxs("header", { children: [_jsx("nav", { children: _jsx("ol", { children: breadcrumbs.map(({ url, label }) => (_jsx("li", { children: _jsx("a", { href: url, children: label }) }, url))) }) }), _jsx(Settings, {})] }), _jsx("main", { children: children })] }));
+    const [_, setIsGitOpen] = useContext(GitContext);
+    return (_jsxs(_Fragment, { children: [_jsxs("header", { children: [_jsx("nav", { children: _jsx("ol", { children: breadcrumbs.map(({ url, label }) => (_jsx("li", { children: _jsx("a", { href: url, children: label }) }, url))) }) }), _jsxs("div", { class: "nav-buttons", children: [_jsx("button", { class: "git-toggle", onClick: () => {
+                                    setIsGitOpen(b => !b);
+                                }, children: "File changes" }), _jsx(Settings, {})] })] }), _jsx("main", { children: children })] }));
 };

package/dist/src/web/components/typeInputs/StringTypeInput.js

@@ -12,7 +12,7 @@ export const StringTypeInput = ({ type, value, disabled, onChange }) => {
     const errors = validateStringConstraints(type, value);
     return (_jsx("div", { class: "field field--string", children: isMarkdown ? (_jsxs(_Fragment, { children: [_jsxs("div", { class: "editor editor--markdown", children: [_jsxs("div", { class: "textarea-grow-wrap", children: [_jsx("textarea", { value: value, minLength: minLength, maxLength: maxLength, onInput: event => {
                                         onChange(event.currentTarget.value);
-                                    }, "aria-invalid": errors.length > 0, disabled: disabled }), _jsxs("p", { class: "help", children: ["This textarea supports", " ", _jsx("a", { href: "https://www.markdownguide.org/getting-started/", target: "_blank", rel: "noreferrer", children: "Markdown" }), "."] }), _jsx(MarkdownHighlighting, { class: "textarea-grow-wrap__mirror editor-highlighting", string: value })] }), _jsx(ValidationErrors, { disabled: disabled, errors: errors })] }), _jsx("div", { class: "preview", children: _jsx(Markdown, { string: value }) })] })) : (_jsxs("div", { class: "editor", children: [_jsx("input", { type: "text", value: value, minLength: minLength, maxLength: maxLength, pattern: pattern === undefined
+                                    }, "aria-invalid": errors.length > 0, disabled: disabled }), _jsxs("p", { class: "help", children: ["This textarea supports", " ", _jsx("a", { href: "https://www.markdownguide.org/getting-started/", target: "_blank", rel: "noreferrer", children: "Markdown" }), "."] }), _jsx(MarkdownHighlighting, { class: "textarea-grow-wrap__mirror editor-highlighting", string: value })] }), _jsx(ValidationErrors, { disabled: disabled, errors: errors })] }), _jsx("div", { class: "preview", children: _jsx(Markdown, { string: value, outerHeadingLevel: 2 }) })] })) : (_jsxs("div", { class: "editor", children: [_jsx("input", { type: "text", value: value, minLength: minLength, maxLength: maxLength, pattern: pattern === undefined
                         ? undefined
                         : pattern.startsWith("^(?:") && pattern.endsWith(")$")
                             ? pattern.slice(4, -2)

package/dist/src/web/context/git.d.ts

@@ -0,0 +1,3 @@
+import type { SetStateAction } from "preact/compat";
+import type { Dispatch } from "preact/hooks";
+export declare const GitContext: import("preact").Context<[isOpen: boolean, setIsOpen: Dispatch<SetStateAction<boolean>>]>;

package/dist/src/web/context/git.js

@@ -0,0 +1,2 @@
+import { createContext } from "preact";
+export const GitContext = createContext([false, () => { }]);

package/dist/src/web/index.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { render } from "preact";
 import { LocationProvider, Route, Router, useLocation } from "preact-iso";
-import { useEffect } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import { getAllEntities } from "./api/declarations.js";
 import { getWebConfig } from "./api/index.js";
 import { Git } from "./components/Git.js";
 import { ConfigContext } from "./context/config.js";
 import { EntitiesContext } from "./context/entities.js";
+import { GitContext } from "./context/git.js";
 import { SettingsContext } from "./context/settings.js";
 import { useMappedAPIResource } from "./hooks/useMappedAPIResource.js";
 import { useSettings } from "./hooks/useSettings.js";
@@ -20,6 +21,7 @@ const mapEntities = (data) => data.declarations
     .sort((a, b) => a.declaration.name.localeCompare(b.declaration.name));
 const App = ({ config }) => {
     const settingsContext = useSettings(config);
+    const [isGitOpen, setIsGitOpen] = useState(false);
     const [entities, reloadEntities] = useMappedAPIResource(getAllEntities, mapEntities, settingsContext.settings.displayedLocales);
     const location = useLocation();
     useEffect(() => {
@@ -27,7 +29,7 @@ const App = ({ config }) => {
             alert("Error reloading entities: " + String(error));
         });
     }, [location.path, reloadEntities]);
-    return (_jsx(ConfigContext.Provider, { value: config, children: _jsx(SettingsContext.Provider, { value: settingsContext, children: _jsx(LocationProvider, { children: _jsxs(EntitiesContext.Provider, { value: { entities: entities ?? [], reloadEntities }, children: [_jsxs(Router, { children: [_jsx(Route, { path: "/", component: Home }), _jsx(Route, { path: "/entities/:name", component: Entity }), _jsx(Route, { path: "/entities/:name/instances/create", component: CreateInstance }), _jsx(Route, { path: "/entities/:name/instances/:id", component: Instance }), _jsx(Route, { default: true, component: NotFound })] }), _jsx(Git, {})] }) }) }) }));
+    return (_jsx(ConfigContext.Provider, { value: config, children: _jsx(SettingsContext.Provider, { value: settingsContext, children: _jsx(GitContext.Provider, { value: [isGitOpen, setIsGitOpen], children: _jsx(LocationProvider, { children: _jsxs(EntitiesContext.Provider, { value: { entities: entities ?? [], reloadEntities }, children: [_jsxs(Router, { children: [_jsx(Route, { path: "/", component: Home }), _jsx(Route, { path: "/entities/:name", component: Entity }), _jsx(Route, { path: "/entities/:name/instances/create", component: CreateInstance }), _jsx(Route, { path: "/entities/:name/instances/:id", component: Instance }), _jsx(Route, { default: true, component: NotFound })] }), _jsx(Git, {})] }) }) }) }) }));
 };
 const config = await getWebConfig();
 const root = document.getElementById("app");

package/dist/src/web/utils/BlockMarkdown.d.ts

@@ -2,6 +2,7 @@ import type { FunctionalComponent } from "preact";
 import type { BlockMarkdownNode } from "../../shared/utils/markdown.ts";
 type Props = {
     node: BlockMarkdownNode;
+    outerHeadingLevel?: number;
 };
 export declare const BlockMarkdown: FunctionalComponent<Props>;
 export {};

package/dist/src/web/utils/BlockMarkdown.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { InlineMarkdown } from "./InlineMarkdown.js";
-export const BlockMarkdown = ({ node }) => {
+export const BlockMarkdown = ({ node, outerHeadingLevel = 0 }) => {
     switch (node.kind) {
         case "paragraph":
             return (_jsx("p", { children: node.content.map((inline, ii) => (_jsx(InlineMarkdown, { node: inline }, ii))) }));
+        case "heading":
+            const Tag = `h${(node.level + outerHeadingLevel).toString()}`;
+            return (_jsx(Tag, { children: node.content.map((inline, ii) => (_jsx(InlineMarkdown, { node: inline }, ii))) }));
         case "list":
             if (node.ordered) {
                 return (_jsx("ol", { children: node.content.map((item, ii) => (_jsx("li", { children: item.content.map((inline, iii) => (_jsx(InlineMarkdown, { node: inline }, iii))) }, ii))) }));

package/dist/src/web/utils/BlockMarkdownHighlighting.js

@@ -6,6 +6,8 @@ export const BlockMarkdownHighlighting = ({ node }) => {
             return _jsx("span", { class: "list-item-marker", children: node.content });
         case "tablemarker":
             return _jsx("span", { class: "table-marker", children: node.content });
+        case "headingmarker":
+            return _jsx("span", { class: "heading-marker", children: node.content });
         default:
             return _jsx(InlineMarkdown, { node: node });
     }

package/dist/src/web/utils/Markdown.d.ts

@@ -2,6 +2,7 @@ import type { FunctionalComponent } from "preact";
 type Props = {
     class?: string;
     string: string;
+    outerHeadingLevel?: number;
 };
 export declare const Markdown: FunctionalComponent<Props>;
 export {};

package/dist/src/web/utils/Markdown.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment } from "preact/jsx-runtime";
 import { parseBlockMarkdown } from "../../shared/utils/markdown.js";
 import { BlockMarkdown } from "./BlockMarkdown.js";
-export const Markdown = ({ class: className, string }) => {
+export const Markdown = ({ class: className, string, outerHeadingLevel, }) => {
     const blocks = parseBlockMarkdown(string);
-    const blockElements = blocks.map((block, i) => (_jsx(BlockMarkdown, { node: block }, `md-block-${i.toString()}`)));
+    const blockElements = blocks.map((block, i) => (_jsx(BlockMarkdown, { node: block, outerHeadingLevel: outerHeadingLevel }, `md-block-${i.toString()}`)));
     if (className) {
         return _jsx("div", { class: className, children: blockElements });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tsondb",
-  "version": "0.7.4",
+  "version": "0.7.6",
   "description": "",
   "license": "ISC",
   "author": "Lukas Obermann",

package/public/css/styles.css

@@ -54,6 +54,7 @@
   --highlight-color-list-item-marker: rgb(195, 58, 237);
   --highlight-color-table-marker: rgb(237, 58, 118);
   --highlight-color-attributed: rgb(48, 81, 228);
+  --highlight-color-heading-marker: rgb(62, 189, 191);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -87,6 +88,7 @@
     --highlight-color-list-item-marker: rgb(220, 133, 245);
     --highlight-color-table-marker: rgb(244, 135, 171);
     --highlight-color-attributed: rgb(137, 157, 244);
+    --highlight-color-heading-marker: rgb(140, 229, 231);
     --shadow-color: rgba(0, 0, 0, 0);
   }
 }
@@ -134,6 +136,11 @@ header nav ol {
   margin: 0;
 }
 
+.nav-buttons {
+  display: flex;
+  gap: 0.5rem;
+}
+
 main {
   grid-area: main;
 }
@@ -682,6 +689,10 @@ form > .field--container {
   color: var(--highlight-color-table-marker);
 }
 
+.editor-highlighting .heading-marker {
+  color: var(--highlight-color-heading-marker);
+}
+
 .preview .attributed {
   text-decoration-line: underline;
   text-decoration-style: dashed;
@@ -875,6 +886,12 @@ main:has(.form-footer) {
 
 aside.git {
   grid-area: aside;
+  position: absolute;
+  top: 5rem;
+  right: 0;
+  width: 30rem;
+  max-width: calc(100% - 1.5rem);
+  max-height: calc(100% - 6.5rem);
 }
 
 aside.git h2 {
@@ -886,13 +903,18 @@ aside.git h2 {
     width: 30rem;
     border-left: 1px solid var(--separator-color);
     padding-left: 1rem;
+    top: unset;
+    right: unset;
+    position: static;
+    max-height: none;
+    max-width: none;
   }
 
   aside.git h2 {
     display: block;
   }
 
-  aside.git > button {
+  .git-toggle {
     display: none;
   }
 }