feat: global repos list (#8446)

* feat: global repos list

* fix: failing tests

* fix: failing test

* fix: failing test

components/layouts/DocsLayout.js

@@ -70,6 +70,10 @@ export const navigation = [
         name: "Testimonials with Forms",
         href: "/docs/how-to-guides/testimonials-forms",
       },
+      {
+        name: "GitHub Repos with Forms",
+        href: "/docs/how-to-guides/repos-forms",
+      },
     ],
   },
   {

components/navbar/Navbar.js

@@ -88,8 +88,8 @@ export default function Navbar() {
       url: "/map",
     },
     {
-      name: "Docs",
-      url: "/docs",
+      name: "Repos",
+      url: "/repos",
     },
   ];
 

components/user/UserRepos.js

@@ -2,6 +2,7 @@ import FallbackImage from "@components/FallbackImage";
 import Link from "@components/Link";
 import ChevronRightIcon from "@heroicons/react/20/solid/ChevronRightIcon";
 import StarIcon from "@heroicons/react/20/solid/StarIcon";
+import dateFormat from "@services/utils/dateFormat";
 
 export default function UserRepos({ repos }) {
   return (
@@ -26,12 +27,7 @@ export default function UserRepos({ repos }) {
                   {repo.owner}/{repo.name}
                 </Link>{" "}
                 <span className="hidden md:inline">
-                  (
-                  {new Intl.DateTimeFormat("en-GB", {
-                    dateStyle: "full",
-                    timeStyle: "long",
-                  }).format(new Date(repo.dates.pushedAt))}
-                  )
+                  ({dateFormat({ format: "long", date: repo.dates.pushedAt })})
                 </span>
               </p>
               <p className="mt-1 flex text-xs leading-5 text-gray-500">

pages/api/repos.js

@@ -0,0 +1,37 @@
+import logger from "@config/logger";
+import Profile from "@models/Profile";
+
+export default async function handler(req, res) {
+  if (req.method != "GET") {
+    return res
+      .status(400)
+      .json({ error: "Invalid request: GET request required" });
+  }
+
+  const repos = await getRepos();
+  return res.status(200).json(repos);
+}
+
+export async function getRepos() {
+  let repos = [];
+  try {
+    repos = await Profile.aggregate([
+      { $project: { username: 1, repos: 1, isEnabled: 1 } },
+      { $match: { isEnabled: true } },
+      { $unwind: "$repos" },
+      {
+        $sort: { "repos.dates.pushedAt": -1 },
+      },
+      {
+        $replaceRoot: {
+          newRoot: "$repos",
+        },
+      },
+    ]).exec();
+  } catch (e) {
+    logger.error(e, "Failed to load repos");
+    repos = [];
+  }
+
+  return JSON.parse(JSON.stringify(repos));
+}

pages/docs/how-to-guides/repos-forms.mdx

@@ -0,0 +1,43 @@
+import DocsLayout from "@components/layouts/DocsLayout.js";
+import ClipboardCopy from "@components/ClipboardCopy";
+import Link from "@components/Link";
+
+## GitHub Repos - with Forms
+
+Showcase your Open Source projects by adding the GitHub Repo to your Profile.
+
+## Add a GitHub Repo
+
+1. Go to the [LinkFree homepage](https://linkfree.io/)
+
+2. Click on `Log in`
+
+![LinkFree Homepage](https://github.com/EddieHubCommunity/LinkFree/assets/82668196/ce980ed7-ad4d-42c0-886c-447a2e2ab936)
+
+3. You will be taken to your Profile's Statistics page
+
+Click on `Repos`
+
+![LinkFree Profile](https://github.com/EddieHubCommunity/LinkFree/assets/624760/59e998c6-f757-4678-b973-1213b86dbd62)
+
+4. This will take you to the Repos page
+
+Enter your GitHub Repo URL and then click `Add Repo`
+
+![LinkFree Add Repo](https://github.com/EddieHubCommunity/LinkFree/assets/624760/26d11652-4085-4b02-80d7-81bd1cb6517c)
+
+Note: If you already have GitHub Repos in your Profile these will shown here.
+
+5. Your GitHub Repo will then be shown in your Profile on your custom URL (linkfree.io/eddiejaoude) and also the global Repo page
+
+![Global Repo page](https://github.com/EddieHubCommunity/LinkFree/assets/624760/f7135feb-56ba-4d62-9ed4-a6cedb4e0d39)
+
+export default ({ children }) => (
+  <DocsLayout
+    title="LinkFree Links Documentation"
+    section="Customising your Profile"
+    name="Links"
+  >
+    {children}
+  </DocsLayout>
+);

pages/docs/profile-tips.mdx

@@ -9,6 +9,7 @@ Make your LinkFree Profile stand out by following these tips.
 
 - For YouTube links you can append your url with `?sub_confirmation=1` which will ask the visitor if they wish to subscribe
 - For Twitter you can use the "intent" link to ask people if they would like to follow you when visiting your profile. This is done with `https://twitter.com/intent/user?screen_name=TWITTER-USERNAME` (for example [https://twitter.com/intent/user?screen_name=eddiejaoude](https://twitter.com/intent/user?screen_name=eddiejaoude))
+- If you would like people to email you directly, you can add a link on your Profile with a URL `mailto:<YOUR-EMAIL-ADDRESS>` for example: `mailto:name@email.com`
 
 ### Milestones: Share your achievements and future goals
 
@@ -26,6 +27,10 @@ Make your LinkFree Profile stand out by following these tips.
 
 For example profiles and how to implement these tips in your Profile, visit the end section in the [QuickStart guide](/docs/quickstart-forms)
 
+### Repos: Share your Open Source GitHub repos/projects
+
+- If you have any Open Source projects on GitHub, you can add them to your Profile by adding the URL to the [repos](/docs/how-to-guides/repos-forms) tab. This will also appear in the Global [Repos](/repos) page on the app.
+
 export default ({ children }) => (
   <DocsLayout title="profile-style guide" section="Extra" name="Profile Tips">
     {children}

pages/events.js

@@ -90,7 +90,7 @@ export default function Events({ events }) {
             title="Go To Event Docs"
             badgeClassName={"translate-x-2/4 -translate-y-1/2"}
           >
-            <h1 className="text-4xl mb-4 font-bold ">Community events</h1>
+            <h1 className="text-4xl mb-4 font-bold ">Community Events</h1>
           </Badge>
         </div>
         <EventTabs

pages/repos.js

@@ -0,0 +1,30 @@
+import { getRepos } from "./api/repos";
+
+import Page from "@components/Page";
+import PageHead from "@components/PageHead";
+import UserRepos from "@components/user/UserRepos";
+
+export async function getServerSideProps() {
+  let repos = await getRepos();
+
+  return {
+    props: { repos },
+  };
+}
+
+export default function Repos({ repos }) {
+  return (
+    <>
+      <PageHead
+        title="Repos from the LinkFree community members"
+        description="Repo by the LinkFree community"
+      />
+
+      <Page>
+        <h1 className="text-4xl mb-4 font-bold">Community Repos</h1>
+
+        <UserRepos repos={repos} />
+      </Page>
+    </>
+  );
+}

tests/events.spec.js

@@ -13,6 +13,11 @@ test("Click on events profile in navbar navigates to events page", async ({
   await expect(page).toHaveURL("/events");
 });
 
+test("Events has title", async ({ page }) => {
+  await page.goto("/events");
+  await expect(page.locator("h1")).toHaveText("Community Events");
+});
+
 test.fixme("Events listed", async ({ page }) => {
   await page.goto("/events");
   await expect(page.locator("li")).toBeGreaterThan(1);

tests/repos.spec.js

@@ -0,0 +1,41 @@
+// @ts-check
+import { test, expect } from "@playwright/test";
+import AxeBuilder from "@axe-core/playwright";
+
+test("Click on repos in navbar navigates to repo page", async ({ page }) => {
+  await page.goto("/");
+  await page
+    .getByRole("navigation")
+    .getByRole("link", { name: "Repos" })
+    .click();
+  await expect(page).toHaveURL("/repos");
+});
+
+test("Repos has title", async ({ page }) => {
+  await page.goto("/repos");
+  await expect(page.locator("h1")).toHaveText("Community Repos");
+});
+
+test.describe("accessibility tests (light)", () => {
+  test.use({ colorScheme: "light" });
+
+  test("should pass axe wcag accessibility tests", async ({ page }) => {
+    await page.goto("/repos");
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"])
+      .analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});
+
+test.describe("accessibility tests (dark)", () => {
+  test.use({ colorScheme: "dark" });
+
+  test("should pass axe wcag accessibility tests (dark)", async ({ page }) => {
+    await page.goto("/repos");
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"])
+      .analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});