@scalar/api-reference 0.5.0 → 0.5.1

package/dist/types.d.ts

@@ -42,15 +42,17 @@ export type Operation = {
     description: string;
     information: Information;
 };
+export type ExampleResponseHeaders = Record<string, {
+    description: string;
+    schema: {
+        type: string;
+        format?: string;
+        example?: string;
+    };
+}>;
 export type TransformedOperation = Operation & {
     responses: Record<string, Response & {
-        headers: Record<string, {
-            description: string;
-            schema: {
-                type: string;
-                format?: string;
-            };
-        }>;
+        headers: ExampleResponseHeaders;
     }>;
 };
 export type Tag = {

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -11,7 +11,7 @@
     "documentation",
     "component"
   ],
-  "version": "0.5.0",
+  "version": "0.5.1",
   "author": "Scalar (https://github.com/scalar)",
   "homepage": "https://github.com/scalar/scalar",
   "repository": {
@@ -51,6 +51,7 @@
     "rehype-format": "4.0.1",
     "rehype-sanitize": "5.0.1",
     "rehype-stringify": "9.0.3",
+    "remark-breaks": "^3.0.3",
     "remark-gfm": "3.0.1",
     "remark-parse": "10.0.2",
     "remark-rehype": "10.1.0",
@@ -58,10 +59,10 @@
     "typographic-base": "1.0.4",
     "unified": "10.1.2",
     "xmldom": "0.6.0",
-    "@scalar/api-client": "0.5.0",
+    "@scalar/api-client": "0.5.1",
     "@scalar/default-theme": "0.2.1",
-    "@scalar/swagger-editor": "0.5.0",
-    "@scalar/swagger-parser": "0.4.1",
+    "@scalar/swagger-editor": "0.5.1",
+    "@scalar/swagger-parser": "0.4.2",
     "@scalar/use-clipboard": "0.4.1",
     "@scalar/use-codemirror": "0.5.0",
     "@scalar/use-keyboard-event": "0.4.1",

package/src/components/Content/Introduction/BaseUrl.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { useClipboard } from '@scalar/use-clipboard'
+import { computed } from 'vue'
 
-defineProps<{
+const props = defineProps<{
   server?: {
     url: string
     description?: string
@@ -9,23 +10,39 @@ defineProps<{
 }>()
 
 const { copyToClipboard } = useClipboard()
+
+const formattedServerUrl = computed(() => {
+  const url = props.server?.url ?? ''
+  const urlWithoutHtml = url.replace(/(<([^>]+)>)/gi, '')
+
+  /* Replace all variables (example: {{ baseurl }} with an HTML tag) */
+  return urlWithoutHtml.replace(
+    /{{\s*([\w.-]+)\s*}}/g,
+    '<span class="base-url-variable">{{ $1 }}</span>',
+  )
+})
 </script>
 <template>
   <template v-if="server">
     <a
       class="base-url"
       :title="server.description"
-      @click="copyToClipboard(server.url)">
-      {{ server.url }}
-    </a>
+      @click="copyToClipboard(server.url)"
+      v-html="formattedServerUrl" />
   </template>
 </template>
+
+<style>
+.base-url-variable {
+  color: var(--theme-color-disabled);
+}
+</style>
+
 <style scoped>
 .base-url {
   color: var(--theme-color-2);
   font-size: var(--theme-mini);
   cursor: pointer;
-  display: flex;
   font-family: var(--theme-font-code);
   flex-direction: column;
 }

package/src/components/Content/MarkdownRenderer.vue

@@ -3,6 +3,7 @@ import rehypeDocument from 'rehype-document'
 import rehypeFormat from 'rehype-format'
 import rehypeSanitize, { defaultSchema } from 'rehype-sanitize'
 import rehypeStringify from 'rehype-stringify'
+import remarkBreaks from 'remark-breaks'
 import remarkGfm from 'remark-gfm'
 import remarkParse from 'remark-parse'
 import remarkRehype from 'remark-rehype'
@@ -20,6 +21,7 @@ watch(
   () => {
     unified()
       .use(remarkParse)
+      .use(remarkBreaks)
       .use(remarkGfm)
       .use(remarkRehype)
       .use(remarkTextr, { plugins: [typographicBase] })
@@ -59,6 +61,7 @@ watch(
 .markdown :deep(h6) {
   font-size: var(--font-size);
   margin: 12px 0 6px;
+  font-weight: var(--theme-bold);
 }
 
 .markdown :deep(p) {
@@ -123,7 +126,7 @@ watch(
   border-collapse: collapse;
   table-layout: fixed;
   width: 100%;
-  margin: 0;
+  margin: 1em 0;
   overflow: hidden;
   box-shadow: 0 0 0 1px var(--theme-border-color);
   border-radius: var(--theme-radius-lg);
@@ -149,7 +152,7 @@ watch(
   margin-top: 4px;
   font-size: var(--theme-small);
   color: var(--theme-color-2);
-  line-height: initial;
+  line-height: 1.4;
 }
 .markdown :deep(td:first-of-type),
 .markdown :deep(th:first-of-type) {

package/src/components/Content/ReferenceEndpoint/Copy.vue

@@ -9,6 +9,7 @@ import { computed, onMounted, ref } from 'vue'
 
 import { useTemplateStore } from '../../../stores/template'
 import type { Tag } from '../../../types'
+import MarkdownRenderer from '../MarkdownRenderer.vue'
 import Parameters from './Parameters.vue'
 import RequestBody from './RequestBody.vue'
 
@@ -72,7 +73,7 @@ onMounted(() => {
     </div>
     <div>
       <p class="tag-description">
-        {{ operation.description }}
+        <MarkdownRenderer :value="operation.description" />
       </p>
     </div>
     <Parameters

package/src/components/Content/ReferenceEndpoint/ExampleRequest.vue

@@ -55,26 +55,39 @@ async function generateSnippet() {
   if (pathVariables) {
     pathVariables.forEach((variable) => {
       const variableName = variable.replace(/{|}/g, '')
-      path = path.replace(variable, variableName.toUpperCase())
+      path = path.replace(variable, `__${variableName.toUpperCase()}__`)
+    })
+  }
+
+  let url = props.server.url
+
+  // Replace all variables of the format {something} with the uppercase variable name without the brackets
+  const urlVariables = url.match(/{{(.*?)}}/g)
+
+  if (urlVariables) {
+    console.log(urlVariables)
+    urlVariables.forEach((variable) => {
+      const variableName = variable.replace(/{|}/g, '')
+      url = url.replace(variable, `__${variableName}__`)
     })
   }
 
   if (templateState.preferredLanguage === 'axios') {
     return generateAxiosCodeFromRequest({
       method: props.operation.httpVerb.toUpperCase(),
-      url: `${props.server.url}${path}`,
+      url: `${url}${path}`,
     })
   } else if (templateState.preferredLanguage === 'laravel') {
     return generateLaravelCodeFromRequest({
       method: props.operation.httpVerb.toUpperCase(),
-      url: `${props.server.url}${path}`,
+      url: `${url}${path}`,
     })
   }
 
   try {
     const snippet = new HTTPSnippet({
       method: props.operation.httpVerb.toUpperCase(),
-      url: `${props.server.url}${path}`,
+      url: `${url}${path}`,
     } as HarRequest)
     const output = (await snippet.convert(
       templateState.preferredLanguage as TargetId,

package/src/components/Content/ReferenceEndpoint/{ExampleResponses.vue → ExampleResponses/ExampleResponses.vue}

@@ -1,24 +1,19 @@
 <script lang="ts" setup>
-import { type HttpHeader, httpHeaders } from '@scalar/api-client'
 import { useClipboard } from '@scalar/use-clipboard'
 import { CodeMirror } from '@scalar/use-codemirror'
 import { computed, ref } from 'vue'
 
-import type { TransformedOperation } from '../../../types'
+import type { TransformedOperation } from '../../../../types'
 import {
   Card,
   CardContent,
   CardFooter,
   CardTab,
   CardTabHeader,
-} from '../../Card'
-import { Icon } from '../../Icon'
-import {
-  SimpleCell,
-  SimpleHeader,
-  SimpleRow,
-  SimpleTable,
-} from '../../SimpleTable'
+} from '../../../Card'
+import { Icon } from '../../../Icon'
+import Headers from './Headers.vue'
+import SelectExample from './SelectExample.vue'
 
 const props = defineProps<{ operation: TransformedOperation }>()
 
@@ -46,29 +41,24 @@ const currentResponse = computed(() => {
   return props.operation.responses?.[currentStatusCode]
 })
 
-const currentResponseJsonBody = computed(() => {
-  return currentResponse.value?.content?.['application/json']?.body
+const currentResponseExamples = computed(() => {
+  const examples =
+    currentResponse.value?.content?.['application/json']?.examples
+
+  if (examples) {
+    return JSON.parse(examples)
+  }
+
+  return false
+})
+
+const currentResponseExample = computed(() => {
+  return currentResponse.value?.content?.['application/json']?.example
 })
 
 const changeTab = (index: number) => {
   selectedResponseIndex.value = index
 }
-
-const getDocumentationUrlForHttpHeader = (headerName: string) => {
-  return httpHeaders.find((header: HttpHeader) => {
-    return header.name.toLowerCase() === headerName.toLowerCase()
-  })?.url
-}
-
-// Make the first letter and all letters after a - uppercase
-const formatHeaderName = (headerName: string) => {
-  return headerName
-    .split('-')
-    .map((word) => {
-      return word.charAt(0).toUpperCase() + word.slice(1)
-    })
-    .join('-')
-}
 </script>
 <template>
   <Card v-if="orderedStatusCodes.length">
@@ -83,10 +73,10 @@ const formatHeaderName = (headerName: string) => {
 
       <template #actions>
         <button
-          v-if="currentResponseJsonBody"
+          v-if="currentResponseExample"
           class="code-copy"
           type="button"
-          @click="() => copyToClipboard(currentResponseJsonBody)">
+          @click="() => copyToClipboard(currentResponseExample)">
           <Icon
             src="solid/interface-copy-clipboard"
             width="10px" />
@@ -96,35 +86,24 @@ const formatHeaderName = (headerName: string) => {
     <CardContent
       v-if="currentResponse.headers"
       muted>
-      <SimpleTable>
-        <SimpleRow>
-          <SimpleHeader>Header</SimpleHeader>
-          <SimpleHeader>Description</SimpleHeader>
-        </SimpleRow>
-        <SimpleRow
-          v-for="(data, header) in currentResponse.headers"
-          :key="header">
-          <SimpleCell
-            :href="getDocumentationUrlForHttpHeader(header)"
-            :strong="true"
-            :wrap="false">
-            {{ formatHeaderName(header) }}
-          </SimpleCell>
-          <SimpleCell>{{ data.description }}</SimpleCell>
-        </SimpleRow>
-      </SimpleTable>
+      <Headers :headers="currentResponse.headers" />
     </CardContent>
     <CardContent muted>
-      <CodeMirror
-        v-show="currentResponseJsonBody"
-        :content="currentResponseJsonBody"
-        :languages="['json']"
-        readOnly />
-      <div
-        v-if="!currentResponseJsonBody"
-        class="scalar-api-reference__empty-state">
-        No Body
-      </div>
+      <template v-if="currentResponseExamples">
+        <SelectExample :examples="currentResponseExamples" />
+      </template>
+      <template v-else>
+        <CodeMirror
+          v-show="currentResponseExample"
+          :content="currentResponseExample"
+          :languages="['json']"
+          readOnly />
+        <div
+          v-if="!currentResponseExample"
+          class="scalar-api-reference__empty-state">
+          No Body
+        </div>
+      </template>
     </CardContent>
     <CardFooter
       v-if="currentResponse?.description"
@@ -166,4 +145,24 @@ const formatHeaderName = (headerName: string) => {
   padding: 20px;
   color: var(--theme-color-2);
 }
+
+.schema-type {
+  font-size: var(--theme-micro);
+  color: var(--theme-color-2);
+  font-weight: var(--theme-semibold);
+  background: var(--theme-background-3);
+  padding: 2px 4px;
+  border-radius: 4px;
+  margin-right: 4px;
+}
+.schema-example {
+  font-size: var(--theme-micro);
+  color: var(--theme-color-2);
+  font-weight: var(--theme-semibold);
+}
+
+.example-response-tab {
+  display: block;
+  margin: 6px;
+}
 </style>

package/src/components/Content/ReferenceEndpoint/ExampleResponses/Headers.vue

@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import { type HttpHeader, httpHeaders } from '@scalar/api-client'
+import { computed } from 'vue'
+
+import { mapFromObject } from '../../../../helpers'
+import type { ExampleResponseHeaders } from '../../../../types'
+import {
+  SimpleCell,
+  SimpleHeader,
+  SimpleRow,
+  SimpleTable,
+} from '../../../SimpleTable'
+
+const props = defineProps<{
+  headers: ExampleResponseHeaders
+}>()
+
+const getDocumentationUrlForHttpHeader = (headerName: string) => {
+  return httpHeaders.find((header: HttpHeader) => {
+    return header.name.toLowerCase() === headerName.toLowerCase()
+  })?.url
+}
+
+// Make the first letter and all letters after a - uppercase
+const formatHeaderName = (headerName: string) => {
+  return headerName
+    .split('-')
+    .map((word) => {
+      return word.charAt(0).toUpperCase() + word.slice(1)
+    })
+    .join('-')
+}
+
+const headersHaveDescription = computed(() => {
+  const headers = mapFromObject(props.headers)
+
+  return headers.some((header: any) => {
+    return header.value.description
+  })
+})
+
+const headersHaveSchema = computed(() => {
+  const headers = mapFromObject(props.headers)
+
+  return headers.some((header: any) => {
+    return header.value.schema
+  })
+})
+</script>
+
+<template>
+  <SimpleTable>
+    <SimpleRow>
+      <SimpleHeader>Header</SimpleHeader>
+      <SimpleHeader v-if="headersHaveDescription">Description</SimpleHeader>
+      <SimpleHeader v-if="headersHaveSchema">Value</SimpleHeader>
+    </SimpleRow>
+    <SimpleRow
+      v-for="(data, header) in headers"
+      :key="header">
+      <SimpleCell
+        :href="getDocumentationUrlForHttpHeader(header)"
+        :strong="true"
+        :wrap="false">
+        {{ formatHeaderName(header) }}
+      </SimpleCell>
+      <SimpleCell v-if="headersHaveDescription">{{ data }}</SimpleCell>
+      <SimpleCell v-if="headersHaveSchema">
+        <span v-if="data.schema.example">
+          <code class="schema-example">{{ data.schema.example }}</code>
+        </span>
+        <code
+          v-else-if="data.schema.type"
+          class="schema-type">
+          {{ data.schema.type }}
+        </code>
+        <code v-else>
+          {{ data.schema }}
+        </code>
+      </SimpleCell>
+    </SimpleRow>
+  </SimpleTable>
+</template>

package/src/components/Content/ReferenceEndpoint/ExampleResponses/SelectExample.vue

@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import {
+  Listbox,
+  ListboxButton,
+  ListboxOption,
+  ListboxOptions,
+} from '@headlessui/vue'
+import { CodeMirror } from '@scalar/use-codemirror'
+import { ref } from 'vue'
+
+import { mapFromObject } from '../../../../helpers'
+import { Icon } from '../../../Icon'
+
+const props = defineProps<{ examples: Record<string, any> }>()
+
+const examples = mapFromObject(props.examples)
+const selectedExample = ref(examples[0])
+</script>
+<template>
+  <div class="example-switcher">
+    <label
+      class="listbox-label"
+      for="listbox-button">
+      Select Example
+    </label>
+    <Listbox v-model="selectedExample">
+      <ListboxButton
+        id="listbox-button"
+        class="listbox-button">
+        <div class="listbox-button-content">
+          <div class="listbox-button-label">
+            {{ selectedExample.value.summary ?? selectedExample.key }}
+          </div>
+          <div>
+            <Icon
+              class="icon"
+              src="line/arrow-chevron-down" />
+          </div>
+        </div>
+      </ListboxButton>
+
+      <ListboxOptions class="listbox-options">
+        <ListboxOption
+          v-for="example in examples"
+          :key="example.key"
+          class="listbox-option"
+          :value="example">
+          {{ example.value.summary ?? example.key }}
+        </ListboxOption>
+      </ListboxOptions>
+    </Listbox>
+    <CodeMirror
+      :content="JSON.stringify(selectedExample.value.value, null, 2)"
+      :languages="['json']"
+      readOnly />
+  </div>
+</template>
+
+<style scoped>
+.example-switcher {
+  display: flex;
+  gap: 6px;
+  flex-direction: column;
+}
+
+.listbox-label {
+  font-size: var(--theme-mini);
+  font-weight: var(--theme-semibold);
+  margin: 0 4px;
+  color: var(--theme-color-2);
+}
+
+.listbox-button {
+  border: 1px solid var(--theme-border-color);
+  background: var(--theme-background-1);
+  padding: 6px 12px;
+  border-radius: var(--theme-radius);
+  text-align: left;
+  display: block;
+  font-size: var(--theme-mini);
+}
+
+.listbox-button-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.listbox-button-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.listbox-options {
+  background: var(--theme-background-1);
+  padding: 6px 6px;
+  border-radius: var(--theme-radius-lg);
+  margin-top: 4px;
+  box-shadow: var(--theme-shadow-2);
+  position: absolute;
+  margin: 0 1px;
+  transform: translateY(-50%);
+  z-index: 100;
+}
+
+.listbox-option {
+  padding: 6px 12px;
+  cursor: pointer;
+  color: var(--theme-color-1);
+  border-radius: var(--theme-radius);
+  margin: 2px 0;
+}
+
+.listbox-option[data-headlessui-state='selected'] {
+  background: var(--theme-background-2);
+}
+
+.listbox-option:hover {
+  background: var(--theme-background-2);
+  color: var(--theme-color-2);
+}
+
+.icon {
+  width: 13px;
+  height: 13px;
+  color: var(--theme-color-3);
+}
+</style>

package/src/components/Content/ReferenceEndpoint/ExampleResponses/index.ts

@@ -0,0 +1 @@
+export { default as ExampleResponses } from './ExampleResponses.vue'

package/src/components/Content/ReferenceEndpoint/ReferenceEndpoint.vue

@@ -2,7 +2,7 @@
 import type { Server, Tag, TransformedOperation } from '../../../types'
 import Copy from './Copy.vue'
 import ExampleRequest from './ExampleRequest.vue'
-import ExampleResponses from './ExampleResponses.vue'
+import { ExampleResponses } from './ExampleResponses'
 
 defineProps<{
   operation: TransformedOperation

package/src/components/Sidebar.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
-import { generateRequest, useApiClientRequestStore } from '@scalar/api-client'
-import { useApiClientStore, useOperation } from '@scalar/api-client'
+import {
+  generateRequest,
+  useApiClientRequestStore,
+  useApiClientStore,
+  useOperation,
+} from '@scalar/api-client'
 import { useKeyboardEvent } from '@scalar/use-keyboard-event'
 import { useMediaQuery } from '@vueuse/core'
 

package/src/components/SimpleTable/SimpleCell.vue

@@ -30,6 +30,7 @@ withDefaults(
   padding: 0.25em 0.5em;
   color: var(--theme-color-1);
   white-space: nowrap;
+  vertical-align: top;
 }
 
 .simple-cell:last-of-type {

package/src/helpers/index.ts

@@ -1,4 +1,5 @@
 export { generateAxiosCodeFromRequest } from './generateAxiosCodeFromRequest'
 export { generateLaravelCodeFromRequest } from './generateLaravelCodeFromRequest'
+export { mapFromObject } from './mapFromObject'
 export { objectMerge } from './objectMerge'
 export { transformToJson } from './transformToJson'

package/src/helpers/mapFromObject.ts

@@ -0,0 +1,11 @@
+/**
+ * Map an object to an array of key-value pairs.
+ */
+export const mapFromObject = (object: Record<string, any>) => {
+  return Object.keys(object).map((key) => {
+    return {
+      key,
+      value: object[key],
+    }
+  })
+}