feat(doc): add comment section

docs/src/components/Content.astro

@@ -0,0 +1,41 @@
+---
+import type { Props } from '@astrojs/starlight/props';
+import Default from '@astrojs/starlight/components/MarkdownContent.astro';
+
+const slug = Astro.props.slug;
+const renderCommentSection = !(['', 'challenges/testing', 'challenges/angular-performance']).includes(slug)
+---
+
+
+<Default {...Astro.props}><slot /></Default>
+
+
+<div class="border-t"></div>
+
+{ renderCommentSection
+ ?
+   <script src="https://giscus.app/client.js"
+            data-repo="tomalaforge/angular-challenges"
+            data-repo-id="R_kgDOIXXIfw"
+            data-category="Announcements"
+            data-category-id="DIC_kwDOIXXIf84CSZF_"
+            data-mapping="title"
+            data-strict="0"
+            data-reactions-enabled="1"
+            data-emit-metadata="0"
+            data-input-position="bottom"
+            data-theme="preferred_color_scheme"
+            data-lang="en"
+            data-loading="lazy"
+            crossorigin="anonymous"
+            async>
+</script>
+: ``}
+
+<style>
+    .border-t {
+        border-top: solid 1px rgb(36, 37, 38);
+        margin: 3rem 0px;
+    }
+
+</style>

docs/src/components/TableOfContents.astro

@@ -0,0 +1,31 @@
+---
+import Default from '@astrojs/starlight/components/TableOfContents.astro';
+import { Icon } from '@astrojs/starlight/components';
+
+---
+
+<Default {...Astro.props}><slot /></Default>
+
+
+<a class="action-button" href='https://github.com/tomalaforge/angular-challenges'>
+	<div>Give a star</div>
+	<Icon name='github' size="1.5rem" />
+</a>
+
+<style>
+    .action-button {
+        display: flex!important;
+        justify-content: center;
+        width: fit-content;
+        gap: 0.5em;
+        align-items: center;
+        border-radius: 999rem;
+        color: var(--sl-color-white)!important;
+        line-height: 1.1875;
+        text-decoration: none;
+        font-size: var(--sl-text-sm)!important;
+        border: 1px solid;
+        font-size: var(--sl-text-base);
+        padding: 0.5rem 0.8rem;
+    }
+</style>

docs/src/content/docs/challenges/angular-performance/37-ngfor-biglist.md

@@ -1,6 +1,7 @@
 ---
 title: 🟠 Optimize Big List
 description: Challenge 37 is about learning how virtualization optimize big list rendering
+toto: skldfjklsdlfkj
 sidebar:
   order: 117
   badge: New

docs/src/styles/custom-css.css

@@ -120,3 +120,14 @@ starlight-menu-button svg {
   padding: 1px 2px;
   border-radius: 999px;
 }
+
+.right-sidebar-panel {
+  height: 100%;
+}
+
+.right-sidebar-panel > div {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}