feat: Improved documentation site with search, dark mode, sitemap.xml and less cluttered navigation

docfx.json

@@ -11,7 +11,7 @@
       "disableGitFeatures": true,
       "disableDefaultFilter": false,
       "namespaceLayout": "flattened",
-      "memberLayout": "separatePages",
+      "memberLayout": "samePage",
       "filter": "./docs/filterConfig.yml",
       "output": "./docs/core-api",
       "properties": { "TargetFramework": "netstandard2.0" }
@@ -26,15 +26,15 @@
       "disableGitFeatures": true,
       "disableDefaultFilter": false,
       "namespaceLayout": "flattened",
-      "memberLayout": "separatePages",
+      "memberLayout": "samePage",
       "filter": "./docs/filterConfig.yml",
       "output": "./docs/yubikey-api",
       "properties": { "TargetFramework": "netstandard2.0" }
     }
   ],
   "build": {
     "sitemap": {
-      "baseUrl": "https://dotnet.github.io/docfx",
+      "baseUrl": "https://docs.yubico.com/yesdk",
       "changefreq": "monthly"
     },
     "content": [
@@ -68,11 +68,19 @@
     "output": "./docs/_site/",
     "globalMetadataFiles": [],
     "globalMetadata": {
-      "_appFaviconPath": "images/favicon.ico",
-      "_enableSearch": false
+      "_googleAnalyticsTagId": "6195355",
+      "_appFaviconPath": "./images/favicon.ico",
+      "_enableSearch": true,
+      "_appName" : "Yubico",
+      "_appLogoPath" : "./images/yubico-circle-y-mark-white.png",
+      "_lang": "en",
+      "_gitContribute": {
+        "repo":"https://github.com/Yubico/Yubico.NET.SDK",
+        "branch":"develop"
+      }
     },
     "fileMetadataFiles": [],
-    "template": ["default", "./docs/yubikeysdk-template"],
+    "template": ["default", "modern", "docs/custom-template"],
     "postProcessors": ["ExtractSearchIndex"],
     "disableGitFeatures": false
   }

docs/custom-template/public/main.css

@@ -0,0 +1,154 @@
+/* =============================================================================
+   DOCFX CUSTOM STYLES
+   ============================================================================= */
+
+/* =============================================================================
+   HEADER & NAVIGATION
+   ============================================================================= */
+
+/* Logo styling */
+#logo {
+  width: 50px;
+  height: 50px;
+  margin-right: 16px;
+}
+
+/* Header background */
+header.bg-body {
+  background-color: #8cc041 !important;
+}
+
+[data-bs-theme="dark"] header.bg-body {
+  background-color: #6a9b2a !important;
+}
+
+/* Remove redundant Home header */
+#navbar > ul > li:nth-child(1) > a {
+  display: none;
+}
+
+/* Navbar base styling */
+.navbar {
+  --bs-navbar-bg: #8cc041 !important;
+  --bs-navbar-color: #ffffff !important;
+  --bs-navbar-hover-color: rgba(255, 255, 255, 0.8) !important;
+  --bs-navbar-active-color: #e0e0e0 !important;
+  --bs-navbar-brand-color: #e0e0e0 !important;
+  --bs-navbar-brand-hover-color: rgba(255, 255, 255, 0.8) !important;
+  --bs-navbar-toggler-color: #e0e0e0 !important;
+  background-color: #8cc041 !important;
+}
+
+/* Navbar text and interactive elements */
+.navbar .nav-link,
+.navbar .navbar-brand,
+.navbar .btn,
+.navbar .dropdown-toggle {
+  color: #ffffff !important;
+}
+
+/* Active nav link styling */
+.navbar .nav-link.active {
+  font-weight: 600;
+  background-color: rgba(0, 0, 0, 0.1) !important;
+  border-radius: 4px;
+}
+
+/* Dark mode navbar adjustments */
+[data-bs-theme="dark"] .navbar {
+  --bs-navbar-color: #e0e0e0 !important;
+  --bs-navbar-bg: #6a9b2a !important;
+  background-color: #6a9b2a !important;
+}
+
+[data-bs-theme="dark"] .navbar .nav-link,
+[data-bs-theme="dark"] .navbar .navbar-brand,
+[data-bs-theme="dark"] .navbar .btn,
+[data-bs-theme="dark"] .navbar .dropdown-toggle,
+[data-bs-theme="dark"] .navbar .bi {
+  color: #e0e0e0 !important;
+}
+
+[data-bs-theme="dark"] .navbar .nav-link.active {
+  background-color: rgba(0, 0, 0, 0.2) !important;
+}
+
+/* =============================================================================
+   BREADCRUMB
+   ============================================================================= */
+
+/* Remove single-item breadcrumb */
+.breadcrumb:has(li:first-child:last-child) {
+  display: none;
+}
+
+/* =============================================================================
+   API DOCUMENTATION
+   ============================================================================= */
+
+/* Namespace and assembly names */
+.namespace-name,
+.assembly-name {
+  display: block;
+  font-size: 14px;
+  color: rgb(94, 94, 94);
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+.namespace-name {
+  margin-top: 20px;
+}
+
+.assembly-name {
+  margin-bottom: 30px;
+}
+
+/* Class inheritance */
+.derivedClasses {
+  margin-top: 20px;
+}
+
+.derivedClasses-label {
+  font-weight: 600;
+}
+
+.derivedClasses dd {
+  display: block;
+  margin-inline-start: 20px;
+}
+
+/* Member info tables */
+.memberinfo {
+  font-size: 14px;
+  margin: 10px 0;
+}
+
+.memberinfo td:first-child {
+  width: 30%;
+}
+
+.memberinfo thead {
+  background-color: #f2f2f2;
+}
+
+/* =============================================================================
+   CODE BLOCKS
+   ============================================================================= */
+
+/* Code language label */
+.codewrapper .language {
+  color: rgb(23, 23, 23);
+  border: 1px solid rgb(227, 227, 227);
+  border-bottom: 0;
+  background-color: rgb(242, 242, 242);
+  padding: 2px 16px;
+  font-size: 12px;
+}
+
+/* Code block container */
+.codewrapper pre {
+  border: 1px solid rgb(227, 227, 227);
+  border-radius: 0;
+  background-color: rgb(250, 250, 250);
+}

docs/custom-template/public/token.json

@@ -0,0 +1,8 @@
+{
+  "summary": "Summary",
+  "note": "<h5>Note</h5>",
+  "warning": "<h5>Warning</h5>",
+  "tip": "<h5>Tip</h5>",
+  "important": "<h5>Important</h5>",
+  "caution": "<h5>Caution</h5>"
+}

docs/filterConfig.yml

@@ -16,3 +16,6 @@ apiRules:
   - exclude:
       uidRegex: ^System\.*
       type: Type
+  - exclude:
+      hasAttribute:
+        uid: System.ObsoleteAttribute