[fix] Name Lowercase of Template Initializer

[optimize] simplify i18n imports & Component props
[optimize] update Upstream packages

.github/workflows/init-template.yml

@@ -6,6 +6,8 @@ on:
 env:
   TEMPLATE_OWNER: idea2app
   TEMPLATE_NAME: Next-Bootstrap-ts
+  REPOSITORY_OWNER: ${{ github.repository_owner }}
+  REPOSITORY_NAME: ${{ github.event.repository.name }}
 
 jobs:
   replace-repository-name:
@@ -16,13 +18,18 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
+      - name: transform Repository variables to lower case
+        run: |
+          echo "REPOSITORY_OWNER=${REPOSITORY_OWNER@L}" >> "${GITHUB_ENV}"
+          echo "REPOSITORY_NAME=${REPOSITORY_NAME@L}" >> "${GITHUB_ENV}"
+
       - if: github.repository != format('{0}/{1}', env.TEMPLATE_OWNER, env.TEMPLATE_NAME)
         run: |
           sh .github/workflows/replace-repository-name.sh \
             ${{ env.TEMPLATE_OWNER }} ${{ env.TEMPLATE_NAME }} \
-            ${{ github.repository_owner }} ${{ github.event.repository.name }}
+            ${{ env.REPOSITORY_OWNER }} ${{ env.REPOSITORY_NAME }}
           git checkout -- .github/workflows/init-template.yml
-          
+
       - uses: stefanzweifel/git-auto-commit-action@v5
         with:
           commit_message: '[fix] replace Repository Name'

.github/workflows/replace-repository-name.sh

@@ -5,6 +5,9 @@ SourceName=$2
 TargetOwner=$3
 TargetName=$4
 
-sed -i "s/$SourceOwner\/$SourceName/$TargetOwner\/$TargetName/ig" $(grep -i $SourceOwner/$SourceName -rl .)
-sed -i "s/$SourceOwner/$TargetOwner/ig" $(grep -i $SourceOwner -rl .)
-sed -i "s/$SourceName/$TargetName/ig" $(grep -i $SourceName -rl .)
+sed -i "s/$SourceOwner\/$SourceName/$TargetOwner\/$TargetName/ig" \
+    $(grep -i $SourceOwner/$SourceName -rl . --exclude-dir=.git --exclude-dir=node_modules)
+sed -i "s/$SourceOwner/$TargetOwner/ig" \
+    $(grep -i $SourceOwner -rl . --exclude-dir=.git --exclude-dir=node_modules)
+sed -i "s/$SourceName/$TargetName/ig" \
+    $(grep -i $SourceName -rl . --exclude-dir=.git --exclude-dir=node_modules)

components/Git/Card.tsx

@@ -2,13 +2,14 @@ import { text2color } from 'idea-react';
 import { GitRepository } from 'mobx-github';
 import { observer } from 'mobx-react';
 import { FC } from 'react';
-import { Badge, Button, Card, Col, Row } from 'react-bootstrap';
+import { Badge, Button, Card, CardProps, Col, Row } from 'react-bootstrap';
 
-import { i18n } from '../../models/Translation';
+import { t } from '../../models/Translation';
 import { GitLogo } from './Logo';
 
 export interface GitCardProps
-  extends Pick<GitRepository, 'full_name' | 'html_url' | 'languages'>,
+  extends Omit<CardProps, 'id'>,
+    Pick<GitRepository, 'full_name' | 'html_url' | 'languages'>,
     Partial<Pick<GitRepository, 'topics' | 'description' | 'homepage'>> {
   className?: string;
 }
