init

.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

blog/authors.yml

@@ -0,0 +1,5 @@
+cqh963852:
+  name: qinghua cui
+  title: qinghua cui
+  url: https://github.com/cqh963852
+  image_url: https://avatars.githubusercontent.com/u/17702287?s=400&u=3881e010994cf39fb6ecb9c8bf16db69dac3beaa&v=4

docs/index.md

@@ -0,0 +1,17 @@
+# 引言
+
+写这个的想法源自于，最开始学习编程时，无法入门的痛苦。
+
+又因为 GIT 这个工具，在写下这篇文章时还是软件工程师的必备工具。
+
+所以作为一个软件工程师用这种方式记录这篇文章，还是挺合理的。
+
+入门一个职业，不是几天就可以做到的。但也不是的几个月的培训那么长，会埋没工程师的创造力。
+
+我希望可以通过十几篇文章，让任何有兴趣的人入门前端工程师这个职业。
+
+## 路线图
+
+文章方面，希望一天可以产出一篇文章，通过两个星期。让入门变成简单的事情。
+
+网站建设方面，准备采用 docusaurus 框架，架设一个文档网站。

docs/post-2.md

@@ -0,0 +1,32 @@
+# 信息时代
+
+信息时代有很多获取信息的方式。
+
+通过网页，或者特定的软件，或者其他的方式（非人类的获取方式比如：爬虫）。
+
+网页需要通过一个特定软件才能打开（浏览器），之后人与浏览器交互，浏览器将信息传递给用户。
+
+得益于浏览器跨平台的特性， 工程师们可以实现出只要一处编写，即可处处显示的软件 —— 是软件工程师们在影响世界 —— 这也是为什么信息时代是从网页开始的
+
+## 网页的本质
+
+网页本质是一个文档，文件，一段描述，一段文字。它被记录下来，由浏览器解析，并表达。
+
+有点像是 DNA 是人的遗传信息，蛋白质是表达。 —— 最初的网页没有办法交互，只能显示字。（连颜色都没有，和蛋白质比起来弱爆了）
+
+描述网页的语言不断更新，浏览器也不断的由工程师们更新。
+
+目前使用最多的描述网页的语言是 HTML5
+
+它看起来像是下面的代码块（实际还要复杂点）
+
+```
+<div>
+  我是一块
+  <div>
+    我是里面的一块
+  </div>
+</div>
+```
+
+所以学会 HTML5 的规则，你就可以让浏览器写出具有简单排版的文字。

docs/post-3.md

@@ -0,0 +1,53 @@
+# 现代的网页
+
+现代的网页并不复杂 —— 不只是文字 —— 有漂亮的外观，可以响应用户的操作。
+
+## 漂亮的外观（CSS3）
+
+组成一个漂亮的外观，首先需要骨架 —— HTML5，然后是化妆 —— CSS3
+
+HTML5 中有一些默认的规则，可以让文字变得有层级结构，像是 Word 中的标题，独占一行，并行显示。学会这些规则，就可以进行简单的排版了。
+
+CSS3 像是 Word 样式。颜色，背景颜色，行间距。学会 CSS3 的规则，不仅可以让排版更炫酷，还可以做动画效果，以及各种特殊的交互效果。
+
+> 学会 HTML5 + CSS 可以不用 Word 了呢。—— 只是编辑体验有点糟糕。所以我还是喜欢用 Markdown 编辑文档，还可以使用 HTML 增强
+
+## 有趣的灵魂（JS）
+
+有趣的灵魂应该是 200 多斤吧。—— 我是说我自己。
+
+网页的作用不仅仅是展示，也会响应用户的操作。也可以根据不同的用户给出不同的响应 —— 动态网页。不能区分用户给出不同反应的，叫做静态网页
+
+响应用户的操作，则需要软件工程师编写一些逻辑，编写这个逻辑的语言，叫做 JavaScript（简称 JS）。
+
+### JS 在网页中如何运行
+
+回到代码的本质，其实是在规则下描述一段事情。
+
+浏览器中有一个用于解释执行 JS 的引擎。
+
+在浏览器打开网页时，把各种 JS 脚本（文件形式的，或者文字形式的）丢给 JS 引擎，由引擎解释执行。
+
+下面这个代码片段就是一个 Hello World
+
+```
+<script>
+function sayHello() {
+    alert("Hello World");
+}
+</script>
+
+<button onClick="sayHello()">点击<button>
+```
+
+`<script></script>` 标签中的代码，就是 JS 代码。它定义了一个 sayHello 函数。
+
+JS 引擎会记住这个函数。
+
+`<button></button>` 是 H5 的一个标签，表示这里显示一个按钮。
+
+`onClick="sayHello()"` 表示，这个按钮被点击时，会让 JS 引擎执行一段代码 —— `sayHello()`
+
+## 下一节
+
+下一节开始我们会完整的写一个 Hello World 网页。并开始 HTML5 CSS3 JS 的入门。

