From f8d6060675efe868dc32b1a80d037f832a5753bb Mon Sep 17 00:00:00 2001
From: onukura <y.bibos.ishikawa@gmail.com>
Date: Wed, 15 Jul 2020 02:40:16 +0900
Subject: [PATCH] introduce category system #42

---
 _data/plugins.yml     | 418 +++++++++++++++++++++++-------------------
 _includes/header.html |   9 +-
 _sass/_layout.scss    |  21 ++-
 index.html            |  30 ++-
 4 files changed, 284 insertions(+), 194 deletions(-)

diff --git a/_data/plugins.yml b/_data/plugins.yml
index 4a8db75..06f0b23 100644
--- a/_data/plugins.yml
+++ b/_data/plugins.yml
@@ -1,185 +1,233 @@
-- name: Announce plugin
-  description: Send announcements via email to groups of users, e.g. for maintenance.
-  url: https://github.com/gitbucket-plugins/gitbucket-announce-plugin
-  icon: fa fa-bullhorn
-  distributed: false
-
-- name: H2 Backup plugin
-  description: Backup functionality of the H2 Database used by GitBucket.
-  url: https://github.com/gitbucket-plugins/gitbucket-h2-backup-plugin
-  icon: fa fa-database
-  distributed: false
-
-- name: Desktop Notification plugin
-  description: Notify GitBucket activity directly on the desktop.
-  url: https://github.com/yoshiyoshifujii/gitbucket-desktopnotify-plugin
-  icon: fa fa-bell
-  distributed: false
-
-- name: Gist plugin
-  description: Add code snippet Gist-like functionality to GitBucket.
-  url: https://github.com/gitbucket/gitbucket-gist-plugin
-  icon: fa fa-file-code-o
-  distributed: true
-
-- name: Commits Graph plugin
-  description: Add commit graph views to GitBucket.
-  url: https://github.com/yoshiyoshifujii/gitbucket-commitgraphs-plugin
-  icon: fa fa-line-chart
-  distributed: false
-
-- name: AsciiDoc plugin
-  description: Add AsciiDoc rendering capabilities to GitBucket.
-  url: https://github.com/lefou/gitbucket-asciidoctor-plugin
-  icon: fa fa-file-text
-  distributed: false
-
-- name: Bugspots plugin
-  description: Add Google bugspots functionality to GitBucket.
-  url: https://github.com/yoshiyoshifujii/gitbucket-bugspots-plugin
-  icon: fa fa-bug
-  distributed: false
-
-- name: Pages plugin
-  description: Project Pages for GitBucket.
-  url: https://github.com/yaroot/gitbucket-pages-plugin
-  icon: fa fa-book
-  distributed: true
-
-- name: Network plugin
-  description: Network graph for GitBucket.
-  url: https://github.com/mrkm4ntr/gitbucket-network-plugin
-  icon: fa fa-code-fork
-  distributed: false
-
-- name: Emoji plugin
-  description: Emoji support for GitBucket.
-  url: https://github.com/gitbucket/gitbucket-emoji-plugin
-  icon: fa fa-smile-o
-  distributed: true
-
-- name: RST plugin
-  description: ReSTructured text renderer for GitBucket.
-  url: https://github.com/amuramatsu/gitbucket-rst-plugin
-  icon: fa fa-file-text
-  distributed: false
-
-- name: Explorer plugin
-  description: Explorer like navigation side panel for your projects.
-  url: https://github.com/gitbucket-plugins/gitbucket-explorer-plugin
-  icon: fa fa-list-alt
-  distributed: false
-
-- name: FESS plugin
-  description: Fast enterprise search for GitBucket using a FESS server.
-  url: https://github.com/codelibs/gitbucket-fess-plugin
-  icon: fa fa-search
-  distributed: false
-
-- name: PlantUML plugin
-  description: Render PlantUML files in GitBucket.
-  url: https://github.com/nus/gitbucket-plantuml-plugin
-  icon: fa fa-object-group
-  distributed: false
-
-- name: Monitoring plugin
-  description: Monitors and displays statistics about the running GitBucket instance.
-  url: https://github.com/YoshinoriN/gitbucket-monitoring-plugin
-  icon: fa fa-server
-  distributed: false
-
-- name: HTML5 Media plugin
-  description: Renders HTML5 Media (Audio/Video/PDF) inline in GitBucket.
-  url: https://github.com/kounoike/gitbucket-html5media-plugin
-  icon: fa fa-html5
-  distributed: false
-
-- name: Jupyter plugin
-  description: GitBucket plugin for rendering Jupyter or IPython files.
-  url: https://github.com/kounoike/gitbucket-ipynb-plugin
-  icon: fa fa-ravelry
-  distributed: false
-
-- name: Email Notifications plugin
-  description: GitBucket plugin to send Email notifications.
-  url: https://github.com/gitbucket/gitbucket-notifications-plugin
-  icon: fa fa-envelope
-  distributed: true
-
-- name: CI plugin
-  description: GitBucket plug-in that adds simple CI ability to GitBucket.
-  url: https://github.com/takezoe/gitbucket-ci-plugin
-  icon: fa fa-cog
-  distributed: false
-
-- name: Maven Repository plugin
-  description: GitBucket plugin that provides Maven repository hosting on GitBucket.
-  url: https://github.com/takezoe/gitbucket-maven-repository-plugin
-  icon: fa fa-cubes
-  distributed: false
-
-- name: Mirror plugin
-  description: This plugin adds repository mirroring to GitBucket.
-  url: https://github.com/alexandremenif/gitbucket-mirror-plugin
-  icon: fa fa-copy
-  distributed: false
-
-- name: H2Console plugin
-  description: A GitBucket plugin that adds H2 console to the administration console.
-  url: https://github.com/takezoe/gitbucket-h2console-plugin
-  icon: fa fa-table
-  distributed: false
-
-- name: Backup plugin
-  description: Plugin providing backup functionality for GitBucket.
-  url: https://github.com/jyuch/gitbucket-backup-plugin
-  icon: fa fa-floppy-o
-  distributed: false
-
-- name: Logs Viewer plugin
-  description: A plugin allowing to view and control GitBucket logs.
-  url: https://github.com/YoshinoriN/gitbucket-application-logs-plugin
-  icon: fa fa-file-text-o
-  distributed: false
-
-- name: Kanban Board plugin
-  description: A plugin for Kanban style issue management in GitBucket.
-  url: https://github.com/kasancode/gitbucket-label-kanban-plugin
-  icon: fa fa-check
-  distributed: false
-
-- name: Gantt Chart plugin
-  description: A plugin for rendering a Gantt Chart view of the GitBucket issues.
-  url: https://github.com/kasancode/gitbucket-gantt-plugin
-  icon: fa fa-sliders
-  distributed: false
-
-- name: Swagger plugin
-  description: A plugin for rendering a Swagger (OpenAPI) files.
-  url: https://github.com/onukura/gitbucket-swagger-plugin
-  icon: fa fa-ellipsis-h
-  distributed: false
-
-- name: R Markdown plugin
-  description: A plugin for rendering a R Markdown files.
-  url: https://github.com/onukura/gitbucket-rmarkdown-plugin
-  icon: fa fa-registered
-  distributed: false
-
-- name: MathJax plugin
-  description: A plugin for rendering a markdown files with MathJax.
-  url: https://github.com/onukura/gitbucket-mathjax-plugin
-  icon: fa fa-superscript
-  distributed: false
-
-- name: 3D file plugin
-  description: A plugin for rendering 3D files.
-  url: https://github.com/onukura/gitbucket-3dfile-plugin
-  icon: fa fa-cube
-  distributed: false
-
-- name: GeoJSON plugin
-  description: A plugin for rendering GeoJSON files.
-  url: https://github.com/onukura/gitbucket-geojson-plugin
-  icon: fa fa-map-marker
-  distributed: false
+- name: Nortification
+
+  id: nortification
+
+  plugins:
+
+    - name: Announce plugin
+      description: Send announcements via email to groups of users, e.g. for maintenance.
+      url: https://github.com/gitbucket-plugins/gitbucket-announce-plugin
+      icon: fa fa-bullhorn
+      distributed: false
+
+    - name: Desktop Notification plugin
+      description: Notify GitBucket activity directly on the desktop.
+      url: https://github.com/yoshiyoshifujii/gitbucket-desktopnotify-plugin
+      icon: fa fa-bell
+      distributed: false
+
+    - name: Email Notifications plugin
+      description: GitBucket plugin to send Email notifications.
+      url: https://github.com/gitbucket/gitbucket-notifications-plugin
+      icon: fa fa-envelope
+      distributed: true
+
+- name: Analysis
+
+  id: analysis
+
+  plugins:
+
+    - name: Commits Graph plugin
+      description: Add commit graph views to GitBucket.
+      url: https://github.com/yoshiyoshifujii/gitbucket-commitgraphs-plugin
+      icon: fa fa-line-chart
+      distributed: false
+
+    - name: Bugspots plugin
+      description: Add Google bugspots functionality to GitBucket.
+      url: https://github.com/yoshiyoshifujii/gitbucket-bugspots-plugin
+      icon: fa fa-bug
+      distributed: false
+
+    - name: Network plugin
+      description: Network graph for GitBucket.
+      url: https://github.com/mrkm4ntr/gitbucket-network-plugin
+      icon: fa fa-code-fork
+      distributed: false
+
+    - name: FESS plugin
+      description: Fast enterprise search for GitBucket using a FESS server.
+      url: https://github.com/codelibs/gitbucket-fess-plugin
+      icon: fa fa-search
+      distributed: false
+
+- name: Maintenance
+
+  id: maintenance
+
+  plugins:
+
+    - name: Monitoring plugin
+      description: Monitors and displays statistics about the running GitBucket instance.
+      url: https://github.com/YoshinoriN/gitbucket-monitoring-plugin
+      icon: fa fa-server
+      distributed: false
+
+    - name: H2 Backup plugin
+      description: Backup functionality of the H2 Database used by GitBucket.
+      url: https://github.com/gitbucket-plugins/gitbucket-h2-backup-plugin
+      icon: fa fa-database
+      distributed: false
+
+    - name: H2Console plugin
+      description: A GitBucket plugin that adds H2 console to the administration console.
+      url: https://github.com/takezoe/gitbucket-h2console-plugin
+      icon: fa fa-table
+      distributed: false
+
+    - name: Backup plugin
+      description: Plugin providing backup functionality for GitBucket.
+      url: https://github.com/jyuch/gitbucket-backup-plugin
+      icon: fa fa-floppy-o
+      distributed: false
+
+    - name: Logs Viewer plugin
+      description: A plugin allowing to view and control GitBucket logs.
+      url: https://github.com/YoshinoriN/gitbucket-application-logs-plugin
+      icon: fa fa-file-text-o
+      distributed: false
+
+- name: CI/CD
+
+  id: cicd
+
+  plugins:
+
+    - name: CI plugin
+      description: GitBucket plug-in that adds simple CI ability to GitBucket.
+      url: https://github.com/takezoe/gitbucket-ci-plugin
+      icon: fa fa-cog
+      distributed: false
+
+- name: Utilities
+
+  id: util
+
+  plugins:
+
+    - name: Gist plugin
+      description: Add code snippet Gist-like functionality to GitBucket.
+      url: https://github.com/gitbucket/gitbucket-gist-plugin
+      icon: fa fa-file-code-o
+      distributed: true
+      
+    - name: Pages plugin
+      description: Project Pages for GitBucket.
+      url: https://github.com/yaroot/gitbucket-pages-plugin
+      icon: fa fa-book
+      distributed: true
+
+    - name: Maven Repository plugin
+      description: GitBucket plugin that provides Maven repository hosting on GitBucket.
+      url: https://github.com/takezoe/gitbucket-maven-repository-plugin
+      icon: fa fa-cubes
+      distributed: false
+
+    - name: Mirror plugin
+      description: This plugin adds repository mirroring to GitBucket.
+      url: https://github.com/alexandremenif/gitbucket-mirror-plugin
+      icon: fa fa-copy
+      distributed: false
+
+- name: UI
+
+  id: ui
+
+  plugins:
+
+    - name: Emoji plugin
+      description: Emoji support for GitBucket.
+      url: https://github.com/gitbucket/gitbucket-emoji-plugin
+      icon: fa fa-smile-o
+      distributed: true
+
+    - name: Explorer plugin
+      description: Explorer like navigation side panel for your projects.
+      url: https://github.com/gitbucket-plugins/gitbucket-explorer-plugin
+      icon: fa fa-list-alt
+      distributed: false
+
+- name: Project Management
+
+  id: proj
+
+  plugins:
+
+    - name: Kanban Board plugin
+      description: A plugin for Kanban style issue management in GitBucket.
+      url: https://github.com/kasancode/gitbucket-label-kanban-plugin
+      icon: fa fa-check
+      distributed: false
+
+    - name: Gantt Chart plugin
+      description: A plugin for rendering a Gantt Chart view of the GitBucket issues.
+      url: https://github.com/kasancode/gitbucket-gantt-plugin
+      icon: fa fa-sliders
+      distributed: false
+
+- name: File Viewer
+
+  id: fileviewer
+  
+  plugins:
+  
+    - name: AsciiDoc plugin
+      description: Add AsciiDoc rendering capabilities to GitBucket.
+      url: https://github.com/lefou/gitbucket-asciidoctor-plugin
+      icon: fa fa-file-text
+      distributed: false
+
+    - name: RST plugin
+      description: ReSTructured text renderer for GitBucket.
+      url: https://github.com/amuramatsu/gitbucket-rst-plugin
+      icon: fa fa-file-text
+      distributed: false
+
+    - name: PlantUML plugin
+      description: Render PlantUML files in GitBucket.
+      url: https://github.com/nus/gitbucket-plantuml-plugin
+      icon: fa fa-object-group
+      distributed: false
+
+    - name: HTML5 Media plugin
+      description: Renders HTML5 Media (Audio/Video/PDF) inline in GitBucket.
+      url: https://github.com/kounoike/gitbucket-html5media-plugin
+      icon: fa fa-html5
+      distributed: false
+
+    - name: Jupyter plugin
+      description: GitBucket plugin for rendering Jupyter or IPython files.
+      url: https://github.com/kounoike/gitbucket-ipynb-plugin
+      icon: fa fa-ravelry
+      distributed: false
+
+    - name: Swagger plugin
+      description: A plugin for rendering a Swagger (OpenAPI) files.
+      url: https://github.com/onukura/gitbucket-swagger-plugin
+      icon: fa fa-ellipsis-h
+      distributed: false
+
+    - name: R Markdown plugin
+      description: A plugin for rendering a R Markdown files.
+      url: https://github.com/onukura/gitbucket-rmarkdown-plugin
+      icon: fa fa-registered
+      distributed: false
+
+    - name: MathJax plugin
+      description: A plugin for rendering a markdown files with MathJax.
+      url: https://github.com/onukura/gitbucket-mathjax-plugin
+      icon: fa fa-superscript
+      distributed: false
+
+    - name: 3D file plugin
+      description: A plugin for rendering 3D files.
+      url: https://github.com/onukura/gitbucket-3dfile-plugin
+      icon: fa fa-cube
+      distributed: false
+
+    - name: GeoJSON plugin
+      description: A plugin for rendering GeoJSON files.
+      url: https://github.com/onukura/gitbucket-geojson-plugin
+      icon: fa fa-map-marker
+      distributed: false
diff --git a/_includes/header.html b/_includes/header.html
index 431bf13..bd9ace8 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,4 +1,4 @@
-<header class="site-header">
+<header class="site-header" id="navbar">
 
   <div class="wrapper">
       <a class="site-title" href="{{ site.baseurl }}/"><img class="logo" src="images/gitbucket-plugins.png"></img>{{ site.title }}</a>
