Skip to content

Commit c28d647

Browse files
hbjORbjhbjORbj
authored
docs: improve self-hosting contents (calcom#28888)
1 parent c0d105e commit c28d647

43 files changed

Lines changed: 4214 additions & 35 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/docs/app/[[...mdxPath]]/page.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { generateStaticParamsFor, importPage } from "nextra/pages";
2+
import { useMDXComponents as getMDXComponents } from "../../mdx-components";
3+
4+
export const generateStaticParams = generateStaticParamsFor("mdxPath");
5+
6+
export async function generateMetadata(props: {
7+
params: Promise<{ mdxPath?: string[] }>;
8+
}) {
9+
const params = await props.params;
10+
const { metadata } = await importPage(params.mdxPath);
11+
return metadata;
12+
}
13+
14+
const Wrapper = getMDXComponents().wrapper;
15+
16+
export default async function Page(props: {
17+
params: Promise<{ mdxPath?: string[] }>;
18+
}) {
19+
const params = await props.params;
20+
const { default: MDXContent, toc, metadata } = await importPage(
21+
params.mdxPath,
22+
);
23+
return (
24+
<Wrapper toc={toc} metadata={metadata}>
25+
<MDXContent {...props} params={params} />
26+
</Wrapper>
27+
);
28+
}

‎apps/docs/app/fonts.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/* Cal Sans for headlines */
2+
h1,
3+
h2,
4+
h3,
5+
h4,
6+
h5,
7+
h6 {
8+
font-family: var(--font-cal), sans-serif;
9+
font-weight: 400;
10+
letter-spacing: 0;
11+
font-feature-settings: normal;
12+
}
13+
14+
/* Cal Sans UI for body text */
15+
body {
16+
font-family: var(--font-cal-ui), sans-serif;
17+
}

‎apps/docs/app/layout.tsx‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { Footer, Layout, Navbar } from "nextra-theme-docs";
2+
import { Head } from "nextra/components";
3+
import { getPageMap } from "nextra/page-map";
4+
import localFont from "next/font/local";
5+
import "nextra-theme-docs/style.css";
6+
import "./logo.css";
7+
import "./fonts.css";
8+
9+
const calSans = localFont({
10+
src: "../fonts/CalSans-Regular.woff2",
11+
variable: "--font-cal",
12+
display: "swap",
13+
weight: "400",
14+
});
15+
16+
const calSansUI = localFont({
17+
src: [
18+
{ path: "../fonts/CalSansUI-UILight.woff2", weight: "300" },
19+
{ path: "../fonts/CalSansUI-UIRegular.woff2", weight: "400" },
20+
{ path: "../fonts/CalSansUI-UIMedium.woff2", weight: "500" },
21+
{ path: "../fonts/CalSansUI-UISemiBold.woff2", weight: "600" },
22+
{ path: "../fonts/CalSansUI-UIBold.woff2", weight: "700" },
23+
],
24+
variable: "--font-cal-ui",
25+
display: "swap",
26+
});
27+
28+
const navbar: React.ReactElement = (
29+
<Navbar
30+
logo={
31+
<>
32+
<img
33+
src="/cal-docs-logo.svg"
34+
alt="Cal.diy Docs"
35+
height={26}
36+
className="logo-light"
37+
style={{ height: 26 }}
38+
/>
39+
<img
40+
src="/cal-docs-logo-white.svg"
41+
alt="Cal.diy Docs"
42+
height={26}
43+
className="logo-dark"
44+
style={{ height: 26 }}
45+
/>
46+
</>
47+
}
48+
/>
49+
);
50+
51+
const footer: React.ReactElement = (
52+
<Footer>
53+
<small>
54+
Cal.diy is the open source community edition of Cal.com. Cal.com® and Cal®
55+
are a registered trademark by Cal.com, Inc. All rights reserved.
56+
</small>
57+
</Footer>
58+
);
59+
60+
export const metadata: { title: string; description: string } = {
61+
title: "Cal.com Docs",
62+
description: "Cal.com self-hosting documentation",
63+
};
64+
65+
export default async function RootLayout({
66+
children,
67+
}: {
68+
children: React.ReactNode;
69+
}) {
70+
return (
71+
<html
72+
lang="en"
73+
dir="ltr"
74+
suppressHydrationWarning
75+
className={`${calSans.variable} ${calSansUI.variable}`}
76+
>
77+
<Head />
78+
<body>
79+
<Layout
80+
navbar={navbar}
81+
pageMap={await getPageMap()}
82+
docsRepositoryBase="https://github.com/calcom/cal.com/tree/main/apps/docs"
83+
footer={footer}
84+
>
85+
{children}
86+
</Layout>
87+
</body>
88+
</html>
89+
);
90+
}

‎apps/docs/app/logo.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.logo-dark {
2+
display: none;
3+
}
4+
5+
html.dark .logo-light {
6+
display: none;
7+
}
8+
9+
html.dark .logo-dark {
10+
display: block;
11+
}

‎apps/docs/content/_meta.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
export default {
2+
index: "Introduction",
3+
"-- getting-started": {
4+
type: "separator",
5+
title: "Getting Started",
6+
},
7+
installation: "Installation",
8+
"database-migrations": "Database Migrations",
9+
upgrading: "Upgrading",
10+
docker: "Docker",
11+
apps: "Apps",
12+
"-- deployments": {
13+
type: "separator",
14+
title: "Deployments",
15+
},
16+
deployments: "Deployments",
17+
};

‎apps/docs/content/apps/_meta.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export default {
2+
google: "Google",
3+
microsoft: "Microsoft",
4+
zoom: "Zoom",
5+
daily: "Daily",
6+
hubspot: "HubSpot",
7+
sendgrid: "Sendgrid",
8+
stripe: "Stripe",
9+
twilio: "Twilio",
10+
zoho: "Zoho",
11+
};

‎apps/docs/content/apps/daily.mdx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Daily
2+
3+
#### Obtaining Daily API Credentials
4+
5+
1. **Open Daily and sign into your account** - Go to [Daily](https://daily.co) and sign into your account.
6+
7+
2. **Navigate to the Developers tab** - From within your dashboard, go to the developers tab.
8+
9+
3. **Copy your API key** - Copy the API key provided in the developers tab.
10+
11+
4. **Paste the API key into the .env file** - Now paste the API key into the `DAILY_API_KEY` field in your `.env` file.
12+
13+
5. **Set the DAILY_SCALE_PLAN variable (optional)** - If you have the Daily Scale Plan, set the `DAILY_SCALE_PLAN` variable to `true` in the `.env` file to use features like video recording.

‎apps/docs/content/apps/google.mdx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# Google
2+
3+
#### Obtaining the Google API Credentials
4+
5+
1. **Open Google API Console** - Go to [Google API Console](https://console.cloud.google.com/apis/dashboard). If you don't have a project in your Google Cloud subscription, create one before proceeding. Under the Dashboard pane, select "Enable APIs and Services".
6+
7+
2. **Search for the Google Calendar API** - In the search box, type "calendar" and select the Google Calendar API search result.
8+
9+
3. **Enable the Google Calendar API** - Enable the selected API to proceed.
10+
11+
4. **Configure the OAuth Consent Screen** - Go to the [OAuth consent screen](https://console.cloud.google.com/apis/credentials/consent) from the side pane. Select the app type (Internal or External) and enter the basic app details on the first page.
12+
13+
5. **Add Calendar Scopes** - On the Scopes page, select "Add or Remove Scopes". Search for Calendar.event and select the scopes with values `.../auth/calendar.events`, `.../auth/calendar.readonly`, and then click "Update".
14+
15+
6. **Add Test Users** - On the Test Users page, add the Google account(s) you'll be using. Verify details on the last page to complete the consent screen configuration.
16+
17+
7. **Create OAuth Credentials** - From the side pane, select [Credentials](https://console.cloud.google.com/apis/credentials) and then "Create Credentials". Choose "OAuth Client ID".
18+
19+
8. **Select Web Application as the Application Type** - Choose "Web Application" as the Application Type.
20+
21+
9. **Add Authorized Redirect URIs** - Under Authorized redirect URI's, add the URIs:
22+
23+
```
24+
<Cal.com URL>/api/integrations/googlecalendar/callback
25+
<Cal.com URL>/api/auth/callback/google
26+
```
27+
28+
Replace `<Cal.com URL>` with the URL where your application runs.
29+
30+
10. **Download the OAuth Client ID JSON** - The key will be created, redirecting you back to the Credentials page. Select the new client ID under "OAuth 2.0 Client IDs", then click "Download JSON". Copy the JSON file contents and paste the entire string into the `.env` and `.env.appStore` files under the `GOOGLE_API_CREDENTIALS` key.
31+
32+
11. **Set the Google Integration as Internal** - In the `.env` file, set the following environment variable:
33+
34+
```
35+
GOOGLE_LOGIN_ENABLED=false
36+
```
37+
38+
This will configure the Google integration as an Internal app, restricting login access.
39+
40+
### Adding Google Calendar to Cal.com App Store
41+
42+
After adding Google credentials, you can now add the Google Calendar App to the app store. Repopulate the App store by running:
43+
44+
1. **Repopulate App Store** - Run `pnpm db-seed` to update the app store and include the newly added Google Calendar integration.

‎apps/docs/content/apps/hubspot.mdx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# HubSpot
2+
3+
### Obtaining HubSpot Client ID and Secret
4+
5+
1. **Sign into HubSpot Developer** - Go to [HubSpot Developer](https://developers.hubspot.com/) and sign into your account, or create a new one.
6+
7+
2. **Navigate to Manage Apps** - From the Developer account home page, go to "Manage apps".
8+
9+
3. **Create a new app** - Click the "Create app" button located at the top right corner of the page.
10+
11+
4. **Fill in App Information** - In the "App info" tab, fill in any information you want for your app.
12+
13+
5. **Go to the Auth tab** - Navigate to the "Auth" tab to set up authentication for the app.
14+
15+
6. **Copy Client ID and Client Secret** - Copy the Client ID and Client Secret and add them to your `.env` file under the fields:
16+
17+
```
18+
HUBSPOT_CLIENT_ID
19+
HUBSPOT_CLIENT_SECRET
20+
```
21+
22+
7. **Set the Redirect URL for OAuth** - Set the Redirect URL for OAuth to:
23+
24+
```
25+
<Cal.com URL>/api/integrations/hubspot/callback
26+
```
27+
28+
Replace `<Cal.com URL>` with the URL where your application is hosted.
29+
30+
8. **Select Required Scopes** - In the "Scopes" section, select "Read" and "Write" for the scope called `crm.objects.contacts`.
31+
32+
9. **Save the Application** - Click the "Save" button at the bottom of the page.
33+
34+
10. **Complete HubSpot Integration** - You're all set! Any booking in Cal.com will now be created as a meeting in HubSpot for your contacts.

‎apps/docs/content/apps/microsoft.mdx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Microsoft
2+
3+
#### Obtaining Microsoft Graph Client ID and Secret
4+
5+
1. **Open Azure App Registration** - Go to [Azure App Registration](https://portal.azure.com/#blade/Microsoft_AAD_RegisteredApps/ApplicationsListBlade) and select "New registration".
6+
7+
2. **Name your application** - Provide a name for your application to proceed with the registration.
8+
9+
3. **Set who can use this application** - Set "Who can use this application or access this API?" to "Accounts in any organizational directory (Any Azure AD directory - Multitenant)".
10+
11+
4. **Configure the Web redirect URI** - Set the Web redirect URI to:
12+
13+
```
14+
<Cal.com URL>/api/integrations/office365calendar/callback
15+
```
16+
17+
Replace `<Cal.com URL>` with the URL where your application runs.
18+
19+
5. **Obtain and set the MS_GRAPH_CLIENT_ID** - Use the Application (client) ID as the value for `MS_GRAPH_CLIENT_ID` in your `.env` file.
20+
21+
6. **Create a client secret and set MS_GRAPH_CLIENT_SECRET** - Click on "Certificates & secrets", create a new client secret, and use the generated value as the `MS_GRAPH_CLIENT_SECRET` in your `.env` file.

0 commit comments

Comments
 (0)