Fix theme config, and made redirect URI instructions consistent

jamesread · jamesread · commit b7c0ae788ba6 · 2024-12-02T17:20:23.000Z
diff --git a/components/snippets/oauth2redirect.mdx b/components/snippets/oauth2redirect.mdx
diff --git a/components/snippets/oauth2redirect.tsx b/components/snippets/oauth2redirect.tsx
@@ -0,0 +1,27 @@
+import type { ReactElement } from 'react';
+
+type OAuth2RedirectProps = {
+	provider?: string
+}
+
+export default function OAuth2Redirect({
+	provider,
+}: OAuth2RedirectProps): ReactElement {
+  return <div>
+  	<br />
+  	<p>
+	The OAuth2 Redirect URI is the location where the provider will redirect to after trying to login. This needs to set to your Postiz <code className = "nextra-code">FRONTEND_URL</code> + <code className = "nextra-code">/integrations/social/</code> + <code className = "nextra-code">{provider}</code>.
+	</p>
+
+	<ul className = "[:is(ol,ul)_&]:_my-3 [&:not(:first-child)]:_mt-6 _list-disc ltr:_ml-6 rtl:_mr-6">
+		<li>eg: If you are running on a container, and your Postiz URL is: <code className = "nextra-code">https://postiz.example.com</code>, then your OAuth2 Redirect URI is <code className = "nextra-code">https://postiz.example.com/integrations/social/{provider}</code></li>
+		<li>eg: If you are running on localhost, and your Postiz URL is <code className = "nextra-code">http://localhost:4200</code>, then your OAuth2 Redirect URI is <code className = "nextra-code">http://localhost:4200/integrations/social/{provider}</code></li>
+	</ul>
+
+	<br />
+
+	<p>
+	You only need to set one OAuth2 Redirect URI when you are setting up your Postiz app.
+	</p>
+  </div>;
+}
diff --git a/pages/providers/discord.mdx b/pages/providers/discord.mdx
@@ -4,7 +4,7 @@ description: How to add discord to your system
 ---
 
 import {Steps, Callout} from "nextra/components";
-import OAuth2Redirect from "../../components/snippets/oauth2redirect.mdx";
+import OAuth2Redirect from "../../components/snippets/oauth2redirect.tsx";
 
 <Callout>
 This integration requires that you have **Manage Server** permissions on the Discord server you want to integrate with.
@@ -30,7 +30,7 @@ DISCORD_CLIENT_SECRET="your_client_secret"
 
 ### Add a Redirect URI
 
-<OAuth2Redirect />
+<OAuth2Redirect provider = "discord" />
 
 The redirect URI is the URL that Discord will redirect to after you have logged in. Assuming you are running Postiz on `postiz.example.com`, this would be: `https://postiz.example.com/integrations/social/discord`. Alternatively if you are running on `localhost:4200`, this would be `http://localhost:4200/integrations/social/discord`. You only really need one of these, depending on where you are running Postiz.
 
diff --git a/pages/providers/dribbble.mdx b/pages/providers/dribbble.mdx
@@ -4,6 +4,7 @@ description: How to add Dribbble to your system
 ---
 
 import {Steps, Callout} from "nextra/components";
+import OAuth2Redirect from "../../components/snippets/oauth2redirect.tsx";
 
 <Steps>
 
@@ -14,7 +15,9 @@ import {Steps, Callout} from "nextra/components";
 * **Name:** `MyPostizInstance`
 * **Description:** `My Postiz Instance`
 * **Website:** `https://example.com`
-* **Redirect URI:** `http://localhost:4200/integrations/social/dribbble`
+* **Redirect URI:** (see below)
+
+<OAuth2Redirect provider = "dribble" />
 
 ### Copy your client secret to environment variables
 
diff --git a/pages/providers/facebook.mdx b/pages/providers/facebook.mdx
@@ -4,6 +4,7 @@ description: How to add Facebook to your system
 ---
 
 import {Steps, Callout} from "nextra/components";
