zowe · idontknowjs · Jul 27, 2021 · Jul 27, 2021
diff --git a/docs/extend/extend-desktop/mvd-apptoappcommunication.md b/docs/extend/extend-desktop/mvd-apptoappcommunication.md
@@ -1,3 +1,9 @@
+---
+tags:
+  - Zowe
+  - Desktop
+---
+
 # Application-to-application communication
 
 Zowe&trade; application plug-ins can opt-in to various application framework abilities, such as the ability to have a Logger, use of a URI builder utility, and more. One ability that is unique to a Zowe environment with multiple application plug-ins is the ability for one application plug-in to communicate with another. The application framework provides constructs that facilitate this ability. The constructs are: the Dispatcher, Actions, Recognizers, Registry, and the features that utilize them such as the framework's Context menu.

diff --git a/docs/extend/extend-desktop/mvd-authentication-api.md b/docs/extend/extend-desktop/mvd-authentication-api.md
@@ -1,3 +1,9 @@
+---
+tags:
+  - Zowe
+  - Desktop
+---
+
 # Authentication API
 This topic describes the web service API for user authentication. 
 

diff --git a/docs/extend/extend-desktop/mvd-buildingplugins.md b/docs/extend/extend-desktop/mvd-buildingplugins.md
@@ -1,3 +1,9 @@
+---
+tags:
+  - Zowe
+  - Desktop
+---
+
 # Building plugin apps
 You can build a plugin app by using the following steps as a model. Alternatively, you can follow the [Sample Angular App tutorial](https://github.com/zowe/sample-angular-app/blob/lab/step-1-hello-world/README.md).
 

diff --git a/docs/extend/extend-desktop/mvd-conda.md b/docs/extend/extend-desktop/mvd-conda.md
@@ -1,3 +1,9 @@
+---
+tags:
+  - Zowe
+  - Desktop
+---
+
 # Using Conda to make and manage packages of Application Framework Plugins
 
 As Zowe is composed of components which can be extended by Plugins, 

diff --git a/docs/extend/extend-desktop/mvd-configdataservice.md b/docs/extend/extend-desktop/mvd-configdataservice.md
@@ -1,3 +1,9 @@
+---
+tags:
+  - Zowe
+  - Desktop
+---
+
 # Configuration Dataservice
 
 The Configuration Dataservice is an essential component of the Zowe&trade; Application Framework, which acts as a JSON resource storage service, and is accessible externally by REST API and internally to the server by dataservices.

diff --git a/docs/extend/extend-desktop/mvd-dataservices.md b/docs/extend/extend-desktop/mvd-dataservices.md
@@ -1,3 +1,9 @@
+---
+tags:
+  - Zowe
+  - Desktop
+---
+
 # Dataservices
 
 Dataservices are dynamic backend components of Zowe&trade; plug-in applications. You can optionally add them to your applications to make the application do more than receive static content from the proxy server. Each dataservice defines a URL space that the server can use to run extensible code from the application. Dataservices are mainly intended to create REST APIs and WebSocket channels.

diff --git a/docs/extend/extend-desktop/mvd-desktopandwindowmgt.md b/docs/extend/extend-desktop/mvd-desktopandwindowmgt.md
@@ -1,3 +1,9 @@
+---
+tags:
+  - Zowe
+  - Desktop
+---
+
 # Zowe Desktop and window management
 
 The Zowe&trade; Desktop is a web component of Zowe, which is an implementation of `MVDWindowManagement`, the interface that is used to create a window manager.

diff --git a/docs/extend/extend-desktop/mvd-embeddingplugins.md b/docs/extend/extend-desktop/mvd-embeddingplugins.md
@@ -1,3 +1,9 @@
+---
+tags:
+  - Zowe
+  - Desktop
+---
+
 # Embedding plugins
 Add these imports to a component where you want to embed another plugin:
 ```

diff --git a/docs/extend/extend-desktop/mvd-errorreportingui.md b/docs/extend/extend-desktop/mvd-errorreportingui.md
@@ -1,3 +1,9 @@
+---
+tags:
+  - Zowe
+  - Desktop
+---
+
 # Error reporting UI
 
 The `zLUX Widgets` repository contains shared widget-like components of the Zowe&trade; Desktop, including Button, Checkbox, Paginator, various pop-ups, and others. To maintain consistency in desktop styling across all applications, use, reuse, and customize existing widgets to suit the purpose of the application's function and look.

diff --git a/docs/extend/extend-desktop/mvd-extendingzlux.md b/docs/extend/extend-desktop/mvd-extendingzlux.md
@@ -1,3 +1,9 @@
+---
+tags:
+  - Zowe
+  - Desktop
+---
+
 # Overview
 
 You can create application plug-ins to extend the capabilities of the Zowe&trade; Application Framework. An application plug-in is an installable set of files that present resources in a web-based user interface, as a set of RESTful services, or in a web-based user interface and as a set of RESTful services.

diff --git a/docs/extend/extend-desktop/mvd-iframecomm.md b/docs/extend/extend-desktop/mvd-iframecomm.md
@@ -1,3 +1,9 @@
+---
+tags:
+  - Zowe
+  - Desktop
+---
+
 # Configuring IFrame communication
 The Zowe Application Framework provides the following shared resource functions through a [ZoweZLUX object](https://github.com/zowe/zlux-platform/blob/master/interface/src/index.d.ts#L720): `pluginManager`, `uriBroker`, `dispatcher`, `logger`, `registry`, `notificationManager`, and `globalization`
 

diff --git a/docs/extend/extend-desktop/mvd-installplugins.md b/docs/extend/extend-desktop/mvd-installplugins.md
@@ -1,3 +1,9 @@
+---
+tags:
+  - Zowe
+  - Desktop
+---
+
 # Installing Plugins
 Plugins can be added or removed from the Zowe App Server, as well as upgraded. There are two ways to do these actions: By REST API or by filesystem. The instructions below assume you have administrative permissions either to access the correct REST APIs or to have the necessary permissions to update server directories & files.
 

diff --git a/docs/extend/extend-desktop/mvd-internationalization.md b/docs/extend/extend-desktop/mvd-internationalization.md
@@ -1,3 +1,9 @@
+---
+tags:
+  - Zowe
+  - Desktop
+---
+
 # Internationalizing applications
 You can internationalize Zowe&trade; application plug-ins using Angular and React frameworks. Internationalized applications display in translated languages and include structures for ongoing translation updates.
 

diff --git a/docs/extend/extend-desktop/mvd-logutility.md b/docs/extend/extend-desktop/mvd-logutility.md
@@ -1,3 +1,9 @@
+---
+tags:
+  - Zowe
+  - Desktop
+---
+
 # Logging utility
 
 The `zlux-shared` repository provides a logging utility for use by dataservices and web content for an application plug-in.

diff --git a/docs/extend/extend-desktop/mvd-mvdandwindowmgt.md b/docs/extend/extend-desktop/mvd-mvdandwindowmgt.md
@@ -1,3 +1,9 @@
+---
+tags:
+  - Zowe
+  - Desktop
+---
+
 # Zowe Desktop and Window management
 
 The Zowe&trade; Desktop (MVD) is a web component of Zowe, which is an implementation of **MVDWindowManagement**, the interface that is used to create a window manager.

diff --git a/docs/extend/extend-desktop/mvd-plugindefandstruct.md b/docs/extend/extend-desktop/mvd-plugindefandstruct.md
@@ -1,3 +1,9 @@
+---
+tags:
+  - Zowe
+  - Desktop
+---
+
 # Plug-ins definition and structure
 
 The Zowe&trade; Application Server (`zlux-server-framework`) enables extensiblity with application plug-ins. Application plug-ins are a subcategory of the unit of extensibility in the server called a *plug-in*.

diff --git a/docs/extend/extend-desktop/mvd-uribroker.md b/docs/extend/extend-desktop/mvd-uribroker.md
@@ -1,3 +1,9 @@
+---
+tags:
+  - Zowe
+  - Desktop
+---
+
 # URI Broker
 
 The URI Broker is an object in the application plug-in web framework, which facilitates calls to the Zowe&trade; Application Server by constructing URIs that use the context from the calling application plug-in.

diff --git a/docs/extend/extend-desktop/mvd-zluxappserver.md b/docs/extend/extend-desktop/mvd-zluxappserver.md
@@ -1,3 +1,9 @@
+---
+tags:
+  - Zowe
+  - Desktop
+---
+
 # zlux-app-server
 This is the default setup of the Zowe App Server, built upon the zLUX framework. Within, you will find a collection of build, deploy, and run scripts as well as configuration files that will help you to configure a simple App Server and add a few Apps.
 

diff --git a/docs/extend/extend-desktop/react-sample.md b/docs/extend/extend-desktop/react-sample.md
@@ -1,3 +1,9 @@
+---
+tags:
+  - Zowe
+  - Desktop
+---
+
 # Add a React app to Zowe
 
 :::tip Github Sample Repo:

diff --git a/src/theme/DocItem/DocsInfo.js b/src/theme/DocItem/DocsInfo.js
@@ -1,4 +1,5 @@
 import React from "react";
+import clsx from "clsx";
 import { useLocation } from "react-router-dom";
 import { useActiveVersion } from "@theme/hooks/useDocs";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
@@ -121,8 +122,15 @@ function DocsInfo({ docsPluginId, ...props }) {
           </div>
         </div>
       </div>
+      {props.tags && (
+        <div className='display-flex '>
+          <p className={clsx("margin-bottom--none", styles.docLastUpdatedAt)} style={{ textAlgin: "right" }}>Tags: </p>
+          &nbsp;
+          <p className="margin-bottom--none">{props.tags.join(", ")}</p>
+      </div>
+      )}
     </div>
   );
 }
 
-export default DocsInfo;
+export default DocsInfo;
diff --git a/src/theme/DocItem/index.js b/src/theme/DocItem/index.js
@@ -26,6 +26,7 @@ function DocItem(props) {
     frontMatter: {
       image: metaImage,
       keywords,
+      tags: tags,
       hide_title: hideTitle,
       hide_table_of_contents: hideTableOfContents,
     },
@@ -53,6 +54,7 @@ function DocItem(props) {
 
   useEffect(() => {
     setReadingTimeInWords(
+      document.querySelector(".markdown") && 
       readingTime(document.querySelector(".markdown").innerText).text
     );
   });
@@ -78,57 +80,61 @@ function DocItem(props) {
         {permalink && <link rel="canonical" href={siteUrl + permalink} />}
       </Head>
 
-      <div className="row">
-        <div
-          className={clsx("col", {
-            [styles.docItemCol]: !hideTableOfContents,
-          })}
-        >
-          <DocVersionBanner versionMetadata={versionMetadata} />
-          <div className={styles.docItemContainer}>
-            <article className="article-content">
-              {showVersionBadge && (
-                <div>
-                  <span className="badge badge--secondary">
-                    Version: {versionMetadata.label}
-                  </span>
-                </div>
-              )}
-              {!hideTitle && (
-                <header>
-                  <h1 className={styles.docTitle}>{title}</h1>
-                </header>
-              )}
-              {(editUrl || lastUpdatedAt || lastUpdatedBy) && (
-                <DocsInfo
-                  editUrl={editUrl}
-                  lastUpdatedAt={lastUpdatedAt}
-                  lastUpdatedBy={lastUpdatedBy}
-                  readingTimeInWords={readingTimeInWords}
-                  title={title}
-                />
-              )}
-              <MDXProvider components={MDXComponents}>
-                <div className="markdown">
-                  <DocContent />
-                </div>
-              </MDXProvider>
-            </article>
-
-            <div className="margin-left--none margin-top--md text--center">
-              <DocsRating label={unversionedId} />
-            </div>
-            <div className="margin-vert--lg">
-              <DocPaginator metadata={metadata} />
+      {DocContent.frontMatter.tags && DocContent.frontMatter.tags.includes("Desktop") ? ( //FIXME:
+        <div className="row">
+          <div
+            className={clsx("col", {
+              [styles.docItemCol]: !hideTableOfContents,
+            })}
+          >
+            <DocVersionBanner versionMetadata={versionMetadata} />
+            <div className={styles.docItemContainer}>
+              <article className="article-content">
+                {showVersionBadge && (
+                  <div>
+                    <span className="badge badge--secondary">
+                      Version: {versionMetadata.label}
+                    </span>
+                  </div>
+                )}
+                {!hideTitle && (
+                  <header>
+                    <h1 className={styles.docTitle}>{title}</h1>
+                  </header>
+                )}
+                {(editUrl || lastUpdatedAt || lastUpdatedBy) && (
+                  <DocsInfo
+                    editUrl={editUrl}
+                    lastUpdatedAt={lastUpdatedAt}
+                    lastUpdatedBy={lastUpdatedBy}
+                    readingTimeInWords={readingTimeInWords}
+                    tags={tags}
+                    title={title}
+                  />
+                )}
+                <MDXProvider components={MDXComponents}>
+                  <div className="markdown">
+                    <DocContent />
+                  </div>
+                </MDXProvider>
+              </article>
+              <div className="margin-left--none margin-top--md text--center">
+                <DocsRating label={unversionedId} />
+              </div>
+              <div className="margin-vert--lg">
+                <DocPaginator metadata={metadata} />
+              </div>
             </div>
           </div>
+          {!hideTableOfContents && DocContent.toc && (
+            <div className="col col--3">
+              <TOC toc={DocContent.toc} />
+            </div>
+          )}
         </div>
-        {!hideTableOfContents && DocContent.toc && (
-          <div className="col col--3">
-            <TOC toc={DocContent.toc} />
-          </div>
-        )}
-      </div>
+      )
+        :
+        <p className="text--center margin-auto">No matched doc found</p>} {/* FIXME: */}
     </>
   );
 }