From 390fad597ada9bf16977244dd643ed42bca53420 Mon Sep 17 00:00:00 2001
From: bluwy <bjornlu.dev@gmail.com>
Date: Wed, 16 Aug 2023 15:43:15 +0800
Subject: [PATCH] Update docs

---
 site/index.html                     | 62 ++++++++++++++---------------
 site/src/components/Analysis.svelte |  2 +-
 site/src/global.css                 |  5 +++
 site/src/pages/Home.svelte          |  2 +-
 site/unocss.config.js               |  5 ++-
 5 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/site/index.html b/site/index.html
index 410a44c..8f022fd 100644
--- a/site/index.html
+++ b/site/index.html
@@ -11,7 +11,7 @@
     <div id="app"></div>
     <div
       id="docs"
-      class="docs bg-gray-300 text-dark @dark:bg-gray-700 @dark:text-white py-8"
+      class="docs bg-gray-300 text-dark @dark:bg-gray-800 @dark:text-white py-8"
     >
       <div
         class="mb-2 px-4 flex flex-col md:flex-row w-full max-w-6xl mx-auto gap-6"
@@ -19,29 +19,22 @@
         <section class="md:w-1/2 mb-2">
           <h2>What is publint?</h2>
           <p>
-            <code>publint</code> lints npm packages for packaging errors,
-            ensuring maximum compatibility across environments. This means that
-            consumers of your package can safely run your code in any platform,
-            e.g. Vite, Webpack, Rollup, Node.js, etc.
+            <code>publint</code> lints npm packages to ensure widest
+            compatibility across environments, such as Vite, Webpack, Rollup,
+            Node.js, etc.
           </p>
           <p>
-            A full list of rules can be found at the
-            <a class="anchor-link-with-hint" href="/rules.html"> rules page </a>
-            .
+            A full list of lint rules can be found at the
+            <a class="anchor-link-with-hint" href="/rules.html">rules page</a>.
           </p>
         </section>
         <section class="md:w-1/2 mb-2">
           <h2>How it works</h2>
           <p>
-            When linting an npm package, the site downloads the package tarball
-            locally from the npm registry, then a web worker will run the
-            <code>publint</code> CLI against the files. For larger packages, it
-            may take a while to download and lint.
-          </p>
-          <p>
-            Unlike <code>npm install</code>, the site would only download the
-            package itself without it's dependencies, as that's sufficient for
-            the linting process.
+            When linting an npm package, the site downloads the tarball from the
+            npm registry, and runs <code>publint</code> against it in a web
+            worker. For larger packages, it may take a while to download and
+            lint.
           </p>
         </section>
       </div>
@@ -50,24 +43,27 @@ <h2>How it works</h2>
       >
         <section class="md:w-1/2 mb-2">
           <h2>Use locally</h2>
-          <p>
-            In the root of your library directory, run
-            <code>npx publint</code>! If you're an end-user and would like to
-            lint the dependencies you use instead, run
-            <code>npx publint deps</code>. Use
-            <code>npx publint --help</code> to see the full list of options.
-          </p>
+          <ul>
+            <li>
+              Run <code>npx publint</code> in your library directory to lint
+              locally.
+            </li>
+            <li>Run <code>npx publint --deps</code> to lint dependencies.</li>
+            <li>Run <code>npx publint --help</code> for the full list of options.</li>
+          </ul>
         </section>
         <section class="md:w-1/2 mb-2">
-          <h2>Other tools</h2>
-          <p>
-            <a
-              class="anchor-link-with-hint"
-              href="https://arethetypeswrong.github.io"
-            >
-              Are the types wrong?
-            </a>
-          </p>
+          <h2>Other resources</h2>
+          <ul>
+            <li>
+              <a
+                class="anchor-link-with-hint"
+                href="https://arethetypeswrong.github.io"
+              >
+                Are the types wrong?
+              </a>
+            </li>
+          </ul>
         </section>
       </div>
       <footer class="text-center">
diff --git a/site/src/components/Analysis.svelte b/site/src/components/Analysis.svelte
index a2ca813..1a48d01 100644
--- a/site/src/components/Analysis.svelte
+++ b/site/src/components/Analysis.svelte
@@ -96,7 +96,7 @@
   <!-- fade shadow -->
   {#if !open}
     <div
-      class="absolute bottom-0 w-full h-32 bg-gradient-to-b from-transparent to-gray-300 @dark:to-gray-700 pointer-events-none"
+      class="absolute bottom-0 w-full h-32 bg-gradient-to-b from-transparent to-gray-300 @dark:to-gray-800 pointer-events-none"
     ></div>
     <div
       class="blur-mask absolute bottom-0 w-full h-28 backdrop-blur pointer-events-none"
diff --git a/site/src/global.css b/site/src/global.css
index ba99ede..c586435 100644
--- a/site/src/global.css
+++ b/site/src/global.css
@@ -81,6 +81,11 @@ body {
   visibility: visible;
 }
 
+.docs ul {
+  margin: 0;
+  padding-left: 1.2rem;
+}
+
 .docs li {
   line-height: 1.5;
   opacity: 0.8;
diff --git a/site/src/pages/Home.svelte b/site/src/pages/Home.svelte
index 6f67245..34a46b0 100644
--- a/site/src/pages/Home.svelte
+++ b/site/src/pages/Home.svelte
@@ -31,7 +31,7 @@
     <p class="my-8">
       <a class="anchor-link" href="#docs">How it works</a>
       <strong class="inline-block mx-1">·</strong>
-      <a class="anchor-link" href="/rules.html">Rules</a>
+      <a class="anchor-link" href="/rules.html">Lint rules</a>
     </p>
   </section>
   {#if analysis}
diff --git a/site/unocss.config.js b/site/unocss.config.js
index b71bf79..e4c906b 100644
--- a/site/unocss.config.js
+++ b/site/unocss.config.js
@@ -14,8 +14,9 @@ export default defineConfig({
   },
   shortcuts: {
     'anchor-link':
-      'font-medium decoration-none hover:text-primary-dark focus:text-primary-dark @dark:hover:text-primary-light @dark:focus:text-primary-light transition-color',
-    'anchor-link-with-hint': 'anchor-link text-primary',
+      'font-medium decoration-none hover:text-primary-dark focus:text-primary-dark @dark:hover:text-primary @dark:focus:text-primary transition-color',
+    'anchor-link-with-hint':
+      'anchor-link text-primary @dark:text-primary-light',
     'action-button':
       'font-medium decoration-none px-4 py-3 border-none rounded hover:bg-primary-light focus:bg-primary-light @dark:hover:bg-primary @dark:focus:bg-primary transition-background-color cursor-pointer'
   }