fix: cert instructions (#317)

* fix: update the cert install steps

- Add some extra clarity about the uniqueness of the CA cert
- List the simpler CLI method first for macOS
- Clarify version differences for Keychain Access behavior
- Correct the Linux steps (VS Code uses nssdb, not the system certs)

* fix: update the cert install steps

- Add some extra clarity about the uniqueness of the CA cert
- List the simpler CLI method first for macOS
- Clarify version differences for Keychain Access behavior
- Correct the Linux steps (VS Code uses nssdb, not the system certs)

* feat: use markdown for certificate instructions

* Merge branch 'main' of github.com:stacklok/codegate-ui into fix-cert-instructions

* tidy up certificate documentation markdown

* chore: tidy ups

* fix tests

---------

Co-authored-by: Dan Barr <dan@stacklok.com>

package.json

@@ -98,6 +98,7 @@
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.15.0",
     "vite": "^6.0.1",
+    "vite-plugin-markdown": "^2.2.0",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.0.5",
     "vitest-fail-on-console": "^0.7.1"

src/components/Markdown.tsx

@@ -122,13 +122,13 @@ function Code({
 const markdownStyles = tv({
   base: [
     'prose',
+    'prose-sm prose-code:text-sm',
     'prose-h1:mb-2 prose-h1:text-lg prose-h1:font-semibold',
     'prose-h2:mb-2 prose-h2:text-lg prose-h2:font-semibold',
     'prose-h3:mb-2 prose-h3:text-lg prose-h3:font-semibold',
     'prose-h4:mb-2 prose-h4:text-lg prose-h4:font-semibold',
     'prose-h5:mb-2 prose-h5:text-lg prose-h5:font-semibold',
     'prose-h6:mb-2 prose-h6:text-lg prose-h6:font-semibold',
-    'prose-p:text-base',
     'prose max-w-none prose-p:leading-relaxed',
     '[--tw-prose-pre-code:theme(textColor.secondary)]',
     '[--tw-prose-pre-bg:theme(colors.gray.200)]',

src/components/heading.tsx

@@ -13,7 +13,7 @@ export function PageHeading({
   return (
     <UIKitHeading
       level={level}
-      className="mb-4 flex items-center justify-between text-2xl font-bold"
+      className="mb-4 flex items-center justify-between text-2xl font-bold text-primary"
     >
       {title}
       {children}

src/components/page-container.tsx

@@ -1,8 +1,17 @@
 import { ReactNode } from 'react'
+import { twMerge } from 'tailwind-merge'
 
-export function PageContainer({ children }: { children: ReactNode }) {
+export function PageContainer({
+  children,
+  className,
+}: {
+  children: ReactNode
+  className?: string
+}) {
   return (
-    <section className="mx-auto max-w-[1440px] flex-col p-6">
+    <section
+      className={twMerge('mx-auto max-w-[1440px] flex-col p-6', className)}
+    >
       {children}
     </section>
   )