## 1.5.1

2023-09-29 19:14:53 -07:00 · 2023-09-29 19:14:53 -07:00 · 929d4e1ccd
commit 929d4e1ccd
parent 9ee21dbe30
44 changed files with 3147 additions and 174 deletions
--- a/.gitignore
+++ b/.gitignore
@ -264,3 +264,9 @@ __pycache__/
 type-script-helper-1.1.6.vsix
 type-script-helper-1.1.7.vsix
 type-script-helper-1.1.8.vsix
+
+.kanbn
+*.exe
+*.pdb
+
+.vscode/helper/**
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,5 +1,23 @@
 {
-    "cSpell.words": [
-        "VSIX"
-    ]
+  "[markdown]": {
+    "editor.wordWrap": "off"
+  },
+  "cSpell.words": [
+    "initialise",
+    "Kanban",
+    "VSIX"
+  ],
+  "files.eol": "\n",
+  "files.exclude": {
+    "**/dist": false,
+    "**/node_modules": true,
+    "**/out": false
+  },
+  "files.watcherExclude": {
+    "**/node_modules": true
+  },
+  "search.exclude": {
+    "**/dist": true,
+    "**/out": true
+  }
 }
--- a/Application.evtx
+++ b/Application.evtx
--- a/type-script-helper-1.5.1.vsix
+++ b/type-script-helper-1.5.1.vsix
--- a/type-script-helper/.gitignore
+++ b/type-script-helper/.gitignore
@ -1,5 +1,6 @@
-out
+.vscode-test/
+.vscode/helper/**
+*.vsix
 dist
 node_modules
-.vscode-test/
-*.vsix
+out
--- a/type-script-helper/.vscode/launch.json
+++ b/type-script-helper/.vscode/launch.json
@ -14,22 +14,16 @@
 			],
 			"outFiles": [
 				"${workspaceFolder}/dist/**/*.js"
-			],
-			"preLaunchTask": "${defaultBuildTask}"
+			]
 		},
 		{
-			"name": "Extension Tests",
-			"type": "extensionHost",
+			"type": "node",
 			"request": "launch",
-			"args": [
-				"--extensionDevelopmentPath=${workspaceFolder}",
-				"--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
-			],
+			"name": "Launch Program",
+			"program": "${workspaceFolder}/src/extension.ts",
 			"outFiles": [
-				"${workspaceFolder}/out/**/*.js",
-				"${workspaceFolder}/dist/**/*.js"
-			],
-			"preLaunchTask": "tasks: watch-tests"
+				"${workspaceFolder}/out/**/*.js"
+			]
 		}
 	]
-}
+}
--- a/type-script-helper/.vscode/settings.json
+++ b/type-script-helper/.vscode/settings.json
@ -1,13 +1,23 @@
-// Place your settings in this file to overwrite default and user settings.
 {
-    "files.exclude": {
-        "out": false, // set this to true to hide the "out" folder with the compiled JS files
-        "dist": false // set this to true to hide the "dist" folder with the compiled JS files
-    },
-    "search.exclude": {
-        "out": true, // set this to false to include "out" folder in search results
-        "dist": true // set this to false to include "dist" folder in search results
-    },
-    // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
-    "typescript.tsc.autoDetect": "off"
+  "[markdown]": {
+    "editor.wordWrap": "off"
+  },
+  "cSpell.words": [
+    "initialise",
+    "Kanban",
+    "VSIX"
+  ],
+  "files.eol": "\n",
+  "files.exclude": {
+    "**/dist": false,
+    "**/node_modules": true,
+    "**/out": false
+  },
+  "files.watcherExclude": {
+    "**/node_modules": true
+  },
+  "search.exclude": {
+    "**/dist": true,
+    "**/out": true
+  }
 }
--- a/type-script-helper/.vscode/tasks.json
+++ b/type-script-helper/.vscode/tasks.json
@ -1,40 +0,0 @@
-// See https://go.microsoft.com/fwlink/?LinkId=733558
-// for the documentation about the tasks.json format
-{
-	"version": "2.0.0",
-	"tasks": [
-		{
-			"type": "npm",
-			"script": "watch",
-			"problemMatcher": "$ts-webpack-watch",
-			"isBackground": true,
-			"presentation": {
-				"reveal": "never",
-				"group": "watchers"
-			},
-			"group": {
-				"kind": "build",
-				"isDefault": true
-			}
-		},
-		{
-			"type": "npm",
-			"script": "watch-tests",
-			"problemMatcher": "$tsc-watch",
-			"isBackground": true,
-			"presentation": {
-				"reveal": "never",
-				"group": "watchers"
-			},
-			"group": "build"
-		},
-		{
-			"label": "tasks: watch-tests",
-			"dependsOn": [
-				"npm: watch",
-				"npm: watch-tests"
-			],
-			"problemMatcher": []
-		}
-	]
-}
--- a/type-script-helper/.vscodeignore
+++ b/type-script-helper/.vscodeignore
@ -1,13 +1,14 @@
-.vscode/**
-.vscode-test/**
-out/**
-node_modules/**
-src/**
 .gitignore
+.vscode-test/**
+.vscode/**
 .yarnrc
-webpack.config.js
-vsc-extension-quickstart.md
-**/tsconfig.json
 **/.eslintrc.json
 **/*.map
 **/*.ts
