网站界面国际化 (#53)

Co-authored-by: South Drifted <[email protected]>

.gitpod.yml

@@ -0,0 +1,11 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
+# and commit this file to your remote git repository to share the goodness with others.
+
+# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
+
+tasks:
+  - init: pnpm install && pnpm run build
+    command: pnpm run start
+
+

package.json

@@ -23,7 +23,7 @@
         "prepare": "husky",
         "test": "lint-staged  &&  tsc --noEmit",
         "clean": "rm -rf dist/ .parcel-cache/",
-        "start": "npm run clean  &&  parcel source/index.html --open",
+        "start": "npm run clean  &&  parcel source/index.html",
         "pack-sw": "rm -f dist/sw.js.map  &&  workbox generateSW",
         "build": "npm run clean  &&  parcel build source/index.html --public-url .  &&  npm run pack-sw"
     },

source/component/SummitCard.tsx

@@ -15,7 +15,7 @@ import * as style from './SummitCard.module.less';
 
 const { t } = i18n;
 
-export type SummitCardProps = (typeof summits)[0] & CardProps;
+export type SummitCardProps = ReturnType<typeof summits>[0] & CardProps;
 
 export const SummitCard: FC<SummitCardProps> = observer(
     ({ className = '', title, banner, date, URL, children, ...props }) => {

source/component/TopNavBar.tsx

@@ -1,40 +1,46 @@
-import { FC } from 'web-cell';
+import { FC, observer } from 'web-cell';
 import {
     NavLink,
     NavLinkProps,
     OffcanvasNavbar,
     OffcanvasNavbarProps
 } from 'boot-cell';
 
+import { i18n } from '../i18n';
+
 export interface TopNavBarProps extends OffcanvasNavbarProps {
     menu?: NavLinkProps[];
 }
 
 const OriginalURLPattern = /^(https?|#)/;
 
-export const TopNavBar: FC<TopNavBarProps> = ({ menu, ...rest }) => (
-    <OffcanvasNavbar
-        variant="dark"
-        expand="md"
-        sticky="top"
-        brand={
-            <a className="text-light text-decoration-none" href="#">
-                成都 Web 开发者大会
-            </a>
-        }
-        {...rest}
-    >
-        {menu?.map(({ title, href, ...rest }) => (
-            <NavLink
-                className="m-3 my-md-0 mx-md-3"
-                {...rest}
-                href={OriginalURLPattern.test(href) ? href : `#${href}`}
-                active={globalThis.location?.hash
-                    .slice(1)
-                    .startsWith(href + '')}
-            >
-                {title}
-            </NavLink>
-        ))}
-    </OffcanvasNavbar>
+const { t } = i18n;
+
+export const TopNavBar: FC<TopNavBarProps> = observer(
+    ({ menu = [], ...rest }) => (
+        <OffcanvasNavbar
+            variant="dark"
+            expand="md"
+            sticky="top"
+            brand={
+                <a className="text-light text-decoration-none" href="#">
+                    {t('chengdu_web_developer_summit')}
+                </a>
+            }
+            {...rest}
+        >
+            {menu?.map(({ title, href, ...restLinkProps }) => (
+                <NavLink
+                    className="m-3 my-md-0 mx-md-3"
+                    {...restLinkProps}
+                    href={OriginalURLPattern.test(href) ? href : `#${href}`}
+                    active={globalThis.location?.hash
+                        ?.slice(1)
+                        .startsWith(href + '')}
+                >
+                    {title}
+                </NavLink>
+            ))}
+        </OffcanvasNavbar>
+    )
 );

source/i18n/en-US.ts

@@ -1,4 +1,87 @@
+import { textJoin } from 'mobx-i18n';
+
+import enUS_2017 from '../page/2017/i18n/en-US';
+
+import enUS_2018 from '../page/2018/i18n/en-US';
+
+import enUS_2018_Code4City from '../page/2018-Code4City/i18n/en-US';
+
+import enUS_2019 from '../page/2019/i18n/en-US';
+
 export default {
+    ...enUS_2017,
+    ...enUS_2018,
+    ...enUS_2018_Code4City,
+    ...enUS_2019,
     review: 'review',
-    register: 'register'
+    register: 'register',
+    about_us: 'About us',
+    contact_us: 'Contact us',
+    chengdu_web_developer_summit: 'Chengdu Web Developers Conference',
+    homepage_description:
+        'The annual event for Web and JavaScript full-stack developers in Southwest China',
+    homepage_register_latest: 'Register for the Latest Conference',
+    homepage_review_previous: 'Review the Previous Conference',
+    chengdu_community: 'Chengdu Community',
+    organizer_introduction: 'Introduction to the Organizer',
+
+    national_it_events: 'National IT Events',
+    coscon_23_main_venue: "COSCon'23 (China Open Source Conference) Main Venue",
+    nonprofit_organization: 'Nonprofit Organization',
+    since2014:
+        'since its establishment in 2014, has been on a mission to "help people learn programming for free" by creating a vast array of free programming tutorials, including interactive courses, video courses, and articles. The offline developer community spans 160 countries and 2000 cities. We are helping millions of people worldwide learn programming, aiming to provide everyone in the world with the opportunity to receive free, quality programming education resources, to become developers or to use programming to solve problems.',
+    community_description:
+        'was established in 2016 and is one of the earliest FCC city offline communities in mainland China. With over a thousand members, it is also the largest FCC city community. Under the efforts of the core team of over 20 members for two years, FCC Chengdu has covered programming education, technical recruitment, industry conferences, and other public welfare services throughout the entire career of programmers.',
+    sina_weibo: 'Sina Weibo',
+    wechat_public_account: 'WeChat official account',
+    proudly_developed_with: 'Proudly developed with',
+    development: 'development',
+    back_to_top: 'Back To Top',
+
+    chengdu_web_full_stack_conference_2019:
+        '2019 Chengdu Web Full Stack Conference',
+    coscon22_chengdu_branch_venue:
+        "COSCon'22 (China Open Source Conference) Chengdu Branch Venue",
+    coscon21_main_venue: "COSCon'21 (China Open Source Conference) Main Venue",
+    coscon20_chengdu_branch_venue:
+        "COSCon'20 (China Open Source Conference) Chengdu Branch Venue",
+    chengdu_web_frontend_conference_2018:
+        '2018 Chengdu Web Frontend Conference',
+    chongqing_web_frontend_conference_2018:
+        '2018 Chongqing Web Frontend Conference',
+    chengdu_react_tech_conference_2018: '2018 Chengdu React Tech Conference',
+    xinyao_cup_code_for_city_hackathon: 'Xinyao Cup Code for City Hackathon',
+    chengdu_web_frontend_conference_2017:
+        '2017 Chengdu Web Frontend Conference',
+    adhering_to_freecodecamp_international_community_spirit:
+        'Adhering to freeCodeCamp International Community Spirit',
+
+    freecodecamp_global_largest_open_source_learning_platform:
+        "freeCodeCamp.org, the world's largest open-source programming learning platform (Top 10 on GitHub), aims to become the Wikipedia of computer education",
+    leading_freecodecamp_chinese_community_trend:
+        'Leading the trend of freeCodeCamp Chinese Community',
+    first_to_establish_daily_activities_guidelines:
+        'The first to establish daily activity guidelines, design city community logos and mascots, host hackathons and tech conferences, and experiment with open-source offline operations',
+    chengdu_most_active_programmer_community:
+        "Chengdu's Most Active Programmer Community",
+    numerous_chinese_tech_community_allies:
+        'Numerous Chinese Tech Community Allies',
+    allies_summary:
+        'Open Source Society, Open Source Workshop, Microsoft MVP Community, Chengdu Google Developer Community, Alibaba Cloud ACE Chengdu Local Group, Chengdu Linux User Group, Chongqing Frontend Community...',
+    more_exciting_awaits_your_participation:
+        'More exciting awaits your participation...',
+    years_continue_to_undertake: ({
+        which_year,
+        number_of_times,
+        long_sentence
+    }: Record<'which_year' | 'number_of_times' | 'long_sentence', string>) =>
+        textJoin(
+            which_year,
+            'years continue to undertake',
+            number_of_times,
+            long_sentence
+        ),
+
+    tech_conferences:
+        'tech conferences, co-organized events, small and medium-sized sharing sessions, hands-on workshops, and online live streams and so on countless.'
 } as const;

source/i18n/index.ts

@@ -4,10 +4,14 @@ import zhCN from './zh-CN';
 
 export const i18n = new TranslationModel({
     'zh-CN': zhCN,
+    'zh-TW': () => import('./zh-TW'),
+    'zh-HK': () => import('./zh-TW'),
     'en-US': () => import('./en-US')
 });
 
 export const LanguageName: Record<(typeof i18n)['currentLanguage'], string> = {
     'zh-CN': '简体中文',
+    'zh-TW': '正體中文',
+    'zh-HK': '繁體中文',
     'en-US': 'English'
 };

source/i18n/zh-CN.ts

@@ -1,4 +1,71 @@
+import { textJoin } from 'mobx-i18n';
+
+import zhCN_2017 from '../page/2017/i18n/zh-CN';
+
+import zhCN_2018 from '../page/2018/i18n/zh-CN';
+
+import zhCN_2018_Code4City from '../page/2018-Code4City/i18n/zh-CN';
+
+import zhCN_2019 from '../page/2019/i18n/zh-CN';
+
 export default {
+    ...zhCN_2017,
+    ...zhCN_2018,
+    ...zhCN_2018_Code4City,
+    ...zhCN_2019,
     review: '回顾',
-    register: '注册'
+    register: '注册',
+    about_us: '关于我们',
+    contact_us: '联系我们',
+    chengdu_web_developer_summit: '成都 Web 开发者大会',
+    homepage_description: '中国西南地区 Web、JavaScript 全栈开发者的年度盛会',
+    homepage_register_latest: '报名最新大会',
+    homepage_review_previous: '回顾上次大会',
+    chengdu_community: '成都社区',
+    organizer_introduction: '主办方简介',
+
+    national_it_events: '全国 IT 活动',
+    coscon_23_main_venue: "COSCon'23（中国开源年会）主会场",
+    nonprofit_organization: '非营利组织',
+    since2014:
+        '自 2014 年成立以来，以“帮助人们免费学习编程”为使命，创建了大量免费的编程教程，包括交互式课程、视频课程、文章等。线下开发者社区遍布 160 多个国家、2000 多个城市。我们正在帮助全球数百万人学习编程，希望让世界上每个人都有机会获得免费的优质的编程教育资源，成为开发者或者运用编程去解决问题。',
+    community_description:
+        ' 成立于 2016 年，是中国大陆最早一批 FCC 城市线下社区，目前会员千余人，也是最大的 FCC 城市社区。在核心团队 20 余人两年的努力下，FCC 成都已覆盖编程教育、技术招聘、行业大会等程序员全职业生涯的公益服务。',
+    sina_weibo: '新浪微博',
+    wechat_public_account: '微信公众号',
+    proudly_developed_with: '自豪地使用',
+    development: '开发',
+    back_to_top: '返回页首',
+
+    chengdu_web_full_stack_conference_2019: '2019 成都 Web 全栈大会',
+    coscon22_chengdu_branch_venue: "COSCon'22（中国开源年会）成都分会场",
+    coscon21_main_venue: "COSCon'21（中国开源年会）主会场",
+    coscon20_chengdu_branch_venue: "COSCon'20（中国开源年会）成都分会场",
+    chengdu_web_frontend_conference_2018: '2018 成都 Web 前端大会',
+    chongqing_web_frontend_conference_2018: '2018 重庆 Web 前端大会',
+    chengdu_react_tech_conference_2018: '2018 成都 React 技术大会',
+    xinyao_cup_code_for_city_hackathon: '新耀杯 Code for City 黑客马拉松',
+    chengdu_web_frontend_conference_2017: '2017 成都 Web 前端大会',
+    adhering_to_freecodecamp_international_community_spirit:
+        '秉持 freeCodeCamp 国际社区精神',
+
+    freecodecamp_global_largest_open_source_learning_platform:
+        'freeCodeCamp.org 全球最大的开源编程学习平台（GitHub 星标前十），旨在成为计算机教育界的维基百科',
+    leading_freecodecamp_chinese_community_trend:
+        '引领 freeCodeCamp 中文社区潮流',
+    first_to_establish_daily_activities_guidelines:
+        '第一个制定日常活动方针，第一个设计城市社区 logo、吉祥物，第一个举办黑客马拉松、技术大会，第一个试验开源线下运营',
+    chengdu_most_active_programmer_community: '成都最活跃的程序员社区',
+    numerous_chinese_tech_community_allies: '中文技术社区友军众多',
+    allies_summary:
+        '开源社、开源工场、微软 MVP 社区、成都 Google 开发者社区、阿里云 ACE 成都同城会、成都 Linux 用户组、重庆前端社区……',
+    more_exciting_awaits_your_participation: '更多精彩，期待你的参与……',
+    years_continue_to_undertake: ({
+        which_year,
+        number_of_times,
+        long_sentence
+    }: Record<'which_year' | 'number_of_times' | 'long_sentence', string>) =>
+        textJoin(which_year, '年连办', number_of_times, long_sentence),
+    tech_conferences:
+        '场技术干货大会，合办活动、中小分享会、动手训练营、线上直播不计其数'
 } as const;

source/i18n/zh-TW.ts

@@ -0,0 +1,68 @@
+import { textJoin } from 'mobx-i18n';
+
+import zhTW_2017 from '../page/2017/i18n/zh-TW';
+
+import zhTW_2018 from '../page/2018/i18n/zh-TW';
+
+import zhTW_2018_Code4City from '../page/2018-Code4City/i18n/zh-TW';
+
+import zhTW_2019 from '../page/2019/i18n/zh-TW';
+
+export default {
+    ...zhTW_2017,
+    ...zhTW_2018,
+    ...zhTW_2018_Code4City,
+    ...zhTW_2019,
+    review: '回顧',
+    register: '註冊',
+    about_us: '關於我們',
+    contact_us: '聯絡我們',
+    chengdu_web_developer_summit: '成都 Web 開發者大會',
+    homepage_description: '中國西南地區 Web、JavaScript 全端開發者年度盛會',
+    homepage_register_latest: '報名最新大會',
+    homepage_review_previous: '回顧上次大會',
+    chengdu_community: '成都社群',
+    organizer_introduction: '主辦方簡介',
+    national_it_events: '全國 IT 活動',
+    coscon_23_main_venue: "COSCon'23（中國開源年會）主會場",
+    nonprofit_organization: '非營利組織',
+    since2014:
+        '自 2014 年成立以來，以“幫助人們免費學習編程”為使命，創建了大量免費的編程教學，包括互動式課程、視頻課程、文章等。線下開發者社群遍布 160 多個國家、2000 多個城市。我們正在幫助全球數百萬人學習編程，希望讓世界上每個人都有機會獲得免費的優質的編程教育資源，成為開發者或者運用編程去解決問題。',
+    community_description:
+        ' 成立於 2016 年，是中國大陸最早一批 FCC 城市線下社群，目前會員逾千人，也是最大的 FCC 城市社群。在核心團隊 20 餘人兩年的努力下，FCC 成都已覆蓋編程教育、技術招聘、行業大會等程式師全職業生涯的公益服務。',
+    sina_weibo: '新浪微博',
+    wechat_public_account: '微信公眾號',
+    proudly_developed_with: '自豪地使用',
+    development: '開發',
+    back_to_top: '返回頁首',
+    chengdu_web_full_stack_conference_2019: '2019 成都 Web 全端大會',
+    coscon22_chengdu_branch_venue: "COSCon'22（中國開源年會）成都分會場",
+    coscon21_main_venue: "COSCon'21（中國開源年會）主會場",
+    coscon20_chengdu_branch_venue: "COSCon'20（中國開源年會）成都分會場",
+    chengdu_web_frontend_conference_2018: '2018 成都 Web 前端大會',
+    chongqing_web_frontend_conference_2018: '2018 重慶 Web 前端大會',
+    chengdu_react_tech_conference_2018: '2018 成都 React 技術大會',
+    xinyao_cup_code_for_city_hackathon: '新耀杯 Code for City 黑客馬拉松',
+    chengdu_web_frontend_conference_2017: '2017 成都 Web 前端大會',
+    adhering_to_freecodecamp_international_community_spirit:
+        '秉持 freeCodeCamp 國際社群精神',
+    freecodecamp_global_largest_open_source_learning_platform:
+        'freeCodeCamp.org 全球最大的開源編程學習平台（GitHub 星標前十），旨在成為計算機教育界的維基百科',
+    leading_freecodecamp_chinese_community_trend:
+        '引領 freeCodeCamp 中文社群潮流',
+    first_to_establish_daily_activities_guidelines:
+        '第一個制定日常活動方針，第一個設計城市社群 logo、吉祥物，第一個舉辦黑客馬拉松、技術大會，第一個試驗開源線下運營',
+    chengdu_most_active_programmer_community: '成都最活躍的程式師社群',
+    numerous_chinese_tech_community_allies: '中文技術社群友軍眾多',
+    allies_summary:
+        '開源社、開源工廠、微軟 MVP 社群、成都 Google 開發者社群、阿里雲 ACE 成都同城會、成都 Linux 使用者組、重慶前端社群……',
+    more_exciting_awaits_your_participation: '更多精彩，期待你的參與……',
+    years_continue_to_undertake: ({
+        which_year,
+        number_of_times,
+        long_sentence
+    }: Record<'which_year' | 'number_of_times' | 'long_sentence', string>) =>
+        textJoin(which_year, '年連辦', number_of_times, long_sentence),
+    tech_conferences:
+        '場技術乾貨大會，合辦活動、中小分享會、動手訓練營、線上直播不計其數'
+} as const;

source/index.tsx

@@ -12,11 +12,7 @@ configure({ enforceActions: 'never' });
 self.addEventListener('unhandledrejection', event => {
     const { message } = event.reason;
 
-    if (!message) return;
-
-    event.preventDefault();
-
-    self.alert(message);
+    if (message) window.alert(message);
 });
 
 const { serviceWorker } = window.navigator;

source/page/2017/LogoList.tsx

@@ -3,7 +3,8 @@ import { FC, WebCellProps } from 'web-cell';
 
 import { logos } from './data';
 
-export type LogoListProps = (typeof logos)[0] & WebCellProps<HTMLDivElement>;
+export type LogoListProps = ReturnType<typeof logos>[0] &
+    WebCellProps<HTMLDivElement>;
 
 export const LogoList: FC<LogoListProps> = ({ title, childrens, ...props }) => (
     <section {...props}>