chore: improved rpc docs

co-author: @Eligioo

.vitepress/config.ts

@@ -1,10 +1,8 @@
 import { existsSync, readFileSync } from 'node:fs'
 import { basename, dirname, join } from 'node:path'
-import { env } from 'node:process'
 import { defineConfig } from 'vitepress'
 import container from 'markdown-it-container'
 import { spawn } from 'cross-spawn'
-import { withPwa } from '@vite-pwa/vitepress'
 import { sidebar } from './sidebar.config'
 import { navigation } from './navigation.config'
 import { generateWebClientDocs } from './scripts/web-client'
@@ -108,7 +106,7 @@ export default async () => {
       ['link', { rel: 'apple-touch-icon', sizes: '180x180', href: `${baseUrl}favicons/apple-touch-icon.png` }],
       ['link', { rel: 'icon', type: 'image/png', sizes: '32x32', href: `${baseUrl}favicons/favicon-32x32.png` }],
       ['link', { rel: 'icon', type: 'image/png', sizes: '16x16', href: `${baseUrl}favicons/favicon-16x16.png` }],
-      ['link', { rel: 'manifest', href: `${baseUrl}favicons/site.webmanifest` }],
+      // ['link', { rel: 'manifest', href: `${baseUrl}favicons/site.webmanifest` }],
       ['link', { rel: 'mask-icon', href: `${baseUrl}favicons/safari-pinned-tab.svg`, color: '#eaaf0c' }],
       ['link', { rel: 'shortcut icon', href: `${baseUrl}favicons/favicon.ico` }],
       ['meta', { name: 'msapplication-TileColor', content: '#2b5797' }],
@@ -128,53 +126,10 @@ export default async () => {
       ['meta', { name: 'twitter:creator', content: '@nimiq' }],
       ['meta', { name: 'twitter:title', content: pkg.title }],
     ],
-    // pwa: {
-    //   mode: env.DEPLOYMENT_ENV !== 'production' ? 'development' : 'production',
-    //   disable: env.DEPLOYMENT_ENV !== 'production',
-    //   scope: baseUrl,
-    //   registerType: 'autoUpdate',
-    //   injectRegister: 'script-defer',
-    //   includeAssets: [`${baseUrl}favicons/favicon.svg`],
-    //   manifest: {
-    //     name: pkg.title,
-    //     short_name: pkg.title,
-    //     theme_color: '#ffffff',
-    //     icons: [
-    //       {
-    //         src: `${baseUrl}favicons/nimiq-hexagon-192.png`,
-    //         sizes: '192x192',
-    //         type: 'image/png',
-    //       },
-    //       {
-    //         src: `${baseUrl}favicons/nimiq-hexagon-512.png`,
-    //         sizes: '512x512',
-    //         type: 'image/png',
-    //       },
-    //       {
-    //         src: `${baseUrl}favicons/nimiq-hexagon-512.png`,
-    //         sizes: '512x512',
-    //         type: 'image/png',
-    //         purpose: 'any maskable',
-    //       },
-    //     ],
-    //   },
-    //   workbox: {
-    //     globPatterns: ['**/*.{css,js,html,svg,png,ico,txt,woff2}'],
-    //   },
-    //   experimental: {
-    //     includeAllowlist: true,
-    //   },
-    //   devOptions: {
-    //     enabled: env.DEPLOYMENT_ENV === 'production',
-    //     type: 'module',
-    //     suppressWarnings: true,
-    //     navigateFallback: '/',
-    //   },
-    // },
 
-    sitemap: {
-      hostname: 'https://onmax.github.io',
-    },
+    // sitemap: {
+    //   hostname: 'https://onmax.github.io',
+    // },
 
   })
 }

.vitepress/scripts/rpc-docs.ts

