feat: update doc styling

candulabs · Jun 12, 2020 · 0b73cef · 0b73cef
1 parent 3efb9e1
commit 0b73cef
Show file tree

Hide file tree

Showing 7 changed files with 517 additions and 23 deletions.
diff --git a/packages/docs/docusaurus.config.js b/packages/docs/docusaurus.config.js
@@ -31,8 +31,9 @@ module.exports = {
           label: "Documentation",
           position: "left",
           activeBasePath: `docs`,
+          position: "right",
         },
-        { to: "support", label: "Support Craft.js", position: "right" },
+        { to: "support", label: "Support", position: "right" },
         {
           href: "https://github.com/prevwong/craft.js",
           label: "GitHub",

diff --git a/packages/docs/src/css/custom.css b/packages/docs/src/css/custom.css
@@ -51,6 +51,7 @@ html {
   --ifm-code-font-size: 12px;
   --ifm-font-size-base: 0.9rem;
   --ifm-navbar-padding-vertical: 2rem;
+  --ifm-navbar-padding-horizontal: 1.4rem;
 }
 
 .navbar__inner {
@@ -377,3 +378,60 @@ html[data-theme="dark"] .api-description {
 .navbar .navbar-sidebar .navbar-sidebar__items .navbar__link--active {
   color: var(--ifm-color-primary);
 }
+
+.version-header-label {
+  color: #fff !important;
+  margin-left: 10px;
+  position: relative;
+  text-decoration: none !important;
+  transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+.version-header-label:after {
+  content: " ";
+  display: block;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 1px;
+  background: #fff;
+  transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
+  z-index: -1;
+}
+
+.version-header-label:hover:after {
+  bottom: -2px;
+}
+
+.docSidebarContainer_node_modules-\@docusaurus-theme-classic-src-theme-DocPage- {
+  width: 250px !important;
+}
+
+.navbar__title.hideLogoText_src-theme-Navbar- {
+  display: block !important;
+}
+
+@media (min-width: 996px) {
+  .main-wrapper {
+    display: flex;
+  }
+}
+
+.main-wrapper > div {
+  width: 100%;
+}
+
+@media (max-width: 996px) {
+  .navbar .navbar__inner > .navbar__items:first-child {
+    min-width: 215px;
+  }
+}
+
+.logo-container {
+  display: flex;
+  align-items: center;
+}
+
+.table-of-contents {
+  font-size: 0.9rem;
+}
diff --git a/packages/docs/src/pages/versions.js b/packages/docs/src/pages/versions.js
@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from "react";
+import styled from "styled-components";
+
+import Layout from "@theme/Layout";
+
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+import versions from "../../versions.json";
+
+const Page = styled.div`
+  padding: 40px 0;
+  > h1 {
+    font-weight: 500;
+    margin-bottom: 30px;
+  }
+
+  > div > h3 {
+    font-size: 15px;
+  }
+`;
+
+function Version() {
+  const context = useDocusaurusContext();
+  const { siteConfig = {} } = context;
+  const latestVersion = versions[0];
+  const pastVersions = versions.filter((version) => version !== latestVersion);
+  const repoUrl = `https://github.com/${siteConfig.organizationName}/${siteConfig.projectName}`;
+
+  return (
+    <Layout
+      title="Versions"
+      permalink="/versions"
+      description="Docusaurus 2 Versions page listing all documented site versions"
+    >
+      <Page className="container margin-vert--lg">
+        <h1>Craft.js Documentation Versions</h1>
+        <div className="margin-bottom--lg">
+          <h3 id="latest">Latest version (Stable)</h3>
+          <table>
+            <tbody>
+              <tr>
+                <th>{latestVersion}</th>
+                <td>
+                  <Link to={useBaseUrl("/docs/introduction")}>
+                    Documentation
+                  </Link>
+                </td>
+                <td>
+                  <a href={`${repoUrl}/releases/tag/v${latestVersion}`}>
+                    Release Notes
+                  </a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        {pastVersions.length > 0 && (
+          <div className="margin-bottom--lg">
+            <h3 id="archive">Past Versions</h3>
+            <table>
+              <tbody>
+                {pastVersions.map((version) => (
+                  <tr key={version}>
+                    <th>{version}</th>
+                    <td>
+                      <Link to={useBaseUrl(`/docs/${version}/introduction`)}>
+                        Documentation
+                      </Link>
+                    </td>
+                    <td>
+                      <a href={`${repoUrl}/releases/tag/v${version}`}>
+                        Release Notes
+                      </a>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </Page>
+    </Layout>
+  );
+}
+
+export default Version;
diff --git a/packages/docs/src/theme/DocItem/index.js b/packages/docs/src/theme/DocItem/index.js
@@ -120,13 +120,6 @@ function DocItem(props) {
           >
             <div className={styles.docItemContainer}>
               <article>
-                {version && (
-                  <div>
-                    <span className={styles.versionLabel}>
-                      Version: {version}
-                    </span>
-                  </div>
-                )}
                 {!hideTitle && (
                   <header>
                     <h1 className={styles.docTitle}>{title}</h1>

diff --git a/packages/docs/src/theme/DocItem/styles.module.css b/packages/docs/src/theme/DocItem/styles.module.css
@@ -68,18 +68,3 @@
 .docLastUpdatedAt {
   font-weight: bold;
 }
-
-.versionLabel {
-  background: transparent;
-  color: #1473e6;
-  border: 1px solid #1473e6;
-  border-radius: 3px;
-  font-weight: 500;
-  font-size: 11px;
-  margin: 0 0 15px 0;
-  position: relative;
-  top: 0;
-  display: inline-block;
-  padding: 5px 10px;
-  font-size: 13px;
-}