Documentation

You can create a new documentation by clicking on the "New Documentation +" button on the top left

image.png

Let's go over all the options:

  • Enable Authentication: This would mean that for viewing a documentation they would need to be logged in with the "Read" rights set for that particular user.
  • Version: The first version number/name for this documentation
  • Description: A brief description for this documentation, this will also show up in the meta tag and also the landing page (if you decide to turn it on)
  • Custom CSS: Now this is a bit tricky! RsPress has very customizable frontend CSS code. For example this is the custom css code we use for the documentation:
.rspress-home-hero-image img {
  @apply kal-rounded-md;
  transform: scale(1.5);
  transform-origin: center center;
}

.rspress-logo {
  height: 2.4rem;
}


:root {
  --rp-nav-height: 72px;
  --rp-sidebar-width: 320px;
  --rp-aside-width: 268px;
}

:root {
  --rp-c-bg: #ffffff; /* Main Background color */
  --rp-c-bg-soft: #f9f9f9; /* Features div background color*/
  --rp-c-bg-mute: #f1f1f1; /*Navbar/Sidebar active & hover background color */

  --rp-c-divider: rgba(60, 60, 60, 0.29);
  --rp-c-divider-light: rgba(60, 60, 60, 0.1);

  --rp-c-text-1: #213547; /* Tile description ,Learn more button ,Navbar ,Doc content ,Sidebar:hover text color  */
  --rp-c-text-2: #031159; /* Feature description, Navbar icons, Serach placeholder, Sidebar text color */
  --rp-c-text-3: rgba(60, 60, 60, 0.33);
  --rp-c-text-4: rgba(60, 60, 60, 0.18);

  --rp-c-text-code: #476573;
  --rp-c-text-code-bg: rgb(153 161 179/ 0.1);

  --rp-c-brand: #031159; /* Title, border ,doc content #(symbol) , active version color*/
  --rp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--rp-c-brand) 30%, #aebbfc); /*title starting gradient color*/
  --rp-home-mask-background-image: conic-gradient(from 180deg at 50% 50%, var(--rp-c-brand) 0deg, 180deg, #8295fb 1turn); /*image gradient end color*/
  --rp-c-brand-light: #031159;/*Get started button starting gradient color */
  --rp-c-brand-lighter: #66c2ff;
  --rp-c-brand-dark: #031159; /*Get started button ending bg gradient color , Active Navbar & Sidebar text color */
  --rp-c-brand-darker: #005fcc; 
  --rp-c-brand-tint: rgba(127, 163, 255, 0.16);

  --rp-c-gray: #8e8e8e; /* Search icon color, (ctrl k) text in search color) */
  --rp-c-gray-light-1: #aeaeae;
  --rp-c-gray-light-2: #c7c7c7;
  --rp-c-gray-light-3: #d1d1d1; /*Learn More button border color */
  --rp-c-gray-light-4: #e5e5e5; /*Learn More hover bg color*/
  --rp-c-gray-light-5: #f2f2f2; /*Learn More button bg color*/

  --rp-c-dark: #000000;
  --rp-c-dark-light-1: #2f2f2f;
  --rp-c-dark-light-2: #3a3a3a;
  --rp-c-dark-light-3: #4a4a4a;
  --rp-c-dark-light-4: #5c5c5c;
  --rp-c-dark-light-5: #6b6b6b;

  --rp-radius: 1rem;
  --rp-radius-small: 0.5rem;
  --rp-radius-large: 1.5rem;

  --rp-c-link: var(--rp-c-brand-dark);
}

/* Dark mode */
.dark {
  --rp-c-bg: #23272f; /* Background color */
  --rp-c-bg-soft: #292e37; /* Features div background color*/
  --rp-c-bg-mute: #343a46; /*Navbar/Sidebar active & hover background color */
  --rp-c-bg-alt: #000;

  --rp-c-divider: rgba(84, 84, 84, 0.65);
  --rp-c-divider-light: rgba(84, 84, 84, 0.48);

  --rp-c-brand: #7188fa;  /* Title, border ,doc content #(symbol) , active version color*/
  --rp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--rp-c-brand) 30%, #ffffff); /*Title starting gradient color*/ /* changed */
  --rp-home-mask-background-image: conic-gradient(from 180deg at 50% 50%, var(--rp-c-brand) 0deg, 180deg, #8295fb 1turn); /*Image gradient end color*/ /* changed */
  --rp-c-brand-light: #7188fa; /*Get started button starting gradient color */
  --rp-c-brand-lighter: #66c2ff;
  --rp-c-brand-dark: #7188fa; /*Get started button ending bg gradient color , Active Navbar & Sidebar text color */
  --rp-c-brand-darker: #005fcc;
  --rp-c-brand-tint: #313238; 

  --rp-c-text-1: rgba(255, 255, 255, 0.87);
  --rp-c-text-2: rgba(235, 235, 235, 0.56);
  --rp-c-text-3: rgba(235, 235, 235, 0.38);
  --rp-c-text-4: rgba(235, 235, 235, 0.18);

  /* Will be used in overview page */
  --rp-c-text-code: #c9def1;

  --rp-c-link: var(--rp-c-brand-light);
}

:root {
  --rp-z-index-local-nav: 10;
  --rp-z-index-nav: 20;
  --rp-z-index-backdrop: 30;
  --rp-z-index-sidebar: 40;
}

:root {
  --rp-shadow-1: 0 1px 4px rgba(0, 0, 0, 0.02), 0 1px 0 rgba(0, 0, 0, 0.06);
  --rp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
  --rp-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
  --rp-shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
  --rp-shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
}

You could use that as your starting point and build out from there.

  • Favicon: A link to the favicon icon for the documentation.
  • Navbar Logos: This is what shows up on the top left corner of the documentation.
  • Copyright Text: This show up on the bottom of the documentation's landing page (if enabled).
  • Social Card Image: A link to an image that needs to show up in the meta tags (open graph)
  • Organization Name: For meta tags mostly.
  • Project Name: Also used in meta tags mostly.
  • Documentation Base URL: This is probably the most important aspect in this entire page. This determines what the URL of your documentation will look like! In our deployed sites, we have and https://kalmia.difuse.io/doc, in those cases /dmsbg-100 and /doc respectively are the base URLs.
  • URL: A link that leads to this documentation, mostly used for meta purposes.