🍱 #71: Add new cshtml template

Sharp0802 · Jul 16, 2024 · 878efb3 · 878efb3
1 parent d16aa0b
commit 878efb3
Show file tree

Hide file tree

Showing 3 changed files with 452 additions and 0 deletions.
diff --git a/src/sika/Resources/material.cshtml b/src/sika/Resources/material.cshtml
@@ -0,0 +1,160 @@
+<!--
+Copyright (C) 2023  Yeong-won Seo
+
+SIKA is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+SIKA is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with SIKA.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+@model sika.core.Model.TemplateModel
+
+<!DOCTYPE html>
+<html lang="@Model.Data.Metadata.LCID">
+
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <meta name="keywords" content="@(string.Join(',', Model.Data.Metadata.Topic))"/>
+
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"/>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" defer></script>
+  <script src="@(Model.Project.Info.RootUri)script/highlight.min.js" defer></script>
+
+  <link rel="stylesheet" href="@(Model.Project.Info.RootUri)style/material.css"/>
+
+  <title>@Model.Data.Metadata.Title</title>
+</head>
+
+<body>
+<nav class="top">
+  <div>
+    <div style="height: 24px;">
+      <span id="menu" class="material-symbols-outlined">menu</span>
+    </div>
+    <div>@Model.Project.Profile.UserName</div>
+    <div>
+      <img class="profile" src="https://avatars.githubusercontent.com/u/64760536?v=4" alt="profile image"/>
+    </div>
+  </div>
+</nav>
+
+<nav class="side">
+  <div class="side-container">
+    <div class="card" id="profile-container">
+      <img class="profile" src="@Model.Project.Profile.ProfileImage" alt="profile image"/>
+      <ul id="contacts">
+        <li>
+          <h2>@Model.Project.Profile.UserName</h2>
+        </li>
+        <li></li>
+        <li style="height: fit-content;">Game · System developer / C · C++ · C# / LLVM · OpenGL / A high-school student 🇰🇷</li>
+        <li></li>
+        <li>
+          <ul class="contact-entry">
+            <li>
+              <span class="icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24">
+                  <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                </svg>
+              </span>
+            </li>
+            <li>
+              <a href="@Model.Project.Contacts.GitHub">
+                @Model.Project.Contacts.GitHub[Model.Project.Contacts.GitHub.IndexOf("github.com", StringComparison.Ordinal)..]
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <ul class="contact-entry">
+            <li>
+              <span class="icon material-symbols-outlined">mail</span>
+            </li>
+            <li>
+              <a href="mailto:@Model.Project.Contacts.Email">@Model.Project.Contacts.Email</a>
+            </li>
+          </ul>
+        </li>
+        @foreach (var link in Model.Project.Contacts.Misc)
+        {
+          <li>
+            <ul class="contact-entry">
+              <li>
+                <span class="icon material-symbols-outlined">link</span>
+              </li>
+              <li>
+                <a href="@link.HRef">@link.Name</a>
+              </li>
+            </ul>
+          </li>
+        }
+      </ul>
+    </div>
+
+    <div class="card" id="tree-view-container">
+      <ul id="tree-view">
+        @Raw(Model.PostTree)
+      </ul>
+    </div>
+
+    <div id="footer">
+      <span>
+        Made with <a href="https://github.com/Sharp0802/sika">SIKA</a>
+      </span>
+    </div>
+  </div>
+</nav>
+
+<article>
+  <main>
+    <header class="card">
+      <h1>@Model.Data.Metadata.Title</h1>
+      <h3>Last edit on @Model.Data.Metadata.Timestamps.Last().ToString("yyyy-MM-dd")</h3>
+    </header>
+
+    <p class="markdown-body">
+      @Raw(Model.Data.Content)
+    </p>
+  </main>
+</article>
+
+
+<script>
+  'use strict';
+
+  // side view
+  const menu = document.getElementById("menu");
+  const side = document.querySelector("nav.side");
+  menu.addEventListener("click", _ => {
+    if (side.classList.contains("vis")) {
+      menu.textContent = "menu";
+      side.classList.remove("vis");
+    } else {
+      menu.textContent = "menu_open";
+      side.classList.add("vis");
+    }
+  });
+
+  // tree view
+  let elements = document.getElementsByClassName("caret");
+  for (let i = 0; i < elements.length; ++i) {
+    let element = elements[i];
+    element.addEventListener("click", () => {
+      element.parentElement.querySelector(".nested").classList.toggle("active");
+      element.classList.toggle("caret-down");
+    })
+  }
+</script>
+
+</body>
+
+</html>
diff --git a/src/sika/sika.csproj b/src/sika/sika.csproj
@@ -30,6 +30,7 @@
         <EmbeddedResource Include="Resources\new-help.txt"/>
         <EmbeddedResource Include="Resources\welcome.txt"/>
         <EmbeddedResource Include="Resources\default.cshtml"/>
+        <EmbeddedResource Include="Resources\material.cshtml"/>
     </ItemGroup>
 
     <ItemGroup>