docs/post-4.md

@@ -0,0 +1,39 @@
+# HTML5 Hello World
+
+在学习一样新技术的时候，写一个 Hello World 是最简单的。
+
+用最少的知识量，让程序完整的跑起来，就是 Hello World 的目的。
+
+本篇的完整代码，可以在这里找到：
+
+- examples/post-4/hello.html
+
+## 查看这个网页
+
+查看这个 Hello World 很简单，只需要把这个 hello.html 文件下载到计算机。然后用浏览器打开就可以了。
+
+![预览效果](./post-4-1.png)
+
+## 简单分析代码
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div>Hello World</div>
+  </body>
+</html>
+```
+
+通过上面的 Hello World 可以看出来一些 HTML5 的语法规则。
+
+- 标签需要闭合 —— `<div/>` 或这样的 `<div></div>`
+- 标签有独特的含义 —— `<xxx></xxx>`, `<div></div>` 是 HTML5 的块标签
+
+具体的标签规则，可以参考 [HTML5 标签](http://www.w3chtml.com/html5/tag/)。（实际工作中，用到的种类没有列出来的这么多）

docs/post-5.md

@@ -0,0 +1,48 @@
+# CSS3 快速入门
+
+上一节，入门了 HTML5。了解了 HTML5 的 Hello World 后，我们可以开始学习 CSS3 了。
+
+目标很简单，给 Hello World 加上一个颜色，并且再加一个背景色。
+
+本篇的完整代码，可以在这里找到：
+
+- examples/post-5/hello.html
+
+## 查看这个网页
+
+查看这个 Hello World 很简单，只需要把这个 hello.html 文件下载到计算机。然后用浏览器打开就可以了。
+
+![预览效果](./post-5-1.png)
+
+## 简单分析代码
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div style="color: red; background-color: green">hello world</div>
+  </body>
+</html>
+```
+
+和上一节有区别的地方在于
+
+```
+<div style="color: red; background-color: green">hello world</div>
+```
+
+多了一组 style 属性，`style="color: red; background-color: green"`
+
+其中的 `color` `bacogound-color` 是 CSS3 的属性，`red` `green` 值。并且需要用 `;` 分隔。
+
+可以参考下图片
+
+![预览效果](./post-5-2.png)
+
+这里我们只展示了 CSS3 的一种写法。未来为大家介绍更多的写法。

docs/post-6.md

