feat: Display Primary Language (#73)

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))

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=. ."
     ]
   }
-}
+}

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;
+};

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">

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>

src/routes/api/get-issues.ts

@@ -9,15 +9,15 @@ 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 {
           node {
             ... 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
                 }

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;