feat(web-host/HomePage): mention the virtual filesystem

Author: topheman

packages/web-host/src/components/HomePage.tsx

@@ -59,6 +59,12 @@ export const HomePage = ({ onStartRepl }: HomePageProps) => {
           <strong>true cross-platform compatibility</strong> - the same code
           runs in browsers and terminals with different host implementations.
         </p>
+        <p className="text-gray-700 mb-6 text-lg">
+          Plugins like <code>cat</code> or <code>ls</code> can interact with a
+          virtual filesystem using the primitives of the languages they are
+          written in (like <code>std::fs::read_dir</code> or{" "}
+          <code>std::fs::read_to_string</code>).
+        </p>
 
         <h4 className="text-xl font-bold mb-3">Key Features</h4>
         <ul className="text-gray-700 space-y-2 mb-3 text-base pl-4 list-disc">
@@ -68,6 +74,11 @@ export const HomePage = ({ onStartRepl }: HomePageProps) => {
           <li>
             Language-agnostic plugins (any language that compiles to WASM)
           </li>
+          <li>
+            Virtual filesystem: the I/O operations are forwarded via the{" "}
+            <code>@bytecodealliance/preview2-shim/filesystem</code> shim, which
+            shims <code>wasi:filesystem</code>
+          </li>
           <li>Modern React + TypeScript web interface</li>
         </ul>
 

packages/web-host/src/index.css

@@ -64,6 +64,12 @@ button:focus-visible {
   a:hover {
     text-decoration-line: none;
   }
+  code {
+    background-color: #f0f0f0;
+    padding: 0.2rem 0.4rem;
+    border-radius: 0.2rem;
+    font-size: 0.85em;
+  }
 }
 
 @utility word-break-word {