tags filer for actions

_config.yml

@@ -22,6 +22,7 @@ collections:
     output: true
   docs:
     output: true
+    sort_by: order_n
 
 defaults:
   - scope:

_data/github_actions.yml

@@ -1,25 +1,31 @@
 - title: "Submit Argo Workflows on GKE "
   info : "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore cum vel nesciunt distinctio nobis"
   link : "https://github.com/marketplace/actions/submit-argo-workflows-to-gke"
+  tags : [MLOps, Machine Learning, Data Science]
 
 - title: "Submit Argo Workflows on K8s (Cloud agnostic)"
   info : Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore cum vel nesciunt distinctio nobis
   link : "https://github.com/marketplace/actions/submit-argo-workflows-from-github"
+  tags : [Machine Learning, Data Science]
 
 - title: "Fetch runs from Weights & Biases"
   info : Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore cum vel nesciunt distinctio nobis
   link : "https://github.com/marketplace/actions/get-runs-from-weights-biases"
+  tags: [actions]
 
 - title: "To compile, deploy and run Kubeflow pipeline"
   info : Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore cum vel nesciunt distinctio nobis
   link : "https://github.com/marketplace/actions/kubeflow-compile-deploy-and-run"
-
+  tags: [kubeflow]
+  
 - title: "Dockerize GitHub repositories automatically as a Jupyter Server"
   info : Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore cum vel nesciunt distinctio nobis
   link : "https://github.com/machine-learning-apps/repo2docker-action"
+  tags: [repo2docker]
 
 - title: aml-workspace
   link : https://github.com/marketplace/actions/azure-machine-learning-workspace) - creates an Azure Machine Learning workspace.
+  tags: [marketplace]
 
 - title:  aml-compute
   link : "https://github.com/marketplace/actions/azure-machine-learning-compute-action"

_docs/Issue-Label-Bot.md

@@ -11,7 +11,7 @@ titles:
 - Deploy As A Service
 - Contributing
 tags: [markdown, opera, github]
