BuboBubo/topos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Folding now possible in documentation

Browse Source
This commit is contained in:
Raphaël Forment
2023-11-05 19:17:36 +01:00
parent 01357122a3
commit 086fe54c72
4 changed files with 69 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
index.html
View File

@ -126,8 +126,8 @@
<div id="documentation-page" class="flex flex-row">
<aside class="w-1/8 flex-shrink-0 h-screen overflow-y-auto p-1 lg:p-6 bg-neutral-900 text-white">
<nav class="text-xl sm:text-sm overflow-y-scroll mb-24">
<div class="">
<h2 class="font-semibold lg:text-xl text-gray-400">Basics</h2>
<details class="" open=true>
<summary class="font-semibold lg:text-xl text-orange-300">Basics</summary>
<div class="flex flex-col">
<p rel="noopener noreferrer" id="docs_introduction" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Introduction </p>
<p rel="noopener noreferrer" id="docs_interface" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Interface</p>
@ -135,9 +135,9 @@
<p rel="noopener noreferrer" id="docs_shortcuts" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Keyboard</p>
<p rel="noopener noreferrer" id="docs_code" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Coding</p>
</div>
</div>
<div class="space-y-2">
<h2 class="font-semibold lg:text-xl pb-1 pt-1 text-gray-400">Learning</h2>
</details>
<details class="space-y-2" open=true>
<summary class="font-semibold lg:text-xl pb-1 pt-1 text-orange-300">Learning</summary>
<div class="flex flex-col">
<p rel="noopener noreferrer" id="docs_time" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Time/Rhythm</p>
<p rel="noopener noreferrer" id="docs_sound" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Audio Engine</p>
@ -145,9 +145,9 @@
<p rel="noopener noreferrer" id="docs_synths" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Synths</p>
<p rel="noopener noreferrer" id="docs_midi" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">MIDI</p>
</div>
</div>
<div class="space-y-2">
<h2 class="font-semibold lg:text-xl pb-1 pt-1 text-gray-400">Patterns</h2>
</details>
<details class="space-y-2" open=true>
<summary class="font-semibold lg:text-xl pb-1 pt-1 text-orange-300">Patterns</summary>
<div class="flex flex-col">
<p rel="noopener noreferrer" id="docs_patterns" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Patterns</p>
<p rel="noopener noreferrer" id="docs_variables" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Variables</p>
@ -160,15 +160,15 @@
<p rel="noopener noreferrer" id="docs_reference" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Reference</p>
-->
</div>
</div>
<div class="space-y-2">
<h2 class="font-semibold lg:text-xl text-gray-400">More</h2>
</details>
<details class="space-y-2" open=true>
<summary class="font-semibold lg:text-xl text-orange-300">More</summary>
<div class="flex flex-col">
<a rel="noopener noreferrer" id="docs_oscilloscope" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Oscilloscope</a>
<a rel="noopener noreferrer" id="docs_bonus" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Bonus/Trivia</a>
<a rel="noopener noreferrer" id="docs_about" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">About Topos</a>
</div>
</div>
</details>
</nav>
</aside>
<div id="documentation-content" class="w-full flex-grow-1 h-screen overflow-y-scroll lg:px-12 mx-2 my-2 break-words pb-32">

21
src/Documentation.ts
View File

