populated telegraf input plugins list

assets/styles/layouts/_article.scss

@@ -61,7 +61,7 @@
 
   p,li {
     color: $article-text;
-    line-height: 1.6rem;
+    line-height: 1.7rem;
   }
 
   p {
@@ -110,6 +110,7 @@
           "article/tabbed-content",
           "article/tables",
           "article/tags",
+          "article/telegraf-plugins",
           "article/truncate",
           "article/warn";
 

assets/styles/layouts/article/_code.scss

@@ -8,7 +8,7 @@ code,pre {
 
 p,li,table,h2,h3,h4,h5,h6 {
   code {
-    padding: .15rem .45rem .25rem;
+    padding: .1rem .4rem .2rem;
     border-radius: $radius;
     color: $article-code;
     white-space: nowrap;

assets/styles/layouts/article/_telegraf-plugins.scss

@@ -0,0 +1,99 @@
+/////////////////////// Styles for Telegraf plugin cards ///////////////////////
+
+.plugin-card {
+  position: relative;
+  padding: 1rem 1.5rem;
+  margin-bottom: .5rem;
+  justify-content: center;
+  align-items: center;
+  background: rgba($body-bg, .4);
+  border-radius: $radius;
+
+  h3 {
+    padding: 0;
+    margin-top: .25rem;
+  }
+
+  p {
+    &.meta {
+      margin: .75rem 0;
+      font-weight: $medium;
+      line-height: 1.75rem;
+
+      .deprecated {
+        margin-left: .5rem;
+        font-style: italic;
+        color: $article-code-accent7;
+      }
+    }
+  }
+
+  & .info {
+    & > p:last-child { margin-bottom: .5rem; }
+    & > ul:last-child { margin-bottom: .5rem; }
+    & > ol:last-child { margin-bottom: .5rem; }
+  }
+
+  .github-link {
+    position: absolute;
+    top: 0;
+    right: 0.5rem;
+    opacity: 0;
+    transition: opacity .2s, background .2s, color 2s;
+
+    .icon-github {
+      font-size: 1.2rem;
+      margin: 0 .25rem 0 0;
+    }
+  }
+
+  &:hover {
+    .github-link { opacity: 1; }
+  }
+
+  // Special use-case for using block quotes in the yaml provided by the data file
+  blockquote {
+    border-color: $article-note-base;
+    background: rgba($article-note-base, .12);
+    h3,h4,h5,h6 { color: $article-note-heading; }
+    p, li {
+      color: $article-note-text;
+      font-size: 1rem;
+      font-style: normal;
+    }
+    strong { color: inherit; }
+    a {
+      color: $article-note-link;
+      code:after {
+        border-color: transparent rgba($article-note-code, .35) transparent transparent;
+      }
+      &:hover {
+        color: $article-note-link-hover;
+        code:after {
+          border-color: transparent $article-note-link-hover transparent transparent;
+        }
+      }
+    }
+    ol li:before { color: $article-note-text; }
+    code, pre{
+      color: $article-note-code;
+      background: $article-note-code-bg;
+    }
+  }
+}
+
+////////////////////////////////////////////////////////////////////////////////
+///////////////////////////////// MEDIA QUERIES ////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////
+
+@include media(small) {
+  .plugin-card {
+    .github-link {
+      opacity: 1;
+      padding: .25rem .35rem .35rem;
+      line-height: 0;
+      .icon-github { margin: 0; }
+      .hide { display: none; }
+    }
+  }
+}

layouts/shortcodes/telegraf-plugins.html

@@ -2,11 +2,15 @@
 
 {{ range (index .Site.Data.telegraf_plugins $type ) }}
   {{ $pluginTags := delimit .tags ", " }}
-  <div class="plugin-card" data-tags="{{ $pluginTags }}">
-    <h3>{{ .name }}</h3>
-    <p><strong>Plugin ID:</strong> <code>{{ .id }}</code></p>
-    <p><strong>Telegraf {{ if not .deprecated }}{{ .introduced }}+{{ else }}{{ .introduced }} - {{ .deprecated }}{{ end }}</strong></p>
-    <p>{{ .description | markdownify }}</p>
-    <a class="btn" href="{{ .link }}" target="_blank"><span class="icon-github"></span> View docs</a>
+  <div class="plugin-card" id="{{ .id }}" data-tags="{{ $type }}, {{ $pluginTags }}">
+    <div class="info">
+      <h3 id="{{ .id }}">{{ .name }}</h3>
+      <p class="meta">
+        Plugin ID: <code>{{ .id }}</code><br/>
+        Telegraf {{ if not .deprecated }}{{ .introduced }}+{{ else }}{{ .introduced }} - {{ .deprecated }} <span class="deprecated">Depricated</span>{{ end }}
+      </p>
+      <p>{{ .description | markdownify | safeHTML }}</p>
+    </div>
+    <a class="btn github-link" href="{{ .link }}" target="_blank"><span class="icon-github"></span> <span class="hide">View</span></a>
   </div>
 {{ end }}