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: # Server URL configuration:
########################### ###########################

View file

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

View file

@ -9,7 +9,7 @@ export default function Footer() {
rel="noreferrer" rel="noreferrer"
className="underline" className="underline"
> >
ChatGPT Clone {import.meta.env.VITE_APP_TITLE || "ChatGPT Clone"}
</a> </a>
. Serves and searches all conversations reliably. All AI convos under one house. Pay per call and not . Serves and searches all conversations reliably. All AI convos under one house. Pay per call and not
per month (cents compared to dollars). 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="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"> <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]"> <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> </h1>
<div className="items-start gap-3.5 text-center md:flex"> <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"> <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 react from '@vitejs/plugin-react';
import path from 'path'; import path from 'path';
import type { Plugin } from "vite"; 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'; import { expect, test } from '@playwright/test';
test('landing page', async ({ page }) => { test('landing page', async ({ page }) => {
await page.goto('http://localhost:3080/'); await page.goto('http://localhost:3080/');
// expect (await page.title()).toBe('ChatGPT Clone'); // 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");
}); });