diff --git a/.github/workflows/build-docs-preview.yaml b/.github/workflows/build-docs-preview.yaml
index 2a9bf110a6..fc4b1c4f3f 100644
--- a/.github/workflows/build-docs-preview.yaml
+++ b/.github/workflows/build-docs-preview.yaml
@@ -3,10 +3,6 @@ name: Build docs preview
# It runs on every push to master with a change in the docs folder.
on:
pull_request:
- paths:
- - "docs/**"
- - "x/**/*.md"
- - .github/workflows/deploy-docs.yml
jobs:
Build-preview:
@@ -14,12 +10,17 @@ jobs:
steps:
- name: Checkout ๐๏ธ
uses: actions/checkout@v4
+
+ - name: Compute diff ๐
+ uses: technote-space/get-diff-action@v6.1.2
+ id: git_diff
with:
- persist-credentials: false
- fetch-depth: 0
- path: "."
+ PATTERNS: |
+ *.md
+ docs/**/*.*
- name: Setup Node.js ๐ง
+ if: env.GIT_DIFF
uses: actions/setup-node@v3
with:
node-version: "16.x"
@@ -28,9 +29,11 @@ jobs:
docs/yarn.lock
- name: Build ๐ง
+ if: env.GIT_DIFF
run: make build-docs && mv ~/output ./output
- name: Deploy preview to Netlify ๐
+ if: env.GIT_DIFF
id: deploy-preview
uses: nwtgck/actions-netlify@v2.1
with:
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index 916611910d..081f8fd223 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -5,7 +5,7 @@ function findMenuEntryById(id, generatedMenu) {
const entry = findMenuEntryById(id, item.items);
if (entry !== undefined) {
// Entry found return it.
- return entry
+ return entry;
}
} else if (item.type === "doc" && item.id === id) {
// Entry found
@@ -19,7 +19,7 @@ function findMenuEntryById(id, generatedMenu) {
function convertPageWithHrefToExternLinks(docs, generatedMenu) {
// Find the md pages that have the href field in the metadata.
- const toPatch = docs.filter(doc => doc.frontMatter.href !== undefined);
+ const toPatch = docs.filter((doc) => doc.frontMatter.href !== undefined);
for (let doc of toPatch) {
const entry = findMenuEntryById(doc.id, generatedMenu);
if (entry !== undefined) {
@@ -35,68 +35,123 @@ function convertPageWithHrefToExternLinks(docs, generatedMenu) {
}
module.exports = {
- title: 'Desmos documentation',
- staticDirectories: ['static'],
- tagline: 'Desmos network official documentation for developers and validators',
- url: 'https://test-docs.desmos.network',
- baseUrl: '/',
- onBrokenLinks: 'warn',
- onBrokenMarkdownLinks: 'warn',
- onDuplicateRoutes: 'warn',
- favicon: 'assets/favicon.ico',
- organizationName: 'desmos-labs', // Usually your GitHub org/user name.
- projectName: 'desmos', // Usually your repo name.
+ title: "Desmos documentation",
+ staticDirectories: ["static"],
+ tagline:
+ "Desmos network official documentation for developers and validators",
+ url: "https://test-docs.desmos.network",
+ baseUrl: "/",
+ onBrokenLinks: "warn",
+ onBrokenMarkdownLinks: "warn",
+ onDuplicateRoutes: "warn",
+ favicon: "assets/favicon.ico",
+ organizationName: "desmos-labs", // Usually your GitHub org/user name.
+ projectName: "desmos", // Usually your repo name.
webpack: {
jsLoader: (isServer) => ({
- loader: require.resolve('swc-loader'),
+ loader: require.resolve("swc-loader"),
options: {
jsc: {
parser: {
- syntax: 'typescript',
+ syntax: "typescript",
tsx: true,
},
- target: 'es2017',
+ target: "es2017",
},
module: {
- type: isServer ? 'commonjs' : 'es6',
+ type: isServer ? "commonjs" : "es6",
},
},
}),
},
themeConfig: {
+ metadata: [
+ {
+ name: "title",
+ content: "Desmos Network Documentation",
+ },
+ {
+ name: "description",
+ content: "Browse the official Desmos Network documentation and learn how you can start building your DApp based on Desmos."
+ },
+
+
+ {
+ property: "og:type",
+ content: "website"
+ },
+ {
+ property: "og:url",
+ content: "https://docs.desmos.network/"
+ },
+ {
+ property: "og:title",
+ content: "Desmos Network Documentation"
+ },
+ {
+ property: "og:description",
+ content: "Browse the official Desmos Network documentation and learn how you can start building your DApp based on Desmos."
+ },
+ {
+ property: "og:image",
+ content: "https://docs.desmos.network/assets/seo_cover.png"
+ },
+
+
+ {
+ property: "twitter:card",
+ content: "summary_large_image"
+ },
+ {
+ property: "twitter:url",
+ content: "https://docs.desmos.network/"
+ },
+ {
+ property: "twitter:title",
+ content: "Desmos Network Documentation"
+ },
+ {
+ property: "twitter:description",
+ content: "Browse the official Desmos Network documentation and learn how you can start building your DApp based on Desmos."
+ },
+ {
+ property: "twitter:image",
+ content: "https://docs.desmos.network/assets/seo_cover.png"
+ },
+ ],
colorMode: {
- defaultMode: 'dark',
- respectPrefersColorScheme: true,
+ defaultMode: "dark",
+ respectPrefersColorScheme: false,
},
algolia: {
- apiKey: '492b6729d095b18f5599d6584e00ae11',
- appId: '1IAGPKAXGP',
- indexName: 'desmos',
+ apiKey: "492b6729d095b18f5599d6584e00ae11",
+ appId: "1IAGPKAXGP",
+ indexName: "desmos",
contextualSearch: false,
},
docs: {
sidebar: {
hideable: true,
- }
+ },
},
navbar: {
logo: {
- alt: 'Desmos logo',
- src: 'assets/logo.svg',
- srcDark: 'assets/logo.svg',
- href: 'https://docs.desmos.network'
+ alt: "Desmos logo",
+ src: "assets/logo.svg",
+ srcDark: "assets/logo.svg",
+ href: "https://docs.desmos.network",
},
items: [
{
- type: 'doc',
- docId: 'intro', // open page of section
- position: 'left',
- label: 'Documentation',
+ type: "doc",
+ docId: "intro", // open page of section
+ position: "left",
+ label: "Documentation",
},
// {to: '/blog', label: 'Blog', position: 'left'}, to add extra sections
{
- type: 'docsVersionDropdown',
- position: 'right',
+ type: "docsVersionDropdown",
+ position: "right",
dropdownActiveClassDisabled: true,
},
/*{
@@ -107,101 +162,64 @@ module.exports = {
],
},
footer: {
- style: 'dark',
+ style: "dark",
links: [
{
- title: 'Related docs',
- items: [
- {
- label: 'Cosmos SDK',
- href: 'https://docs.cosmos.network',
- },
- {
- label: 'CosmWasm',
- href: 'https://docs.cosmwasm.com/en/docs/1.0/'
- }
- ],
- },
- {
- title: 'Community',
items: [
{
- label: 'Twitter',
- href: 'https://twitter.com/DesmosNetwork',
- },
- {
- label: 'Discord',
- href: 'https://discord.desmos.network/',
+ label: "Terms & Conditions",
+ href: "https://desmos.network/terms",
},
{
- label: 'Medium',
- href: 'https://medium.com/desmosnetwork'
+ label: "Privacy Policy",
+ href: "https://desmos.network/privacy",
},
{
- label: 'Telegram',
- href: 'https://t.me/desmosnetwork',
- },
- {
- label: 'Reddit (not-official)',
- href: 'https://www.reddit.com/r/DesmosNetwork/'
- }
- ],
- },
- {
- title: 'More',
- items: [
- {
- label: 'Website',
- to: 'https://www.desmos.network',
+ label: "White Paper",
+ href: "https://desmos.network/",
},
{
- label: 'GitHub',
- href: 'https://github.com/desmos-labs/desmos',
+ label: "Brand Kit",
+ href: "https://desmos.network/",
},
],
},
],
- logo: {
- alt: 'Desmos Logo',
- src: 'assets/logo.png',
- href: 'https://www.desmos.network',
- },
- copyright: `Copyright ยฉ ${new Date().getFullYear()} Desmos Network`,
+ copyright: `Copyright ยฉ ${new Date().getFullYear()} Desmos Labs`,
},
},
presets: [
[
- '@docusaurus/preset-classic',
+ "@docusaurus/preset-classic",
{
docs: {
- routeBasePath: '/',
- sidebarPath: require.resolve('./sidebars.js'),
+ routeBasePath: "/",
+ sidebarPath: require.resolve("./sidebars.js"),
sidebarCollapsible: true,
- async sidebarItemsGenerator({defaultSidebarItemsGenerator, ...args}) {
+ async sidebarItemsGenerator({
+ defaultSidebarItemsGenerator,
+ ...args
+ }) {
const defaultItems = await defaultSidebarItemsGenerator(args);
return convertPageWithHrefToExternLinks(args.docs, defaultItems);
},
- editUrl: 'https://github.com/desmos-labs/desmos/tree/master/docs',
+ editUrl: "https://github.com/desmos-labs/desmos/tree/master/docs",
showLastUpdateTime: true,
lastVersion: "current",
- exclude: [
- './architecture/adr-template.md'
- ],
+ exclude: ["./architecture/adr-template.md"],
versions: {
current: {
- label: "master"
+ label: "master",
},
- }
+ },
},
theme: {
- customCss: require.resolve('./src/css/custom.css'),
+ customCss: require.resolve("./src/css/custom.css"),
},
},
],
],
- themes: [
- '@you54f/theme-github-codeblock'
- ],
+ themes: ["@you54f/theme-github-codeblock"],
plugins: [
[
"@edno/docusaurus2-graphql-doc-generator",
@@ -211,9 +229,20 @@ module.exports = {
baseURL: "07-graphql",
homepage: "docs/07-graphql/01-overview.md",
pretty: true,
- }
+ },
],
- ]
+ async function myPlugin(context, options) {
+ return {
+ name: "docusaurus-tailwindcss",
+ configurePostCss(postcssOptions) {
+ // Appends TailwindCSS and AutoPrefixer.
+ postcssOptions.plugins.push(require("tailwindcss"));
+ postcssOptions.plugins.push(require("autoprefixer"));
+ return postcssOptions;
+ },
+ };
+ },
+ ],
/*i18n: { // add for localization
defaultLocale: 'en',
locales: ['en', 'chinese'],
diff --git a/docs/package.json b/docs/package.json
index 37b0b00cf0..9fd1ae026d 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -15,23 +15,27 @@
"write-heading-ids": "docusaurus write-heading-ids"
},
"dependencies": {
- "@docusaurus/core": "^2.1.0",
- "@docusaurus/plugin-content-docs": "^2.0.0-rc.1",
- "@docusaurus/preset-classic": "^2.1.0",
- "@docusaurus/theme-search-algolia": "^2.0.0-rc.1",
+ "@docusaurus/core": "^2.4.1",
+ "@docusaurus/plugin-content-docs": "^2.4.1",
+ "@docusaurus/preset-classic": "^2.4.1",
+ "@docusaurus/theme-search-algolia": "^2.4.1",
"@edno/docusaurus2-graphql-doc-generator": "^1.10.3",
"@mdx-js/react": "^1.6.21",
"@svgr/webpack": "^5.5.0",
"@swc/core": "^1.3.21",
"@you54f/theme-github-codeblock": "^0.1.1",
+ "autoprefixer": "^10.4.15",
"clsx": "^1.1.1",
"docusaurus-graphql-plugin": "^0.8.0",
"file-loader": "^6.2.0",
"graphql": "^16.5.0",
+ "postcss": "^8.4.29",
"prism-react-renderer": "^1.2.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
+ "react-switch": "^7.0.0",
"swc-loader": "^0.2.3",
+ "tailwindcss": "^3.3.3",
"theme-github-codetabs": "^0.2.3"
},
"browserslist": {
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 0c34c9ffbd..0475741e05 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -1,25 +1,46 @@
-/* stylelint-disable docusaurus/copyright-header */
+@import url('https://fonts.cdnfonts.com/css/poppins');
/**
* Any CSS included here will be global. The classic template
* bundles Infima by default. Infima is a CSS framework designed to
* work well for content-centric websites.
*/
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
/* You can override the default Infima variables here. */
+
:root {
- --ifm-color-primary: #ed6c53;
- --ifm-color-primary-dark: #ea5336;
- --ifm-color-primary-darker: #e84728;
- --ifm-color-primary-darkest: #cb3315;
- --ifm-color-primary-light: #f08570;
- --ifm-color-primary-lighter: #f2917e;
- --ifm-color-primary-lightest: #f6b6aa;
+ --ifm-color-primary: #25282d;
+ --ifm-color-primary-dark: #212429;
+ --ifm-color-primary-darker: #1f2226;
+ --ifm-color-primary-darkest: #1a1c1f;
+ --ifm-color-primary-light: #292c32;
+ --ifm-color-primary-lighter: #2b2e34;
+ --ifm-color-primary-lightest: #30343b;
--ifm-code-font-size: 90%;
- --ifm-font-family-base: 'Helvetica';
+ --ifm-font-family-base: 'Poppins';
--ifm-font-size-base: 105%;
--ifm-navbar-padding-horizontal: 0.5em;
}
+[data-theme='dark'] {
+ --ifm-color-primary: #FFFFFF;
+ --ifm-color-primary-dark: #e6e6e6;
+ --ifm-color-primary-darker: #d9d9d9;
+ --ifm-color-primary-darkest: #b3b3b3;
+ --ifm-color-primary-light: #ffffff;
+ --ifm-color-primary-lighter: #ffffff;
+ --ifm-color-primary-lightest: #ffffff;
+ background-color: #141419;
+}
+
+/* text adjustments */
+
+a {
+ color: #FF6C3E;
+}
+
.docusaurus-highlight-code-line {
background-color: rgba(0, 0, 0, 0.1);
display: block;
@@ -27,20 +48,95 @@
padding: 0 var(--ifm-pre-padding);
}
+/* badge adjustments */
+
+.theme-doc-version-badge {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ background-color: white;
+ padding-right: 1.5rem;
+ padding-left: 1.5rem;
+ font-size: 0.875rem;
+ font-style: normal;
+ font-weight: 600;
+ line-height: normal;
+ letter-spacing: 0.01094rem;
+ border-color: #25282d;
+}
+
+html[data-theme='dark'] .theme-doc-version-badge {
+ background-color: #141419;
+ color: white;
+ border-color: white;
+}
+
html[data-theme='dark'] .docusaurus-highlight-code-line {
background-color: rgba(0, 0, 0, 0.3);
}
/* navbar adjustments */
+
+.navbar {
+ border-bottom-style: solid;
+ border-bottom-width: 2px;
+ border-color: rgba(52, 56, 62, 0.3);
+}
+
+/** In mobile view, reduce the padding */
+@media screen and (max-width: 996px) {
+ .navbar {
+ padding-inline: 1rem;
+ }
+}
+
+html[data-theme='dark'] .navbar {
+ background-color: #141419;
+ border-color: rgba(52, 56, 62, 1);
+}
+
.navbar__logo {
height: 2.3em;
width: auto;
}
/* footer adjustments */
+
+.footer {
+ border-top-style: solid;
+ border-top-width: 2px;
+ border-color: rgba(52, 56, 62, 0.3);
+ padding: 2rem 6rem 1rem 6rem;
+ color: #141419;
+ background-color: #fff;
+}
+
+html[data-theme='dark'] .footer {
+ background-color: #141419;
+ color: #fff;
+}
+
:root .footer__col {
text-align: center;
- padding-bottom: 1em;
+}
+
+.footer__link {
+ color: #141419 !important;
+}
+
+html[data-theme='dark'] .footer__link {
+ color: #DDDDDD !important;
+}
+
+html[data-theme='dark'] .footer__svg {
+ fill: #DDDDDD;
+}
+
+html[data-theme='dark'] .footer {
+ border-color: rgba(52, 56, 62, 1);
+}
+
+html[data-theme='dark'] .footer__copyright {
+ color: rgba(135, 135, 135, 1);
}
/* table of contents adjustments */
@@ -49,7 +145,6 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
}
/* tabs of 03-running-a-full-node 01-overview */
-
:root .tabs-container {
border-radius: 5px;
border-top: 1px solid var(--ifm-color-primary);
@@ -66,3 +161,49 @@ div[role='tabpanel'] {
padding: 10px;
}
+/* menu adjustments */
+.menu {
+ border-right-style: solid;
+ border-right-width: 2px;
+ border-color: rgba(52, 56, 62, 0.3);
+}
+
+.menu__list .menu__list {
+ margin-top: 0!important;
+}
+
+/** In mobile view, reduce the padding */
+@media screen and (min-width: 997px) {
+ .menu {
+ padding: 0!important;
+ }
+}
+
+html[data-theme='dark'] .menu {
+ border-color: rgba(52, 56, 62, 1);
+}
+
+.menu__link--active {
+ border-left-style: solid;
+ border-left-width: 0.25rem;
+ border-left-color: #FF6C3E;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+.menu .menu__link.menu__link--sublist:after {
+ color: #1a1c1f;
+ }
+
+
+.button.button--secondary {
+ border-right-style: solid;
+ border-right-width: 2px;
+ border-bottom-width: 0;
+ border-top-width: 0;
+ border-color: rgba(52, 56, 62, 0.3);
+}
+
+html[data-theme='dark'] .button.button--secondary {
+ border-color: rgba(52, 56, 62, 1);
+}
diff --git a/docs/src/theme/ColorModeToggle/index.js b/docs/src/theme/ColorModeToggle/index.js
new file mode 100644
index 0000000000..defce82032
--- /dev/null
+++ b/docs/src/theme/ColorModeToggle/index.js
@@ -0,0 +1,109 @@
+import React from "react";
+import clsx from "clsx";
+import Switch from "react-switch";
+import useIsBrowser from "@docusaurus/useIsBrowser";
+import { translate } from "@docusaurus/Translate";
+import styles from "./styles.module.css";
+
+function ColorModeToggle({ className, value, onChange }) {
+ const isBrowser = useIsBrowser();
+ const title = translate(
+ {
+ message: "Switch between dark and light mode (currently {mode})",
+ id: "theme.colorToggle.ariaLabel",
+ description: "The ARIA label for the navbar color mode toggle",
+ },
+ {
+ mode:
+ value === "dark"
+ ? translate({
+ message: "dark mode",
+ id: "theme.colorToggle.ariaLabel.mode.dark",
+ description: "The name for the dark color mode",
+ })
+ : translate({
+ message: "light mode",
+ id: "theme.colorToggle.ariaLabel.mode.light",
+ description: "The name for the light color mode",
+ }),
+ }
+ );
+
+ const checkedIcon = (
+
+ );
+
+ const uncheckedIcon = (
+
+ );
+
+ return (
+
+ onChange(value === "dark" ? "light" : "dark")}
+ checked={value === "dark"}
+ disabled={!isBrowser}
+ handleDiameter={22}
+ title={title}
+ aria-label={title}
+ checkedIcon={checkedIcon}
+ uncheckedIcon={uncheckedIcon}
+ onHandleColor={"#25282D"}
+ offHandleColor={"#FFFFFF"}
+ activeBoxShadow={"0 0 2px 3px #FF6C3E"}
+ aria-live="polite"
+ offColor={"#25282D"}
+ onColor={"#FFFFFF"}
+ />
+
+ );
+}
+export default React.memo(ColorModeToggle);
diff --git a/docs/src/theme/ColorModeToggle/styles.module.css b/docs/src/theme/ColorModeToggle/styles.module.css
new file mode 100644
index 0000000000..0ccdf335ce
--- /dev/null
+++ b/docs/src/theme/ColorModeToggle/styles.module.css
@@ -0,0 +1,6 @@
+.toggle {
+ width: 3rem;
+ height: 1.5rem;
+ margin-right: 2.5rem;
+ margin-left: 2.5rem;
+}
diff --git a/docs/src/theme/DocPage/Layout/Sidebar/ExpandButton/index.js b/docs/src/theme/DocPage/Layout/Sidebar/ExpandButton/index.js
new file mode 100644
index 0000000000..9dfc02ed7f
--- /dev/null
+++ b/docs/src/theme/DocPage/Layout/Sidebar/ExpandButton/index.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import {translate} from '@docusaurus/Translate';
+import IconArrow from '@theme/Icon/Arrow';
+import styles from './styles.module.css';
+export default function DocPageLayoutSidebarExpandButton({toggleSidebar}) {
+ return (
+
+
+
+ );
+}
diff --git a/docs/src/theme/DocPage/Layout/Sidebar/ExpandButton/styles.module.css b/docs/src/theme/DocPage/Layout/Sidebar/ExpandButton/styles.module.css
new file mode 100644
index 0000000000..712615bd34
--- /dev/null
+++ b/docs/src/theme/DocPage/Layout/Sidebar/ExpandButton/styles.module.css
@@ -0,0 +1,30 @@
+@media (min-width: 997px) {
+ .expandButton {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: background-color var(--ifm-transition-fast) ease;
+ background-color: var(--docusaurus-collapse-button-bg);
+ border-right-width: 2px;
+ border-right-style: solid;
+ border-color: rgba(52, 56, 62, 0.3);
+ }
+
+ .expandButton:hover,
+ .expandButton:focus {
+ background-color: var(--docusaurus-collapse-button-bg-hover);
+ }
+
+ .expandButtonIcon {
+ transform: rotate(0);
+ }
+
+ [dir='rtl'] .expandButtonIcon {
+ transform: rotate(180deg);
+ }
+}
diff --git a/docs/src/theme/Footer/Copyright/index.js b/docs/src/theme/Footer/Copyright/index.js
new file mode 100644
index 0000000000..94f0a80a27
--- /dev/null
+++ b/docs/src/theme/Footer/Copyright/index.js
@@ -0,0 +1,12 @@
+import React from "react";
+export default function FooterCopyright({ copyright }) {
+ return (
+
+ );
+}
diff --git a/docs/src/theme/Footer/Layout/index.js b/docs/src/theme/Footer/Layout/index.js
new file mode 100644
index 0000000000..7a68dab8de
--- /dev/null
+++ b/docs/src/theme/Footer/Layout/index.js
@@ -0,0 +1,16 @@
+import React from "react";
+import clsx from "clsx";
+export default function FooterLayout({ style, links, logo, copyright }) {
+ return (
+
+
+ {copyright}
+ {links}
+
+
+
+ {column.items.map((item, i) => (
+
+ ))}
+
+
+ {columns.map((column, i) => (
+
+ ))}
+
+ );
+}
diff --git a/docs/src/theme/Footer/Links/Simple/index.js b/docs/src/theme/Footer/Links/Simple/index.js
new file mode 100644
index 0000000000..8b34d9b7b5
--- /dev/null
+++ b/docs/src/theme/Footer/Links/Simple/index.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import LinkItem from '@theme/Footer/LinkItem';
+function Separator() {
+ return ยท;
+}
+function SimpleLinkItem({item}) {
+ return item.html ? (
+
+ ) : (
+
+ );
+}
+export default function FooterLinksSimple({links}) {
+ return (
+
+
+ {links.map((item, i) => (
+
+
+ {links.length !== i + 1 && }
+
+ ))}
+
+
+
+
+
+ {copyright}
+
+
+ Terms & Conditions
+
+ |
+
+ Privacy Policy
+
+ |
+
+ White Paper
+
+ |
+
+ Brand Kit
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {copyright}
+
+