@scalar/api-reference
Version:
Generate beautiful API references from OpenAPI documents
74 lines (73 loc) • 7.48 kB
JavaScript
import { defineComponent as b, createElementBlock as r, openBlock as o, createElementVNode as e, createStaticVNode as c, createVNode as i, unref as l, withCtx as n, createTextVNode as d, Fragment as u, renderList as w, normalizeClass as y, toDisplayString as A } from "vue";
import { ScalarButton as p } from "@scalar/components";
import { themeLabels as f } from "@scalar/themes";
const C = { class: "start custom-scroll" }, S = { class: "start-copy" }, x = { class: "start-cta" }, k = { class: "start-row" }, Z = { class: "start-section start-section-colors" }, _ = ["onClick"], P = /* @__PURE__ */ b({
__name: "GettingStarted",
props: {
theme: {}
},
emits: ["changeTheme", "loadSwaggerFile", "linkSwaggerFile", "updateContent"],
setup(E, { emit: v }) {
const g = v, m = [
"default",
"alternate",
"moon",
"purple",
"solarized",
"bluePlanet",
"saturn",
"kepler",
"mars",
"deepSpace"
];
async function h() {
const s = await fetch(
"https://registry.scalar.com/@scalar/apis/galaxy/latest?format=yaml"
);
g("updateContent", await s.text());
}
return (s, a) => (o(), r("div", C, [
e("div", S, [
a[3] || (a[3] = c('<div class="start-logo" data-v-bc17fac9><svg height="36" viewBox="0 0 36 36" width="36" xmlns="http://www.w3.org/2000/svg" data-v-bc17fac9><path d="M18 0a18 18 0 1 1 0 36 18 18 0 0 1 0-36Zm11.2 6.5c-3.3-3.3-11.1-1-17.4 5.3-6.2 6.3-8.6 14-5.3 17.4 3.3 3.3 11 .9 17.3-5.4 6.3-6.2 8.7-14 5.4-17.3ZM17.6 12a6.3 6.3 0 1 1 0 12.7 6.3 6.3 0 0 1 0-12.7Z" fill="currentColor" fill-rule="evenodd" data-v-bc17fac9></path></svg></div><h1 class="start-h1" data-v-bc17fac9>Swagger Editor</h1><p class="start-p" data-v-bc17fac9> Welcome to the Scalar API References + Swagger Editor, a Free & Open-Source tool that takes your Swagger/OAS file and generates Beautiful API references. </p>', 3)),
e("div", x, [
i(l(p), {
fullWidth: "",
onClick: h
}, {
default: n(() => a[1] || (a[1] = [
d(" Show Example ")
])),
_: 1,
__: [1]
}),
i(l(p), {
fullWidth: "",
variant: "outlined",
onClick: a[0] || (a[0] = (t) => s.$emit("loadSwaggerFile"))
}, {
default: n(() => a[2] || (a[2] = [
d(" Upload File ")
])),
_: 1,
__: [2]
})
])
]),
e("div", k, [
a[5] || (a[5] = c('<div class="start-section start-section-integrations" data-v-bc17fac9><div class="start-h2" data-v-bc17fac9>INTEGRATIONS</div><a class="start-item" href="https://github.com/scalar/scalar/tree/main/integrations/fastify#readme" target="_blank" data-v-bc17fac9><svg fill="currentColor" height="16" viewBox="0 0 19 16" width="19" xmlns="http://www.w3.org/2000/svg" data-v-bc17fac9><path d="m18.2 3.1.8-2V.9l-4.7 1.3C15.2 1 15 0 15 0s-2.5 1.6-4.3 1.5c-2 0-3.6.8-4 1-1.8 1.2-2.5 3.3-3.2 3.8L0 8.9 2.3 8l-2 2.5c.2.3 1.2 1.6 2.1 1.3l.4-.1 1.6.5-.7-1 .2-.2.9.3-.1-.8.9.3-.1-.8.3-.1 1-3.5 3.7-2.6-.3.7A4 4 0 0 1 8 7l-.6.2c-.5.5-.7.7-.8 2.5a2 2 0 0 1 1 0c1.6.4 2.2 2.3 1.7 2.9l-.7.6H8v.6h-.7v.5l-.2.2c-.7 0-1.4-.6-1.4-.6 0 .5.4 1.3.4 1.3s1.7 1.1 2.7.7c1-.4.7-2.3 2.8-3.2l3.3-.9.8-2.2-1.7.5v-2l2.5-.6.9-2.2-3.4.9v-2l4.2-1.1Z" fill="currentColor" fill-rule="nonzero" data-v-bc17fac9></path></svg><span data-v-bc17fac9>Fastify</span></a><a class="start-item" href="https://github.com/scalar/scalar/blob/main/documentation/integrations/html-js.md#html" target="_blank" data-v-bc17fac9><svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-v-bc17fac9><g data-v-bc17fac9><path d="M22.5 1.5h-21A1.5 1.5 0 0 0 0 3v3a1.5 1.5 0 0 0 1.5 1.5h21A1.5 1.5 0 0 0 24 6V3a1.5 1.5 0 0 0-1.5-1.5Zm-19.25 3A1.25 1.25 0 1 1 4.5 5.75 1.25 1.25 0 0 1 3.25 4.5ZM8.5 5.75A1.25 1.25 0 1 1 9.75 4.5 1.25 1.25 0 0 1 8.5 5.75Z" fill="currentColor" data-v-bc17fac9></path><path d="M22.5 9h-21A1.5 1.5 0 0 0 0 10.5v3A1.5 1.5 0 0 0 1.5 15h21a1.5 1.5 0 0 0 1.5-1.5v-3A1.5 1.5 0 0 0 22.5 9ZM3.25 12a1.25 1.25 0 1 1 1.25 1.25A1.25 1.25 0 0 1 3.25 12Zm5.25 1.25A1.25 1.25 0 1 1 9.75 12a1.25 1.25 0 0 1-1.25 1.25Z" fill="currentColor" data-v-bc17fac9></path><path d="M22.5 16.5h-21A1.5 1.5 0 0 0 0 18v3a1.5 1.5 0 0 0 1.5 1.5h21A1.5 1.5 0 0 0 24 21v-3a1.5 1.5 0 0 0-1.5-1.5Zm-19.25 3a1.25 1.25 0 1 1 1.25 1.25 1.25 1.25 0 0 1-1.25-1.25Zm5.25 1.25a1.25 1.25 0 1 1 1.25-1.25 1.25 1.25 0 0 1-1.25 1.25Z" fill="currentColor" data-v-bc17fac9></path></g></svg><span data-v-bc17fac9>CDN</span></a><a class="start-item" href="https://github.com/scalar/scalar/blob/main/packages/api-reference/README.md#vuejs" target="_blank" data-v-bc17fac9><svg height="170" viewBox="0 0 196.3 170" width="196.3" xmlns="http://www.w3.org/2000/svg" data-v-bc17fac9><g fill="currentColor" fill-rule="nonzero" data-v-bc17fac9><polygon points="39.23 0 0 0 2.9450761 5.1010782 98.16 170.02 196.32 0 157.06 0 98.16 102.01 42.175701 5.0991171" data-v-bc17fac9></polygon><polygon points="75.5 2.009956e-14 0 2.009956e-14 2.94 5.1 78.44871 5.1 98.16 39.26 117.87937 5.1 193.38 5.1 196.325 0 120.82 7.8065636e-15 114.97322 2.009956e-14 98.16 29.037153 81.35 2.009956e-14" data-v-bc17fac9></polygon></g></svg><span data-v-bc17fac9>Vue</span></a><a class="start-item" href="https://github.com/scalar/scalar/blob/main/packages/api-reference-react/README.md#usage" target="_blank" data-v-bc17fac9><svg height="23.3" viewBox="0 0 22 23.3" width="22" xmlns="http://www.w3.org/2000/svg" data-v-bc17fac9><g fill="none" fill-rule="evenodd" data-v-bc17fac9><circle cx="11" cy="11.6" fill="currentColor" fill-rule="nonzero" r="2" data-v-bc17fac9></circle><g stroke="currentColor" data-v-bc17fac9><ellipse cx="11" cy="11.6" rx="11" ry="4.2" data-v-bc17fac9></ellipse><ellipse cx="11" cy="11.6" rx="11" ry="4.2" transform="rotate(60 11 11.6)" data-v-bc17fac9></ellipse><ellipse cx="11" cy="11.6" rx="11" ry="4.2" transform="rotate(120 11 11.6)" data-v-bc17fac9></ellipse></g></g></svg><span data-v-bc17fac9>React</span></a></div>', 1)),
e("div", Z, [
a[4] || (a[4] = e("p", { class: "start-h2" }, "THEMING", -1)),
(o(), r(u, null, w(m, (t) => e("div", {
key: t,
class: y(["start-item", { "start-item-active": t === s.theme }]),
onClick: (F) => s.$emit("changeTheme", { id: t, label: l(f)[t] })
}, A(l(f)[t]), 11, _)), 64))
])
]),
a[6] || (a[6] = c('<p class="start-h1" data-v-bc17fac9>Features</p><ul class="start-ul" data-v-bc17fac9><li data-v-bc17fac9><p class="start-h3" data-v-bc17fac9>Customize</p> Bring your typography & color palettes, or use our themes! </li><li data-v-bc17fac9><p class="start-h3" data-v-bc17fac9>Testing</p> A deeply integrated Rest API Client (Also Free & Open-Source) </li><li data-v-bc17fac9><p class="start-h3" data-v-bc17fac9>Search</p> Fully integrated Search (Using fuse.js) </li><li data-v-bc17fac9><p class="start-h3" data-v-bc17fac9>Hosting</p> Free subdomain hosting on https://apidocumentation.com </li><li data-v-bc17fac9><p class="start-h3" data-v-bc17fac9>OpenAPI & Swagger</p> Support for OpenAPI 3.1, OpenAPI 3.0, and Swagger 2.0 </li><li data-v-bc17fac9><p class="start-h3" data-v-bc17fac9>Code Samples</p> Code samples to show off your API in most popular languages </li></ul>', 2))
]));
}
});
export {
P as default
};