style: new UI & refactoring (#51)

contentlayer.config.ts

@@ -38,6 +38,7 @@ const MdDoc = defineDocumentType(() => ({
     parent: {
       type: 'nested',
       of: ParentType,
+      required: false,
     },
   },
   computedFields: {
@@ -59,6 +60,7 @@ const includeDirs = [
   'docs/fuel-graphql-docs/docs',
   'docs/fuels-wallet/packages/docs/docs',
   'docs/guides/docs',
+  'docs/intro',
   // 'docs/fuel-nix/book/src',
   // 'docs/about-fuel',
   'docs/latest/sway/docs/book/src',
@@ -76,6 +78,7 @@ const includeDirs = [
 const excludeDirs = [
   'docs/guides/docs/guides.json',
   'docs/guides/docs/nav.json',
+  'docs/intro/nav.json',
   // 'docs/about-fuel/nav.json',
   'docs/sway/docs/book/src/SUMMARY.md',
   'docs/sway/docs/book/src/forc/commands/forc_deploy.md',

docs/guides/docs/categories.ts

@@ -0,0 +1 @@
+export const TAG_CATEGORIES = ['Getting Started', 'Full Stack', 'fuel-core'];

docs/guides/docs/guides.json

@@ -1,18 +1,26 @@
-{
-  "installation": {
-    "title": "Toolchain Installation",
-    "description": "Install the Fuel toolchain and binaries."
-  },
-  "quickstart": {
-    "title": "Developer Quickstart",
-    "description": "Get started by building a counter dApp in Fuel."
-  },
-  "running_a_node": {
-    "title": "Running a Node",
-    "description": "Run a local Fuel node."
-  },
-  "migration_guide": {
-    "title": "Migration Guide",
-    "description": "Sway and SDK's breaking changes reference."
-  }
-}
+{
+  "installation": {
+    "title": "Toolchain Installation",
+    "description": "Install the Fuel toolchain and binaries.",
+    "featured": true,
+    "tags": ["Getting Started"]
+  },
+  "quickstart": {
+    "title": "Developer Quickstart",
+    "description": "Get started by building a counter dApp in Fuel.",
+    "featured": true,
+    "tags": ["Getting Started", "Full Stack"]
+  },
+  "running_a_node": {
+    "title": "Running a Node",
+    "description": "Run a local Fuel node.",
+    "featured": false,
+    "tags": ["fuel-core"]
+  },
+  "migration_guide": {
+    "title": "Migration Guide",
+    "description": "Sway and SDK's breaking changes reference.",
+    "featured": false,
+    "tags": []
+  }
+}

docs/guides/docs/installation/codespace.mdx

@@ -2,7 +2,7 @@
 title: Fuel Github Codespace
 category: Installation
 parent:
-  label: Guides
+  label: All Guides
   link: /guides
 ---
 

docs/guides/docs/installation/index.mdx

@@ -2,7 +2,7 @@
 title: Installation
 category: Installation
 parent:
-  label: Guides
+  label: All Guides
   link: /guides
 ---
 

docs/guides/docs/migration-guide/index.mdx

@@ -2,7 +2,7 @@
 title: Migration Guide
 category: Migration Guide
 parent:
-  label: Guides
+  label: All Guides
   link: /guides
 ---
 

docs/guides/docs/migration-guide/testnet-migration.mdx

@@ -2,7 +2,7 @@
 title: Testnet Migration 
 category: Migration Guide
 parent:
-  label: Guides
+  label: All Guides
   link: /guides
 ---
 

docs/guides/docs/quickstart/building-a-frontend.mdx

@@ -2,7 +2,7 @@
 title: Building a Frontend
 category: Quickstart
 parent:
-  label: Guides
+  label: All Guides
   link: /guides
 ---
 

docs/guides/docs/quickstart/building-a-smart-contract.mdx

@@ -2,7 +2,7 @@
 title: Building a Smart Contract
 category: Quickstart
 parent:
-  label: Guides
+  label: All Guides
   link: /guides
 ---
 

docs/guides/docs/quickstart/index.mdx

@@ -2,7 +2,7 @@
 title: Quickstart
 category: Quickstart
 parent:
-  label: Guides
+  label: All Guides
   link: /guides
 ---
 

docs/guides/docs/running-a-node/index.mdx

@@ -2,7 +2,7 @@
 title: Running a Node
 category: Running a Node
 parent:
-  label: Guides
+  label: All Guides
   link: /guides
 ---
 

docs/guides/docs/running-a-node/running-a-beta-4-node.mdx

@@ -2,7 +2,7 @@
 title: Running a Beta-4 Node
 category: Running a Node
 parent:
-  label: Guides
+  label: All Guides
   link: /guides
 ---
 

docs/guides/docs/running-a-node/running-a-local-node.mdx

@@ -2,7 +2,7 @@
 title: Running a Local Node
 category: Running a Node
 parent:
-  label: Guides
+  label: All Guides
   link: /guides
 ---
 

docs/intro/nav.json

@@ -0,0 +1,3 @@
+{
+  "menu": ["What is Fuel", "Quickstart Contract", "Quickstart Frontend", "Glossary"]
+}

docs/intro/quickstart-contract.mdx

@@ -0,0 +1,3 @@
+# Quickstart Contract
+
+{/*this content is automatically replaced with the quickstart guide*/}

docs/intro/quickstart-frontend.mdx

@@ -0,0 +1,3 @@
+# Quickstart Frontend
+
+{/*this content is automatically replaced with the quickstart guide*/}

docs/intro/what-is-fuel.mdx

@@ -0,0 +1,195 @@
+# What is Fuel?
+
+Fuel v1 began as a layer-2 (L2) scalability technology for a monolithic Ethereum.
+It was the first optimistic rollup on mainnet Ethereum, deployed at the end of 2020.
+
+Today, Fuel is the fastest modular execution layer.
+Fuel delivers the highest security and flexible throughput, focusing on a superior developer experience.
+
+Here is how we do it:
+
+## FuelVM
+
+The FuelVM learns from the Ethereum ecosystem.
+It implements improvements suggested to the Ethereum VM (EVM) for many years that couldn’t be implemented due to the need to maintain backward compatibility, including parallel transaction execution and multiple native assets.
+
+Fuel delivers unmatched processing capacity through its ability to execute transactions in parallel by using strict state access lists in the form of a UTXO model.
+With the FuelVM, Fuel full nodes identify the accounts a transaction touches, mapping out dependencies before execution.
+This enables Fuel to use far more threads and cores of your CPU that are typically idle in single-threaded blockchains.
+As a result, Fuel can deliver far more compute, state accesses, and transactional throughput than its single-threaded counterparts.
+
+## Sway Language
+
+Fuel provides a powerful and sleek developer experience with our own domain-specific language (DSL) called Sway.
+Sway is based on Rust and includes syntax to leverage a blockchain VM without needlessly verbose boilerplate.
+Sway was created alongside the FuelVM and designed for the high-compute Fuel environment.
+
+### Rust + Solidity = Sway
+
+Sway prioritizes compile-time analysis and safety, similar to Rust’s borrow checker and safety-first semantics.
+Additionally, it has the syntax of Rust. From Solidity, Sway took the notion of a smart-contract-paradigm language with built-in top-level contract storage and blockchain mechanisms for ergonomic and safe contract programming.
+
+Sway brings the notion of static auditing to smart contracts.
+In addition, Sway is highly performant and has extensible optimization passes and a modular backend for targeting different blockchain architectures.
+
+<CardSection
+isLatest={props.isLatest}
+cardsInfo={[
+    {
+        link: '/docs/sway',
+        latestLink: '/docs/latest/sway',
+        isExternal: false,
+        heading: 'Sway',
+        headingIcon: 'Code',
+        body: 'Read the official Sway documentation.',
+    },
+    {
+        link: 'https://github.com/FuelLabs/sway-applications',
+        isExternal: true,
+        heading: 'Sway Playground',
+        headingIcon: 'Browser',
+        body: 'Get started experimenting with Sway in the browser.',
+    },
+    {
+        link: 'https://fuellabs.github.io/sway/master/std/',
+        isExternal: true,
+        heading: 'Sway Standard Lib',
+        headingIcon: 'Book',
+        body: 'Find definitions for helpful types and methods in Sway.',
+    },
+    {
+        link: 'https://github.com/FuelLabs/sway-applications',
+        isExternal: true,
+        heading: 'Example Applications',
+        headingIcon: 'Apps',
+        body: 'Explore end-to-end applications written in Sway.',
+    }
+]}
+/>
+
+## Developer Tooling
+
+Part of what makes Sway so powerful is the fantastic suite of developer tools surrounding it.
+The Fuel development environment retains the benefits of smart contract languages like Solidity, while adopting the paradigms introduced in the Rust tooling ecosystem.
+
+Now, developers can have a completely vertically integrated experience where every component, from the virtual machine to the CLI, works in harmony.
+
+### Sway Tooling
+
+<CardSection
+isLatest={props.isLatest}
+cardsInfo={[
+     {
+        link: '/docs/forc',
+        latestLink:'/docs/latest/forc',
+        isExternal: false,
+        heading: 'Forc',
+        headingIcon: 'Tool',
+        body: 'Explore the Fuel Orchestrator that helps you build, test, and deploy your Sway projects.',
+    },
+    {
+        link: '/docs/fuelup',
+        latestLink: '/docs/latest/fuelup',
+        isExternal: false,
+        heading: 'Fuelup',
+        headingIcon: 'Settings',
+        body: 'Learn more about the official Fuel toolchain manager that helps install and manage versions.',
+    }
+]}
+/>
+
+### SDKs & API
+
+<CardSection
+isLatest={props.isLatest}
+cardsInfo={[
+{
+          link: '/docs/fuels-rs',
+          latestLink: '/docs/latest/fuels-rs',
+          isExternal: false,
+          heading: 'Rust SDK',
+          headingIcon: 'BrandRust',
+          body: 'Test and interact with your Sway program in Rust.',
+        },
+        {
+          link: '/docs/fuels-ts',
+          latestLink: '/docs/latest/fuels-ts',
+          isExternal: false,
+          heading: 'Typescript SDK',
+          headingIcon: 'BrandTypescript',
+          body: 'Test and interact with your Sway program in TypeScript.',
+        },
+        {
+          link: '/docs/wallet',
+          latestLink: '/docs/latest/wallet',
+          isExternal: false,
+          heading: 'Wallet SDK',
+          headingIcon: 'Wallet',
+          body: 'Seamlessly integrate a wallet into your application.',
+        },
+        {
+         link: '/docs/graphql',
+          latestLink: '/docs/latest/graphql',
+          isExternal: false,
+          heading: 'GraphQL API',
+          headingIcon: 'ChartDots3',
+          body: 'Learn about the GraphQL API and interact with the Fuel Network.',
+        },
+]}
+/>
+
+### Indexer
+
+<CardSection
+isLatest={props.isLatest}
+cardsInfo={[
+    {
+        link: '/docs/indexer',
+        latestLink: '/docs/indexer',
+        isExternal: false,
+        heading: 'Indexer',
+        headingIcon: 'LayoutGrid',
+        body: 'Build and deploy an indexer to organize and query on-chain data.',
+    },
+]}
+/>
+
+### Network
+
+Fuel is currently live on testnet only.
+The latest testnet network is the {props.fuelTestnetInlineCode} testnet.
+
+<CardSection
+isLatest={props.isLatest}
+cardsInfo={[
+    {
+        link: `/docs/specs`,
+        latestLink: `/docs/latest/specs`,
+        isExternal: false,
+        heading: 'Specs',
+        headingIcon: 'ListDetails',
+        body: 'Explore the specifications for the Fuel Network.',
+    },
+    {
+        link: props.explorerUrl,
+        isExternal: true,
+        heading: 'Explorer',
+        headingIcon: 'Search',
+        body: 'Explore transactions on the Fuel network.',
+    },
+    {
+        link: props.bridgeUrl,
+        isExternal: true,
+        heading: 'Bridge',
+        headingIcon: 'BuildingBridge',
+        body: 'Bridge assets to the Fuel network.',
+    },
+        {
+        link: props.faucetUrl,
+        isExternal: true,
+        heading: 'Faucet',
+        headingIcon: 'Coin',
+        body: `Get ${props.fuelTestnet} testnet tokens.`,
+    }
+]}
+/>

scripts/generate-links/getDocs.mjs

@@ -167,6 +167,12 @@ export async function getDocs(key, order) {
         './guides/docs/migration-guide/breaking-change-log/breaking-changes-log.md',
       ];
       break;
+    case 'intro':
+      paths = [
+        // INTRO
+        './intro/*.mdx',
+      ];
+      break;
     // case 'latest-guides':
     //   paths = [
     //     // LATEST GUIDES