acitivity plugin draft

mod.ts

@@ -0,0 +1,11 @@
+import { Plugin } from "@engine/components/plugin.ts";
+
+console.log(await Plugin.run({
+  context: {
+    id: "introduction",
+    entity: "user",
+    handle: "octocat",
+    retries: {},
+    mock: true
+  }
+}))

source/engine/utils/language.ts

@@ -3,42 +3,39 @@ import hljs from "y/[email protected]/lib/core?pin=v133"
 import * as YAML from "std/yaml/parse.ts"
 
 /** Language cache */
-const cache = {empty:true} as unknown as Record<string, {ace_mode:string, extensions?:string[], interpreters?:string[]}>
-
-//ignore/only language
-//gitattributes
-//gitignore
-//filter file if needed
+export const cache = await load("languages.yml") as Record<string, {ace_mode:string, extensions?:string[], interpreters?:string[]}>
 
 /** Language guesser */
-export async function language(filename:string, content:string, {gitattributes = ""} = {}) {
-
+// TODO(@lowlighter): to implement
+// deno-lint-ignore require-await
+export async function language(_filename:string, content:string, {gitattributes = ""} = {}) {
   /*
-load("vendor.yml")
-load("documentation.yml")
+    load("vendor.yml")
+    load("documentation.yml")
   */
-
+  // deno-lint-ignore no-explicit-any
   const result = {} as any
 
+  // Process gitattributes override
   if (gitattributes) {
     result.from = "gitattributes"
   }
 
-  //gitattributes override
+  // Process interpreter
   if (content.startsWith("#!/")) {
-    const line = content.split("\n", 1)[0]
-    // search for single interpreter
+    const _line = content.split("\n", 1)[0]
     result.from = "shebang"
   }
 
-  //
-  if (true) {
-    // search from .filenames
+  // Search for specific filename
+  // deno-lint-ignore no-constant-condition
+  if (false) {
     result.from = "filename"
   }
 
-  if (true) {
-    // search from .extension
+  // Search for specific extension
+  // deno-lint-ignore no-constant-condition
+  if (false) {
     result.from = "extension"
   }
 
@@ -50,14 +47,9 @@ load("documentation.yml")
   }
 }
 
-
 /** Highlight code */
 export async function highlight(language:string, code:string) {
   // Resolve language name
-  if (cache.empty) {
-    Object.assign(cache, await load("languages.yml"))
-    delete cache.empty
-  }
   for (const [key, {ace_mode:mode, extensions = []}] of Object.entries(cache)) {
     const name = key.toLocaleLowerCase()
     if ((name === language.toLocaleLowerCase())||(extensions.find(extension => extension === `.${language}`))) {
@@ -66,7 +58,7 @@ export async function highlight(language:string, code:string) {
     }
   }
 
-  // Load language
+  // Load language highlighting syntax
   if (!hljs.listLanguages().includes(language)) {
     try {
       const module = await import(`y/[email protected]/lib/languages/${language}?pin=v133`)

source/engine/utils/markdown.ts

@@ -0,0 +1,92 @@
+// Imports
+import rehypeStringify from "y/[email protected]"
+import remarkParse from "y/[email protected]"
+import remarkRehype from "y/[email protected]"
+import remarkGfm from "y/[email protected]"
+import { unified } from "y/[email protected]"
+import sanitizeHTML from "y/[email protected]"
+import {highlight} from "@engine/utils/language.ts"
+import { DOMParser } from "x/[email protected]/deno-dom-wasm.ts"
+import { Format } from "@engine/utils/format.ts"
+
+/** Markdown renderer (internal) */
+const remark = unified()
+  // deno-lint-ignore no-explicit-any
+  .use(remarkParse as any)
+  .use(remarkGfm)
+  .use(remarkRehype)
+  // deno-lint-ignore no-explicit-any
+  .use(rehypeStringify as any)
+
+/** Render markdown */
+export async function markdown(text: string, { sanitize = "svg" } = {}) {
+  let {value:render} = await remark.process(text)
+  switch (sanitize) {
+    // SVG content
+    case "svg": {
+      const allowedTags = [
+        // Headers
+        "h1", "h2", "h3", "h4", "h5", "h6",
+        // Text
+        "p", "strong", "em", "del",
+        // Blockquotes
+        "blockquote",
+        // Code
+        "pre", "code",
+        // Links
+        "a",
+        // Images
+        "img",
+        // Tables
+        "table", "thead", "tbody", "tfoot", "tr", "th", "td",
+        // Lists
+        "ul", "ol", "li", "input",
+        // Horizontal rules
+        "hr",
+        // Line breaks
+        "br",
+      ]
+      const allowedAttributes = {
+        "*": ["class"],
+        input: ["type", "checked", "disabled"],
+        img: ["src", "alt"],
+      }
+      render = sanitizeHTML(sanitizeHTML(`${render}`, {
+        allowedTags,
+        allowedAttributes,
+      }), {
+        allowedTags: ["span", ...allowedTags.filter(tag => !["input"].includes(tag))],
+        allowedAttributes,
+        transformTags:{
+          h1:sanitizeHTML.simpleTransform("div", {class:"link"}),
+          h2:sanitizeHTML.simpleTransform("div", {class:"link"}),
+          h3:sanitizeHTML.simpleTransform("div", {class:"link"}),
+          h4:sanitizeHTML.simpleTransform("div", {class:"link"}),
+          h5:sanitizeHTML.simpleTransform("div", {class:"link"}),
+          h6:sanitizeHTML.simpleTransform("div", {class:"link"}),
+          a:sanitizeHTML.simpleTransform("span", {class:"link"}),
+          input(_, input) {
+            return {
+              tagName: "span",
+              attribs: input.type === "checkbox" ? {class:`input checkbox ${'checked' in input ? "checked" : ""}`.trim()} : {} as Record<string, never>,
+            }
+          },
+        },
+      })
+    }
+  }
+
+  // Code highlighting
+  if (/<\/code>/.test(`${render}`)) {
+    const document = new DOMParser().parseFromString(Format.html(`${render}`), "text/html")!
+    await Promise.all([...document.querySelectorAll("code") as unknown as Array<{className:string, innerHTML:string}>].map(async (code) => {
+      const language = code.className.replace("language-", "")
+      if (language) {
+        code.innerHTML = (await highlight(language, code.innerHTML)).code
+      }
+    }))
+    render = document.querySelector("main")!.innerHTML
+  }
+
+  return render
+}

source/engine/utils/markdown_test.ts

@@ -0,0 +1,14 @@
+import { expect, t } from "@engine/utils/testing.ts"
+import { markdown } from "@engine/utils/markdown.ts"
+
+Deno.test(t(import.meta, "`markdown()` returns processed html content"), { permissions: "none" }, async () => {
+  await expect(markdown("**Hello**", {sanitize:"svg"})).to.eventually.equal("<p><strong>Hello</strong></p>")
+})
+
+Deno.test(t(import.meta, "`markdown()` can highlight code blocks"), { permissions: "none" }, async () => {
+  await expect(markdown("```ts\nconst foo = true\n```", {sanitize:"svg"})).to.eventually.match(/class="language-ts"/).and.to.match(/class="hljs-.*?"/)
+})
+
+Deno.test(t(import.meta, "`markdown()` can handle task lists"), { permissions: "none" }, async () => {
+  await expect(markdown("- [ ] A\n- [x] B", {sanitize:"svg"})).to.eventually.match(/class="input checkbox"/).and.to.match(/class="input checkbox checked"/)
+})

source/engine/utils/shuffle_test.ts

@@ -3,5 +3,7 @@ import { shuffle } from "@engine/utils/shuffle.ts"
 
 Deno.test(t(import.meta, "`shuffle()` shuffles the content of array"), { permissions: "none" }, () => {
   const array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
-  expect(shuffle(array)).to.not.equal([0, 1, 2, 3, 4, 5, 6, 7, 8, 9])
+  const shuffled = shuffle(array)
+  expect(shuffled).to.not.equal([0, 1, 2, 3, 4, 5, 6, 7, 8, 9])
+  expect(array).to.equal(shuffled)
 })

source/processors/render/templates/classic/styles.css

@@ -2,9 +2,12 @@
 :root {
   --color-primary: #777777;
   --color-title: #0366d6;
+  --color-link: #54aeff;
   --color-error: #d32f39;
   --color-warning: #c25d19;
   --color-svg: #959da5;
+  --color-svg-alpha-background: #959da515;
+  --color-label-alpha-background: #54aeff20;
   --color-error-background: #ffebe9;
   --color-warning-background: #fff8c5;
   --calendar-default-L0: #ebedf0;
@@ -26,6 +29,9 @@
   --diff-deletion: #ff6a69;
   --diff-neutral: rgba(158, 167, 179, 0.4);
   --diff-neutral-border: rgba(158, 167, 179, 0.1);
+
+  --code-background: #0d1117;
+  --code-color: #c9d1d9;
 }
 
 svg {
@@ -154,6 +160,56 @@ section {
 }
 
 
+/** Markdown */
+.markdown .link {
+  color: var(--color-link);
+}
+.markdown code {
+  background-color: var(--color-svg-alpha-background);
+  padding: 0 4px;
+  border-radius: 4px;
+}
+.markdown pre {
+  background-color: var(--code-background);
+  color: var(--code-color);
+  padding: 8px;
+  border-radius: 8px;
+  white-space: pre-wrap;
+  font-size: 12px;
+}
+.markdown pre code {
+  background-color: transparent;
+  padding: 0;
+  border-radius: 0;
+}
+.markdown p, .markdown pre {
+  margin: 0;
+  margin-bottom: 8px;
+}
+.markdown code .hljs-comment {
+  color: #8b949e;
+}
+.markdown code .hljs-keyword {
+  color: #ff7b72;
+}
+.markdown code .hljs-string {
+  color: #a5d6ff;
+}
+.markdown code .hljs-attr {
+  color: #79c0ff;
+}
+.markdown code .hljs-title {
+  color: #d2a8ff;
+}
+.markdown code .hljs-addition {
+  color: #aff5b4;
+  background-color: #033a16;
+}
+.markdown code .hljs-deletion {
+  color: #ffdcd7;
+  background-color: #67060c;
+}
+
 .twemoji, .gemoji, .octicon {
   height: 1em;
   width: 1em;