Add @boombox/storage and @docusaurus/tsconfig dependencies

docs-engh/12-IELTS 雅思/复习策略.md

@@ -0,0 +1,12 @@
+---
+slug: /IELTS/strategy
+unlisted: true
+---
+
+学习雅思的策略。
+
+雅思有 4 个部分，个人分配的精力：
+听力：个人弱项，需要加强，30%
+口语：低频是用，不需要太多精力，10%
+阅读：个人强项，30%
+写作：和别人交流，需要加强，30%

package.json

@@ -15,6 +15,7 @@
     "typecheck": "tsc"
   },
   "dependencies": {
+    "@boombox/storage": "^1.0.2",
     "@docusaurus/core": "^3.0.0",
     "@docusaurus/plugin-content-blog": "^3.0.0",
     "@docusaurus/preset-classic": "^3.0.0",
@@ -40,6 +41,7 @@
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^3.0.0",
+    "@docusaurus/tsconfig": "^3.1.1",
     "@docusaurus/types": "^3.0.0",
     "@tsconfig/docusaurus": "^1.0.5",
     "typescript": "^4.6.3"

src/pages/sandwich/index.module.scss

@@ -0,0 +1,70 @@
+.main {
+  height: 80vh;
+  margin-left: 20px;
+  margin-right: 20px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr;
+  column-gap: 20px;
+}
+
+@mixin textarea-style {
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  resize: none;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  height: 100%;
+  width: 100%;
+}
+
+@mixin button-style {
+  padding: 5px 10px;
+  border: none;
+  border-radius: 5px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+}
+
+.left {
+  display: grid;
+  height: 100%;
+  grid-template-rows: 20% 1fr 20%;
+  row-gap: 10px;
+
+  textarea {
+    @include textarea-style;
+  }
+
+  .content {
+    position: relative;
+
+    button {
+      position: absolute;
+      top: 15px;
+      right: 15px;
+      @include button-style;
+    }
+  }
+}
+
+.right {
+  height: 100%;
+  position: relative;
+
+  textarea {
+    height: 100%;
+    width: 100%;
+    @include textarea-style;
+    cursor: not-allowed;
+  }
+
+  button {
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    @include button-style;
+  }
+}

src/pages/sandwich/index.tsx

@@ -0,0 +1,92 @@
+import React, { useState, useEffect } from 'react'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+import Layout from '@theme/Layout'
+import { localStorage } from '@boombox/storage'
+import styles from './index.module.scss'
+
+export default function () {
+  const { siteConfig } = useDocusaurusContext()
+  const KEY = 'sandwich'
+
+  type Storage = {
+    prefix: string
+    content: string
+    suffix: string
+  }
+
+  const storage = (localStorage.getItem(KEY) ?? {
+    prefix: '',
+    content: '',
+    suffix: '',
+  }) as Storage
+
+  const [state, setState] = useState<Storage>(storage)
+  const [result, setResult] = useState<string>('')
+  const [copyFeedback, setCopyFeedback] = useState<string>('copy')
+
+  useEffect(() => {
+    localStorage.setItem(KEY, state)
+    setResult(`${state.prefix}${state.content}${state.suffix}`)
+  }, [state])
+
+  const handlePrefixChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setState({ ...state, prefix: e.target.value })
+  }
+  const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setState({ ...state, content: e.target.value })
+  }
+  const handleSuffixChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setState({ ...state, suffix: e.target.value })
+  }
+  const handleCopy = () => {
+    navigator.clipboard.writeText(result)
+    setCopyFeedback('copied')
+    setTimeout(() => {
+      setCopyFeedback('copy')
+    }, 1000)
+  }
+
+  return (
+    <Layout
+      title={`Post Sandwich`}
+      description='Post tool that allow you to add fixed prefix and suffix to your content.'
+    >
+      <main className={styles.main}>
+        <div className={styles.left}>
+          <textarea
+            id='prefix'
+            placeholder='Enter the prefix text here'
+            value={state.prefix}
+            onChange={handlePrefixChange}
+          />
+          <div className={styles.content}>
+            <button>Paste</button>
+            <textarea
+              id='content'
+              placeholder='Enter the main content here'
+              value={state.content}
+              onChange={handleContentChange}
+            />
+          </div>
+          <textarea
+            id='suffix'
+            placeholder='Enter the suffix text here'
+            value={state.suffix}
+            onChange={handleSuffixChange}
+          />
+        </div>
+        <div className={styles.right}>
+          <button className={'copy'} onClick={handleCopy}>
+            {copyFeedback}
+          </button>
+          <textarea
+            id='result'
+            placeholder='The concatenated result of prefix, content, and suffix will appear here'
+            value={result}
+            readOnly
+          />
+        </div>
+      </main>
+    </Layout>
+  )
+}

src/pages/wechat/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import HomepageHeader from '@site/src/components/HomepageHeader';
 import WeChat from '@site/src/components/WeChat';
 import Layout from '@theme/Layout';
 
@@ -10,9 +9,8 @@ export default function () {
   return (
     <Layout
       title={`Hello from ${siteConfig.title}`}
-      description='Description will go into a meta tag in <head />'
+      description='You can contact me via WeChat.'
     >
-      <HomepageHeader />
       <main>
         <WeChat />
       </main>