Developer Portal

.github/workflows/verify-pr.yaml

@@ -2,9 +2,6 @@ name: Verify PR
 
 on:
   pull_request:
-    branches:
-      - main
-
 jobs:
   verify:
     runs-on: ubuntu-latest

.gitignore

@@ -3,3 +3,4 @@
 node_modules/
 book
 .DS_Store
+css/tailwind.css

.spellcheckerdict.txt

@@ -32,6 +32,7 @@ De-registration
 DevOps
 disintermediate
 DNS
+dropdown
 DSNP
 EC2
 ECC
@@ -57,6 +58,8 @@ IPFS
 ipfs
 JS
 jsonrpc
+lifecycle
+[Ll]ightpaper
 localhost
 LockIdentifier
 macOS
@@ -68,6 +71,7 @@ mempool
 Merkle
 MeWe
 mFRQCY
+[Mm]icroservice(s?)
 Milli
 MinimumStakingAmount
 MSA(s|'s)?
@@ -109,11 +113,13 @@ RPC(s?)
 Ryzen
 scalability
 scalable
+SDK(s?)
 [Ss]chemaI[Dd]
 [Ss]chemas
 Screenshots
 secp256k1
 SignedExtension
+SIWF
 SMT
 SR25519
 SSD
@@ -147,6 +153,7 @@ validator(s?)
 vCPU
 vs
 [Ww]asm
+Web2
 web3
 WebSocket(s?)
 whitespace
@@ -166,6 +173,7 @@ trackable
 Amplica
 algorithmically
 optionality
+OpenAPI
 annum
 incentivize
 Paseo
@@ -198,3 +206,5 @@ blockspace
 permissionless
 TBD
 precalculated
+unfollowing
+[Ww]ebhook(s?)

.spellcheckerrc.json

@@ -2,6 +2,7 @@
   "files": [
     "**/*.md",
     "!STYLEGUIDE.md",
+    "!preprocessors/README.md",
     "!LICENSE.md",
     "**/.github/**/*.md"
   ],

.tool-versions

@@ -0,0 +1 @@
+nodejs 22.11.0

book.toml

@@ -5,8 +5,18 @@ multilingual = false
 src = "pages"
 title = "Frequency Documentation"
 
-[preprocessor.local]
-command = "node preprocessor.mjs"
+[preprocessor.button-links]
+command = "node preprocessors/button-links.mjs"
+
+[preprocessor.svg-embed]
+command = "node preprocessors/svg-embed.mjs"
+
+[preprocessor.title-image]
+command = "node preprocessors/title-image.mjs"
+
+[preprocessor.tailwind]
+renderers = ["html"]
+command = 'node preprocessors/noop-npx.mjs "npx -y tailwindcss -i ./theme/css/tailwind.css -o ./css/tailwind.css"'
 
 [output.html]
 no-section-label = true
@@ -16,23 +26,27 @@ git-repository-url = "https://github.com/frequency-chain/docs"
 edit-url-template = "https://github.com/frequency-chain/docs/blob/main/{path}"
 preferred-dark-theme = "coal"
 additional-css = [
+  "css/tailwind.css",
+  "css/side-nav.css",
+  "css/button-links.css",
+  "css/header.css",
   "css/extended.css",
   "css/highlight.css",
   "css/highlight-dark.css",
 ]
 
 # https://github.com/Michael-F-Bryan/mdbook-linkcheck
-[output.linkcheck]
-exclude = [
-  'github\.com/paseo-network',
-  'github\.com/frequency-chain/docs',
-  'github\.com/frequency-chain/frequency/releases',
-  'github\.com/frequency-chain/frequency',
-  'twitter\.com',
-  'www\.frequency\.xyz',
-]
-follow-web-links = true
-traverse-parent-directories = false
+# [output.linkcheck]
+# exclude = [
+#   'github\.com/paseo-network',
+#   'github\.com/frequency-chain/docs',
+#   'github\.com/frequency-chain/frequency/releases',
+#   'github\.com/frequency-chain/frequency',
+#   'twitter\.com',
+#   'www\.frequency\.xyz',
+# ]
+# follow-web-links = true
+# traverse-parent-directories = false
 
 [output.html.fold]
 enable = true

css/button-links.css

@@ -0,0 +1,74 @@
+.button-links,
+.button-links > p {
+  display: flex;
+  justify-content: space-around;
+  align-content: center;
+  align-items: stretch;
+  flex-wrap: wrap;
+}
+
+.button-links > p {
+  width: 100%;
+  margin: 0;
+}
+
+.button-links a,
+.button-links > p a,
+.button-links a:link,
+.button-links > p a:link {
+  text-decoration: none;
+  box-sizing: content-box;
+  font-weight: 700;
+  color: var(--button-nav-fg);
+  background-color: var(--button-nav-bg);
+  border: 2px solid transparent;
+  border-radius: 9999px;
+  user-select: none;
+  padding: 20px 10%;
+  margin: 10px;
+  display: flex;
+  font-size: 20px;
+  flex: 0.5;
+  transition-property: border, color;
+  transition-duration: 0.5s;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  white-space: nowrap;
+}
+
+@media screen and (max-width: 1080px) {
+  .button-links a,
+  .button-links > p a,
+  .button-links a:link,
+  .button-links > p a:link {
+    box-sizing: border-box;
+    margin: 10px 6px;
+    flex: 0 0 90%;
+    width: 100%;
+    white-space: normal;
+  }
+}
+
+@media screen and (max-width: 400px) {
+  .button-links a,
+  .button-links > p a,
+  .button-links a:link,
+  .button-links > p a:link {
+    box-sizing: border-box;
+    margin: 10px 6px;
+    flex: 0 0 100%;
+    width: 100%;
+    white-space: normal;
+  }
+}
+
+.button-links a:hover,
+.button-links > p a:hover,
+.button-links a:visited:hover,
+.button-links > p a:visited:hover {
+  text-decoration: none;
+  border: 2px solid var(--button-nav-hover-border);
+  color: var(--button-nav-hover-fg);
+  background: var(--button-nav-hover-bg);
+}

css/extended.css

@@ -5,8 +5,8 @@
 }
 
 #logo {
