Config cleanup

ramicaza · Mar 27, 2023 · 90b267a · 90b267a
1 parent ed7333a
commit 90b267a
Show file tree

Hide file tree

Showing 11 changed files with 95 additions and 78 deletions.
diff --git a/.env.example b/.env.example
@@ -0,0 +1,2 @@
+# Set the backend API key for OpenAI, so that users don't have to provide one
+OPENAI_API_KEY=
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,3 +1,3 @@
 {
   "extends": "next/core-web-vitals"
-}
+}
diff --git a/components/Composer.tsx b/components/Composer.tsx
@@ -10,8 +10,8 @@ import StopOutlinedIcon from '@mui/icons-material/StopOutlined';
 import TelegramIcon from '@mui/icons-material/Telegram';
 
 import { NoSSR } from './util/NoSSR';
-import { useComposerStore } from '../lib/store';
-import { useSpeechRecognition } from '../lib/use-speech-recognition';
+import { useComposerStore } from '@/lib/store';
+import { useSpeechRecognition } from '@/lib/use-speech-recognition';
 
 
 /// Text template helpers

diff --git a/components/SettingsModal.tsx b/components/SettingsModal.tsx
@@ -3,10 +3,10 @@ import { shallow } from 'zustand/shallow';
 
 import { Box, Button, Input, Modal, ModalClose, ModalDialog, Option, Select, Typography } from '@mui/joy';
 
-import { ChatModelId, ChatModels } from '../lib/data';
+import { ChatModelId, ChatModels } from '@/lib/data';
 import { Link } from './util/Link';
 import { NoSSR } from './util/NoSSR';
-import { useSettingsStore } from '../lib/store';
+import { useSettingsStore } from '@/lib/store';
 
 
 export const isValidOpenAIApiKey = (apiKey?: string) =>

