� Add tag-bar like youtube/unsplash homepage using google gemini ai generated code

Author: aryan

assets/css/custom.css

@@ -158,19 +158,19 @@ nav .search-wrapper {
 /* Customise Content Styles  */
 
 .content {
-
   hr {
+    margin-top: 2rem;
     border: 0;
     height: 1px;
-    --tw-text-opacity: 0.1;
+    --tw-text-opacity: 0.2;
     --color: rgb(12 12 12 / var(--tw-text-opacity));
     border-top: 1px solid var(--color);
   }
 
   hr:is(html[class~="dark"] *) {
     border: 0;
     height: 1px;
-    --tw-text-opacity: 0.1;
+    --tw-text-opacity: 0.2;
     --color: rgb(241 245 249 / var(--tw-text-opacity));
     border-top: 1px solid var(--color);
   }
@@ -190,6 +190,12 @@ nav .search-wrapper {
   .wrong:is(html[class~="dark"] *) {
     color: rgb(216, 63, 71);
   }
+
+  /* Chart JS Styling */
+
+  .chart {
+    margin-top: 1rem;
+  }
 }
 
 .card {
@@ -415,6 +421,11 @@ nav .search-wrapper {
   color: #e86c1a; /* Example highlight color */
 }
 
+.toc-scrollable {
+  max-height: calc(100vh - var(--navbar-height) - 100px); 
+  overflow-y: auto;
+}
+
 /* Custom Notes Blog List Cards  */
 
 .notes-blogs-wrapper {

content/blog/article/index.md

@@ -16,8 +16,7 @@ tags:
   - featured
 excludeSearch: false
 image: /images/green.jpg
-cascade:
- type: hero
+
 
 
 ---

content/blog/featureImage/index.md

@@ -1,22 +1,18 @@
 ---
-title: Featured
+title: How to add article series in a blog post - HUGO
+description: I'have been trying to add this functionality in my HUGO website 
 section: article
 date: 2020-01-01
 authors:
-  - name: imfing
-    link: https://github.com/imfing
-    image: https://github.com/imfing.png
-  - name: Octocat
-    link: https://github.com/octocat
-    image: https://github.com/octocat.png
+  - name: Aryan
+    link: https://github.com/simplearyan
+    image: https://github.com/simplearyan.png
 tags:
   - Markdown
   - Example
   - Guide
   - featured
 excludeSearch: false
-cascade:
- type: hero
 ---
 
 This article offers a sample of basic Markdown syntax that can be used in Hugo content files.

content/blog/webdev/how-to-add-chart-js-in-hugo.md

@@ -0,0 +1,58 @@
+---
+title: Chart JS 📈
+linkTitle: add chart.js in hugo
+description: How to add Chart JS in HUGO 🧑‍💻
+tags:
+  - chart.js
+  - featured
+image: /images/tree.jpg
+excludeSearch: false
+width: wide
+series: ["WEB-DEV"]
+series_order: 1
+excludeSearch: false
+chapter: 1
+---
+
+
+#### Line Chart
+
+{{< chart >}}
+
+  type: 'line',
+  data: {
+      labels: [
+        'Jan',
+        'Feb',
+        'Mar',
+        'Apr',
+        'May',
+        'June',
+        'July'
+      ],
+    datasets: [{
+      label: 'My First Dataset',
+      data: [65, 59, 80, 81, 56, 55, 40],
+      fill: false,
+      borderColor: 'rgb(192, 75, 143)',
+      tension: 0.1
+    }]
+  },
+
+{{< /chart >}}
+
+
+---
+
+#### Bar Chart
+
+{{< chart >}}
+type: 'bar',
+data: {
+  labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'],
+  datasets: [{
+    label: '# of votes',
+    data: [12, 19, 3, 5, 3],
+  }]
+}
+{{< /chart >}}

content/blog/webdev/hugo.md

@@ -0,0 +1,165 @@
+---
+title: HUGO
+section: article
+date: 2020-01-01
+authors:
+  - name: imfing
+    link: https://github.com/imfing
+    image: https://github.com/imfing.png
+  - name: Octocat
+    link: https://github.com/octocat
+    image: https://github.com/octocat.png
+tags:
+  - Markdown
+  - Example
+  - Guide
+  - featured
+image: /images/green.jpg
+series: ["WEB-DEV"]
+series_order: 2
+excludeSearch: false
+chapter: 2
+
+
+---
+
+This article offers a sample of basic Markdown syntax that can be used in Hugo content files.
+<!--more-->
+
+## Basic Syntax
+
+### Headings
+
+```
+# Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+##### Heading 5
+###### Heading 6
+```
+
+## Heading 2
+### Heading 3
+#### Heading 4
+##### Heading 5
+###### Heading 6
+
+### Emphasis
+
+```text
+*This text will be italic*
+_This will also be italic_
+
+**This text will be bold**
+__This will also be bold__
+
+_You **can** combine them_
+```
+
+*This text will be italic*
+
+_This will also be italic_
+
+**This text will be bold**
+
+__This will also be bold__
+
+_You **can** combine them_
+
+### Lists
+
+#### Unordered
+
+```
+* Item 1
+* Item 2
+  * Item 2a
+  * Item 2b
+```
+
+* Item 1
+* Item 2
+  * Item 2a
+  * Item 2b
+
+#### Ordered
+
+```
+1. Item 1
+2. Item 2
+3. Item 3
+   1. Item 3a
+   2. Item 3b
+```
+
+### Images
+
+```markdown
+![GitHub Logo](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)
+```
+
+![GitHub Logo](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)
+
+### Links
+
+```markdown
+[Hugo](https://gohugo.io)
+```
+
+[Hugo](https://gohugo.io)
+
+### Blockquotes
+
+```markdown
+As Newton said:
+
+> If I have seen further it is by standing on the shoulders of Giants.
+```
+
+> If I have seen further it is by standing on the shoulders of Giants.
+
+### Inline Code
+
+```markdown
+Inline `code` has `back-ticks around` it.
+```
+
+Inline `code` has `back-ticks around` it.
+
+### Code Blocks
+
+#### Syntax Highlighting
+
+````markdown
+```go
+func main() {
+    fmt.Println("Hello World")
+}
+```
+````
+
+```go
+func main() {
+    fmt.Println("Hello World")
+}
+```
+
+### Tables
+
+```markdown
+| Syntax    | Description |
+| --------- | ----------- |
+| Header    | Title       |
+| Paragraph | Text        |
+```
+
+| Syntax    | Description |
+| --------- | ----------- |
+| Header    | Title       |
+| Paragraph | Text        |
+
+## References
+
+- [Markdown Syntax](https://www.markdownguide.org/basic-syntax/)
+- [Hugo Markdown](https://gohugo.io/content-management/formats/#markdown)

content/examples/guide/shortcodes/chart.md

@@ -30,6 +30,9 @@ linkTitle: Charts
 
 {{< /chart >}}
 
+
+---
+
 #### Bar Chart
 
 {{< chart >}}