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,4 +1,4 @@
import { defineConfig } from 'vite';
import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
import type { Plugin } from "vite";
@ -64,3 +64,13 @@ export function sourcemapExclude(opts?: SourcemapExclude): Plugin {
};
}
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';
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");
});