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
Agusti Fernandez Pardo 2022-05-05 17:36:02 +02:00 committed by GitHub
parent 174ed9f6d1
commit 71e67b50b2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 150 additions and 1088 deletions

@ -1 +1 @@
Subproject commit 6124577bc21502c018378a299e50fc96bff14b99 Subproject commit be2d4338ee1023a2d2862978ccf91554d47ff51f

View File

@ -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;
}

View File

@ -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",

View File

@ -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>

View File

@ -1 +1 @@
NEXT_PUBLIC_SWAGGER_DOCS_URL=http://localhost:3002/docs NEXT_PUBLIC_SWAGGER_DOCS_URL=http://localhost:3002/api/docs

View File

@ -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

View File

@ -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",

View File

@ -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}
/> />
); );

View File

@ -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

View File

@ -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

View File

@ -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"