Update

_sources/_config.yml

@@ -60,14 +60,15 @@ defaults:
 # Excluded items can be processed by explicitly listing the directories or
 # their entries' file path in the `include:` list.
 #
-# exclude:
-#   - .sass-cache/
-#   - .jekyll-cache/
-#   - gemfiles/
-#   - Gemfile
-#   - Gemfile.lock
-#   - node_modules/
-#   - vendor/bundle/
-#   - vendor/cache/
-#   - vendor/gems/
-#   - vendor/ruby/
+exclude:
+  - .sass-cache/
+  - .jekyll-cache/
+  - gemfiles/
+  - Gemfile
+  - Gemfile.lock
+  - node_modules/
+  - vendor/bundle/
+  - vendor/cache/
+  - vendor/gems/
+  - vendor/ruby/
+  - node_modules

_sources/_includes/card_layout

@@ -9,12 +9,14 @@
 {% endfor %}
 
 {% assign no_children = include.page.has_children | not %}
+{% assign count = 0 %}
 
 <div class="card large gradient">
     {% if include.page.use_child_thumbnails %}
     <div class="previews" style="--ico:url('{{ site.baseurl }}/assets/{{ child.splash }}');">
         {% assign child_pages = site.pages | where: 'parent', include.page.title %}
         {% for child in child_pages %}
+            {% assign count = count | plus: 1 %}
             <div class="preview" style="--img:url('{{ site.baseurl }}/assets/images/{{ child.preview_img }}');"></div>
         {% endfor %}
     </div>    
@@ -24,9 +26,9 @@
     <div class="infos {{ include.page.color | default:'blue' }}" markdown="1">
 
 {% if include.page.card_url == 'none' %}
-## {{ include.page.title }}
+## {{ include.page.title }} {% if count > 0 %}· {{ count }}{% endif %}
 {% else %}
-## [{{ include.page.title }}]({{ include.lk }})
+## [{{ include.page.title }}]({{ include.lk }}) {% if count > 0 %}· {{ count }}{% endif %}
 {: .no_toc }
 {% endif %}
 {{ include.page.subtitle }}

_sources/_includes/header_card

@@ -17,4 +17,5 @@
 {: .fs-5 .fw-300 }  
 
 {% endif %}
+
 ---

_sources/_includes/header_card_node

@@ -1,9 +1,31 @@
 {% include header_card %}
-
+{% if page.inputs or page.outputs %}
+<div class="node-io">
+    {% if page.inputs %}
+    <div class="col inputs">
+    {% for io in page.inputs %}
+        <div class="pin"><div class="title"><img class="icon" src="{{ site.baseurl }}/assets/icons/icon_{{ io.pin }}.svg">{{io.name}}</div><div class="desc">{{io.desc}}</div></div>
+    {% endfor %}
+    </div>
+    {% endif %}
+    {% if page.outputs %}
+    <div class="col outputs">
+    {% for io in page.outputs %}
+        <div class="pin"><div class="title"><img class="icon" src="{{ site.baseurl }}/assets/icons/icon_{{ io.pin }}.svg">{{io.name}}</div><div class="desc">{{io.desc}}</div></div>
+    {% endfor %}
+    </div>
+    {% endif %}
+</div>
 {% if page.example %}
 <span class="example">★</span> See Example Project @ **{{ page.example }}**
 {% endif %}
-
+---
+{% else %}
+{% if page.example %}
+<span class="example">★</span> See Example Project @ **{{ page.example }}**
+---
+{% endif %}
+{% endif %}
 {% if page.see_also %}
 #### Related
 {: .no_toc }

_sources/_sass/cards.scss

@@ -154,8 +154,21 @@ $cornerr: 5px;
         display: none !important;
     }
 
+    & .childCounter{
+        position: absolute;
+        color: #ffffff;
+        background-color: #ec1e79;
+        margin: 10px;
+        padding: 1px 10px;
+        border-radius: 3px;
+        font-weight: bold;
+        bottom: 22px;
+        right: 0px;
+    }
 }
 
+
+
 .product-header {
 
     display: flex;
@@ -249,6 +262,94 @@ $cornerr: 5px;
 
 }
 
+.node-io{
+    display: flex;
+    flex-direction: row;
+    align-content: flex-start;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+    align-items: flex-start;
+    gap:10px;
+    margin-bottom: 40px;
+
+    & .col{
+
+        &::before {
+            content:"→ Inputs";
+            font-size: 1em;
+            transform: translateY(-128%);
+            position: absolute;
+            opacity: 0.2;
+        }
+
+        display: flex;
+        flex: 1 1 auto;
+        padding: 16px;
+        padding-top: calc(1em + 20px);
+        background-color: #212025;
+        border-radius: 5px;
+        font-size: 80%;
+        gap: 10px;
+        flex-direction: column;
+
+
+        & .pin{
+
+            display: flex;
+            flex-direction: column;
+            flex-wrap: nowrap;
+
+            & .title{
+
+                display:flex;
+
+                & .icon{
+                    margin-right: 10px;
+                }
+            }
+
+            & .desc{
+                padding-top: 5px;
+                font-size: 90%;
+                opacity: 0.5;
+            }
+
+            & .icon{
+                width: 20px;
+                height: 20px;
+            }
+
+        }      
+    }
+
+    & .outputs{
+
+        &::before {
+            content:"Outputs →";
+        }
+
+        text-align: right;
+        align-items: flex-end;
+
+        & .pin{
+
+            & .title{
+                flex-direction: row-reverse;
+
+                & .icon{
+                    margin-right: 0;
+                    margin-left: 10px;
+                }
+            }
+
+            & .desc{
+                text-align: right;
+            }
+        }
+
+    }
+}
+
 blockquote {
     margin: 0;
     padding: 5px 20px;