cleanup and ready for launch

3 files changed, 85 insertions, 48 deletions

diff --git a/source/library/components/DocExplorer/FieldView.svelte b/source/library/components/DocExplorer/FieldView.svelte
index 71d215c..1cc62ae 100644
--- a/source/library/components/DocExplorer/FieldView.svelte
+++ b/source/library/components/DocExplorer/FieldView.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
-  import TypeLink from "./TypeLink.svelte";
+  /*** IMPORT ------------------------------------------- ***/
   import type { GraphQLField, GraphQLInputField } from "graphql";
 
+  /*** UTILITY ------------------------------------------ ***/
+  import { markdown } from "../../graphql/markdown.ts";
+  import TypeLink from "./TypeLink.svelte";
+
   type Props = {
     field: GraphQLField<unknown, unknown> | GraphQLInputField;
     onNavigate: (typeName: string) => void;
@@ -15,7 +19,7 @@
 <style lang="scss">
   .field {
     display: grid;
-    gap: 0.75rem;
+    gap: 1.5rem;
     padding: 0.75rem 1rem;
   }
 
@@ -24,60 +28,62 @@
     font-weight: 600;
   }
 
+  .section-label,
+  .description,
+  .arg-description {
+    color: var(--uchu-yin-6);
+  }
+
   .section-label {
-    color: var(--graphiql-muted, #858585);
     font-size: 0.7rem;
-    letter-spacing: 0.05em;
+    letter-spacing: 0.05rem;
     margin-bottom: 0.25rem;
     text-transform: uppercase;
   }
 
   .description {
-    color: var(--graphiql-muted, #858585);
-    font-size: 0.8125rem;
+    font-size: 0.8rem;
     line-height: 1.4;
   }
 
   .args {
     display: grid;
-    gap: 0.375rem;
+    gap: 1.5rem;
   }
 
   .arg {
-    font-size: 0.8125rem;
-  }
+    font-size: 0.8rem;
 
-  .arg-name {
-    color: var(--graphiql-fg, #d4d4d4);
-  }
-
-  .arg-description {
-    color: var(--graphiql-muted, #858585);
-    font-size: 0.75rem;
-    margin-left: 1rem;
-    margin-top: 0.125rem;
+    &-description {
+      font-size: 0.7rem;
+      margin-left: 1rem;
+      margin-top: 0.125rem;
+    }
   }
 </style>
 
 <div class="field">
   <div class="heading">{field.name}</div>
   {#if field.description}
-    <div class="description">{field.description}</div>
+    <div class="description">{@html markdown(field.description)}</div>
   {/if}
+
   <div>
     <div class="section-label">Type</div>
     <TypeLink {onNavigate} type={field.type}/>
   </div>
+
   {#if args.length > 0}
     <div>
       <div class="section-label">Arguments</div>
+
       <div class="args">
         {#each args as arg}
           <div class="arg">
             <span class="arg-name">{arg.name}</span>:
             <TypeLink {onNavigate} type={arg.type}/>
             {#if arg.description}
-              <div class="arg-description">{arg.description}</div>
+              <div class="arg-description">{@html markdown(arg.description)}</div>
             {/if}
           </div>
         {/each}
diff --git a/source/library/components/DocExplorer/TypeLink.svelte b/source/library/components/DocExplorer/TypeLink.svelte
index 253d16e..03f5c1e 100644
--- a/source/library/components/DocExplorer/TypeLink.svelte
+++ b/source/library/components/DocExplorer/TypeLink.svelte
@@ -1,7 +1,13 @@
 <script lang="ts">
-  import { getNamedType, isListType, isNonNullType } from "graphql";
-  import type { GraphQLType } from "graphql";
-
+  /*** IMPORT ------------------------------------------- ***/
+  import {
+    getNamedType,
+    isListType,
+    isNonNullType,
+    type GraphQLType
+  } from "graphql";
+
+  /*** UTILITY ------------------------------------------ ***/
   type Props = {
     onNavigate: (typeName: string) => void;
     type: GraphQLType;
@@ -27,13 +33,13 @@
   .link {
     background: none;
     border: none;
-    color: var(--graphiql-link, #79b8ff);
+    color: var(--uchu-blue-3);
     cursor: pointer;
     font-family: inherit;
     font-size: inherit;
     padding: 0;
 
-    &:hover {
+    &:not(:hover) {
       text-decoration: underline;
     }
   }
diff --git a/source/library/components/DocExplorer/TypeView.svelte b/source/library/components/DocExplorer/TypeView.svelte
index 31a1ca3..c1978d6 100644
--- a/source/library/components/DocExplorer/TypeView.svelte
+++ b/source/library/components/DocExplorer/TypeView.svelte
@@ -1,14 +1,18 @@
 <script lang="ts">
-  import TypeLink from "./TypeLink.svelte";
+  /*** IMPORT ------------------------------------------- ***/
   import {
     isEnumType,
     isInputObjectType,
     isInterfaceType,
     isObjectType,
     isScalarType,
-    isUnionType
+    isUnionType,
+    type GraphQLNamedType
   } from "graphql";
-  import type { GraphQLNamedType } from "graphql";
+
+  /*** UTILITY ------------------------------------------ ***/
+  import { markdown } from "../../graphql/markdown.ts";
+  import TypeLink from "./TypeLink.svelte";
 
   type Props = {
     onNavigateField: (fieldName: string) => void;
@@ -72,7 +76,7 @@
 <style lang="scss">
   .type {
     display: grid;
-    gap: 0.75rem;
+    gap: 1.5rem;
     padding: 0.75rem 1rem;
   }
 
@@ -81,67 +85,80 @@
     font-weight: 600;
   }
 
+  .kind,
+  .description,
+  .entry-description {
+    color: var(--uchu-yin-6);
+  }
+
   .kind {
-    color: var(--graphiql-muted, #858585);
     font-weight: normal;
     margin-right: 0.375rem;
   }
 
   .description {
-    color: var(--graphiql-muted, #858585);
-    font-size: 0.8125rem;
+    font-size: 0.8rem;
     line-height: 1.4;
+
+    :global(a) {
+      background-color: oklch(var(--uchu-blue-1-raw) / 25%);
+      color: var(--uchu-blue-4);
+    }
+
+    :global(code) {
+      background-color: var(--uchu-yellow-1);
+    }
   }
 
   .section-label {
-    color: var(--graphiql-muted, #858585);
     font-size: 0.7rem;
-    letter-spacing: 0.05em;
+    letter-spacing: 0.05rem;
     margin-bottom: 0.25rem;
     text-transform: uppercase;
   }
 
   .list {
     display: grid;
-    gap: 0.375rem;
+    gap: 1.5rem;
   }
 
   .entry {
-    font-size: 0.8125rem;
+    font-size: 0.8rem;
+
+    &-description {
+      font-size: 0.7rem;
+      margin-left: 1rem;
+      margin-top: 0.125rem;
+    }
   }
 
   .field-button {
     background: none;
     border: none;
-    color: var(--graphiql-fg, #d4d4d4);
     cursor: pointer;
     font-family: inherit;
     font-size: inherit;
     padding: 0;
 
-    &:hover {
+    &:not(:hover) {
       text-decoration: underline;
     }
   }
-
-  .entry-description {
-    color: var(--graphiql-muted, #858585);
-    font-size: 0.75rem;
-    margin-left: 1rem;
-    margin-top: 0.125rem;
-  }
 </style>
 
 <div class="type">
   <div class="heading">
     {#if kindLabel}<span class="kind">{kindLabel}</span>{/if}{type.name}
   </div>
+
   {#if type.description}
-    <div class="description">{type.description}</div>
+    <div class="description">{@html markdown(type.description)}</div>
   {/if}
+
   {#if interfaces.length > 0}
     <div>
       <div class="section-label">Implements</div>
+
       <div class="list">
         {#each interfaces as iface}
           <div class="entry">
@@ -151,9 +168,11 @@
       </div>
     </div>
   {/if}
+
   {#if fields.length > 0}
     <div>
       <div class="section-label">Fields</div>
+
       <div class="list">
         {#each fields as field}
           <div class="entry">
@@ -161,17 +180,20 @@
               class="field-button"
               onclick={() => onNavigateField(field.name)}>{field.name}</button>:
             <TypeLink onNavigate={onNavigateType} type={field.type}/>
+
             {#if field.description}
-              <div class="entry-description">{field.description}</div>
+              <div class="entry-description">{@html markdown(field.description)}</div>
             {/if}
           </div>
         {/each}
       </div>
     </div>
   {/if}
+
   {#if unionMembers.length > 0}
     <div>
       <div class="section-label">Members</div>
+
       <div class="list">
         {#each unionMembers as member}
           <div class="entry">
@@ -181,15 +203,18 @@
       </div>
     </div>
   {/if}
+
   {#if enumValues.length > 0}
     <div>
       <div class="section-label">Values</div>
+
       <div class="list">
         {#each enumValues as value}
           <div class="entry">
             <span>{value.name}</span>
+
             {#if value.description}
-              <div class="entry-description">{value.description}</div>
+              <div class="entry-description">{@html markdown(value.description)}</div>
             {/if}
           </div>
         {/each}