From a6a7cbf6fa4f63d57e10dec45bc9806797a656a1 Mon Sep 17 00:00:00 2001
From: Noratrieb <48135649+Noratrieb@users.noreply.github.com>
Date: Fri, 14 Feb 2025 20:27:36 +0100
Subject: [PATCH] lesson 2 and fixes

---
 index.css     |  11 ++-
 index.html    |  17 +++--
 lesson-0.html |   4 +-
 lesson-1.html |  20 ++---
 lesson-2.html | 197 ++++++++++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 229 insertions(+), 20 deletions(-)
 create mode 100644 lesson-2.html
diff --git a/index.css b/index.css
index bb32b06..d34286c 100644
--- a/index.css
+++ b/index.css
@@ -45,7 +45,7 @@ footer {
 
 .action-button {
   width: 400px;
-  font-size: 1.5rem;
+  font-size: 1rem;
   font-weight: bold;
   padding: 20px;
   background-color: var(--color-primary);
@@ -53,6 +53,8 @@ footer {
   border: none;
   text-decoration: none;
 
+  display: block;
+
   &:hover {
     background-color: color-mix(in oklab, var(--color-primary), white 15%);
   }
@@ -64,6 +66,7 @@ footer {
   display: flex;
   flex-direction: column;
   gap: 10px;
+
 }
 
 .step {
@@ -74,6 +77,8 @@ footer {
 
 .code {
   padding-left: 30px;
+  overflow: scroll;
+  max-width: calc(100vw - 40px);
 }
 
 .hidden {
@@ -115,3 +120,7 @@ form[data-challenge] > .error {
   height: 2.5rem;
   font-size: 1rem;
 }
+
+.lesson-last-paragraph {
+  margin-bottom: 40px;
+}
diff --git a/index.html b/index.html
index 1a9c29d..bb4713c 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
   <body>
     <main class="main">
       <div class="content">
-        <h1>Learn C++ Symbol Itanium Mangling</h1>
+        <h1>Learn C++ Itanium Symbol Mangling</h1>
         <noscript>
           <p>
             Warning: You have JavaScript disabled While the content is still
@@ -18,7 +18,7 @@
           </p>
         </noscript>
         <p>
-          This website will teach you C++ Itanium Name Mangling. Itanium-style
+          This website will teach you C++ Itanium Symbol Name Mangling. Itanium-style
           mangling is used on a lot of platforms, including Linux.
         </p>
         <p>
@@ -32,11 +32,14 @@
         </p>
         <div class="center">
           <ol class="lessons-list">
-            <li class="lesson-list-item">
-              <a href="lesson-0.html">C names</a>
+            <li>
+              <a href="lesson-0.html" class="action-button">Lesson 0: C names</a>
             </li>
-            <li class="lesson-list-item">
-              <a href="lesson-1.html">Basics</a>
+            <li>
+              <a href="lesson-1.html" class="action-button">Lesson 1: Basics</a>
+            </li>
+            <li>
+              <a href="lesson-2.html" class="action-button">Lesson 2: Arguments</a>
             </li>
           </ol>
         </div>
@@ -45,7 +48,7 @@
         <button
           onclick="localStorage.removeItem('lessons') ; alert('deleted data')"
         >
-          reset
+          reset data
         </button>
       </footer>
     </main>
diff --git a/lesson-0.html b/lesson-0.html
index 53f04c2..fbeb5f7 100644
--- a/lesson-0.html
+++ b/lesson-0.html
@@ -15,7 +15,7 @@
         <h2>Lesson 0: Intro and C names</h2>
         <noscript>
           <p>
-            Warning: You have JavaScript disabled While the content is still
+            Warning: You have JavaScript disabled. While the content is still
             viewable, interactive exercises will not work. Consider enabling
             JavaScript for this website.
           </p>
@@ -103,7 +103,7 @@ extern "C" {
         </section>
         <section data-step="2" class="step">
           <p>Congrats on answering your first mangling question!</p>
-          <p>
+          <p class="lesson-last-paragraph">
             You now know how C functions are (not) mangled, which is a great
             starting point for your C++ Itanium Symbol Mangling Adventures. I
             wish you good luck for the rest!
diff --git a/lesson-1.html b/lesson-1.html
index 9ee5367..bc73a47 100644
--- a/lesson-1.html
+++ b/lesson-1.html
@@ -15,7 +15,7 @@
         <h2>Lesson 1: Basics</h2>
         <noscript>
           <p>
-            Warning: You have JavaScript disabled While the content is still
+            Warning: You have JavaScript disabled. While the content is still
             viewable, interactive exercises will not work. Consider enabling
             JavaScript for this website.
           </p>
@@ -52,8 +52,7 @@ void f() {}
           </p>
           <p>
             We will see the <code>v</code> function type a lot in the rest of
-            this guide. It stands for a function that takes no arguments and
-            returns <code>void</code>.
+            this guide. It stands for a function that takes no arguments.
           </p>
           <div class="quiz-section">
             <p>
@@ -129,10 +128,11 @@ void meow() {}
           </p>
           <p>
             Nested names start with an <code>N</code> and end with an
-            <code>E</code>. Between those two letters, the hierarchy of the
-            namespace is represented by putting on namespace name after another,
-            with the function name last. Every name has the leading length and
-            then the name itself, just like with global names.
+            <code>E</code> (the <code>E</code> stands for "end" and is commonly
+            used to end sequences). Between those two letters, the hierarchy of
+            the namespace is represented by putting on namespace name after
+            another, with the function name last. Every name has the leading
+            length and then the name itself, just like with global names.
           </p>
           <pre class="code">
 namespace outer {
@@ -168,7 +168,7 @@ namespace a {
           </pre>
           <p>
             This function will mangle as <code>_ZN1a1b1c5innerEv</code>. We get
-            all the concatinated names as <code>1a1b1c5inner</code>, with the
+            all the concatenated names as <code>1a1b1c5inner</code>, with the
             previously mentioned characters around them.
           </p>
 
@@ -210,7 +210,7 @@ namespace cats {
             with information, so feel free to take a break and let the previous
             knowledge sink in.
           </p>
-          <p>
+          <p class="lesson-last-paragraph">
             If you want to try out more code and look at its mangling, I
             recommend using Compiler Explorer on
             <a href="https://godbolt.org">godbolt.org</a>. Under "Output", you
@@ -219,7 +219,7 @@ namespace cats {
           </p>
           <div class="center">
             <a href="lesson-2.html" class="action-button">
-              Lesson 2: something that has not been written yet.
+              Lesson 2: Arguments
             </a>
           </div>
         </section>
diff --git a/lesson-2.html b/lesson-2.html
new file mode 100644
index 0000000..0b99a3e
--- /dev/null
+++ b/lesson-2.html
@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="index.css" />
+    <title>Womangling</title>
+  </head>
+  <body>
+    <main class="main">
+      <div class="content" id="content-area">
+        <h1>
+          <a class="root-link" href=".">Learn C++ Itanium Symbol Mangling</a>
+        </h1>
+        <h2>Lesson 2: Lesson 2: Arguments</h2>
+        <noscript>
+          <p>
+            Warning: You have JavaScript disabled. While the content is still
+            viewable, interactive exercises will not work. Consider enabling
+            JavaScript for this website.
+          </p>
+        </noscript>
+
+        <!-- https://itanium-cxx-abi.github.io/cxx-abi/abi.html#mangle.function-type -->
+
+        <section data-step="0" class="step">
+          <p>
+            All symbols that we have looked at so far have ended with a
+            <code>v</code>. I have previously explained that the
+            <code>v</code> stands for a function type with no arguments.
+          </p>
+          <p>
+            C++ has function overloading, which means that a function with the
+            same name can be declared multiple times with different argument
+            types, and the one with matching argument types will be called. If
+            we just mangled the function name as shown previously, this wouldn't
+            work, because we'd get multiple symbols with the same name, which is
+            exactly what mangling is designed to avoid. Therefore, any C++
+            mangling scheme must encode the function argument types in the
+            symbol name.
+          </p>
+          <pre class="code">
+void a(int x);
+void a(char *y);
+int main() {
+  a(0); // This will call the first a
+}
+          </pre>
+          <p>
+            The function type is encoded after the name. It contains all the
+            arguments for the function. In some cases it will also contain the
+            return type first, but not for the functions we are looking at right
+            now.
+          </p>
+          <pre class="code">
+void a(int x, int y, long z) {}
+          </pre>
+          <p>
+            This function will be mangled as <code>_Z1aiil</code>. We already
+            know what <code>_Z1a</code> means, but the <code>iil</code> is new.
+            It represents the three arguments, an <code>int</code>, another
+            <code>int</code>, and then a <code>long</code>. The primitives are
+            just a single character, more complex types have more characters.
+          </p>
+          <p>
+            A function taking zero arguments is interpreted as a function taking
+            <code>(void)</code>, which is encoded as <code>v</code>.
+          </p>
+          <p>
+            <code>int</code> is <code>i</code>, <code>long</code> is
+            <code>l</code>. <code>float</code> is <code>f</code>,
+            <code>double</code> is <code>d</code>. These types are very easy to
+            remember, many others less so. Other easy to remember frequently
+            used types are pointers (<code>T*</code>) which are encoded as
+            <code>P</code> followed by the pointed to type and references
+            (<code>T&</code>) which encoded as <code>R</code> followed by the
+            referenced type.
+          </p>
+          <pre class="code">
+void a(int x, int *y, double &z) {}
+          </pre>
+          <p>
+            This function is mangled as <code>_Z1aiPiRd</code>. It's an
+            <code>int</code> (<code>i</code>), a
+            <code>int*</code> (<code>Pi</code>), and a
+            <code>double&</code> (<code>Pd</code>).
+          </p>
+          <div class="quiz-section">
+            <p>What is the mangled symbol of the following function?</p>
+            <pre class="code">
+void hello(int **programmer, long day, float &r) {}
+            </pre>
+            <form data-challenge="1" data-answer="_Z5helloPPilRf">
+              <input class="quiz-input" />
+              <button
+                data-challenge-submit="1"
+                data-hint="An int** is PPi, a pointer to a pointer to an integer"
+                class="submit-challenge"
+                type="submit"
+              >
+                Answer
+              </button>
+              <div class="error"></div>
+            </form>
+          </div>
+        </section>
+        <section data-step="1" class="step">
+          <p>
+            We can combine this with our previous knowledge of nested names to
+            mangle the following definition:
+          </p>
+          <pre class="code">
+namespace outer::inner {
+  void yes(int a, int b, long &c) {}
+}
+          </pre>
+          <p>This will be mangled as <code>_ZN5outer5inner3yesEiiRl</code></p>
+          <div class="quiz-section">
+            <p>What is the mangled symbol of the following function?</p>
+            <pre class="code">
+namespace very::much::nested {
+  void name(int **a, long &raw, float f, double d) {}
+}
+            </pre>
+            <form
+              data-challenge="2"
+              data-answer="_ZN4very4much6nested4nameEPPiRlfd"
+            >
+              <input class="quiz-input" />
+              <button
+                data-challenge-submit="2"
+                data-hint="Don't forget the N and E"
+                class="submit-challenge"
+                type="submit"
+              >
+                Answer
+              </button>
+              <div class="error"></div>
+            </form>
+          </div>
+        </section>
+        <section data-step="2" class="step">
+          <p>Let's look at a few more common types.</p>
+          <p>
+            <code>char</code> is <code>c</code>. <code>unsigned int</code> is
+            <code>j</code> (like <code>i</code> but one higher).
+            <code>unsigned long</code> is <code>m</code>, following the same
+            pattern. <code>long long</code> (64-bit) is <code>x</code> (you can
+            think of it being the native integer, integer x on modern machines)-
+            <code>unsigned long long</code> is <code>y</code>, again being one
+            higher. <code>short</code> is <code>s</code>, with its unsigned
+            variant being, you may have guessed it, <code>t</code>.
+          </p>
+          <p>
+            In the future there might be a part of the website where you can
+            memorize these encodings more easily.
+          </p>
+          <div class="quiz-section">
+            <p>What is the mangled symbol of the following function?</p>
+            <pre class="code">
+void name(unsigned long long a, unsigned short b, char c, int d) {}
+            </pre>
+            <form
+              data-challenge="3"
+              data-answer="_Z4nameytci"
+              data-hint="Remember that unsigned variants are one higher in the alphabet"
+            >
+              <input class="quiz-input" />
+              <button
+                data-challenge-submit="3"
+                class="submit-challenge"
+                type="submit"
+              >
+                Answer
+              </button>
+              <div class="error"></div>
+            </form>
+          </div>
+        </section>
+
+        <section data-step="3" class="step">
+          <p>
+            Good job! You have now learnt about the mangling of basic types.
+          </p>
+          <p class="lesson-last-paragraph">
+            This is the last lesson that has been written so far. More lessons
+            may appear in the future.
+          </p>
+        </section>
+      </div>
+    </main>
+    <script>
+      window.LESSON = 2;
+    </script>
+    <script type="module" src="lessons.js"></script>
+  </body>
+</html>
