feat: update problem document and optimize code (#13)

type-challenges · Oct 28, 2023 · 21365ba · 21365ba
1 parent 795624a
commit 21365ba
Show file tree

Hide file tree

Showing 56 changed files with 821 additions and 186 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -46,8 +46,8 @@
             "./src"
           ],
           [
-            "@exercises",
-            "./exercises"
+            "@problems",
+            "./problems"
           ]
         ]
       },

diff --git a/assets/favicon.png b/assets/favicon.png
diff --git a/assets/favicon.svg b/assets/favicon.svg
diff --git a/config/i18n.json b/config/i18n.json
@@ -1,110 +1,118 @@
 {
   "code": {
     "en": "Code",
-    "zh-cn": "代码"
+    "zhCN": "代码"
   },
   "problem_list": {
     "en": "Problem List",
-    "zh-cn": "题目列表"
+    "zhCN": "题目列表"
   },
   "type_to_search": {
     "en": "Type to search...",
-    "zh-cn": "请输入关键词搜索"
+    "zhCN": "请输入关键词搜索"
   },
   "setting": {
     "en": "setting",
-    "zh-cn": "设置"
+    "zhCN": "设置"
   },
   "case": {
     "en": "Case",
-    "zh-cn": "示例"
+    "zhCN": "示例"
   },
   "no_data": {
     "en": "No data",
-    "zh-cn": "暂无数据"
+    "zhCN": "暂无数据"
   },
   "please_run_or_submit_first": {
     "en": "Please run or submit your code first",
-    "zh-cn": "请先运行或提交您的代码"
+    "zhCN": "请先运行或提交您的代码"
   },
   "run_code": {
     "en": "Run",
-    "zh-cn": "运行示例"
+    "zhCN": "运行示例"
   },
   "submit_code": {
     "en": "Submit",
-    "zh-cn": "提交"
+    "zhCN": "提交"
   },
   "description": {
     "en": "Description",
-    "zh-cn": "题目描述"
+    "zhCN": "题目描述"
   },
   "records": {
     "en": "Records",
-    "zh-cn": "提交记录"
+    "zhCN": "提交记录"
   },
   "tutorial": {
     "en": "tutorial",
-    "zh-cn": "题解"
+    "zhCN": "题解"
   },
   "theme": {
     "en": "theme",
-    "zh-cn": "主题"
+    "zhCN": "主题"
   },
   "font_size": {
     "en": "font size",
-    "zh-cn": "字体大小"
+    "zhCN": "字体大小"
   },
   "tab_size": {
     "en": "tab size",
-    "zh-cn": "缩进大小"
+    "zhCN": "缩进大小"
   },
   "language": {
     "en": "language",
-    "zh-cn": "语言"
+    "zhCN": "语言"
   },
   "cases": {
     "en": "Cases",
-    "zh-cn": "测试用例"
+    "zhCN": "测试用例"
   },
   "result": {
     "en": "Result",
-    "zh-cn": "运行结果"
+    "zhCN": "运行结果"
   },
   "status": {
     "en": "Status",
-    "zh-cn": "状态"
+    "zhCN": "状态"
   },
   "time": {
     "en": "Time",
-    "zh-cn": "提交时间"
+    "zhCN": "提交时间"
   },
   "options": {
     "en": "Options",
-    "zh-cn": "选项"
+    "zhCN": "选项"
   },
   "operate": {
     "en": "Operate",
-    "zh-cn": "操作"
+    "zhCN": "操作"
   },
   "view": {
     "en": "view",
-    "zh-cn": "查看"
+    "zhCN": "查看"
   },
   "copy": {
     "en": "copy",
-    "zh-cn": "复制"
+    "zhCN": "复制"
   },
   "successfully_delete": {
     "en": "Successfully deleted",
-    "zh-cn": "删除成功"
+    "zhCN": "删除成功"
   },
   "failed_delete": {
     "en": "Failed to delete, please refresh page to retry",
-    "zh-cn": "删除失败，请刷新重试"
+    "zhCN": "删除失败，请刷新重试"
   },
   "record_tip": {
     "en": "In order to save memory, we only save the latest 8 records. You can choose to manually delete some useless data to break this limit.",
-    "zh-cn": "为了节省内存，我们仅保存最新的 8 条记录，您可以在达到限制后手动删除一些数据"
+    "zhCN": "为了节省内存，我们仅保存最新的 8 条记录，您可以在达到限制后手动删除一些数据"
+  },
+  "copied": {
+    "en": "Copied",
+    "zhCN": "复制成功"
+  },
+  "request_error": {
+    "en": "Network error, please check your network or refresh the page",
+    "zhCN": "网络请求失败，请检查网络状况后刷新重试"
   }
 }