-type: important
+order_n:  1
 ---
 
 [![Python 3.6](https://img.shields.io/badge/python-3.6-blue.svg)](https://www.python.org/downloads/release/python-360/) [![License: MIT](https://img.shields.io/badge/License-MIT-darkgreen.svg)](https://opensource.org/licenses/MIT)

_docs/Markdown-here.md

@@ -9,10 +9,8 @@ titles:
 - Mozilla Add-ons site
 - Things to know about converting/reverting a selection
 - Next Steps
-tipue_search_active: true
-exclude_from_search: false
 tags: [markdown, opera, github]
-type: important
+order_n:  2
 ---
 
 [**Visit the website.**](http://markdown-here.com)<br>

_docs/Markdownsource.md

@@ -6,8 +6,7 @@ titles:
 - Sources for markdown
 - Heading One
 tags: [markdown, source]
-tipue_search_active: true
-exclude_from_search: false
+order_n: 3
 ---
 
 https://www.markdownguide.org/cheat-sheet/

_docs/readme.md

@@ -7,8 +7,7 @@ titles:
 - What I want to achieve
 - Design
 - Advanced features of this site which are not needed
-tipue_search_active: true
-exclude_from_search: false
+order_n: 0
 tags: [jekyll]
 ---
 

_docs/spectral-interface.md

@@ -12,7 +12,7 @@ titles:
 - Squared exponential kernel.
 
 tags: [spectral, python, network]
-type: important
+order_n:  5
 ---
 ## Spectral Inference Networks (SpIN)
 

_docs/welcome-to-jekyll.markdown

@@ -7,8 +7,7 @@ titles:
 - Check out the Jekyll docs
 date:   2019-12-30 08:40:50 +0200
 categories: jekyll update
-tipue_search_active: true
-exclude_from_search: false
+order_n: 6
 tags: [jekyll, code]
 ---
 You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.

_docs/working-with-run-debug.md

@@ -7,10 +7,9 @@ titles:
 - Check out the Jekyll docs
 date:   2019-12-31 08:40:50 +0200
 categories: jekyll run debug
-tipue_search_active: true
-exclude_from_search: false
+
 tags: [jekyll, code]
-type: important
+order_n:  8
 ---
 
 To run or debug your code in PyCharm, you can use numerous run/debug configurations. Each run/debug configuration represents a named set of run/debug startup properties. When you perform run, debug, or test operations with PyCharm, you always start a process based on one of the existing configurations using its parameters.

_includes/head.html

@@ -9,6 +9,8 @@
   {%- if jekyll.environment == 'production' and site.google_analytics -%}
   {%- include google-analytics.html -%}
   {%- endif -%}
+  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
+    integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
    <style>
     body {
       background: #1b1f23;

_sass/custom.scss

@@ -49,7 +49,7 @@ li {
     justify-self: right;
     background: transparent;
     outline: none;
-    border: none;
+    border:  none;
   }
   .toggle_icon {
     padding-right: 10px;
@@ -132,7 +132,7 @@ li {
     .content_item {
       position: relative;
       padding: 0 20px;
-      border: 1px solid $grey-color-dark;
+      border:  1px solid $grey-color-dark;
       border-radius: 5px;
       -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
@@ -196,7 +196,7 @@ li {
     img {
       display: block;
       margin: auto;
-      border: 3px solid $brand-color;
+      border:  3px solid $brand-color;
       border-radius: 50%;
       -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
@@ -318,6 +318,10 @@ li {
     }
   }
 }
+/* tags filters */
+.tags .active {
+  color: $brand-color;
+}
 /* media queries */
 @media screen and (min-width: 768px) {
   .blog_intro {

_sass/custom_old.scss

@@ -97,7 +97,7 @@ h2 {
     .content_item {
       position: relative;
       padding: 10px;
-      border: 1px solid $grey-color-dark;
+      border:  1px solid $grey-color-dark;
       border-radius: 5px;
       -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
@@ -167,7 +167,7 @@ h2 {
     }
     img {
       width: 100%;
-      border: 3px solid $brand-color;
+      border:  3px solid $brand-color;
       border-radius: 50%;
       -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
@@ -199,7 +199,7 @@ h2 {
   z-index: 10;
   width: 0;
   height: 0;
-  border: 155px solid $background-color;
+  border:  155px solid $background-color;
   border-bottom-color: transparent;
   position: relative;
   top: -155px;
@@ -211,7 +211,7 @@ h2 {
     top: 155px;
     width: 0;
     height: 0;
-    border: 155px solid $brand-color;
+    border:  155px solid $brand-color;
     border-top-color: transparent;
   }
 }

_sass/minima/_base.scss

@@ -149,7 +149,7 @@ blockquote {
 pre,
 code {
   @include relative-font-size(0.9375);
-  border: 1px solid $grey-color-light;
+  border:  1px solid $grey-color-light;
   border-radius: 3px;
   background-color: #eef;
 }
@@ -163,7 +163,7 @@ pre {
   overflow-x: auto;
 
   > code {
-    border: 0;
+    border:  0;
     padding-right: 0;
     padding-left: 0;
   }
@@ -234,7 +234,7 @@ table {
   text-align: $table-text-align;
   color: lighten($text-color, 18%);
   border-collapse: collapse;
-  border: 1px solid $grey-color-light;
+  border:  1px solid $grey-color-light;
   tr {
     &:nth-child(even) {
       background-color: lighten($grey-color-light, 6%);
@@ -245,10 +245,10 @@ table {
   }
   th {
     background-color: lighten($grey-color-light, 3%);
-    border: 1px solid darken($grey-color-light, 4%);
+    border:  1px solid darken($grey-color-light, 4%);
     border-bottom-color: darken($grey-color-light, 12%);
   }
   td {
-    border: 1px solid $grey-color-light;
+    border:  1px solid $grey-color-light;
   }
 }

_sass/minima/_layout.scss

@@ -51,7 +51,7 @@
     top: 9px;
     right: $spacing-unit / 2;
     background-color: $background-color;
-    border: 1px solid $grey-color-light;
+    border:  1px solid $grey-color-light;
     border-radius: 5px;
     text-align: right;
 

actions.html

@@ -13,12 +13,25 @@ totam odit optio. Impedit incidunt laboriosam doloremque. Molestias, consequatur
   <div class="text_box">
     <h1>{{page.title}}</h1>
     <p>{{page.description}}</p>
+
+    <!-- tags filter -->
+    <div class="tags">
+      {% assign tags =  site.data.github_actions | map: 'tags' | uniq %}
+      <button class="tag_filter active" data-tag="all">All</button>
+      {%- assign s = tags | size | minus: 2 -%}
+      {%- for i in (0..s) -%}
+        <button class="tag_filter" data-tag="{{tags[i] | replace: ' ', '_'}}">{{tags[i]}}</button>
+      {%- endfor -%}
+    </div>
+
+    <!-- Posts list -->
     <div class="posts_list">
       {%- for item in site.data.github_actions -%}
-      <div class="blog content_item">
+      {% assign t = item.tags | join: "%%" | replace: " ", "_"| replace: "%%", " " %}
+      <div class="blog content_item {{t}}">
         <a href="{{item.link}}">
           <h2>{{item.title}}</h2>
-        </a>
+        </a>  
         <p>{{item.info}}</p>
       </div>
       {%- endfor -%}

assets/js/common.js

@@ -14,4 +14,16 @@ function toggle_menu() {
     t[1].classList.remove('hidden');
     nav.classList.remove('hidden');
   }
-}
+}
+$(".tag_filter").click(function () {
+  const filter = '.' + $(this).attr('data-tag');
+  if (filter == '.all') {
+    $(".content_item").show();
+  }
+  else {
+  $(".content_item").hide();
+  $(filter).show();
+  };
+  $(".tag_filter").removeClass("active");
+  $(this).addClass('active');
+});