+**/tsconfig.json
+build/**
+node_modules/**
+src/**
+webviews/**
+vsc-extension-quickstart.md
+webpack.config.js
--- a/type-script-helper/CHANGELOG.md
+++ b/type-script-helper/CHANGELOG.md
@ -1,9 +0,0 @@
-# Change Log
-
-All notable changes to the "type-script-helper" extension will be documented in this file.
-
-Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
-
-## [Unreleased]
-
- Initial release
--- a/type-script-helper/LICENSE.md
+++ b/type-script-helper/LICENSE.md
@ -1,3 +1,11 @@
+---
+type: "note"
+created: "2022-03-10T21:18:17.054Z"
+updated: "2022-03-10T21:18:17.054Z"
+---
+
+# LICENSE
+
 Copyright (c) Twitter Inc

 Permission is hereby granted, free of charge, to any person obtaining a copy
@ -16,4 +24,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
+THE SOFTWARE.
--- a/type-script-helper/README.md
+++ b/type-script-helper/README.md
@ -1,3 +1,9 @@
+---
+type: "read-me"
+created: "2023-09-30T01:47:18.241Z"
+updated: "2023-09-30T01:47:18.242Z"
+---
+
 # type-script-helper README

 ## Features
@ -16,10 +22,10 @@ yo code
 # ? What's the name of your extension? HelloWorld
 ### Press <Enter> to choose default for all options below ###

-# ? What's the identifier of your extension? helloworld
+# ? What's the identifier of your extension? hello-world
 # ? What's the description of your extension? LEAVE BLANK
 # ? Initialize a git repository? Yes
-# ? Bundle the source code with webpack? No
+# ? Bundle the source code with webpack? No (should be yes?)
 # ? Which package manager to use? npm

 # ? Do you want to open the new folder with Visual Studio Code? Open with `code`
@ -103,4 +109,11 @@ None
 ## 1.4.4
 -----------------------------------------------------------------------------------------------------------

- Transform to Param Case
+- Transform to Param Case
+
+## 1.5.1
+-----------------------------------------------------------------------------------------------------------
+
+- columns-to-cards-webview-view-provider
+- file-folder-helper-exe
+- clickable list
--- a/type-script-helper/build/node-extension.webpack.config.js
+++ b/type-script-helper/build/node-extension.webpack.config.js
@ -4,24 +4,21 @@

 const path = require('path');

-//@ts-check
-/** @typedef {import('webpack').Configuration} WebpackConfig **/
-
-/** @type WebpackConfig */
-const extensionConfig = {
-  target: 'node', // VS Code extensions run in a Node.js-context 📖 -> https://webpack.js.org/configuration/node/
+/**@type {import('webpack').Configuration}*/
+const config = {
+  target: 'node', // vscode extensions run in a Node.js-context 📖 -> https://webpack.js.org/configuration/node/
 	mode: 'none', // this leaves the source code as close as possible to the original (when packaging we set this to 'production')

  entry: './src/extension.ts', // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
  output: {
    // the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
-    path: path.resolve(__dirname, 'dist'),
+    path: path.resolve(__dirname, '..', 'dist'),
    filename: 'extension.js',
    libraryTarget: 'commonjs2'
  },
+  devtool: 'nosources-source-map',
  externals: {
    vscode: 'commonjs vscode' // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, 📖 -> https://webpack.js.org/configuration/externals/
-    // modules added here also need to be added in the .vscodeignore file
  },
  resolve: {
    // support reading TypeScript and JavaScript files, 📖 -> https://github.com/TypeStrong/ts-loader
@ -39,10 +36,6 @@ const extensionConfig = {
        ]
      }
    ]
-  },
-  devtool: 'nosources-source-map',
-  infrastructureLogging: {
-    level: "log", // enables logging required for problem matchers
-  },
+  }
 };
