From 24b09a24bff36daeba8a40d916cf4afba9aa5f6a Mon Sep 17 00:00:00 2001
From: Kai Lawrence <mail@kailawrence.de>
Date: Mon, 16 Nov 2020 13:51:41 +0100
Subject: [PATCH] Propose refactored defaults

---
 defaults.css | 186 ++++++++++++++++++++++++++++++++++++
 defaults.js  |  65 +++++++++++++
 microjam.js  | 264 ++-------------------------------------------------
 3 files changed, 257 insertions(+), 258 deletions(-)
 create mode 100644 defaults.css
 create mode 100644 defaults.js

diff --git a/defaults.css b/defaults.css
new file mode 100644
index 0000000..67078a5
--- /dev/null
+++ b/defaults.css
@@ -0,0 +1,186 @@
+@media screen {
+    :root {
+        --color-footer: #e2f3f3;
+        --bgcol-footer: #1f3939;
+        --color-code: #e2f3f3;
+        --bgcol-code: #1f3939;
+        --color-shade: #666;
+        --sidebar-width: 14rem;
+    }
+    .theme-dark {
+        --color-main: snow;
+        --bgcol-main: #3c6362;
+        --color-header: #3c6362;
+        --bgcol-header: #e2f3f3;
+        --color-link: #c6dddb;
+        --color-hover: #6f9999;
+        --color-plnk: #fffafa22;
+    }
+    
+    /* .theme-light */
+    html {
+        --color-main: #1f3939;
+        --bgcol-main: snow;
+        --color-header: #e2f3f3;
+        --bgcol-header: #3c6362;
+        --color-link: #4b7776;
+        --color-hover: #87acac;
+        --color-plnk: #1f393922;
+    }
+    
+    body {
+      margin: 1em 1em;
+      padding: 0;
+      background-color: #ddd;
+      font-size: 12pt;
+      font-family: Helvetica, Arial, sans-serif;
+      box-shadow: 0 0 0.5em var(--color-shade);
+    }
+    @media screen and (min-width: 768px) {
+      body {
+        max-width: 768px;
+        margin: 1em auto;
+      }
+    }
+    main, footer {
+      padding: 5px 1em;
+    }
+    main {
+      color: var(--color-main);
+      background-color: var(--bgcol-main);
+      word-wrap: break-word;
+    }
+    header {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      align-items: center;  /* vertical align */
+      padding: 5px 1em;
+      color: var(--color-header);
+      background-color: var(--bgcol-header);
+    }
+    footer {
+      display: grid;
+      grid-template-columns: 1fr auto 1fr;
+      align-items: center;  /* vertical align */
+      font-size: 0.8em;
+      color: var(--color-footer);
+      background-color: var(--bgcol-footer);
+    }
+    header > .left {
+      text-align: left;
+      font-size: 2em;
+    }
+    header > .right {
+      text-align: right;
+    }
+    footer > .left {
+      grid-column: 1;
+      text-align: left;
+    }
+    footer > .center {
+      grid-column: 2;
+      text-align: center;
+    }
+    footer > .right {
+      grid-column: 3;
+      text-align: right;
+    }
+    footer > .right:hover {
+      cursor: pointer;
+      color: var(--color-hover);
+    }
+    
+    main a:link, main a:visited {
+      color: var(--color-link);
+      text-decoration: none;
+    }
+    main a:hover {
+      color: var(--color-hover);
+      text-decoration: none;
+    }
+    footer > a {
+      color: var(--color-footer);
+    }
+    header a:link, header a:visited {
+      color: var(--color-header);
+      text-decoration: none;
+    }
+    header a:hover {
+      color: var(--color-hover);
+    }
+    
+    h1>a.plnk,h2>a.plnk,h3>a.plnk {
+      display: none;
+      text-decoration: none;
+      color: inherit;
+    }
+    h1:hover>a.plnk,h2:hover>a.plnk,h3:hover>a.plnk {
+      display: initial;
+    }
+    p, blockquote { 
+      text-align: justify; 
+    }
+    blockquote {
+        font-size: 11pt;
+        margin-top: 1em;
+        margin-bottom: 1em;
+        border-left: .25em solid var(--bgcol-header);
+        color: #666;
+        background-color: #f6f6f6;
+        padding: 0 0.5em;
+    }
+    
+    table {
+        display: table;
+        width: auto;
+        margin-left: auto;
+        margin-right: auto; 
+        border-collapse: collapse;
+    }
+    table th, table td {
+        padding: 0.2rem 0.5rem;
+        border-left: none;
+        border-right: none;
+        border-top: 1px solid #000;
+        border-bottom: 1px solid #000;
+    }
+    
+    figure {
+        margin: 0.5em auto;
+    }
+    figure > * {
+        display: block;
+        margin: 0 auto;
+        page-break-inside: avoid;
+        text-align: center;
+    }
+    figure img {
+      max-width: 100%;
+    }
+    figcaption { 
+        font-size: 11pt;
+        margin-top: 0.5em;
+    }
+    /* code sections */
+    pre > code > code > div,
+    pre > code.code-line > div {
+      font-size: 10pt;
+      color: var(--color-code);
+      background-color: var(--bgcol-code);
+      border-radius: 5px;
+      padding: 0.5em;
+      white-space: pre-wrap;
+    }
+    kbd {
+      font-size: 10pt;
+      border-radius: 3px;
+      padding: 1px 2px 0;
+      margin: 0 2px;
+      color: #444;
+      border: 1px solid #999;
+      background-color: #eee;
+    }
+    time {
+      color: var(--color-link);
+    }
+}  /* end @media screen */
\ No newline at end of file
diff --git a/defaults.js b/defaults.js
new file mode 100644
index 0000000..053c855
--- /dev/null
+++ b/defaults.js
@@ -0,0 +1,65 @@
+const tmpl = module.exports = {
+  // page layout ... possibly used by other templates
+  page(data) {
+    return `<!doctype html>
+    <html lang="${data.lang || 'en'}">
+    <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1,user-scalable=no">
+    <meta name="description" content="${data.description || (data.title + ' - microjam page')}">
+    ${data.date ? `<meta name="date" content="${new Date(data.date).toString()}">` : ''}
+    ${data.tags ? `<meta name="keywords" content="${data.tags.join()}">` : ''}
+    <base href="${'./' + data.reldir}">
+    <title>${data.title}</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@9.18.1/styles/github-gist.min.css">
+    ${data.math ? `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/markdown-it-texmath/css/texmath.css">` : ''}
+    <link rel="stylesheet" href="./theme/styles.css">
+    </head>
+    <body>
+    <header>
+      <a href="./index.html" class="left">My Site</a>
+      <a href="./about.html" class="right">About</a>
+    </header>
+    <main>
+    ${data.content}
+    </main>
+    <footer>
+      <span class="left">&copy; My Site</span>
+      <span class="center">powered by &mu;JAM &amp; VSCode &mdash; hosted by GitHub</span>
+      <span class="right" onclick="document.documentElement.className = document.documentElement.className === 'theme-dark' ? 'theme-light' : 'theme-dark';">&#9788;</span>
+    </footer>
+    </body>
+    </html>`
+  },
+  // article layout ...  // test necessary
+  article(data) {
+    const articleContent = `<article>
+      ${data.content}
+    </article>`;
+    return tmpl.page(data);
+  },
+  // index layout ...
+  index(data) {
+    data.content = `<article>
+    ${data.content}
+    ${data.articles.sort((a, b) => a.date < b.date ? 1 : -1)  // sort decending ..
+        .map(tmpl.articleEntry).join('')}
+    </article>`;
+    return tmpl.base(data);
+  },
+
+  // article entry layout ... used for article list in index template
+  articleEntry(article) {
+    return `<hr>
+    ${tmpl.dateElement(article.date)}
+    <h3><a href="${article.reluri + '.html'}">${article.title}</a></h3>
+    ${article.abstract || article.description}`;
+  },
+  // date element layout ... 
+  dateElement(date) {
+    const d = new Date(date);
+    return `<time datetime="${d}">${d.toString().substr(4, 3)} ${d.getDate()}, ${d.getFullYear()}</time>`;
+  }
+
+}
\ No newline at end of file
diff --git a/microjam.js b/microjam.js
index a850f6c..3b60604 100644
--- a/microjam.js
+++ b/microjam.js
@@ -434,262 +434,10 @@ exports.activate = function activate(context) {
 exports.deactivate = function deactivate() {};
 
 ext.defaults = {
-    templates:
-`module.exports = {
-// page layout ... possibly used by other templates
-page(data) {
-  return \`<!doctype html>
-<html lang="\${data.lang||'en'}">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1,user-scalable=no">
-<meta name="description" content="\${data.description || (data.title + ' - microjam page')}">
-\${data.date ? \`<meta name="date" content="\${new Date(data.date).toString()}">\` : ''}
-\${data.tags ? \`<meta name="keywords" content="\${data.tags.join()}">\` : ''}
-<base href="\${'./'+data.reldir}">
-<title>\${data.title}</title>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@9.18.1/styles/github-gist.min.css">
-\${data.math ? \`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/markdown-it-texmath/css/texmath.css">\` : ''}
-<link rel="stylesheet" href="./theme/styles.css">
-</head>
-<body>
-<header>
-  <a href="./index.html" class="left">My Site</a>
-  <a href="./about.html" class="right">About</a>
-</header>
-<main>
-\${data.content}
-</main>
-<footer>
-  <span class="left">&copy; My Site</span>
-  <span class="center">powered by &mu;JAM &amp; VSCode &mdash; hosted by GitHub</span>
-  <span class="right" onclick="document.documentElement.className = document.documentElement.className === 'theme-dark' ? 'theme-light' : 'theme-dark';">&#9788;</span>
-</footer>
-</body>
-</html>\` 
-},
-// article layout ...  // test necessary
-article(data) {
-  const articleContent = \`<article>
-  \${data.content}
-</article>\`;
-  return tmpl.page(data);
-},
-// index layout ...
-index(data) {
-  data.content = \`<article>
-\${data.content}
-\${data.articles.sort((a,b)=> a.date < b.date ? 1 : -1)  // sort decending ..
-               .map(tmpl.articleEntry).join('')}
-</article>\`;
-  return tmpl.base(data);
-},
-
-// article entry layout ... used for article list in index template
-articleEntry(article) {
-    return \`<hr>
-\${tmpl.dateElement(article.date)}
-<h3><a href="\${article.reluri+'.html'}">\${article.title}</a></h3>
-\${article.abstract || article.description}\`;
-},
-// date element layout ... 
-dateElement(date) {
-  const d = new Date(date);
-  return \`<time datetime="\${d}">\${d.toString().substr(4,3)} \${d.getDate()}, \${d.getFullYear()}</time>\`;
-}
-
-}
-`,
-
-css: `@media screen {
-:root {
-    --color-footer: #e2f3f3;
-    --bgcol-footer: #1f3939;
-    --color-code: #e2f3f3;
-    --bgcol-code: #1f3939;
-    --color-shade: #666;
-    --sidebar-width: 14rem;
-}
-.theme-dark {
-    --color-main: snow;
-    --bgcol-main: #3c6362;
-    --color-header: #3c6362;
-    --bgcol-header: #e2f3f3;
-    --color-link: #c6dddb;
-    --color-hover: #6f9999;
-    --color-plnk: #fffafa22;
-}
-
-/* .theme-light */
-html {
-    --color-main: #1f3939;
-    --bgcol-main: snow;
-    --color-header: #e2f3f3;
-    --bgcol-header: #3c6362;
-    --color-link: #4b7776;
-    --color-hover: #87acac;
-    --color-plnk: #1f393922;
-}
-
-body {
-  margin: 1em 1em;
-  padding: 0;
-  background-color: #ddd;
-  font-size: 12pt;
-  font-family: Helvetica, Arial, sans-serif;
-  box-shadow: 0 0 0.5em var(--color-shade);
-}
-@media screen and (min-width: 768px) {
-  body {
-    max-width: 768px;
-    margin: 1em auto;
-  }
-}
-main, footer {
-  padding: 5px 1em;
-}
-main {
-  color: var(--color-main);
-  background-color: var(--bgcol-main);
-  word-wrap: break-word;
-}
-header {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  align-items: center;  /* vertical align */
-  padding: 5px 1em;
-  color: var(--color-header);
-  background-color: var(--bgcol-header);
-}
-footer {
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  align-items: center;  /* vertical align */
-  font-size: 0.8em;
-  color: var(--color-footer);
-  background-color: var(--bgcol-footer);
-}
-header > .left {
-  text-align: left;
-  font-size: 2em;
-}
-header > .right {
-  text-align: right;
-}
-footer > .left {
-  grid-column: 1;
-  text-align: left;
-}
-footer > .center {
-  grid-column: 2;
-  text-align: center;
-}
-footer > .right {
-  grid-column: 3;
-  text-align: right;
-}
-footer > .right:hover {
-  cursor: pointer;
-  color: var(--color-hover);
-}
-
-main a:link, main a:visited {
-  color: var(--color-link);
-  text-decoration: none;
-}
-main a:hover {
-  color: var(--color-hover);
-  text-decoration: none;
-}
-footer > a {
-  color: var(--color-footer);
-}
-header a:link, header a:visited {
-  color: var(--color-header);
-  text-decoration: none;
-}
-header a:hover {
-  color: var(--color-hover);
-}
-
-h1>a.plnk,h2>a.plnk,h3>a.plnk {
-  display: none;
-  text-decoration: none;
-  color: inherit;
-}
-h1:hover>a.plnk,h2:hover>a.plnk,h3:hover>a.plnk {
-  display: initial;
-}
-p, blockquote { 
-  text-align: justify; 
-}
-blockquote {
-    font-size: 11pt;
-    margin-top: 1em;
-    margin-bottom: 1em;
-    border-left: .25em solid var(--bgcol-header);
-    color: #666;
-    background-color: #f6f6f6;
-    padding: 0 0.5em;
-}
-
-table {
-    display: table;
-    width: auto;
-    margin-left: auto;
-    margin-right: auto; 
-    border-collapse: collapse;
-}
-table th, table td {
-    padding: 0.2rem 0.5rem;
-    border-left: none;
-    border-right: none;
-    border-top: 1px solid #000;
-    border-bottom: 1px solid #000;
-}
-
-figure {
-    margin: 0.5em auto;
-}
-figure > * {
-    display: block;
-    margin: 0 auto;
-    page-break-inside: avoid;
-    text-align: center;
-}
-figure img {
-  max-width: 100%;
-}
-figcaption { 
-    font-size: 11pt;
-    margin-top: 0.5em;
-}
-/* code sections */
-pre > code > code > div,
-pre > code.code-line > div {
-  font-size: 10pt;
-  color: var(--color-code);
-  background-color: var(--bgcol-code);
-  border-radius: 5px;
-  padding: 0.5em;
-  white-space: pre-wrap;
-}
-kbd {
-  font-size: 10pt;
-  border-radius: 3px;
-  padding: 1px 2px 0;
-  margin: 0 2px;
-  color: #444;
-  border: 1px solid #999;
-  background-color: #eee;
-}
-time {
-  color: var(--color-link);
-}
-}  /* end @media screen */`,
-
-settings: `{
-	"explorer.sortOrder": "type"
-}`
+    templates: fs.readFileSync(path.join(
+        vscode.extensions.getExtension('goessner.microjam').extensionPath, 'defaults.js'))
+        .toString(),
+    css: fs.readFileSync(path.join(
+        vscode.extensions.getExtension('goessner.microjam').extensionPath, 'defaults.css'))
+        .toString(),
 };