@ -24,14 +24,8 @@ import { bonus } from "./documentation/bonus";
// Setting up the Markdown converter with syntax highlighting
import showdown from "showdown";
import showdownHighlight from "showdown-highlight";
import { createDocumentationStyle } from "./DomElements";
showdown.setFlavor("github");
import { classMap } from "./DomElements";
const bindings = Object.keys(classMap).map((key) => ({
type: "output",
regex: new RegExp(`<${key}([^>]*)>`, "g"),
//@ts-ignore
replace: (match, p1) => `<${key} class="${classMap[key]}" ${p1}>`,
}));
export const key_shortcut = (shortcut: string): string => {
return `<kbd class="lg:px-2 lg:py-1.5 px-1 py-1 lg:text-sm text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500">${shortcut}</kbd>`;
@ -64,6 +58,7 @@ export const makeExampleFactory = (application: Editor): Function => {
};
export const documentation_factory = (application: Editor) => {
// Initialize a data structure to store code examples by their unique IDs
application.api.codeExamples = {};
@ -93,6 +88,7 @@ export const documentation_factory = (application: Editor) => {
};
export const showDocumentation = (app: Editor) => {
if (document.getElementById("app")?.classList.contains("hidden")) {
document.getElementById("app")?.classList.remove("hidden");
document.getElementById("documentation")?.classList.add("hidden");
@ -101,7 +97,14 @@ export const showDocumentation = (app: Editor) => {
document.getElementById("app")?.classList.add("hidden");
document.getElementById("documentation")?.classList.remove("hidden");
// Load and convert Markdown content from the documentation file
updateDocumentationContent(app);
let style = createDocumentationStyle(app);
let bindings = Object.keys(style).map((key) => ({
type: "output",
regex: new RegExp(`<${key}([^>]*)>`, "g"),
//@ts-ignore
replace: (match, p1) => `<${key} class="${style[key]}" ${p1}>`,
}));
updateDocumentationContent(app, bindings);
}
};
@ -112,7 +115,7 @@ export const hideDocumentation = () => {
}
};
export const updateDocumentationContent = (app: Editor) => {
export const updateDocumentationContent = (app: Editor, bindings: any) => {
const converter = new showdown.Converter({
emoji: true,
moreStyling: true,

19
src/DomElements.ts
View File

@ -1,3 +1,6 @@
import { type Editor } from "./main";
export type ElementMap = {
[key: string]:
| HTMLElement
@ -58,17 +61,18 @@ export const buttonGroups = {
clear_buttons: ["clear-button-1"],
};
export const classMap = {
h1: "text-white lg:text-4xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 bg-neutral-900 rounded-lg py-2 px-2",
h2: "text-white lg:text-3xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 bg-neutral-900 rounded-lg py-2 px-2",
h3: "text-white lg:text-2xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 bg-neutral-700 rounded-lg py-2 px-2 lg:mt-16",
export const createDocumentationStyle = (app: Editor) => {
return {
h1: "text-white lg:text-4xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 bg-neutral-900 rounded-lg underline underline-offset-8 pt-2 pb-3 px-2",
h2: "text-white lg:text-3xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 bg-neutral-900 rounded-lg underline underline-offset-8 pt-2 pb-3 px-2",
h3: "text-white lg:text-2xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 bg-neutral-900 rounded-lg underline underline-offset-8 pt-2 pb-3 px-2 lg:mt-16",
ul: "text-underline pl-6",
li: "list-disc lg:text-2xl text-base text-white lg:mx-4 mx-2 my-4 my-2 leading-normal",
p: "lg:text-2xl text-base text-white lg:mx-6 mx-2 my-4 leading-normal",
warning:
"animate-pulse lg:text-2xl font-bold text-rose-600 lg:mx-6 mx-2 my-4 leading-normal",
a: "lg:text-2xl text-base text-orange-300",
code: "lg:my-4 sm:my-1 text-base lg:text-xl block whitespace-pre overflow-x-hidden",
code: `lg:my-4 sm:my-1 text-base lg:text-xl block whitespace-pre overflow-x-hidden`,
icode:
"lg:my-1 my-1 lg:text-xl sm:text-xs text-white font-mono bg-neutral-600",
ic: "lg:my-1 my-1 lg:text-xl sm:text-xs text-white font-mono bg-neutral-600",
@ -83,4 +87,7 @@ export const classMap = {
th: "",
td: "",
tr: "",
};
};
}

14
src/InterfaceLogic.ts
View File

@ -22,8 +22,18 @@ import { tryEvaluate } from "./Evaluator";
import { inlineHoveringTips } from "./documentation/inlineHelp";
import { lineNumbers } from "@codemirror/view";
import { jsCompletions } from "./EditorSetup";
import { createDocumentationStyle } from "./DomElements";
export const installInterfaceLogic = (app: Editor) => {
// Initialize style
const documentationStyle = createDocumentationStyle(app);
const bindings = Object.keys(documentationStyle).map((key) => ({
type: "output",
regex: new RegExp(`<${key}([^>]*)>`, "g"),
//@ts-ignore
replace: (match, p1) => `<${key} class="${documentationStyle[key]}" ${p1}>`,
}));
(app.interface.line_numbers_checkbox as HTMLInputElement).checked =
app.settings.line_numbers;
(app.interface.time_position_checkbox as HTMLInputElement).checked =
@ -469,13 +479,13 @@ export const installInterfaceLogic = (app: Editor) => {
document.getElementById(name)!.addEventListener("click", async () => {
if (name !== "docs_samples") {
app.currentDocumentationPane = e;
updateDocumentationContent(app);
updateDocumentationContent(app, bindings);
} else {
console.log("Loading samples!");
await loadSamples().then(() => {
app.docs = documentation_factory(app);
app.currentDocumentationPane = e;
updateDocumentationContent(app);
updateDocumentationContent(app, bindings);
});
}
});