First

.eslintrc.json

@@ -0,0 +1,17 @@
+{
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "next",
+    "next/core-web-vitals",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint"]
+}

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,12 @@
+#### ℹ️ Repository information
+
+**The repository has**:
+
+- [ ] At least three issues with the `good first issue`, or other labels specified in `firstissue.json` (see `labels` and the end).
+ - Link:
+- [ ] At least 10 contributors.
+- [ ] At least 1000 stars.
+- [ ] Detailed setup instructions for the project.
+ - Link:
+- [ ] CONTRIBUTING.md
+- [ ] Actively maintained (last updated less than 1 months ago).

.github/dependabot.yml

@@ -0,0 +1,11 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "weekly"

.github/workflows/deploy.yml

@@ -0,0 +1,91 @@
+name: Deploy to firstissue.dev
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+  # Allows you to trigger this workflow from another workflow
+  workflow_call:
+
+  # Cron schedule, everyday at midnight   
+  schedule:
+    - cron: '0 0 * * *'
+
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: write
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Setup Pages
+        uses: actions/configure-pages@v2
+        with:
+          # Automatically inject basePath in your Next.js configuration file and disable
+          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
+          #
+          # You may remove this line if you want to manage the configuration yourself.
+          static_site_generator: next
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+      - name: Install dependencies
+        run: npm install
+      - name: Build with Next.js
+        run: npm run build
+        env:
+          GH_PERSONAL_ACCESS_TOKEN: ${{ secrets.GH_PERSONAL_ACCESS_TOKEN }}
+      - name: Update firstissue.json
+        uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: update firstissue.json [skip actions]
+          branch: json-updates
+          file_pattern: 'firstissue.json'
+          skip_checkout: true
+          push_options: '--force'
+      - name: Static HTML export with Next.js
+        run: npm run export
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: ./out
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

.github/workflows/pr.yml

@@ -0,0 +1,47 @@
+name: Check pull request
+
+on: [push, pull_request]
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Setup Pages
+        uses: actions/configure-pages@v2
+        with:
+          # Automatically inject basePath in your Next.js configuration file and disable
+          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
+          #
+          # You may remove this line if you want to manage the configuration yourself.
+          static_site_generator: next
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+      - name: Install dependencies
+        run: npm install
+      - name: Build with Next.js
+        run: npm run build
+        env:
+          GH_PERSONAL_ACCESS_TOKEN: ${{ secrets.GH_PERSONAL_ACCESS_TOKEN }}
+          NODE_ENV: "development"
+      - name: Static HTML export with Next.js
+        run: npm run export
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: ./out

.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+/.history
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+.vscode
+.todo
+public/sitemap.xml

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run lint

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "importOrder": ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
+}

LICENSE

