feat: show status

docusaurus.config.js

@@ -62,6 +62,12 @@ const config = {
         theme: {
           customCss: require.resolve("./src/css/custom.css"),
         },
+        sitemap: {
+          changefreq: "weekly",
+          priority: 0.5,
+          ignorePatterns: ["/tags/**"],
+          filename: "sitemap.xml",
+        },
       }),
     ],
   ],
@@ -99,7 +105,7 @@ const config = {
             label: "Documentation",
           },
           { to: "/blog", label: "Blog", position: "left" },
-          { to: "https://status.tjo.space", label: "Status", position: "left" },
+          { type: "custom-status-navbar-item", position: "left" },
           {
             type: "localeDropdown",
             position: "right",

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@docusaurus/core": "2.4.1",
+        "@docusaurus/plugin-sitemap": "^2.4.1",
         "@docusaurus/preset-classic": "2.4.1",
         "@easyops-cn/docusaurus-search-local": "^0.36.0",
         "@mdx-js/react": "^1.6.22",
@@ -2340,7 +2341,8 @@
     },
     "node_modules/@docusaurus/plugin-sitemap": {
       "version": "2.4.1",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-sitemap/-/plugin-sitemap-2.4.1.tgz",
+      "integrity": "sha512-lZx+ijt/+atQ3FVE8FOHV/+X3kuok688OydDXrqKRJyXBJZKgGjA2Qa8RjQ4f27V2woaXhtnyrdPop/+OjVMRg==",
       "dependencies": {
         "@docusaurus/core": "2.4.1",
         "@docusaurus/logger": "2.4.1",

package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@docusaurus/core": "2.4.1",
+    "@docusaurus/plugin-sitemap": "^2.4.1",
     "@docusaurus/preset-classic": "2.4.1",
     "@easyops-cn/docusaurus-search-local": "^0.36.0",
     "@mdx-js/react": "^1.6.22",

src/components/HomepageFeatures/index.tsx

@@ -18,7 +18,7 @@ const PrivateServices: ServicesSection = {
   title: "Private Services",
   description: (
     <>
-      Services that require <b>tjo.space</b> account.
+      Services that require <b>id.tjo.space</b> account.
     </>
   ),
   services: [

src/components/NavbarItems/CustomStatusNavbarItem.tsx

@@ -0,0 +1,45 @@
+import clsx from "clsx";
+import React, { useEffect, useState } from "react";
+
+function Healthy({ healthy }) {
+  if (healthy) return <span className="badge badge--success">Ok</span>;
+
+  return <span className="badge badge--warning">Issues</span>;
+}
+
+function Mobile({ healthy }) {
+  return (
+    <li className="menu__list-item">
+      <a
+        className="menu__link"
+        href="https://status.tjo.space"
+        style={{ display: "inline-block", width: "100%" }}
+      >
+        Status <Healthy healthy={healthy}></Healthy>
+      </a>
+    </li>
+  );
+}
+
+export default function CustomStatusNavbarItem(props: {
+  content: string;
+  mobile?: boolean;
+}): JSX.Element | null {
+  const [healthy, setHealthy] = useState(true);
+
+  useEffect(() => {
+    fetch(
+      "https://api.github.com/repos/tjo-space/status/issues?status=open&label=status"
+    )
+      .then((response) => response.json())
+      .then((issues) => setHealthy(issues.length === 0));
+  }, []);
+
+  if (props.mobile) return <Mobile healthy={healthy}></Mobile>;
+
+  return (
+    <a className="navbar__item navbar__link" href="https://status.tjo.space">
+      Status <Healthy healthy={healthy}></Healthy>
+    </a>
+  );
+}

src/theme/NavbarItem/ComponentTypes.js

@@ -0,0 +1,25 @@
+import DefaultNavbarItem from "@theme/NavbarItem/DefaultNavbarItem";
+import DropdownNavbarItem from "@theme/NavbarItem/DropdownNavbarItem";
+import LocaleDropdownNavbarItem from "@theme/NavbarItem/LocaleDropdownNavbarItem";
+import SearchNavbarItem from "@theme/NavbarItem/SearchNavbarItem";
+import HtmlNavbarItem from "@theme/NavbarItem/HtmlNavbarItem";
+import DocNavbarItem from "@theme/NavbarItem/DocNavbarItem";
+import DocSidebarNavbarItem from "@theme/NavbarItem/DocSidebarNavbarItem";
+import DocsVersionNavbarItem from "@theme/NavbarItem/DocsVersionNavbarItem";
+import DocsVersionDropdownNavbarItem from "@theme/NavbarItem/DocsVersionDropdownNavbarItem";
+import CustomStatusNavbarItem from "@site/src/components/NavbarItems/CustomStatusNavbarItem";
+const ComponentTypes = {
+  default: DefaultNavbarItem,
+  localeDropdown: LocaleDropdownNavbarItem,
+  search: SearchNavbarItem,
+  dropdown: DropdownNavbarItem,
+  html: HtmlNavbarItem,
+  doc: DocNavbarItem,
+  docSidebar: DocSidebarNavbarItem,
+  docsVersion: DocsVersionNavbarItem,
+  docsVersionDropdown: DocsVersionDropdownNavbarItem,
+};
+export default {
+  ...ComponentTypes,
+  "custom-status-navbar-item": CustomStatusNavbarItem,
+};