Docs/lk exploration [SLT-170]

docs/bridge/docs/CCTP/_category_.json

@@ -1,8 +1,3 @@
 {
-  "label": "CCTP",
-  "position": 3,
-  "link": {
-    "type": "doc",
-    "id": "CCTP/Overview"
-  }
+  "label": "CCTP"
 }

docs/bridge/docs/CCTP/Overview.md → docs/bridge/docs/CCTP/index.md

@@ -1,3 +1,5 @@
+# Overview
+
 Synapse CCTP is a custom module built on top of Circle's [Cross-Chain Transfer Protocol](https://www.circle.com/en/cross-chain-transfer-protocol) that allows for bridge requests to natively mint & burn USDC on [supported chains](https://developers.circle.com/stablecoins/docs/cctp-getting-started#supported-blockchains).
 
 Synapse's CCTP implementation consists of two main components:

docs/bridge/docs/Routers/index.md

@@ -0,0 +1,7 @@
+# Routers
+
+:::tip[TODO]
+* Move router pages into this folder
+* Move 'Observability' under 'Services'
+* Rename 'Services' to ' 'Essential Tools'
+:::

docs/bridge/docs/Welcome/_category_.json

@@ -0,0 +1,4 @@
+{
+  "position": 0,
+  "label": "Overview"
+}

docs/bridge/docs/Welcome/index.md