diff --git a/html/index.html b/html/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Typescript Tutorial Exercises</title>
+    <title>TypeScript Tutorial Exercises</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -45,6 +45,8 @@
     "react-dom": "^17.0.2",
     "react-markdown": "^7.1.2",
     "react-syntax-highlighter": "^15.5.0",
+    "rehype-katex": "^6.0.3",
+    "remark-math": "^6.0.0",
     "styled-components": "^6.1.0",
     "type-assertions": "^1.1.0"
   },

diff --git a/...ems/basic-tutorial/1-hello-world/check.ts → ...ems/basic-tutorial/1-hello-world/check.ts b/...ems/basic-tutorial/1-hello-world/check.ts → ...ems/basic-tutorial/1-hello-world/check.ts
diff --git a/problems/basic-tutorial/1-hello-world/docs/description/description.en.md b/problems/basic-tutorial/1-hello-world/docs/description/description.en.md
@@ -0,0 +1,32 @@
+### What is TypeScript
+
+TypeScript is a syntactic superset of JavaScript which adds static typing.
+
+This basically means that TypeScript adds syntax on top of JavaScript, allowing developers to add types.
+
+### Why TypeScript
+
+JavaScript is a loosely typed language. It can be difficult to understand what types of data are being passed around in JavaScript.
+
+In JavaScript, function parameters and variables don't have any information! So developers need to look at documentation, or guess based on the implementation.
+
+TypeScript allows specifying the types of data being passed around within the code, and has the ability to report errors when the types don't match.
+
+For example, TypeScript will report an error when passing a string into a function that expects a number. JavaScript will not.
+
+### About this site
+
+To teach more people to use TypeScript including basic and advanced usage, we create this site which provides some problems should be solved by TypeScript. And part of the answers of the problems could be found at [official TypeScript document](https://www.typescriptlang.org/).
+
+This problem require you to export a type which equals to string `Hello, world`.
+
+Now, you can go to the editor at right of the page to start your TypeScript travel.
+
+**Reference**
+
+> 1.https://www.typescriptlang.org/
+> 
+> 2.https://www.w3schools.com/typescript/typescript_intro.php
+> 
+> 3.https://github.com/typescript-exercises/typescript-exercises
+
diff --git a/problems/basic-tutorial/1-hello-world/docs/description/description.zh-cn.md b/problems/basic-tutorial/1-hello-world/docs/description/description.zh-cn.md
@@ -0,0 +1,31 @@
+### 关于 TypeScript
+
+TypeScript 是 JavaScript 的语法超集，它添加了静态类型
+
+这意味着 TypeScript 在 JavaScript 之上添加了语法，允许开发人员添加类型
+
+### 为什么选择 TypeScript
+
+JavaScript 是一种松散类型语言。 理解 JavaScript 中传递的数据类型可能很困难
+
+在 JavaScript 中，函数参数和变量没有任何信息！因此开发人员需要查看文档，或者根据实现进行猜测
+
+TypeScript 允许指定代码中传递的数据类型，并且能够在类型不匹配时报告错误
+
+例如，当将字符串传递到需要数字的函数时，TypeScript 将报告错误而 JavaScript 不会
+
+### 关于本站
+
+为了教会更多的人使用 TypeScript（包括基本和高级用法），我们创建了这个网站，根据 [TypeScript 官方文档](https://www.typescriptlang.org/)提供了从入门到精通 TypeScript 的练习题
+
+这个问题要求你导出一个等于字符串`Hello, world`的类型
+
+现在，您可以前往页面右侧的编辑器开始学习 TypeScript
+
+**参考**
+
+> 1.https://www.typescriptlang.org/
+>
+> 2.https://www.w3schools.com/typescript/typescript_intro.php
+>
+> 3.https://github.com/typescript-exercises/typescript-exercises
diff --git a/problems/basic-tutorial/1-hello-world/docs/description/index.ts b/problems/basic-tutorial/1-hello-world/docs/description/index.ts
@@ -0,0 +1,4 @@
+import en from './description.en.md?url';
+import zhCN from './description.zh-cn.md?url';
+
+export { en, zhCN };
diff --git a/...rial/1-hello-world/docs/tutorial/index.ts → ...rial/1-hello-world/docs/tutorial/index.ts b/...rial/1-hello-world/docs/tutorial/index.ts → ...rial/1-hello-world/docs/tutorial/index.ts
diff --git a/...-hello-world/docs/tutorial/tutorial.en.md → ...-hello-world/docs/tutorial/tutorial.en.md b/...-hello-world/docs/tutorial/tutorial.en.md → ...-hello-world/docs/tutorial/tutorial.en.md
diff --git a/...ems/basic-tutorial/1-hello-world/index.ts → ...ems/basic-tutorial/1-hello-world/index.ts b/...ems/basic-tutorial/1-hello-world/index.ts → ...ems/basic-tutorial/1-hello-world/index.ts
diff --git a/.../basic-tutorial/1-hello-world/template.ts → .../basic-tutorial/1-hello-world/template.ts b/.../basic-tutorial/1-hello-world/template.ts → .../basic-tutorial/1-hello-world/template.ts
diff --git a/.../basic-tutorial/2-everyday-types/check.ts → .../basic-tutorial/2-everyday-types/check.ts b/.../basic-tutorial/2-everyday-types/check.ts → .../basic-tutorial/2-everyday-types/check.ts
diff --git a/problems/basic-tutorial/2-everyday-types/docs/description/description.en.md b/problems/basic-tutorial/2-everyday-types/docs/description/description.en.md
@@ -0,0 +1,5 @@
+Please replace all unknown and any in the code on the right with the correct type.
+
+**Reference**
+
+> https://www.typescriptlang.org/docs/handbook/2/everyday-types.html
diff --git a/problems/basic-tutorial/2-everyday-types/docs/description/description.zh-cn.md b/problems/basic-tutorial/2-everyday-types/docs/description/description.zh-cn.md
@@ -0,0 +1,5 @@
+请将右侧代码中所有的 unknown 和 any 替换为正确的类型
+
+**参考**
+
+> https://www.typescriptlang.org/docs/handbook/2/everyday-types.html
diff --git a/problems/basic-tutorial/2-everyday-types/docs/description/index.ts b/problems/basic-tutorial/2-everyday-types/docs/description/index.ts
@@ -0,0 +1,4 @@
+import en from './description.en.md?url';
+import zhCN from './description.zh-cn.md?url';
+
+export { en, zhCN };
diff --git a/...s/transpose-matrix/docs/tutorial/index.ts → ...l/2-everyday-types/docs/tutorial/index.ts b/...s/transpose-matrix/docs/tutorial/index.ts → ...l/2-everyday-types/docs/tutorial/index.ts
@@ -1,4 +1,3 @@
-// @ts-ignore
 import en from './tutorial.en.md?url';
 
 export { en };
diff --git a/...eryday-types/docs/tutorial/tutorial.en.md → ...eryday-types/docs/tutorial/tutorial.en.md b/...eryday-types/docs/tutorial/tutorial.en.md → ...eryday-types/docs/tutorial/tutorial.en.md
diff --git a/.../basic-tutorial/2-everyday-types/index.ts → .../basic-tutorial/2-everyday-types/index.ts b/.../basic-tutorial/2-everyday-types/index.ts → .../basic-tutorial/2-everyday-types/index.ts
diff --git a/...sic-tutorial/2-everyday-types/template.ts → ...sic-tutorial/2-everyday-types/template.ts b/...sic-tutorial/2-everyday-types/template.ts → ...sic-tutorial/2-everyday-types/template.ts
diff --git a/src/problems/basic-tutorial/index.ts → problems/basic-tutorial/index.ts b/src/problems/basic-tutorial/index.ts → problems/basic-tutorial/index.ts
diff --git a/src/problems/difficulties/index.ts → problems/difficulties/index.ts b/src/problems/difficulties/index.ts → problems/difficulties/index.ts
diff --git a/...ms/difficulties/transpose-matrix/check.ts → ...ms/difficulties/transpose-matrix/check.ts b/...ms/difficulties/transpose-matrix/check.ts → ...ms/difficulties/transpose-matrix/check.ts
diff --git a/problems/difficulties/transpose-matrix/docs/description/description.en.md b/problems/difficulties/transpose-matrix/docs/description/description.en.md
@@ -0,0 +1,6 @@
+Given an $n \times m$ dimensional matrix type, input it as a generic and output the transpose of the matrix.
+
+Note that the following situations may exist in the matrix:
+
+1. If a row is empty, ignore the row.
+2. The number of elements in a row exceeds m, and the excess elements are ignored.
diff --git a/problems/difficulties/transpose-matrix/docs/description/description.zh-cn.md b/problems/difficulties/transpose-matrix/docs/description/description.zh-cn.md
@@ -0,0 +1,6 @@
+给定一个 $n \times m$ 的矩阵类型，请将其作为泛型输入，并输出该矩阵的转置
+
+注意，矩阵中可能存在如下情况：
+
+1. 某行为空，则忽略该行
+2. 某行元素数目超出 m，忽略超出的元素
diff --git a/problems/difficulties/transpose-matrix/docs/description/index.ts b/problems/difficulties/transpose-matrix/docs/description/index.ts
@@ -0,0 +1,4 @@
+import en from './description.en.md?url';
+import zhCN from './description.zh-cn.md?url';
+
+export { en, zhCN };
diff --git a/...l/2-everyday-types/docs/tutorial/index.ts → ...s/transpose-matrix/docs/tutorial/index.ts b/...l/2-everyday-types/docs/tutorial/index.ts → ...s/transpose-matrix/docs/tutorial/index.ts
@@ -1,4 +1,3 @@
-// @ts-ignore
 import en from './tutorial.en.md?url';
 
 export { en };
diff --git a/...spose-matrix/docs/tutorial/tutorial.en.md → ...spose-matrix/docs/tutorial/tutorial.en.md b/...spose-matrix/docs/tutorial/tutorial.en.md → ...spose-matrix/docs/tutorial/tutorial.en.md
diff --git a/...ms/difficulties/transpose-matrix/index.ts → ...ms/difficulties/transpose-matrix/index.ts b/...ms/difficulties/transpose-matrix/index.ts → ...ms/difficulties/transpose-matrix/index.ts
diff --git a/...difficulties/transpose-matrix/template.ts → ...difficulties/transpose-matrix/template.ts b/...difficulties/transpose-matrix/template.ts → ...difficulties/transpose-matrix/template.ts
diff --git a/...oblems/difficulties/transpose-matrix/test → problems/difficulties/transpose-matrix/test b/...oblems/difficulties/transpose-matrix/test → problems/difficulties/transpose-matrix/test
diff --git a/src/problems/index.ts → problems/index.ts b/src/problems/index.ts → problems/index.ts
diff --git a/rspack.config.ts b/rspack.config.ts
@@ -21,14 +21,15 @@ export default function createRspackConfig(): Configuration {
         {
           minify: true,
           template: './html/index.html',
-          favicon: './assets/favicon.svg',
+          favicon: './assets/favicon.png',
         },
       ],
     },
     devtool: mode === 'production' ? false : 'source-map',
     resolve: {
       alias: {
         '@config': path.resolve(__dirname, './config'),
+        '@problems': path.resolve(__dirname, './problems'),
         '@src': path.resolve(__dirname, './src'),
       },
     },

diff --git a/src/components/Markdown/index.module.less b/src/components/Markdown/index.module.less
@@ -1,3 +1,24 @@
+blockquote {
+  margin: 0;
+  padding: 8px;
+  background-color: var(--color-neutral-2);
+  border-left: 4px solid var(--color-neutral-3);
+  border-radius: 4px;
+  * {
+    margin: 0;
+  }
+  p:not(:last-child) {
+    margin-bottom: 4px;
+  }
+}
+code {
+  margin: 0 2px;
+  padding: 2px 4px;
+  vertical-align: middle;
+  font-size: 14px;
+  line-height: 14px;
+  background-color: var(--color-neutral-2);
+}
 .markdown-code {
   font-size: 14px;
   :global(.react-syntax-highlighter-line-number) {

diff --git a/src/components/Markdown/index.tsx b/src/components/Markdown/index.tsx
@@ -5,8 +5,11 @@ import {
 } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import ts from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';
 import ReactMarkdown from 'react-markdown';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
 import { Setting } from '@src/utils/setting';
 import styles from './index.module.less';
+import 'katex/dist/katex.min.css';
 
 SyntaxHighlighter.registerLanguage('ts', ts);
 SyntaxHighlighter.registerLanguage('typescript', ts);
@@ -18,13 +21,17 @@ const Markdown = function (props: {
   const { content, theme } = props;
   return (
     <ReactMarkdown
+      remarkPlugins={[remarkMath]}
+      rehypePlugins={[rehypeKatex]}
       components={{
         code(props) {
-          const { children, className, ...rest } = props;
-          const match = /language-(\w+)/.exec(className || '');
+          const { children, className, inline, node, ...rest } = props;
+          const match = /language-(typescript|ts)/.exec(className || '');
           return match ? (
             <SyntaxHighlighter
               {...rest}
+              node={node}
+              inline={inline}
               className={styles['markdown-code']}
               style={theme === 'light' ? oneLight : oneDark}
               language={match[1]}

diff --git a/src/global.less b/src/global.less
@@ -10,7 +10,6 @@ html, body {
     color: var(--color-text-1);
     a {
       cursor: pointer;
-      user-select: none;
       text-decoration: none;
       color: var(--color-text-1);
       &:hover {