+import OAuth2Redirect from "../../components/snippets/oauth2redirect.tsx";
 
 <Callout type="warning">
 	**NOTE:** Please be advised that Instagram and Facebook can use the same app (no need to create two separate apps)
@@ -42,7 +43,7 @@ Set up login for business
 Set up a redirect URI back to the application
 ![step 6](https://github.com/user-attachments/assets/8bf1774b-b6fe-4ac6-aea5-97d8c8bbf5da)
 
-The default dev container redirect URI is `http://localhost:4200/integrations/social/facebook`
+<OAuth2Redirect provider = "facebook" />
 
 ### Step 7
 ![step 7](https://github.com/user-attachments/assets/a81aa2a3-de66-4099-906b-b78c641d1a23)
@@ -66,4 +67,4 @@ FACEBOOK_APP_SECRET="app secret"
 ```
 
 Facebook should now be working!
-</Steps>
+</Steps>
diff --git a/pages/providers/instagram.mdx b/pages/providers/instagram.mdx
@@ -4,6 +4,7 @@ description: How to add Instagram to your system
 ---
 
 import {Steps, Callout} from "nextra/components";
+import OAuth2Redirect from "../../components/snippets/oauth2redirect.tsx";
 
 <Callout type="warning">
 	**NOTE:** Please be advised that Instagram and Facebook can use the same app (no need to create two separate apps)
@@ -42,7 +43,7 @@ Set up login for business
 Set up a redirect URI back to the application
 ![Instagram](https://github.com/user-attachments/assets/78496d3f-3b84-4724-afc8-ed217d892c6d)
 
-The default dev container redirect URI is `http://localhost:4200/integrations/social/instagram`
+<OAuth2Redirect provider = "instagram" />
 
 ### Step 7
 ![step 7](https://github.com/user-attachments/assets/a81aa2a3-de66-4099-906b-b78c641d1a23)
@@ -67,4 +68,4 @@ INSTAGRAM_APP_SECRET="app secret"
 ```
 
 Instagram should now be working!
-</Steps>
+</Steps>
diff --git a/pages/providers/linkedin.mdx b/pages/providers/linkedin.mdx
@@ -3,6 +3,8 @@ title: Linkedin
 description: How to add Linkedin to your system
 ---
 
+import OAuth2Redirect from "../../components/snippets/oauth2redirect.tsx";
+
 Head over to [Linkedin developers](https://www.linkedin.com/developers/apps) and create a new app.
 ![Linkedin](/images/providers/linkedin/linkedin-001.png)
 
@@ -11,9 +13,9 @@ Fill in all the details, once created head over to Products and make sure you ad
 
 It is important to request the Advertising API permissions and fill up the request form, or you will not have the ability to refresh your tokens.
 
-Make sure your redirect URL is set to `http://localhost:4200/integrations/social/linkedin` for local development.
+<OAuth2Redirect provider = "linkedin" />
 
-For production environments set the URL redirection to 'https://YOURDOMAIN/integrations/social/linkedin' or 'https://YOURDOMAIN/integrations/social/linkedin-page'
+If you are using the "LinkedIN Page" provider, then the redirect url should be "linkedin-page".
 
 Copy the created `Client ID` and `Client Secret` and add them to your `.env` file.
 
diff --git a/pages/providers/mastodon.mdx b/pages/providers/mastodon.mdx
@@ -4,6 +4,7 @@ description: How to add Mastodon to your system
 ---
 
 import {Steps, Callout} from "nextra/components";
+import OAuth2Redirect from "../../components/snippets/oauth2redirect.tsx";
 
 <Callout type="warning">
 	**NOTE:** Postiz is currently hard-coded to use mastodon.social only. This will become more flexible to support other servers in a future release.
@@ -13,6 +14,8 @@ Mastodon client registration is not done via ther web interface, but by talking
 
 Optionally check that you have `jq` installed on your system. You can normally install this with brew, apt-get, yum or chocolatey. If you don't have `jq` installed, you can remove it from the command below.
 
+<OAuth2Redirect provider = "mastodon" />
+
 Run the following curl command in a terminal to get the Mastodon client id and client secret.
 
 ```bash
diff --git a/pages/providers/pinterest.mdx b/pages/providers/pinterest.mdx
@@ -4,6 +4,7 @@ description: How to add Pinterest to your system
 ---
 
 import {Steps, Callout} from "nextra/components";
+import OAuth2Redirect from "../../components/snippets/oauth2redirect.tsx";
 
 <Callout>
 This integration requires that you have a Pinterest Company Account.
@@ -19,7 +20,8 @@ Copy the App ID at "App id" and the Secret Key at "App secret key"
 [Copy App ID and Secret](https://github.com/egelhaus/postiz-docs/blob/cfd39114ef6d44da864717b23d704f6265cefa84/public/images/providers/pinterest/pinterest-002.png)
 
 ### Step 3 Configure Redirect URI
-Add your Redirect URI at "Redirect URIs" with the default URI "http://localhost:4200/integrations/social/pinterest
+
+<OAuth2Redirect provider = "pinterest" />
 [Setup of Redirect URIs](https://github.com/egelhaus/postiz-docs/blob/d11ea333ad8d70c5dee7ac0ad76283ded514219b/public/images/providers/pinterest/pinterest-001.png)
 
 </Steps>
@@ -29,4 +31,4 @@ PINTEREST_CLIENT_ID=""
 PINTEREST_CLIENT_SECRET=""
 ```
 
-You should now be able to add the Pinterest Provider to your User / Team Account.
+You should now be able to add the Pinterest Provider to your User / Team Account.
diff --git a/pages/providers/reddit.mdx b/pages/providers/reddit.mdx
@@ -3,8 +3,12 @@ title: Reddit
 description: How to add Reddit to your system
 ---
 
+import OAuth2Redirect from "../../components/snippets/oauth2redirect.tsx";
+
 Head over to [Reddit developers](https://www.reddit.com/prefs/apps) and create a new app.
-In the type of app, select `web app` and in the redirect uri, add `http://localhost:4200/integrations/social/reddit`.
+In the type of app, select `web app` and in the redirect uri, add your redirect URI.
+
+<OAuth2Redirect provider = "reddit" />
 
 Copy the Reddit client id and client secret and add them to your `.env` file.
 
@@ -13,4 +17,4 @@ Copy the Reddit client id and client secret and add them to your `.env` file.
 ```env
 REDDIT_CLIENT_ID=""
 REDDIT_CLIENT_SECRET=""
-```
+```
diff --git a/pages/providers/slack.mdx b/pages/providers/slack.mdx
@@ -3,8 +3,8 @@ title: Slack
 description: How to add Slack to your system
 ---
 
-
 import {Steps, Callout} from "nextra/components";
+import OAuth2Redirect from "../../components/snippets/oauth2redirect.tsx";
 
 <Callout>
 This integration requires that you have a Slack Workspace
@@ -16,8 +16,11 @@ This integration requires that you have a Slack Workspace
 Head to [Slack Applications Dashboard](https://api.slack.com/apps) and select "From scratch", fill out all the required Information.
 
 #### Step 2 Set up OAuth Scopes and redirect URIs
+
+<OAuth2Redirect provider = "slack" />
+
 Head to Features > OAuth & Permissions
-1. Add the redirect URI "http://localhost:4200/integrations/social/slack" at Redirect URLs
+1. Add the redirect URI (see above)
 2. At Scopes > Bot Token Scopes, add these Scopes:
   1. "chat:write"
   2. "channels:read"
diff --git a/pages/providers/threads.mdx b/pages/providers/threads.mdx
@@ -4,6 +4,7 @@ description: How to add Threads
 ---
 
 import {Steps, Callout} from "nextra/components";
+import OAuth2Redirect from "../../components/snippets/oauth2redirect.tsx";
 
 <Callout>
 This integration requires that you have setup a Facebook developer account already. You can start by going to the [Meta/Facebook Developer Portal](https://developers.facebook.com/apps).
@@ -49,7 +50,9 @@ Add the "threads_content_publish" and "threads_basic" (automatically selected) t
 
 * Copy your "Threads App ID", and set the postiz environment variables `THREADS_APP_ID` to this value.
 * Click the "Show" button next to the Threads App Secret, and set the postiz environment variable `THREADS_APP_SECRET` to this value. Note that the next box is quite small, make sure you scroll across the copy the full value. It should be 32 characters long.
-* Set the redirect URL to `https://postiz.example.com/integrations/social/threads` if you are running Postiz on `postiz.example.com`, or `http://localhost:4200/integrations/social/threads` if you are running on `localhost:4200`.
+
+<OAuth2Redirect provider = "threads" />
+
 ** Note that you have to "click" the URL to make it active, otherwise the form will not save.
 ** You can use the same value for the **Uninstall Callback URL** and **Delete Callback URL**, but note that Postiz does not support either at this time. The form will not save unless you enter something.
 
diff --git a/pages/providers/tiktok.mdx b/pages/providers/tiktok.mdx
@@ -5,6 +5,7 @@ description: How to add TikTok to your system
 ---
 
 import {Steps, Callout} from "nextra/components";
+import OAuth2Redirect from "../../components/snippets/oauth2redirect.tsx";
 
 <Callout>
 This integration requires that you have a TikTok developer account. It also requires that you have a public website, with https, and can upload files to that site to verify ownership.
@@ -21,7 +22,9 @@ Go here: https://developers.tiktok.com/apps
 ![Create a new app](./tiktok_create_app.png)
 
 * **App Name:** `MyPostiz`
-* **Redirect URI:** `http://localhost:4200/integrations/social/tiktok`
+* **Redirect URI:** (see below)
+
+<OAuth2Redirect provider = "tiktok" />
 
 ### Set a TOS and Privacy Policy
 
diff --git a/pages/providers/x.mdx b/pages/providers/x.mdx
@@ -3,6 +3,8 @@ title: X
 description: How to add X to your system
 ---
 
+import OAuth2Redirect from "../../components/snippets/oauth2redirect.tsx";
+
 X is a bit different.<br />
 They created an oAuth2 flow, but it works only with Twitter v2 API.<br />
 But in order to upload pictures to X, you need to use the old Twitter v1 API.<br />
@@ -21,7 +23,10 @@ The click to set up an authentication flow
 
 In the App Permission set it to `Read and Write`
 In the Type of App set it to `Web App, Automated App or Bot`
-In the App Info set the `Callback URI / Redirect URL` to `http://localhost:4200/integrations/social/x`
+In the App Info set the `Callback URI / Redirect URL`.
+
+<OAuth2Redirect provider = "x" />
+
 Save it and go to "Keys and Tokens" tab
 
 Click on "Regenerate" inside "Consumer Keys" and copy the `API Key` and `API Key Secret`.
@@ -30,4 +35,4 @@ Open .env file and add the following:
 ```env
 X_API_KEY=""
 X_API_SECRET=""
-```
+```
diff --git a/theme.config.tsx b/theme.config.tsx
@@ -3,19 +3,14 @@ import { useRouter } from "next/router";
 import { DocsThemeConfig, useConfig } from "nextra-theme-docs";
 
 const themeConfig: DocsThemeConfig = {
-  useNextSeoProps() {
-    return {
-      titleTemplate: "%s – Postiz Docs",
-    };
-  },
   head: () => {
     const router = useRouter();
     const { title, ...rest } = useConfig();
 
     const pagePath = router.asPath;
     const ogImageUrl = `https://docs.postiz.com/api/opengraph-image?title=${title}`;
 
-    const ogTitle = `${title} - Postiz`;
+    const ogTitle = `${title} - Postiz Docs`;
 
     return (
       <>
