aboutsummaryrefslogtreecommitdiff
path: root/source/library/components/DocExplorer
diff options
context:
space:
mode:
Diffstat (limited to 'source/library/components/DocExplorer')
-rw-r--r--source/library/components/DocExplorer/FieldView.svelte46
-rw-r--r--source/library/components/DocExplorer/TypeLink.svelte16
-rw-r--r--source/library/components/DocExplorer/TypeView.svelte71
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}