@@ -0,0 +1,9 @@
+Copyright 2020 DeepSource Corp.
+Copyright 2022 Luca Cavallin <[email protected]>
+Copyright 2023 GitHub Social Impact and Ruby for Good
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,59 @@
+<p align="center">
+  <img src="/public/meta.png" width="100%"/>
+</p>
+
+---
+
+Welcome! 👋🏼
+
+**First Issue** is an initiative to curate a list of accessible issues from popular projects, so developers looking for a new (or first) project to contribute to can get started quickly.
+
+Open-source maintainers are always looking to get more people involved, but it can be challenging to become a contributor. We believe First Issue lowers the barrier for future contributions - and this is why it exists.
+
+## Adding a new project
+
+You're welcome to add a new project in First Issue, just follow these steps:
+
+- To maintain the quality of projects in First Issue, please make sure the GitHub repository you want to add meets the following criteria:
+
+  - It has at least three issues with the `good first issue` label or other labels defined in `firstissue.json` (see `labels` and the end).
+
+  - It has at least 10 contributors.
+
+  - It has at least 1000 stars.
+
+  - It contains a README.md with detailed setup instructions for the project, and a CONTRIBUTING.md with guidelines for new contributors.
+
+  - It is actively maintained (last update less than 1 month ago).
+
+- Add your repository's path (in the format `owner/name` and lexicographic order) to [firstissue.json](firstissue.json).
+
+- Create a new pull-request. Please add the link to the issues page of the repository in the PR description. Once the pull request is merged, the changes will be live on [firstissue.dev](https://firstissue.dev/).
+
+## How does it work?
+
+First Issue is a static website that uses Next.js, React and Typescript. The data shown on the website is loaded from the [generated.json](generated.json) file, which is generated by [generate.ts](generate.ts) by querying the GitHub API to fetch issues from the repositories listed in [firstissue.json](firstissue.json). The labels defined in [firstissue.json](firstissue.json) are used to filter issues for the repositories.
+
+To contribute new features and changes to the website, you would want to run the app locally. Please follow these steps:
+
+
+## How to setup the project locally
+1. Fork the repository, clone it locally, create a new branch to work on a specific feature or bug fix without affecting the main branch of the repository. Make sure you have a recent version of Node.js installed on your computer.
+1. You can use the included [generated.json](generated.json) as dummy data or you can run `npm run prebuild` to fetch the latest data from GitHub yourself: for this, you will need to set the `GH_PERSONAL_ACCESS_TOKEN` environment variable to a valid GitHub Personal Access Token (PAT). Notice: repositories not maching the criteria listed above (see rules in [generated.json](generated.json)) are automatically removed from [firstissue.json](firstissue.json) when the [generated.json](generated.json) script runs.
+1. Start the development server and open the app in your browser.
+
+```bash
+# install the dependencies
+$ npm install
+# start the development server
+$ npm run dev
+```
+
+Good to know when you commit: the project contains a `pre-commit` hook that runs linters automatically to ensure code quality!
+
+#### Credits
+
+This project is based on [good-first-issue](https://github.com/deepsourcelabs/good-first-issue) and [first-issue](https://github.com/lucavallin/first-issue).
+
+
+

components/AddYourProjectLinkButton.tsx

@@ -0,0 +1,14 @@
+export const AddYourProjectLinkButton = () => {
+  return (
+    <div className="pt-6">
+      <a
+        className="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/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Add your project
+      </a>
+    </div>
+  );
+};

components/IssueItem.tsx

@@ -0,0 +1,41 @@
+import { faComment } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Issue } from "../types";
+
+type IssueItemProps = {
+  issue: Issue;
+};
+
+type IssueCommentNumProps = {
+  numIssues: number;
+};
+
+const IssueCommentNum = ({ numIssues }: IssueCommentNumProps) => {
+  return (
+    <div className="flex flex-row items-center justify-end mt-1 w-10">
+      <span className="mr-2 text-sm leading-snug">{numIssues}</span>
+      <FontAwesomeIcon icon={faComment} />
+    </div>
+  );
+};
+
+export const IssueItem = ({ issue }: IssueItemProps) => {
+  return (
+    <li key={issue.url} className="flex flex-row items-start justify-start py-1">
+      <span className="text-slate text-right w-30 px-2 leading-snug">#{issue.number}</span>
+      <div className="flex items-start flex-row flex-auto">
+        <a
+          className="break-all mr-4 leading-snug font-semibold hover:text-juniper text-vanilla-300 block flex-auto"
+          href={issue.url}
+          rel="noopener noreferrer"
+          target="_blank"
+          title="Open issue on GitHub"
+        >
+          {issue.title}
+        </a>
+        {issue.comments_count > 0 && <IssueCommentNum numIssues={issue.comments_count} />}
+      </div>
+    </li>
+  );
+};

components/IssueList.tsx

@@ -0,0 +1,16 @@
+import { Issue } from "../types";
+import { IssueItem } from "./IssueItem";
+
+type IssueListProps = {
+  issues: Issue[];
+};
+
+export const IssuesList = ({ issues }: IssueListProps) => {
+  return (
+    <ol className="px-5 py-3 text-base leading-loose border-t border-ink-200">
+      {issues.map((issue) => (
+        <IssueItem issue={issue} key={issue.id} />
+      ))}
+    </ol>
+  );
+};