feat: Frontend app title environment variable (#291)

* Add app name change support

* fix indentation
This commit is contained in:
dncc89 2023-05-18 08:23:13 +09:00 committed by GitHub
parent 782a899ab3
commit 44ea3601c9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 75 additions and 57 deletions

View file

@ -1,3 +1,10 @@
###########################
# App configuration:
###########################
# Custom app name, this text will be displayed in the landing page and the footer.
VITE_APP_TITLE="ChatGPT Clone"
###########################
# Server URL configuration:
###########################

View file

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<meta name="theme-color" content="#343541">
<title>ChatGPT Clone</title>
<title>%VITE_APP_TITLE%</title>
<link
rel="shortcut icon"
href="#"

View file

@ -9,7 +9,7 @@ export default function Footer() {
rel="noreferrer"
className="underline"
>
ChatGPT Clone
{import.meta.env.VITE_APP_TITLE || "ChatGPT Clone"}
</a>
. Serves and searches all conversations reliably. All AI convos under one house. Pay per call and not
per month (cents compared to dollars).

View file

@ -33,7 +33,7 @@ export default function Landing() {
<div className="flex h-full flex-col items-center overflow-y-auto pt-0 text-sm dark:bg-gray-800">
<div className="w-full px-6 text-gray-800 dark:text-gray-100 md:flex md:max-w-2xl md:flex-col lg:max-w-3xl">
<h1 id="landing-title" className="mt-6 ml-auto mr-auto mb-10 flex items-center justify-center gap-2 text-center text-4xl font-semibold sm:mb-16 md:mt-[10vh]">
ChatGPT Clone
{import.meta.env.VITE_APP_TITLE || "ChatGPT Clone"}
</h1>
<div className="items-start gap-3.5 text-center md:flex">
<div className="mb-8 flex flex-1 flex-col gap-3.5 md:mb-auto">

View file

@ -1,66 +1,76 @@
import { defineConfig } from 'vite';
import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
import type { Plugin } from "vite";
// https://vitejs.dev/config/
export default defineConfig({
server: {
host: 'localhost',
port: 3090,
strictPort: false,
proxy: {
'/api': {
target: 'http://localhost:3080',
changeOrigin: true
},
'/auth': {
target: 'http://localhost:3080',
changeOrigin: true
},
'/oauth': {
target: 'http://localhost:3080',
changeOrigin: true
}
}
},
plugins: [react(), sourcemapExclude({excludeNodeModules: true})],
publicDir: './public',
build: {
sourcemap: true,
outDir: './dist',
rollupOptions: {
output: {
manualChunks: id => {
if (id.includes('node_modules')) {
return 'vendor';
}
server: {
host: 'localhost',
port: 3090,
strictPort: false,
proxy: {
'/api': {
target: 'http://localhost:3080',
changeOrigin: true
},
'/auth': {
target: 'http://localhost:3080',
changeOrigin: true
},
'/oauth': {
target: 'http://localhost:3080',
changeOrigin: true
}
}
},
plugins: [react(), sourcemapExclude({ excludeNodeModules: true })],
publicDir: './public',
build: {
sourcemap: true,
outDir: './dist',
rollupOptions: {
output: {
manualChunks: id => {
if (id.includes('node_modules')) {
return 'vendor';
}
}
}
}
},
resolve: {
alias: {
'~': path.join(__dirname, 'src/')
}
}
}
},
resolve: {
alias: {
'~': path.join(__dirname, 'src/')
}
}
});
interface SourcemapExclude {
excludeNodeModules?: boolean;
excludeNodeModules?: boolean;
}
export function sourcemapExclude(opts?: SourcemapExclude): Plugin {
return {
name: "sourcemap-exclude",
transform(code: string, id: string) {
if (opts?.excludeNodeModules && id.includes("node_modules")) {
return {
code,
// https://github.com/rollup/rollup/blob/master/docs/plugin-development/index.md#source-code-transformations
map: { mappings: "" },
};
}
},
};
return {
name: "sourcemap-exclude",
transform(code: string, id: string) {
if (opts?.excludeNodeModules && id.includes("node_modules")) {
return {
code,
// https://github.com/rollup/rollup/blob/master/docs/plugin-development/index.md#source-code-transformations
map: { mappings: "" },
};
}
},
};
}
function htmlPlugin(env: ReturnType<typeof loadEnv>) {
return {
name: "html-transform",
transformIndexHtml: {
enforce: "pre" as const,
transform: (html: string): string =>
html.replace(/%(.*?)%/g, (match, p1) => env[p1] ?? match),
},
};
}

View file

@ -1,7 +1,8 @@
import {expect, test} from '@playwright/test';
import { expect, test } from '@playwright/test';
test('landing page', async ({page}) => {
test('landing page', async ({ page }) => {
await page.goto('http://localhost:3080/');
// expect (await page.title()).toBe('ChatGPT Clone');
expect (await page.textContent('#landing-title')).toBe('ChatGPT Clone');
expect(await page.textContent('#landing-title')).toBe(import.meta.env.VITE_APP_TITLE || "ChatGPT Clone");
});