refactor: use env.config

.env

@@ -0,0 +1,3 @@
+# `.env.local` always overrides the defaults set.
+# see more https://nextjs.org/docs/basic-features/environment-variables
+NEXT_PUBLIC_SITE_NAME=mkn

src/components/FooterNav/FooterNav.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import cx from 'classnames';
 
+import { pkgConfig, envConfig } from '@/configs';
+
 import styles from './style.module.less';
 
 interface IProps {
@@ -20,9 +22,13 @@ export const FooterNav: React.FC<IProps> = (props) => (
     style={props.style}
   >
     © {new Date().getFullYear()}
-    <a href="https://github.com/SolidZORO/mkn" target="_blank" rel="noreferrer">
-      mkn
+    <a
+      href={`https://github.com/SolidZORO/${pkgConfig.name}`}
+      target="_blank"
+      rel="noreferrer"
+    >
+      {envConfig.NEXT_PUBLIC_SITE_NAME}
     </a>{' '}
-    by Jason
+    by {pkgConfig.author.split(' ')[0]}
   </div>
 );

src/components/HtmlMeta/HtmlMeta.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Helmet } from 'react-helmet-async';
 
+import { envConfig } from '@/configs';
+
 interface IProps {
   title: React.ReactNode;
   disableSiteName?: boolean;
@@ -11,7 +13,9 @@ interface IProps {
 }
 
 export const HtmlMeta: React.FC<IProps> = (props) => {
-  const siteName = props.disableSiteName ? '' : ` - mkn`;
+  const siteName = props.disableSiteName
+    ? ''
+    : ` - ${envConfig.NEXT_PUBLIC_SITE_NAME}`;
 
   return (
     <Helmet>

src/configs/env.config.ts

@@ -0,0 +1,6 @@
+import { IDotEnv } from '@/interfaces';
+
+// can't pass { ...env } parsing, MUST correspond to 1 to 1
+export const envConfig: IDotEnv = {
+  NEXT_PUBLIC_SITE_NAME: (process.env as IDotEnv).NEXT_PUBLIC_SITE_NAME,
+};

src/configs/index.ts

@@ -1,2 +1,3 @@
 export * from './env.config';
-export * from './build.config';
+// export * from './build.config';
+export * from './pkg.config';

src/configs/pkg.config.ts

@@ -1,12 +1,3 @@
-import { IBuild, IDotEnv } from '@/interfaces';
+import pkg from '../../package.json';
 
-const envConfig: IDotEnv = (process.env as unknown) as IDotEnv;
-
-export const buildConfig: IBuild = envConfig?.BUILD_DATA || {
-  BUILDTIME: '',
-  MODE: '',
-  VERSION: '',
-  VERSION_DASH: '',
-  VERSION_HASH: '',
-  VERSION_NUMBER: '',
-};
+export const pkgConfig = pkg;

src/hooks/index.ts

@@ -1 +1 @@
-export { default as useDarkMode } from './useDarkMode';
+export { useDarkMode } from './useDarkMode';

src/interfaces/config.interface.ts

@@ -0,0 +1,13 @@
+export interface IDotEnv {
+  NEXT_PUBLIC_SITE_NAME?: string;
+  // NEXT_PUBLIC_BUILD_DATA?: IBuild;
+}
+
+export interface IBuild {
+  MODE: string;
+  VERSION: string;
+  VERSION_DASH: string;
+  VERSION_NUMBER: string;
+  VERSION_HASH: string;
+  BUILDTIME: string;
+}

src/interfaces/index.ts

@@ -1 +1,2 @@
 export * from './router.interface';
+export * from './config.interface';

src/layouts/index.tsx

@@ -1,2 +1,2 @@
 /* eslint-disable max-len, import/prefer-default-export */
-export { default as MasterLayout } from './MasterLayout/MasterLayout';
+export { MasterLayout } from './MasterLayout/MasterLayout';

src/page-components/about/About/About.tsx

@@ -18,5 +18,6 @@ export const About: React.FC<IProps> = (props) => (
     <HtmlMeta title="About" />
 
     <HugeIcon icon={<FiPercent />} />
+    {JSON.stringify(process.env.NEXT_PUBLIC_SITE_NAME)}
   </PageContainer>
 );

src/pages/_app.tsx

@@ -32,7 +32,7 @@ export default function CustomApp({ Component, pageProps }: any) {
 
   return (
     <ErrorBoundary>
-      <div className="app">
+      <div id="root">
         <HelmetProvider>{layoutDom}</HelmetProvider>
       </div>
     </ErrorBoundary>

src/styles/global.less

@@ -19,7 +19,7 @@ html,
 body,
 #root,
 #__next,
-.app {
+#app {
   height: 100%;
 }