feat: continue to work on site

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
   "typescript.tsdk": "node_modules\\typescript\\lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
-  "cSpell.words": ["markdoc"]
+  "cSpell.words": ["markdoc", "Onpsring"]
 }

src/app/components/Code.module.css

@@ -16,6 +16,71 @@
   font-size: 0.8rem;
 }
 
-.snippetContent {
+.snippetContent>pre {
-  padding: 0.5rem 1rem;
+  overflow: auto;
+  padding: 1rem;
+  scrollbar-color: #043160 #0b3766;
+}
+
+.snippetContent>pre::-webkit-scrollbar {
+  background-color: #0b3766;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+}
+
+.snippetContent>pre::-webkit-scrollbar-thumb {
+  background-color: #043160;
+  border-radius: 10px;
+}
+
+@-moz-document url-prefix() {
+  .snippetContent>pre {
+    margin-right: 1rem;
+  }
+}
+
+.copyButtonContainer {
+  position: relative;
+}
+
+.copyButton {
+  background-color: #194488;
+  border: none;
+  color: white;
+  border-radius: 5px;
+  font-size: 0.8rem;
+  cursor: pointer;
+}
+
+.copyButton:hover {
+  color: #ee7203;
+}
+
+.tooltip {
+  position: absolute;
+  display: block;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -175%);
+  white-space: nowrap;
+  background-color: #0b3766;
+  padding: 0.5rem;
+  z-index: 100;
+  box-shadow: 0 0 2px 0.2px #05254a;
+  border-radius: 0.25rem;
+  width: 100px;
+  text-align: center;
+}
+
+.tooltip::before {
+  content: "";
+  position: absolute;
+  border: 0.5rem solid transparent;
+  border-top: 0.5rem solid #0b3766;
+  top: 100%;
+  left: 2.55rem;
+}
+
+.tooltipHidden {
+  display: none;
 }

src/app/components/Code.tsx

@@ -1,14 +1,54 @@
+'use client';
+
+import { MouseEvent, useState } from 'react';
 import styles from './Code.module.css';
 
 function CodeCopyButton() {
+  const [copyButtonTooltip, setCopyButtonTooltip] =
+    useState<boolean>(false);
+
+  const [showTooltip, setShowTooltip] =
+    useState<boolean>(false);
+
+  const handleCopy = (e: MouseEvent<HTMLButtonElement>) => {
+    setCopyButtonTooltip(true);
+    setTimeout(() => {
+      setCopyButtonTooltip(false);
+    }, 1000);
+
+    const target = e.currentTarget;
+    const code =
+      target.parentElement?.parentElement?.parentElement?.querySelector(
+        'pre'
+      )?.innerText ?? '';
+
+    navigator.clipboard.writeText(code);
+  };
+
   return (
-    <button>
+    <div className={styles.copyButtonContainer}>
+      <div>
+        <div
+          className={
+            showTooltip
+              ? styles.tooltip
+              : styles.tooltipHidden
+          }
+        >
+          {copyButtonTooltip ? 'Copied!' : 'Click to Copy'}
+        </div>
+      </div>
+      <button
+        className={styles.copyButton}
+        onClick={handleCopy}
+        onMouseEnter={() => setShowTooltip(true)}
+        onMouseLeave={() => setShowTooltip(false)}
+      >
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="16"
           height="16"
           fill="currentColor"
-        className="bi bi-clipboard-fill"
           viewBox="0 0 16 16"
         >
           <path
@@ -17,6 +57,7 @@ function CodeCopyButton() {
           />
         </svg>
       </button>
+    </div>
   );
 }
 
@@ -35,9 +76,9 @@ export default function Code({
         <div>{heading}</div>
         <CodeCopyButton />
       </div>
-      <pre className={styles.snippetContent}>
+      <div className={styles.snippetContent}>
-        <code className={styles.code}>{children}</code>
+        {children}
-      </pre>
+      </div>
     </div>
   );
 }

src/app/components/Section.module.css

@@ -3,8 +3,9 @@
   align-items: flex-start;
   width: 100%;
   gap: 2rem;
-  border-bottom: 1px solid #848586;
   padding: 5rem;
+  max-width: 1450px;
+
 }
 
 @media screen and (max-width: 1000px) {
@@ -12,16 +13,25 @@
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
+    padding: 2.5rem;
     gap: 1rem;
   }
 }
 
 .container>article {
   flex: 1;
+  min-width: 0;
   width: 100%;
+  max-width: 600px;
 }
 
 .container>article>p {
   margin-top: 20px;
   color: #c1c9d2
 }
+
+.container>article>p>code {
+  background-color: #0b3766;
+  padding: 0.2rem 0.5rem;
+  border-radius: 5px;
+}

src/app/layout.tsx

@@ -8,6 +8,14 @@ import './globals.css';
 export const metadata = {
   title: 'Onspring API Docs',
   description: 'Documentation for the Onspring API',
+  icons: {
+    icon: [
+      {
+        url: 'images/favicon.ico',
+        type: 'image/x-icon',
+      },
+    ],
+  },
 };
 
 export default function RootLayout({

src/app/page.module.css

@@ -1,8 +1,15 @@
 .container {
-  max-width: 1450px;
   display: flex;
   width: 100%;
   flex-direction: column;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
+  margin: 0 auto;
+  overflow-y: auto;
+}
+
+.divider {
+  width: 100%;
+  height: 1px;
+  background-color: #848586;
 }

src/app/page.tsx

@@ -12,10 +12,13 @@ export default function Home() {
   return (
     <main className={styles.container}>
       {versionTwoSections.map(section => (
+        <>
           <Section key={section.title}>
             {section.copy}
             {section.example}
           </Section>
+          <div className={styles.divider}>&nbsp;</div>
+        </>
       ))}
     </main>
   );

src/docs/version_002/authentication/copy.md

@@ -1,3 +1,9 @@
 # Authentication
 
-This is the copy for the authentication page.
+The Onpsring API uses API keys to authenticate requests. You can view and manage your API keys your instance.
+
+The API key needs to be provided in every request. This is done by adding the `X-ApiKey` header to the request.
+
+API Keys are specific to an instance. If you are using the API to access data from multiple instances, you will need to create an API key for each instance. The API key must be in an `Enabled` status and it must be assigned a role that will control the permissions for requests made by the API key. The role assigned should be in an `Active` status.
+
+If the role assigned to the API key does not have sufficient permissions to perform the requested action, an error will be returned. Onspring administrators may configure roles for API keys just as they would any other role in Onspring. However each API key can have only one assigned role.

src/docs/version_002/authentication/example.md

@@ -1,3 +1,9 @@
-# Example
+# X-ApiKey Header
 
-This is an example for the authentication page.
+{% code heading="X-API KEY" language="text" %}
+
+```text
+X-ApiKey: 000000ffffff000000ffffff/00000000-ffff-0000-ffff-000000000000
+```
+
+{% /code %}

src/docs/version_002/introduction/copy.md

@@ -2,4 +2,4 @@
 
 The Onspring API is organized around REST. It enables external programs to retrieve, save, and delete data within your Onspring instance. The Onspring API implements version 3 of the Open API Specification (OAS).
 
-The Onspring API does support bulk operation for some, but not all endpoints. Bulk operations are not supported for endpoints that create, update, or delete data. The one exception is the bulk delete endpoint, which is used to delete multiple records at once.
+The Onspring API does support bulk operation for some, but not all endpoints. Bulk operations are not supported for endpoints that create, update, or delete resources. The one exception is the batch delete endpoint for records, which is used to delete multiple records at once.