diff --git a/lib/theme.ts b/lib/theme.ts
@@ -0,0 +1,49 @@
+import createCache from '@emotion/cache';
+import { Inter, JetBrains_Mono } from 'next/font/google';
+import { extendTheme } from '@mui/joy';
+
+
+// Theme & Fonts
+
+const inter = Inter({
+  weight: ['400', '500', '600', '700'],
+  subsets: ['latin'],
+  display: 'swap',
+  fallback: ['Helvetica', 'Arial', 'sans-serif'],
+});
+
+const jetBrainsMono = JetBrains_Mono({
+  weight: ['400', '500', '600', '700'],
+  subsets: ['latin'],
+  display: 'swap',
+  fallback: ['monospace'],
+});
+
+export const theme = extendTheme({
+  fontFamily: {
+    body: inter.style.fontFamily,
+    code: jetBrainsMono.style.fontFamily,
+  },
+});
+
+export const bodyFontClassName = inter.className;
+
+
+// Emotion Cache (with insertion point on the SSR pass)
+
+const isBrowser = typeof document !== 'undefined';
+
+export function createEmotionCache() {
+  let insertionPoint;
+
+  if (isBrowser) {
+    // On the client side, _document.tsx has a meta tag with the name "emotion-insertion-point" at the top of the <head>.
+    // This assures that MUI styles are loaded first, and allows allows developers to easily override MUI styles with other solutions like CSS modules.
+    const emotionInsertionPoint = document.querySelector<HTMLMetaElement>(
+      'meta[name="emotion-insertion-point"]',
+    );
+    insertionPoint = emotionInsertionPoint ?? undefined;
+  }
+
+  return createCache({ key: 'mui-style', insertionPoint });
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nextjs-chatgpt-app",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -24,7 +24,7 @@
     "zustand": "^4.3.6"
   },
   "devDependencies": {
-    "@types/node": "^18.15.8",
+    "@types/node": "^18.15.10",
     "@types/prismjs": "^1.26.0",
     "@types/react": "^18.0.29",
     "@types/react-dom": "^18.0.11",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,61 +1,16 @@
 import * as React from 'react';
 import Head from 'next/head';
-import createCache from '@emotion/cache';
 import { Analytics as VercelAnalytics } from '@vercel/analytics/react';
 import { AppProps } from 'next/app';
 import { CacheProvider, EmotionCache } from '@emotion/react';
-import { CssBaseline, CssVarsProvider, extendTheme } from '@mui/joy';
-import { Inter, JetBrains_Mono } from 'next/font/google';
+import { CssBaseline, CssVarsProvider } from '@mui/joy';
 
-
-// Application Theme (JoyUI = MUI) & Fonts (Next.js)
-
-const inter = Inter({
-  weight: ['400', '500', '600', '700'],
-  subsets: ['latin'],
-  display: 'swap',
-  fallback: ['Helvetica', 'Arial', 'sans-serif'],
-});
-
-const jetBrainsMono = JetBrains_Mono({
-  weight: ['400', '500', '600', '700'],
-  subsets: ['latin'],
-  display: 'swap',
-  fallback: ['monospace'],
-});
-
-const theme = extendTheme({
-  fontFamily: {
-    body: inter.style.fontFamily,
-    code: jetBrainsMono.style.fontFamily,
-  },
-});
-
-export const bodyFontClassName = inter.className;
+import { createEmotionCache, theme } from '@/lib/theme';
 
 
 // Client-side cache, shared for the whole session of the user in the browser.
-
-const isBrowser = typeof document !== 'undefined';
-
-export function createEmotionCache() {
-  let insertionPoint;
-
-  if (isBrowser) {
-    // On the client side, _document.tsx has a meta tag with the name "emotion-insertion-point" at the top of the <head>.
-    // This assures that MUI styles are loaded first, and allows allows developers to easily override MUI styles with other solutions like CSS modules.
-    const emotionInsertionPoint = document.querySelector<HTMLMetaElement>(
-      'meta[name="emotion-insertion-point"]',
-    );
-    insertionPoint = emotionInsertionPoint ?? undefined;
-  }
-
-  return createCache({ key: 'mui-style', insertionPoint });
-}
-
 const clientSideEmotionCache = createEmotionCache();
 
-
 export interface MyAppProps extends AppProps {
   emotionCache?: EmotionCache;
 }

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { AppType } from 'next/app';
-import Document, { DocumentContext, DocumentProps, Head, Html, Main, NextScript } from 'next/document';
-
+import { default as Document, DocumentContext, DocumentProps, Head, Html, Main, NextScript } from 'next/document';
 import createEmotionServer from '@emotion/server/create-instance';
 import { getInitColorSchemeScript } from '@mui/joy/styles';
 
-import { bodyFontClassName, createEmotionCache, MyAppProps } from './_app';
+import { MyAppProps } from './_app';
+import { bodyFontClassName, createEmotionCache } from '@/lib/theme';
 
 
 interface MyDocumentProps extends DocumentProps {

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -8,12 +8,12 @@ import SmartToyOutlinedIcon from '@mui/icons-material/SmartToyOutlined';
 import SmartToyTwoToneIcon from '@mui/icons-material/SmartToyTwoTone';
 
 import { ApiChatInput } from './api/chat';
-import { ChatModels, SystemPurposeId, SystemPurposes } from '../lib/data';
-import { Composer } from '../components/Composer';
-import { Message, UiMessage } from '../components/Message';
-import { NoSSR } from '../components/util/NoSSR';
-import { isValidOpenAIApiKey, SettingsModal } from '../components/SettingsModal';
-import { useSettingsStore } from '../lib/store';
+import { ChatModels, SystemPurposeId, SystemPurposes } from '@/lib/data';
+import { Composer } from '@/components/Composer';
+import { Message, UiMessage } from '@/components/Message';
+import { NoSSR } from '@/components/util/NoSSR';
+import { isValidOpenAIApiKey, SettingsModal } from '@/components/SettingsModal';
+import { useSettingsStore } from '@/lib/store';
 
 
 /// UI Messages configuration

diff --git a/tsconfig.json b/tsconfig.json
@@ -4,6 +4,7 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
+    "baseUrl": ".",
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
@@ -15,6 +16,10 @@
     "jsx": "preserve",
     "incremental": true,
     "jsxImportSource": "@emotion/react",
+    "paths": {
+      "@/components/*": ["components/*"],
+      "@/lib/*": ["lib/*"]
+    },
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Set the backend API key for OpenAI, so that users don't have to provide one
		OPENAI_API_KEY=