[Add] logo & favion, comments

.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+    "yaml.schemas": {
+      "https://squidfunk.github.io/mkdocs-material/schema.json": "mkdocs.yml"
+    },
+    "yaml.customTags": [
+      "!ENV scalar",
+      "!ENV sequence",
+      "!relative scalar",
+      "tag:yaml.org,2002:python/name:material.extensions.emoji.to_svg",
+      "tag:yaml.org,2002:python/name:material.extensions.emoji.twemoji",
+      "tag:yaml.org,2002:python/name:pymdownx.superfences.fence_code_format"
+    ]
+  }

README.md

@@ -10,4 +10,3 @@ Powered by [MkDocs](https://www.mkdocs.org/) & [Material for MkDocs](https://squ
 
 Bản dịch tiếng Việt của [TWEM](https://shintranslations.com/twem-toc/) sử
 dụng [Google Translate](https://translate.google.com/).
-

docs/index.md

@@ -1,3 +1,7 @@
+---
+comments: true
+---
+
 # Welcome to MkDocs
 
 For full documentation visit [mkdocs.org](https://www.mkdocs.org).

mkdocs.yml

@@ -1,4 +1,32 @@
 # yaml-language-server: $schema=https://squidfunk.github.io/mkdocs-material/schema.json
-site_name: My Docs
+site_name: Tiên Thiếu Sắc
 theme:
-  name: material
+  name: material
+  custom_dir: overrides
+  palette:
+    scheme: slate
+    primary: deep purple
+  language: vi
+  logo: assets/logo.png
+  favicon: images/favicon.png
+  features:
+    - search.suggest
+    - search.highlight
+    - search.share
+    - navigation.footer
+plugins:
+#  - meta
+  - offline
+#  - optimize
+  - search
+extra:
+  social:
+    - icon: fontawesome/brands/github
+      link: https://github.com/tienthieusac
+    - icon: fontawesome/brands/facebook
+      link: https://facebook.com/miti99
+copyright: |
+  Made by <a href="https://miti99.dev">miti99</a> with ❤️ Copyright &copy; 2024 Tiên Thiếu Sắc. License:
+  <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="license">CC BY 4.0</a><br>
+repo_url: https://github.com/tienthieusac/tienthieusac.github.io
+repo_name: tienthieusac.github.io

overrides/partials/comments.html

@@ -0,0 +1,54 @@
+{% if page.meta.comments %}
+<h2 id="__comments">{{ lang.t("meta.comments") }}</h2>
+<script src="https://giscus.app/client.js"
+        data-repo="tienthieusac/tienthieusac.github.io"
+        data-repo-id="R_kgDOLtunYQ"
+        data-category="Announcements"
+        data-category-id="DIC_kwDOLtunYc4Ceq2K"
+        data-mapping="pathname"
+        data-strict="0"
+        data-reactions-enabled="1"
+        data-emit-metadata="0"
+        data-input-position="bottom"
+        data-theme="dark"
+        data-lang="en"
+        crossorigin="anonymous"
+        async>
+</script>
+
+<!-- Synchronize Giscus theme with palette -->
+<script>
+    var giscus = document.querySelector("script[src*=giscus]")
+
+    // Set palette on initial load
+    var palette = __md_get("__palette")
+    if (palette && typeof palette.color === "object") {
+        var theme = palette.color.scheme === "slate"
+            ? "transparent_dark"
+            : "light"
+
+        // Instruct Giscus to set theme
+        giscus.setAttribute("data-theme", theme)
+    }
+
+    // Register event handlers after documented loaded
+    document.addEventListener("DOMContentLoaded", function () {
+        var ref = document.querySelector("[data-md-component=palette]")
+        ref.addEventListener("change", function () {
+            var palette = __md_get("__palette")
+            if (palette && typeof palette.color === "object") {
+                var theme = palette.color.scheme === "slate"
+                    ? "transparent_dark"
+                    : "light"
+
+                // Instruct Giscus to change theme
+                var frame = document.querySelector(".giscus-frame")
+                frame.contentWindow.postMessage(
+                    {giscus: {setConfig: {theme}}},
+                    "https://giscus.app"
+                )
+            }
+        })
+    })
+</script>
+{% endif %}