Add categories view #9 & add base tag to render CSS and images #3

Frederisk · Dec 2, 2020 · f6f1b7f · f6f1b7f
1 parent 218068f
commit f6f1b7f
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 39 deletions.
diff --git a/README.md b/README.md
@@ -14,14 +14,6 @@ Of course, the development of this extension is short, and there may be some err
 
 If you get help with this project, give this project a star or recommend it to others, thanks!😸
 
-## NEW FEATURES
-
-- Now you can modify the website content by logging in directly in VSCode! Enter the settings page, search Wikitext and find the username and password items, and fill in them. Then press `F1` in the text editor, select `Post your page to the website`!
-
-- Obtain the Wikitext source code directly in VSCode according to the page name without opening the web page. Press `F1` and select `Pull page to edit` to use this function.
-
-- Browse the page by entering the page name. Press `F1` then select `View the page`.
-
 ## Features
 
 - Color and style annotations of Wikitext can make it easier for users to intuitively find problems in writing grammatical formats. <br />
@@ -39,12 +31,45 @@ If you get help with this project, give this project a star or recommend it to o
 - Enter `@[name]` to get a snippet of wikitext. Such as `@table`, `@region`, `@title`...<br />
 <img src="./.asset/Code-snippets.gif" width="500">
 
-## Requirements
+- You can modify the website content by logging in directly in VSCode! Enter the settings page, search Wikitext and find the username and password items, and fill in them. Then press `F1` in the text editor, select `Post your page to the website`!
+
+- Obtain the Wikitext source code directly in VSCode according to the page name without opening the web page. Press `F1` and select `Pull page to edit` to use this function.
+
+- Browse the page by entering the page name. Press `F1` then select `View the page`.
+
+## Usage
+
+### Usage Requirements
 
 Please ensure that your VSCode version is higher than 1.43.0, this version requirements may change in the future.
 
 Generally speaking, make sure that your VSCode is always the latest version.
 
+## Development
+
+### Development Requirements
+
+- [Node.js](https://nodejs.org) (with npm) at least 10.x.x
+
+### How to build this extension yourself
+
+First clone this repository and change directory to the repository, then install VS Code Extension Manager and other packages:
+
+```sh
+npm install vsce -g # VS Code Extension Manager
+npm install js-yaml -g # js to yaml
+npm install # devDependencies
+
+```
+
+Package this project and you will get a vsix file:
+
+```sh
+npx vsce package
+```
+
+This is it!
+
 ## Release Notes
 
 - Disabled edit section links in preview.

diff --git a/package.json b/package.json
@@ -192,6 +192,11 @@
                     "type": "boolean",
                     "description": "Enable Previewer's JS support. This feature may affect the performance of VSCode and introduce potential security risks. (This feature was turned on by default in the past, but will be turned off by default from now on.)",
                     "default": false
+                },
+                "wikitext.articalPath": {
+                    "type": "string",
+                    "description": "Set the basic path to obtain the artical. If you are not sure what is this. please keep the default value.",
+                    "default": "/wiki/"
                 }
             }
         }
@@ -211,7 +216,6 @@
         "@types/node": "^12.12.62",
         "@types/vscode": "^1.43.0",
         "glob": "^7.1.5",
-        "js-yaml": "^3.14.0",
         "mocha": "^6.2.3",
         "mwbot": "^1.0.10",
         "ts-loader": "^6.2.2",

diff --git a/src/export_command/wikimedia_function/view.ts b/src/export_command/wikimedia_function/view.ts
@@ -7,7 +7,7 @@ import * as vscode from 'vscode';
 import * as mwbot from 'mwbot';
 import { extensionContext } from '../../extension';
 import { action, contextModel, alterNativeValues, prop } from './args';
-import { GetViewResult, GetViewConvert } from '../../interface_definition/getViewInterface';
+import { GetViewResult, GetViewConvert, Parse } from '../../interface_definition/getViewInterface';
 import { bot } from './bot';
 import { getHost } from '../host_function/host';
 
