Merge pull request #4 from hemidactylus/SL-tables-collapseblocks

Style improvements (tables, collapseblock) + minor things
DataStax-Academy · Apr 27, 2023 · 6cea6dd · 6cea6dd
2 parents 5a9b308 + bdbb3b5
commit 6cea6dd
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -3,10 +3,10 @@
     "publisher": "hadesarchitect",
     "displayName": "katapod",
     "repository": {
-        "url": "https://github.com/HadesArchitect/katapod"
+        "url": "https://github.com/DataStax-Academy/katapod"
     },
     "description": "",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "license": "Apache-2.0",
     "engines": {
         "vscode": "^1.64.0"

diff --git a/src/layout.ts b/src/layout.ts
@@ -17,7 +17,7 @@ function createPanel(config: ConfigObject): vscode.WebviewPanel {
 	log("debug", "[createPanel] Creating WebViewPanel...");
 	return vscode.window.createWebviewPanel(
 		"datastax.katapod",
-		"DataStax Training Grounds",
+		"DataStax Hands-On Labs",
 		vscode.ViewColumn.One,
 		{
 			enableCommandUris: true,

diff --git a/src/rendering.ts b/src/rendering.ts
@@ -18,14 +18,15 @@ import {log} from "./logging";
 const executionInfoPrefix = "### ";
 const defaultCodeBlockMaxInvocations = "unlimited";
 
+
 const stepPageHtmlPrefix = `
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/default.min.css">
-		<link rel="stylesheet" type="text/css" href="https://datastax-academy.github.io/katapod-shared-assets/css/katapodv2.css" />
+		<link rel="stylesheet" type="text/css" href="https://datastax-academy.github.io/katapod-shared-assets/css/katapod.css" />
 		<script src="https://datastax-academy.github.io/katapod-shared-assets/js/katapod.js"></script>
 		<link rel="stylesheet" type="text/css" href="https://datastax-academy.github.io/katapod-shared-assets/quiz/quiz.css" />
 		<link rel="stylesheet" type="text/css" href="https://datastax-academy.github.io/katapod-shared-assets/quiz/page.css" />
@@ -78,6 +79,7 @@ function parseCodeBlockContent(step: string, index: number, cbContent: string):
         ls
     or
         ### myTermId
+		ls
     into a FullCommand object.
     Notes:
         - Codeblocks with no "### "-prefixed lines will just work
@@ -217,7 +219,8 @@ export function loadPage(target: TargetStep, env: KatapodEnvironment) {
 		const aSpanEleCloser = suppressExecution ? '</span>': '</a>';
 		const preEle = `<pre` + slf.renderAttrs(token) + `>`;
 		const codeEleClasses = suppressExecution ? "codeblock nonexecutable" : "codeblock executable";
-		const codeEle = `<code id="${parsedCommand.codeBlockId}" class="${codeEleClasses}">`;
+		const codeEleStyle = parsedCommand.backgroundColor ? ` style="background-color: ${parsedCommand.backgroundColor};"` : "";
+		const codeEle = `<code id="${parsedCommand.codeBlockId}" class="${codeEleClasses}"${codeEleStyle}>`;
 
 		return `${aSpanEle}${preEle}${codeEle}${renderedCode}</code></pre>${aSpanEleCloser}`;
 
@@ -252,10 +255,24 @@ export function loadPage(target: TargetStep, env: KatapodEnvironment) {
 		return imageDefault(tokens, idx, options, env, self);
 	};
 
+	// process tables
+	// (see https://github.com/markdown-it/markdown-it/blob/master/docs/examples/renderer_rules.md for the general procedure)
+	const tableTbProxy = (tokens: any, idx: any, options: any, env: any, self: any) => self.renderToken(tokens, idx, options);
+	const tableTbDefault = md.renderer.rules.table_open || tableTbProxy;
+	md.renderer.rules.table_open = function(tokens: any, idx: any, options: any, env: any, self: any) {
+	   // Make your changes here ...
+	   tokens[idx].attrJoin("class", "katapod-table");
+	   // ... then render it using the existing logic
+	   return tableTbDefault(tokens, idx, options, env, self);
+	};
+
 	var result = md.render((fs.readFileSync(file.fsPath, "utf8")));
 
 	env.components.panel.webview.html = stepPageHtmlPrefix + result + stepPageHtmlPostfix;
 
+	// quick local-run html debug
+	// fs.writeFileSync('rendered_katapod_page.html',stepPageHtmlPrefix + result + stepPageHtmlPostfix, 'utf8');
+
 	// process step-scripts, if present:
 	const stepScripts = (env.configuration.navigation?.onLoadCommands || {})[target.step] || {};
 	runCommandsPerTerminal(target.step, stepScripts, env, `onLoad[${target.step}]`);

diff --git a/src/runCommands.ts b/src/runCommands.ts
@@ -20,6 +20,7 @@ export interface ConfigCommand {
 	execute?: boolean;
 	maxInvocations?: number | "unlimited";
 	macrosBefore?: Array<Macro>;
+	backgroundColor?: string;
 }
 // the above would become the following, with defaults and added stuff
 export interface FullCommand {
@@ -29,6 +30,7 @@ export interface FullCommand {
 	codeBlockId: string;
 	maxInvocations: number | "unlimited";
 	macrosBefore?: Array<Macro>;
+	backgroundColor?: string;
 }