-
Customer Segment
-
+
+
+
+
+
+
-
-
-
-
-
Revenue Streams
-
+
+
+
+
+
+
+
Lean Canvas
+
Tip: touch/click content to edit inline. Hover list items to remove them.
+
+
+ schedule Last edit: --
+
+
+
+
+
+
+
+ Problem
+ report_problem
+
+
+
+
+ Existing Alternatives
+
+
+
+
+
+
+
+
+ star
+
+ Unique Value Proposition
+
+
+
+
+
+
+
+
+
+ Unfair Advantage
+ workspace_premium
+
+
+
+
+
+
+
+
+
+ Customer Segments
+ person_search
+
+
+
+
+
+
+
+
+
+
+ payments
+ Cost Structure
+
+
+
+
+
+ monetization_on
+ Revenue Streams
+
+
+
+
-
-
-
+
+
+
+
diff --git a/script.js b/script.js
index 2376a2e..8ac1d4d 100644
--- a/script.js
+++ b/script.js
@@ -1,166 +1,709 @@
-console.log("script.js geladen.");
-
-document.addEventListener("DOMContentLoaded", () => {
- console.log("DOMContentLoaded-Ereignis empfangen.");
-
- // PDF Export Button initialisieren
- const exportBtn = document.getElementById("exportPDF");
- if (exportBtn) {
- console.log("PDF Export Button gefunden.");
- exportBtn.addEventListener("click", () => {
- console.log("PDF Export Button geklickt. Öffne window.print().");
- window.print();
- });
- } else {
- console.warn("PDF Export Button nicht gefunden.");
+const STORAGE_KEY = "mdcanvas_state_v2";
+
+const initialState = {
+ title: "Lean Canvas",
+ problem: [],
+ existingAlternatives: [],
+ solution: "",
+ observation: "Users prefer conversational UX over dashboards.",
+ keyMetrics: [],
+ uniqueValueProposition: "",
+ highLevelConcept: "Personal digital intelligent butler",
+ unfairAdvantage: [],
+ channels: [],
+ customerSegments: [],
+ earlyAdopters: [],
+ costStructure: [],
+ revenueStreams: [],
+ todo: [],
+};
+
+const headerMap = {
+ "lean canvas": "title",
+ problem: "problem",
+ "existing alternatives": "existingAlternatives",
+ solution: "solution",
+ observation: "observation",
+ "key metrics": "keyMetrics",
+ "unique value proposition": "uniqueValueProposition",
+ "high-level concept": "highLevelConcept",
+ "high level concept": "highLevelConcept",
+ "unfair advantage": "unfairAdvantage",
+ channels: "channels",
+ "customer segment": "customerSegments",
+ "customer segments": "customerSegments",
+ "early adopters": "earlyAdopters",
+ "cost structure": "costStructure",
+ "revenue streams": "revenueStreams",
+ todo: "todo",
+};
+
+const sectionTypes = {
+ title: "text",
+ problem: "list",
+ existingAlternatives: "list",
+ solution: "text",
+ observation: "text",
+ keyMetrics: "list",
+ uniqueValueProposition: "text",
+ highLevelConcept: "text",
+ unfairAdvantage: "list",
+ channels: "list",
+ customerSegments: "list",
+ earlyAdopters: "list",
+ costStructure: "list",
+ revenueStreams: "list",
+ todo: "list",
+};
+
+let state = structuredClone(initialState);
+let lastEditAt = null;
+
+document.addEventListener("DOMContentLoaded", async () => {
+ bindActions();
+ await loadInitialState();
+ render();
+ setupInlineTextEditing();
+ setInterval(updateLastEditLabel, 30000);
+});
+
+function bindActions() {
+ const importBtn = document.getElementById("importBtn");
+ const saveBtn = document.getElementById("saveBtn");
+ const saveMenuWrap = document.getElementById("saveMenuWrap");
+ const saveMenu = document.getElementById("saveMenu");
+ const saveMarkdownBtn = document.getElementById("saveMarkdownBtn");
+ const savePdfBtn = document.getElementById("savePdfBtn");
+ const createBtn = document.getElementById("createBtn");
+ const importInput = document.getElementById("importFileInput");
+
+ importBtn?.addEventListener("click", () => importInput?.click());
+
+ importInput?.addEventListener("change", async (event) => {
+ const file = event.target.files?.[0];
+ if (!file) {
+ return;
+ }
+
+ const content = await file.text();
+ const imported = parseMarkdown(content);
+ state = mergeWithDefaults(imported);
+ markEdited("Markdown imported");
+ render();
+ importInput.value = "";
+ });
+
+ saveBtn?.addEventListener("click", (event) => {
+ event.stopPropagation();
+ toggleSaveMenu();
+ });
+
+ saveMarkdownBtn?.addEventListener("click", () => {
+ const markdown = stateToMarkdown(state);
+ downloadFile("canvas.md", markdown);
+ persistState();
+ hideSaveMenu();
+ showToast("Canvas saved as canvas.md");
+ });
+
+ savePdfBtn?.addEventListener("click", () => {
+ hideSaveMenu();
+ saveAsPdf();
+ });
+
+ document.addEventListener("click", (event) => {
+ if (!saveMenuWrap?.contains(event.target)) {
+ hideSaveMenu();
+ }
+ });
+
+ document.addEventListener("keydown", (event) => {
+ if (event.key === "Escape") {
+ hideSaveMenu();
+ }
+ });
+
+ createBtn?.addEventListener("click", () => {
+ const confirmed = window.confirm(
+ "Create a new canvas? Current content will be replaced.",
+ );
+ if (!confirmed) {
+ return;
+ }
+
+ state = structuredClone(initialState);
+ markEdited("New canvas created");
+ render();
+ });
+
+ function toggleSaveMenu() {
+ if (!saveMenu) {
+ return;
+ }
+ saveMenu.classList.toggle("hidden");
}
- // Markdown laden und parsen
- console.log("Starte Fetch für canvas.md...");
- fetch('canvas.md')
- .then(response => {
- console.log("Fetch-Antwort empfangen.");
- if (!response.ok) {
- throw new Error("Fehler beim Laden der Markdown-Datei.");
+ function hideSaveMenu() {
+ saveMenu?.classList.add("hidden");
+ }
+}
+
+function saveAsPdf() {
+ document.body.classList.add("print-canvas-mode");
+ window.addEventListener(
+ "afterprint",
+ () => {
+ document.body.classList.remove("print-canvas-mode");
+ },
+ { once: true },
+ );
+ window.print();
+}
+
+function setupInlineTextEditing() {
+ const bindings = [
+ { id: "canvasTitle", key: "title" },
+ { id: "solutionText", key: "solution" },
+ { id: "observationText", key: "observation" },
+ { id: "uvpText", key: "uniqueValueProposition" },
+ { id: "highLevelConceptText", key: "highLevelConcept" },
+ ];
+
+ bindings.forEach(({ id, key }) => {
+ const element = document.getElementById(id);
+ if (!element || element.dataset.inlineBound === "true") {
+ return;
+ }
+
+ element.contentEditable = "true";
+ element.spellcheck = true;
+ element.classList.add("editable-text");
+ element.title = "Edit directly";
+
+ element.addEventListener("blur", () => {
+ const value = element.innerText.replace(/\s+/g, " ").trim();
+ if ((state[key] || "") === value) {
+ return;
}
- return response.text();
- })
- .then(mdText => {
- console.log("Markdown-Inhalt geladen:");
- console.log(mdText);
- parseMarkdown(mdText);
- })
- .catch(error => {
- console.error("Fehler beim Laden/parsen der Markdown-Datei:", error);
+
+ state[key] = value;
+ markEdited("Text updated");
+ render();
});
-});
+
+ element.dataset.inlineBound = "true";
+ });
+}
+
+async function loadInitialState() {
+ const saved = localStorage.getItem(STORAGE_KEY);
+ if (saved) {
+ try {
+ const parsed = JSON.parse(saved);
+ state = mergeWithDefaults(parsed);
+ lastEditAt = Date.now();
+ return;
+ } catch {
+ localStorage.removeItem(STORAGE_KEY);
+ }
+ }
+
+ try {
+ const response = await fetch("canvas.md");
+ if (!response.ok) {
+ throw new Error("Unable to read canvas.md");
+ }
+
+ const text = await response.text();
+ state = mergeWithDefaults(parseMarkdown(text));
+ lastEditAt = Date.now();
+ persistState();
+ } catch {
+ state = structuredClone(initialState);
+ lastEditAt = Date.now();
+ }
+}
+
+function mergeWithDefaults(data) {
+ return {
+ ...structuredClone(initialState),
+ ...data,
+ problem: normalizeList(data.problem),
+ existingAlternatives: normalizeList(data.existingAlternatives),
+ keyMetrics: normalizeList(data.keyMetrics),
+ unfairAdvantage: normalizeList(data.unfairAdvantage),
+ channels: normalizeList(data.channels),
+ customerSegments: normalizeList(data.customerSegments),
+ earlyAdopters: normalizeList(data.earlyAdopters),
+ costStructure: normalizeList(data.costStructure),
+ revenueStreams: normalizeList(data.revenueStreams),
+ todo: normalizeList(data.todo),
+ };
+}
function parseMarkdown(mdText) {
- console.log("Starte Parsing der Markdown-Datei...");
- const lines = mdText.split('\n');
- let currentSection = null;
- const sectionContent = {};
-
- lines.forEach((line, index) => {
- line = line.trim();
- console.log(`Zeile ${index + 1}: "${line}"`);
- if (line.startsWith("# ")) {
- // Neue Überschrift gefunden
- const header = line.replace("# ", "").trim();
- console.log(`Überschrift erkannt: "${header}"`);
- if (sectionMapping.hasOwnProperty(header)) {
- currentSection = sectionMapping[header];
- console.log(`Mapping gefunden. currentSection gesetzt auf: "${currentSection}"`);
- sectionContent[currentSection] = (currentSection === "lean-canvas") ? "" : [];
- } else {
- console.log(`Kein Mapping für Überschrift: "${header}". Setze currentSection auf null.`);
- currentSection = null;
- }
- } else if (currentSection) {
- if (line !== "") {
- if (currentSection === "lean-canvas") {
- sectionContent[currentSection] += line + " ";
- console.log(`Anhängen an lean-canvas: "${line}"`);
- } else if (/^[-*]\s+/.test(line)) {
- const item = line.replace(/^[-*]\s+/, "").trim();
- sectionContent[currentSection].push(item);
- console.log(`Listeneintrag erkannt in Section "${currentSection}": "${item}"`);
- } else {
- sectionContent[currentSection] += line + " ";
- console.log(`Anhängen an Section "${currentSection}" (kein Listenpunkt): "${line}"`);
- }
+ const parsed = {};
+ const lines = mdText.split(/\r?\n/);
+ let currentKey = null;
+
+ for (const rawLine of lines) {
+ const line = rawLine.trim();
+
+ if (!line) {
+ continue;
+ }
+
+ const headingMatch = line.match(/^#{1,2}\s+(.+)$/);
+ if (headingMatch) {
+ const heading = normalizeHeader(headingMatch[1]);
+ currentKey = headerMap[heading] || null;
+
+ if (!currentKey) {
+ continue;
}
+
+ parsed[currentKey] = sectionTypes[currentKey] === "list" ? [] : "";
+ continue;
}
- });
- console.log("Parsing abgeschlossen. Ergebnis:", sectionContent);
-
- // Inhalte in die entsprechenden Container einfügen
- for (const section in sectionContent) {
- if (section === "lean-canvas") {
- const leanHeader = document.querySelector("#lean-canvas-header h1");
- const leanText = sectionContent[section].trim();
- const newHeaderText = leanText ? `Lean Canvas - ${leanText}` : "Lean Canvas";
- leanHeader.textContent = newHeaderText;
- document.title = newHeaderText;
- console.log(`Lean Canvas Header gesetzt: "${newHeaderText}"`);
- } else if (section === "todo") {
- // Verarbeitung der Todo-Sektion erfolgt später
+ if (!currentKey) {
continue;
- } else {
- const container = document.querySelector(`#${section} .content`);
- if (container) {
- if (Array.isArray(sectionContent[section]) && sectionContent[section].length) {
- const ul = document.createElement("ul");
- sectionContent[section].forEach(item => {
- const li = document.createElement("li");
- li.textContent = item;
- ul.appendChild(li);
- console.log(`Erstelle
in Section "${section}": "${item}"`);
- });
- container.innerHTML = ""; // Vorherigen Inhalt löschen
- container.appendChild(ul);
- console.log(`Liste in Container "#${section} .content" eingefügt.`);
- } else {
- container.textContent = sectionContent[section].trim();
- console.log(`Fließtext in Container "#${section} .content" gesetzt: "${sectionContent[section].trim()}"`);
- }
- } else {
- console.warn(`Kein Container gefunden für Section "${section}"`);
+ }
+
+ if (sectionTypes[currentKey] === "list") {
+ const bulletMatch = line.match(/^[-*]\s+(.+)$/);
+ const value = bulletMatch ? bulletMatch[1].trim() : line;
+ if (value) {
+ parsed[currentKey].push(value);
}
+ } else {
+ parsed[currentKey] = `${parsed[currentKey]} ${line}`.trim();
}
}
- // Todo-Bereich erstellen, falls die Markdown-Sektion vorhanden ist
- if (sectionContent.hasOwnProperty("todo") && sectionContent["todo"]) {
- const todoData = sectionContent["todo"];
- console.log("Todo-Sektion gefunden:", todoData);
- const todoContainer = document.createElement("div");
- todoContainer.id = "todo-container";
- const todoHeader = document.createElement("h2");
- todoHeader.textContent = "Todo";
- todoHeader.addEventListener("click", () => {
- const currentDisplay = todoContent.style.display;
- todoContent.style.display = (currentDisplay === "none") ? "" : "none";
- console.log(`Todo-Bereich umgeschaltet. Neuer Display-Status: "${todoContent.style.display}"`);
- });
- const todoContent = document.createElement("div");
- todoContent.classList.add("todo-content");
- if (Array.isArray(todoData) && todoData.length) {
- const ul = document.createElement("ul");
- todoData.forEach(item => {
- const li = document.createElement("li");
- li.textContent = item;
- ul.appendChild(li);
- console.log(`Erstelle im Todo-Bereich: "${item}"`);
- });
- todoContent.appendChild(ul);
- } else {
- todoContent.textContent = todoData.trim();
- console.log(`Setze Fließtext im Todo-Bereich: "${todoData.trim()}"`);
- }
- todoContent.style.display = "";
- todoContainer.appendChild(todoHeader);
- todoContainer.appendChild(todoContent);
- const canvas = document.querySelector(".canvas");
- canvas.parentNode.insertBefore(todoContainer, canvas.nextSibling);
- console.log("Todo-Bereich wurde unterhalb des Canvas eingefügt.");
+ return parsed;
+}
+
+function normalizeHeader(header) {
+ return header
+ .toLowerCase()
+ .replace(/[^a-z0-9\s-]/g, "")
+ .replace(/\s+/g, " ")
+ .trim();
+}
+
+function normalizeList(list) {
+ if (!Array.isArray(list)) {
+ return [];
+ }
+
+ return list.map((item) => String(item).trim()).filter(Boolean);
+}
+
+function render() {
+ const canvasTitle = document.getElementById("canvasTitle");
+ if (canvasTitle) {
+ canvasTitle.innerHTML = formatInlineMarkdown(state.title || "Lean Canvas");
+ }
+ document.title = `${state.title || "Lean Canvas"} | Local-First Workspace`;
+
+ renderDotList("problemList", state.problem);
+ renderTagList(
+ "existingAlternativesTags",
+ state.existingAlternatives,
+ "px-2 py-1 bg-secondary-fixed-dim text-on-secondary-fixed text-[11px] rounded-sm font-medium",
+ );
+ renderText("solutionText", state.solution);
+ renderText("observationText", state.observation);
+ renderIconList("keyMetricsList", state.keyMetrics, "query_stats");
+ renderText("uvpText", state.uniqueValueProposition);
+ renderText("highLevelConceptText", state.highLevelConcept);
+ renderCheckList("unfairAdvantageList", state.unfairAdvantage);
+ renderChannels("channelsList", state.channels);
+ renderCustomerCards("customerSegmentsCards", state.customerSegments);
+ renderTagList(
+ "earlyAdoptersTags",
+ state.earlyAdopters,
+ "text-xs font-medium px-2 py-1 bg-secondary-container text-on-secondary-container rounded-sm w-max",
+ );
+ renderCostStructure("costStructureList", state.costStructure);
+ renderRevenueCards("revenueStreamsCards", state.revenueStreams);
+
+ persistState();
+ updateLastEditLabel();
+}
+
+function renderText(elementId, value) {
+ const element = document.getElementById(elementId);
+ if (element) {
+ element.innerHTML = formatInlineMarkdown(value || "");
+ }
+}
+
+function renderDotList(elementId, items) {
+ const element = document.getElementById(elementId);
+ if (!element) {
+ return;
+ }
+
+ element.innerHTML = "";
+ for (const [index, item] of items.entries()) {
+ const li = document.createElement("li");
+ li.className = "group relative flex items-start gap-2 pr-8";
+ li.innerHTML = `${formatInlineMarkdown(item)}`;
+ element.appendChild(li);
+ }
+
+ appendAddButton(element, "problem");
+}
+
+function renderIconList(elementId, items, icon) {
+ const element = document.getElementById(elementId);
+ if (!element) {
+ return;
+ }
+
+ element.innerHTML = "";
+ const key = elementId === "keyMetricsList" ? "keyMetrics" : "channels";
+ for (const [index, item] of items.entries()) {
+ const li = document.createElement("li");
+ li.className = "group relative flex items-start gap-2 pr-8";
+ li.innerHTML = `${icon}${formatInlineMarkdown(item)}`;
+ element.appendChild(li);
+ }
+
+ appendAddButton(element, key);
+}
+
+function renderCheckList(elementId, items) {
+ const element = document.getElementById(elementId);
+ if (!element) {
+ return;
+ }
+
+ element.innerHTML = "";
+ for (const [index, item] of items.entries()) {
+ const li = document.createElement("li");
+ li.className = "group relative flex items-start gap-2 pr-8";
+ li.innerHTML = `check_circle${formatInlineMarkdown(item)}`;
+ element.appendChild(li);
+ }
+
+ appendAddButton(element, "unfairAdvantage");
+}
+
+function renderTagList(elementId, items, className) {
+ const element = document.getElementById(elementId);
+ if (!element) {
+ return;
+ }
+
+ element.innerHTML = "";
+ const key =
+ elementId === "existingAlternativesTags"
+ ? "existingAlternatives"
+ : "earlyAdopters";
+ for (const [index, item] of items.entries()) {
+ const wrapper = document.createElement("div");
+ wrapper.className =
+ "group relative inline-flex items-start pr-6 max-w-full";
+ wrapper.innerHTML = `${formatInlineMarkdown(item)}`;
+ element.appendChild(wrapper);
+ }
+
+ appendAddButton(element, key);
+}
+
+function renderChannels(elementId, items) {
+ const element = document.getElementById(elementId);
+ if (!element) {
+ return;
+ }
+
+ element.innerHTML = "";
+ items.forEach((item, index) => {
+ const row = document.createElement("div");
+ row.className = "group relative pr-8";
+ const textClass = "text-[11px] text-on-surface-variant";
+ row.innerHTML = `${formatInlineMarkdown(item)}
`;
+ element.appendChild(row);
+ });
+
+ appendAddButton(element, "channels");
+}
+
+function renderCustomerCards(elementId, items) {
+ const element = document.getElementById(elementId);
+ if (!element) {
+ return;
+ }
+
+ element.innerHTML = "";
+ for (const [index, item] of items.entries()) {
+ const wrapper = document.createElement("div");
+ wrapper.className = "group relative pr-8";
+ wrapper.innerHTML = `${formatInlineMarkdown(item)}
`;
+ element.appendChild(wrapper);
+ }
+
+ appendAddButton(element, "customerSegments");
+}
+
+function renderCostStructure(elementId, items) {
+ const element = document.getElementById(elementId);
+ if (!element) {
+ return;
+ }
+
+ element.innerHTML = "";
+ for (const [index, item] of items.entries()) {
+ const div = document.createElement("div");
+ div.className =
+ "group relative flex items-start gap-3 pr-8 pb-2 border-b border-surface-container";
+ div.innerHTML = `${formatInlineMarkdown(item)}`;
+ element.appendChild(div);
+ }
+
+ appendAddButton(element, "costStructure");
+}
+
+function renderRevenueCards(elementId, items) {
+ const element = document.getElementById(elementId);
+ if (!element) {
+ return;
+ }
+
+ const tones = [
+ "bg-primary-container/30 text-on-primary-container",
+ "bg-secondary-container/30 text-on-secondary-container",
+ "bg-tertiary-container/30 text-on-tertiary-container",
+ ];
+
+ element.innerHTML = "";
+ items.forEach((item, index) => {
+ const wrapper = document.createElement("div");
+ wrapper.className = "group relative flex-1 min-w-[140px] pr-8";
+ wrapper.innerHTML = `${formatInlineMarkdown(item)}