Merge pull request #65 from luantranminh/main

perf: reduces images size

README.md

@@ -31,8 +31,8 @@
 
 |Preview|Preview|
 |---|---|
-|![theme-dark](./website/static/readme/noi-theme-dark.png)|![noi-settings](./website/static/readme/noi-settings.png)|
-|![settings-prompts](./website/static/readme/noi-prompt.png)|![batch-ask](./website/static/readme/noi-prompt-use.png)|
+|![theme-dark](./website/static/readme/noi-theme-dark.jpg)|![noi-settings](./website/static/readme/noi-settings.jpg)|
+|![settings-prompts](./website/static/readme/noi-prompt.jpg)|![batch-ask](./website/static/readme/noi-prompt-use.jpg)|
 
 ---
 
@@ -48,7 +48,7 @@ If you encounter the error message "Noi" is damaged and can't be opened. You sho
 xattr -cr /Applications/Noi.app
 ```
 
-![mac-install-error](./website/static/readme/mac-install-error.png)
+![mac-install-error](./website/static/readme/mac-install-error.jpg)
 
 ## TODO
 

configs/README.md

@@ -11,7 +11,7 @@ To set up a custom sync link, follow the steps below:
 > [!NOTE]
 > The `custom url` will not be overwritten. If you wish to use your own URL as a data source, please refer to the data format in `noi.mode.json`.
 
-![Mode Sync](../website/static/configs/mode-sync.png)
+![Mode Sync](../website/static/configs/mode-sync.jpg)
 
 ### Sync URL
 

website/src/pages/index.tsx

@@ -5,7 +5,7 @@ import Layout from '@theme/Layout';
 const noiVersion = '0.3.0';
 
 export default function Home(): JSX.Element {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
     <Layout
       title="Home"
@@ -43,10 +43,10 @@ export default function Home(): JSX.Element {
 
         <h2 className="mt-5">Preview</h2>
         <div className="grid sm:grid-cols-1 lg:grid-cols-2 gap-4 max-w-[960px] m-auto">
-          <img className="rounded-lg shadow-lg" src="/readme/noi-theme-dark.png" />
-          <img className="rounded-lg shadow-lg" src="/readme/noi-settings.png" />
-          <img className="rounded-lg shadow-lg" src="/readme/noi-prompt.png" />
-          <img className="rounded-lg shadow-lg" src="/readme/noi-prompt-use.png" />
+          <img className="rounded-lg shadow-lg" src="/readme/noi-theme-dark.jpg" />
+          <img className="rounded-lg shadow-lg" src="/readme/noi-settings.jpg" />
+          <img className="rounded-lg shadow-lg" src="/readme/noi-prompt.jpg" />
+          <img className="rounded-lg shadow-lg" src="/readme/noi-prompt-use.jpg" />
         </div>
 
         <h2 className="mt-5">FAQ</h2>