feat(Documents) Notes/Docs page improvements and warning cleanup

2022-04-07 13:30:00 -04:00
parent b270453030
commit d82e60efdf
223 changed files with 4396 additions and 2861 deletions
@@ -0,0 +1,115 @@
+@layout PageLayout
+
+@inject IDocumentationService documentationService
+@implements IDisposable
+
+@page "/docs"
+
+@if (!documentationService.IsLoaded())
+{
+    <LoadingComponent/>
+}
+else
+{
+    <LayoutMediumContentComponent>
+        <PaperComponent>
+            @foreach (var docSection in documentationService.DocSectionModels)
+            {
+                <div class="docSectionContainer">
+                    <div class="docSectionTitle">@docSection.Name</div>
+                    <div class="docContentContainer">
+                        @foreach (var docContent in docSection.DocumentationModels)
+                        {
+                            <NavLink class="docContentLink" href="@docContent.GetDocLink()">
+                                <div class="docContentName">@docContent.Name</div>
+                                <div class="docContentDescription">@docContent.Description</div>
+                            </NavLink>
+                        }
+                    </div>
+                </div>
+            }
+        </PaperComponent>
+    </LayoutMediumContentComponent>
+}
+
+<style>
+    .docSectionContainer {
+        width: 100%;
+        padding: 8px;
+    }
+    
+    .docSectionTitle {
+        font-size: 3rem;
+        font-weight: bold;
+        text-align: center;
+        margin-bottom: 32px;
+    }
+    
+    .docContentContainer {
+        display: grid;
+        gap: 12px;
+        grid-template-columns: 1fr 1fr;
+    }
+    
+    @@media only screen and (max-width: 1025px) {
+          .docContentContainer {
+           grid-template-columns: 1fr;
+       }
+    }
+    
+    .docContentName {
+        font-weight: bold;
+        font-size: 1.6rem;
+    }
+    
+    .docContentDescription {
+        font-weight: normal;
+    }
+    
+    
+    .docContentLink {
+        background-color: var(--paper);
+        border: 1px solid var(--paper-border);
+        border-radius: 2px;
+        padding-left: 12px;
+        padding-right: 12px;
+        padding-top: 24px;
+        padding-bottom: 24px;
+        color: white;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        text-align: center;
+        margin-left: 12px;
+        margin-right: 12px;
+    }
+    
+    
+    .docContentLink:hover {
+        background-color: var(--paper-hover);
+        border-color: var(--paper-border-hover);
+        text-decoration: none;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.6);
+        transform: translateY(-2px) scale(1.01);
+    }
+</style>
+
+
+@code {
+
+    [Parameter]
+    public string? Text { get; set; }
+
+    protected override void OnInitialized()
+    {
+        documentationService.Subscribe(StateHasChanged);
+
+        documentationService.Load();
+    }
+
+    public void Dispose()
+    {
+        documentationService.Unsubscribe(StateHasChanged);
+    }
+
+}
@@ -1,69 +1,40 @@
@layout PageLayout

-@inject IDocumentationService DocumentationService
-@using Markdig
+@inject IDocumentationService documentationService
+
@implements IDisposable

-@page "/docs/{text?}"
+@page "/docs/{href1}/{href2?}/{href3?}/{href4?}/{href5?}"