@@ -12,6 +12,13 @@
         </svg>
       </a>
 
+      <label for="category-selector">Category:</label>
+      <select class="category-dropdown" name="category-selector" onChange="location.href=value;">
+        {% for category in site.data.plugins %}
+        <option value="#{{ category.id }}">{{ category.name }}</option>
+        {% endfor %}
+      </select>
+
       <div class="trigger">
 <!--          
         {% for page in site.pages %}
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
index 897f6be..1497605 100644
--- a/_sass/_layout.scss
+++ b/_sass/_layout.scss
@@ -5,9 +5,11 @@
     border-top: 5px solid $grey-color-dark;
     border-bottom: 1px solid $grey-color-light;
     min-height: 56px;
+    background-color: white;
 
     // Positioning context for the mobile navigation icon
-    position: relative;
+    position: sticky;
+    top: 0;
     
     .logo {
         width: 60px;
@@ -221,7 +223,24 @@
     font-size: 24px;
 }
 
+.category-title {
+    font-size: 26px;
+    color: gray;
+    margin-top: -30px;
+    padding-top: 70px;
+}
+
+.category-dropdown {
+    width: 200px;
+    height: 40px;
+    border-color: rgb(235, 230, 230);
+    font-size: 15px;
+    position: relative;
+}
 
