feat: improve home page links

Author: HerringtonDarkholme

website/src/homepage/Features.vue

@@ -1,43 +1,53 @@
 <template>
   <ul class="features">
-    <li class="feature" v-for="feat in feats">
+    <li class="feature">
       <hr/>
       <div class="description">
-        <h2>{{feat.title}}</h2>
+        <h2>Search and Rewrite</h2>
         <p>
-          {{feat.description}}
+        ast-grep is a code tool for <a href="/guide/quick-start.html">structural search and replace</a>.
+        It is like syntax-aware grep/sed!
+        You can write code <a href="/guide/pattern-syntax.html">patterns</a> to locate and modify code,
+        based on AST, in thousands of files, <a href="/guide/tooling-overview.html#interactive-mode">interactively</a>.
         </p>
-        <code>
-          {{ feat.code }}
+        <code class="vp-code">
+          <span>ast-grep</span> -p '$A && $A()' -r '$A?.()'
         </code>
       </div>
-      <img :src='feat.image' width="2004" height="1462"/>
+      <img src='/image/search-replace.png' width="2004" height="1462"/>
+    </li>
+    <li class="feature">
+      <hr/>
+      <div class="description">
+        <h2>Scan as Linter</h2>
+        <p>
+        ast-grep is a versatile and flexible tool for <a href="/guide/scan-project.html">linting</a> code with AST patterns.
+        You can easily add new customized rules with <a href="/guide/rule-config.html">intuitive syntax</a> and enjoy pretty error reporting out of box.
+        </p>
+        <code class="vp-code">
+          <span>ast-grep</span> scan
+        </code>
+      </div>
+      <img src='/image/yaml-scan.png' width="2004" height="1462"/>
+    </li>
+    <li class="feature">
+      <hr/>
+      <div class="description">
+        <h2>Programmatic Usage</h2>
+        <p>
+          ast-grep also provides <a href="/guide/api-usage/js-api.html">node-js binding</a> to access syntax trees programmatically.
+          You can use jQuery like <a href="/reference/api.html#napi">utility methods</a> to traverse syntax tree nodes.
+          Node API also has opt-in <a href="/blog/typed-napi.html">type safety</a>.
+        </p>
+        <code class="vp-code">
+          npm install <span>@ast-grep/napi</span>
+        </code>
+      </div>
+      <img src='/image/sg-napi.png' width="2004" height="1462"/>
     </li>
     <hr/>
   </ul>
 </template>
-<script setup lang="ts">
-const feats = [
-  {
-    image: '/image/search-replace.png',
-    title: 'Search and Rewrite',
-    description: 'ast-grep is a code tool for structural search and replace. It is like syntax-aware grep/sed! You can write code patterns to locate and modify code, based on AST, in thousands of files, interactively.',
-    code: `sg -p '$A && $A()' -r '$A?.()'`
-  },
-  {
-    image: '/image/yaml-scan.png',
-    title: 'Scan as Linter',
-    description: 'ast-grep is a versatile and flexible tool for linting code with AST patterns. You can easily add new customized rules with intuitive syntax and enjoy pretty error reporting out of box.',
-    code: `sg scan`,
-  },
-  {
-    image: '/image/sg-napi.png',
-    title: 'Programmatic Usage',
-    description: 'ast-grep also provides node-js binding for manipulating syntax trees programmatically. You can use jQuery like utility methods to traverse and manipulate syntax tree nodes, or use operators to compose complex matching from simple patterns.',
-    code: `npm install @ast-grep/napi`,
-  },
-]
-</script>
 <style scoped>
   .features {
     margin-top: -2em;
@@ -65,6 +75,11 @@ const feats = [
     padding: 0em 2em 2em;
     text-align: center;
   }
+  .description a {
+    text-decoration: underline;
+    text-decoration-style: dotted;
+    font-style: italic;
+  }
   @media (min-width: 640px) {
     .description {
       padding: 0em 4em 2em;
@@ -93,6 +108,10 @@ const feats = [
     background-color: var(--vp-c-bg-soft);
     transition: border-color 0.25s, background-color 0.25s;
   }
+  code span {
+    --shiki-light: #6F42C1;
+    --shiki-dark: #B392F0;
+  }
   hr {
     width: 100%;
     border: none;