From 922c3a2ea2f8f5c585026f63941ddb2485db945b Mon Sep 17 00:00:00 2001
From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com>
Date: Mon, 14 Feb 2022 21:35:01 +0100
Subject: [PATCH] feat: Display Primary Language (#73)

---
 CHANGELOG.md                         | 26 +++++---------------------
 package-lock.json                    | 15 +++++++++++++--
 package.json                         |  3 ++-
 src/global.d.ts                      |  7 +++++++
 src/lib/components/issue-card.svelte | 12 +++++++++---
 src/lib/components/label.svelte      | 19 +++++++++----------
 src/routes/api/get-issues.ts         |  9 +++++++--
 src/routes/index.svelte              |  4 ++--
 8 files changed, 54 insertions(+), 41 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a5f5a2d..1074d70 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,45 +1,29 @@
 # [0.8.0](https://github.com/EddieHubCommunity/good-first-issue-finder/compare/v0.7.1...v0.8.0) (2022-02-13)
 
-
 ### Features
 
-* Filter Function for labels ([#70](https://github.com/EddieHubCommunity/good-first-issue-finder/issues/70)) ([121e1d6](https://github.com/EddieHubCommunity/good-first-issue-finder/commit/121e1d68d2944c895c185df5779044fca9494db8))
-
-
+- Filter Function for labels ([#70](https://github.com/EddieHubCommunity/good-first-issue-finder/issues/70)) ([121e1d6](https://github.com/EddieHubCommunity/good-first-issue-finder/commit/121e1d68d2944c895c185df5779044fca9494db8))
 
 ## [0.7.1](https://github.com/EddieHubCommunity/good-first-issue-finder/compare/v0.7.0...v0.7.1) (2022-02-12)
 
-
 ### Bug Fixes
 
-* update footer ([#68](https://github.com/EddieHubCommunity/good-first-issue-finder/issues/68)) ([178d92e](https://github.com/EddieHubCommunity/good-first-issue-finder/commit/178d92e01067169ed0f303fab59b4298741d43a1))
-
-
+- update footer ([#68](https://github.com/EddieHubCommunity/good-first-issue-finder/issues/68)) ([178d92e](https://github.com/EddieHubCommunity/good-first-issue-finder/commit/178d92e01067169ed0f303fab59b4298741d43a1))
 
 # [0.7.0](https://github.com/EddieHubCommunity/good-first-issue-finder/compare/v0.6.0...v0.7.0) (2022-02-12)
 
-
 ### Features
 
-* add footer ([#67](https://github.com/EddieHubCommunity/good-first-issue-finder/issues/67)) ([c8d814d](https://github.com/EddieHubCommunity/good-first-issue-finder/commit/c8d814d6f067e63c2b33cb23fe80cddf3ca13928))
-
-
+- add footer ([#67](https://github.com/EddieHubCommunity/good-first-issue-finder/issues/67)) ([c8d814d](https://github.com/EddieHubCommunity/good-first-issue-finder/commit/c8d814d6f067e63c2b33cb23fe80cddf3ca13928))
 
 # [0.6.0](https://github.com/EddieHubCommunity/good-first-issue-finder/compare/v0.5.0...v0.6.0) (2022-02-12)
 
-
 ### Features
 
-* Display Issue-Labels ([#59](https://github.com/EddieHubCommunity/good-first-issue-finder/issues/59)) ([e6f1fef](https://github.com/EddieHubCommunity/good-first-issue-finder/commit/e6f1fef8f9d48d6f830b4ca079250c741e373692))
-
-
+- Display Issue-Labels ([#59](https://github.com/EddieHubCommunity/good-first-issue-finder/issues/59)) ([e6f1fef](https://github.com/EddieHubCommunity/good-first-issue-finder/commit/e6f1fef8f9d48d6f830b4ca079250c741e373692))
 
 # [0.5.0](https://github.com/EddieHubCommunity/good-first-issue-finder/compare/v0.4.0...v0.5.0) (2022-02-12)
 
-
 ### Features
 
-* add Search ([#58](https://github.com/EddieHubCommunity/good-first-issue-finder/issues/58)) ([8ba650f](https://github.com/EddieHubCommunity/good-first-issue-finder/commit/8ba650fe168af09a0bd9506f3cc3af7f0716efeb))
-
-
-
+- add Search ([#58](https://github.com/EddieHubCommunity/good-first-issue-finder/issues/58)) ([8ba650f](https://github.com/EddieHubCommunity/good-first-issue-finder/commit/8ba650fe168af09a0bd9506f3cc3af7f0716efeb))
diff --git a/package-lock.json b/package-lock.json
index 1e54871..3a30271 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,14 @@
 {
   "name": "issue-finder",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "issue-finder",
-      "version": "0.7.1",
+      "version": "0.8.0",
       "dependencies": {
+        "font-color-contrast": "^11.1.0",
         "octokit": "^1.7.1"
       },
       "devDependencies": {
@@ -2190,6 +2191,11 @@
       "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==",
       "dev": true
     },
+    "node_modules/font-color-contrast": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/font-color-contrast/-/font-color-contrast-11.1.0.tgz",
+      "integrity": "sha512-PxpFaesCSsDwaciw7MF6B2thUkH7skqZlz4BzUnvapR6+Es2877q7ru/tqfsITuaraPz+TGfsOfdtU4D0qjqEw=="
+    },
     "node_modules/fraction.js": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.2.tgz",
@@ -5863,6 +5869,11 @@
       "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==",
       "dev": true
     },
+    "font-color-contrast": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/font-color-contrast/-/font-color-contrast-11.1.0.tgz",
+      "integrity": "sha512-PxpFaesCSsDwaciw7MF6B2thUkH7skqZlz4BzUnvapR6+Es2877q7ru/tqfsITuaraPz+TGfsOfdtU4D0qjqEw=="
+    },
     "fraction.js": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.2.tgz",
diff --git a/package.json b/package.json
index 88a2682..6fa2611 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
   },
   "type": "module",
   "dependencies": {
+    "font-color-contrast": "^11.1.0",
     "octokit": "^1.7.1"
   },
   "lint-staged": {
@@ -49,4 +50,4 @@
       "prettier --write --plugin-search-dir=. ."
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/src/global.d.ts b/src/global.d.ts
index ad1b396..b57eee2 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -8,6 +8,7 @@ export declare type Repository = {
   name: string;
   url: string;
   owner: Owner;
+  primaryLanguage: PrimaryLanguage;
 };
 
 export declare type Node = {
@@ -39,3 +40,9 @@ export declare type LabelNode = {
   color: string;
   name: string;
 };
+
+export declare type PrimaryLanguage = {
+  color: string;
+  name: string;
+  id: string;
+};
diff --git a/src/lib/components/issue-card.svelte b/src/lib/components/issue-card.svelte
index 8c1198c..ddcc845 100644
--- a/src/lib/components/issue-card.svelte
+++ b/src/lib/components/issue-card.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import type { Node } from '../../global';
-  import Card from './card.svelte';
-  import Label from './label.svelte';
-  import RepoHeader from './repo-header.svelte';
+  import Card from '$lib/components/card.svelte';
+  import Label from '$lib/components/label.svelte';
+  import RepoHeader from '$lib/components/repo-header.svelte';
 
   export let issue: Node;
   let isToggled = true;
@@ -33,6 +33,12 @@
       </div>
     </div>
     <div class="flex flex-shrink-0">
+      <div class="p mr-2 flex items-center">
+        <Label
+          color={issue.repository.primaryLanguage.color}
+          text={issue.repository.primaryLanguage.name}
+        />
+      </div>
       <a class="hidden sm:block" href={`https://gitpod.io/#${issue.url}`} target="_blank">
         <img class="object-fill" src="/images/open-in-gitpod.svg" alt="open-in-gitpod" /></a
       ><button on:click={() => handleToggle()} class="px-2 md:px-4">
diff --git a/src/lib/components/label.svelte b/src/lib/components/label.svelte
index cd73125..96c47db 100644
--- a/src/lib/components/label.svelte
+++ b/src/lib/components/label.svelte
@@ -1,20 +1,19 @@
 <script lang="ts">
+  import fontColorContrast from 'font-color-contrast';
   export let text: string;
   export let color: string;
 
-  const getColorByBgColor = (bgColor: string) => {
-    if (!bgColor) {
-      return '';
-    }
-    return parseInt(bgColor.replace('#', ''), 16) > 0xffffff / 2 ? '#000' : '#fff';
-  };
+  $: processedColor = color.startsWith('#') ? color : `#${color}`;
 </script>
 
 <div
-  class="mr-2 inline-block rounded-2xl border-[1px] py-2 px-4 text-xs font-semibold"
-  style="border-color: #{color === 'ffffff'
-    ? '000'
-    : color}; background-color: #{color}; color: {getColorByBgColor(`#${color}`)}"
+  class="mr-2 inline-block rounded-2xl border-[1px] py-1 px-3 text-xs font-semibold"
+  style="border-color: {processedColor === '#ffffff'
+    ? '#000'
+    : processedColor}; background-color: {processedColor}; color: {fontColorContrast(
+    processedColor,
+    0.7,
+  )}"
 >
   {@html text}
 </div>
diff --git a/src/routes/api/get-issues.ts b/src/routes/api/get-issues.ts
index ad9dc1c..a2e701c 100644
--- a/src/routes/api/get-issues.ts
+++ b/src/routes/api/get-issues.ts
@@ -9,7 +9,7 @@ export const get: RequestHandler = async () => {
   if (!token) return { status: 500, body: { message: 'please provide a token' } };
   const octokit = new Octokit({ auth: token });
   const { search }: Response = await octokit.graphql(
-    `query EddieHubIssues($queryString: String! $skip: Int!) {
+    `query EddieHubIssues($queryString: String!, $skip: Int!) {
       search(first: $skip, query: $queryString, type: ISSUE) {
         issueCount
         edges {
@@ -17,7 +17,7 @@ export const get: RequestHandler = async () => {
             ... on Issue {
               url
               title
-              labels(first:$skip) {
+              labels(first: $skip) {
                 edges {
                   node {
                     color
@@ -28,6 +28,11 @@ export const get: RequestHandler = async () => {
               repository {
                 name
                 url
+                primaryLanguage {
+                  color
+                  name
+                  id
+                }
                 owner {
                   login
                 }
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index cedb849..b744a89 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -20,9 +20,9 @@
 </script>
 
 <script lang="ts">
-  import IssueCard from '../lib/components/issue-card.svelte';
+  import IssueCard from '$lib/components/issue-card.svelte';
   import Search from '$lib/components/search.svelte';
-  import Filter from '../lib/components/filter.svelte';
+  import Filter from '$lib/components/filter.svelte';
   import { selectedLabels } from '$lib/stores/selected-labels.store';
   import type { SearchResponse } from '../global';
   export let data: SearchResponse;