From cf20f27a32c3ce783ef2b8f6b70df00c7dbb5e28 Mon Sep 17 00:00:00 2001
From: sage <laymonage@gmail.com>
Date: Sat, 18 Sep 2021 14:20:37 +0700
Subject: [PATCH] Get app host from environment variable

---
 .env.example                 | 1 +
 components/Configuration.tsx | 5 +++--
 services/config.ts           | 2 ++
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/.env.example b/.env.example
index e2a039e3c..c3819a028 100644
--- a/.env.example
+++ b/.env.example
@@ -7,3 +7,4 @@ ENCRYPTION_PASSWORD=s0m3r4nd0mstr1ng!w1thh1gh3ntr0pys0m3r4nd0mstr1ngw1thh1gh3ntr
 # The usage is different from the values in giscus.json.
 ORIGINS=["https://giscus.app", "https://giscus.vercel.app"]
 ORIGINS_REGEX=["http://localhost:[0-9]+"]
+NEXT_PUBLIC_GISCUS_APP_HOST_=https://giscus.app
diff --git a/components/Configuration.tsx b/components/Configuration.tsx
index dae0a2837..49f941dd6 100644
--- a/components/Configuration.tsx
+++ b/components/Configuration.tsx
@@ -4,6 +4,7 @@ import { handleClipboardCopy } from '../lib/adapter';
 import { useDebounce } from '../lib/hooks';
 import { ICategory } from '../lib/types/adapter';
 import { Theme } from '../lib/variables';
+import { GISCUS_APP_HOST } from '../services/config';
 import { getCategories } from '../services/giscus/categories';
 
 interface IDirectConfig {
@@ -446,7 +447,7 @@ export default function Configuration({ directConfig, onDirectConfigChange }: IC
             onChange={(event) => onDirectConfigChange('themeUrl', event.target.value as Theme)}
             type="text"
             className="my-2 px-[12px] py-[5px] min-w-[75%] sm:min-w-[50%] form-control border rounded-md placeholder-gray-500"
-            placeholder="https://giscus.app/themes/custom_example.css"
+            placeholder={`${GISCUS_APP_HOST}/themes/custom_example.css`}
           />
 
           <p className="text-xs color-text-danger">
@@ -466,7 +467,7 @@ export default function Configuration({ directConfig, onDirectConfigChange }: IC
         <pre>
           <span className="pl-kos">{'<'}</span>
           <span className="pl-ent">script</span> <span className="pl-c1">src</span>={'"'}
-          <span className="pl-s">https://giscus.app/client.js</span>
+          <span className="pl-s">{GISCUS_APP_HOST}/client.js</span>
           {'"\n        '}
           <span className="pl-c1">data-repo</span>={'"'}
           <span className="pl-s">{config.repository || '[ENTER REPO HERE]'}</span>
diff --git a/services/config.ts b/services/config.ts
index fb163f6c0..4ff7b1255 100644
--- a/services/config.ts
+++ b/services/config.ts
@@ -13,3 +13,5 @@ export const GITHUB_REPO_INSTALLATION_URL = (repoWithOwner: string) =>
 
 export const GITHUB_ACCESS_TOKEN_URL = (id: string) =>
   `${GITHUB_INSTALLATIONS_URL}/${id}/access_tokens`;
+
+export const GISCUS_APP_HOST = process.env.NEXT_PUBLIC_GISCUS_APP_HOST as string;