@scalar/api-reference 0.2.0 → 0.3.0

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

@@ -0,0 +1,361 @@
+<script setup lang="ts">
+import { useMediaQuery } from '@vueuse/core'
+import { type TargetId, availableTargets } from 'httpsnippet-lite'
+import { ref } from 'vue'
+
+import { useTemplateStore } from '../../../stores/template'
+import { Icon } from '../../Icon'
+
+type Language = {
+  title: string | undefined
+  key: Exclude<TargetId, 'http'>
+}
+
+// Use the template store to keep it accessible globally
+const { state, setItem, getLanguageTitleByKey } = useTemplateStore()
+
+// Check if the given language key is a valid target.
+const isValidTargetId = (language: TargetId) =>
+  availableTargets()
+    .map((target) => target.key)
+    .includes(language)
+
+const defaultLanguage = isValidTargetId(state.preferredLanguage as TargetId)
+  ? state.preferredLanguage
+  : 'shell'
+
+// Overwrite default setting for preferred language
+setItem('preferredLanguage', defaultLanguage)
+
+const selectLanguage = (language: TargetId) => {
+  setItem('preferredLanguage', language)
+
+  // Check if selected language is featured already (icon + text)
+  const preferedLanguageIsIncluded = !!featuredLanguages.value.filter(
+    (preferedLanguage) => {
+      return preferedLanguage.key === state.preferredLanguage
+    },
+  ).length
+
+  // Exit early if the language is already featured
+  if (preferedLanguageIsIncluded) {
+    return
+  }
+
+  // Remove first item and add the preferred language to the end of the list
+  featuredLanguages.value = [
+    // @ts-ignore
+    ...featuredLanguages.value.slice(1),
+    {
+      title: getLanguageTitleByKey(language),
+      // @ts-ignore
+      key: language,
+    },
+  ]
+}
+
+const isMobile = useMediaQuery('(max-width: 1000px)')
+
+// Show popular languages with an icon, not just in a select.
+const featuredLanguages = ref<Language[]>(
+  isMobile.value
+    ? // Mobile
+      [
+        {
+          title: 'Shell',
+          key: 'shell',
+        },
+        {
+          title: 'Ruby',
+          key: 'ruby',
+        },
+        {
+          title: 'Node',
+          key: 'node',
+        },
+        {
+          title: 'Python',
+          key: 'python',
+        },
+      ]
+    : // Desktop
+      [
+        {
+          title: 'Shell',
+          key: 'shell',
+        },
+        {
+          title: 'Ruby',
+          key: 'ruby',
+        },
+        {
+          title: 'Node',
+          key: 'node',
+        },
+        {
+          title: 'PHP',
+          key: 'php',
+        },
+        {
+          title: 'Python',
+          key: 'python',
+        },
+        {
+          title: 'C',
+          key: 'c',
+        },
+      ],
+)
+
+/**
+ * Icons have longer names to appear in icon searches, e.g. "javascript-js" instead of just "javascript". This function
+ * maps the language key to the icon name.
+ */
+const getIconByLanguageKey = (languageKey: TargetId) => {
+  const languageKeyMap: Partial<Record<TargetId, string>> = {
+    javascript: 'javascript-js',
+  }
+
+  const icon = languageKeyMap[languageKey] ?? languageKey
+
+  return `brand/programming-language-${icon}`
+}
+</script>
+<template>
+  <div class="client-libraries-content">
+    <div
+      v-for="language in featuredLanguages"
+      :key="language.key"
+      class="code-languages rendered-code-sdks"
+      :class="{
+        'code-languages__active': state.preferredLanguage === language.key,
+      }"
+      @click="() => selectLanguage(language.key)">
+      <div
+        class="code-languages-background"
+        :class="`code-languages-icon__${language.key}`">
+        <Icon
+          class="code-languages-icon"
+          :src="getIconByLanguageKey(language.key)" />
+      </div>
+      <span>{{ language.title }}</span>
+    </div>
+
+    <div class="code-languages code-languages__select">
+      <select
+        :value="state.preferredLanguage"
+        @input="
+          selectLanguage(($event.target as HTMLSelectElement).value as TargetId)
+        ">
+        <option disabled>Select language:</option>
+        <option
+          v-for="target in availableTargets()
+            .filter((target) => target.key !== 'http')
+            .filter(
+              (target) =>
+                !featuredLanguages.find(
+                  (language) => language.key === target.key,
+                ),
+            )"
+          :key="target.key"
+          :value="target.key">
+          {{ target.title }}
+        </option>
+      </select>
+      <div class="code-languages-background code-languages-icon__more">
+        <svg
+          class="code-languages-icon code-languages-icon__more"
+          height="50"
+          viewBox="0 0 50 50"
+          width="50"
+          xmlns="http://www.w3.org/2000/svg">
+          <g
+            fill="currentColor"
+            fill-rule="nonzero">
+            <path
+              d="M10.71 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0M21.13 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0M31.55 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0" />
+          </g>
+        </svg>
+      </div>
+      <span>More</span>
+    </div>
+  </div>
+</template>
+<style scoped>
+.client-libraries-content {
+  display: flex;
+  justify-content: center;
+  gap: 6px;
+  padding: 0 12px;
+}
+.code-languages {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  max-width: 68px;
+  width: 100%;
+  padding: 12px 0;
+  position: relative;
+  cursor: pointer;
+  white-space: nowrap;
+}
+/* remove php and c on mobile */
+@media screen and (max-width: 450px) {
+  .code-languages:nth-of-type(4),
+  .code-languages:nth-of-type(6) {
+    display: none;
+  }
+}
+.code-languages-icon {
+  max-width: 48px;
+  width: 100%;
+  max-height: 48px;
+  aspect-ratio: 1;
+  padding: 7px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  color: var(--theme-code-language-color-supersede, #fff);
+}
+.code-languages-background {
+  border-radius: 12px;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 0 0 1px var(--theme-code-languages-border-color);
+}
+.code-languages-background:before {
+  content: '';
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  background: var(--theme-code-languages-background-supersede);
+}
+.code-languages-icon__shell {
+  background: #000;
+}
+.code-languages-icon__ruby {
+  background: #d91404;
+}
+.code-languages-icon__php {
+  background: #6181b6;
+}
+.code-languages-icon__python {
+  background: #306998;
+}
+.code-languages-icon__more {
+  background: var(--theme-background-3);
+}
+.code-languages-icon__node {
+  background: #83cd29;
+}
+.code-languages-icon__c {
+  background: #03599c;
+}
+.code-languages-icon__csharp {
+  background: #68217a;
+}
+.code-languages-icon__cplusplus {
+  background: #9c033a;
+}
+.code-languages-icon__clojure {
+  background: #5881d8;
+}
+.code-languages-icon__go {
+  background: #00acd7;
+}
+.code-languages-icon__http {
+  background: #005b9b;
+}
+.code-languages-icon__java {
+  background: #ea2d2e;
+}
+.code-languages-icon__javascript {
+  background: #f0db4f;
+}
+.code-languages-icon__kotlin {
+  background: #7f6cb1;
+}
+.code-languages-icon__objc {
+  background: #0b5a9d;
+}
+.code-languages-icon__ocaml {
+  background: #f29100;
+}
+.code-languages-icon__powershell {
+  background: #2671be;
+}
+.code-languages-icon__r {
+  background: #cbced0;
+}
+.code-languages-icon__swift {
+  background: #f05138;
+}
+.code-languages__loading .code-languages-icon:before {
+  border: 1px solid rgba(255, 255, 255, 0.44);
+  border-top: 1px solid white;
+  animation: codeloader 0.45s linear infinite;
+  background: transparent;
+  width: 18px;
+  height: 18px;
+  content: '';
+  border-radius: 50%;
+}
+.code-languages__loading .code-languages-icon svg {
+  display: none;
+}
+.code-languages__active:after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  height: 2px;
+  width: 100%;
+  background: var(--theme-color-1);
+}
+@keyframes codeloader {
+  0% {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(1turn);
+  }
+}
+.code-languages span {
+  margin-top: 3px;
+  color: var(--theme-color-2);
+  font-size: var(--theme-micro);
+}
+.code-languages__active span {
+  color: var(--theme-color-1);
+}
+.code-languages__select select {
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+.code-languages__select span {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.code-languages__select span:after {
+  content: '';
+  width: 8px;
+  height: 8px;
+  background: var(--theme-background-1);
+  box-shadow: 1px 1px 0 currentColor;
+  display: block;
+  transform: rotate(45deg);
+  margin-left: 5px;
+  margin-top: -7px;
+}
+</style>

package/src/components/Content/Introduction/index.ts

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

package/src/components/Content/MarkdownRenderer.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import rehypeDocument from 'rehype-document'
+import rehypeFormat from 'rehype-format'
+import rehypeSanitize, { defaultSchema } from 'rehype-sanitize'
+import rehypeStringify from 'rehype-stringify'
+import remarkGfm from 'remark-gfm'
+import remarkParse from 'remark-parse'
+import remarkRehype from 'remark-rehype'
+import remarkTextr from 'remark-textr'
+import typographicBase from 'typographic-base'
+import { unified } from 'unified'
+import { ref, watch } from 'vue'
+
+const props = defineProps<{ value: string }>()
+
+const html = ref<string>('')
+
+watch(
+  () => props.value,
+  () => {
+    unified()
+      .use(remarkParse)
+      .use(remarkGfm)
+      .use(remarkRehype)
+      .use(remarkTextr, { plugins: [typographicBase] })
+      .use(rehypeDocument)
+      .use(rehypeFormat)
+      .use(rehypeSanitize, {
+        ...defaultSchema,
+        tagNames: defaultSchema.tagNames?.filter(
+          (tag) => !['img'].includes(tag),
+        ),
+      })
+      .use(rehypeStringify)
+      .process(props.value)
+      .then((result) => {
+        html.value = String(result)
+      })
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <div
+    class="markdown"
+    v-html="html" />
+</template>
+
+<style scoped>
+.markdown :deep(*) {
+  margin-top: 12px;
+}
+.markdown :deep(h1),
+.markdown :deep(h2),
+.markdown :deep(h3),
+.markdown :deep(h4),
+.markdown :deep(h5),
+.markdown :deep(h6) {
+  font-size: var(--font-size);
+  margin: 12px 0 6px;
+}
+
+.markdown :deep(p) {
+  font-size: var(--font-size, var(--theme-paragraph));
+  /* prettier-ignore */
+  color: var(--theme-color-1);
+  font-weight: var(--font-weight, var(--theme-small));
+  line-height: 1.5;
+}
+
+.markdown :deep(ul),
+.markdown :deep(ol) {
+  padding-left: 24px;
+  line-height: 1.5;
+  margin: 12px 0;
+}
+
+.markdown :deep(ul) {
+  list-style: disc;
+}
+
+.markdown :deep(ol) {
+  list-style: decimal;
+}
+
+.markdown :deep(ul.contains-task-list) {
+  list-style: none;
+  padding-left: 0;
+}
+
+.markdown :deep(li) {
+  margin: 6px 0;
+}
+
+.markdown :deep(code) {
+  font-family: var(--theme-font-code);
+  background-color: var(--theme-background-2);
+  box-shadow: 0 0 0 1px var(--theme-border-color);
+  font-size: var(--theme-micro);
+  border-radius: 2px;
+  padding: 0 3px;
+}
+
+.markdown :deep(pre code) {
+  display: block;
+  white-space: pre;
+  padding: 3px;
+  margin: 12px 0;
+  -webkit-overflow-scrolling: touch;
+  overflow-x: scroll;
+  max-width: 100%;
+  min-width: 100px;
+}
+
+.markdown :deep(blockquote) {
+  border-left: 3px solid var(--theme-border-color);
+  padding-left: 12px;
+}
+
+.markdown :deep(table) {
+  position: relative;
+  border-collapse: collapse;
+  table-layout: fixed;
+  width: 100%;
+  margin: 0;
+  overflow: hidden;
+  box-shadow: 0 0 0 1px var(--theme-border-color);
+  border-radius: var(--theme-radius-lg);
+}
+
+.markdown :deep(td),
+.markdown :deep(th) {
+  min-width: 1em;
+  padding: 6px;
+  vertical-align: top;
+  box-sizing: border-box;
+  position: relative;
+  word-break: break-all;
+  border-right: 1px solid var(--theme-border-color);
+  border-bottom: 1px solid var(--theme-border-color);
+}
+
+.markdown :deep(td > *),
+.markdown :deep(th > *) {
+  margin-bottom: 0;
+}
+.markdown.parameter-description :deep(p) {
+  margin-top: 4px;
+  font-size: var(--theme-small);
+  color: var(--theme-color-2);
+  line-height: initial;
+}
+.markdown :deep(td:first-of-type),
+.markdown :deep(th:first-of-type) {
+  border-left: none;
+}
+
+.markdown :deep(td:last-of-type),
+.markdown :deep(th:last-of-type) {
+  border-right: none;
+}
+
+.markdown :deep(tr:last-of-type td) {
+  border-bottom: none;
+}
+
+.markdown :deep(th) {
+  font-weight: bold !important;
+  text-align: left;
+  border-left-color: transparent;
+  background: var(--theme-background-2);
+}
+</style>

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

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import {
+  type Operation,
+  useApiClientStore,
+  useOperation,
+} from '@scalar/api-client'
+import { useIntersectionObserver } from '@vueuse/core'
+import { computed, onMounted, ref } from 'vue'
+
+import { useTemplateStore } from '../../../stores/template'
+import type { Tag } from '../../../types'
+import Parameters from './Parameters.vue'
+import RequestBody from './RequestBody.vue'
+
+const props = defineProps<{ operation: Operation; parentTag: Tag }>()
+
+const { setActiveSidebar } = useApiClientStore()
+
+const { parameterMap } = useOperation(props)
+
+const { setCollapsedSidebarItem } = useTemplateStore()
+
+const responseArray = computed(() => {
+  const { responses } = props.operation.information
+
+  const res: { name: string; description: string }[] = []
+
+  Object.keys(responses).forEach((statusCode: string) => {
+    res.push({
+      name: statusCode,
+      description: responses[statusCode].description,
+    })
+  })
+
+  return res
+})
+
+const refHeader = ref<HTMLElement>()
+
+onMounted(() => {
+  const root = document.getElementById('tippy')
+
+  useIntersectionObserver(
+    refHeader,
+    ([{ isIntersecting }]) => {
+      if (isIntersecting) {
+        const slug = props.operation.name.toLowerCase().split(' ').join('-')
+        const newUrl = `${window.location.origin}${window.location.pathname}#${
+          props.parentTag.name
+        }/${encodeURI(slug)}`
+        window.history.replaceState({}, '', newUrl)
+        setActiveSidebar(props.operation.operationId)
+        setCollapsedSidebarItem(props.parentTag.name, true)
+      }
+    },
+    {
+      root,
+      rootMargin: '0px 0px 0px 0px', // Trigger when the header touches the top of the viewport
+      threshold: 0,
+    },
+  )
+})
+</script>
+<template>
+  <div class="copy">
+    <div class="editor-heading">
+      <h1
+        ref="refHeader"
+        class="heading">
+        {{ operation.name }}
+      </h1>
+    </div>
+    <div>
+      <p class="tag-description">
+        {{ operation.description }}
+      </p>
+    </div>
+    <Parameters
+      :parameters="parameterMap.path"
+      title="Path Parameters" />
+    <Parameters
+      :parameters="parameterMap.query"
+      title="Query Parameters" />
+    <Parameters
+      :parameters="parameterMap.header"
+      title="Headers" />
+    <RequestBody :requestBody="operation.information?.requestBody" />
+    <Parameters
+      :parameters="responseArray"
+      title="Responses" />
+  </div>
+</template>
+<style scoped>
+.heading {
+  margin-top: 0px !important;
+}
+.tag-description {
+  margin-top: 12px;
+}
+</style>