Rewrite app using Nuxt (DeepSourceCorp#183)

* rewrite app using nuxt

* update poetry.lock

* fix poetry install

* fix static file path

* path fixes

* add trackers

* restore repositories

* fix favicon

* add sitemap

* fix layout, nuke icons

.deepsource.toml

@@ -11,6 +11,22 @@ test_patterns = [
   [analyzers.meta]
   max_line_length = 100
 
+[[analyzers]]
+name = "javascript"
+enabled = true
+
+  [analyzers.meta]
+  environment = [
+    "nodejs",
+    "jest",
+    "browser"
+  ]
+  plugins = ["vue"]
+
 [[transformers]]
   name = 'black'
   enabled = true
+
+[[transformers]]
+  name = 'prettier'
+  enabled = true

.github/workflows/cron.yml

@@ -8,8 +8,8 @@ jobs:
   deploy:
     runs-on: ubuntu-latest
     steps:
-      - name: Trigger deploy on Zeit
+      - name: Trigger deployment
         uses: joelwmale/webhook-action@master
         env:
-          WEBHOOK_URL: ${{ secrets.ZEIT_DEPLOY_HOOK_URL }}
+          WEBHOOK_URL: ${{ secrets.NETLIFY_CRON_BUILD_HOOK }}
           data: ""

.gitignore

@@ -157,3 +157,5 @@ cython_debug/
 # static files generated from Django application using `collectstatic`
 media
 static
+
+.nuxt

Makefile

@@ -1,17 +1,11 @@
-THEME_PATH = 'themes/lucy/'
-
 .ONESHELL:
 pre-build:
 	pip install --upgrade poetry && \
-	poetry install --no-dev
+	poetry install && \
+	yarn
 
 build:
-	cd $(THEME_PATH) && \
-	npm install && \
-	cd ../.. && \
-	npm install -g postcss-cli autoprefixer postcss-import && \
-	hugo
-
+	yarn generate
 
 generate:
 	poetry run python gfi/populate.py

components/Navbar.vue

@@ -0,0 +1,33 @@
+<template>
+  <header class="w-full py-4 border-b border-ink-200 bg-ink-400">
+    <nav class="flex items-center justify-center flex-wrap">
+      <nuxt-link to="/" class="flex items-center text-gray-700 font-bold">
+        <img
+          src="~/assets/gfi-logo-white.svg"
+          alt="Good First Issue"
+          class="h-12"
+        />
+      </nuxt-link>
+      <span class="text-2xl cursor-pointer" v-if="activeTag">
+        <span class="font-normal ml-2 mr-1 text-ink-100">/</span>
+      <span class="font-semibold text-juniper">{{ activeTag.language }}</span>
+      </span>
+    </nav>
+  </header>
+</template>
+
+<script>
+import { find } from "lodash"
+import Tags from '~/data/tags.json'
+
+export default {
+  props: {
+    tag: Object
+  },
+  computed: {
+    activeTag: function () {
+      return find(Tags, {slug: this.$route.params.slug})
+    }
+  }
+}
+</script>

components/RepoBox.vue

@@ -0,0 +1,94 @@
+<template>
+  <div
+    class="select-none border w-full rounded-md mb-4 cursor-pointer hover:bg-ink-300 group"
+    :class="{'border-juniper hover:bg-ink-400': isIssueOpen, 'border-ink-200': !isIssueOpen}"
+    :id="`repo-${repo.id}`"
+    @click="toggle(repo.id)"
+  >
+    <div class="px-5 py-3">
+      <div class="flex flex-row">
+        <a
+          :title="`Open ${repo.owner}/${repo.name} on GitHub`"
+          :href="repo.url"
+          target="_blank"
+          class="text-xl font-bold group-hover:text-juniper"
+          :class="{'text-juniper': isIssueOpen}"
+          >{{ repo.owner }} / {{ repo.name }}</a
+        >
+        <span class="flex-1"></span>
+        <span
+          class="hidden md:inline text-sm border px-3 py-1 ml-2 rounded-full font-semibold"
+          :class="{'text-ink-400 bg-juniper border-transparent': isIssueOpen, 'text-vanilla-200': !isIssueOpen}"
+          >{{ issuesDisplay }}</span>
+      </div>
+      <div class="flex-row flex text-sm py-1">
+        {{ repo.description }}
+      </div>
+      <div class="flex-row flex text-sm py-1 font-mono" :class="{'text-honey': isIssueOpen, 'text-vanilla-400': !isIssueOpen}">
+        <div class="mr-4">
+          <span class="text-green-600">lang: </span>{{ repo.language }}
+        </div>
+        <div class="mr-4">
+          <span class="text-blue-600">stars: </span>{{ repo.stars_display }}
+        </div>
+        <div class="mr-4">
+          <span class="text-red-600">last activity: </span
+          ><span>{{ lastModifiedDisplay }}</span>
+        </div>
+      </div>
+    </div>
+    <ol
+      class="px-5 py-3 text-base leading-loose border-t border-ink-200"
+      v-if="isIssueOpen"
+    >
+      <li class="flex flex-row items-start justify-start py-1" v-for="issue in repo.issues" :key="issue.url">
+        <span
+          class="text-slate text-right px-2 leading-snug"
+          style="min-width: 70px;"
+          >#{{ issue.number }}</span
+        >
+        <a
+          title="Open issue on GitHub"
+          :href="issue.url"
+          target="_blank"
+          class="leading-snug font-semibold hover:text-juniper text-vanilla-300"
+          >{{ issue.title }}</a
+        >
+      </li>
+    </ol>
+  </div>
+</template>
+
+<script>
+import dayjs from "dayjs"
+import relativeTime from "dayjs/plugin/relativeTime"
+import { mapMutations } from 'vuex'
+
+dayjs.extend(relativeTime)
+
+export default {
+  props: {
+    repo: Object
+  },
+  computed: {
+    issuesDisplay: function () {
+      const numIssues = this.repo.issues.length
+      if (numIssues > 1) {
+        return `${numIssues} issues`
+      }
+      return `${numIssues} issue`
+    },
+    lastModifiedDisplay: function () {
+      return dayjs(this.repo.last_modified).fromNow()
+    },
+    isIssueOpen: function () {
+      return this.$store.state.activeIssue === this.repo.id
+    }
+  },
+  methods: {
+    ...mapMutations({
+      toggle: 'expandIssue'
+    })
+  }
+}
+</script>

components/Sidebar.vue

@@ -0,0 +1,88 @@
+<template>
+  <section
+    class="masthead font-sans pt-6 w-full md:w-1/3 border-r border-ink-200 px-6 text-vanilla-300"
+  >
+    <div>
+      <h3 class="section-heading">
+        About
+      </h3>
+      <p class="text-sm">
+        Good First Issue curates easy pickings from popular open-source
+        projects, and helps you make your first contribution to open-source.
+      </p>
+    </div>
+    <div class="pt-6">
+      <h3 class="section-heading">
+        Browse by language
+      </h3>
+      <div>
+        <nuxt-link
+          v-for="tag in tags"
+          :key="tag.slug"
+          :to="'/language/' + tag.slug"
+          :class="{'active-pill': $route.params.slug === tag.slug, 'border-slate hover:text-juniper hover:border-juniper': $route.params.slug !== tag.slug}"
+          class="group mx-1 border  px-2 py-1 inline-block rounded-sm my-1 text-sm"
+          >{{ tag.language }}
+          <span
+          :class="{'text-vanilla-400 group-hover:text-juniper': $route.params.slug !== tag.slug}"
+            >&times; {{ tag.count }}</span
+          ></nuxt-link
+        >
+      </div>
+    </div>
+    <div class="pt-6">
+      <a
+        class="block bg-juniper hover:bg-light_juniper text-ink-400 uppercase rounded-md font-bold text-center px-1 py-3"
+        href="https://github.com/deepsourcelabs/good-first-issue#adding-a-new-project"
+        target="_blank"
+        >Add your project</a
+      >
+    </div>
+    <div class="text-sm pt-6">
+      <a
+        class="flex flex-row justify-center items-center"
+        target="_blank"
+        href="https://deepsource.io?ref=gfi"
+      >
+        <img style="width: 14px;" src="/social/heart.svg" alt="Heart" />
+        <span class="ml-2"
+          >A
+          <span
+            class="inline hover:underline text-juniper"
+            title="Visit DeepSource website"
+            >DeepSource</span
+          >
+          initative</span
+        >
+      </a>
+    </div>
+  </section>
+</template>
+
+<script>
+import Tags from "~/data/tags.json";
+
+export default {
+  data: function() {
+    return {
+      tags: Tags
+    };
+  },
+  methods: {
+    getTagUrl: function(params) {}
+  }
+};
+</script>
+
+<style>
+.section-heading {
+  @apply text-sm font-bold uppercase tracking-wider mb-2 text-slate;
+}
+.active-pill {
+  @apply text-juniper font-semibold border-juniper;
+}
+
+.active-pill > span {
+    @apply text-juniper;
+  }
+</style>

gfi/populate.py

@@ -15,6 +15,7 @@
 from github3 import exceptions, login
 from numerize import numerize
 from emoji import emojize
+from slugify import slugify
 
 REPO_DATA_FILE = "data/repositories.toml"
 REPO_GENERATED_DATA_FILE = "data/generated.json"
@@ -27,9 +28,13 @@
 ISSUE_SORT = "created"
 ISSUE_SORT_DIRECTION = "desc"
 ISSUE_LIMIT = 10
+SLUGIFY_REPLACEMENTS = [
+    ['#', 'sharp'],
+    ['+', 'plus']
+]
 
 logging.config.dictConfig(LOGGING_CONFIG)
-LOGGER = logging.getLogger(__name__)
+LOGGER = logging.getLogger(__file__)
 
 if not path.exists(LABELS_DATA_FILE):
     raise RuntimeError("No labels data file found. Exiting.")
@@ -89,12 +94,13 @@ def get_repository_info(owner, name):
         )
         LOGGER.info("\t found %d good first issues", len(good_first_issues))
         # check if repo has at least one good first issue
-        if good_first_issues:
+        if good_first_issues and repository.language:
             # store the repo info
             info["name"] = name
             info["owner"] = owner
             info["description"] = emojize(repository.description or "")
             info["language"] = repository.language
+            info["slug"] = slugify(repository.language, replacements=SLUGIFY_REPLACEMENTS)
             info["url"] = repository.html_url
             info["stars"] = repository.stargazers_count
             info["stars_display"] = numerize.numerize(repository.stargazers_count)
@@ -164,14 +170,9 @@ def get_repository_info(owner, name):
 
     # use only those tags that have at least three occurrences
     tags = [
-        {"language": key, "count": value} for (key, value) in TAGS.items() if value >= 3
+        {"language": key, "count": value, "slug": slugify(key, replacements=SLUGIFY_REPLACEMENTS)} for (key, value) in TAGS.items() if value >= 3
     ]
     tags_sorted = sorted(tags, key=itemgetter("count"), reverse=True)
     with open(TAGS_GENERATED_DATA_FILE, "w") as file_desc:
         json.dump(tags_sorted, file_desc)
     LOGGER.info("Wrote %d tags to %s", len(tags), TAGS_GENERATED_DATA_FILE)
-
-    # populate tag files for hugo
-    for tag in tags_sorted:
-        tag_name = tag["language"]
-        os.system(f"hugo new language/{tag_name}.md")  # skipcq: BAN-B605

jsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./*"],
+      "@/*": ["./*"],
+      "~~/*": ["./*"],
+      "@@/*": ["./*"]
+    }
+  },
+  "exclude": ["node_modules", ".nuxt", "dist"]
+}