rawfeed 0.3.1 → 1.0.1

data/_posts/2025-09-25-this-post-demonstrates-post-content-styles.md

@@ -0,0 +1,133 @@
+---
+layout: blog/post
+title: "Content styles - Demonstration in the post"
+description: "This post demonstrates post content styles"
+author: "William Canin"
+date: 2025-09-22 17:24:04 -0300
+update_date: 2025-09-28 07:16:01 -0300
+comments: true
+tags: [example, style, include, chart]
+toc:
+  enable: true
+---
+
+> Note: This post create with command: `bundle exec rawfeed create:draft`
+> And then using the: `bundle exec rawfeed post:draft`
+
+# Theology (h1)
+
+Lorem ipsum dolor sit amet, `consectetur` adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit.
+
+## Eschatology
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit.
+
+> Curabitur dignissim accumsan rutrum.
+
+# Animals (h1)
+
+Proin convallis mi ac felis pharetra aliquam. Curabitur [dignissim accumsan](/){:target="\_blank"} rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu.
+
+_Mauris lobortis nulla et felis ullamcorper bibendum._ Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.
+
+## Feline (h2)
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. **Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt.** Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit.
+
+### Cat (h3)
+
+Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum.
+
+Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc.
+
+### Tiger (h3)
+
+Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt.
+
+# Lists
+
+## Ordered list
+
+1. First item, yo
+2. Second item, dawg
+3. Third item, what what?!
+4. Fourth item, fo sheezy my neezy
+5. Fifth item, nested!
+
+## List with subtitles
+
+- First item, yo
+- Second item, dawg
+- Third item, what what?!
+- Fourth item, fo sheezy my neezy
+- Fifth item, nested!
+  - So la ti do
+  - Ba-da-bing!
+  - Ba-da-boom!
+
+## Whaaat, a checklist??
+
+- [ ] Milk
+- [x] Cookies
+  - [x] Classic Choco-chip
+  - [x] Sourdough Choco-chip
+- [ ] Chee-ee-eeee-zzze!!!!
+
+# Table
+
+| Title 1               | Title 2               | Title 3               | Title 4               |
+| --------------------- | --------------------- | --------------------- | --------------------- |
+| lorem                 | lorem ipsum           | lorem ipsum dolor     | lorem ipsum dolor sit |
+| lorem ipsum dolor sit | lorem ipsum dolor sit | lorem ipsum dolor sit | lorem ipsum dolor sit |
+| lorem ipsum dolor sit | lorem ipsum dolor sit | lorem ipsum dolor sit | lorem ipsum dolor sit |
+| lorem ipsum dolor sit | lorem ipsum dolor sit | lorem ipsum dolor sit | lorem ipsum dolor sit |
+
+# Tabs example
+
+{% include markdown/tabs %}
+
+tab1: Installation
+
+Tab 1 content — can contain **markdown**, images, code, etc.
+
+tab2: Settings
+
+Tab 2 content — everything is set up normally.
+
+{% include markdown/endtabs %}
+
+# Alerts
+
+## Success
+
+{% include markdown/alert type="success" content="
+  Congratulations! Your theme is working.
+"%}
+
+## Danger
+
+{% include markdown/alert type="danger" content="
+  Danger! Do not remove this example
+"%}
+
+## Warning
+
+{% include markdown/alert type="warning" content="
+  Warning! This is just an example
+"%}
+
+# Charts example
+
+{% include markdown/chart
+  type="bar"
+  labels="January,February,March,April,May"
+  data="10,13,20,25,50"
+  label="Sales"
+  color="#3c7052ff"
+%}
+
+# Socials networks links
+
+{% include markdown/socials pos="center" %}

data/_posts/2025-10-04-content-styles-and-codeblocks.md

@@ -0,0 +1,330 @@
+---
+layout: blog/post
+title: "Content styles and Codeblocks - Demonstration in the post"
+description: "An example post for: Code Block and Styles"
+author: "William C. Canin"
+date: 2025-10-04 17:09:18 -0300
+update_date:
+comments: true
+tags: [example, codeblocks, style, include, chart, ruby, html, rust, raw]
+toc:
+  enable: true
+---
+
+> Note: This post create with command: `bundle exec rawfeed create:draft`
+> And then using the: `bundle exec rawfeed post:draft`
+
+# Theology (h1)
+
+Lorem ipsum dolor sit amet, `consectetur` adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit.
+
+## Eschatology
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit.
+
+> Curabitur dignissim accumsan rutrum.
+
+# Animals (h1)
+
+Proin convallis mi ac felis pharetra aliquam. Curabitur [dignissim accumsan](/){:target="\_blank"} rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu.
+
+_Mauris lobortis nulla et felis ullamcorper bibendum._ Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.
+
+## Feline (h2)
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. **Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt.** Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit.
+
+### Cat (h3)
+
+Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum.
+
+Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc.
+
+### Tiger (h3)
+
+Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt.
+
+# Lists
+
+## Ordered list
+
+1. First item, yo
+2. Second item, dawg
+3. Third item, what what?!
+4. Fourth item, fo sheezy my neezy
+5. Fifth item, nested!
+
+## List with subtitles
+
+- First item, yo
+- Second item, dawg
+- Third item, what what?!
+- Fourth item, fo sheezy my neezy
+- Fifth item, nested!
+  - So la ti do
+  - Ba-da-bing!
+  - Ba-da-boom!
+
+## Whaaat, a checklist??
+
+- [ ] Milk
+- [x] Cookies
+  - [x] Classic Choco-chip
+  - [x] Sourdough Choco-chip
+- [ ] Chee-ee-eeee-zzze!!!!
+
+# Quotes
+
+> normal citation
+
+> > double quote
+
+# Line separators
+
+---
+
+---
+
+---
+
+# Escaping special characters
+
+\*not in italics\*
+
+# Table
+
+| Title 1               | Title 2               | Title 3               | Title 4               |
+| --------------------- | --------------------- | --------------------- | --------------------- |
+| lorem                 | lorem ipsum           | lorem ipsum dolor     | lorem ipsum dolor sit |
+| lorem ipsum dolor sit | lorem ipsum dolor sit | lorem ipsum dolor sit | lorem ipsum dolor sit |
+| lorem ipsum dolor sit | lorem ipsum dolor sit | lorem ipsum dolor sit | lorem ipsum dolor sit |
+| lorem ipsum dolor sit | lorem ipsum dolor sit | lorem ipsum dolor sit | lorem ipsum dolor sit |
+
+# Images or Gifs example
+
+{% include markdown/image
+src= "https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXNqM21hNWtxeWtkMTh0ajIwc3prYmt3dmV0a3ptY2RyMDJrejlrYiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/xT9IgG50Fb7Mi0prBC/giphy.gif"
+title="Hello!"
+caption="Example animated GIF — © Giphy"
+width="300"
+height="auto"
+border-radius="2"
+align="left"
+border-color="#858585" %}
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt.
+_Mauris lobortis nulla et felis ullamcorper bibendum._ Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.
+
+{% include markdown/image
+src= "https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXNqM21hNWtxeWtkMTh0ajIwc3prYmt3dmV0a3ptY2RyMDJrejlrYiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/xT9IgG50Fb7Mi0prBC/giphy.gif"
+title="Hello!"
+caption="Example animated GIF — © Giphy"
+width="300"
+height="auto"
+border-radius="2"
+align="right" %}
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt.
+_Mauris lobortis nulla et felis ullamcorper bibendum._ Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.
+
+{% include markdown/image
+src= "https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXNqM21hNWtxeWtkMTh0ajIwc3prYmt3dmV0a3ptY2RyMDJrejlrYiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/xT9IgG50Fb7Mi0prBC/giphy.gif"
+title="Hello!"
+caption="Example animated GIF — © Giphy"
+width="100%"
+height="auto"
+border-radius="2"
+align="center"
+border-color="#46e038" %}
+
+Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.
+
+# Video YouTube
+
+> Note: You must copy the embed link
+
+{% include markdown/video title="Video" url="https://www.youtube.com/embed/xHusjrb_34A?si=th-S_gaVdKqtrJjj" %}
+
+# Tabs example
+
+{% include markdown/tabs %}
+
+tab1: Installation
+
+Tab 1 content — can contain **markdown**, images, code, etc.
+
+tab2: Settings
+
+Tab 2 content — everything is set up normally.
+
+{% include markdown/endtabs %}
+
+# Details example
+
+{% include markdown/details summary="How install" %}
+
+Here's the **expanded** content — it may have Markdown, code, lists, etc.
+
+{% include markdown/enddetails %}
+
+# Alerts
+
+## Success
+
+{% include markdown/alert type="success" content="
+  Congratulations! Your theme is working.
+"%}
+
+## Danger
+
+{% include markdown/alert type="danger" content="
+  Danger! Do not remove this example
+"%}
+
+## Warning
+
+{% include markdown/alert type="warning" content="
+  Warning! This is just an example
+"%}
+
+# Charts example
+
+{% include markdown/chart
+  type="bar"
+  labels="January,February,March,April,May"
+  data="10,13,20,25,50"
+  label="Sales"
+  color="#00bfffff"
+%}
+
+# Socials networks links
+
+{% include markdown/socials pos="center" %}
+
+# Blockcodes
+
+An article with various blocks of highlighted code snippets.
+
+## HTML code using crase ` ` `
+
+```html
+<html>
+  <head> </head>
+  <body>
+    <p>Hello, World!</p>
+  </body>
+</html>
+```
+
+## Ruby code using crase ` ` `
+
+```ruby
+include Enumerable
+
+module Foo
+  class Bar
+    LIPSUM = "lorem ipsum dolor sit"
+
+    attr_reader :layout
+
+    def initialize
+      @layout = Layout.new
+    end
+
+    # instance method
+    def profile
+      measure_time do
+        compile layout
+        layout.render_with Bar::LIPSUM
+      end
+    rescue ArgumentError
+      false
+    end
+  end
+end
+
+# Execute code
+Foo::Bar.new.profile
+```
+
+## Sass code using crase ` ` `
+
+```sass
+@import "base"
+
+.card
+  display: inline-block
+  margin: 0
+  padding: 0
+
+  &:hover
+    color: #ab45ef;
+```
+
+## Block raw
+
+{% raw %}
+
+```liquid
+{%- assign foo = page.foo | bar: 'baz' -%}
+{{ foo }}
+```
+
+{% endraw %}
+
+## HTML using { % highlight % } with numbers
+
+{% highlight html linenos %}
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Hello World</title>
+  </head>
+  <body>
+    <p>Hello, World!</p>
+  </body>
+</html>
+{% endhighlight %}
+
+## Rust using { % highlight % } with numbers and marking lines
+
+{% highlight rust linenos mark_lines="1 7 15 32" %}
+
+// main.rs
+
+use std::collections::HashMap;
+
+fn main() {
+
+let workflow: HashMap<&str, HashMap<&str, Vec<&str>>> = HashMap::from([
+(
+"My Main Tech Stack",
+HashMap::from([
+("Languages", vec!["Rust", "Python", "Shell Script"]),
+("Frontend", vec!["HTML", "CSS", "SASS", "Bootstrap", "Jekyll"]),
+("Database", vec!["PostGreSQL", "MySQL"]),
+("Tools", vec!["VSCode", "Vim", "JetBrains IDEs", "Git"]),
+("OS", vec!["Linux", "Windows"]),
+]),
+),
+]);
+
+let yt_link: &str = "https://www.youtube.com/c/williamcanin";
+
+println!("Hello, World!");
+println!("My name is William, and I am a programming and hacking enthusiast.");
+
+for (key, value) in &workflow {
+println!("{}:", key);
+for (inner_key, inner_value) in value {
+println!(" {}: {:?}", inner_key, inner_value);
+}
+}
+
+println!("YouTube::> {}", yt_link);
+
+}
+{% endhighlight %}

data/_sass/components/_markdown.scss

@@ -292,11 +292,11 @@
     color: var(--text-color) !important;
   }
 
-  /* toc/sumary */
+  /* toc/summary */
   .toc {
     padding: 1rem 2rem;
     margin: 1rem 0;
-    background: var(--sumary-bg-color);
+    background: var(--summary-bg-color);
     color: var(--text-color);
     border: 1px solid var(--border-color);
     // box-shadow: 0 2px 8px var(--shadow-color);

data/_sass/includes/_index.scss

@@ -1,4 +1,4 @@
-@use "header";
+@use "navbar";
 @use "rouge-light";
 @use "rouge-dark";
 @use "highlight";
@@ -6,4 +6,4 @@
 @use "terminal";
 @use "paginator";
 @use "maintenance";
-
+@use "toc";

data/_sass/includes/{_header.scss → _navbar.scss}

@@ -39,7 +39,7 @@
   border-bottom: 1px solid var(--text-color);
 }
 
-.header {
+.navigation {
   margin: 0 auto;
   margin-top: 20px;
   margin-bottom: 20px;
@@ -102,13 +102,9 @@
     // margin: 0px 5px;
   }
 
-
-  // O contêiner que reage ao hover
-
-
   .avatar {
     &-wrapper {
-      // Define a perspectiva para o efeito 3D
+      // Define the perspective for the 3D effect.
       perspective: 1000px;
     }
 

data/_sass/includes/_toc.scss

@@ -0,0 +1,146 @@
+
+/* Automatic TOC */
+.auto-toc {
+  position: fixed;
+  left: 0;
+  top: 15vh;
+  height: auto;
+  max-height: 70vh;
+  width: 24px;
+  background: transparent;
+  z-index: 10000;
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, box-shadow 0.3s ease;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  // border-radius: 0 12px 12px 0;
+  border: 2px solid transparent !important;
+  padding: 20px 0;
+
+  &:hover {
+    width: 380px;
+    background: var(--bg-color);
+    box-shadow: 8px 0 25px rgba(0, 0, 0, 0.15);
+    border: 2px dotted var(--background-focus-border-color) !important;
+    border-left: none;
+
+    .auto-toc-bars {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .auto-toc-content {
+      opacity: 1;
+      transform: translateX(0);
+      pointer-events: all;
+    }
+  }
+
+  .auto-toc-bars {
+    position: absolute;
+    left: 6px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    transition: opacity 0.2s ease;
+
+    .toc-bar {
+      width: 12px;
+      height: 3px;
+      background: var(--primary-color);
+      border-radius: 2px;
+      opacity: 0.8;
+
+      &:nth-child(even) {
+        width: 8px;
+      }
+    }
+  }
+
+  .auto-toc-content {
+    width: 100%;
+    height: 100%;
+    max-height: 70vh;
+    padding: 1.5rem;
+    opacity: 0;
+    transform: translateX(-20px);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    pointer-events: none;
+    display: flex;
+    flex-direction: column;
+    background: var(--bg-color);
+
+    h2 {
+      font-size: 0.85rem;
+      text-transform: uppercase;
+      letter-spacing: 0.12em;
+      color: var(--text-muted-color);
+      margin-bottom: 1.2rem;
+      font-weight: 800;
+      border-bottom: 1px solid var(--border-color);
+      padding-bottom: 0.5rem;
+    }
+
+    .auto-toc-list {
+      flex: 1;
+      overflow-y: auto;
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      padding-right: 10px;
+
+      &::-webkit-scrollbar {
+        width: 4px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: var(--border-color);
+        border-radius: 2px;
+      }
+
+      ul {
+        list-style: none;
+        padding-left: 1rem;
+        margin: 0.4rem 0;
+        border-left: 1px solid var(--border-color);
+      }
+
+      li {
+        margin: 0.5rem 0;
+        font-size: 0.88rem;
+
+        a {
+          color: var(--text-muted-color);
+          text-decoration: none;
+          transition: all 0.2s ease;
+          display: block;
+          line-height: 1.4;
+
+          &:hover {
+            color: var(--primary-color);
+            padding-left: 4px;
+          }
+
+          &.active {
+            color: var(--primary-color);
+            font-weight: 700;
+            border-left: 3px solid var(--primary-color);
+            padding-left: 12px;
+            margin-left: 0;
+
+            &::before {
+                display: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+/* Ensure post content doesn't get weird gaps if TOC is floating */
+@media (max-width: 1200px) {
+  .auto-toc {
+    display: none !important;
+  }
+}

data/_sass/layouts/_blog.scss

@@ -72,7 +72,7 @@
       pointer-events: auto;
     }
 
-    &__wapper {
+    &__wrap {
       display: flex;
       align-items: center;
       gap: 0;

data/_sass/layouts/_index.scss

@@ -3,8 +3,8 @@
 @use "blog";
 @use "page";
 @use "post";
-@use "tag";
-@use "tag-posts";
+@use "tags";
+@use "posts_by_tag";
 @use "contact";
 @use "error";
 @use "resume";

data/_sass/layouts/_page.scss

@@ -10,9 +10,4 @@
     font-family: "SUSE Mono", sans-serif;
     color: var(--text-muted-color);
   }
-
-  &-reading_time {
-    margin-top: 15px;
-    color: var(--text-muted-color);
-  }
 }