feat: now posts have comments

_includes/analytics.html

@@ -1,4 +1,4 @@
-<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
+<link preconnect as="script" src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></link>
 <script>
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}

_includes/comments.html

@@ -0,0 +1,15 @@
+<script src="https://giscus.app/client.js"
+    data-repo="ryrden/ryan.dev"
+    data-repo-id="R_kgDOJRCb-A"
+    data-category-id="DIC_kwDOJRCb-M4CcCwA"
+    data-mapping="og:title"
+    data-strict="1"
+    data-reactions-enabled="1"
+    data-emit-metadata="0"
+    data-input-position="top"
+    data-theme="{{ '/assets/custom_style.css' | relative_url }}"
+    data-lang="pt"
+    data-loading="lazy"
+    crossorigin="anonymous"
+    async>
+</script>

_layouts/post.html

@@ -23,4 +23,7 @@ <h2>Conteúdo</h2>
             Encontrou algum erro? sinta-se a vontade para abrir um pull request no arquivo <a href="https://github.com/ryrden/ryan.dev/blob/main/{{ page.path }}" target="_blank">fonte</a> deste post no Github.
         </quote>
     </p>
+    {% if page.comments %}
+        {% include comments.html %}
+    {% endif %}
 </section>

_sass/_base.scss

@@ -1,5 +1,6 @@
 html, body {
     height: 100%;
+    font-size: 16px;
 }
 
 body {

_sass/pages/footer.scss

@@ -1,5 +1,5 @@
 .site-footer {
-    margin-top: auto;
+    margin-top: 2em;
     width: 100%;
     text-align: center;
 

assets/custom_style.css

@@ -0,0 +1,69 @@
+/*!
+ * Modified from GitHub's Dark Dimmed theme, licensed under the MIT License
+ * Copyright (c) 2018 GitHub Inc.
+ * https://github.com/primer/primitives/blob/main/LICENSE
+ */
+main {
+    --color-prettylights-syntax-comment: var(--text-muted); /* Water.css: #70777f */
+    --color-prettylights-syntax-constant: var(--links); /* Water.css: #0076d1 */
+    --color-prettylights-syntax-entity: var(--variable); /* Water.css: #39a33c */
+    --color-prettylights-syntax-storage-modifier-import: var(--text-main); /* Water.css: #363636 */
+    --color-prettylights-syntax-entity-tag: var(--highlight); /* Water.css: #ff0 */
+    --color-prettylights-syntax-keyword: var(--text-bright); /* Water.css: #000 */
+    --color-prettylights-syntax-string: var(--selection); /* Water.css: #9e9e9e */
+    --color-prettylights-syntax-variable: var(--focus); /* Water.css: #0096bfab */
+    --color-prettylights-syntax-brackethighlighter-unmatched: var(--border); /* Water.css: #dbdbdb */
+    --color-prettylights-syntax-invalid-illegal-text: var(--background-alt); /* Water.css: #f7f7f7 */
+    --color-prettylights-syntax-invalid-illegal-bg: var(--background-body); /* Water.css: #fff */
+    --color-prettylights-syntax-carriage-return-text: var(--text-muted); /* Water.css: #70777f */
+    --color-prettylights-syntax-carriage-return-bg: var(--text-main); /* Water.css: #363636 */
+    --color-prettylights-syntax-string-regexp: var(--highlight); /* Water.css: #ff0 */
+    --color-prettylights-syntax-markup-list: var(--button-hover); /* Water.css: #9b9b9b */
+    --color-prettylights-syntax-markup-heading: var(--links); /* Water.css: #0076d1 */
+    --color-prettylights-syntax-markup-italic: var(--text-muted); /* Water.css: #70777f */
+    --color-prettylights-syntax-markup-bold: var(--text-muted); /* Water.css: #70777f */
+    --color-prettylights-syntax-markup-deleted-text: var(--background-alt); /* Water.css: #f7f7f7 */
+    --color-prettylights-syntax-markup-deleted-bg: var(--border); /* Water.css: #dbdbdb */
+    --color-prettylights-syntax-markup-inserted-text: var(--background); /* Water.css: #efefef */
+    --color-prettylights-syntax-markup-inserted-bg: var(--text-main); /* Water.css: #363636 */
+    --color-prettylights-syntax-markup-changed-text: var(--selection); /* Water.css: #9e9e9e */
+    --color-prettylights-syntax-markup-changed-bg: var(--text-bright); /* Water.css: #000 */
+    --color-prettylights-syntax-markup-ignored-text: var(--text-muted); /* Water.css: #70777f */
+    --color-prettylights-syntax-markup-ignored-bg: var(--links); /* Water.css: #0076d1 */
+    --color-prettylights-syntax-meta-diff-range: var(--variable); /* Water.css: #39a33c */
+    --color-prettylights-syntax-brackethighlighter-angle: var(--text-muted); /* Water.css: #70777f */
+    --color-prettylights-syntax-sublimelinter-gutter-mark: var(--border); /* Water.css: #dbdbdb */
+    --color-prettylights-syntax-constant-other-reference-link: var(--selection); /* Water.css: #9e9e9e */
+    --color-btn-text: var(--text-main); /* Water.css: #363636 */
+    --color-btn-bg: var(--background); /* Water.css: #efefef */
+    --color-btn-border: var(--border); /* Water.css: #dbdbdb */
+    --color-btn-shadow: 0 0 #0000;
+    --color-btn-inset-shadow: 0 0 #0000;
+    --color-btn-hover-bg: var(--button-hover); /* Water.css: #9b9b9b */
+    --color-btn-hover-border: var(--text-muted); /* Water.css: #70777f */
+    --color-btn-active-bg: var(--background-alt); /* Water.css: #f7f7f7 */
+    --color-btn-active-border: var(--text-main); /* Water.css: #363636 */
+    --color-btn-selected-bg: var(--background); /* Water.css: #efefef */
+    --color-btn-primary-text: var(--text-bright); /* Water.css: #000 */
+    --color-btn-primary-bg: var(--links); /* Water.css: #0076d1 */
+    --color-btn-primary-border: var(--border); /* Water.css: #dbdbdb */
+    --color-btn-primary-shadow: 0 0 #0000;
+    --color-btn-primary-inset-shadow: 0 0 #0000;
+    --color-btn-primary-hover-bg: var(--button-hover); /* Water.css: #9b9b9b */
+    --color-btn-primary-hover-border: var(--border); /* Water.css: #dbdbdb */
+    --color-btn-primary-selected-bg: var(--links); /* Water.css: #0076d1 */
+    --color-btn-primary-selected-shadow: 0 0 #0000;
+    --color-btn-primary-disabled-text: var(--text-muted); /* Water.css: #70777f */
+    --color-btn-primary-disabled-bg: var(--background-alt); /* Water.css: #f7f7f7 */
+    --color-btn-primary-disabled-border: var(--border); /* Water.css: #dbdbdb */
+    --color-action-list-item-default-hover-bg: var(--background-alt); /* Water.css: #f7f7f7 */
+    --color-segmented-control-bg: var(--background); /* Water.css: #efefef */
+    --color-segmented-control-button-bg: var(--background-body); /* Water.css: #fff */
+    --color-segmented-control-button-selected-border: var(--text-main); /* Water.css: #363636 */
+    --color-fg-default: var(--text-main); /* Water.css: #363636 */
+    --color-fg-muted: var(--text-muted); /* Water.css: #70777f */
+    --color-fg-subtle: var(--border); /* Water.css: #dbdbdb */
+    --color-canvas-default: var(--background-body); /* Water.css: #fff */
+    --color-canvas-overlay: var(--background); /* Water.css: #efefef */
+    --color-canvas-inset: var(--background-alt); /* Water.css: #f7f7f7 */
+}