Skip to content

feat: Add naming conventions table and anchors to guideline blocks #758

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 24, 2025
Merged

feat: Add naming conventions table and anchors to guideline blocks #758

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bfd4851
Add naming conventions table and anchors to guideline blocks
BenjaminMichaelis Jul 15, 2025
d9dc06e
PR Feedback
BenjaminMichaelis Jul 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 39 additions & 1 deletion EssentialCSharp.Web/Views/Home/Guidelines.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
22 changes: 22 additions & 0 deletions EssentialCSharp.Web/wwwroot/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down
Loading