-  letter-spacing: -0.1rem;
-  font-size: 4.2rem;
+  letter-spacing: -1px;
+  font-size: 42px;
   font-weight: 300;
   line-height: 0;
 }
@@ -27,66 +27,6 @@
   padding: 10px 0;
 }
 
-.button-links {
-  display: flex;
-  justify-content: space-around;
-  align-content: center;
-  align-items: stretch;
-  flex-wrap: wrap;
-}
-
-.button-links a,
-.button-links a:link {
-  box-sizing: content-box;
-  font-weight: 300;
-  color: var(--button-nav-fg);
-  background-color: var(--button-nav-bg);
-  border: 2px solid transparent;
-  border-radius: 15px;
-  user-select: none;
-  padding: 20px 10%;
-  margin: 10px;
-  display: flex;
-  font-size: 2rem;
-  font-weight: 400;
-  flex: 0.5;
-  transition-property: border, color;
-  transition-duration: 0.5s;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  white-space: nowrap;
-}
-
-@media screen and (max-width: 1080px) {
-  .button-links a,
-  .button-links a:link {
-    box-sizing: border-box;
-    margin: 10px 6px;
-    flex: 0 0 90%;
-    width: 100%;
-    white-space: normal;
-  }
-}
-
-@media screen and (max-width: 400px) {
-  .button-links a,
-  .button-links a:link {
-    box-sizing: border-box;
-    margin: 10px 6px;
-    flex: 0 0 100%;
-    width: 100%;
-    white-space: normal;
-  }
-}
-
-.button-links a:hover,
-.button-links a:visited:hover {
-  text-decoration: none;
-  border: 2px solid var(--button-nav-hover);
-  color: var(--button-nav-fg);
-}
-
 .svg-embed {
   margin-top: 10px;
   margin-bottom: 10px;

css/header.css

@@ -0,0 +1,3 @@
+.header-shadow {
+  box-shadow: 0 4px 4px 0 #00000040;
+}

css/highlight-dark.css

@@ -115,3 +115,30 @@ pre .hljs {
 .no-js .svg-embed-coal {
   display: none;
 }
+
+.title-embed {
+  display: flex;
+  align-items: last baseline;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.title-embed-light {
+  display: none;
+  width: 64px;
+  height: 64px;
+  margin-right: 8px;
+}
+
+.title-embed-coal {
+  display: flex;
+  width: 64px;
+  height: 64px;
+  margin-right: 8px;
+}
+
+.embed-number {
+  font-size: 60px;
+  font-weight: bold;
+  color: #f77c47;
+}

css/highlight.css

@@ -175,3 +175,30 @@ pre .hljs {
 .svg-embed-coal {
   display: none;
 }
+
+.title-embed {
+  display: flex;
+  align-items: last baseline;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.title-embed-light {
+  display: flex;
+  width: 64px;
+  height: 64px;
+  margin-right: 8px;
+}
+
+.title-embed-coal {
+  display: none;
+  width: 64px;
+  height: 64px;
+  margin-right: 8px;
+}
+
+.embed-number {
+  font-size: 60px;
+  font-weight: bold;
+  color: #f77c47;
+}