Merge pull request creativecommons#502 from creativecommons/issue_finder

Create an Issue Finder page on the site

Author: kgodey

content/contributing-code/contents.lr

@@ -34,6 +34,8 @@ We make extensive use of issue labels to designate the priority, status and begi
 - **Issues without any of the above labels:**
   - These issues _may_ (or may not) be open for contribution.
   - Please add a comment asking one of the maintainers to triage the issue and label it as appropriate.
+  
+You can use our [Issue Finder tool](/contributing-code/issue-finder/) to find a good issue that matches your skills and familiarity with our software and community.
 
 Some helpful saved searches on GitHub than can assist with finding an issue:
 - [issues labeled "good first issue"](https://github.com/search?q=org%3Acreativecommons+is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22+-linked%3Apr)

content/contributing-code/issue-finder/contents.lr

@@ -0,0 +1,11 @@
+_model: page
+---
+_template: issue_finder.html
+---
+title: Issue Finder
+---
+description: Welcome to the CC developer community! We're absolutely delighted to have you here. If you want to contribute but are unsure where to start, you can use this issue finder to find an issue that matches your skills and experience level.
+---
+body:
+
+Welcome to the CC developer community!

content/contributing-code/repo-labels/contents.lr

@@ -63,19 +63,19 @@ The priority of an issue is based on its impact, derived from a combination of
 urgency and importance. This determines the importance of the issue when sprint 
 planning or deciding which issues to tackle next.
 
-- <span class="gh-label has-text-white" style="background-color: #b60205;">
+- <span class="gh-label priority-unfavourable">
     🟥 priority: critical
   </span>
   - **Description:** Must be fixed ASAP
-- <span class="gh-label has-text-black" style="background-color: #ff9f1c;">
+- <span class="gh-label priority-negative">
     🟧 priority: high
   </span>
   - **Description:** Stalls work on the project or its dependents
-- <span class="gh-label has-text-black" style="background-color: #ffcc00;">
+- <span class="gh-label priority-neutral">
     🟨 priority: medium
   </span>
   - **Description:** Not blocking but should be fixed soon
-- <span class="gh-label has-text-black" style="background-color: #cfda2c;">
+- <span class="gh-label priority-positive">
     🟩 priority: low
   </span>
   - **Description:** Low priority and doesn't need to be rushed
@@ -113,32 +113,32 @@ may not be ready to be worked on for a number of reasons and the maintainers
 must keep updating the labels as the situation evolves.
 
 An issue, at the time of closing can have either the 
-<span class="gh-label has-text-black" style="background-color: #cccccc;">
+<span class="gh-label status-light">
   🏁 status: ready for dev
 </span>
 or the 
-<span class="gh-label has-text-black" style="background-color: #eeeeee;">
+<span class="gh-label status-lighter">
   ⛔️ status: discarded
 </span>
 label based on whether it was closed with or without resolution, respectively.
 
-- <span class="gh-label has-text-black" style="background-color: #cccccc;">
+- <span class="gh-label status-light">
     🏁 status: ready for dev
   </span>
   - **Description:** Ready for work
-- <span class="gh-label has-text-black" style="background-color: #999999;">
+- <span class="gh-label status-neutral">
     🚧 status: blocked
   </span>
   - **Description:** Blocked & therefore, not ready for work
-- <span class="gh-label has-text-white" style="background-color: #666666;">
+- <span class="gh-label status-dark">
     🧹 status: ticket work required
   </span>
   - **Description:** Needs more details before it can be worked on
-- <span class="gh-label has-text-black" style="background-color: #eeeeee;">
+- <span class="gh-label status-lighter">
     ⛔️ status: discarded
   </span>
   - **Description:** Will not be worked on
-- <span class="gh-label has-text-white" style="background-color: #333333;">
+- <span class="gh-label status-darker">
     🚦 status: awaiting triage
   </span>
   - **Description:** Has not been triaged & therefore, not ready for work

themes/vocabulary_theme/templates/issue_finder.html

@@ -0,0 +1,47 @@
+{% extends "layout.html" %}
+
+{% block title %}{{ this.title }}{% endblock %}
+
+{% block body %}
+  <div class="issue-finder">
+    <div class="header">
+      <div class="container is-paddingless">
+        <h1>{{ this.title }}</h1>
+        <div class="description column is-9 is-paddingless">
+          {{ this.description }}
+        </div>
+      </div>
+    </div>
+    <div class="body container">
+      <div id="vue-app">
+        {{ this.body }}
+        <noscript>
+          The issue finder requires JavaScript. You can try searching on GitHub
+          using the links below.
+          <ul>
+            <li>
+              <a href="https://github.com/search?q=org%3Acreativecommons+is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22+-linked%3Apr">
+                issues labeled "good first issue"
+              </a>
+            </li>
+            <li>
+              <a href="https://github.com/search?q=org%3Acreativecommons+is%3Aissue+is%3Aopen+label%3A%22help+wanted%22+-linked%3Apr">issues
+                labeled "help wanted"
+              </a>
+            </li>
+            <li>
+              <a href="https://github.com/search?q=org%3Acreativecommons+is%3Apr+is%3Aopen+label%3A%22help+wanted%22">
+                PRs labeled "help wanted"
+              </a>
+            </li>
+          </ul>
+        </noscript>
+      </div>
+    </div>
+  </div>
+  <script>
+    // Transfer all issues to the JavaScript domain
+    window.issues =
+    {{ bag('issues.issues')|tojson }}
+  </script>
+{% endblock %}

themes/vocabulary_theme/templates/layout.html

@@ -76,10 +76,11 @@
             <div class="navbar-dropdown">
               {% for href, title in [
                 ['/contributing-code', 'Contribution Guidelines'],
+                ['/contributing-code/projects', 'Project List'],
+                ['/contributing-code/issue-finder', 'Issue Finder'],
                 ['/contributing-code/pr-guidelines', 'Pull Request Guidelines'],
                 ['/contributing-code/github-repo-guidelines', 'GitHub Repo Guidelines'],
                 ['/contributing-code/repo-labels', 'Repository Labels'],
-                ['/contributing-code/projects', 'Project List'],
                 ['/contributing-code/usability', 'Usability'],
               ] %}
                 <a class="navbar-item" href="{{ href|url }}">{{ title }}</a>

themes/vocabulary_theme/templates/page-with-toc.html

@@ -19,6 +19,14 @@ <h1>{{ this.title }}</h1>
             {% if this.is_child_of('/contributing-code') %}
               <aside class="menu sidebar-menu">
                 <ul class="menu-list">
+                  <li>
+                    <a class="{% if this.path == '/contributing-code/projects' %} is-active {% endif%} link" href="{{ '/contributing-code/projects'|url }}">Project List</a>
+                  </li>
+                  <hr class="divider">
+                  <li>
+                    <a class="{% if this.path == '/contributing-code/issue-finder' %} is-active {% endif%} link" href="{{ '/contributing-code/issue-finder'|url }}">Issue Finder</a>
+                  </li>
+                  <hr class="divider">
                   <li>
                     <a class="{% if this.path == '/contributing-code' %} is-active {% endif%} link" href="{{ '/contributing-code'|url }}">Contribution Guidelines</a>
                     <ul>
@@ -28,10 +36,6 @@ <h1>{{ this.title }}</h1>
                     </ul>
                   </li>
                   <hr class="divider">
-                  <li>
-                    <a class="{% if this.path == '/contributing-code/projects' %} is-active {% endif%} link" href="{{ '/contributing-code/projects'|url }}">Project List</a>
-                  </li>
-                  <hr class="divider">
                   <li>
                     <a class="{% if this.path == '/contributing-code/usability' %} is-active {% endif%} link" href="{{ '/contributing-code/usability'|url }}">Usability</a>
                   </li>

webpack/js/components.js

@@ -0,0 +1,170 @@
+import VueSelect from 'vue-select';
+
+export const IssueLabel = {
+  template: `
+<span class="gh-label" :class="className">
+  {{ name }}
+</span>`,
+  data() {
+    return {
+      labels: window.labels
+    }
+  },
+  props: {
+    name: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    /**
+     * Get the name of the class to apply to the label based on the group to
+     * which it belongs. Falls back to miscellaneous if the label does not
+     * belong to a group or a class cannot be identified.
+     *
+     * @returns {string} the name of the class to apply to the label
+     */
+    className() {
+      return window.categories[this.name] || 'miscellaneous'
+    }
+  }
+}
+
+export const IssueCard = {
+  template: `
+<div class="card entry-post vertical margin-top-normal padding-normal">
+  <h4 class="card-title b-header margin-bottom-small">
+    {{ issue.title }}
+  </h4>
+  <p class="is-size-6">
+    <a
+      :href="issue.html_url"
+      target="_blank">
+      <span class="has-color-forest-green">
+        {{ issue.repo }}#{{ issue.number }}
+      </span>
+      <i
+        class="icon external-link has-color-forest-green is-size-7"
+        :style="{ verticalAlign: 'baseline' }">
+      </i>
+    </a>
+    &nbsp;&nbsp;opened on {{ dateCreated }}.
+  </p>
+  <div class="labels margin-top-small">
+    <IssueLabel
+      v-for="(name, index) in issue.labels"
+      :key="index"
+      :name="name"/>
+  </div>
+</div>`,
+  components: {
+    IssueLabel
+  },
+  props: {
+    issue: {
+      type: Object,
+      required: true
+    },
+  },
+  computed: {
+    dateCreated() {
+      const dateCreated = new Date(this.issue.createdAt*1000)
+      return dateCreated.toLocaleDateString()
+    }
+  }
+}
+
+export const App = {
+  el: '#vue-app',
+  template: `
+<div class="find-issues">
+  <div class="columns">
+    <div class="column is-one-quarter">
+      <form id="filters">
+        <label for="skills">
+          <strong>Skill set</strong><br/>
+          Choose up to three skills that you would like to see issues for.
+        </label>
+        <VueSelect
+          v-model="filters.skills"
+          id="skills"
+          name="skills"
+          placeholder="No preference"
+          :options="options.skills"
+          :reduce="skill => skill.toLocaleLowerCase()"
+          :selectable="() => filters.skills.length < 3"
+          multiple/>
+        <br/>
+        <label for="experience">
+          <strong>Experience</strong><br/>
+          Is this your first time contributing to CC?
+        </label>
+        <VueSelect
+          v-model="filters.experience"
+          id="experience"
+          name="experience"
+          :options="options.experiences"
+          label="name"
+          :reduce="experience => experience.code"
+          :clearable="false"/>
+      </form>
+    </div>
+    <div class="column">
+      <template v-if="filteredIssues.length">
+        <IssueCard
+          v-for="(issue, index) in filteredIssues"
+          :key="index"
+          :issue="issue"/>
+      </template>
+      <p
+        v-else
+        class="margin-top-normal">
+        No results.
+      </p>
+    </div>
+  </div>
+</div>`,
+  components: {
+    VueSelect,
+    IssueCard
+  },
+  data() {
+    return {
+      options: {
+        skills: window.skills,
+        experiences: [
+          {name: 'Yes, it is', code: 'beginner'},
+          {name: 'No, it isn\'t', code: 'experienced'}
+        ]
+      },
+      filters: {
+        skills: [],
+        experience: 'experienced'
+      },
+      issues: []
+    }
+  },
+  computed: {
+    /**
+     * Get a filtered list of issues matching the chosen skill labels.
+     *
+     * @returns {array} the array of filtered issues
+     */
+    filteredIssues() {
+      return window.issues.filter(issue => {
+        // Check experience match
+        if (this.filters.experience === 'beginner' && !issue.labels.includes('good first issue')) {
+          return false
+        }
+
+        // Check skill set match
+        const joinedLabels = issue.labels.join(',')
+        if (this.filters.skills.length && !this.filters.skills.some(skill => joinedLabels.includes(skill))) {
+          return false
+        }
+
+        return true
+      }).sort((a, b) => b.createdAt - a.createdAt)
+    }
+  }
+}

webpack/js/hydration.js

@@ -0,0 +1,37 @@
+export const hydrateAppWithData = () => {
+  window.skills = Array.from( // Convert back into an array
+      new Set( // Remove duplicates
+          Object.values(window.skills)
+              .flat() // Combine all skills
+              .map(skill => skill.split('/')[0]) // Keep only the prefix
+      )
+  )
+
+  window.categories = {}
+  window.labels.groups.forEach(group => {
+    group.labels.forEach(label => {
+      let name = label.name
+      if (group.is_prefixed !== false) {
+        name = `${group.name}: ${name}`
+      }
+      if (label.has_emoji_name !== false) {
+        name = `${label.emoji} ${name}`
+      }
+      let styleName = label.color;
+      if (/^[A-Z]+$/.test(styleName)) {
+        styleName = `${group.name}-${styleName.toLocaleLowerCase()}`
+      } else {
+        styleName = group.name
+      }
+      window.categories[name] = styleName
+    })
+  })
+  window.labels.standalone.forEach(label => {
+    let name = `${label.emoji} ${label.name}`
+    window.categories[name] = 'miscellaneous'
+  })
+  window.skills.forEach(skill => {
+    let name = `💪 skill: ${skill.toLocaleLowerCase()}`
+    window.categories[name] = 'skill'
+  })
+}