@@ -0,0 +1,61 @@
+# JS Hello World
+
+继续学习 Hello World。
+
+Web 由 HTML5 + CSS3 + JS 构成。本节将介绍 JS 的 Hello World。
+
+> 用最少的知识量，让程序完整的跑起来，就是 Hello World 的目的。
+
+本篇的完整代码，可以在这里找到：
+
+- examples/post-6/hello.html
+
+## 查看这个网页
+
+查看这个 Hello World 很简单，只需要把这个 hello.html 文件下载到计算机。然后用浏览器打开就可以了。
+
+![预览效果](./post-6-1.png)
+
+## 简单分析代码
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <script>
+      window.onload = () => {
+        alert("hello world");
+      };
+    </script>
+  </head>
+  <body></body>
+</html>
+```
+
+我们需要关注的是如下代码块，其余部分是 HTML5 的标签，想了解的话，可以查看 `docs/post-4.md` 。
+
+```html
+<script>
+  window.onload = () => {
+    alert("hello world");
+  };
+</script>
+```
+
+形式上，被 `<script></script>` 包裹住的内容就是 JS 脚本。
+
+这个脚本会在浏览器解析到这个标签时执行。
+
+- `window.onload = xxx` 是在做一个赋值操作。
+
+  将一个函数赋值给 `onload` 属性。而浏览器在加载`hello.html` 文档结束时，会运行 `onload` 函数。
+
+- `() => { alert("hello world"); }` 称作匿名的箭头函数，具体可以查阅 JS 文档。
+
+- `alert("hello world");` 是 JS 调用了浏览器提供的函数 `alert` 其中参数，我们填入了 `"hello world"` 字符串
+
+

docusaurus.config.js

@@ -0,0 +1,74 @@
+// @ts-check
+// Note: type annotations allow type checking and IDEs autocompletion
+
+const lightCodeTheme = require("prism-react-renderer/themes/github");
+const darkCodeTheme = require("prism-react-renderer/themes/dracula");
+
+/** @type {import('@docusaurus/types').Config} */
+const config = {
+  title: "Web Tutorial",
+  tagline: "Web are easy",
+  url: "https://idealjs.github.io",
+  baseUrl: "/web-tutorial/",
+  onBrokenLinks: "throw",
+  onBrokenMarkdownLinks: "warn",
+  favicon: "img/favicon.ico",
+  organizationName: "idealjs",
+  projectName: "web-tutorial",
+
+  presets: [
+    [
+      "classic",
+      /** @type {import('@docusaurus/preset-classic').Options} */
+      ({
+        docs: {
+          sidebarPath: require.resolve("./sidebars.js"),
+          editUrl: "https://github.com/idealjs/web-tutorial",
+        },
+        blog: {
+          showReadingTime: true,
+          editUrl: "https://github.com/idealjs/web-tutorial",
+        },
+        theme: {
+          customCss: require.resolve("./src/css/custom.css"),
+        },
+      }),
+    ],
+  ],
+
+  themeConfig:
+    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+    ({
+      navbar: {
+        title: "Web Tutorial",
+        logo: {
+          alt: "My Site Logo",
+          src: "img/logo.svg",
+        },
+        items: [
+          {
+            type: "doc",
+            docId: "index",
+            position: "left",
+            label: "GET STARTED",
+          },
+          {
+            href: "https://github.com/idealjs/web-tutorial",
+            label: "GitHub",
+            position: "right",
+          },
+        ],
+      },
+      footer: {
+        style: "dark",
+        links: [],
+        copyright: `Copyright © ${new Date().getFullYear()} idealjs.com. Built with Docusaurus.`,
+      },
+      prism: {
+        theme: lightCodeTheme,
+        darkTheme: darkCodeTheme,
+      },
+    }),
+};
+
+module.exports = config;

examples/post-4/hello.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div>hello world</div>
+  </body>
+</html>

examples/post-5/hello.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div style="color: red; background-color: green">hello world</div>
+  </body>
+</html>

examples/post-6/hello.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <script>
+      window.onload = () => {
+        alert("hello world");
+      };
+    </script>
+  </head>
+  <body></body>
+</html>

package.json

@@ -0,0 +1,43 @@
+{
+  "name": "web-tutorial",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "docusaurus": "docusaurus",
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy",
+    "clear": "docusaurus clear",
+    "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@docusaurus/core": "2.0.0-beta.15",
+    "@docusaurus/preset-classic": "2.0.0-beta.15",
+    "@mdx-js/react": "^1.6.21",
+    "clsx": "^1.1.1",
+    "prism-react-renderer": "^1.2.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "2.0.0-beta.15",
+    "@tsconfig/docusaurus": "^1.0.4",
+    "typescript": "^4.5.2"
+  },
+  "browserslist": {
+    "production": [
+      ">0.5%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

sidebars.js

@@ -0,0 +1,31 @@
+/**
+ * Creating a sidebar enables you to:
+ - create an ordered group of docs
+ - render a sidebar for each doc of that group
+ - provide next/previous navigation
+
+ The sidebars can be generated from the filesystem, or explicitly defined here.
+
+ Create as many sidebars as you want.
+ */
+
+// @ts-check
+
+/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
+const sidebars = {
+  // By default, Docusaurus generates a sidebar from the docs folder structure
+  tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
+
+  // But you can create a sidebar manually
+  /*
+  tutorialSidebar: [
+    {
+      type: 'category',
+      label: 'Tutorial',
+      items: ['hello'],
+    },
+  ],
+   */
+};
+
+module.exports = sidebars;

src/css/custom.css

@@ -0,0 +1,39 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+  --ifm-color-primary: #2e8555;
+  --ifm-color-primary-dark: #29784c;
+  --ifm-color-primary-darker: #277148;
+  --ifm-color-primary-darkest: #205d3b;
+  --ifm-color-primary-light: #33925d;
+  --ifm-color-primary-lighter: #359962;
+  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-code-font-size: 95%;
+}
+
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+html[data-theme='dark'] {
+  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary-dark: #21af90;
+  --ifm-color-primary-darker: #1fa588;
+  --ifm-color-primary-darkest: #1a8870;
+  --ifm-color-primary-light: #29d5b0;
+  --ifm-color-primary-lighter: #32d8b4;
+  --ifm-color-primary-lightest: #4fddbf;
+}
+
+.docusaurus-highlight-code-line {
+  background-color: rgba(0, 0, 0, 0.1);
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+}
+
+html[data-theme='dark'] .docusaurus-highlight-code-line {
+  background-color: rgba(0, 0, 0, 0.3);
+}

src/pages/index.module.css

@@ -0,0 +1,23 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 966px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/pages/index.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import clsx from "clsx";
+import Layout from "@theme/Layout";
+import Link from "@docusaurus/Link";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import styles from "./index.module.css";
+
+const HomePageHeader = () => {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <header className={clsx("hero hero--primary", styles.heroBanner)}>
+      <div className="container">
+        <h1 className="hero__title">{siteConfig.title}</h1>
+        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <div className={styles.buttons}>
+          <Link className="button button--secondary button--lg" to="/docs">
+            Web Tutorial - 5min ⏱️
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+const Home = () => {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <Layout title={`Hello from ${siteConfig.title}`} description="Web Tutorial">
+      <HomePageHeader />
+    </Layout>
+  );
+};
+
+export default Home;

static/img/logo.svg

@@ -0,0 +1 @@
+<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#FFF" d="M99 52h84v34H99z"/><path d="M23 163c-7.398 0-13.843-4.027-17.303-10A19.886 19.886 0 0 0 3 163c0 11.046 8.954 20 20 20h20v-20H23z" fill="#3ECC5F"/><path d="M112.98 57.376L183 53V43c0-11.046-8.954-20-20-20H73l-2.5-4.33c-1.112-1.925-3.889-1.925-5 0L63 23l-2.5-4.33c-1.111-1.925-3.889-1.925-5 0L53 23l-2.5-4.33c-1.111-1.925-3.889-1.925-5 0L43 23c-.022 0-.042.003-.065.003l-4.142-4.141c-1.57-1.571-4.252-.853-4.828 1.294l-1.369 5.104-5.192-1.392c-2.148-.575-4.111 1.389-3.535 3.536l1.39 5.193-5.102 1.367c-2.148.576-2.867 3.259-1.296 4.83l4.142 4.142c0 .021-.003.042-.003.064l-4.33 2.5c-1.925 1.111-1.925 3.889 0 5L23 53l-4.33 2.5c-1.925 1.111-1.925 3.889 0 5L23 63l-4.33 2.5c-1.925 1.111-1.925 3.889 0 5L23 73l-4.33 2.5c-1.925 1.111-1.925 3.889 0 5L23 83l-4.33 2.5c-1.925 1.111-1.925 3.889 0 5L23 93l-4.33 2.5c-1.925 1.111-1.925 3.889 0 5L23 103l-4.33 2.5c-1.925 1.111-1.925 3.889 0 5L23 113l-4.33 2.5c-1.925 1.111-1.925 3.889 0 5L23 123l-4.33 2.5c-1.925 1.111-1.925 3.889 0 5L23 133l-4.33 2.5c-1.925 1.111-1.925 3.889 0 5L23 143l-4.33 2.5c-1.925 1.111-1.925 3.889 0 5L23 153l-4.33 2.5c-1.925 1.111-1.925 3.889 0 5L23 163c0 11.046 8.954 20 20 20h120c11.046 0 20-8.954 20-20V83l-70.02-4.376A10.645 10.645 0 0 1 103 68c0-5.621 4.37-10.273 9.98-10.624" fill="#3ECC5F"/><path fill="#3ECC5F" d="M143 183h30v-40h-30z"/><path d="M193 158c-.219 0-.428.037-.639.064-.038-.15-.074-.301-.116-.451A5 5 0 0 0 190.32 148a4.96 4.96 0 0 0-3.016 1.036 26.531 26.531 0 0 0-.335-.336 4.955 4.955 0 0 0 1.011-2.987 5 5 0 0 0-9.599-1.959c-.148-.042-.297-.077-.445-.115.027-.211.064-.42.064-.639a5 5 0 0 0-5-5 5 5 0 0 0-5 5c0 .219.037.428.064.639-.148.038-.297.073-.445.115a4.998 4.998 0 0 0-9.599 1.959c0 1.125.384 2.151 1.011 2.987-3.717 3.632-6.031 8.693-6.031 14.3 0 11.046 8.954 20 20 20 9.339 0 17.16-6.41 19.361-15.064.211.027.42.064.639.064a5 5 0 0 0 5-5 5 5 0 0 0-5-5" fill="#44D860"/><path fill="#3ECC5F" d="M153 123h30v-20h-30z"/><path d="M193 115.5a2.5 2.5 0 1 0 0-5c-.109 0-.214.019-.319.032-.02-.075-.037-.15-.058-.225a2.501 2.501 0 0 0-.963-4.807c-.569 0-1.088.197-1.508.518a6.653 6.653 0 0 0-.168-.168c.314-.417.506-.931.506-1.494a2.5 2.5 0 0 0-4.8-.979A9.987 9.987 0 0 0 183 103c-5.522 0-10 4.478-10 10s4.478 10 10 10c.934 0 1.833-.138 2.69-.377a2.5 2.5 0 0 0 4.8-.979c0-.563-.192-1.077-.506-1.494.057-.055.113-.111.168-.168.42.321.939.518 1.508.518a2.5 2.5 0 0 0 .963-4.807c.021-.074.038-.15.058-.225.105.013.21.032.319.032" fill="#44D860"/><path d="M63 55.5a2.5 2.5 0 0 1-2.5-2.5c0-4.136-3.364-7.5-7.5-7.5s-7.5 3.364-7.5 7.5a2.5 2.5 0 1 1-5 0c0-6.893 5.607-12.5 12.5-12.5S65.5 46.107 65.5 53a2.5 2.5 0 0 1-2.5 2.5" fill="#000"/><path d="M103 183h60c11.046 0 20-8.954 20-20V93h-60c-11.046 0-20 8.954-20 20v70z" fill="#FFFF50"/><path d="M168.02 124h-50.04a1 1 0 1 1 0-2h50.04a1 1 0 1 1 0 2m0 20h-50.04a1 1 0 1 1 0-2h50.04a1 1 0 1 1 0 2m0 20h-50.04a1 1 0 1 1 0-2h50.04a1 1 0 1 1 0 2m0-49.814h-50.04a1 1 0 1 1 0-2h50.04a1 1 0 1 1 0 2m0 19.814h-50.04a1 1 0 1 1 0-2h50.04a1 1 0 1 1 0 2m0 20h-50.04a1 1 0 1 1 0-2h50.04a1 1 0 1 1 0 2M183 61.611c-.012 0-.022-.006-.034-.005-3.09.105-4.552 3.196-5.842 5.923-1.346 2.85-2.387 4.703-4.093 4.647-1.889-.068-2.969-2.202-4.113-4.46-1.314-2.594-2.814-5.536-5.963-5.426-3.046.104-4.513 2.794-5.807 5.167-1.377 2.528-2.314 4.065-4.121 3.994-1.927-.07-2.951-1.805-4.136-3.813-1.321-2.236-2.848-4.75-5.936-4.664-2.994.103-4.465 2.385-5.763 4.4-1.373 2.13-2.335 3.428-4.165 3.351-1.973-.07-2.992-1.51-4.171-3.177-1.324-1.873-2.816-3.993-5.895-3.89-2.928.1-4.399 1.97-5.696 3.618-1.232 1.564-2.194 2.802-4.229 2.724a1 1 0 0 0-.072 2c3.017.101 4.545-1.8 5.872-3.487 1.177-1.496 2.193-2.787 4.193-2.855 1.926-.082 2.829 1.115 4.195 3.045 1.297 1.834 2.769 3.914 5.731 4.021 3.103.104 4.596-2.215 5.918-4.267 1.182-1.834 2.202-3.417 4.15-3.484 1.793-.067 2.769 1.35 4.145 3.681 1.297 2.197 2.766 4.686 5.787 4.796 3.125.108 4.634-2.62 5.949-5.035 1.139-2.088 2.214-4.06 4.119-4.126 1.793-.042 2.728 1.595 4.111 4.33 1.292 2.553 2.757 5.445 5.825 5.556l.169.003c3.064 0 4.518-3.075 5.805-5.794 1.139-2.41 2.217-4.68 4.067-4.773v-2z" fill="#000"/><path fill="#3ECC5F" d="M83 183h40v-40H83z"/><path d="M143 158c-.219 0-.428.037-.639.064-.038-.15-.074-.301-.116-.451A5 5 0 0 0 140.32 148a4.96 4.96 0 0 0-3.016 1.036 26.531 26.531 0 0 0-.335-.336 4.955 4.955 0 0 0 1.011-2.987 5 5 0 0 0-9.599-1.959c-.148-.042-.297-.077-.445-.115.027-.211.064-.42.064-.639a5 5 0 0 0-5-5 5 5 0 0 0-5 5c0 .219.037.428.064.639-.148.038-.297.073-.445.115a4.998 4.998 0 0 0-9.599 1.959c0 1.125.384 2.151 1.011 2.987-3.717 3.632-6.031 8.693-6.031 14.3 0 11.046 8.954 20 20 20 9.339 0 17.16-6.41 19.361-15.064.211.027.42.064.639.064a5 5 0 0 0 5-5 5 5 0 0 0-5-5" fill="#44D860"/><path fill="#3ECC5F" d="M83 123h40v-20H83z"/><path d="M133 115.5a2.5 2.5 0 1 0 0-5c-.109 0-.214.019-.319.032-.02-.075-.037-.15-.058-.225a2.501 2.501 0 0 0-.963-4.807c-.569 0-1.088.197-1.508Line truncated

tsconfig.json

@@ -0,0 +1,7 @@
+{
+  // This file is not used in compilation. It is here just for a nice editor experience.
+  "extends": "@tsconfig/docusaurus/tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "."
+  }
+}