Merge pull request #408 from onflow/jribbink/explore-more

Restyled Explore More

docs/build/getting-started/quickstarts/explore-more.mdx

@@ -0,0 +1,86 @@
+---
+title: Explore More
+sidebar_label: Explore More
+description: Explore more of the Flow blockchain
+sidebar_position: 999
+---
+
+import DocCardList from '@theme/DocCardList';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faWindowMaximize, faCoins, faGem, faBook } from '@fortawesome/free-solid-svg-icons'
+
+
+Below are some additional tutorials to help you get started with Flow:
+
+<DocCardList items={[
+  {
+    type: 'link',
+    label: 'Flow App Quickstart',
+    href: '/guides/flow-app-quickstart',
+    description: 'Simple walkthrough building a web3 app using the Flow Client Library (FCL)',
+    customProps: {
+      icon: <FontAwesomeIcon icon={faWindowMaximize} className="h-16" />,
+      author: {
+        name: 'Flow Blockchain',
+        profileImage:
+          'https://avatars.githubusercontent.com/u/62387156?s=200&v=4',
+      },
+    },
+  },
+  {
+    type: 'link',
+    label: 'Fungible Token Guide',
+    href: '/guides/fungible-token',
+    description: 'Steps to create, deploy, mint, and transfer fungible tokens on Flow',
+    customProps: {
+      icon: <FontAwesomeIcon icon={faCoins} className="h-16" />,
+      author: {
+        name: 'Flow Blockchain',
+        profileImage:
+          'https://avatars.githubusercontent.com/u/62387156?s=200&v=4',
+      },
+    },
+  },
+  {
+    type: 'link',
+    label: 'NFT Guide',
+    href: 'https://academy.ecdao.org/en/quickstarts/1-non-fungible-token',
+    description: 'A DApp that lets users create an empty collection, mint some pre-loaded NFTs, and transfer them to another account on Flow testnet.',
+    customProps: {
+      icon: <FontAwesomeIcon icon={faGem} className="h-16" />,
+      author: {
+        name: 'Emerald City DAO',
+        profileImage:
+          'https://pbs.twimg.com/profile_images/1687225095557632005/tUCmv8_P_400x400.jpg',
+      },
+    },
+  },
+  {
+    type: 'link',
+    label: 'Walkthrough Guides',
+    href: '/guides/flow-app-quickstart',
+    description: 'Longer form guides to help you get started with Flow',
+    customProps: {
+      icon: <FontAwesomeIcon icon={faBook} className="h-16" />,
+      author: {
+        name: 'Flow Blockchain',
+        profileImage:
+          'https://avatars.githubusercontent.com/u/62387156?s=200&v=4',
+      },
+    },
+  },
+  {
+    type: 'link',
+    label: 'Emerald Academy',
+    href: 'https://academy.ecdao.org/en/quickstarts',
+    description: 'Quickstart Tutorials for Flow created by Emerald City Dao',
+    customProps: {
+      icon: '/images/logos/ea-logo.png',
+      author: {
+        name: 'Emerald City DAO',
+        profileImage:
+          'https://pbs.twimg.com/profile_images/1687225095557632005/tUCmv8_P_400x400.jpg',
+      },
+    },
+  }
+]} />

package.json

@@ -19,7 +19,11 @@
     "@docusaurus/core": "2.4.0",
     "@docusaurus/plugin-client-redirects": "^2.4.0",
     "@docusaurus/preset-classic": "2.4.0",
+    "@docusaurus/types": "^2.4.3",
     "@floating-ui/react-dom": "1.3.0",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "1.7.13",
     "@mdx-js/react": "2",
     "@tailwindcss/aspect-ratio": "0.4.2",

src/theme/DocCard/CustomIcon.tsx

@@ -11,12 +11,15 @@ export const CustomIcon = ({
   if (!customIcon) {
     return null;
   }
-  if (customIcon.match(/^\//) != null) {
-    return <img src={useBaseUrl(customIcon)} className="h-16" />;
-  }
 
-  if (customIcon.match(/^https?/) != null) {
-    return <img src={customIcon} className="h-16" />;
+  if (typeof customIcon === 'string') {
+    if (customIcon.match(/^\//) != null) {
+      return <img src={useBaseUrl(customIcon)} className="h-16" />;
+    }
+
+    if (customIcon.match(/^https?/) != null) {
+      return <img src={customIcon} className="h-16" />;
+    }
   }
 
   return customIcon;

src/theme/DocCard/index.tsx

@@ -51,7 +51,7 @@ function CardLayout({
   return (
     <CardContainer href={href}>
       <h2 className={clsx('text--truncate', styles.cardTitle)} title={title}>
-        <div className="flex gap-2">
+        <div className="flex gap-3">
           <div className="flex-none">{icon}</div>
           <div className="flex flex-col gap-1">
             <span>{title}</span>

yarn.lock

@@ -1914,6 +1914,20 @@
     webpack "^5.73.0"
     webpack-merge "^5.8.0"
 
+"@docusaurus/types@^2.4.3":
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/@docusaurus/types/-/types-2.4.3.tgz#4aead281ca09f721b3c0a9b926818450cfa3db31"
+  integrity sha512-W6zNLGQqfrp/EoPD0bhb9n7OobP+RHpmvVzpA+Z/IuU3Q63njJM24hmT0GYboovWcDtFmnIJC9wcyx4RVPQscw==
+  dependencies:
+    "@types/history" "^4.7.11"
+    "@types/react" "*"
+    commander "^5.1.0"
+    joi "^17.6.0"
+    react-helmet-async "^1.3.0"
+    utility-types "^3.10.0"
+    webpack "^5.73.0"
+    webpack-merge "^5.8.0"
+
 "@docusaurus/[email protected]":
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/@docusaurus/utils-common/-/utils-common-2.4.0.tgz#eb2913871860ed32e73858b4c7787dd820c5558d"
@@ -2093,6 +2107,32 @@
   dependencies:
     "@floating-ui/dom" "^1.2.1"
 
+"@fortawesome/[email protected]":
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz#1766039cad33f8ad87f9467b98e0d18fbc8f01c5"
+  integrity sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==
+
+"@fortawesome/fontawesome-svg-core@^6.4.2":
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.2.tgz#37f4507d5ec645c8b50df6db14eced32a6f9be09"
+  integrity sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.2"
+
+"@fortawesome/free-solid-svg-icons@^6.4.2":
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz#33a02c4cb6aa28abea7bc082a9626b7922099df4"
+  integrity sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.2"
+
+"@fortawesome/react-fontawesome@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz#d90dd8a9211830b4e3c08e94b63a0ba7291ddcf4"
+  integrity sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==
+  dependencies:
+    prop-types "^15.8.1"
+
 "@hapi/hoek@^9.0.0":
   version "9.3.0"
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.3.0.tgz#8368869dcb735be2e7f5cb7647de78e167a251fb"