@@ -0,0 +1,49 @@
+# Use Synapse
+Synapse is an Interchain Programming Interface. Developers read and write interchain data with Synapse, which has settled $50B in transactions between 2M+ users, and generated $30M+ in fees [[source](https://explorer.synapseprotol.com)].
+
+## Why Synapse?
+_Description of top benefits Synapse brings to developers and users._
+
+
+## Get started
+* **[Send and receive interchain data](#)**
+* **[On-chain swaps](#)**
+* **[Interchain swaps](#)**
+* **[Upgrade to Synapse](#)**
+
+:::tip[Supported Chains]
+Synapse supports every chain and token that can be found on the [Synapse Bridge](https://synapseprotocol.com).
+:::
+
+## Interchain Bridge
+Embed the Synapse Widget or build your own custom instance.
+* **[Widget](#)** – Embed a customized Synapse Bridge in your application.
+* **[Client SDK](#)** – Call Synapse Router functions from your client application.
+* **[Server SDK](#)** – Call Synapse Router functions from your remote application.
+
+## Routers
+Synapse offers several of routers for different transaction types.
+* **[Synapse Router](#)** – Executable quotes for arbitrary blockchain transactions.
+* **[CCTP](#)** – Native router for USDC transactions.
+* **[RFQ](#)** – Fast router that allows on-chain agents to bid on interchain delivery.
+
+## Essential Tools
+Bolt-on services for reliability and ease-of-use:
+* **[Scribe](/docs/Services/Scribe)** – Index logs, receipts and transactions across multiple chains
+* **[Omnirpc](/docs/Services/Omnirpc)** – Interchain RPC load balancer and verifier
+* **[Key management](/docs/Services/Signer)** – Support for the AWS Key Management System (KMS)
+* **[Ethergo](/docs/Services/Submitter)** – Gas management service to ensure transaction confirmation
+* **[Telemetry](/docs/Observability)** – Open telemetry system for Synapse SDK
+
+
+## Community & Support
+Connect with other developers and the Synapse team
+* **[Discord](https://discord.gg/synapseprotocol)** – Bridge, Swap, and Stake via Synapse's cross-chain pools.
+* **[Twitter](https://twitter.com/SynapseProtocol)** – Bridge, Swap, and Stake via Synapse's cross-chain pools.
+* **[Telegram](https://t.me/synapseprotocol)** – Public explorer for Synapse Bridge transactions.
+* **[Forum](https://forum.synapseprotocol.com/)** – Public explorer for Synapse Bridge transactions.
+
+## Additional Links
+Synapse transactions can be observed confirmed via the following methods:
+* **[Synapse Bridge](https://synapseprotocol.com)** – Bridge, Swap, and Stake via Synapse's cross-chain pools.
+* **[Synapse Explorer](https://explorer.synapseprotocol.com)** – Public explorer for Synapse Bridge transactions.

docs/bridge/docs/rfq/API/sidebar.ts

@@ -1,26 +1,26 @@
-import type { SidebarsConfig } from "@docusaurus/plugin-content-docs";
+import type { SidebarsConfig } from '@docusaurus/plugin-content-docs'
 
 const sidebar: SidebarsConfig = {
   apisidebar: [
     {
-      type: "category",
-      label: "quotes",
+      type: 'category',
+      label: 'quotes',
       items: [
         {
-          type: "doc",
-          id: "rfq/API/get-quotes",
-          label: "Get quotes",
-          className: "api-method get",
+          type: 'doc',
+          id: 'rfq/API/get-quotes',
+          label: 'Get quotes',
+          className: 'api-method get',
         },
         {
-          type: "doc",
-          id: "rfq/API/upsert-quote",
-          label: "Upsert quote",
-          className: "api-method put",
+          type: 'doc',
+          id: 'rfq/API/upsert-quote',
+          label: 'Upsert quote',
+          className: 'api-method put',
         },
       ],
     },
   ],
-};
+}
 
-export default sidebar.apisidebar;
+export default sidebar.apisidebar

docs/bridge/docusaurus.config.ts

@@ -1,8 +1,10 @@
-import {themes as prismThemes} from 'prism-react-renderer';
-import type {Config} from '@docusaurus/types';
-import type * as Preset from '@docusaurus/preset-classic';
-import * as path from "path";
-import {codecovWebpackPlugin} from "@codecov/webpack-plugin";
+/* eslint-disable prefer-arrow/prefer-arrow-functions */
+import * as path from 'path'
+
+import { themes as prismThemes } from 'prism-react-renderer'
+import type { Config } from '@docusaurus/types'
+import type * as Preset from '@docusaurus/preset-classic'
+import { codecovWebpackPlugin } from '@codecov/webpack-plugin'
 
 const config: Config = {
   title: 'Synapse Bridge Docs',
@@ -42,7 +44,7 @@ const config: Config = {
           editUrl:
             'https://github.com/synapsecns/sanguine/tree/master/docs/bridge/',
           // docLayoutComponent: "@theme/DocPage",
-          docItemComponent: "@theme/ApiItem" // derived from docusaurus-theme-openapi-docs
+          docItemComponent: '@theme/ApiItem', // derived from docusaurus-theme-openapi-docs
         },
         theme: {
           customCss: './src/css/custom.css',
@@ -120,54 +122,60 @@ const config: Config = {
       darkTheme: prismThemes.dracula,
     },
   } satisfies Preset.ThemeConfig,
-  themes: ["docusaurus-theme-openapi-docs"], // export theme components
+  themes: ['docusaurus-theme-openapi-docs'], // export theme components
   plugins: [
     [
       'docusaurus-plugin-openapi-docs',
       {
-        id: "api", // plugin id
-        docsPluginId: "classic", // id of plugin-content-docs or preset for rendering docs
+        id: 'api', // plugin id
+        docsPluginId: 'classic', // id of plugin-content-docs or preset for rendering docs
         config: {
-          rfqapi: { // the <id> referenced when running CLI commands
-            specPath: "../../services/rfq/api/docs/swagger.yaml", // path to OpenAPI spec, URLs supported
-            baseUrl: "https://rfq-api.omnirpc.io/",
-            outputDir: "docs/rfq/API", // output directory for generated files
-            sidebarOptions: { // optional, instructs plugin to generate sidebar.js
-              groupPathsBy: "tag", // group sidebar items by operation "tag"
+          rfqapi: {
+            // the <id> referenced when running CLI commands
+            specPath: '../../services/rfq/api/docs/swagger.yaml', // path to OpenAPI spec, URLs supported
+            baseUrl: 'https://rfq-api.omnirpc.io/',
+            outputDir: 'docs/rfq/API', // output directory for generated files
+            sidebarOptions: {
+              // optional, instructs plugin to generate sidebar.js
+              groupPathsBy: 'tag', // group sidebar items by operation "tag"
             },
           },
-        }
+        },
       },
     ],
     // please see: https://github.com/facebook/docusaurus/issues/8091#issuecomment-1269112001 for an explanation.
-    () => ({
-      name: 'resolve-react',
-      configureWebpack() {
-        return {
-          resolve: {
-            alias: {
-              // assuming root node_modules is up from "./packages/<your-docusaurus>
-              react: path.resolve('../../node_modules/react'),
+    function () {
+      return {
+        name: 'resolve-react',
+        configureWebpack() {
+          return {
+            resolve: {
+              alias: {
+                // assuming root node_modules is up from "./packages/<your-docusaurus>
+                react: path.resolve('../../node_modules/react'),
+              },
             },
-          },
-        };
-      },
-    }),
-    () => ({
-      name: 'bundle-analyzer',
-      configureWebpack() {
-        return {
-          plugins: [
-            codecovWebpackPlugin({
-              enableBundleAnalysis: process.env.CODECOV_TOKEN !== undefined,
-              bundleName: "docs-bridge",
-              uploadToken: process.env.CODECOV_TOKEN,
-            }),
-          ]
-        };
+          }
+        },
       }
-    }),
+    },
+    function () {
+      return {
+        name: 'bundle-analyzer',
+        configureWebpack() {
+          return {
+            plugins: [
+              codecovWebpackPlugin({
+                enableBundleAnalysis: process.env.CODECOV_TOKEN !== undefined,
+                bundleName: 'docs-bridge',
+                uploadToken: process.env.CODECOV_TOKEN,
+              }),
+            ],
+          }
+        },
+      }
+    },
   ],
-};
+}
 
-export default config;
+export default config

docs/bridge/src/css/custom.css

@@ -6,25 +6,53 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-primary: hsl(285deg 100% 35%);
+  --ifm-color-primary-dark: hsl(285deg 100% 32%);
+  --ifm-color-primary-darker: hsl(285deg 100% 30%);
+  --ifm-color-primary-darkest: hsl(285deg 100% 25%);
+  --ifm-color-primary-light: hsl(285deg 100% 39%);
+  --ifm-color-primary-lighter: hsl(285deg 100% 40%);
+  --ifm-color-primary-lightest: hsl(285deg 100% 46%);
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+
+  --synapse-green: hsl(135deg 50% 90%);
+  --synapse-green-secondary: hsl(135deg 50% 80%);
+
+  letter-spacing: .0125em;
+  line-height: 1.7;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary: hsl(285deg 100% 80%);
+  --ifm-color-primary-dark: hsl(285deg 100% 41%);
+  --ifm-color-primary-darker: hsl(285deg 100% 38%);
+  --ifm-color-primary-darkest: hsl(285deg 100% 32%);
+  --ifm-color-primary-light: hsl(285deg 100% 50%);
+  --ifm-color-primary-lighter: hsl(285deg 100% 52%);
+  --ifm-color-primary-lightest: hsl(285deg 100% 59%);
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+
+  --synapse-green: hsl(165deg 50% 10%);
+  --synapse-green-secondary: hsl(165deg 50% 20%);
+
+  background: hsl(240deg 25% 7.5%);
 }
+
+h1 { font-weight: 400 }
+h2 {
+  font-weight: 600;
+  border-top: 1px solid hsl(285deg 20% 50% / 20%);
+  margin-top: 1.5em;
+  padding-top: 1em;
+}
+h3 { font-size: 1.2rem }
+
+ol, ul { margin-bottom: 1.5em }
+ol a, ul a { font-weight: 500 }
+
+.theme-admonition-tip {
+  background: var(--synapse-green);
+  border-color: var(--synapse-green-secondary);
+}

docs/bridge/src/pages/index.tsx

@@ -1,15 +1,15 @@
 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 Heading from '@theme/Heading';
-import  { Redirect } from 'react-router-dom';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+import Layout from '@theme/Layout'
+// import HomepageFeatures from '@site/src/components/HomepageFeatures'
+import Heading from '@theme/Heading'
+import { Redirect } from 'react-router-dom'
 
-import styles from './index.module.css';
+import styles from './index.module.css'
 
-function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
+const HomepageHeader = () => {
+  const { siteConfig } = useDocusaurusContext()
   return (
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
       <div className="container">
@@ -18,30 +18,27 @@ function HomepageHeader() {
         </Heading>
         <p className="hero__subtitle">{siteConfig.tagline}</p>
         <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to="#">
+          <Link className="button button--secondary button--lg" to="#">
             Docusaurus Tutorial - 5min ⏱️
           </Link>
         </div>
       </div>
     </header>
-  );
+  )
 }
 
-export default function Home(): JSX.Element {
-  const {siteConfig} = useDocusaurusContext();
+export default () => {
+  const { siteConfig } = useDocusaurusContext()
   // TODO: a homepage
   // for now, just disable entirely: https://v1.docusaurus.io/docs/en/site-creation#docs-landing-page
   return (
     <Layout
       title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
-      <Redirect to={"/docs/CCTP/Overview"} />
+      description="Description will go into a meta tag in <head />"
+    >
+      <Redirect to={'/docs/Welcome'} />
       {/*<HomepageHeader />*/}
-      <main>
-        {/*<HomepageFeatures />*/}
-      </main>
+      <main>{/*<HomepageFeatures />*/}</main>
     </Layout>
-  );
+  )
 }