+html {
+    scroll-behavior: smooth;
+}
 
 /**
  * Posts
diff --git a/index.html b/index.html
index d93044c..ad54c22 100644
--- a/index.html
+++ b/index.html
@@ -8,15 +8,31 @@ <h1 class="page-heading">This is the community site for all the public <a href="
   <h1 class="page-heading">Available Plugins:</h1>
   <p class="separator"/>
   <ul class="plugin-list">
-      {% for plugin in site.data.plugins %}
-      <li>
-        <h2>
-            <a class="post-link{% if plugin.distributed %} distributed{% endif %}" href="{{ plugin.url }}"><span class="{{ plugin.icon }}"></span>{{ plugin.name }}</a>
-        </h2>
-          <p>{{ plugin.description }}</p>
-      </li>
+      {% for category in site.data.plugins %}
+        <h2 id="{{ category.id }}" class="category-title">{{ category.name }}</h2>
+        {% for plugin in category.plugins %}
+        <li>
+          <h2>
+              <a class="post-link{% if plugin.distributed %} distributed{% endif %}" href="{{ plugin.url }}"><span class="{{ plugin.icon }}"></span>{{ plugin.name }}</a>
+          </h2>
+            <p>{{ plugin.description }}</p>
+        </li>
+        {% endfor %}
       {% endfor %}
 </ul>
     <p class="separator"/>
     <p>Your plugin is not listed here? You want to move your plugin under the organization? Please open a <a href="https://github.com/gitbucket-plugins/gitbucket-plugins.github.io/issues">ticket/issue</a> to reference your demand.</p>
 </div>
+
+<script>
+  window.onscroll = function() {myFunction()};
+  var navbar = document.getElementById("navbar");
+  var sticky = navbar.offsetTop;
+  function myFunction() {
+    if (window.pageYOffset >= sticky) {
+      navbar.classList.add("sticky")
+    } else {
+      navbar.classList.remove("sticky");
+    }
+  }
+</script>
\ No newline at end of file