Final polish

Author: ShukantPal

packages/webdoc-cli/README.md

@@ -90,6 +90,14 @@ The `template` object is used by the site template.
 
 ```json
 {
+  "applicationName": "{ <i>webdoc</i> }",
+  "meta": {
+    "og:title": "webdoc",
+    "og:description": "webdoc API documentation",
+    "og:image": "https://camo.githubusercontent.com/1427d2fdabd8790c93ca05cbfb653e2c6a8ab5694e671a04aa3af3fcef313539/68747470733a2f2f692e6962622e636f2f5a4850395044382f4c6f676f2d4672616d652d352e706e67",
+    "og:url": "{{url}}",
+    "og:site_name": "webdoclabs.com"
+  },
   "repository": "http://github.com/webdoc-labs/webdoc",
   "integrations": {
     "search": {
@@ -102,6 +110,9 @@ The `template` object is used by the site template.
 }
 ```
 
+* `template.applicationName`: The name of the documented software. This is usually used to fill the app bar and tab title.
+* `template.meta`: (optional) This can be used to define the `<meta>` key-value tags. The `{{url}}` variable can be used
+  to put in the site URL for each page (you have to provide the `siteDomain` and `siteRoot`).
 * `template.repository`: (optional) This can be used to link documents to their location in the source code. The only supported repository is GitHub.
 * `template.integrations`: (optional) Integrations with 3rd party solutions in your template. This object is dependent on which template you're using. For @webdoc/default-template, the following integrations are available:
   * `search`: This is used as the backend for the global site search. You'll need to create an Algolia account yourself and provide

packages/webdoc-cli/src/config.js

