fix: added self hosting and cleaned up mermaid diagram and icons for docs components

Author: Kapil Gowru

fern/assets/styles.css

@@ -37,6 +37,60 @@
   background-color: transparent !important;
 }
 
+.fern-button-text {
+  font-weight: 500 !important;
+}
+
+.fern-layout-footer.not-prose {
+  margin-top: 4rem !important;
+}
+
+.prose {
+  color: var(--grayscale-12) !important;
+}
+
+h1, h2, h3 {
+  letter-spacing: -0.02em !important;
+}
+
+/*** START -- MERMAID DIAGRAMS STYLING ***/
+#mermaid-svg {
+  rect {
+    stroke: var(--accent-a6) !important;
+    fill: var(--accent-a3) !important;
+  }
+
+  tspan, text {
+    font-family: var(--font-body) !important;
+    color: var(--grayscale-10) !important;
+  }
+
+  line, .messageLine0 {
+    stroke: var(--grayscale-a9) !important;
+  }
+
+  #arrowhead path {
+    fill: var(--grayscale-9) !important;
+    stroke: var(--grayscale-9) !important;
+  }
+
+  .actor-line {
+    stroke: var(--accent-a6) !important;
+  }
+  
+  .actor-top {
+    rx: 1rem !important;
+    ry: 1rem !important;
+  }
+
+  .actor-bottom {
+    rx: 1rem !important;
+    ry: 1rem !important;
+  }
+}
+
+/*** END -- MERMAID DIAGRAMS STYLING ***/
+
 /*** START -- PRODUCT SELECTOR STYLING ***/
 @media (min-width: 1024px) {
   div[data-testid="product-dropdown-content"] {

fern/docs.yml

@@ -19,7 +19,7 @@ products:
     path: ./products/home/home.yml
     # icon: fa-regular fa-home
     image: ./images/product-switcher/product-switcher-home-light.png
-    slug: home
+    slug: 
     subtitle: Products that elevate your developer experience 
 
   - display-name: SDKs

fern/products/docs/docs.yml

@@ -17,64 +17,64 @@ navigation:
         contents:
           - page: Overview
             path: ./pages/component-library/default-components/overview.mdx
-            icon: fa-regular fa-book
+            icon: fa-duotone fa-book
           - page: Accordions
             path: ./pages/component-library/default-components/accordions.mdx
-            icon: fa-regular fa-chevron-down
+            icon: fa-duotone fa-chevron-down
           - page: Accordion Groups
             path: ./pages/component-library/default-components/accordion-groups.mdx
-            icon: fa-regular fa-chevrons-down
+            icon: fa-duotone fa-chevrons-down
           - page: Aside
             path: ./pages/component-library/default-components/aside.mdx
             icon: fa-regular fa-comment-dots
           - page: Button
             path: ./pages/component-library/default-components/button.mdx
-            icon: fa-regular fa-arrow-pointer
+            icon: fa-duotone fa-arrow-pointer
           - page: Callouts
             path: ./pages/component-library/default-components/callouts.mdx
-            icon: fa-regular fa-exclamation-triangle
+            icon: fa-duotone fa-exclamation-triangle
           - page: Cards
             path: ./pages/component-library/default-components/cards.mdx
-            icon: fa-regular fa-id-card
+            icon: fa-duotone fa-id-card
           - page: Card Groups
             path: ./pages/component-library/default-components/card-groups.mdx
-            icon: fa-regular fa-grid-2
+            icon: fa-duotone fa-grid-2
           - page: Code Blocks
             path: ./pages/component-library/default-components/code-blocks.mdx
-            icon: fa-regular fa-code
+            icon: fa-duotone fa-code
           - page: Embed
             path: ./pages/component-library/default-components/embed.mdx
-            icon: fa-regular fa-window-restore
+            icon: fa-duotone fa-window-restore
           - page: Endpoint Request Snippet
             path: ./pages/component-library/default-components/endpoint-request-snippet.mdx
-            icon: fa-regular fa-arrow-up
+            icon: fa-duotone fa-arrow-up
             slug: request-snippet
           - page: Endpoint Response Snippet
             path: ./pages/component-library/default-components/endpoint-response-snippet.mdx
-            icon: fa-regular fa-arrow-down
+            icon: fa-duotone fa-arrow-down
             slug: response-snippet
           - page: Endpoint Schema Snippet
             path: ./pages/component-library/default-components/endpoint-schema-snippet.mdx
-            icon: fa-regular fa-sitemap
+            icon: fa-duotone fa-sitemap
             slug: schema-snippet
           - page: Frames
             path: ./pages/component-library/default-components/frames.mdx
-            icon: fa-regular fa-window-maximize
+            icon: fa-duotone fa-window-maximize
           - page: Icons
             path: ./pages/component-library/default-components/icons.mdx
-            icon: fa-regular fa-icons
+            icon: fa-duotone fa-icons
           - page: Parameter Fields
             path: ./pages/component-library/default-components/parameter-fields.mdx
-            icon: fa-regular fa-list
+            icon: fa-duotone fa-list
           - page: Steps
             path: ./pages/component-library/default-components/steps.mdx
-            icon: fa-regular fa-list-ol
+            icon: fa-duotone fa-list-ol
           - page: Tabs
             path: ./pages/component-library/default-components/tabs.mdx
-            icon: fa-regular fa-folder-open
+            icon: fa-duotone fa-folder-open
           - page: Tooltips
             path: ./pages/component-library/default-components/tooltips.mdx
-            icon: fa-regular fa-comment
+            icon: fa-duotone fa-comment
       - page: Visual Editor
         path: ./pages/component-library/writing-content/visual-editor.mdx
       - page: Reusable Markdown

fern/products/docs/pages/getting-started/overview.mdx

@@ -121,4 +121,4 @@ subtitle: A website builder for beautiful agent and developer-friendly docs.
       </div>
     </a>
   </CardGroup> 
-  </div>
+</div>

fern/products/docs/pages/getting-started/project-structure.mdx

@@ -66,7 +66,11 @@ The `assets` folder contains any images or videos used in your documentation. Yo
 
 ## `docs.yml`
 
-The `docs.yml` file is the configuration file that defines the navigation, theme, and hosting details of your documentation. You can customize the appearance and behavior of your documentation by editing this file.
+The `docs.yml` file is the heart of your Fern documentation site. This configuration file controls your documentation's navigation structure, visual design, site functionality, and hosting settings.
+
+The example below shows the `docs.yml` configuration used for this documentation site. Notice how it defines the navigation hierarchy, branding elements, and site behavior in a single, readable file.
+
+For complete configuration options, see the [docs.yml reference](/docs/customization/what-is-docs-yml).
 
 <CodeBlock title="fern/docs.yml of this website">
 ```yml

fern/products/home/pages/welcome.mdx

@@ -159,11 +159,6 @@ import { FernFooter } from "../../../components/FernFooter";
             <img src="./images/arrow-right-black.svg" alt="Arrow right light" className="dark:hidden" noZoom />
             <img src="./images/arrow-right-white.svg" alt="Arrow right light" className="hidden dark:block" noZoom />
           </a>
-          <a className="fern-button minimal normal w-fit gap-1 a-btn" href="/docs/customization/what-is-docs-yml"> 
-            Configure your docs
-            <img src="./images/arrow-right-black.svg" alt="Arrow right light" className="dark:hidden" noZoom />
-            <img src="./images/arrow-right-white.svg" alt="Arrow right light" className="hidden dark:block" noZoom />
-          </a>
           <a className="fern-button minimal normal w-fit gap-1 a-btn" href="/docs/api-references/generate-api-ref">
             Bring your own API spec
             <img src="./images/arrow-right-black.svg" alt="Arrow right light" className="dark:hidden" noZoom />
@@ -174,7 +169,11 @@ import { FernFooter } from "../../../components/FernFooter";
             <img src="./images/arrow-right-black.svg" alt="Arrow right light" className="dark:hidden" noZoom />
             <img src="./images/arrow-right-white.svg" alt="Arrow right light" className="hidden dark:block" noZoom />
           </a>
-          
+          <a className="fern-button minimal normal w-fit gap-1 a-btn" href="/docs/self-hosted/overview"> 
+            Self host your docs
+            <img src="./images/arrow-right-black.svg" alt="Arrow right light" className="dark:hidden" noZoom />
+            <img src="./images/arrow-right-white.svg" alt="Arrow right light" className="hidden dark:block" noZoom />
+          </a>
         </div>
       </div>