@scalar/api-reference 0.1.1

package/src/components/Card/CardContent.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    muted?: boolean
+    frameless?: boolean
+    borderless?: boolean
+  }>(),
+  {
+    muted: false,
+    frameless: false,
+    borderless: false,
+  },
+)
+</script>
+<template>
+  <div
+    :class="{
+      'card-content': true,
+      'card--muted': muted,
+      'card--frameless': frameless,
+      'card--borderless': borderless,
+    }">
+    <slot />
+  </div>
+</template>
+<style scoped>
+.card-content {
+  overflow: auto;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--scalar-api-reference-theme-border-color);
+}
+
+.card-content:last-of-type,
+.card-content.card--borderless {
+  border-bottom: none;
+}
+
+.card--muted {
+  background: var(--scalar-api-reference-theme-background-2);
+}
+
+.card--frameless {
+  padding: 0;
+}
+</style>

package/src/components/Card/CardFooter.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import CardContent from './CardContent.vue'
+</script>
+<template>
+  <CardContent>
+    <slot />
+  </CardContent>
+</template>
+<style scoped>
+.card-footer {
+  border-top: 1px solid var(--scalar-api-reference-theme-border-color);
+}
+</style>

package/src/components/Card/CardHeader.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import CardContent from './CardContent.vue'
+</script>
+<template>
+  <CardContent class="card-header">
+    <div class="card-header-slots">
+      <div class="card-header-slot card-header-title">
+        <slot />
+      </div>
+      <div class="card-header-slot card-header-actions">
+        <slot name="actions" />
+      </div>
+    </div>
+  </CardContent>
+</template>
+<style scoped>
+.card-header {
+  font-weight: var(--scalar-api-reference-theme-semibold);
+  font-size: var(--scalar-api-reference-theme-mini);
+  color: var(--scalar-api-reference-theme-color-3);
+}
+
+.card-header-title {
+  text-transform: uppercase;
+}
+
+.card-header-slots {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card-header-actions {
+  display: flex;
+  align-items: center;
+}
+</style>

package/src/components/Card/CardTab.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { Tab } from '@headlessui/vue'
+</script>
+<template>
+  <Tab
+    v-slot="{ selected }"
+    as="template">
+    <button
+      :class="{ 'tab': true, 'tab-selected': selected }"
+      type="button">
+      <slot />
+    </button>
+  </Tab>
+</template>
+<style scoped>
+.tab {
+  background: none;
+  border: none;
+  font-size: var(--scalar-api-reference-theme-font-size-4);
+  font-family: var(--scalar-api-reference-font-sans);
+  color: var(--scalar-api-reference-theme-color-2);
+  font-weight: var(--scalar-api-reference-theme-semibold);
+  cursor: pointer;
+}
+
+.tab-selected {
+  color: var(--scalar-api-reference-theme-color-1);
+  text-decoration: underline;
+  text-underline-offset: 12px;
+}
+</style>

package/src/components/Card/CardTabHeader.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { TabGroup, TabList } from '@headlessui/vue'
+
+import CardHeader from './CardHeader.vue'
+
+const emit = defineEmits<{
+  (e: 'change', index: number): void
+}>()
+
+const changeTab = (index: number) => {
+  emit('change', index)
+}
+</script>
+<template>
+  <CardHeader>
+    <TabGroup @change="changeTab">
+      <TabList class="tab-list">
+        <slot />
+      </TabList>
+    </TabGroup>
+    <template #actions>
+      <slot name="actions" />
+    </template>
+  </CardHeader>
+</template>
+<style scoped>
+.tab-list {
+  display: flex;
+  gap: 6px;
+  position: relative;
+}
+</style>

package/src/components/Card/index.ts

@@ -0,0 +1,6 @@
+export { default as Card } from './Card.vue'
+export { default as CardHeader } from './CardHeader.vue'
+export { default as CardContent } from './CardContent.vue'
+export { default as CardFooter } from './CardFooter.vue'
+export { default as CardTabHeader } from './CardTabHeader.vue'
+export { default as CardTab } from './CardTab.vue'

package/src/components/Content/Content.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { useResizeObserver } from '@vueuse/core'
+import { onMounted, ref } from 'vue'
+
+import { useTemplateStore } from '../../stores/template'
+import type { Spec } from '../../types'
+import { FlowIcon } from '../Icon'
+import Introduction from './Introduction'
+import ReferenceEndpoint from './ReferenceEndpoint'
+import ReferenceTag from './ReferenceTag.vue'
+import Spinner from './Spinner.vue'
+
+const props = defineProps<{ ready: boolean; spec: Spec }>()
+
+const referenceEl = ref<HTMLElement | null>(null)
+
+const isNarrow = ref(true)
+
+useResizeObserver(
+  referenceEl,
+  (entries) => (isNarrow.value = entries[0].contentRect.width < 900),
+)
+
+const { state: templateState, setCollapsedSidebarItem } = useTemplateStore()
+
+onMounted(() => {
+  if (props.spec.tags.length > 0) {
+    setCollapsedSidebarItem(props.spec.tags[0].name, true)
+  }
+})
+</script>
+<template>
+  <div
+    ref="referenceEl"
+    :class="{
+      'references-narrow': isNarrow,
+    }">
+    <template v-if="ready">
+      <Introduction
+        :info="spec.info"
+        :servers="spec.servers" />
+      <template
+        v-for="(tag, index) in spec.tags"
+        :key="tag.id">
+        <div class="reference">
+          <ReferenceTag
+            :index="index"
+            :tag="tag" />
+          <button
+            v-if="
+              index !== 0 &&
+              !templateState.collapsedSidebarItems[tag.name] &&
+              tag.operations?.length > 1
+            "
+            class="show-more"
+            type="button"
+            @click="setCollapsedSidebarItem(tag.name, true)">
+            Show More
+            <FlowIcon
+              class="show-more-icon"
+              icon="ChevronDown" />
+          </button>
+          <template
+            v-if="index === 0 || templateState.collapsedSidebarItems[tag.name]">
+            <ReferenceEndpoint
+              v-for="operation in tag.operations"
+              :key="operation.operationId"
+              :operation="operation"
+              :parentTag="tag"
+              :server="spec.servers?.[0]" />
+          </template>
+        </div>
+      </template>
+    </template>
+    <div
+      v-else
+      class="render-loading">
+      <Spinner />
+    </div>
+  </div>
+</template>
+<style scoped>
+.render-loading {
+  height: calc(
+    var(--scalar-api-reference-full-height) -
+      var(--scalar-api-reference-theme-header-height)
+  );
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.show-more {
+  background: var(--scalar-api-reference-theme-background-1);
+  appearance: none;
+  border: none;
+  border: 1px solid var(--scalar-api-reference-theme-border-color);
+  margin: auto;
+  padding: 8px 12px;
+  border-radius: 30px;
+  color: var(--scalar-api-reference-theme-color-1);
+  font-weight: var(--scalar-api-reference-theme-semibold);
+  font-size: var(--scalar-api-reference-theme-font-size-4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: -48px;
+  margin-bottom: 48px;
+  position: relative;
+}
+.show-more:hover {
+  color: var(--scalar-api-reference-theme-color-2);
+  cursor: pointer;
+}
+.show-more-icon {
+  width: 14px;
+  height: 14px;
+  margin-left: 3px;
+}
+.show-more:active {
+  box-shadow: 0 0 0 1px var(--scalar-api-reference-theme-border-color);
+}
+@media (max-width: 1165px) {
+  .show-more {
+    margin-top: -24px;
+    margin-bottom: 24px;
+  }
+}
+</style>

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

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { useClipboard } from '@scalar/use-clipboard'
+
+defineProps<{
+  server?: {
+    url: string
+    description?: string
+  }
+}>()
+
+const { copyToClipboard } = useClipboard()
+</script>
+<template>
+  <template v-if="server">
+    <a
+      class="base-url"
+      :title="server.description"
+      @click="copyToClipboard(server.url)">
+      {{ server.url }}
+    </a>
+  </template>
+</template>
+<style scoped>
+.base-url {
+  color: var(--scalar-api-reference-theme-color-2);
+  font-size: var(--scalar-api-reference-theme-mini);
+  cursor: pointer;
+  display: flex;
+  font-family: var(--scalar-api-reference-theme-font-code);
+  flex-direction: column;
+}
+</style>

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

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { type TargetId } from 'httpsnippet-lite'
+import { computed } from 'vue'
+
+import { useTemplateStore } from '../../../stores/template'
+import type { Info, Server } from '../../../types'
+import { Card, CardContent, CardFooter, CardHeader } from '../../Card'
+import MarkdownRenderer from '../MarkdownRenderer.vue'
+import BaseUrl from './BaseUrl.vue'
+import LanguageSelector from './LanguageSelector.vue'
+
+defineProps<{
+  info: Info
+  servers: Server[]
+}>()
+
+const { state, getLanguageTitleByKey } = useTemplateStore()
+
+// TODO: Doesn’t work … why?
+// type TargetIdWithoutHttp = Exclude<TargetId, 'http'>
+type TargetIdWithoutHttp = TargetId
+
+const standardLibrary = computed(() => {
+  const standardLibraries: Record<
+    TargetIdWithoutHttp | 'axios' | 'laravel',
+    string
+  > = {
+    shell: 'Curl',
+    ruby: 'Net::HTTP',
+    node: 'HTTPS',
+    php: 'cURL',
+    python: 'http.client',
+    c: 'libcurl',
+    clojure: 'clj-http',
+    csharp: 'RestClient',
+    go: 'net/http',
+    java: 'Unirest',
+    javascript: 'XMLHttpRequest',
+    kotlin: 'OkHttp',
+    objc: 'NSURLSession',
+    ocaml: 'Cohttp',
+    powershell: 'Invoke-WebRequest',
+    r: 'httr',
+    swift: 'NSURLSession',
+    // TODO: Remove, but fix `TargetIdWithoutHttp` first
+    http: '',
+    laravel: '',
+    axios: '',
+  }
+
+  return standardLibraries[state.preferredLanguage] ?? ''
+})
+</script>
+
+<template>
+  <div class="reference">
+    <div class="reference-container">
+      <div class="copy">
+        <div class="editor-heading">
+          <h1
+            class="heading"
+            :class="{ loading: !info.title }">
+            {{ info.title || '&nbsp;' }}
+          </h1>
+        </div>
+        <p class="tag-description">
+          <template v-if="info.description">
+            <MarkdownRenderer :value="info.description" />
+          </template>
+          <template
+            v-for="i in [...Array(8).keys()]"
+            v-else
+            :key="i">
+            <span class="loading" />
+          </template>
+        </p>
+      </div>
+      <div class="example flex-col gap-1">
+        <Card v-if="servers.length > 0">
+          <CardHeader muted>
+            Base URL{{ servers?.length > 1 ? 's' : '' }}
+          </CardHeader>
+          <CardContent
+            v-for="server in servers"
+            :key="server.url"
+            muted>
+            <BaseUrl :server="server" />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>Client Libraries</CardHeader>
+          <CardContent frameless>
+            <LanguageSelector />
+          </CardContent>
+          <CardFooter
+            class="font-mono"
+            muted
+            style="
+              font-size: var(--scalar-api-reference-theme-mini);
+              color: var(--scalar-api-reference-theme-color-2);
+            ">
+            {{ getLanguageTitleByKey(state.preferredLanguage) }}
+            {{ standardLibrary }}
+          </CardFooter>
+        </Card>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.heading {
+  margin-top: 0px !important;
+}
+.loading {
+  background: var(--scalar-api-reference-theme-background-2);
+  animation: loading-skeleton 2s infinite alternate;
+  border-radius: var(--scalar-api-reference-theme-radius);
+}
+.heading.loading {
+  width: 80%;
+}
+.tag-description .loading {
+  height: 20px;
+  margin-bottom: 4px;
+  width: 100%;
+  display: inline-block;
+}
+.tag-description .loading:first-of-type {
+  margin-top: 12px;
+}
+.tag-description .loading:last-of-type {
+  width: 40%;
+}
+@keyframes loading-skeleton {
+  from {
+    background: var(--scalar-api-reference-theme-background-2);
+  }
+  to {
+    background: var(--scalar-api-reference-theme-background-3);
+  }
+}
+</style>