-module.exports = [ extensionConfig ];
+module.exports = config;
--- a/type-script-helper/media/checklist.svg
+++ b/type-script-helper/media/checklist.svg
@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 4.48h-.71L2 3.43l.71-.7.69.68L4.81 2l.71.71-1.77 1.77zM6.99 3h8v1h-8V3zm0 3h8v1h-8V6zm8 3h-8v1h8V9zm-8 3h8v1h-8v-1zM3.04 7.48h.71l1.77-1.77-.71-.7L3.4 6.42l-.69-.69-.71.71 1.04 1.04zm.71 3.01h-.71L2 9.45l.71-.71.69.69 1.41-1.42.71.71-1.77 1.77zm-.71 3.01h.71l1.77-1.77-.71-.71-1.41 1.42-.69-.69-.71.7 1.04 1.05z"/></svg>
--- a/type-script-helper/media/main.js
+++ b/type-script-helper/media/main.js
@ -0,0 +1,7 @@
+// This script will be run within the webview itself
+// It cannot access the main VS Code APIs directly.
+(function () {
+  const vscode = acquireVsCodeApi();
+
+  console.log("hello there from javascript");
+})();
--- a/type-script-helper/media/reset.css
+++ b/type-script-helper/media/reset.css
@ -0,0 +1,30 @@
+html {
+  box-sizing: border-box;
+  font-size: 13px;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ol,
+ul {
+  margin: 0;
+  padding: 0;
+  font-weight: normal;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
--- a/type-script-helper/media/vscode.css
+++ b/type-script-helper/media/vscode.css
@ -0,0 +1,91 @@
+:root {
+  --container-paddding: 20px;
+  --input-padding-vertical: 6px;
+  --input-padding-horizontal: 4px;
+  --input-margin-vertical: 4px;
+  --input-margin-horizontal: 0;
+}
+
+body {
+  padding: 0 var(--container-paddding);
+  color: var(--vscode-foreground);
+  font-size: var(--vscode-font-size);
+  font-weight: var(--vscode-font-weight);
+  font-family: var(--vscode-font-family);
+  background-color: var(--vscode-editor-background);
+}
+
+ol,
+ul {
+  padding-left: var(--container-paddding);
+}
+
+body > *,
+form > * {
+  margin-block-start: var(--input-margin-vertical);
+  margin-block-end: var(--input-margin-vertical);
+}
+
+*:focus {
+  outline-color: var(--vscode-focusBorder) !important;
+}
+
+a {
+  color: var(--vscode-textLink-foreground);
+}
+
+a:hover,
+a:active {
+  color: var(--vscode-textLink-activeForeground);
+}
+
+code {
+  font-size: var(--vscode-editor-font-size);
+  font-family: var(--vscode-editor-font-family);
+}
+
+button {
+  border: none;
+  padding: var(--input-padding-vertical) var(--input-padding-horizontal);
+  width: 100%;
+  text-align: center;
+  outline: 1px solid transparent;
+  outline-offset: 2px !important;
+  color: var(--vscode-button-foreground);
+  background: var(--vscode-button-background);
+}
+
+button:hover {
+  cursor: pointer;
+  background: var(--vscode-button-hoverBackground);
+}
+
+button:focus {
+  outline-color: var(--vscode-focusBorder);
+}
+
+button.secondary {
+  color: var(--vscode-button-secondaryForeground);
+  background: var(--vscode-button-secondaryBackground);
+}
+
+button.secondary:hover {
+  background: var(--vscode-button-secondaryHoverBackground);
+}
+
+input:not([type="checkbox"]),
+textarea {
+  display: block;
+  width: 100%;
+  border: none;
+  font-family: var(--vscode-font-family);
+  padding: var(--input-padding-vertical) var(--input-padding-horizontal);
+  color: var(--vscode-input-foreground);
+  outline-color: var(--vscode-input-border);
+  background-color: var(--vscode-input-background);
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--vscode-input-placeholderForeground);
+}
--- a/type-script-helper/package-lock.json
+++ b/type-script-helper/package-lock.json
--- a/type-script-helper/package.json
+++ b/type-script-helper/package.json
@ -1,158 +1,264 @@
 {
-  "name": "type-script-helper",
-  "displayName": "Type Script Helper",
-  "description": "Helper for VS Code in TypeScript",
-  "publisher": "IFX",
-  "repository": "https://github.com/mikepharesjr/YO-VSCode/tree/master/type-script-helper",
-  "version": "1.4.4",
-  "engines": {
-    "vscode": "^1.79.0"
-  },
+  "activationEvents": [],
  "categories": [
    "Other"
  ],
-  "activationEvents": [],
-  "main": "./dist/extension.js",
  "contributes": {
+    "configuration": {
+      "type": "object",
+      "title": "Type Script Helper Configuration",
+      "properties": {
+        "fileTemplates.author": {
+          "type": [
+            "string",
+            "null"
+          ],
+          "default": null,
+          "description": "Value to use to replace #{author} variable."
+        },
+        "fileTemplates.company": {
+          "type": [
+            "string",
+            "null"
+          ],
+          "default": null,
+          "description": "Value to use to replace #{company} variable."
+        }
+      }
+    },
    "commands": [
      {
+        "category": "Helper",
        "command": "open-in-new-window.open",
        "title": "Open in New Window"
      },
      {
+        "category": "Helper",
        "command": "promiseLinesHelper.codeGeneratorQuickPick",
        "title": "Code Generator - Quick Pick"
      },
      {
+        "category": "Helper",
        "command": "promiseLinesHelper.insertDateTime",
        "title": "Insert DateTime"
      },
      {
-        "command": "promiseLinesHelper.transformToPopperCase",
-        "title": "Transform to Popper Case"
-      },
-      {
+        "category": "Helper",
        "command": "promiseLinesHelper.transformToParamCase",
        "title": "Transform to Param Case"
      },
      {
+        "category": "Helper",
+        "command": "promiseLinesHelper.transformToPopperCase",
+        "title": "Transform to Popper Case"
+      },
+      {
+        "category": "Helper",
        "command": "readOnlyLinesHelper.searchGoogle",
        "title": "Search Google"
      },
      {
+        "category": "Kanban",
+        "command": "kanban.refreshBoth",
+        "title": "Refresh Kanban Both"
+      },
+      {
+        "category": "Kanban",
+        "command": "kanban.refreshSidebar",
+        "title": "Refresh Kanban Sidebar"
+      },
+      {
+        "category": "Kanban",
+        "command": "kanban.refreshWebView",
+        "title": "Refresh Kanban WebView"
+      },
+      {
+        "category": "Kanban",
+        "command": "kanban.debugReload",
+        "title": "Debug Reload Kanban"
+      },
+      {
+        "category": "Markdown",
+        "command": "markdown.newMarkdownFile",
+        "title": "New Markdown File"
+      },
+      {
+        "category": "Quick Fix",
+        "command": "replaceLinesHelper.quickFixCamelCaseProperties",
+        "title": "Camel Case Properties"
+      },
+      {
+        "category": "Quick Fix",
+        "command": "replaceLinesHelper.quickFixCS0108",
+        "title": " CS0108 (Data Annotations)"
+      },
+      {
+        "category": "Quick Fix",
+        "command": "replaceLinesHelper.quickFixInstanceFieldToCalisthenics",
+        "title": "Instance Field to Calisthenics"
+      },
+      {
+        "category": "Quick Fix",
+        "command": "replaceLinesHelper.quickFixProperCaseProperties",
+        "title": "Proper Case Properties"
+      },
+      {
+        "category": "Quick Fix",
+        "command": "replaceLinesHelper.quickFixPublic",
+        "title": "Public (Expression Body)"
+      },
+      {
+        "category": "Replace",
        "command": "replaceLinesHelper.addCSharpComment",
        "title": "Add C# Comment"
      },
      {
+        "category": "Replace",
        "command": "replaceLinesHelper.addVBComment",
        "title": "Add VB Comment"
      },
      {
+        "category": "Replace",
        "command": "replaceLinesHelper.convertToRegularExpression",
        "title": "Convert to Regular Expression"
      },
      {
+        "category": "Replace",
        "command": "replaceLinesHelper.cutEachLine",
        "title": "Cut each line after |||"
      },
      {
+        "category": "Replace",
        "command": "replaceLinesHelper.distinctLines",
        "title": "Distinct Lines"
      },
      {
+        "category": "Replace",
        "command": "replaceLinesHelper.expandSql",
        "title": "Expand Sql"
      },
      {
+        "category": "Replace",
        "command": "replaceLinesHelper.listToListFamily",
        "title": "List to list family (Kristy, Mike ...)"
      },
      {
+        "category": "Replace",
        "command": "replaceLinesHelper.listToListWrappedComma",
        "title": "List to list wrapped comma"
      },
      {
+        "category": "Replace",
        "command": "replaceLinesHelper.prettySql",
        "title": "Pretty Sql"
      },
      {
-        "command": "replaceLinesHelper.quickFixCamelCaseProperties",
-        "title": "Quick Fix - Camel Case Properties"
-      },
-      {
-        "command": "replaceLinesHelper.quickFixCS0108",
-        "title": "Quick Fix -  CS0108 (Data Annotations)"
-      },
-      {
-        "command": "replaceLinesHelper.quickFixInstanceFieldToCalisthenics",
-        "title": "Quick Fix - Instance Field to Calisthenics"
-      },
-      {
-        "command": "replaceLinesHelper.quickFixProperCaseProperties",
-        "title": "Quick Fix - Proper Case Properties"
-      },
-      {
-        "command": "replaceLinesHelper.quickFixPublic",
-        "title": "Quick Fix - Public (Expression Body)"
-      },
-      {
+        "category": "Replace",
        "command": "replaceLinesHelper.removeComment",
        "title": "Remove comment"
      },
      {
+        "category": "Replace",
        "command": "replaceLinesHelper.sortLength",
        "title": "Sort by Length"
      },
      {
+        "category": "Replace",
        "command": "replaceLinesHelper.sortNormal",
        "title": "My Sort lines (ascending, case sensitive)"
      },
      {
+        "category": "Replace",
        "command": "replaceLinesHelper.splitBySpaceReverseJoinSort",
        "title": "Split by Space Reverse Join Sort lines (ascending, case sensitive)"
      },
      {
+        "category": "Replace",
        "command": "replaceLinesHelper.unwrapSql",
        "title": "Un-wrap Sql"
      },
      {
+        "category": "Replace",
        "command": "replaceLinesHelper.wrapSqlCSharp",
        "title": "Wrap Sql for C#"
      },
      {
+        "category": "Replace",
        "command": "replaceLinesHelper.wrapSqlVB",
        "title": "Wrap Sql for VB"
+      },
+      {
+        "category": "WebView",
+        "command": "webView.webView",
+        "title": "Web View"
      }
-    ]
+    ],
+    "views": {
+      "columns-to-cards-webview-view-provider-view": [
+        {
+          "contextualTitle": "Kanban",
+          "icon": "media/checklist.svg",
+          "id": "columns-to-cards-webview-view-provider",
+          "name": "Kanban",
+          "type": "webview"
+        }
+      ]
+    },
+    "viewsContainers": {
+      "activitybar": [
+        {
+          "icon": "media/checklist.svg",
+          "id": "columns-to-cards-webview-view-provider-view",
+          "title": "Kanban"
+        }
+      ]
+    }
  },
-  "scripts": {
-    "vscode:prepublish": "npm run package",
-    "compile": "webpack",
-    "watch": "webpack --watch",
-    "package": "webpack --mode production --devtool hidden-source-map",
-    "compile-tests": "tsc -p . --outDir out",
-    "watch-tests": "tsc -p . -w --outDir out",
-    "pretest": "npm run compile-tests && npm run compile && npm run lint",
-    "lint": "eslint src --ext ts",
-    "test": "node ./out/test/runTest.js"
+  "dependencies": {
+    "@vscode/vsce": "^2.19.0",
+    "polka": "^0.5.2"
  },
+  "description": "Helper for VS Code in TypeScript",
  "devDependencies": {
+    "@nodelib/fs.stat": "^3.0.0",
+    "@rollup/plugin-commonjs": "^25.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.1",
+    "@rollup/plugin-typescript": "^11.1.4",
+    "@tsconfig/svelte": "^1.0.10",
    "@types/glob": "^8.1.0",
    "@types/mocha": "^10.0.1",
    "@types/node": "20.2.5",
+    "@types/polka": "^0.5.1",
    "@types/vscode": "^1.79.0",
    "@typescript-eslint/eslint-plugin": "^5.59.8",
    "@typescript-eslint/parser": "^5.59.8",
    "@vscode/test-electron": "^2.3.2",
+    "concurrently": "^8.2.1",
    "eslint": "^8.41.0",
    "glob": "^8.1.0",
    "mocha": "^10.2.0",
+    "rollup": "^2.3.4",
+    "rollup-plugin-svelte": "^6.1.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "svelte": "^3.31.0",
+    "svelte-check": "^1.1.23",
+    "svelte-preprocess": "^5.0.4",
    "ts-loader": "^9.4.3",
    "typescript": "^5.1.3",
    "webpack": "^5.85.0",
    "webpack-cli": "^5.1.1"
  },
-  "dependencies": {
-    "@vscode/vsce": "^2.19.0"
-  }
+  "displayName": "Type Script Helper",
+  "engines": {
+    "vscode": "^1.79.0"
+  },
+  "main": "./dist/extension.js",
+  "name": "type-script-helper",
+  "publisher": "IFX",
+  "repository": "https://github.com/mikepharesjr/YO-VSCode/tree/master/type-script-helper",
+  "scripts": {
+    "vscode:publish": "node node_modules/@vscode/vsce/vsce package",
+    "watch": "concurrently \"rollup -c -w\" \"webpack --watch --config ./build/node-extension.webpack.config.js\""
+  },
+  "version": "1.5.2"
 }
--- a/type-script-helper/rollup.config.js
+++ b/type-script-helper/rollup.config.js
@ -0,0 +1,68 @@
+import svelte from "rollup-plugin-svelte";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import { terser } from "rollup-plugin-terser";
+import sveltePreprocess from "svelte-preprocess";
+import typescript from "@rollup/plugin-typescript";
+import path from "path";
+import fs from "fs";
+
+const production = !process.env.ROLLUP_WATCH;
+
+export default fs
+  .readdirSync(path.join(__dirname, "webviews", "pages"))
+  .map((input) => {
+    const name = input.split(".")[0];
+    return {
+      input: "webviews/pages/" + input,
+      output: {
+        sourcemap: true,
+        format: "iife",
+        name: "app",
+        file: "out/compiled/" + name + ".js",
+      },
+      plugins: [
+        svelte({
+          // enable run-time checks when not in production
+          dev: !production,
+          // we'll extract any component CSS out into
+          // a separate file - better for performance
+          css: (css) => {
+            css.write(name + ".css");
+          },
+          preprocess: sveltePreprocess(),
+        }),
+
+        // If you have external dependencies installed from
+        // npm, you'll most likely need these plugins. In
+        // some cases you'll need additional configuration -
+        // consult the documentation for details:
+        // https://github.com/rollup/plugins/tree/master/packages/commonjs
+        resolve({
+          browser: true,
+          dedupe: ["svelte"],
+        }),
+        commonjs(),
+        typescript({
+          tsconfig: "webviews/tsconfig.json",
+          sourceMap: !production,
+          inlineSources: !production,
+        }),
+
+        // In dev mode, call `npm run start` once
+        // the bundle has been generated
+        // !production && serve(),
+
+        // Watch the `public` directory and refresh the
+        // browser on changes when not in production
+        // !production && livereload("public"),
+
+        // If we're building for production (npm run build
+        // instead of npm run dev), minify
+        production && terser(),
+      ],
+      watch: {
+        clearScreen: false,
+      },
+    };
+  });
--- a/type-script-helper/src/Card.ts
+++ b/type-script-helper/src/Card.ts
@ -0,0 +1,22 @@
+import { H2HexColor } from "./H2HexColor";
+import { LineNumber } from "./LineNumber";
+import { H2NoCheckboxes } from "./H2NoCheckboxes";
+import { H2WithCheckboxes } from "./H2WithCheckboxes";
+
+export type Card = {
+  Assignees: Array<string>;
+  CreationDateTime: Date;
+  Directory: string;
+  Extension: string;
+  File: string;
+  FileName: string;
+  FileNameWithoutExtension: string;
+  H1: string;
+  H2HexColorCollection: Array<H2HexColor>;
+  H2NoCheckboxesCollection: Array<H2NoCheckboxes>;
+  H2WithCheckboxesCollection: Array<H2WithCheckboxes>;
+  LastWriteDateTime: Date;
+  LineNumber: LineNumber;
+  RequestedDateTime: string;
+  Type: string;
+};
--- a/type-script-helper/src/ColumnsToCardsWebviewViewProvider.ts
+++ b/type-script-helper/src/ColumnsToCardsWebviewViewProvider.ts
@ -0,0 +1,188 @@
+import { Card } from "./Card";
+import { readFile } from "fs";
+import * as vscode from "vscode";
+import { getNonce } from "./getNonce";
+import { PostMessage } from "./PostMessage";
+import { apiBaseUrl, key } from "./constants";
+import { ExecException, exec } from 'child_process';
+
+export function refreshSidebarLogic(): undefined {
+  vscode.commands.executeCommand("workbench.action.closeSidebar").then(_ => {
+    vscode.commands.executeCommand("workbench.view.extension.columns-to-cards-sidebar-view");
+  });
+}
+
+function columnsToCardsRead(webviewView: vscode.WebviewView, columnsToCardsUri: vscode.Uri, err: NodeJS.ErrnoException | null, data: string | Buffer) {
+  if (err)
+    vscode.window.showInformationMessage(`<${columnsToCardsUri.fsPath}> doesn't exist! ${err.message}`);
+  const columnsToCards: Record<string, Array<Card>> = {};
+  const jsonObject: any = JSON.parse(data.toString('utf8'));
+  for (const property in jsonObject) {
+    columnsToCards[property] = jsonObject[property];
+  }
+  const postMessage: PostMessage = { type: "columns-to-cards", value: columnsToCards };
+  webviewView.webview.postMessage(postMessage);
+}
+
+function execCallback(webviewView: vscode.WebviewView, destination: vscode.Uri, error: ExecException | null, stdout: string, stderr: string) {
+  if (error) {
+    vscode.window.showInformationMessage(error.message);
+    return;
+  }
+  if (stderr) {
+    vscode.window.showInformationMessage(stderr);
+    return;
+  }
+  console.log(`stdout: ${stdout}`);
+  const columnsToCards = vscode.Uri.joinPath(destination, "columnsToCards.json");
+  readFile(columnsToCards.fsPath, (err, data) =>
+    columnsToCardsRead(webviewView, columnsToCards, err, data));
+};
+
+async function postColumnsToCards(extensionUri: vscode.Uri, webviewView: vscode.WebviewView) {
+  if (vscode.workspace.workspaceFolders === undefined)
+    vscode.window.showInformationMessage("Open workspace first!");
+  else {
+    const workspaceFoldersZero = vscode.workspace.workspaceFolders[0].uri;
+    const destination: vscode.Uri = vscode.Uri.joinPath(workspaceFoldersZero, ".vscode", "helper");
+    const fileFolderHelper: vscode.Uri = vscode.Uri.joinPath(extensionUri, "net7.0", "win-x64", "publish", "File-Folder-Helper.exe");
+    const command: string = `${fileFolderHelper.fsPath} s M ${workspaceFoldersZero.fsPath} -s ${workspaceFoldersZero.fsPath} -d ${destination.fsPath}`;
+    exec(command, (error, stdout, stderr) =>
+      execCallback(webviewView, destination, error, stdout, stderr));
+  }
+}
+
+function getToken(workspaceState: vscode.Memento, webviewView: vscode.WebviewView) {
+  webviewView.webview.postMessage({
+    type: "token",
+    value: workspaceState.get(key),
+  });
+}
+
+function authenticate(workspaceState: vscode.Memento, webviewView: vscode.WebviewView) {
+  webviewView.webview.postMessage({
+    type: "token",
+    value: workspaceState.get(key),
+  });
+}
+
+function logout(workspaceState: vscode.Memento) {
+  workspaceState.update(key, "");
+}
+
+async function openCard(value: any) {
+  if (vscode.workspace.workspaceFolders === undefined)
+    vscode.window.showInformationMessage("Open workspace first!");
+  else {
+    if (!value.File)
+      vscode.window.showInformationMessage("File wasn't passed!");
+    else {
+      const textDocument: vscode.TextDocument = await vscode.workspace.openTextDocument(value.File);
+      vscode.window.showTextDocument(textDocument);
+    }
+  }
+}
+
+export class ColumnsToCardsWebviewViewProvider implements vscode.WebviewViewProvider {
+  _view?: vscode.WebviewView;
+
+  constructor(private readonly _extensionContext: vscode.ExtensionContext) {
+  }
+
+  public revive(panel: vscode.WebviewView) {
+    this._view = panel;
+  }
+
+  public resolveWebviewView(webviewView: vscode.WebviewView) {
+    this._view = webviewView;
+
+    webviewView.webview.options = {
+      // Allow scripts in the webview
+      enableScripts: true,
+
+      localResourceRoots: [this._extensionContext.extensionUri],
+    };
+
+    webviewView.webview.html = this._getHtmlForWebview(webviewView.webview);
+
+    webviewView.webview.onDidReceiveMessage(async (postMessage: PostMessage) => {
+      switch (postMessage.type) {
+        case "logout":
+          logout(this._extensionContext.workspaceState);
+          break;
+        case "authenticate":
+          authenticate(this._extensionContext.workspaceState, webviewView);
+          break;
+        case "get-token":
+          getToken(this._extensionContext.workspaceState, webviewView);
+          break;
+        case "get-columns-to-cards":
+          postColumnsToCards(this._extensionContext.extensionUri, webviewView);
+          break;
+        case "open-card":
+          openCard(postMessage.value);
+          break;
+        case "on-info":
+          if (!postMessage.value)
+            return;
+          vscode.window.showInformationMessage(postMessage.value);
+          break;
+        case "on-error":
+          if (!postMessage.value)
+            return;
+          vscode.window.showErrorMessage(postMessage.value);
+          break;
+        default:
+          vscode.window.showErrorMessage(postMessage.type);
+          break;
+      }
+    });
+  }
+
+  private _getHtmlForWebview(webview: vscode.Webview) {
+    const styleResetUri = webview.asWebviewUri(
+      vscode.Uri.joinPath(this._extensionContext.extensionUri, "media", "reset.css")
+    );
+    const styleVSCodeUri = webview.asWebviewUri(
+      vscode.Uri.joinPath(this._extensionContext.extensionUri, "media", "vscode.css")
+    );
+
+    const scriptUri = webview.asWebviewUri(
+      vscode.Uri.joinPath(this._extensionContext.extensionUri, "out", "compiled/ColumnsToCards.js")
+    );
+    const styleMainUri = webview.asWebviewUri(
+      vscode.Uri.joinPath(this._extensionContext.extensionUri, "out", "compiled/ColumnsToCards.css")
+    );
+
+    // Use a nonce to only allow a specific script to be run.
+    const nonce = getNonce();
+
+    return `<!DOCTYPE html>
+			<html lang="en">
+			<head>
+				<meta charset="UTF-8">
+				<!--
+					Use a content security policy to only allow loading images from https or from our extension directory,
+					and only allow scripts that have a specific nonce.
+        -->
+        <meta http-equiv="Content-Security-Policy"
+          content="img-src https: data:;
+          style-src 'unsafe-inline' ${webview.cspSource};
+          script-src 'nonce-${nonce}';">
+				<meta name="viewport" content="width=device-width, initial-scale=1.0">
+				<link href="${styleResetUri}" rel="stylesheet">
+				<link href="${styleVSCodeUri}" rel="stylesheet">
+        <link href="${styleMainUri}" rel="stylesheet">
+        <script nonce="${nonce}">
+          const acquiredVsCodeApi = acquireVsCodeApi();
+          const apiBaseUrl = ${JSON.stringify(apiBaseUrl)}
+        </script>
+			</head>
+      <body>
+				<script nonce="${nonce}" src="${scriptUri}"></script>
+			</body>
+			</html>`;
+  }
+}
+
+export const refreshSidebar = () => refreshSidebarLogic();
--- a/type-script-helper/src/H2HexColor.ts
+++ b/type-script-helper/src/H2HexColor.ts
@ -0,0 +1,4 @@
+export type H2HexColor = {
+  H2: string;
+  HexColor: string;
+};
--- a/type-script-helper/src/H2NoCheckboxes.ts
+++ b/type-script-helper/src/H2NoCheckboxes.ts
@ -0,0 +1,5 @@
+
+export type H2NoCheckboxes = {
+  H2: string;
+  Lines: Array<string>;
+};
--- a/type-script-helper/src/H2WithCheckboxes.ts
+++ b/type-script-helper/src/H2WithCheckboxes.ts
@ -0,0 +1,7 @@
+
+export type H2WithCheckboxes = {
+  Completed: number;
+  H2: string;
+  NotCompleted: number;
+  Total: number;
+};
--- a/type-script-helper/src/LineNumber.ts
+++ b/type-script-helper/src/LineNumber.ts
@ -0,0 +1,9 @@
+
+export type LineNumber = {
+  Created: number;
+  H1: number;
+  FrontMatterYamlEnd: number;
+  Status: number;
+  Type: number;
+  Updated: number;
+};
--- a/type-script-helper/src/PostMessage.ts
+++ b/type-script-helper/src/PostMessage.ts
@ -0,0 +1,5 @@
+
+export type PostMessage = {
+  type: string;
+  value: any;
+};
--- a/type-script-helper/src/WebViewPanel.ts
+++ b/type-script-helper/src/WebViewPanel.ts
@ -0,0 +1,166 @@
+import * as vscode from "vscode";
+import { getNonce } from "./getNonce";
+import { apiBaseUrl } from "./constants";
+import { PostMessage } from "./PostMessage";
+
+export function refreshWebView(extensionContext: vscode.ExtensionContext): undefined {
+  WebViewPanel.kill();
+  WebViewPanel.createOrShow(extensionContext);
+}
+
+export class WebViewPanel {
+  /**
+   * Track the currently panel. Only allow a single panel to exist at a time.
+   */
+  public static currentPanel: WebViewPanel | undefined;
+
+  public static readonly viewType = "web-view-panel";
+
+  private _disposables: vscode.Disposable[] = [];
+
+  public static createOrShow(extensionContext: vscode.ExtensionContext) {
+    const column = vscode.window.activeTextEditor
+      ? vscode.window.activeTextEditor.viewColumn
+      : undefined;
+
+    // If we already have a panel, show it.
+    if (WebViewPanel.currentPanel) {
+      WebViewPanel.currentPanel._panel.reveal(column);
+      WebViewPanel.currentPanel._update();
+      return;
+    }
+
+    // Otherwise, create a new panel.
+    const panel = vscode.window.createWebviewPanel(
+      WebViewPanel.viewType,
+      "Web-View-Panel",
+      column || vscode.ViewColumn.One,
+      {
+        // Enable javascript in the webview
+        enableScripts: true,
+
+        // And restrict the webview to only loading content from our extension's `media` directory.
+        localResourceRoots: [
+          vscode.Uri.joinPath(extensionContext.extensionUri, "media"),
+          vscode.Uri.joinPath(extensionContext.extensionUri, "out/compiled"),
+        ],
+      }
+    );
+
+    WebViewPanel.currentPanel = new WebViewPanel(panel, extensionContext);
+  }
+
+  public static kill() {
+    WebViewPanel.currentPanel?.dispose();
+    WebViewPanel.currentPanel = undefined;
+  }
+
+  public static revive(panel: vscode.WebviewPanel, extensionContext: vscode.ExtensionContext) {
+    WebViewPanel.currentPanel = new WebViewPanel(panel, extensionContext);
+  }
+
+  private constructor(private readonly _panel: vscode.WebviewPanel, private readonly _extensionContext: vscode.ExtensionContext) {
+
+    // Set the webview's initial html content
+    this._update();
+
+    // Listen for when the panel is disposed
+    // This happens when the user closes the panel or when the panel is closed programmatically
+    this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
+
+    // // Handle messages from the webview
+    // this._panel.webview.onDidReceiveMessage(
+    //   (message) => {
+    //     switch (message.command) {
+    //       case "alert":
+    //         vscode.window.showErrorMessage(message.text);
+    //         return;
+    //     }
+    //   },
+    //   null,
+    //   this._disposables
+    // );
+  }
+
+  public dispose() {
+    WebViewPanel.currentPanel = undefined;
+
+    // Clean up our resources
+    this._panel.dispose();
+
+    while (this._disposables.length) {
+      const x = this._disposables.pop();
+      if (x) {
+        x.dispose();
+      }
+    }
+  }
+
+  private async _update() {
+    const webview = this._panel.webview;
+
+    this._panel.webview.html = this._getHtmlForWebview(webview);
+    webview.onDidReceiveMessage(async (postMessage: PostMessage) => {
+      switch (postMessage.type) {        
+        case "on-info":
+          if (!postMessage.value)
+            return;
+          vscode.window.showInformationMessage(postMessage.value);
+          break;
+        case "on-error":
+          if (!postMessage.value)
+            return;
+          vscode.window.showErrorMessage(postMessage.value);
+          break;
+        default:
+          vscode.window.showErrorMessage(postMessage.type);
+          break;
+      }
+    });
+  }
+
+  private _getHtmlForWebview(webview: vscode.Webview) {
+    const styleResetUri = webview.asWebviewUri(
+      vscode.Uri.joinPath(this._extensionContext.extensionUri, "media", "reset.css")
+    );
+    const styleVSCodeUri = webview.asWebviewUri(
+      vscode.Uri.joinPath(this._extensionContext.extensionUri, "media", "vscode.css")
+    );
+
+    const scriptUri = webview.asWebviewUri(
+      vscode.Uri.joinPath(this._extensionContext.extensionUri, "out", "compiled/DisplayDate.js")
+    );
+    const styleMainUri = webview.asWebviewUri(
+      vscode.Uri.joinPath(this._extensionContext.extensionUri, "out", "compiled/DisplayDate.css")
+    );
+
+    // Use a nonce to only allow a specific script to be run.
+    const nonce = getNonce();
+
+    return `<!DOCTYPE html>
+			<html lang="en">
+			<head>
+				<meta charset="UTF-8">
+				<!--
+					Use a content security policy to only allow loading images from https or from our extension directory,
+					and only allow scripts that have a specific nonce.
+        -->
+        <meta http-equiv="Content-Security-Policy"
+          content="img-src https: data:;
+          style-src 'unsafe-inline' ${webview.cspSource};
+          script-src 'nonce-${nonce}';">
+				<meta name="viewport" content="width=device-width, initial-scale=1.0">
+				<link href="${styleResetUri}" rel="stylesheet">
+				<link href="${styleVSCodeUri}" rel="stylesheet">
+        <link href="${styleMainUri}" rel="stylesheet">
+        <script nonce="${nonce}">
+          const acquiredVsCodeApi = acquireVsCodeApi();
+          const apiBaseUrl = ${JSON.stringify(apiBaseUrl)}
+        </script>
+			</head>
+      <body>
+				<script nonce="${nonce}" src="${scriptUri}"></script>
+			</body>
+			</html>`;
+  }
+}
--- a/type-script-helper/src/constants.ts
+++ b/type-script-helper/src/constants.ts
@ -0,0 +1,2 @@
+export const apiBaseUrl: string = "http://localhost:3002";
+export const key: string = "type-script-helper";
--- a/type-script-helper/src/extension.ts
+++ b/type-script-helper/src/extension.ts
@ -1,13 +1,25 @@
 // The module 'vscode' contains the VS Code extensibility API
 // Import the module and reference it with the alias vscode in your code below
 import * as vscode from 'vscode';
+import * as kanbanHelper from './kanbanHelper';
+import * as markdownHelper from './markdownHelper';
+import * as promiseLinesHelper from './promiseLinesHelper';
 import * as replaceLinesHelper from './replaceLinesHelper';
 import * as readOnlyLinesHelper from './readOnlyLinesHelper';
-import * as promiseLinesHelper from './promiseLinesHelper';
+import { WebViewPanel, refreshWebView } from "./WebViewPanel";
+import { ColumnsToCardsWebviewViewProvider, refreshSidebar } from "./ColumnsToCardsWebviewViewProvider";

 // This method is called when your extension is activated
 // Your extension is activated the very first time the command is executed
-export function activate(context: vscode.ExtensionContext) {
+export async function activate(extensionContext: vscode.ExtensionContext) {
+
+	const columnsToCardsWebviewViewProvider = new ColumnsToCardsWebviewViewProvider(extensionContext);
+
+	const item = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right);
+	item.text = "$(beaker) Show Kanban";
+	// item.command = "kanban.show";
+	item.show();
+	extensionContext.subscriptions.push(vscode.window.registerWebviewViewProvider("columns-to-cards-webview-view-provider", columnsToCardsWebviewViewProvider));

 	// Use the console to output diagnostic information (console.log) and errors (console.error)
 	// This line of code will only be executed once when your extension is activated
@ -25,6 +37,10 @@ export function activate(context: vscode.ExtensionContext) {
 	// context.subscriptions.push(disposable);

 	const commands = [
+		vscode.commands.registerCommand("kanban.refreshBoth", () => { kanbanHelper.refreshBoth(extensionContext); }),
+		vscode.commands.registerCommand("kanban.refreshSidebar", refreshSidebar),
+		vscode.commands.registerCommand("kanban.refreshWebView", () => { refreshWebView(extensionContext); }),
+		vscode.commands.registerCommand("markdown.newMarkdownFile", markdownHelper.newMarkdownFile),
 		vscode.commands.registerCommand('promiseLinesHelper.codeGeneratorQuickPick', promiseLinesHelper.codeGeneratorQuickPick),
 		vscode.commands.registerCommand('promiseLinesHelper.insertDateTime', promiseLinesHelper.insertDateTime),
 		vscode.commands.registerCommand('promiseLinesHelper.transformToPopperCase', promiseLinesHelper.transformToPopperCase),
@ -50,10 +66,11 @@ export function activate(context: vscode.ExtensionContext) {
 		vscode.commands.registerCommand('replaceLinesHelper.splitBySpaceReverseJoinSort', replaceLinesHelper.splitBySpaceReverseJoinSort),
 		vscode.commands.registerCommand('replaceLinesHelper.unwrapSql', replaceLinesHelper.unwrapSql),
 		vscode.commands.registerCommand('replaceLinesHelper.wrapSqlCSharp', replaceLinesHelper.wrapSqlCSharp),
-		vscode.commands.registerCommand('replaceLinesHelper.wrapSqlVB', replaceLinesHelper.wrapSqlVB)
+		vscode.commands.registerCommand('replaceLinesHelper.wrapSqlVB', replaceLinesHelper.wrapSqlVB),
+		vscode.commands.registerCommand("webView.webView", () => { WebViewPanel.createOrShow(extensionContext); })
 	];

-	commands.forEach(command => context.subscriptions.push(command));
+	commands.forEach(command => extensionContext.subscriptions.push(command));
 }

 // This method is called when your extension is deactivated
--- a/type-script-helper/src/getNonce.ts
+++ b/type-script-helper/src/getNonce.ts
@ -0,0 +1,9 @@
+export function getNonce() {
+  let text = "";
+  const possible =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  for (let i = 0; i < 32; i++) {
+    text += possible.charAt(Math.floor(Math.random() * possible.length));
+  }
+  return text;
+}
--- a/type-script-helper/src/kanbanHelper.ts
+++ b/type-script-helper/src/kanbanHelper.ts
@ -0,0 +1,9 @@
+import * as vscode from 'vscode';
+import { refreshWebView } from './WebViewPanel';
+import { refreshSidebar } from './ColumnsToCardsWebviewViewProvider';
+
+export function refreshBoth(extensionContext: vscode.ExtensionContext): undefined {
+    refreshSidebar();
+    refreshWebView(extensionContext);
+    setTimeout(() => { vscode.commands.executeCommand("workbench.action.webview.openDeveloperTools"); }, 500);
+}
--- a/type-script-helper/src/markdownHelper.ts
+++ b/type-script-helper/src/markdownHelper.ts
@ -0,0 +1,21 @@
+import * as vscode from 'vscode';
+import { paramCase } from './promiseLinesHelper';
+
+async function newMarkdownFileLogic(): Promise<undefined> {
+    if (vscode.workspace.workspaceFolders === undefined) {
+        vscode.window.showInformationMessage("Open workspace first!");
+        return;
+    }
+    const workspaceFoldersZero = vscode.workspace.workspaceFolders[0].uri;
+    const cardTitle = await vscode.window.showInputBox({ prompt: 'Provide title for card.' });
+    if (cardTitle === undefined)
+        return;
+    const paramCaseCardTitle: string = paramCase(cardTitle);
+    const fileUri: vscode.Uri = vscode.Uri.joinPath(workspaceFoldersZero, `${paramCaseCardTitle}.md`);
+    const buffer: Buffer = Buffer.from(`# ${cardTitle}`, 'utf8');
+    await vscode.workspace.fs.writeFile(fileUri, buffer);
+    const textDocument: vscode.TextDocument = await vscode.workspace.openTextDocument(fileUri);
+    vscode.window.showTextDocument(textDocument);
+}
+
+export const newMarkdownFile = () => newMarkdownFileLogic();
--- a/type-script-helper/src/promiseLinesHelper.ts
+++ b/type-script-helper/src/promiseLinesHelper.ts
@ -177,7 +177,7 @@ function transformToPopperCaseLogic(): undefined {
    return undefined;
 }

-function paramCase(str: string) {
+export function paramCase(str: string) {
    return str
        .replace(
            /([A-Z]+(.))/g,
--- a/type-script-helper/tsconfig.json
+++ b/type-script-helper/tsconfig.json
@ -1,16 +1,18 @@
 {
 	"compilerOptions": {
-		"module": "commonjs",
-		"target": "ES2020",
+		"allowSyntheticDefaultImports": true,
 		"lib": [
 			"ES2020"
 		],
-		"sourceMap": true,
+		"module": "commonjs",
 		"rootDir": "src",
-		"strict": true   /* enable all strict type-checking options */
-		/* Additional Checks */
-		// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
-		// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
-		// "noUnusedParameters": true,  /* Report errors on unused parameters. */
-	}
-}
+		"sourceMap": true,
+		"strict": true,
+		"target": "ES2020"
+	},
+	"exclude": [
+		"node_modules",
+		".vscode-test",
+		"webviews"
+	]
+}
--- a/type-script-helper/vsc-extension-quickstart.md
+++ b/type-script-helper/vsc-extension-quickstart.md
@ -1,3 +1,11 @@
+---
+type: "note"
+created: "2023-07-07T16:15:27.822Z"
+updated: "2023-07-07T16:15:27.822Z"
+---
+
+# vsc-extension-quickstart
+
 # Welcome to your VS Code Extension

 ## What's in the folder
--- a/type-script-helper/webviews/components/CardComponent.svelte
+++ b/type-script-helper/webviews/components/CardComponent.svelte
@ -0,0 +1,25 @@
+<script lang="ts">
+  import type { Card } from "../../src/Card";
+
+  export let key: string;
+  export let card: Card;
+  export let index: number;
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore missing-declaration -->
+<li id={index.toString()}>
+  <!-- svelte-ignore a11y-invalid-attribute -->
+  <a
+    href="#{index.toString()}"
+    title="{key}"
+    on:click={async () => {
+      acquiredVsCodeApi.postMessage({
+        type: "open-card",
+        value: { File: card.File },
+      });
+    }}
+  >
+    {card.H1}
+  </a>
+</li>
--- a/type-script-helper/webviews/components/Cards.svelte
+++ b/type-script-helper/webviews/components/Cards.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { Card } from "../../src/Card";
+  import CardComponent from "./CardComponent.svelte";
+
+  export let key: string = "";
+  export let value: Array<Card> = [];
+</script>
+
+{#if !value}
+  <div>loading...</div>
+{:else}
+  <hr>
+  <h1>{key}</h1>
+  <ul>
+    {#each value as card, index}
+      <CardComponent {key} {card} {index} />
+    {/each}
+  </ul>
+{/if}
--- a/type-script-helper/webviews/components/ColumnsToCards.svelte
+++ b/type-script-helper/webviews/components/ColumnsToCards.svelte
@ -0,0 +1,33 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import Cards from "./Cards.svelte";
+  import type { Card } from "../../src/Card";
+  import type { PostMessage } from "../../src/PostMessage";
+
+  let columnsToCards: Record<string, Array<Card>> = {};
+
+  onMount(async () => {
+    window.addEventListener("message", async (event) => {
+      const postMessage: PostMessage = event.data;
+      switch (postMessage.type) {
+        case "columns-to-cards": {
+          columnsToCards = postMessage.value;
+          break;
+        }
+      }
+    });
+    const postMessage: PostMessage = {
+      type: "get-columns-to-cards",
+      value: undefined,
+    };
+    acquiredVsCodeApi.postMessage(postMessage);
+  });
+</script>
+
+{#if Object.entries(columnsToCards).length == 0}
+  <div>loading...</div>
+{:else}
+  {#each Object.entries(columnsToCards) as [key, value], index (key)}
+    <Cards {key} {value} />
+  {/each}
+{/if}
--- a/type-script-helper/webviews/components/DisplayDate.svelte
+++ b/type-script-helper/webviews/components/DisplayDate.svelte
@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+<h1>2023-09-23-15-20</h1>
--- a/type-script-helper/webviews/globals.d.ts
+++ b/type-script-helper/webviews/globals.d.ts
@ -0,0 +1,10 @@
+import * as _vscode from "vscode";
+import type { PostMessage } from "../types";
+
+declare global {
+  const acquiredVsCodeApi: {
+    postMessage: (PostMessage) => void;
+    getState: () => any;
+    setState: (state: any) => void;
+  };
+}
--- a/type-script-helper/webviews/pages/ColumnsToCards.ts
+++ b/type-script-helper/webviews/pages/ColumnsToCards.ts
@ -0,0 +1,7 @@
+import App from "../components/ColumnsToCards.svelte";
+
+const app = new App({
+  target: document.body,
+});
+
+export default app;
--- a/type-script-helper/webviews/pages/DisplayDate.ts
+++ b/type-script-helper/webviews/pages/DisplayDate.ts
@ -0,0 +1,7 @@
+import App from "../components/DisplayDate.svelte";
+
+const app = new App({
+  target: document.body,
+});
+
+export default app;
--- a/type-script-helper/webviews/tsconfig.json
+++ b/type-script-helper/webviews/tsconfig.json
@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "ignoreDeprecations": "5.0",
+    "strict": true
+  },
+  "exclude": [
+    "../node_modules/*"
+  ],
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "include": [
+    "./**/*"
+  ]
+}
				`@ -0,0 +1 @@`
				`<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 4.48h-.71L2 3.43l.71-.7.69.68L4.81 2l.71.71-1.77 1.77zM6.99 3h8v1h-8V3zm0 3h8v1h-8V6zm8 3h-8v1h8V9zm-8 3h8v1h-8v-1zM3.04 7.48h.71l1.77-1.77-.71-.7L3.4 6.42l-.69-.69-.71.71 1.04 1.04zm.71 3.01h-.71L2 9.45l.71-.71.69.69 1.41-1.42.71.71-1.77 1.77zm-.71 3.01h.71l1.77-1.77-.71-.71-1.41 1.42-.69-.69-.71.7 1.04 1.05z"/></svg>`