Merge branch 'main' into main

.eslintrc.js

@@ -1,3 +1,5 @@
+const path = require("path");
+
 module.exports = {
   root: true,
   parser: "@typescript-eslint/parser",
@@ -23,16 +25,19 @@ module.exports = {
     tsconfigRootDir: __dirname
   },
   rules: {
-    "prettier/prettier": ["error", {
-      "endOfLine": "auto",
-      "printWidth": 100,
-      "tabWidth": 2,
-      "trailingComma": "none",
-      "bracketSpacing": true,
-      "singleQuote": false,
-      "semi": true,
-      "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"]
-    }],
+    "prettier/prettier": [
+      "error",
+      {
+        endOfLine: "auto",
+        printWidth: 100,
+        tabWidth: 2,
+        trailingComma: "none",
+        bracketSpacing: true,
+        singleQuote: false,
+        semi: true,
+        plugins: ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"]
+      }
+    ],
     "react/react-in-jsx-scope": "off",
     "jsx-a11y/anchor-is-valid": [
       "error",
@@ -47,6 +52,12 @@ module.exports = {
     "react/no-unescaped-entities": 0,
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/no-var-requires": "off",
-    "@typescript-eslint/ban-ts-comment": "off"
+    "@typescript-eslint/ban-ts-comment": "off",
+    "tailwindcss/no-custom-classname": ["warn", { whitelist: ["active-pill"] }]
+  },
+  settings: {
+    tailwindcss: {
+      config: path.join(__dirname, "./tailwind.config.js")
+    }
   }
 };

components/AboutSection.tsx

@@ -8,10 +8,10 @@ export const AboutSection = () => {
       <SectionTitle className="mb-2" text="About" />
       <h1 className="hidden text-lg font-bold">{config.meta.title}</h1>
       <p className="text-gray-900 dark:text-silver-500">
-        Discover a meaningful way to contribute to open source projects focused on climate
-        technology and sustainability. Curious but unsure about the details?{" "}
+        Discover a meaningful way to join open source projects by contributing to Good First Issues
+        focused on climate and sustainability. Curious but unsure about the details?{" "}
         <Link href="/about/" className="text-primary underline">
-          Read more...
+          <strong>Read more...</strong>
         </Link>
       </p>
     </div>

components/FormatContent.tsx

@@ -4,6 +4,6 @@ interface Props {
 
 export default function FormatContent({ children }: Props): JSX.Element {
   return (
-    <article className="prose prose-lg mb-10 dark:prose-invert lg:prose-xl">{children}</article>
+    <article className="prose prose-lg mb-10 lg:prose-xl dark:prose-invert">{children}</article>
   );
 }

components/Header.tsx

@@ -15,13 +15,13 @@ export const Header = () => {
   );
 
   return (
-    <header className="container mx-auto my-5 flex flex-col items-center bg-stone-50 p-6 dark:bg-black-400 md:my-10 md:flex-row md:justify-between lg:max-w-6xl">
+    <header className="container mx-auto my-5 flex flex-col items-center bg-stone-50 p-6 md:my-10 md:flex-row md:justify-between lg:max-w-6xl dark:bg-black-400">
       <nav className="flex flex-wrap items-center md:justify-center">
         <Link href="/" title="Home" aria-label="Home">
           <Image src="/logo.svg" alt={config.meta.logo} width={280} height={40} />
         </Link>
         {activeFilter ? (
-          <span className="mt-4 cursor-pointer text-4xl font-semibold text-gray-900 dark:text-silver-500 sm:ml-8 sm:mt-0">
+          <span className="mt-4 cursor-pointer text-4xl font-semibold text-gray-900 sm:ml-8 sm:mt-0 dark:text-silver-500">
             {activeFilter?.display}
           </span>
         ) : null}

components/Picker/ActiveTagButton.tsx

@@ -4,7 +4,7 @@ type ActiveTagButtonProps = {
 
 const ActiveTagButton = ({ data }: ActiveTagButtonProps) => {
   return (
-    <button className="overflow-hidden rounded-full border border-primary bg-primary/10 p-0 px-3 font-mono text-xs font-bold uppercase tracking-wider text-gray-900 dark:text-silver-500 md:hidden">
+    <button className="overflow-hidden rounded-full border border-primary bg-primary/10 p-0 px-3 font-mono text-xs font-bold uppercase tracking-wider text-gray-900 md:hidden dark:text-silver-500">
       <span className="truncate">{data}</span>
     </button>
   );

components/Picker/CategoryPicker.tsx

@@ -38,7 +38,7 @@ export const CategoryPicker = ({
         onClick={toggleCollapsible}
         className={`flex cursor-pointer ${isCollapsed ? "sm:flex" : ""}`}
       >
-        <SectionTitle className="mb-2" text="Browse by Category" />
+        <SectionTitle text="Browse by Category" />
         <FontAwesomeIcon
           icon={faChevronDown}
           className={classNames(
@@ -54,7 +54,7 @@ export const CategoryPicker = ({
         {activeTagId && isCollapsed ? <ActiveTagButton data={activeTagId} /> : null}
       </div>
       <div
-        className={classNames("-mx-1 overflow-hidden duration-300 ease-in-out", {
+        className={classNames("-mx-1 mt-2 overflow-hidden duration-300 ease-in-out", {
           ["max-h-0 sm:max-h-20"]: isCollapsed,
           ["max-h-full"]: !isCollapsed
         })}
@@ -66,11 +66,11 @@ export const CategoryPicker = ({
             const isActive = onCategoryPage && category.id === activeTagId;
             return (
               <PickerItem
-                className={`group m-1 inline-block rounded-sm border px-2 py-1 ${
-                  isActive
-                    ? "active-pill"
-                    : "border-silver-100 transition-all hover:border-primary hover:text-primary"
-                }`}
+                className={classNames("group m-1 inline-block rounded-sm border px-2 py-1", {
+                  ["active-pill"]: isActive,
+                  ["border-silver-100 transition-all hover:border-primary hover:text-primary"]:
+                    !isActive
+                })}
                 href={isActive ? "/" : `/category/${category.id}`}
                 key={category.id}
                 text={category.display}

components/Picker/LanguagePicker.tsx

@@ -38,7 +38,7 @@ export const LanguagePicker = ({
         onClick={toggleCollapsible}
         className={`flex cursor-pointer ${isCollapsed ? "sm:flex" : ""}`}
       >
-        <SectionTitle className="mb-2" text="Browse by Language" />
+        <SectionTitle text="Browse by Language" />
         <FontAwesomeIcon
           icon={faChevronDown}
           className={classNames(
@@ -54,7 +54,7 @@ export const LanguagePicker = ({
         {activeTagId && isCollapsed ? <ActiveTagButton data={activeTagId} /> : null}
       </div>
       <div
-        className={classNames("-mx-1 overflow-hidden duration-300 ease-in-out", {
+        className={classNames("-mx-1 mt-2 overflow-hidden duration-300 ease-in-out", {
           ["max-h-0 sm:max-h-20"]: isCollapsed,
           ["max-h-full"]: !isCollapsed
         })}
@@ -65,11 +65,11 @@ export const LanguagePicker = ({
             const isActive = onLanguagePage && language.id === activeTagId;
             return (
               <PickerItem
-                className={`group m-1 inline-block rounded-sm border px-2 py-1 ${
-                  isActive
-                    ? "active-pill"
-                    : "border-silver-100 transition-all hover:border-primary hover:text-primary"
-                }`}
+                className={classNames("group m-1 inline-block rounded-sm border px-2 py-1", {
+                  ["active-pill"]: isActive,
+                  ["border-silver-100 transition-all hover:border-primary hover:text-primary"]:
+                    !isActive
+                })}
                 href={isActive ? "/" : `/language/${language.id}`}
                 key={language.id}
                 text={language.display}

components/Picker/SortPicker.tsx

@@ -1,4 +1,5 @@
 import { RepositorySortOrder } from "@/types/types";
+import classNames from "classnames";
 import { SectionTitle } from "../SectionTitle";
 
 type SortPickerProps = {
@@ -14,19 +15,20 @@ export const SortPicker = ({ activeSort, sortOptions, onSortOrderSelect }: SortP
       id="repositories-list"
     >
       <div>
-        <SectionTitle className="mb-2 md:mb-0" text="Sort Repositories" />
+        <SectionTitle className="mb-2 md:mb-0" text="Sort By" />
       </div>
-      <div>
+      <div className="-mx-1">
         {sortOptions.map((sortOption) => {
           return (
             <button
               key={sortOption}
               onClick={() => onSortOrderSelect(sortOption)}
-              className={`group m-1 inline-block rounded-sm border px-2 py-1 ${
-                activeSort === sortOption
-                  ? "active-pill"
-                  : "border-silver-100 transition-all hover:border-primary hover:text-primary"
-              }`}
+              className={classNames("group m-1 inline-block rounded-sm border px-2 py-1", {
+                ["active-pill"]: activeSort === sortOption,
+                ["border-silver-100 transition-all hover:border-primary hover:text-primary"]: !(
+                  activeSort === sortOption
+                )
+              })}
             >
               {sortOption}
             </button>

components/Picker/TagPicker.tsx

@@ -53,7 +53,7 @@ export const TagPicker = ({
         onClick={toggleCollapsible}
         className={`flex cursor-pointer ${isCollapsed ? "sm:flex" : ""}`}
       >
-        <SectionTitle className="my-1" text="Browse by tag" />
+        <SectionTitle text="Browse by tag" />
         <FontAwesomeIcon
           icon={faChevronDown}
           className={classNames(
@@ -76,15 +76,10 @@ export const TagPicker = ({
         {activeTagId && isCollapsed && <ActiveTagButton data={activeTagId} />}
       </div>
       <div
-        className={classNames("-mx-1 overflow-hidden duration-300 ease-in-out", {
+        className={classNames("-mx-1 mt-2 overflow-hidden duration-300 ease-in-out", {
           ["max-h-0 sm:max-h-20"]: isCollapsed,
           ["max-h-full"]: !isCollapsed
         })}
-        // className={` transition-max-height ${
-        //   isShowLessVisible && "overflow-y-scroll"
-        // } overflow-hidden duration-300  ease-in-out md:max-h-[50dvh] ${
-        //   isCollapsed ? "max-h-0" : "max-h-96"
-        // } ${isCollapsed ? "sm:max-h-full" : ""}`}
       >
         {tags
           .sort((a, b) => b.count - a.count)
@@ -93,11 +88,11 @@ export const TagPicker = ({
             const isActive = onTagPage && tag.id === activeTagId;
             return (
               <PickerItem
-                className={`group m-1 inline-block rounded-sm border px-2 py-1 ${
-                  isActive
-                    ? "active-pill"
-                    : "border-silver-100 transition-all hover:border-primary hover:text-primary"
-                }`}
+                className={classNames("group m-1 inline-block rounded-sm border px-2 py-1", {
+                  ["active-pill"]: isActive,
+                  ["border-silver-100 transition-all hover:border-primary hover:text-primary"]:
+                    !isActive
+                })}
                 href={isActive ? "/" : `/tag/${tag.id}`}
                 key={tag.id}
                 text={tag.display}

components/Sidebar.tsx

@@ -68,7 +68,7 @@ export const Sidebar = () => {
         </LinkButton>
       </div>
       <div
-        className={`z-50 bg-stone-50 transition-all duration-300 dark:bg-black-400 md:sticky md:top-4 ${
+        className={`z-50 bg-stone-50 transition-all duration-300 md:sticky md:top-4 dark:bg-black-400 ${
           scrollHeightReached ? "fixed top-0 " : "sticky top-0"
         }`}
       >
@@ -81,6 +81,7 @@ export const Sidebar = () => {
         <LanguagePicker
           languages={languages}
           activeTagId={activeLanguageId}
+          isCollapsedDefault={width < 768} // Collapse for mobile, not for desktop
           onLanguagePage={pageType == "language"}
         />
 

components/TopBar.tsx

@@ -36,15 +36,15 @@ export const TopBar = () => (
           href="https://github.com/protontypes/climate-triage"
           rel="noopener noreferrer"
           target="_blank"
-          className="hidden text-sm font-bold uppercase tracking-wider text-gray-900 hover:opacity-80 dark:text-silver-500 sm:inline"
+          className="hidden text-sm font-bold uppercase tracking-wider text-gray-900 hover:opacity-80 sm:inline dark:text-silver-500"
         >
           Repository <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ms-1" />
         </Link>
         <Link
           href="https://opencollective.com/open-sustainable-technology/projects/climate-triage"
           rel="noopener noreferrer"
           target="_blank"
-          className="hidden text-sm font-bold uppercase tracking-wider text-gray-900 hover:opacity-80 dark:text-silver-500 sm:inline"
+          className="hidden text-sm font-bold uppercase tracking-wider text-gray-900 hover:opacity-80 sm:inline dark:text-silver-500"
         >
           Fund this <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ms-1" />
         </Link>

constants.ts

@@ -4,5 +4,6 @@ export const REPOSITORY_SORT_OPTIONS = [
   RepositorySortOrder.NEW_ISSUES,
   RepositorySortOrder.MOST_DOWNLOADS,
   RepositorySortOrder.MOST_STARS,
+  RepositorySortOrder.NEWEST,
   RepositorySortOrder.NONE
 ];

context/AppDataContext.tsx

@@ -77,30 +77,32 @@ const AppDataProvider = ({ children }: { children: React.ReactNode }) => {
   const updateRepositoriesOnSortChange = (sortOrder: RepositorySortOrder) => {
     let updatedRepositories: Repository[] = [];
 
-    //Find and return the newest issue in a given repository
+    // Find and return the newest issue in a given repository
     if (sortOrder === RepositorySortOrder.NEW_ISSUES) {
-      //Compare current repo's newest issue to next repo's newest issue, sort by newest issue first
-      updatedRepositories = [...allRepositories].sort((currentRepository, nextRepository) => {
-        const currentNewestIssue = getNewestIssue(currentRepository);
-        const nextNewestIssue = getNewestIssue(nextRepository);
-        const timestampDiff =
-          new Date(nextNewestIssue.created_at).getTime() -
-          new Date(currentNewestIssue.created_at).getTime();
-
-        return timestampDiff;
+      updatedRepositories = [...allRepositories].sort((a, b) => {
+        const newestIssueA = getNewestIssue(a).created_at;
+        const newestIssueB = getNewestIssue(b).created_at;
+        return new Date(newestIssueB).getTime() - new Date(newestIssueA).getTime();
       });
     }
 
+    // Sort by number of stars
     if (sortOrder === RepositorySortOrder.MOST_STARS) {
-      updatedRepositories = [...allRepositories].sort((currentRepository, nextRepository) => {
-        return nextRepository.stars - currentRepository.stars;
-      });
+      updatedRepositories = [...allRepositories].sort((a, b) => b.stars - a.stars);
     }
 
+    // Sort by number of monthly downloads
     if (sortOrder === RepositorySortOrder.MOST_DOWNLOADS) {
-      updatedRepositories = [...allRepositories].sort((currentRepository, nextRepository) => {
-        return nextRepository.monthly_downloads - currentRepository.monthly_downloads;
-      });
+      updatedRepositories = [...allRepositories].sort(
+        (a, b) => b.monthly_downloads - a.monthly_downloads
+      );
+    }
+
+    // Sort by newest project
+    if (sortOrder === RepositorySortOrder.NEWEST) {
+      updatedRepositories = [...allRepositories].sort(
+        (a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+      );
     }
 
     if (sortOrder === RepositorySortOrder.NONE) {

data/index.ts

@@ -41,13 +41,14 @@ const main = async () => {
         issues,
         monthly_downloads
       }) => {
-        const { owner, stargazers_count, license, pushed_at, topics } = repository;
+        const { owner, stargazers_count, license, pushed_at, topics, created_at } = repository;
         return {
           id: id.toString(),
           owner,
           name: name ?? "N/A",
           description,
           url,
+          created_at: created_at.toString(),
           stars: stargazers_count,
           stars_display: formatStars(stargazers_count),
           license: license ?? undefined, // TODO: Handle null better here

package.json

@@ -23,8 +23,8 @@
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
     "@types/mdx": "^2.0.10",
-    "@types/node": "20.10.5",
-    "@types/react": "18.2.45",
+    "@types/node": "20.10.6",
+    "@types/react": "18.2.46",
     "@types/react-dom": "18.2.18",
     "dayjs": "^1.11.10",
     "millify": "^6.1.0",
@@ -42,26 +42,26 @@
     "@types/jest": "^29.5.11",
     "@types/react-infinite-scroller": "^1.2.5",
     "@types/validator": "^13.11.7",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
+    "@typescript-eslint/eslint-plugin": "^6.17.0",
+    "@typescript-eslint/parser": "^6.17.0",
     "autoprefixer": "^10.4.16",
-    "classnames": "^2.3.2",
+    "classnames": "^2.5.1",
     "eslint": "^8.56.0",
     "eslint-config-next": "^14.0.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-tailwindcss": "^3.13.0",
+    "eslint-plugin-prettier": "^5.1.2",
+    "eslint-plugin-tailwindcss": "^3.13.1",
     "husky": "^8.0.3",
     "jest": "^29.7.0",
     "lint-staged": "^15.2.0",
     "postcss": "^8.4.32",
     "prettier": "^3.1.1",
     "prettier-plugin-organize-imports": "^3.2.4",
-    "prettier-plugin-tailwindcss": "^0.5.9",
-    "sass": "^1.69.5",
-    "tailwindcss": "^3.3.6",
+    "prettier-plugin-tailwindcss": "^0.5.10",
+    "sass": "^1.69.6",
+    "tailwindcss": "^3.4.0",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.2",
     "typescript": "5.3.3"