✨ Tools and learn pages

docusaurus.config.js

@@ -122,7 +122,7 @@ const config = {
         },
         blog: false,
         theme: {
-          customCss: require.resolve('./src/css/custom.css'),
+          customCss: [require.resolve('./src/css/custom.css'), require.resolve('./src/ui/design-system/styles/main.css')],
         },
       }),
     ],
@@ -133,7 +133,7 @@ const config = {
         specs: [
           {
             spec: 'https://raw.githubusercontent.com/onflow/flow/master/openapi/access.yaml',
-            route: '/api/',
+            route: '/http-api/',
           },
         ],
         // Theme Options for modifying how redoc renders them
@@ -160,9 +160,21 @@ const config = {
         items: [
           {
             type: 'doc',
-            docId: 'intro',
+            docId: 'learn/welcome',
             position: 'left',
-            label: 'Tutorial',
+            label: 'Learn',
+          },
+          {
+            type: 'doc',
+            docId: 'quickstarts',
+            position: 'left',
+            label: 'Quickstarts',
+          },
+          {
+            type: 'doc',
+            docId: 'documentation',
+            position: 'left',
+            label: 'Documentation',
           },
           {
             type: 'docsVersionDropdown',
@@ -289,6 +301,19 @@ const config = {
         //... other Algolia params
       },
     }),
+  plugins: [
+    function tailwindPlugin(context, options) {
+      return {
+        name: "docusaurus-tailwindcss",
+        configurePostCss(postcssOptions) {
+          // Appends TailwindCSS and AutoPrefixer.
+          postcssOptions.plugins.push(require("tailwindcss"));
+          postcssOptions.plugins.push(require("autoprefixer"));
+          return postcssOptions;
+        },
+      };
+    },
+  ]
 };
 
 module.exports = config;

package.json

@@ -17,13 +17,24 @@
   "dependencies": {
     "@docusaurus/core": "2.3.1",
     "@docusaurus/preset-classic": "2.3.1",
+    "@headlessui/react": "1.7.13",
     "@mdx-js/react": "^1.6.22",
+    "@tailwindcss/aspect-ratio": "0.4.2",
+    "@tailwindcss/forms": "0.5.3",
+    "@tailwindcss/line-clamp": "0.4.2",
+    "@tailwindcss/typography": "0.5.9",
+    "autoprefixer": "10.4.14",
     "clsx": "^1.2.1",
+    "date-fns": "2.29.3",
     "dotenv": "16.0.3",
+    "postcss": "8.4.21",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "redocusaurus": "1.6.1"
+    "redocusaurus": "1.6.1",
+    "tailwind-scrollbar-hide": "1.1.7",
+    "tailwindcss": "3.2.7",
+    "webpack-merge": "5.8.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.3.1",

scripts/bootstrap.sh

@@ -175,7 +175,12 @@ cleanLegacy () {
   replaceInFiles $legacyDocsLocation ".mdx)" ")"
 
   find $legacyDocsLocation -type f -name "*.original" -delete
+
+  # create index pages as placeholders
   touch $legacyDocsLocation/intro.md
+  touch $legacyDocsLocation/documentation.md
+  touch $legacyDocsLocation/quickstarts.md
+  touch $legacyDocsLocation/learn/welcome.md
 }
 
 bootstrapLegacy () {

src/css/custom.css

@@ -4,6 +4,10 @@
  * work well for content-centric websites.
  */
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 /* You can override the default Infima variables here. */
 :root {
   --ifm-color-primary: #2e8555;

src/pages/index.tsx

@@ -1,23 +1,23 @@
 import React from 'react';
-import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
 
-import styles from './index.module.css';
 
 function HomepageHeader() {
   const {siteConfig} = useDocusaurusContext();
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
+    <header className="bg-blue-500">
+      <div className="container mx-auto text-center py-24">
+        <h1 className="text-4xl font-bold text-white">{siteConfig.title}</h1>
+        <p className="text-xl py-6 text-white">{siteConfig.tagline}</p>
+
+        <div className="py-10">
           <Link
-            className="button button--secondary button--lg"
-            to="/docs/intro">
+            className="bg-white rounded-md text-gray-500 px-4 py-2"
+            to="/docs/intro"
+          >
             Docusaurus Tutorial - 5min ⏱️
           </Link>
         </div>

src/pages/learn.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+import {
+  allTutorials,
+  architectureTutorials,
+  cadenceHref,
+  cadenceTutorials,
+  contentNavigationListItems,
+  editPageUrl,
+  nftTutorials,
+  secondaryNavSections,
+  videos,
+  youtubeHref,
+} from "../data/pages/learn"
+import {
+  LearnPage,
+} from "../ui/design-system/src/lib/Pages/LearnPage"
+import { getMetaTitle } from "../utils/seo.server"
+import { externalLinks } from "../data/external-links"
+
+const data = {
+  allTutorials,
+  architectureTutorials,
+  discordUrl: externalLinks.discord,
+  discourseUrl: externalLinks.discourse,
+  cadenceHref,
+  cadenceTutorials,
+  contentNavigationListItems,
+  editPageUrl,
+  githubUrl: externalLinks.github,
+  nftTutorials,
+  secondaryNavSections,
+  twitterUrl: externalLinks.twitter,
+  videos,
+  youtubeHref,
+}
+
+export default function Learn() {
+  return (
+    <Layout
+      title={getMetaTitle("Tools")}
+    >
+      <main>
+        <LearnPage
+          allTutorials={data.allTutorials}
+          architectureTutorials={data.architectureTutorials}
+          cadenceHref={data.cadenceHref}
+          cadenceTutorials={data.cadenceTutorials}
+          contentNavigationListItems={data.contentNavigationListItems}
+          discordUrl={data.discordUrl}
+          discourseUrl={data.discourseUrl}
+          editPageUrl={data.editPageUrl}
+          githubUrl={data.githubUrl}
+          nftTutorials={data.nftTutorials}
+          twitterUrl={data.twitterUrl}
+          videos={data.videos}
+          youtubeHref={data.youtubeHref}
+        />
+      </main>
+    </Layout>
+  )
+}

src/pages/tools.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+
+import ToolsPage from '../ui/design-system/src/lib/Pages/ToolsPage';
+
+import { data } from '../data/pages/tools'
+import { getMetaTitle } from '../utils/seo.server';
+
+export default function Tools(): JSX.Element {
+  return (
+    <Layout
+      title={getMetaTitle("Tools")}
+    >
+      <main>
+        <ToolsPage
+          apisAndServices={data.apisAndServices}
+          contentNavigationListItems={data.contentNavigationListItems}
+          discordUrl={data.discordUrl}
+          editPageUrl={data.editPageUrl}
+          explorers={data.explorers}
+          githubUrl={data.githubUrl}
+          sdks={data.sdks}
+          tools={data.tools}
+          wallets={data.wallets}
+        />
+      </main>
+    </Layout>
+  );
+}