Use customized modern theme for docs! (fsprojects#2985)

dawedawe · Nov 15, 2023 · 51992ee · 51992ee
1 parent 3de2704
commit 51992ee
Show file tree

Hide file tree

Showing 11 changed files with 610 additions and 236 deletions.
diff --git a/.config/dotnet-tools.json b/.config/dotnet-tools.json
@@ -15,7 +15,7 @@
       ]
     },
     "fsdocs-tool": {
-      "version": "20.0.0-alpha-009",
+      "version": "20.0.0-alpha-010",
       "commands": [
         "fsdocs"
       ]

diff --git a/Directory.Build.props b/Directory.Build.props
@@ -48,7 +48,8 @@ Some common use cases include:
     <PropertyGroup>
         <FsDocsLicenseLink>https://github.com/fsprojects/fantomas/blob/main/LICENSE.md</FsDocsLicenseLink>
         <FsDocsReleaseNotesLink>https://github.com/fsprojects/fantomas/blob/main/CHANGELOG.md</FsDocsReleaseNotesLink>
-        <FsDocsLogoSource>images/logo-fantomas-white.svg</FsDocsLogoSource>
+        <FsDocsLogoSource>images/logo.png</FsDocsLogoSource>
+        <FsDocsFaviconSource>images/favicon.ico</FsDocsFaviconSource>
         <RepositoryUrl>https://github.com/fsprojects/fantomas</RepositoryUrl>
     </PropertyGroup>
 

diff --git a/docs/_body.html b/docs/_body.html
@@ -0,0 +1,20 @@
+<script type="module">
+    import mermaid from "https://esm.sh/mermaid@9.2.2";
+    mermaid.initialize({
+        startOnLoad: true,
+        theme: "base",
+        themeVariables: {
+            primaryColor: '#338cbb',
+            primaryTextColor: '#FFF',
+            primaryBorderColor: '#5aacd6'
+        }
+    });
+
+    const menuHeaders = [...document.querySelectorAll(".nav-header")].filter(nh => nh.id);
+    menuHeaders.forEach(nv => {
+        nv.addEventListener("click", () => {
+            nv.classList.toggle("active");
+        })
+    })
+</script>
+<script type="module" src="{{root}}content/webcomponents.js"></script>
diff --git a/docs/_head.html b/docs/_head.html
@@ -0,0 +1 @@
+<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;1,400&family=Reem+Kufi:wght@400;500;700&display=swap" rel="stylesheet">
diff --git a/docs/_menu-item_template.html b/docs/_menu-item_template.html
@@ -1 +1 @@
-<li class="nav-item {{fsdocs-menu-item-active-class}}"><a href="{{fsdocs-menu-item-link}}" class="nav-link pb-2 d-block" > {{fsdocs-menu-item-content}}</a></li>
+<li class="nav-item {{fsdocs-menu-item-active-class}}"><a href="{{fsdocs-menu-item-link}}" class="nav-link" > {{fsdocs-menu-item-content}}</a></li>
diff --git a/docs/_menu_template.html b/docs/_menu_template.html
@@ -1,15 +1,7 @@
-<div id="{{fsdocs-menu-header-id}}-wrapper" class="accordion-item {{fsdocs-menu-header-active-class}}">
-    <li class="docs-menu">
-        <button id="{{fsdocs-menu-header-id}}-button"
-            class="accordion-button collapsed btn text-white d-flex justify-content-between align-items-center"
-            data-bs-toggle="collapse" data-bs-target="#{{fsdocs-menu-header-id}}" aria-expanded="false"
-            aria-control="{{fsdocs-menu-header-id}}" type="button">
-            {{fsdocs-menu-header-content}}
-        </button>
-        <div id="{{fsdocs-menu-header-id}}" class="accordion-collapse collapse ps-4 pb-2 " data-bs-parent="#sidebar-content">
-            <ul class="list-unstyled fw-normal mb-0">
-                {{fsdocs-menu-items}}
-            </ul>
-        </div>
-    </li>
+<li class="nav-header {{fsdocs-menu-header-active-class}}" id="{{fsdocs-menu-header-id}}">
+    {{fsdocs-menu-header-content}}
+    <iconify-icon icon="fluent:chevron-up-24-regular" width="32" height="32" rotate="180deg"></iconify-icon>
+</li>
+<div class="menu-items">
+    {{fsdocs-menu-items}}
 </div>
diff --git a/docs/_template.html b/docs/_template.html
diff --git a/docs/content/configuration.css b/docs/content/configuration.css
@@ -0,0 +1,33 @@
+h3 {
+    display: inline-block;
+    padding-inline: var(--spacing-100);
+    font-size: var(--font-300);
+    max-width: calc(100% - var(--configuration-icon-size) - var(--configuration-icon-size) - var(--spacing-100) - var(--spacing-100));
+}
+
+p > fantomas-setting, p > copy-to-clipboard {
+    margin-right: var(--spacing-100);
+    transform: translateY(var(--spacing-100));
+}
+
+#content > fantomas-setting, #content > copy-to-clipboard {
+    transform: translateY(var(--spacing-100));
+}
+
+@media screen and (min-width: 1000px) {
+    #content > fantomas-setting, #content > copy-to-clipboard {
+        transform: translateY(var(--spacing-50));
+    }
+}
+
+@media screen and (min-width: 1200px) {
+    h3 {
+        font-size: var(--font-300);
+    }
+}
+
+@media screen and (min-width: 1400px) {
+    h3 {
+        font-size: var(--font-500);
+    }
+}
diff --git a/docs/content/fsdocs-theme.css b/docs/content/fsdocs-theme.css
@@ -0,0 +1,148 @@
+:root {
+    --white: #FFF;
+    --pearl: #f6f7f7;
+    --black: #222222;
+
+    --fantomas-50: #f3f8fc;
+    --fantomas-100: #e5f0f9;
+    --fantomas-200: #c6e0f1;
+    --fantomas-300: #94c8e5;
+    --fantomas-400: #5aacd6;
+    --fantomas-500: #338cbb;
+    --fantomas-600: #2575a4;
+    --fantomas-700: #1f5d85;
+    --fantomas-800: #1d4f6f;
+    --fantomas-900: #1d435d;
+    --fantomas-950: #142c3d;
+
+    --header-background: var(--white);
+    --primary: var(--fantomas-500);
+    --aside-background: var(--primary);
+    --menu-color: var(--white);
+    --link-hover: #2FBADC;
+    --page-menu-width: 400px;
+    --configuration-icon-size: 24px;
+    --mobile-menu-background: var(--fantomas-400);
+    --fsdocs-theme-toggle-light-color: var(--fantomas-600);
+    --header-link-color: var(--fantomas-600);
+    --fsdocs-theme-toggle-dark-color: var(--fantomas-300);
+
+    --system-font: 'Poppins', sans-serif;
+}
+
+h1,h2,h3,h4,h5,h6 {
+    font-weight: 400;
+}
+
+#fsdocs-main-menu {
+    padding: 0;
+}
+
+#fsdocs-main-menu, header {
+    .menu {
+        .nav-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            cursor: pointer;
+            padding: var(--spacing-50) var(--spacing-100);
+            margin-top: var(--spacing-400);
+
+            & iconify-icon {
+                margin-right: var(--spacing-50);
+            }
+
+            &.active {
+                background-color: var(--fantomas-700);
+                transition: all 200ms;
+
+                & iconify-icon {
+                    transform: rotate(-180deg);
+                }
+            }
+        }
+
+        .nav-header + .menu-items {
+            visibility: hidden;
+            height: 0;
+            overflow-y: hidden;
+            opacity: 0;
+            transition: all 200ms;
+            padding-left: var(--spacing-50);
+        }
+
+        .nav-header.active {
+            background-color: var(--fantomas-700);
+        }
+
+        .nav-header.active + .menu-items {
+            visibility: visible;
+            height: initial;
+            opacity: 1;
+            overflow-y: initial;
+        }
+
+        .nav-item{
+            border: none;
+            border-bottom: 1px solid rgba(255,255,255,0.4);
+
+            .nav-link {
+                font-weight: 400;
+                &:hover {
+                    background-color: var(--fantomas-300);
+                }
+
+                &:focus {
+                    background-color: var(--fantomas-600);
+                }
+            }
+
+            &.active {
+                border-left: var(--spacing-100) solid var(--fantomas-300);
+                background-color: var(--fantomas-600);
+            }
+        }
+    }
+}
+
+#fsdocs-page-menu {
+    & a {
+        color: var(--fantomas-600);
+    }
+
+    .level-2 {
+        margin-top: var(--spacing-100);
+    }
+
+    .level-3 a {
+        color: var(--fantomas-700);
+    }    
+}
+
+.mermaid {
+    margin: var(--spacing-100) auto;
+    & svg {
+        margin: auto;
+    }
+}
+
+[data-theme="dark"] {
+    --header-background: var(--fantomas-700);
+    --mobile-menu-background: var(--fantomas-700);
+    --background: var(--fantomas-900);
+    --header-link-color: var(--fantomas-200);
+    --fsdocs-theme-toggle-dark-color:  var(--fantomas-200);
+    --heading-color: var(--white);
+    --text-color: var(--white);
+    --aside-background: var(--fantomas-700);
+
+    #fsdocs-page-menu {
+        & a {
+            color: var(--fantomas-100);
+        }
+
+        .level-3 a {
+            color: var(--fantomas-300);
+        }
+    }
+}