Add naming conventions table and anchors to guideline blocks

Author: BenjaminMichaelis

EssentialCSharp.Web/Views/Home/Guidelines.cshtml

@@ -8,10 +8,48 @@
     <h1>@ViewData["Title"]</h1>
     <hr class="divider-light-blue" />
 
+    <div class="mb-4">
+        <h2 class="fs-4 heading-wrapper" id="naming-conventions-table">
+            C# Naming Conventions - Quick Reference Table
+            <button class="anchor-link" v-on:click="copyToClipboard('naming-conventions-table')" title="Copy direct link">
+                <i class="fa-solid fa-link"></i>
+            </button>
+        </h2>
+        <div class="table-responsive mb-3">
+            <table class="table table-bordered table-striped align-middle w-auto">
+                <thead>
+                    <tr>
+                        <th>Kind</th>
+                        <th>Naming Convention</th>
+                        <th>Example</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr><td>Classes</td><td>PascalCase</td><td><code>class Car</code></td></tr>
+                    <tr><td>Types and Namespaces</td><td>PascalCase</td><td><code>namespace VehicleManufacturer;</code></td></tr>
+                    <tr><td>Parameters</td><td>camelCase</td><td><code>public Car(int odometerMileage, string manufacturer)</code></td></tr>
+                    <tr><td>Methods</td><td>PascalCase</td><td><code>public void StartEngine()</code></td></tr>
+                    <tr><td>Properties</td><td>PascalCase</td><td><code>public double FuelLevel { get; set; }</code></td></tr>
+                    <tr><td>Local Variables</td><td>camelCase</td><td><code>int yearManufactured;</code></td></tr>
+                    <tr><td>Local Functions</td><td>PascalCase</td><td><code>string CalculateMilesUntilEmpty(double fuelLevel)</code></td></tr>
+                    <tr><td>Fields</td><td>_PascalCase</td><td><code>private string _Day;</code></td></tr>
+                    <tr><td>Enum Members</td><td>PascalCase</td><td><code>enum Status { Unknown, Operational, Broken, InShop }</code></td></tr>
+                    <tr><td>Type Parameters</td><td>TPascalCase</td><td><code>public TOutput Convert&lt;TInput, TOutput&gt;(TInput from)</code></td></tr>
+                    <tr><td>Interfaces</td><td>IPascalCase</td><td><code>interface ISampleInterface</code></td></tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
     <div>
         @foreach (var group in guidelines.GroupBy(g => g.SanitizedSubsection).OrderBy(g => g.Key))
         {
-            <h2 class="fs-4" id="@group.Key?.ToLower()">@group.Key</h2>
+            <h2 class="fs-4 heading-wrapper" id="@group.Key?.ToLower()">
+                @group.Key
+                <button class="anchor-link" v-on:click="copyToClipboard('@group.Key?.ToLower()')">
+                    <i class="fa-solid fa-link"></i>
+                </button>
+            </h2>
             foreach (var guideline in group)
             {
                 <div>

EssentialCSharp.Web/wwwroot/css/styles.css

@@ -788,6 +788,28 @@ details > summary::-webkit-details-marker {
   border-color: var(--grey-lighten-2) transparent transparent transparent;
 }
 
+/* Anchor Styling */
+.heading-wrapper:not(:hover) .anchor-link:not(:focus-visible) {
+    opacity: 0;
+}
+
+.anchor-link {
+    border: none;
+    color: var(--link-color);
+    text-decoration: none;
+    position: absolute;
+    font-size: 14px;
+    margin: 4px 2px;
+    transition-duration: 0.4s;
+    cursor: pointer;
+    background-color: transparent;
+}
+
+    .anchor-link:hover {
+        color: var(--link-color-hover);
+    }
+
+
 /* The snackbar - position it at the bottom and in the middle of the screen */
 #snackbar {
   visibility: hidden; /* Hidden by default. Visible on click */