-
-@if (!DocumentationService.IsLoaded())
+@if (!documentationService.IsLoaded())
 {
-    <LoadingComponent></LoadingComponent>
+    <LoadingComponent/>
 }
 else
 {
-    <LayoutMediumContentComponent>
-        <WebsiteTitleComponent>Documentation</WebsiteTitleComponent>
-
-        <div class="section">
-            <div for="docSection">Section: </div>
-            <div style="flex: 1"></div>
-            <select @oninput="OnSectionChanged" style="background-color: #36393F; width: 250px; margin-right: 16px;" name="docSection">
-                <option value="All">All</option>
-
-            </select>
-        </div>
-
-        <div class="docsContainer">
-            @foreach (var doc in DocumentationService.DocumentationModels) {
-                if (selectedSection != "All" && doc.Section != selectedSection) {
-                    continue;
+    <LayoutWithSidebarComponent>
+        <Sidebar>
+            <DocumentNavComponent
+                Connections="documentationService.DocConnectionModels"
+                Documents="documentationService.DocContentModels"/>
+        </Sidebar>
+        <Content>
+            <PaperComponent>
+                @foreach (var doc in documentationService.DocContentModels)
+                {
+                    if (!doc.Href.Equals(Href))
+                    {
+                        continue;
+                    }
+                    <DocumentComponent DocContentModel="doc"/>
                }
-                <PaperComponent>
-                    <div style="display: flex; flex-direction: row;">
-                        <span style="font-weight: bold; font-style:italic;">@doc.Section</span>
-                        <div style="flex: 1"></div>
-                        <span style="font-weight: bold; font-style:italic;">Last Updated on @doc.UpdatedDate.ToString("MM/dd/yyyy")</span>
-                    </div>
-                    <div>
-                        <div id="@doc.Id" style="font-weight: bold; font-size: 1.4rem;">@doc.Name</div>
-                        <div>@((MarkupString)Markdown.ToHtml(doc.Description))</div>
-                    </div>
-                </PaperComponent>
-            }
-        </div>
-    </LayoutMediumContentComponent>
-   
+            </PaperComponent>
+        </Content>
+    </LayoutWithSidebarComponent>
 }
-<style>
-    .section {
-        display: flex;
-        width: 500px;
-        flex-direction: row;
-        background-color: var(--paper);
-        justify-content: center;
-        padding: 24px;
-        border: 4px solid var(--paper-border);
-        box-shadow: 0px 6px var(--paper-border);
-    }

-    .docsContainer {
-        display: flex;
-        flex-direction: column;
-        gap: 16px;
-    }
-    
+<style>
+
    
    pre code {
        color: white;
@@ -121,25 +92,32 @@ else
@code {

    [Parameter]
-    public string? Text { get; set; }
-    
-    string selectedSection = "All";
+    public string? Href1 { get; set; }
+
+    [Parameter]
+    public string? Href2 { get; set; }
+
+    [Parameter]
+    public string? Href3 { get; set; }
+
+    [Parameter]
+    public string? Href4 { get; set; }
+
+    [Parameter]
+    public string? Href5 { get; set; }
+
+    private string Href => Href5 ?? Href4 ?? Href3 ?? Href2 ?? Href1 ?? "";

    protected override void OnInitialized()
    {
-        DocumentationService.Subscribe(StateHasChanged);
-        
-        DocumentationService.Load();
+        documentationService.Subscribe(StateHasChanged);
+
+        documentationService.Load();
    }
-    
-    
+
    public void Dispose()
    {
-        DocumentationService.Unsubscribe(StateHasChanged);
-    }
-    
-    void OnSectionChanged(ChangeEventArgs e) {
-        selectedSection = e.Value.ToString();
-        StateHasChanged();
+        documentationService.Unsubscribe(StateHasChanged);
    }
+
 }
@@ -0,0 +1,35 @@
+<div class="doc">
+    <div class="docHeader">
+        <div class="docTitle">@DocContentModel.Name</div>
+
+        <div class="docDates">
+            <div class="docDateUpdated"><b>Updated</b>: @DocContentModel.UpdatedDate.ToString("MM/dd/yyyy")</div>
+            <div class="docDateCreated"><b>Created</b>: @DocContentModel.CreatedDate.ToString("MM/dd/yyyy")</div>
+        </div>
+    </div>
+    <div class="docContent">@((MarkupString)Markdown.ToHtml(DocContentModel.Content))</div>
+</div>
+
+<style>
+ .docTitle {
+    font-weight: bold;
+ }
+ 
+ .docHeader {
+display: flex;
+justify-content: space-between;
+ }
+ 
+ .docDates {
+ display: flex;
+ flex-direction: column;
+ }
+ 
+</style>
+
+@code {
+
+    [Parameter]
+    public DocContentModel DocContentModel { get; set; } = default!;
+
+}
@@ -0,0 +1,70 @@
+@if (Document!.DocumentationModels.Count > 0)
+{
+    <div class="docInnerNavContainer">
+        @foreach (var innerDoc in Document.DocumentationModels)
+        {
+            var linkStyle = $"docInnerNavButton inner_{Layers}";
+            <NavLink class="@linkStyle" href="@innerDoc.GetDocLink()">@innerDoc.Name</NavLink>
+            <DocumentInnerNavComponent Document="@innerDoc" Layers="@IncrementLayers()"/>
+        }
+    </div>
+}
+
+<style>
+ 
+.docInnerNavContainer {
+    display: flex;
+    flex-direction: column;
+}
+
+.docInnerNavButton a {
+    color: white;
+}
+
+.docInnerNavButton a:hover {
+    color: white;
+}
+
+.docInnerNavButton {
+    padding: 8px;
+    margin-left: 8px;
+    color: white;
+}
+
+.inner_1 {
+    margin-left: 8px;
+}
+
+.inner_2 {
+    margin-left: 16px;
+}
+
+.inner_3 {
+    margin-left: 24px;
+}
+
+
+
+
+</style>
+
+@code {
+
+    [Parameter]
+    public DocContentModel? Document { get; set; } = default!;
+
+    [Parameter]
+    public int Layers { get; set; } = 1;
+
+    public int IncrementLayers()
+    {
+        return Layers + 1;
+    }
+
+
+    private string GetLink(DocContentModel doc)
+    {
+        return $"docs/{doc.Href}";
+    }
+
+}
@@ -0,0 +1,46 @@
+<div class="docNavContainer">
+    @foreach (var doc in Documents)
+    {
+        if (doc.Parent == null)
+        {
+            <NavLink class="docNavButton" href="@doc.GetDocLink()">@doc.Name</NavLink>
+            <DocumentInnerNavComponent Document="@doc"/>
+        }
+    }
+</div>
+
+<style>
+ .docNavContainer {
+     display: flex;
+     flex-direction: column;
+ }
+ 
+ .docNavButton a {
+     color: white;
+ }
+ 
+ .docNavButton a:hover {
+      color: white;
+  }
+ 
+ .docNavButton {
+     padding: 8px;
+     color: white;
+ }
+
+</style>
+
+@code {
+
+    [Parameter]
+    public List<DocContentModel> Documents { get; set; } = default!;
+
+    [Parameter]
+    public List<DocConnectionModel> Connections { get; set; } = default!;
+
+    private string GetLink(DocContentModel doc)
+    {
+        return $"docs/{doc.Href}";
+    }
+
+}