@@ -31,11 +31,13 @@ type ConfigSchema = {
     template?: string,
   },
   template: {
+    applicationName: string,
     siteDomain?: string,
     siteRoot: string,
     mainPage?: {
       title?: string
     },
+    meta: any,
     default: {
       includeData?: true
     },
@@ -74,10 +76,12 @@ const defaultConfig: ConfigSchema = {
     template: "@webdoc/default-template",
   },
   template: {
+    applicationName: "{ <i>webdoc</i> }",
     siteRoot: "",
     mainPage: {
       title: "Main Page",
     },
+    meta: {},
     default: {
       includeDate: true,
     },

packages/webdoc-default-template/publish.js

@@ -177,7 +177,7 @@ async function outReadme(
   pipeline.render("pages/main-page.tmpl", {
     docs: [],
     readme,
-    title: "Test Template",
+    title: "Documentation",
     env: config,
   }, {outputFile});
 }

packages/webdoc-default-template/src/app/components/Explorer/ExplorerHeader.js

@@ -1,5 +1,6 @@
 import IconButton from "@material-ui/core/IconButton";
 import MenuIcon from "@material-ui/icons/Menu";
+import {appData} from "../../resource";
 import {makeStyles} from "@material-ui/core/styles";
 
 const useToggleButtonStyles = makeStyles({
@@ -27,7 +28,12 @@ export default function ExplorerHeader({
       >
         <MenuIcon />
       </IconButton>
-      <span className="explorer__header__title">{"{ "}<i>webdoc</i>{" }"}</span>
+      <span
+        className="explorer__header__title"
+        dangerouslySetInnerHTML={{
+          __html: appData.applicationName,
+        }}
+      />
     </section>
   );
 }

packages/webdoc-default-template/src/app/components/Header/Header.js

@@ -20,7 +20,7 @@ export default connect(({explorerOpen}) => ({
         />}
       <div className="header__contents">
         <a className="header__link header__link__current">API Reference</a>
-        <a className="header__link">Guides</a>
+        {/* <a className="header__link">Guides</a> */ /* TODO: Add guides */}
         {appData.integrations.search && <Search integration={appData.integrations.search} />}
       </div>
     </div>

packages/webdoc-default-template/static/scripts/default-template.js

@@ -7037,6 +7037,17 @@ var IconButton_IconButton = /*#__PURE__*/external_React_["forwardRef"](function
 var Menu = __webpack_require__(42);
 var Menu_default = /*#__PURE__*/__webpack_require__.n(Menu);
 
+// CONCATENATED MODULE: ./src/app/resource.js
+var appData = window.appData;
+function getResourceURI(path) {
+  var root = window.appData.siteRoot;
+
+  if (!path.startsWith("/")) {
+    path = "/".concat(path);
+  }
+
+  return root + path;
+}
 // EXTERNAL MODULE: /Users/shukantpal/Web Projects/webdoc/common/temp/node_modules/.pnpm/registry.npmjs.org/@material-ui/styles/[email protected][email protected]/node_modules/@material-ui/styles/esm/makeStyles/makeStyles.js + 22 modules
 var makeStyles = __webpack_require__(85);
 
@@ -7060,6 +7071,7 @@ function makeStyles_makeStyles(stylesOrCreator) {
 
 
 
+
 var useToggleButtonStyles = styles_makeStyles({
   root: {
     margin: "0 0 0 12px"
@@ -7081,8 +7093,11 @@ function ExplorerHeader(_ref) {
     },
     onClick: toggleOpen
   }, React.createElement(Menu_default.a, null)), React.createElement("span", {
-    className: "explorer__header__title"
-  }, "{ ", React.createElement("i", null, "webdoc"), " }"));
+    className: "explorer__header__title",
+    dangerouslySetInnerHTML: {
+      __html: appData.applicationName
+    }
+  }));
 }
 // CONCATENATED MODULE: ./src/app/components/Explorer/useExplorerStyles.js
 function useExplorerStyles_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -9580,17 +9595,6 @@ function Footer() {
 // CONCATENATED MODULE: ./src/app/components/Footer/index.js
 
 /* harmony default export */ var components_Footer = (Footer);
-// CONCATENATED MODULE: ./src/app/resource.js
-var appData = window.appData;
-function getResourceURI(path) {
-  var root = window.appData.siteRoot;
-
-  if (!path.startsWith("/")) {
-    path = "/".concat(path);
-  }
-
-  return root + path;
-}
 // CONCATENATED MODULE: ./src/app/components/Header/Search.js
 
 
@@ -9683,9 +9687,7 @@ function Search(_ref) {
     className: "header__contents"
   }, React.createElement("a", {
     className: "header__link header__link__current"
-  }, "API Reference"), React.createElement("a", {
-    className: "header__link"
-  }, "Guides"), appData.integrations.search && React.createElement(Search, {
+  }, "API Reference"), appData.integrations.search && React.createElement(Search, {
     integration: appData.integrations.search
   })));
 }));

packages/webdoc-default-template/tmpl/layout.tmpl

@@ -12,15 +12,20 @@ const integrations = JSON.stringify(config.integrations);
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>webdoc: <?js= title ?></title>
+    <title><?js= config.applicationName ?>: <?js= title ?></title>
 
     <link type="text/css" rel="stylesheet" href="/<?js= sitePrefix ?>styles/index.css" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Roboto+Mono&display=swap" />
     <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/googlecode.min.css">
 
+    <?js Object.keys(config.meta).forEach((key) => { ?>
+      <meta property="<?js= key ?>" content="<?js= config.meta[key].replace("{{url}}", `${config.siteDomain}`) ?>" />
+    <?js }); ?>
+
     <script>
       window.appData = {
+        applicationName: "<?js= config.applicationName ?>",
         siteRoot: "<?js= siteRoot ?>",
         integrations: JSON.parse(`<?js= integrations ?>`),
       };

packages/webdoc-parser/src/transformer/mod-sort-members.js

@@ -86,6 +86,10 @@ export default function sort(rootDoc: Doc): void {
       return;
     }
 
+    if (doc.type === "RootDoc") {
+      doc.packages.sort(comparator);
+    }
+
     doc.members.sort(comparator);
   });
 }