Fix: Improve docs and mobile style of api docs (#2635)
* fix: adds servers in openapi, remove hack in snippets, update deps, make dynamic import to use latests swagger ui deps * fix: remove unneded import * fix: adds yarn dev commands for api and swagger * fix: prisma not web before api * fix: improve mobile docs api * fix request snippets * fix: custom more visible scrollbar for snippets in moible * fix: remove comments and ugly scrollbar * fix: types and remove lib url * fix: install iframe-react-resizer in docs * fix: remove web scope from yarn dev:api * fix: remove json-schema autogenerated as wont be used * fix: apiKeyAuth * fix: swagger patch thx hariom * fix: add api to env/example Co-authored-by: Agusti Fernandez Pardo <git@agusti.me> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com>pull/2685/head^2
parent
174ed9f6d1
commit
71e67b50b2
2
apps/api
2
apps/api
|
@ -1 +1 @@
|
||||||
Subproject commit 6124577bc21502c018378a299e50fc96bff14b99
|
Subproject commit be2d4338ee1023a2d2862978ccf91554d47ff51f
|
|
@ -0,0 +1,33 @@
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
|
|
||||||
|
// Define general type for useWindowSize hook, which includes width and height
|
||||||
|
export interface Size {
|
||||||
|
width: number | undefined;
|
||||||
|
height: number | undefined;
|
||||||
|
}
|
||||||
|
// Hook from: https://usehooks.com/useWindowSize/
|
||||||
|
export function useWindowSize(): Size {
|
||||||
|
// Initialize state with undefined width/height so server and client renders match
|
||||||
|
// Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
|
||||||
|
const [windowSize, setWindowSize] = useState<Size>({
|
||||||
|
width: undefined,
|
||||||
|
height: undefined,
|
||||||
|
});
|
||||||
|
useEffect(() => {
|
||||||
|
// Handler to call on window resize
|
||||||
|
function handleResize() {
|
||||||
|
// Set window width/height to state
|
||||||
|
setWindowSize({
|
||||||
|
width: window.innerWidth,
|
||||||
|
height: window.innerHeight,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// Add event listener
|
||||||
|
window.addEventListener("resize", handleResize);
|
||||||
|
// Call handler right away so state gets updated with initial window size
|
||||||
|
handleResize();
|
||||||
|
// Remove event listener on cleanup
|
||||||
|
return () => window.removeEventListener("resize", handleResize);
|
||||||
|
}, []); // Empty array ensures that effect is only run on mount
|
||||||
|
return windowSize;
|
||||||
|
}
|
|
@ -15,6 +15,7 @@
|
||||||
"author": "Cal.com, Inc.",
|
"author": "Cal.com, Inc.",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"iframe-resizer-react": "^1.1.0",
|
||||||
"next": "^12.1.0",
|
"next": "^12.1.0",
|
||||||
"nextra": "^1.1.0",
|
"nextra": "^1.1.0",
|
||||||
"nextra-theme-docs": "^1.2.2",
|
"nextra-theme-docs": "^1.2.2",
|
||||||
|
|
|
@ -1,11 +1,20 @@
|
||||||
import Bleed from 'nextra-theme-docs/bleed'
|
import Bleed from 'nextra-theme-docs/bleed'
|
||||||
import Head from "next/head";
|
import Head from "next/head";
|
||||||
|
import IframeResizer from "iframe-resizer-react";
|
||||||
|
import {useWindowSize} from "../lib/useWindowSize";
|
||||||
|
|
||||||
|
|
||||||
<Bleed full>
|
<Bleed full>
|
||||||
<Head><title>Public API | Cal.com</title></Head>
|
<Head><title>Public API | Cal.com</title></Head>
|
||||||
<iframe src="https://developer.cal.com"
|
<IframeResizer
|
||||||
width="100%"
|
autoResize
|
||||||
height="900px"
|
src={process.env.NEXT_PUBLIC_SWAGGER_DOCS_URL || "https://developer.cal.com"}
|
||||||
title="Public API | Cal.com"
|
frameBorder="0"
|
||||||
></iframe>
|
style={{
|
||||||
|
width: useWindowSize().width > 768 ? "calc(100vw - 16rem)": "100vw",
|
||||||
|
minHeight: useWindowSize().width > 768 ? "100vh" : "200vh",
|
||||||
|
height: "auto",
|
||||||
|
border: 0,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</Bleed>
|
</Bleed>
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
NEXT_PUBLIC_SWAGGER_DOCS_URL=http://localhost:3002/docs
|
NEXT_PUBLIC_SWAGGER_DOCS_URL=http://localhost:3002/api/docs
|
|
@ -20,7 +20,7 @@ export const requestSnippets = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
defaultExpanded: true,
|
defaultExpanded: true,
|
||||||
languages: ["node"],
|
languages: ["node", "curl_bash"],
|
||||||
};
|
};
|
||||||
// Since swagger-ui-react was not configured to change the request snippets some workarounds required
|
// Since swagger-ui-react was not configured to change the request snippets some workarounds required
|
||||||
// configuration will be added programatically
|
// configuration will be added programatically
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "PORT=4200 next dev",
|
"dev": "PORT=4200 next dev",
|
||||||
"build": "next build",
|
"build": "next build",
|
||||||
"start": "next start"
|
"start": "PORT=4200 next start"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"highlight.js": "^11.5.1",
|
"highlight.js": "^11.5.1",
|
||||||
|
|
|
@ -1,20 +1,25 @@
|
||||||
import dynamic from "next/dynamic";
|
import dynamic from "next/dynamic";
|
||||||
|
import { SwaggerUI } from "swagger-ui-react";
|
||||||
|
|
||||||
import { SnippedGenerator, requestSnippets } from "@lib/snippets";
|
import { SnippedGenerator, requestSnippets } from "@lib/snippets";
|
||||||
|
|
||||||
const SwaggerUI: any = dynamic(() => import("swagger-ui-react"), { ssr: false });
|
const SwaggerUIDynamic: SwaggerUI & { url: string } = dynamic(() => import("swagger-ui-react"), {
|
||||||
|
ssr: false,
|
||||||
|
});
|
||||||
|
|
||||||
export default function APIDocs() {
|
export default function APIDocs() {
|
||||||
return (
|
return (
|
||||||
<SwaggerUI
|
<SwaggerUIDynamic
|
||||||
url={process.env.NEXT_PUBLIC_SWAGGER_DOCS_URL || "https://api.cal.com/docs"}
|
url={process.env.NEXT_PUBLIC_SWAGGER_DOCS_URL || "https://api.cal.com/docs"}
|
||||||
supportedSubmitMethods={["get", "post", "delete", "patch"]}
|
persistAuthorization={true}
|
||||||
|
supportedSubmitMethods={["get", "post", "delete", "put", "options", "patch"]}
|
||||||
requestSnippetsEnabled={true}
|
requestSnippetsEnabled={true}
|
||||||
requestSnippets={requestSnippets}
|
requestSnippets={requestSnippets}
|
||||||
plugins={[SnippedGenerator]}
|
plugins={[SnippedGenerator]}
|
||||||
tryItOutEnabled={true}
|
tryItOutEnabled={true}
|
||||||
syntaxHighlight={true}
|
syntaxHighlight={true}
|
||||||
docExpansion="none"
|
enableCORS={false} // Doesn't seem to work either
|
||||||
|
docExpansion="list"
|
||||||
filter={true}
|
filter={true}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
|
@ -14,3 +14,89 @@ a {
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.swagger-ui .opblock-tag {
|
||||||
|
font-size: 90% !important;
|
||||||
|
}
|
||||||
|
.swagger-ui .opblock .opblock-summary {
|
||||||
|
display: grid;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.opblock-summary-path {
|
||||||
|
flex-shrink: 0;
|
||||||
|
max-width: 100% !important;
|
||||||
|
padding: 10px 5px !important;
|
||||||
|
}
|
||||||
|
.opblock-summary-description {
|
||||||
|
font-size: 16px !important;
|
||||||
|
padding: 0px 5px;
|
||||||
|
}
|
||||||
|
.swagger-ui .scheme-container .schemes {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.swagger-ui .info .title {
|
||||||
|
color: #3b4151;
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
.swagger-ui .scheme-container {
|
||||||
|
padding: 14px 0;
|
||||||
|
}
|
||||||
|
.swagger-ui .info {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
.swagger-ui .auth-wrapper {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
.swagger-ui .authorization__btn {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.swagger-ui .opblock {
|
||||||
|
margin: 0 0 5px;
|
||||||
|
}
|
||||||
|
button.opblock-summary-control > svg {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.swagger-ui .filter .operation-filter-input {
|
||||||
|
border: 2px solid #d8dde7;
|
||||||
|
margin: 5px 5px;
|
||||||
|
padding: 5px;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
.swagger-ui .wrapper {
|
||||||
|
padding: 0 4px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.swagger-ui .info .title small {
|
||||||
|
top: 5px;
|
||||||
|
}
|
||||||
|
.swagger-ui a.nostyle, .swagger-ui a.nostyle:visited {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
div.request-snippets > div.curl-command > div:nth-child(1) {
|
||||||
|
overscroll-behavior: contain;
|
||||||
|
overflow-x: scroll;
|
||||||
|
}
|
||||||
|
.swagger-ui .opblock-body pre.microlight {
|
||||||
|
font-size: 9px;
|
||||||
|
}
|
||||||
|
.swagger-ui table tbody tr td {
|
||||||
|
padding: 0px 0 0;
|
||||||
|
vertical-align: none;
|
||||||
|
}
|
||||||
|
td.response-col_description > div > div > p {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
div.no-margin > div > div.responses-wrapper > div.responses-inner > div > div > table > tbody > tr {
|
||||||
|
display: flex;
|
||||||
|
width: 100vw;
|
||||||
|
flex-direction: column;
|
||||||
|
font-size: 60%;
|
||||||
|
}
|
||||||
|
div.no-margin > div > div.responses-wrapper > div.responses-inner > div > div > table > thead > tr {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1 +1 @@
|
||||||
Subproject commit 797f725d982988ec7c2767ee2250b6fb83a82086
|
Subproject commit b86553c8497b25a347fa8e8efcabd30f981506ac
|
|
@ -17,7 +17,7 @@
|
||||||
"deploy": "turbo run deploy",
|
"deploy": "turbo run deploy",
|
||||||
"dev": "turbo run dev --scope=\"@calcom/web\"",
|
"dev": "turbo run dev --scope=\"@calcom/web\"",
|
||||||
"dev:website": "yarn predev && turbo run dev --scope=\"@calcom/web\" --scope=\"@calcom/website\"",
|
"dev:website": "yarn predev && turbo run dev --scope=\"@calcom/web\" --scope=\"@calcom/website\"",
|
||||||
"dev:api": "yarn predev && turbo run dev --scope=\"@calcom/web\" --scope=\"@calcom/api\"",
|
"dev:api": "yarn predev && turbo run dev --scope=\"@calcom/api\"",
|
||||||
"dev:swagger": "yarn predev && turbo run dev --scope=\"@calcom/api\" --scope=\"@calcom/swagger\"",
|
"dev:swagger": "yarn predev && turbo run dev --scope=\"@calcom/api\" --scope=\"@calcom/swagger\"",
|
||||||
"dev:console": "yarn predev && turbo run dev --scope=\"@calcom/web\" --scope=\"@calcom/console\"",
|
"dev:console": "yarn predev && turbo run dev --scope=\"@calcom/web\" --scope=\"@calcom/console\"",
|
||||||
"docs-dev": "yarn predev && turbo run dev --scope=\"@calcom/docs\"",
|
"docs-dev": "yarn predev && turbo run dev --scope=\"@calcom/docs\"",
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -758,14 +758,6 @@
|
||||||
resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-6.0.0.tgz#fe364f025ba74f6de6c837a84ef44bdb1d61e68f"
|
resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-6.0.0.tgz#fe364f025ba74f6de6c837a84ef44bdb1d61e68f"
|
||||||
integrity sha512-mgmE7XBYY/21erpzhexk4Cj1cyTQ9LzvnTxtzM17BJ7ERMNE6W72mQRo0I1Ud8eFJ+RVVIcBNhLFZ3GX4XFz5w==
|
integrity sha512-mgmE7XBYY/21erpzhexk4Cj1cyTQ9LzvnTxtzM17BJ7ERMNE6W72mQRo0I1Ud8eFJ+RVVIcBNhLFZ3GX4XFz5w==
|
||||||
|
|
||||||
"@calcom/embed-react@^1.0.2":
|
|
||||||
version "1.0.2"
|
|
||||||
resolved "https://registry.yarnpkg.com/@calcom/embed-react/-/embed-react-1.0.2.tgz#b27230f333893573c02cb2aa35a162b5ca976705"
|
|
||||||
integrity sha512-6E8m9A6XW9nY7V0Ey54IAqbr5mABx0f5y9GYHXwBdLu8Pqq0f1H/JFmiVvlvs+DIgdMRMFa0qwQF7iM8QNkNxQ==
|
|
||||||
dependencies:
|
|
||||||
playwright "^1.21.1"
|
|
||||||
typescript "^4.6.3"
|
|
||||||
|
|
||||||
"@cnakazawa/watch@^1.0.3":
|
"@cnakazawa/watch@^1.0.3":
|
||||||
version "1.0.4"
|
version "1.0.4"
|
||||||
resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
|
resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
|
||||||
|
|
Loading…
Reference in New Issue