@@ -22,8 +23,9 @@ export const GitCard: FC<GitCardProps> = observer(
     topics = [],
     description,
     homepage,
+    ...props
   }) => (
-    <Card className={className}>
+    <Card className={className} {...props}>
       <Card.Body className="d-flex flex-column gap-3">
         <Card.Title as="h3" className="h5">
           <a target="_blank" href={html_url} rel="noreferrer">
@@ -57,7 +59,7 @@ export const GitCard: FC<GitCardProps> = observer(
       <Card.Footer className="d-flex justify-content-between align-items-center">
         {homepage && (
           <Button variant="success" target="_blank" href={homepage}>
-            {i18n.t('home_page')}
+            {t('home_page')}
           </Button>
         )}
       </Card.Footer>

components/Git/Logo.tsx

@@ -1,14 +1,14 @@
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
-import { PureComponent } from 'react';
-import { Image } from 'react-bootstrap';
+import { Component } from 'react';
+import { Image, ImageProps } from 'react-bootstrap';
 
-export interface GitLogoProps {
+export interface GitLogoProps extends ImageProps {
   name: string;
 }
 
 @observer
-export class GitLogo extends PureComponent<GitLogoProps> {
+export class GitLogo extends Component<GitLogoProps> {
   @observable
   accessor path = '';
 
@@ -41,8 +41,8 @@ export class GitLogo extends PureComponent<GitLogoProps> {
 
   render() {
     const { path } = this;
-    const { name } = this.props;
+    const { name, ...props } = this.props;
 
-    return path && <Image fluid src={path} alt={name} />;
+    return path && <Image fluid {...props} src={path} alt={name} />;
   }
 }

components/MainNavigator.tsx

@@ -3,10 +3,9 @@ import dynamic from 'next/dynamic';
 import { FC } from 'react';
 import { Container, Nav, Navbar } from 'react-bootstrap';
 
-import { i18n } from '../models/Translation';
+import { t } from '../models/Translation';
 
-const { t } = i18n,
-  LanguageMenu = dynamic(import('./LanguageMenu'), { ssr: false });
+const LanguageMenu = dynamic(import('./LanguageMenu'), { ssr: false });
 
 const Name = process.env.NEXT_PUBLIC_SITE_NAME || '';
 

models/Translation.ts

@@ -8,7 +8,9 @@ export const i18n = new TranslationModel({
   'en-US': () => import('../translation/en-US'),
 });
 
-export const LanguageName: Record<typeof i18n['currentLanguage'], string> = {
+export const { t } = i18n;
+
+export const LanguageName: Record<(typeof i18n)['currentLanguage'], string> = {
   'zh-CN': '简体中文',
   'zh-TW': '繁體中文',
   'en-US': 'English',

package.json

@@ -7,78 +7,77 @@
     "node": ">=20"
   },
   "dependencies": {
-    "@editorjs/code": "^2.9.2",
-    "@editorjs/editorjs": "^2.30.6",
+    "@editorjs/code": "^2.9.3",
+    "@editorjs/editorjs": "^2.30.7",
     "@editorjs/header": "^2.8.8",
-    "@editorjs/image": "^2.9.3",
+    "@editorjs/image": "^2.10.1",
     "@editorjs/link": "^2.6.2",
-    "@editorjs/list": "^1.10.0",
+    "@editorjs/list": "^2.0.2",
     "@editorjs/paragraph": "^2.11.6",
-    "@editorjs/quote": "~2.7.2",
+    "@editorjs/quote": "~2.7.4",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
-    "@next/mdx": "^15.0.1",
-    "@sentry/nextjs": "^8.35.0",
+    "@next/mdx": "^15.0.3",
+    "@sentry/nextjs": "^8.41.0",
     "copy-webpack-plugin": "^12.0.2",
     "editorjs-html": "^3.4.3",
     "idea-react": "^2.0.0-rc.8",
-    "koajax": "^3.0.2",
-    "less": "^4.2.0",
+    "koajax": "^3.0.3",
+    "less": "^4.2.1",
     "less-loader": "^12.2.0",
     "lodash": "^4.17.21",
     "mobx": "^6.13.5",
-    "mobx-github": "^0.3.4",
+    "mobx-github": "^0.3.5",
     "mobx-i18n": "^0.6.0",
     "mobx-react": "^9.1.1",
-    "mobx-restful": "^1.0.1",
+    "mobx-restful": "^2.0.0",
     "mobx-restful-table": "^2.0.0",
-    "next": "^15.0.1",
+    "next": "^15.0.3",
     "next-pwa": "~5.6.0",
-    "next-ssr-middleware": "^0.8.8",
+    "next-ssr-middleware": "^0.8.9",
     "next-with-less": "^3.0.1",
     "prismjs": "^1.29.0",
     "react": "^18.3.1",
-    "react-bootstrap": "^2.10.5",
+    "react-bootstrap": "^2.10.6",
     "react-bootstrap-editor": "^2.0.4",
     "react-dom": "^18.3.1",
     "react-editor-js": "^2.1.0",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",
     "remark-mdx-frontmatter": "^5.0.0",
-    "undici": "^6.20.1",
-    "web-utility": "^4.4.1",
-    "webpack": "^5.95.0"
+    "undici": "^7.0.0",
+    "web-utility": "^4.4.2",
+    "webpack": "^5.96.1"
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.25.9",
     "@babel/plugin-transform-typescript": "^7.25.9",
     "@babel/preset-react": "^7.25.9",
-    "@eslint/compat": "^1.2.1",
-    "@eslint/eslintrc": "^3.1.0",
-    "@eslint/js": "^9.13.0",
-    "@softonus/prettier-plugin-duplicate-remover": "^1.0.1",
+    "@eslint/compat": "^1.2.3",
+    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/js": "^9.15.0",
+    "@softonus/prettier-plugin-duplicate-remover": "^1.1.2",
     "@types/eslint-config-prettier": "^6.11.3",
     "@types/eslint__eslintrc": "^2.1.2",
     "@types/eslint__js": "^8.42.3",
-    "@types/lodash": "^4.17.12",
+    "@types/lodash": "^4.17.13",
     "@types/next-pwa": "^5.6.9",
-    "@types/node": "^20.17.1",
+    "@types/node": "^20.17.8",
     "@types/react": "^18.3.12",
-    "eslint": "^9.13.0",
-    "eslint-config-next": "^15.0.1",
+    "eslint": "^9.15.0",
+    "eslint-config-next": "^15.0.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "globals": "^15.11.0",
-    "husky": "^9.1.6",
+    "globals": "^15.12.0",
+    "husky": "^9.1.7",
     "lint-staged": "^15.2.10",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.1",
     "prettier-plugin-css-order": "^2.1.2",
-    "typescript": "~5.6.3",
-    "typescript-eslint": "^8.11.0"
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.16.0"
   },
   "resolutions": {
-    "native-file-system-adapter": "npm:@tech_query/native-file-system-adapter@^3.0.1",
     "next": "$next"
   },
   "prettier": {

pages/_app.tsx

@@ -11,21 +11,19 @@ import { Image } from 'react-bootstrap';
 import { MainNavigator } from '../components/MainNavigator';
 import { MDXLayout } from '../components/MDXLayout';
 import { isServer } from '../models/Base';
-import { i18n } from '../models/Translation';
+import { t } from '../models/Translation';
 
 configure({ enforceActions: 'never' });
 
 enableStaticRendering(isServer());
 
-const { t } = i18n;
-
 globalThis.addEventListener?.('unhandledrejection', ({ reason }) => {
-  let { message } = reason as HTTPError;
-  const { statusText, body } = reason.response || {};
+  const { message, response } = reason as HTTPError;
+  const { statusText, body } = response || {};
 
-  message = body?.message || statusText || message;
+  const tips = body?.message || statusText || message;
 
-  if (message) alert(message);
+  if (tips) alert(tips);
 });
 
 const AppShell: FC<AppProps> = observer(({ Component, pageProps, router }) => (

pages/api/home.ts

@@ -1,6 +1,4 @@
-import { i18n } from '../../models/Translation';
-
-const { t } = i18n;
+import { t } from '../../models/Translation';
 
 export const mainNav = () => [
   {

pages/component.tsx

@@ -14,7 +14,7 @@ import 'prismjs/components/prism-typescript';
 import 'prismjs/components/prism-tsx';
 
 import { PageHead } from '../components/PageHead';
-import { i18n } from '../models/Translation';
+import { i18n, t } from '../models/Translation';
 import RichEditData from './api/rich-edit.json';
 
 const HTMLEditor = dynamic(() => import('../components/HTMLEditor'), {
@@ -41,8 +41,6 @@ const Example: FC<PropsWithChildren<{ title: string }>> = ({
 export const getServerSideProps = compose(translator(i18n));
 
 const ComponentPage = observer(() => {
-  const { t } = i18n;
-
   const title = textJoin(t('component'), t('examples'));
 
   return (

pages/index.tsx

@@ -4,14 +4,12 @@ import { Card, Col, Container, Row } from 'react-bootstrap';
 
 import { GitCard } from '../components/Git/Card';
 import { PageHead } from '../components/PageHead';
-import { i18n } from '../models/Translation';
+import { i18n, t } from '../models/Translation';
 import styles from '../styles/Home.module.less';
 import { framework, mainNav } from './api/home';
 
 export const getServerSideProps = compose(translator(i18n));
 
-const { t } = i18n;
-
 const HomePage = observer(() => (
   <Container as="main" className={styles.main}>
     <PageHead />

pages/pagination.tsx

@@ -4,19 +4,17 @@ import { GitRepository } from 'mobx-github';
 import { observer } from 'mobx-react';
 import { Column, RestTable } from 'mobx-restful-table';
 import { compose, translator } from 'next-ssr-middleware';
-import { PureComponent } from 'react';
+import { Component } from 'react';
 import { Badge, Container } from 'react-bootstrap';
 
 import { PageHead } from '../components/PageHead';
 import { repositoryStore } from '../models/Base';
-import { i18n } from '../models/Translation';
+import { i18n, t } from '../models/Translation';
 
 export const getServerSideProps = compose(translator(i18n));
 
-const { t } = i18n;
-
 @observer
-export default class PaginationPage extends PureComponent {
+export default class PaginationPage extends Component {
   @computed
   get columns(): Column<GitRepository>[] {
     return [