@@ -36,15 +36,14 @@ export async function generateRpcDocs() {
   // Build folder
   const buildFolder = join(__dirname, '../../build/rpc-docs')
   // Read package version of generated docs, if already built
-  const methodFile = join(buildFolder, '/method.md')
+  const methodFile = join(buildFolder, '/methods.md')
 
   if (existsSync(methodFile)) {
-    const re = /## Version: (\.*)/
+    const re = /## Version: (.*)/
     const content = readFileSync(methodFile, 'utf-8')
     const generatedVersion = re.exec(content)?.[1]
-    consola.info(`RPC specification docs ${packageVersion} already generated`)
     if (packageVersion === generatedVersion) {
-      consola.info(`RPC specification docs ${packageVersion} already generated`)
+      consola.info(`RPC docs ${packageVersion} already generated`)
       return
     }
   }
@@ -59,45 +58,45 @@ export async function generateRpcDocs() {
 
   // - <span font-mono>passphrase</span>*: `String`
   // Returns: [ReturnAccount](#returnaccount)
-  const template = `
-  <div grid="~ gap-32 cols-1 lg:cols-[2fr_3fr]">
-    <div w-full>
-  
-### {{ methodName }}
+  const template = `### \`{{ methodName }}\`
+
+{{ description }}
 
-Parameters{.label .text-12 .text-neutral-800}
+<section>
+  <div class="io">
+  
+<h4 label>Parameters</h4>
 
 {{ parameters }}
 
-Returns{.label .text-12 .text-neutral-800}
+<h4 label>Returns</h4>
 
 {{ returns }}
 
 </div>
 
-<div w-full>
-
 ::: code-group
 
 \`\`\`JavaScript
-const options = {
+const url = new URL('http://127.0.0.1:8648');
+const res = await fetch(url, {
   method: 'POST',
   headers: {
     'Content-Type': 'application/json'
   },
-  body: '{"jsonrpc":"2.0","method":"{{ methodName }}","params":[{{ parametersValues }}],"id":1}'
-};
-
-fetch('http://127.0.0.1:8648', options)
-  .then(response => response.json())
-  .then(response => console.log(response))
-  .catch(err => console.error(err));
+  body: '{
+    "jsonrpc":"2.0",
+    "method":"{{ methodName }}",
+    "params":[{{ parametersValues }}],
+    "id":1
+  }'
+});
+const data = await res.json();
 \`\`\`
 
 \`\`\`Shell
-curl --request POST \n
-  --url http://127.0.0.1:8648 \n
-  --header 'Content-Type: application/json' \n
+curl --request POST --url http://127.0.0.1:8648
+  --header 'Content-Type: application/json'
   --data '{
     "jsonrpc": "2.0",
     "method": "{{ methodName }}",
@@ -107,9 +106,7 @@ curl --request POST \n
 \`\`\`
 :::
 
-</div>
-</div>
-`.trim()
+</section>\n\n`
 
   function paramToValue(param: any) {
     switch (param.schema.type) {
@@ -137,6 +134,7 @@ curl --request POST \n
     }
     const tmp = template
       .replaceAll('{{ methodName }}', method.name)
+      .replaceAll('{{ description }}', method.description)
       .replaceAll('{{ parameters }}', parameters)
       .replaceAll('{{ parametersValues }}', parametersValues)
       .replaceAll('{{ returns }}', resultProperties)

.vitepress/theme/MainLayout.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
 import DefaultTheme from 'vitepress/theme'
-// import RegisterSw from './components/RegisterSW.vue'
 </script>
 
 <template>
-  <!-- <RegisterSW /> -->
   <DefaultTheme.Layout bg-neutral-0 class="vp-raw">
     <template #not-found>
       <main px-32>

.vitepress/theme/components/Doc.vue

@@ -30,7 +30,7 @@ const pageName = computed(() =>
         </div>
       </div>
 
-      <div class="content">
+      <div class="content" w-full>
         <main class="main">
           <MarkdownContent
             :class="[

.vitepress/theme/components/RegisterSW.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<!-- <script setup lang="ts">
 import { onBeforeMount, ref } from 'vue'
 
 const offlineReady = ref(false)
@@ -21,4 +21,4 @@ onBeforeMount(async () => {
 
 <template>
   <span sr-only>App ready to be used offline</span>
-</template>
+</template> -->

.vitepress/uno.config.ts

@@ -55,12 +55,10 @@ export default defineConfig({
     presetAttributify(),
     presetIcons({
       collections: {
-        logos: () => import('@iconify-json/logos/icons.json').then(i => i.default as any),
         nimiq: async () => {
-          const res = await fetch('https://raw.githubusercontent.com/onmax/nimiq-ui/main/packages/nimiq-icons/dist/icons.json')
-          const json = await res.json()
-          return json
+          return await fetch('https://raw.githubusercontent.com/onmax/nimiq-ui/main/packages/nimiq-icons/dist/icons.json').then(res => res.json())
         },
+
       },
     }),
     presetNimiq({

build/rpc-docs/index.md

@@ -1,3 +1,7 @@
+---
+aside: false
+---
+
 # Nimiq JSON-RPC Specification
 
 Through the use of JSON-RPC, Nimiq nodes expose a set of standardized methods and endpoints that allow external applications and tools to interact, stream and control the behavior of the nodes. This includes functionalities such as retrieving information about the blockchain state, submitting transactions, managing accounts, and configuring node settings.
@@ -34,7 +38,7 @@ The JSON-RPC specification defines two ways of passing parameters to methods: na
 }
 ```
 
-## Examples
+<!-- ## Examples
 
 JSON-RPC achieves language and framework independence by leveraging JSON's simplicity for data interchange and defining a standardized protocol for remote procedure calls. This minimalist approach ensures seamless communication between diverse systems, promoting interoperability without reliance on specific programming languages or frameworks.
 
@@ -67,6 +71,36 @@ curl --request POST \
 }'
 ```
 
-:::
+::: -->
 
 <!--@include: ./methods.md-->
+
+<style>
+  .prose > * {
+    margin: 0;
+  }
+
+  section {
+    --uno: flex gap-32 items-start max-w-inherit;
+
+    .io {
+      --uno: shrink basis-[min(30%,280px)] m-0;
+
+      h4 {
+        --uno: text-12 text-neutral-800 mt-32 mb-16;
+      }
+
+      ul {
+        --uno: pl-4;
+
+        li::before {
+          --uno: mr-4;
+        }
+      }
+    }
+
+    .vp-code-group {
+      --uno: of-x-auto flex-1;
+    }
+  }
+</style>