add option preview

Author: tachibana-shin

.env.example

@@ -1,3 +1,4 @@
 API_URL=http://localhost:8000/api
+PREVIEW_URL=http://localhost:9999
 OAUTH2_GOOGLE_CLIENT_ID="string"
 OAUTH2_GITHUB_CLIENT_ID="string"

quasar.config.js

@@ -69,6 +69,14 @@ module.exports = configure(function (/* ctx */) {
         CODESPACE_NAME: process.env.CODESPACE_NAME,
         GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN:
           process.env.GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN,
+        PREVIEW_URL: process.env.GITPOD_WORKSPACE_URL
+          ? process.env.GITPOD_WORKSPACE_URL.replace(
+              "https://",
+              "https://9999-"
+            )
+          : process.env.CODESPACE_NAME
+          ? `https://${process.env.CODESPACE_NAME}-9999.${process.env.GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN}`
+          : undefined,
         ...require("dotenv").config().parsed,
       },
       rawDefine: {

src/boot/auth.ts

@@ -54,7 +54,7 @@ export function loginWithGoogle() {
   // Parameters to pass to OAuth 2.0 endpoint.
   const params = {
     client_id: process.env.OAUTH2_GOOGLE_CLIENT_ID,
-    redirect_uri: `${APP_URL}login?oauth2=true&type=google`,
+    redirect_uri: `${location.origin}/login?oauth2=true&type=google`,
     response_type: "id_token",
     scope: "email profile openid",
     nonce: "1",
@@ -72,7 +72,7 @@ export function loginWithGithub() {
   // Parameters to pass to OAuth 2.0 endpoint.
   const params = {
     client_id: process.env.OAUTH2_GITHUB_CLIENT_ID,
-    redirect_uri: `${APP_URL}login?oauth2=true&type=github`,
+    redirect_uri: `${location.origin}login?oauth2=true&type=github`,
     scope: "read:user user:email",
   }
 

src/components/sketch/SketchMain/Preview/Preview.vue

@@ -53,13 +53,7 @@ const watchFs = new WatcherFs()
 const iframeLoading = ref(true)
 // ====== /status ======
 
-const srcIFrame = ref(
-  process.env.GITPOD_WORKSPACE_URL
-    ? process.env.GITPOD_WORKSPACE_URL.replace("https://", "https://9999-")
-    : process.env.CODESPACE_NAME
-    ? `https://${process.env.CODESPACE_NAME}-9999.${process.env.GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN}`
-    : "https://preview-fcanvas.github.io"
-)
+const srcIFrame = ref(process.env.PREVIEW_URL)
 
 // eslint-disable-next-line functional/no-let
 let listenerGetFile: null | (() => void) = null

src/constants/index.ts

@@ -3,10 +3,4 @@ export const isNative =
   import.meta.env.MODE === "ios" ||
   import.meta.env.MODE === "electron"
 
-export const APP_URL = process.env.GITPOD_WORKSPACE_URL
-  ? process.env.GITPOD_WORKSPACE_URL.replace("https://", "https://9000-") + "/"
-  : process.env.CODESPACE_NAME
-  ? `${process.env.CODESPACE_NAME}-9000.${process.env.GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN}/`
-  : process.env.API_URL
-
 export const FILE_ICON_THEMES = ["material-icon-theme", "material-theme-icon"]

src/env.d.ts

@@ -4,6 +4,7 @@ declare namespace NodeJS {
     VUE_ROUTER_MODE: "hash" | "history" | "abstract" | undefined
     VUE_ROUTER_BASE: string | undefined
     API_URL: string
+    PREVIEW_URL: string
     OAUTH2_GOOGLE_CLIENT_ID: string
     OAUTH2_GITHUB_CLIENT_ID: string
   }

src/globals.d.ts

@@ -1 +0,0 @@
-declare const API_URL: string