pretty context menu (#12)

* pretty context menu

* add res

* add resource to html

* work well

* test local extension

.vscodeignore

@@ -9,4 +9,5 @@ vsc-extension-quickstart.md
 **/.eslintrc.json
 docs/**
 node_modules/**
-src/**/*.js
+src/**/*.js
+!src/server/assets/js/*.js

README.md

@@ -61,6 +61,18 @@ I have fixed all the issues I met. If you find any issues, please report them to
 
 ## Release Notes
 
+### 1.3.0
+
+- fix:
+
+  - need to reload the VSCode if the `index.html` is changed
+
+    now, you can just reopen the Docsify-Preview to make it work
+
+- change
+
+  pretty context menu
+
 ### 1.2.0
 
 fix: issue

jsconfig.json

@@ -1,13 +1,9 @@
 {
-	"compilerOptions": {
-		"module": "commonjs",
-		"target": "ES2020",
-		"checkJs": true,  /* Typecheck .js files. */
-		"lib": [
-			"ES2020"
-		]
-	},
-	"exclude": [
-		"node_modules"
-	]
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "ES2020",
+    "checkJs": true /* Typecheck .js files. */,
+    "lib": ["ES2020"]
+  },
+  "exclude": ["node_modules"]
 }

package.json

@@ -2,7 +2,7 @@
   "name": "docsify-preview",
   "displayName": "docsify-Preview",
   "description": "write docs easily with docsify",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "engines": {
     "vscode": "^1.71.0"
   },

src/config.js

@@ -3,11 +3,12 @@ const fs = require("fs");
 const vscode = require("vscode");
 const webViewHtmlRelativePath = "src/server/webView.html";
 const injectedRelativePath = "src/server/listener/injected.html";
+const webViewAssetsRelativePath = "src/server";
+let webViewAssetsPath;
 let host = "127.0.0.1";
 let indexFileName;
 let docsifyRootPath;
 let extensionPath;
-let injectCode;
 let port;
 let webViewHtmlPath;
 let injectedPath;
@@ -16,8 +17,8 @@ let docsifyIndexFilePath;
 function initExtension(context) {
   extensionPath = context.extensionPath;
   webViewHtmlPath = path.join(extensionPath, webViewHtmlRelativePath);
+  webViewAssetsPath = path.join(extensionPath, webViewAssetsRelativePath);
   injectedPath = path.join(extensionPath, injectedRelativePath);
-  injectCode = fs.readFileSync(injectedPath, "utf8");
 }
 
 function getConfigurationForWorkspace() {
@@ -41,6 +42,9 @@ module.exports = {
   get webViewHtmlPath() {
     return webViewHtmlPath;
   },
+  get webViewAssetsPath() {
+    return webViewAssetsPath;
+  },
   host,
   get port() {
     return port;
@@ -64,7 +68,7 @@ module.exports = {
     return extensionPath;
   },
   get injectCode() {
-    return injectCode;
+    return fs.readFileSync(injectedPath, "utf8");
   },
   get panelIconPath() {
     return vscode.Uri.file(path.join(this.extensionPath, "assets/icon.svg"));

src/server/assets/css/contextMenu-lib-font.css

@@ -0,0 +1,112 @@
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fABc4EsA.woff2) format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fCBc4EsA.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fBxc4EsA.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fCxc4EsA.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

src/server/assets/css/contextMenu.css

@@ -0,0 +1,33 @@
+ul.contextMenu {
+  list-style: none;
+  margin: 0;
+  padding: 0.3em;
+  font: 300 15px "Roboto", sans-serif;
+  position: absolute;
+  color: white;
+  box-shadow: 0 12px 15px 0px rgba(0, 0, 0, 0.2);
+  border-radius: 0.3em;
+  background-color: #23445e;
+}
+ul.contextMenu * {
+  transition: all 0.4s;
+}
+ul.contextMenu li {
+  min-width: 150px;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 12px 15px;
+  cursor: default;
+  border-radius: 0.2em;
+}
+ul.contextMenu li i {
+  width: 1em;
+}
+ul.contextMenu li i.fa-file-lines {
+  position: relative;
+  left: 2px;
+}
+
+ul.contextMenu li:hover {
+  background-color: #395973;
+}

src/server/assets/css/main.css

@@ -0,0 +1,8 @@
+body,
+html,
+iframe {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}