feat: version docs

candulabs · Jun 11, 2020 · 3efb9e1 · 3efb9e1
1 parent c77911e
commit 3efb9e1
Show file tree

Hide file tree

Showing 25 changed files with 4,160 additions and 2 deletions.
diff --git a/packages/docs/docusaurus.config.js b/packages/docs/docusaurus.config.js
@@ -32,7 +32,7 @@ module.exports = {
           position: "left",
           activeBasePath: `docs`,
         },
-        { to: "docs/support", label: "Support Craft.js", position: "right" },
+        { to: "support", label: "Support Craft.js", position: "right" },
         {
           href: "https://github.com/prevwong/craft.js",
           label: "GitHub",
@@ -68,7 +68,7 @@ module.exports = {
           title: "Community",
           items: [
             {
-              label: "Github",
+              label: "Github Repository",
               href: "https://github.com/prevwong/craft.js",
             },
             {

diff --git a/packages/docs/src/theme/DocItem/index.js b/packages/docs/src/theme/DocItem/index.js
@@ -0,0 +1,223 @@
+/**
+ * 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 Head from "@docusaurus/Head";
+import isInternalUrl from "@docusaurus/isInternalUrl";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import DocPaginator from "@theme/DocPaginator";
+import useTOCHighlight from "@theme/hooks/useTOCHighlight";
+
+import classnames from "classnames";
+import styles from "./styles.module.css";
+
+const LINK_CLASS_NAME = "table-of-contents__link";
+const ACTIVE_LINK_CLASS_NAME = "table-of-contents__link--active";
+const TOP_OFFSET = 100;
+
+function DocTOC({ headings }) {
+  useTOCHighlight(LINK_CLASS_NAME, ACTIVE_LINK_CLASS_NAME, TOP_OFFSET);
+  return (
+    <div className="col col--3">
+      <div className={styles.tableOfContents}>
+        <Headings headings={headings} />
+      </div>
+    </div>
+  );
+}
+
+/* eslint-disable jsx-a11y/control-has-associated-label */
+function Headings({ headings, isChild }) {
+  if (!headings.length) {
+    return null;
+  }
+  return (
+    <ul
+      className={
+        isChild ? "" : "table-of-contents table-of-contents__left-border"
+      }
+    >
+      {headings.map((heading) => (
+        <li key={heading.id}>
+          <a
+            href={`#${heading.id}`}
+            className={LINK_CLASS_NAME}
+            dangerouslySetInnerHTML={{ __html: heading.value }}
+          />
+          <Headings isChild headings={heading.children} />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function DocItem(props) {
+  const { siteConfig = {} } = useDocusaurusContext();
+  const { url: siteUrl, title: siteTitle } = siteConfig;
+  const { content: DocContent } = props;
+  const { metadata } = DocContent;
+  const {
+    description,
+    title,
+    permalink,
+    editUrl,
+    lastUpdatedAt,
+    lastUpdatedBy,
+    version,
+  } = metadata;
+  const {
+    frontMatter: {
+      image: metaImage,
+      keywords,
+      hide_title: hideTitle,
+      hide_table_of_contents: hideTableOfContents,
+    },
+  } = DocContent;
+
+  const metaTitle = title ? `${title} | ${siteTitle}` : siteTitle;
+  let metaImageUrl = siteUrl + useBaseUrl(metaImage);
+  if (!isInternalUrl(metaImage)) {
+    metaImageUrl = metaImage;
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{metaTitle}</title>
+        <meta property="og:title" content={metaTitle} />
+        {description && <meta name="description" content={description} />}
+        {description && (
+          <meta property="og:description" content={description} />
+        )}
+        {keywords && keywords.length && (
+          <meta name="keywords" content={keywords.join(",")} />
+        )}
+        {metaImage && <meta property="og:image" content={metaImageUrl} />}
+        {metaImage && <meta property="twitter:image" content={metaImageUrl} />}
+        {metaImage && (
+          <meta name="twitter:image:alt" content={`Image for ${title}`} />
+        )}
+        {permalink && <meta property="og:url" content={siteUrl + permalink} />}
+        {permalink && <link rel="canonical" href={siteUrl + permalink} />}
+      </Head>
+      <div
+        className={classnames(
+          "container padding-vert--lg",
+          styles.docItemWrapper
+        )}
+      >
+        <div className="row">
+          <div
+            className={classnames("col", {
+              [styles.docItemCol]: !hideTableOfContents,
+            })}
+          >
+            <div className={styles.docItemContainer}>
+              <article>
+                {version && (
+                  <div>
+                    <span className={styles.versionLabel}>
+                      Version: {version}
+                    </span>
+                  </div>
+                )}
+                {!hideTitle && (
+                  <header>
+                    <h1 className={styles.docTitle}>{title}</h1>
+                  </header>
+                )}
+                <div className="markdown">
+                  <DocContent />
+                </div>
+              </article>
+              {(editUrl || lastUpdatedAt || lastUpdatedBy) && (
+                <div className="margin-vert--xl">
+                  <div className="row">
+                    <div className="col">
+                      {editUrl && (
+                        <a
+                          href={editUrl}
+                          target="_blank"
+                          rel="noreferrer noopener"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1.2em"
+                            width="1.2em"
+                            preserveAspectRatio="xMidYMid meet"
+                            viewBox="0 0 40 40"
+                            style={{
+                              marginRight: "0.3em",
+                              verticalAlign: "sub",
+                            }}
+                          >
+                            <g>
+                              <path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z" />
+                            </g>
+                          </svg>
+                          Edit this page
+                        </a>
+                      )}
+                    </div>
+                    {(lastUpdatedAt || lastUpdatedBy) && (
+                      <div className="col text--right">
+                        <em>
+                          <small>
+                            Last updated{" "}
+                            {lastUpdatedAt && (
+                              <>
+                                on{" "}
+                                <time
+                                  dateTime={new Date(
+                                    lastUpdatedAt * 1000
+                                  ).toISOString()}
+                                  className={styles.docLastUpdatedAt}
+                                >
+                                  {new Date(
+                                    lastUpdatedAt * 1000
+                                  ).toLocaleDateString()}
+                                </time>
+                                {lastUpdatedBy && " "}
+                              </>
+                            )}
+                            {lastUpdatedBy && (
+                              <>
+                                by <strong>{lastUpdatedBy}</strong>
+                              </>
+                            )}
+                            {process.env.NODE_ENV === "development" && (
+                              <div>
+                                <small>
+                                  {" "}
+                                  (Simulated during dev for better perf)
+                                </small>
+                              </div>
+                            )}
+                          </small>
+                        </em>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+              <div className="margin-vert--lg">
+                <DocPaginator metadata={metadata} />
+              </div>
+            </div>
+          </div>
+          {!hideTableOfContents && DocContent.rightToc && (
+            <DocTOC headings={DocContent.rightToc} />
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default DocItem;
diff --git a/packages/docs/src/theme/DocItem/styles.module.css b/packages/docs/src/theme/DocItem/styles.module.css
@@ -0,0 +1,85 @@
+/**
+ * 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.
+ */
+
+.docTitle {
+  font-size: 3rem;
+  margin-bottom: calc(var(--ifm-leading-desktop) * var(--ifm-leading));
+}
+
+.docItemContainer {
+  margin: 0 auto;
+  padding: 0 0.5rem;
+}
+
+@media only screen and (min-width: 997px) {
+  .docItemCol {
+    max-width: 75% !important;
+  }
+}
+
+@media (min-width: 997px) and (max-width: 1320px) {
+  .docItemWrapper {
+    max-width: calc(
+      var(--ifm-container-width) - 300px - var(--ifm-spacing-horizontal) * 2
+    );
+  }
+}
+
+.tableOfContents {
+  display: inherit;
+  max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
+  overflow-y: auto;
+  position: sticky;
+  top: calc(var(--ifm-navbar-height) + 2rem);
+}
+
+.tableOfContents::-webkit-scrollbar {
+  width: 7px;
+}
+
+.tableOfContents::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 10px;
+}
+
+.tableOfContents::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 10px;
+}
+
+.tableOfContents::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+@media only screen and (max-width: 996px) {
+  .tableOfContents {
+    display: none;
+  }
+
+  .docItemContainer {
+    padding: 0 0.3rem;
+  }
+}
+
+.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;
+}
diff --git a/packages/docs/versioned_docs/version-0.1.0-beta.6/acknowledgements.md b/packages/docs/versioned_docs/version-0.1.0-beta.6/acknowledgements.md
@@ -0,0 +1,12 @@
+---
+id: acknowledgements
+title: Acknowledgements
+---
+
+A huge thank you to the authors and contributors of the following libraries/frameworks:
+
+- **[react-dnd](https://github.com/react-dnd/react-dnd)** The React drag-n-drop library. 
+Although it is not actually used here, many aspects of Craft.js are written with react-dnd as a reference along with some utilities and functions being borrowed. 
+- **[Grape.js](https://github.com/artf/grapesjs)** The HTML web builder framework. This has served as an inspiration for Craft.js. The element positioning logic used in Craft.js is borrowed from Grape.js
+- **[use-methods](https://github.com/pelotom/use-methods)** A super handy hook when dealing with reducers. Craft.js uses a slightly modified version of `use-methods` to better fit our API.
+