styling, initial support for modules, snippetry

colevandersWands · Jun 29, 2023 · 7a64297 · 7a64297
1 parent 94ee7aa
commit 7a64297
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 1 deletion.
diff --git a/gather-snippets.js b/gather-snippets.js
@@ -12,7 +12,7 @@ const DRAFT_EXTENSION = '.draft';
 // ---------- build array of snippet objects ----------
 
 const snippetFileNames = (await readdir(SNIPPETS_ROOT))
-  .filter((item) => item.endsWith('.js'))
+  .filter((item) => item.endsWith('.js') || item.endsWith('.mjs'))
   .filter((item) => !item.includes(DRAFT_EXTENSION));
 
 const snippetCode = await Promise.all(

diff --git a/public/script.js b/public/script.js
@@ -85,6 +85,9 @@ const runCode = (snippet = {}, debug = false) => {
     evaller.contentWindow.console.assert = assert;
 
     const script = document.createElement('script');
+    if (snippet.name.endsWith('.mjs')) {
+      script.type = 'module';
+    }
     script.innerHTML = finalCode;
 
     evaller.contentDocument.body.appendChild(script);

diff --git a/public/snippets.json b/public/snippets.json
@@ -105,6 +105,11 @@
 				"puzzle"
 			]
 		},
+		{
+			"name": "the-frog-says.js",
+			"code": "theFrogSays('quack', 'kwak');\n\nfunction theFrogSays(...args) {\n  // This looks like a frog, right?\n  // Taken from here - http://chris.com/ascii/index.php?art=animals/frogs\n  const frog = [\n    '%c%c',\n    '%c         _,-.  %c',\n    \"%c ,-. ,--'  o ) %c\",\n    \"%c \\\\(,' '  ,,-' %c\",\n    '%c,-.\\\\-.__,\\\\\\\\_%c',\n    \"%c\\\\(`--'    `\\\\ %c\",\n    '%c%c',\n  ];\n\n  // Gets args as a string\n  const joinedArgs = args.join(' ');\n\n  // Add the bubble if there is something to log!\n  if (joinedArgs.length > 0) {\n    frog[1] += `   ---${'-'.repeat(joinedArgs.length)}-`;\n    frog[2] += `-(   ${joinedArgs}   )`;\n    frog[3] += `    ---${'-'.repeat(joinedArgs.length)}-`;\n  }\n\n  // Log the frog!\n  for (const line of frog) {\n    console.log(line, 'color: green', '');\n  }\n}\n\n// credit: https://tholman.com/console-dot-frog/\n",
+			"tags": []
+		},
 		{
 			"name": "this-is-amazing.js",
 			"code": "(function () {\n  this;\n}).call('amazing');\n",

diff --git a/public/styles.css b/public/styles.css
@@ -11,6 +11,7 @@ button {
   background-color: rgba(234, 233, 233, 0.943);
   border: none;
   border-radius: 1em;
+  color: black;
 }
 
 .a-snippet {

diff --git a/snippets/recursimport.draft.mjs b/snippets/recursimport.draft.mjs
@@ -0,0 +1 @@
+import './snippets/recursimport.mjs';
diff --git a/snippets/the-frog-says.js b/snippets/the-frog-says.js
@@ -0,0 +1,32 @@
+theFrogSays('quack', 'kwak');
+
+function theFrogSays(...args) {
+  // This looks like a frog, right?
+  // Taken from here - http://chris.com/ascii/index.php?art=animals/frogs
+  const frog = [
+    '%c%c',
+    '%c         _,-.  %c',
+    "%c ,-. ,--'  o ) %c",
+    "%c \\(,' '  ,,-' %c",
+    '%c,-.\\-.__,\\\\_%c',
+    "%c\\(`--'    `\\ %c",
+    '%c%c',
+  ];
+
+  // Gets args as a string
+  const joinedArgs = args.join(' ');
+
+  // Add the bubble if there is something to log!
+  if (joinedArgs.length > 0) {
+    frog[1] += `   ---${'-'.repeat(joinedArgs.length)}-`;
+    frog[2] += `-(   ${joinedArgs}   )`;
+    frog[3] += `    ---${'-'.repeat(joinedArgs.length)}-`;
+  }
+
+  // Log the frog!
+  for (const line of frog) {
+    console.log(line, 'color: green', '');
+  }
+}
+
+// credit: https://tholman.com/console-dot-frog/