@@ -18,26 +18,26 @@ let currentPlanel: vscode.WebviewPanel | undefined = undefined;
 
 export async function getPreview(): Promise<void> {
     function showHtmlInfo(info: string): string {
-        return `
-    <body>
-        <section>
-            <h2>
-                ${info}
-            </h2>
-        </section>
-    </body>`;
+        return `<!DOCTYPE html><html><body><h2>${info}</h2></body></html>`;
     }
 
     const config: vscode.WorkspaceConfiguration = vscode.workspace.getConfiguration("wikitext");
+    const isGetCss: boolean | undefined = config.get("getCss");
+    const host: string | undefined = await getHost();
+    if (!host) { return undefined; }
+
+    // get text
     const textEditor: vscode.TextEditor | undefined = vscode.window.activeTextEditor;
     // check is there an opened document.
     if (!textEditor) {
         vscode.window.showInformationMessage("No Active Wikitext Editor.");
         // if have not, cancle.
         return undefined;
     }
-    const host: string | undefined = await getHost();
-    if (!host) { return undefined; }
+    /** document text */
+    const sourceText: string = textEditor.document.getText();
+
+    // if no planel, creat one
     if (!currentPlanel) {
         // if have not, try to creat new one.
         currentPlanel = vscode.window.createWebviewPanel(
@@ -49,10 +49,10 @@ export async function getPreview(): Promise<void> {
             currentPlanel = undefined;
         }, null, extensionContext.subscriptions);
     }
+
     // show loading status
     currentPlanel.webview.html = showHtmlInfo("Loading...");
-    /** document text */
-    const sourceText: string = textEditor.document.getText();
+
 
     const tbot: MWBot = bot ?? new mwbot({
         apiUrl: "https://" + host + config.get("apiPath")
@@ -62,9 +62,9 @@ export async function getPreview(): Promise<void> {
     const args = {
         'action': action.parse,
         'text': sourceText,
-        'prop': alterNativeValues(prop.text, prop.displayTitle, (config.get("getCss") ? prop.headHTML : undefined)),
+        'prop': alterNativeValues(prop.text, prop.displayTitle, prop.categoriesHTML, (isGetCss ? prop.headHTML : undefined)),
         'contentmodel': contextModel.wikitext,
-        'pst': "yes",
+        'pst': "whynot",
         'disableeditsection': "yes"
     };
 
@@ -77,12 +77,9 @@ export async function getPreview(): Promise<void> {
             return undefined;
         }
         if (!re.parse) { return undefined; }
-        const header: string = config.get("getCss") ? (re.parse.headhtml?.["*"] || ``) : `<!DOCTYPE html><html><body>`;
-        const end: string = `</body></html>`;
-        // show result.
-        // if (wikiContent && header) {
-        currentPlanel.webview.html = header + re.parse.text?.["*"] + end;
 
+        // show result.
+        currentPlanel.webview.html = processHTML(re.parse, host, isGetCss ?? false);
         currentPlanel.title = `WikitextPreviewer: ${re.parse.displaytitle}`;
     }
     catch (error) {
@@ -92,8 +89,10 @@ export async function getPreview(): Promise<void> {
 
 export async function getPageView(): Promise<void> {
     const config: vscode.WorkspaceConfiguration = vscode.workspace.getConfiguration("wikitext");
+    const isGetCss: boolean | undefined = config.get("getCss");
     const host: string | undefined = await getHost();
     if (!host) { return undefined; }
+
     const pageTitle: string | undefined = await vscode.window.showInputBox({
         prompt: "Enter the page name here.",
         ignoreFocusOut: true
@@ -104,10 +103,11 @@ export async function getPageView(): Promise<void> {
         apiUrl: "https://" + host + config.get("apiPath")
     });
 
+
     const args: any = {
         'action': action.parse,
         'page': pageTitle,
-        'prop': alterNativeValues(prop.text, prop.displayTitle, (config.get("getCss") ? prop.headHTML : undefined)),
+        'prop': alterNativeValues(prop.text, prop.displayTitle, prop.categoriesHTML, (isGetCss ? prop.headHTML : undefined)),
     };
     if (config.get("redirects")) {
         args['redirects'] = "true";
@@ -116,22 +116,28 @@ export async function getPageView(): Promise<void> {
     try {
         const result = await tbot.request(args);
         const re: GetViewResult = GetViewConvert.toGetViewResult(result);
-
         if (!re.parse) { return undefined; }
+
+        // open planel
         let currentPlanel: vscode.WebviewPanel = vscode.window.createWebviewPanel("pageViewer", "PageViewer", vscode.ViewColumn.Active, {
             enableScripts: config.get("enableJavascript"),
         });
-
-        const header: string = config.get("getCss") ? (re.parse.headhtml?.["*"] || ``) : `<!DOCTYPE html><html><body>`;
-        const end: string = `</body></html>`;
-
-        if (!currentPlanel) { return undefined; }
-        currentPlanel.webview.html = header + re.parse.text?.["*"] + end;
+        currentPlanel.webview.html = processHTML(re.parse, host, isGetCss ?? false);
         currentPlanel.title = `WikiViewer: ${re.parse.displaytitle}`;
 
     }
     catch (error) {
-        let e = error as Error;
         vscode.window.showErrorMessage(`ErrorCode:${error.code}| ErrorInfo:${error.info}`);
     }
 }
+
+function processHTML(parse: Parse,host: string , isGetCss: boolean) : string {
+    const config: vscode.WorkspaceConfiguration = vscode.workspace.getConfiguration("wikitext");
+
+    const htmlHead : string = isGetCss ? (parse.headhtml?.["*"]?.replace("<head>", `<head><base href="https://${host + config.get("articalPath")}">`) || ``) : `<!DOCTYPE html><html><head><base href="https://${host + config.get("articalPath")}" /></head><body>`;
+    const htmlEnd: string = `</body></html>`;
+
+    const html = htmlHead + parse?.text?.["*"] + "<hr />" + parse?.categorieshtml?.["*"] + htmlEnd;
+
+    return html;
+}
diff --git a/src/interface_definition/getViewInterface.ts b/src/interface_definition/getViewInterface.ts
@@ -24,6 +24,11 @@ export interface Parse {
     text?: Headhtml;
     displaytitle?: string;
     headhtml?: Headhtml;
+    categorieshtml?: CategoriesHTML;
+}
+
+export interface CategoriesHTML {
+    "*"?: string;
 }
 
 export interface Headhtml {
@@ -64,6 +69,10 @@ const getViewTypeMap: any = {
         { json: "text", js: "text", typ: u(undefined, r("Headhtml")) },
         { json: "displaytitle", js: "displaytitle", typ: u(undefined, "") },
         { json: "headhtml", js: "headhtml", typ: u(undefined, r("Headhtml")) },
+        { json: "categorieshtml", js: "categorieshtml", typ: u(undefined, r("CategoriesHTML")) },
+    ], false),
+    "CategoriesHTML": o([
+        { json: "*", js: "*", typ: u(undefined, "") },
     ], false),
     "Headhtml": o([
         { json: "*", js: "*", typ: u(undefined, "") },