Skip to content

Commit

Permalink
docs: ui revamp (#1241)
Browse files Browse the repository at this point in the history 
## Description

Revamped the documentation UI using guidelines provided by the designer.
- Added `tailwindcss` support
- Ejected and reworked the `Footer`
- Replaced the font with `Poppins`
- Following the guidelines, improved some UI styles and buttons

**NOTE: The `pwa` folder needs to be aligned with the new Desmos icon,
please @RiccardoM have a look.**

Closes: DW-11

<!-- Add a description of the changes that this PR introduces and the
files that
are the most critical to review. -->

---

### Author Checklist

*All items are required. Please add a note to the item if the item is
not applicable and
please add links to any relevant follow up issues.*

I have...

- [x] included the correct [type
prefix](https://github.com/commitizen/conventional-commit-types/blob/v3.0.0/index.json)
in the PR title
- [ ] added `!` to the type prefix if API or client breaking change
- [ ] targeted the correct branch (see [PR
Targeting](https://github.com/desmos-labs/desmos/blob/master/CONTRIBUTING.md#pr-targeting))
- [ ] provided a link to the relevant issue or specification
- [ ] followed the guidelines for [building
modules](https://docs.cosmos.network/v0.44/building-modules/intro.html)
- [ ] included the necessary unit and integration
[tests](https://github.com/desmos-labs/desmos/blob/master/CONTRIBUTING.md#testing)
- [ ] added a changelog entry to `CHANGELOG.md`
- [ ] included comments for [documenting Go
code](https://blog.golang.org/godoc)
- [ ] updated the relevant documentation or specification
- [ ] reviewed "Files changed" and left comments if necessary
- [ ] confirmed all CI checks have passed

### Reviewers Checklist

*All items are required. Please add a note if the item is not applicable
and please add
your handle next to the items reviewed if you only reviewed selected
items.*

I have...

- [ ] confirmed the correct [type
prefix](https://github.com/commitizen/conventional-commit-types/blob/v3.0.0/index.json)
in the PR title
- [ ] confirmed `!` in the type prefix if API or client breaking change
- [ ] confirmed all author checklist items have been addressed
- [ ] reviewed state machine logic
- [ ] reviewed API design and naming
- [ ] reviewed documentation is accurate
- [ ] reviewed tests and test coverage
- [ ] manually tested (if applicable)

---------

Co-authored-by: Riccardo Montagnin <[email protected]>
  • Loading branch information
@ale-mazz @RiccardoM
ale-mazz and RiccardoM authored Sep 15, 2023
1 parent 86ef841 commit d59f6f1
Show file tree
Hide file tree
Showing 63 changed files with 1,636 additions and 353 deletions.
17 changes: 10 additions & 7 deletions .github/workflows/build-docs-preview.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,24 @@ 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:
runs-on: ubuntu-latest
steps:
- name: Checkout 🛎️
uses: actions/checkout@v4

- name: Compute diff 📜
uses: technote-space/[email protected]
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"
Expand All @@ -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/[email protected]
with:
Expand Down
219 changes: 124 additions & 95 deletions docs/docusaurus.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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) {
Expand All @@ -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."
},

<!-- Open Graph / Facebook -->
{
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"
},

<!-- Twitter -->
{
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,
},
/*{
Expand All @@ -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",
Expand All @@ -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'],
Expand Down
12 changes: 8 additions & 4 deletions docs/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
Loading

0 comments on commit d59f6f1

Please sign in to comment.