Update website to add install on Windows and Zed extension (#203)

autocorrect-website/index.html

@@ -79,4 +79,4 @@ <h1 class="text-3xl">AutoCorrect</h1>
   </div>
 </body>
 
-</html>
+</html>

autocorrect-website/src/AppEditor.tsx

@@ -1,16 +1,18 @@
-import Editor from '@monaco-editor/react';
-import * as monaco from 'monaco-editor';
-import { useEffect, useState } from 'react';
-import examples from './examples';
-import './style.scss';
-export const autocorrectLib = import('@huacnlee/autocorrect');
+import Editor from "@monaco-editor/react";
+import * as monaco from "monaco-editor";
+import { useEffect, useState } from "react";
+import examples from "./examples";
+import "./style.scss";
+import "./tabs.scss";
+
+export const autocorrectLib = import("@huacnlee/autocorrect");
 
 export let config = {
   rules: {
     spellcheck: 2,
   },
   spellcheck: {
-    words: ['WebAssembly', 'Rust', 'NPM', 'Web', 'JavaScript'],
+    words: ["WebAssembly", "Rust", "NPM", "Web", "JavaScript"],
   },
 };
 
@@ -28,7 +30,7 @@ export const createMarkers = (result: any) => {
         endColumn: lineResult.c + lineResult.old.length,
         message: `AutoCorrect: ${lineResult.new}`,
       };
-    }
+    },
   );
 
   return markers;
@@ -41,17 +43,17 @@ autocorrectLib.then((ac) => {
 });
 
 const editorOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
-  theme: window.matchMedia('(prefers-color-scheme: dark)').matches
-    ? 'vs-dark'
-    : 'vs',
+  theme: window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "vs-dark"
+    : "vs",
   tabSize: 2,
   useTabStops: false,
   scrollbar: {
     verticalScrollbarSize: 5,
     horizontalScrollbarSize: 5,
     useShadows: false,
   },
-  renderLineHighlight: 'none',
+  renderLineHighlight: "none",
   minimap: {
     enabled: false,
   },
@@ -64,28 +66,28 @@ const editorOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
 export const AppEditor = () => {
   const [monaco, setMonaco] = useState<any>();
   const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor>();
-  const [message, showMessage] = useState('');
-  const [fileType, setFileType] = useState('markdown');
+  const [message, showMessage] = useState("");
+  const [fileType, setFileType] = useState("markdown");
 
   // @ts-ignore
   const autocorrect = window.autocorrect;
 
   useEffect(() => {
     if (monaco) {
       // Get media query is dark mode
-      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
       // Watch dark mode change
-      mediaQuery.addEventListener('change', (e) => {
-        const newTheme = e.matches ? 'vs-dark' : 'vs';
+      mediaQuery.addEventListener("change", (e) => {
+        const newTheme = e.matches ? "vs-dark" : "vs";
         monaco?.editor?.setTheme(newTheme);
       });
 
-      monaco.editor.defineTheme('vs-dark', {
-        base: 'vs-dark',
+      monaco.editor.defineTheme("vs-dark", {
+        base: "vs-dark",
         inherit: true,
         rules: [],
         colors: {
-          'editor.background': '#030712',
+          "editor.background": "#030712",
         },
       });
     }
@@ -108,8 +110,8 @@ export const AppEditor = () => {
     monaco.editor.setModelMarkers(
       // @ts-ignore
       editor.getModel(),
-      'autocorrect',
-      createMarkers(result)
+      "autocorrect",
+      createMarkers(result),
     );
 
     return false;
@@ -172,7 +174,7 @@ export const AppEditor = () => {
 
   const onEditorMounted = (
     editor: monaco.editor.IStandaloneCodeEditor,
-    monaco: any
+    monaco: any,
   ) => {
     setEditor(editor);
     setMonaco(monaco);

autocorrect-website/src/docs/usage.md

@@ -2,11 +2,19 @@
 
 ## Installation
 
+You can install AutoCorrect via [Homebrew](https://brew.sh) on macOS:
+
 ```bash
 $ brew install autocorrect
 ```
 
-Or you can just install it via this:
+For Windows, you can use [Scoop](https://scoop.sh):
+
+```bash
+$ scoop install autocorrect
+```
+
+Or you can just install it via this on Unix-like system:
 
 ```bash
 $ curl -sSL https://git.io/JcGER | sh
@@ -213,10 +221,10 @@ For example, in JavaScript:
 ```js
 function hello() {
   // autocorrect-disable
-  console.log('现在这行开始autocorrect会暂时禁用');
-  console.log('这行也是disable的状态');
+  console.log("现在这行开始autocorrect会暂时禁用");
+  console.log("这行也是disable的状态");
   // autocorrect-enable
-  let a = '现在起autocorrect回到了启用的状态';
+  let a = "现在起autocorrect回到了启用的状态";
 }
 ```
 
@@ -225,10 +233,10 @@ The output will:
 ```js
 function hello() {
   // autocorrect-disable
-  console.log('现在这行开始autocorrect会暂时禁用');
-  console.log('这行也是disable的状态');
+  console.log("现在这行开始autocorrect会暂时禁用");
+  console.log("这行也是disable的状态");
   // autocorrect-enable
-  let a = '现在起 autocorrect 回到了启用的状态';
+  let a = "现在起 autocorrect 回到了启用的状态";
 }
 ```
 
@@ -243,11 +251,11 @@ You can use `autocorrect-disable <rule>` in a comment to disable some rules.
 ```js
 function hello() {
   // autocorrect-disable space-word
-  console.log('现在这行开始autocorrect会暂时禁用.');
+  console.log("现在这行开始autocorrect会暂时禁用.");
   // autocorrect-disable fullwidth
-  console.log('这行也是disable的状态.');
+  console.log("这行也是disable的状态.");
   // autocorrect-enable
-  let a = '现在起autocorrect回到了启用的状态.';
+  let a = "现在起autocorrect回到了启用的状态.";
 }
 ```
 
@@ -256,11 +264,11 @@ Will get:
 ```js
 function hello() {
   // autocorrect-disable space-word
-  console.log('现在这行开始autocorrect会暂时禁用。');
+  console.log("现在这行开始autocorrect会暂时禁用。");
   // autocorrect-disable fullwidth, space-word
-  console.log('这行也是disable的状态.');
+  console.log("这行也是disable的状态.");
   // autocorrect-enable
-  let a = '现在起 autocorrect 回到了启用的状态。';
+  let a = "现在起 autocorrect 回到了启用的状态。";
 }
 ```
 
@@ -278,7 +286,13 @@ https://marketplace.visualstudio.com/items?itemName=huacnlee.autocorrect
 
 <img width="900" alt="AutoCorrect for VS Code Extension" src="https://user-images.githubusercontent.com/5518/191890126-4e0c99dc-91ce-4262-a774-3813a636eea1.png">
 
-### Intellij Platform Plugin
+### Zed Extension
+
+https://github.com/huacnlee/zed-autocorrect
+
+<img alt="image" src="https://github.com/huacnlee/zed-autocorrect/assets/5518/762c70e4-961b-4a9d-850c-5768389c459b">
+
+### Intellij Plugin
 
 [![](https://img.shields.io/badge/Plugin-Intellij%20Platform-brightgreen)](https://plugins.jetbrains.com/plugin/20244-autocorrect)