feat: add Boolean Arithmetic

hidaviddong · Jul 12, 2024 · c014a76 · c014a76
1 parent 69d20da
commit c014a76
Showing 1 changed file with 51 additions and 13 deletions.
diff --git a/src/pages/blog/nand2tetris/+Page.jsx b/src/pages/blog/nand2tetris/+Page.jsx
@@ -1,21 +1,15 @@
 import { useData } from "vike-react/useData"
-export default function Page() {
-    const { blog } = useData()
+function BooleanLogic() {
     return (
-        <div className="flex flex-col">
-            <div className="font-medium text-base flex flex-col gap-1">
-                <p className="text-zinc-700">{blog.name}</p>
-                <p className=" text-zinc-500 text-sm">{blog.time} · {blog.description}</p>
-            </div>
-
+        <>
             <h4>Boolean Logic</h4>
             <ul>
                 <li>A Boolean function is a function that operates on binary inputs and returns binary outputs. </li>
                 <li>Any Boolean function can be realized using <b>Nand</b>.</li>
                 <li>De Morgan's laws are important rules in Boolean algebra:
                     <ul>
-                        <li>Not (A And B) = Not A Or Not B</li>
-                        <li>Not (A Or B) = Not A And Not B</li>
+                        <li className="italic font-mono">Not (A And B) = Not A Or Not B</li>
+                        <li className="italic font-mono">Not (A Or B) = Not A And Not B</li>
                     </ul>
                 </li>
             </ul>
@@ -74,13 +68,57 @@ export default function Page() {
                     </tr>
                 </tbody>
             </table>
-            <p> So <b>Not X = X Nand X.</b></p>
+            <p className="italic font-mono">Not X = X Nand X.</p>
             <br />
             <p>Since <b>And</b> is equal to <b>Not Nand</b>，and <b>Not</b> can be expressed using <b>Nand</b>: </p>
-            <p>A And B = Not (A Nand B) = (A Nand B) Nand (A Nand B)</p>
+            <p className="italic font-mono">A And B = Not (A Nand B) = (A Nand B) Nand (A Nand B)</p>
             <br />
             <p>Accroding to De Morgan's laws, it can be proven that <b>Or</b> can also be expressed using <b>Nand</b>:</p>
-            <p>A Or B = Not (Not A and Not B)</p>
+            <p className="italic font-mono">A Or B = Not (Not A and Not B)</p>
+        </>
+    )
+}
+function BooleanArithmetic() {
+    return (
+        <>
+            <h4>Boolean Arithmetic</h4>
+            <p>In the ALU design project, there is a description:<br /><span className="font-mono"> if (f == 1) sets out = x + y, else sets out = x & y</span></p>
+            <p>Equal to:</p>
+            <ul>
+                <li>
+                    <p>Calculate <span className="font-mono italic"> sets out = x + y</span></p>
+                    <p className="text-sm text-zinc-500 font-mono italic">
+                        Add16(a=a, b=b, out=aAddb);
+                    </p>
+                </li>
+                <li>
+                    <p>Calculate <span className="font-mono italic"> sets out = x & y</span></p>
+                    <p className="text-sm text-zinc-500 font-mono italic">
+                        And16(a=a, b=b, out=aAndb);
+                    </p>
+                </li>
+                <li>
+                    <p>Use Mux for branch operation</p>
+                    <p className="text-sm text-zinc-500 font-mono italic">
+                        Mux16(a=aAddb, b=aAndb, sel=f, out=out);
+                    </p>
+                </li>
+            </ul>
+        </>
+    )
+}
+
+export default function Page() {
+    const { blog } = useData()
+    return (
+        <div className="flex flex-col">
+            <div className="font-medium text-base flex flex-col gap-1">
+                <p className="text-zinc-700">{blog.name}</p>
+                <p className=" text-zinc-500 text-sm">{blog.time} · {blog.description}</p>
+            </div>
+
+            <BooleanLogic />
+            <BooleanArithmetic />
         </div>
     )
 }