feat(docs): Update MoltenObsidian dependencies & add elements styling

- Updated the package references for `Nodsoft.MoltenObsidian.Blazor` and `Nodsoft.MoltenObsidian.Vaults.Http` to version 1.0.4-beta.
- Added a new SCSS file `_docs.scss` with styles for code blocks, markdown alerts, and JSON syntax highlighting.
- Imported `_docs.scss` in the `site.scss` file under the `article.docs` section.
- Added a new SCSS file `json.scss` with styles for JSON syntax highlighting.

The changes include updating package references and adding new SCSS files for tags, code styling and JSON syntax highlighting.

SocialGuard.Web/SocialGuard.Web.csproj

@@ -10,8 +10,8 @@
 
     <ItemGroup>
         <PackageReference Include="DartSassBuilder" Version="1.0.0" />
-        <PackageReference Include="Nodsoft.MoltenObsidian.Blazor" Version="0.5.18" />
-        <PackageReference Include="Nodsoft.MoltenObsidian.Vaults.Http" Version="0.5.18" />
+        <PackageReference Include="Nodsoft.MoltenObsidian.Blazor" Version="1.0.4-beta" />
+        <PackageReference Include="Nodsoft.MoltenObsidian.Vaults.Http" Version="1.0.4-beta" />
         <PackageReference Include="Serilog.AspNetCore" Version="8.0.0" />
         <PackageReference Include="Serilog.Extensions.Logging" Version="8.0.0" />
     </ItemGroup>

SocialGuard.Web/wwwroot/css/_docs.scss

@@ -0,0 +1,83 @@
+@mixin code-font() {
+  font-family: monospace;
+  font-size: 90%;
+}
+
+pre {
+  @include code-font();
+  padding: 1em;
+  background-color: rgba(white, 0.05);
+  border-radius: 0.5em;
+  white-space: pre-wrap;
+}
+
+:not(pre) code {
+  @include code-font();
+
+  color: #e83e8c;
+  text-decoration-color: #e83e8c;
+  background-color: rgba(white, 0.03);
+  padding: 0.25em 0.5em;
+  border-radius: 0.3em;
+}
+
+.markdown-alert {
+  @mixin callout-color($name, $color) {
+    background-color: rgba($color, 0.1);
+
+    &-title {
+      color: $color;
+
+      svg {
+        fill: $color;
+      }
+    }
+  }
+
+  background-color: rgba(white, 0.025);
+  background-blend-mode: lighten;
+  padding: 1.5em;
+  border-radius: 0.5em;
+  margin: 1em 0;
+
+  &-title {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+    font-weight: bold;
+  }
+
+  p:first-child {
+    margin-block-start: 0;
+  }
+
+  p:last-child {
+    margin-block-end: 0;
+  }
+
+  // Colors
+  @include callout-color("info", rgb(0, 122, 255));
+}
+
+@mixin code-block-syntax($lang) {
+  .lang-#{$lang} .#{$lang} pre {
+    @content;
+  }
+}
+
+@include code-block-syntax("json") {
+  @import "syntax/json";
+}
+
+.moltenobsidian-tag {
+  background-color: rgba(0, 173, 181, 0.1);
+  padding-inline: .75em;
+  padding-block: .25em;
+  border-radius: 1em;
+
+  &::before {
+    content: "#";
+    padding-inline-end: 0.25em;
+    color: var(--bs-primary);
+  }
+}

SocialGuard.Web/wwwroot/css/site.scss

@@ -125,4 +125,8 @@ body {
 
 	-webkit-backdrop-filter: blur(50px);
 	backdrop-filter: blur(50px);
+}
+
+article.docs {
+	@import "docs";
 }

SocialGuard.Web/wwwroot/css/syntax/json.scss

@@ -0,0 +1,11 @@
+$symbols-color: (
+        "jsonKey": #D7BA7D,
+        "jsonString": #D69D85,
+        "jsonNumber": #B5CEA8,
+);
+
+@each $symbol, $color in $symbols-color {
+  .#{$symbol} {
+    color: $color;
+  }
+}