14 |
16 | );
17 | };
18 |
19 | export const Base = Template.bind({});
20 |
--------------------------------------------------------------------------------
/src/components/AppLoadingSpinner/AppLoadingSpinner.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Story, Meta } from "@storybook/react";
3 |
4 | import AppLoadingSpinner, { AppLoadingSpinnerProps } from "./AppLoadingSpinner";
5 |
6 | export default {
7 | title: "AppLoadingSpinner",
8 | component: AppLoadingSpinner,
9 | } as Meta;
10 |
11 | const Template: Story
10 |
15 | 11 | nextjs-github-browser 12 |
13 |
23 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/BaseBoxWithHeader/BaseBoxWithHeader.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Story, Meta } from "@storybook/react";
3 |
4 | import BaseBoxWithHeader, { BaseBoxWithHeaderProps } from "./BaseBoxWithHeader";
5 |
6 | export default {
7 | title: "BaseBoxWithHeader",
8 | component: BaseBoxWithHeader,
9 | } as Meta;
10 |
11 | const Template: Story{MAPPING[type].label}
24 |I'm a content
,
19 | header: I'm a header,
20 | };
21 |
--------------------------------------------------------------------------------
/src/components/AppOrganizationCard/AppOrganizationCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Story, Meta } from "@storybook/react";
3 |
4 | import { makeOrganization } from "../../tests/helpers";
5 | import AppOrganizationCard, {
6 | AppOrganizationCardProps,
7 | } from "./AppOrganizationCard";
8 |
9 | export default {
10 | title: "AppOrganizationCard",
11 | component: AppOrganizationCard,
12 | } as Meta;
13 |
14 | const Template: Story
13 |
15 | );
16 |
17 | export const Base = Template.bind({});
18 | Base.parameters = {
19 | layout: "fullscreen",
20 | };
21 | Base.args = {
22 | avatarUrl: "https://avatars.githubusercontent.com/u/985982?v=4",
23 | };
24 |
--------------------------------------------------------------------------------
/cypress/support/index.d.ts:
--------------------------------------------------------------------------------
1 | ///
21 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/src/pages/explore.tsx:
--------------------------------------------------------------------------------
1 | import Head from "next/head";
2 | import Link from "next/link";
3 | import styles from "../styles/Home.module.css";
4 |
5 | export default function PageExplore(): JSX.Element {
6 | return (
7 |
22 | {header}
23 |
24 | {children}
25 |
8 |
9 | nextjs-github-browser
10 |
11 |
12 |
13 |
14 |
21 |
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "strict": true,
12 | "forceConsistentCasingInFileNames": true,
13 | "noEmit": true,
14 | "esModuleInterop": true,
15 | "module": "esnext",
16 | "moduleResolution": "node",
17 | "resolveJsonModule": true,
18 | "isolatedModules": true,
19 | "jsx": "preserve",
20 | "downlevelIteration": true,
21 | "incremental": true,
22 | },
23 | "include": [
24 | "next-env.d.ts",
25 | "lib.es5.d.ts",
26 | "types.d.ts",
27 | "**/*.ts",
28 | "**/*.tsx",
29 | "jest-setup.ts",
30 | ],
31 | "exclude": [
32 | "node_modules",
33 | "cypress"
34 | ]
35 | }
36 |
--------------------------------------------------------------------------------
/src/components/AppProfileOverview/AppProfileOverview.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Story, Meta } from "@storybook/react";
3 |
4 | import { makeProfileReadMe } from "../../tests/helpers";
5 | import AppProfileOverview, {
6 | AppProfileOverviewProps,
7 | } from "./AppProfileOverview";
8 |
9 | export default {
10 | title: "AppProfileOverview",
11 | component: AppProfileOverview,
12 | } as Meta;
13 |
14 | const Template: Story-
15 |
- 16 | Home 17 | 18 |
17 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/.storybook/preview.js:
--------------------------------------------------------------------------------
1 | import "../src/styles/globals.css";
2 | import "github-markdown-css";
3 | import { RouterContext } from "next/dist/shared/lib/router-context";
4 |
5 | export const parameters = {
6 | actions: { argTypesRegex: "^on[A-Z].*" },
7 | controls: {
8 | matchers: {
9 | color: /(background|color)$/i,
10 | date: /Date$/,
11 | },
12 | },
13 | docs: {
14 | inlineStories: false,
15 | },
16 | themes: {
17 | default: "light",
18 | list: [
19 | { name: "light", class: ["default-mode"], color: "white" },
20 | { name: "dark", class: ["dark-mode"], color: "black" },
21 | ],
22 | },
23 | backgrounds: {
24 | disable: true,
25 | },
26 | nextRouter: {
27 | Provider: RouterContext.Provider,
28 | },
29 | };
30 |
31 | document.body.onload = function () {
32 | document.body.classList.add("text-primary");
33 | };
34 |
--------------------------------------------------------------------------------
/src/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import { useLocalStorage } from "../utils/hooks";
2 |
3 | import TheHome from "../components/TheHome/TheHome";
4 |
5 | export default function PageIndex(): JSX.Element {
6 | const LOCALSTORAGE_KEY = "HELP_ENABLED";
7 | const [isHelpEnabled, enableHelp] = useLocalStorage(LOCALSTORAGE_KEY, true);
8 | if (process.env.NODE_ENV === "development" && typeof window !== "undefined") {
9 | // eslint-disable-next-line no-console
10 | console.log(
11 | `[DEV] Help is controled by the localStorage key "${LOCALSTORAGE_KEY}", to reset it you can call resetHelp() in the console (only available in dev mode)`
12 | );
13 | (window as Window &
14 | typeof globalThis & { resetHelp: () => void }).resetHelp = () =>
15 | enableHelp(true);
16 | }
17 | return (
18 | 18 | This feature is not yet supported. 19 |
20 |21 | 29 |
30 |-
17 | {topics.filter(Boolean).map(({ topic }) => {
18 | return (
19 |
-
20 |
21 | {topic.name} 22 | 23 |
24 | );
25 | })}
26 |
29 |
30 |
31 |
33 |
34 |
35 |
36 |
37 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/src/components/icons/TwitterIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { getSvgProps } from "../../utils/svg";
4 |
5 | export default function TwitterIcon(
6 | props: React.SVGProps
15 |
16 |
17 |
18 |
30 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/src/components/AppSearchSummary/AppSearchSummary.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Story, Meta } from "@storybook/react";
3 |
4 | import AppSearchSummary, { AppSearchSummaryProps } from "./AppSearchSummary";
5 | import { getSearchFieldOptions } from "../../utils/github/searchRepos";
6 |
7 | export default {
8 | title: "AppSearchSummary",
9 | component: AppSearchSummary,
10 | } as Meta;
11 |
12 | const Template: Story
16 |
17 |
18 | 
26 | {organisation.name}
27 |
28 |
29 |
30 |
30 |
35 | );
36 | };
37 |
38 | export const Base = Template.bind({});
39 | Base.parameters = {};
40 | Base.args = {};
41 |
--------------------------------------------------------------------------------
/src/components/AppNavBarProfile/AppNavBarProfile.tsx:
--------------------------------------------------------------------------------
1 | import { BookIcon, RepoIcon } from "@primer/octicons-react";
2 | import React from "react";
3 |
4 | import AppNavBar, { LinksDataType } from "../AppNavBar/AppNavBar";
5 |
6 | export type AppProfileNavTabProps = {
7 | owner: string;
8 | currentTab: "default" | "repositories";
9 | mode: "user" | "organization";
10 | reposTotalCount?: number;
11 | };
12 |
13 | export default function AppProfileNavTab({
14 | owner,
15 | currentTab,
16 | reposTotalCount,
17 | mode,
18 | ...ownProps
19 | }: AppProfileNavTabProps): JSX.Element | null {
20 | const links: LinksDataType[] = [
21 | {
22 | label: "Overview",
23 | icon: BookIcon,
24 | tab: "default",
25 | href: {
26 | pathname: `/${owner}`,
27 | },
28 | },
29 | {
30 | label: "Repositories",
31 | tab: "repositories",
32 | icon: RepoIcon,
33 | badge: reposTotalCount,
34 | href: {
35 | pathname:
36 | mode === "organization" ? `/orgs/${owner}/repositories` : `/${owner}`,
37 | query: mode === "user" ? { tab: "repositories" } : {},
38 | },
39 | },
40 | ];
41 | return
18 |
31 | );
32 | };
33 |
34 | export const Base = Template.bind({});
35 | // Base.parameters = {};
36 | Base.args = {
37 | alignMenu: "right",
38 | menuLabel: "Select type",
39 | buttonLabel: "Type",
40 | };
41 | Base.argTypes = {
42 | alignMenu: {
43 | options: ["right", "left"],
44 | control: { type: "radio" },
45 | },
46 | };
47 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # Prevent duplicate content (the goal of this project is an open source technical challenge,
2 | # not to take the place of github.com website)
3 | # Not disallowing social media crawlers, so that they could make thumbnails (part of the technical challenge - SSR)
4 | #
5 | # User agents from https://www.keycdn.com/blog/web-crawlers
6 | #
7 | # Inspired by https://github.com/topheman/nextjs-movie-browser/blob/master/static/robots.txt
8 |
9 | User-agent: googlebot
10 | Allow: /$
11 | Allow: /about
12 | Allow: /explore
13 | Disallow: /
14 |
15 | User-agent: bingbot
16 | Allow: /$
17 | Allow: /about
18 | Allow: /explore
19 | Disallow: /
20 |
21 | User-agent: slurp
22 | Allow: /$
23 | Allow: /about
24 | Allow: /explore
25 | Disallow: /
26 |
27 | User-agent: duckduckbot
28 | Allow: /$
29 | Allow: /about
30 | Allow: /explore
31 | Disallow: /
32 |
33 | User-agent: baiduspider
34 | Allow: /$
35 | Allow: /about
36 | Allow: /explore
37 | Disallow: /
38 |
39 | User-agent: yandexbot
40 | Allow: /$
41 | Allow: /about
42 | Allow: /explore
43 | Disallow: /
44 |
45 | User-agent: exabot
46 | Allow: /$
47 | Allow: /about
48 | Allow: /explore
49 | Disallow: /
50 |
51 | User-agent: ia_archiver
52 | Allow: /$
53 | Allow: /about
54 | Allow: /explore
55 | Disallow: /
56 |
57 | User-agent: sogou
58 | Allow: /$
59 | Allow: /about
60 | Allow: /explore
61 | Disallow: /
62 |
--------------------------------------------------------------------------------
/lib.es5.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-explicit-any */
2 | /**
3 | * Fixes https://github.com/microsoft/TypeScript/issues/16655 for `Array.prototype.filter()`
4 | * For example, using the fix the type of `bar` is `string[]` in the below snippet as it should be.
5 | *
6 | * const foo: (string | null | undefined)[] = [];
7 | * const bar = foo.filter(Boolean);
8 | *
9 | * For related definitions, see https://github.com/microsoft/TypeScript/blob/master/src/lib/es5.d.ts
10 | *
11 | * Original licenses apply, see
12 | * - https://github.com/microsoft/TypeScript/blob/master/LICENSE.txt
13 | * - https://stackoverflow.com/help/licensing
14 | */
15 |
16 | /** See https://stackoverflow.com/a/51390763/1470607 */
17 | type Falsy = false | 0 | "" | null | undefined;
18 |
19 | interface ArrayReadme
28 | {letterCase === "upper" ? "README.md" : "readme.md"} 29 | 30 | } 31 | className={className} 32 | {...props} 33 | > 34 |
14 |
16 | );
17 | };
18 |
19 | export const Base = Template.bind({});
20 | Base.args = {
21 | repositoryNameWithOwner: "topheman/nextjs-movie-browser",
22 | author: {
23 | login: "topheman",
24 | avatarUrl:
25 | "https://avatars.githubusercontent.com/u/985982?u=9319a164fa8c3c905b48e00bb554c4243d9c734b&v=4&s=48",
26 | },
27 | lastCommit: {
28 | committedDate: new Date(),
29 | messageHeadline: "Just commited",
30 | oid: "azertyuiovbnlkjhgv",
31 | },
32 | commitsTotalCount: 123,
33 | currentRef: {
34 | name: "v1.2.3",
35 | prefix: "refs/tags/",
36 | },
37 | className: "p-3",
38 | };
39 |
40 | export const WithoutCommitInfos = Template.bind({});
41 | WithoutCommitInfos.args = {
42 | repositoryNameWithOwner: "topheman/nextjs-movie-browser",
43 | commitsTotalCount: 123,
44 | currentRef: {
45 | name: "v1.2.3",
46 | prefix: "refs/tags/",
47 | },
48 | className: "p-3",
49 | };
50 |
--------------------------------------------------------------------------------
/src/components/AppTagDate/AppTagDate.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import clsx from "clsx";
3 | import { formatDate } from "../../utils/date";
4 |
5 | AppTagDate.defaultProps = {
6 | mode: "updated",
7 | reactive: true,
8 | };
9 |
10 | const MAPPING_MODE = Object.freeze({
11 | updated: "Updated ",
12 | default: "",
13 | });
14 |
15 | export type AppTagDateProps = {
16 | mode: "updated" | "default";
17 | date: Date;
18 | className?: string;
19 | } & typeof AppTagDate.defaultProps;
20 |
21 | export default function AppTagDate({
22 | date,
23 | mode,
24 | className,
25 | reactive,
26 | ...props
27 | }: AppTagDateProps): JSX.Element | null {
28 | const [innerDate, setInnerDate] = useState(date);
29 | useEffect(() => {
30 | setInnerDate(date);
31 | const timer = setTimeout(() => {
32 | if (reactive) {
33 | setInnerDate(new Date(innerDate.getTime() + 1000));
34 | }
35 | }, 1000);
36 | return () => {
37 | clearTimeout(timer);
38 | };
39 | }, [date, innerDate, reactive]);
40 | if (!innerDate) {
41 | return null;
42 | }
43 | const { formattedDate, isRelative } = formatDate(innerDate);
44 | return (
45 |
46 | {MAPPING_MODE[mode]}
47 | {!isRelative ? "on " : ""}
48 |
49 |
50 | );
51 | }
52 |
--------------------------------------------------------------------------------
/src/stories/assets/code-brackets.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/AppLanguagesGraph/AppLanguagesGraph.tsx:
--------------------------------------------------------------------------------
1 | import clsx from "clsx";
2 |
3 | export type AppLanguagesGraphProps = {
4 | languages: ({
5 | size: number;
6 | node: { name: string; color?: string | null };
7 | } | null)[];
8 | className?: string;
9 | };
10 |
11 | export default function AppLanguagesGraph({
12 | languages,
13 | className,
14 | ...props
15 | }: AppLanguagesGraphProps): JSX.Element | null {
16 | const fullSize = languages.reduce(
17 | (sum, language) => sum + (language?.size || 0),
18 | 0
19 | );
20 | return (
21 |
25 | {languages
26 | .map((language) => {
27 | if (!language) {
28 | return null;
29 | }
30 | const percentage = ((100 * language.size) / fullSize).toFixed(1);
31 | // dont display languages at 0.0%
32 | if (!Number(percentage)) {
33 | return null;
34 | }
35 | return (
36 |
45 | );
46 | })
47 | .filter(Boolean)}
48 |
49 | );
50 | }
51 |
--------------------------------------------------------------------------------
/src/components/AppLoadingSpinner/AppLoadingSpinner.module.css:
--------------------------------------------------------------------------------
1 | .root {
2 | --custom-width: 800px;
3 | --calculated-height: calc(var(--custom-width) * 0.1625);
4 | --custom-color: var(--color-text-brand-primary);
5 | display: inline-block;
6 | position: relative;
7 | width: var(--custom-width);
8 | height: var(--calculated-height);
9 | }
10 | .root div {
11 | position: absolute;
12 | width: var(--calculated-height);
13 | height: var(--calculated-height);
14 | border-radius: 50%;
15 | background: var(--custom-color);
16 | animation-timing-function: cubic-bezier(0, 1, 1, 0);
17 | }
18 | .root div:nth-child(1) {
19 | left: calc(var(--custom-width) * 0.1);
20 | animation: anim1 0.6s infinite;
21 | }
22 | .root div:nth-child(2) {
23 | left: calc(var(--custom-width) * 0.1);
24 | animation: anim2 0.6s infinite;
25 | }
26 | .root div:nth-child(3) {
27 | left: calc(var(--custom-width) * 0.4);
28 | animation: anim2 0.6s infinite;
29 | }
30 | .root div:nth-child(4) {
31 | left: calc(var(--custom-width) * 0.7);
32 | animation: anim3 0.6s infinite;
33 | }
34 | @keyframes anim1 {
35 | 0% {
36 | transform: scale(0);
37 | }
38 | 100% {
39 | transform: scale(1);
40 | }
41 | }
42 | @keyframes anim3 {
43 | 0% {
44 | transform: scale(1);
45 | }
46 | 100% {
47 | transform: scale(0);
48 | }
49 | }
50 | @keyframes anim2 {
51 | 0% {
52 | transform: translate(0, 0);
53 | }
54 | 100% {
55 | transform: translate(calc(var(--custom-width) * 0.3), 0);
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/src/stories/assets/comments.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/utils/svg.ts:
--------------------------------------------------------------------------------
1 | // inspired by https://github.com/primer/octicons/blob/main/lib/octicons_react/src/get-svg-props.js
2 |
3 | import { CSSProperties } from "react";
4 |
5 | type GetSvgPropsType = {
6 | viewBox: string;
7 | "aria-label"?: string;
8 | role: string;
9 | className?: string;
10 | fill?: string;
11 | width?: string | number;
12 | height?: string | number;
13 | verticalAlign?: string;
14 | };
15 |
16 | type GetSvgResultType = {
17 | "aria-hidden": boolean | "true" | "false";
18 | "aria-label"?: string;
19 | role: string;
20 | className?: string;
21 | viewBox: string;
22 | width: string | number;
23 | height?: string | number;
24 | fill: string;
25 | style: CSSProperties;
26 | };
27 |
28 | export function getSvgProps(
29 | {
30 | viewBox,
31 | "aria-label": ariaLabel,
32 | role = "img",
33 | className,
34 | fill = "currentColor",
35 | width = "1em",
36 | height,
37 | verticalAlign,
38 | }: GetSvgPropsType,
39 | runtimeProps?: React.SVGProps
14 |
16 | );
17 | };
18 |
19 | export const Base = Template.bind({});
20 | Base.args = {
21 | nameWithOwner: "topheman/npm-registry-browser",
22 | currentRef: {
23 | name: "master",
24 | prefix: "refs/heads/",
25 | },
26 | defaultBranchName: "master",
27 | branches: ["master", "develop"],
28 | tags: ["v0.0.1", "v0.0.2", "v1.0.0"],
29 | branchesTotalCount: 2,
30 | tagsTotalCount: 3,
31 | };
32 |
33 | export const Advanced = Template.bind({});
34 | Advanced.args = {
35 | nameWithOwner: "topheman/npm-registry-browser",
36 | currentRef: {
37 | name: "feature/specific",
38 | prefix: "refs/heads/",
39 | },
40 | defaultBranchName: "master",
41 | branches: [
42 | "develop",
43 | ...Array(8)
44 | .fill(1)
45 | .map((_, i) => `feature/next-${i + 1}`),
46 | ],
47 | tags: [
48 | "v0.0.1",
49 | "v1.0.0",
50 | ...Array(8)
51 | .fill(1)
52 | .map((_, i) => `v${i + 2}.0.0`),
53 | ],
54 | branchesTotalCount: 300,
55 | tagsTotalCount: 200,
56 | };
57 |
--------------------------------------------------------------------------------
/src/components/AppLanguagesList/AppLanguagesList.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Story, Meta } from "@storybook/react";
3 |
4 | import AppLanguagesList, { AppLanguagesListProps } from "./AppLanguagesList";
5 |
6 | export default {
7 | title: "AppLanguagesList",
8 | component: AppLanguagesList,
9 | } as Meta;
10 |
11 | const Template: Story
18 |
47 | );
48 | }
49 |
--------------------------------------------------------------------------------
/src/components/AppLanguagesList/AppLanguagesList.tsx:
--------------------------------------------------------------------------------
1 | import clsx from "clsx";
2 | import { DotFillIcon } from "@primer/octicons-react";
3 |
4 | export type AppLanguagesListProps = {
5 | languages: ({
6 | size: number;
7 | node: { name: string; color?: string | null };
8 | } | null)[];
9 | className?: string;
10 | };
11 |
12 | export default function AppLanguagesList({
13 | languages,
14 | className,
15 | ...props
16 | }: AppLanguagesListProps): JSX.Element | null {
17 | const fullSize = languages.reduce(
18 | (sum, language) => sum + (language?.size || 0),
19 | 0
20 | );
21 | return (
22 |
19 |
26 | 27 | {repository.description || 28 | (repository.parent?.nameWithOwner && 29 | `Forked from ${repository.parent?.nameWithOwner}`)} 30 |
31 |
32 |
-
23 | {languages
24 | .map((language) => {
25 | if (!language) {
26 | return null;
27 | }
28 | const percentage = ((100 * language.size) / fullSize).toFixed(1);
29 | // dont display languages at 0.0%
30 | if (!Number(percentage)) {
31 | return null;
32 | }
33 | return (
34 |
-
41 |
{" "} 42 | 43 | {language.node.name}{" "} 44 | {percentage}% 45 | 46 |
47 | );
48 | })
49 | .filter(Boolean)}
50 |
18 |
52 | );
53 | }
54 |
--------------------------------------------------------------------------------
/src/components/BaseButton/BaseButton.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Link from "next/link";
3 | import clsx from "clsx";
4 | import { TriangleDownIcon } from "@primer/octicons-react";
5 | import HRNumbers from "human-readable-numbers";
6 |
7 | export type BaseButtonProps = Omit<
8 | React.HTMLProps
19 |
51 |
20 |
21 |
22 |
50 | People
23 | 24 | 25 |
26 | {organization.people.edges?.map((member) => {
27 | return (
28 |
32 |
33 |
44 |
45 |
46 | View all
47 |
48 |
49 |
23 | {profileReadme ? (
24 |
25 |
31 | ) : null}
32 |
53 | );
54 | }
55 |
--------------------------------------------------------------------------------
/src/components/AppSearchBarRepositories/AppSearchBarRepositories.tsx:
--------------------------------------------------------------------------------
1 | import clsx from "clsx";
2 |
3 | import AppSelectMenu from "../AppSelectMenu/AppSelectMenu";
4 | import {
5 | getSearchFieldOptions,
6 | SearchParamsType,
7 | } from "../../utils/github/searchRepos";
8 | import { SetReducerStateType } from "../../utils/useSearchRepos";
9 |
10 | export type AppSearchBarRepositoriesProps = {
11 | onUpdate: SetReducerStateType
33 |
52 | 34 | {pinnedRepositories && pinnedRepositories.length > 0 35 | ? "Pinned" 36 | : "Popular repositories"} 37 |
38 |-
39 | {(
40 | (pinnedRepositories && pinnedRepositories.length > 0
41 | ? pinnedRepositories
42 | : popularRepositories) || []
43 | ).map((item) => (
44 |
-
45 |
46 | 48 |47 |
49 | ))}
50 |
27 | {
33 | onUpdate({ q: (e.target as HTMLInputElement).value });
34 | }}
35 | />
36 |
61 | );
62 | }
63 |
--------------------------------------------------------------------------------
/src/components/AppSelectMenu/AppSelectMenu.tsx:
--------------------------------------------------------------------------------
1 | import { CheckIcon } from "@primer/octicons-react";
2 | import clsx from "clsx";
3 |
4 | import BaseSelectMenu from "../BaseSelectMenu/BaseSelectMenu";
5 |
6 | type OptionType
37 | {
40 | onUpdate({ type: value });
41 | }}
42 | options={getSearchFieldOptions("type")}
43 | buttonLabel="Type"
44 | menuLabel="Select type"
45 | className=""
46 | alignMenu="right"
47 | />
48 | {
51 | onUpdate({ sort: value });
52 | }}
53 | options={getSearchFieldOptions("sort")}
54 | buttonLabel="Sort"
55 | menuLabel="Select order"
56 | className="ml-1"
57 | alignMenu="right"
58 | />
59 |
60 | -
47 | {options.map(({ label, value }) => (
48 |
- internalOnChange(value)}
52 | className="flex py-1 pl-4 w-full border-b border-light cursor-pointer hover:bg-brand-secondary"
53 | tabIndex={0}
54 | onKeyDown={makeHandleKeypress(value)}
55 | >
56 |
59 | {label} 60 |
61 | ))}
62 |
21 |
65 | );
66 | }
67 |
--------------------------------------------------------------------------------
/src/components/AppNavBar/AppNavBar.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import React from "react";
3 | import clsx from "clsx";
4 |
5 | import BaseBadge from "../BaseBadge/BaseBadge";
6 |
7 | export type LinksDataType = {
8 | label: string;
9 | icon: React.FunctionComponent<{ className?: string }>;
10 | badge?: string | number;
11 | tab?: string;
12 | href: string | { pathname: string; query?: Record
22 |
23 |
34 |
35 | Public
36 |
37 |
38 |
23 |
34 |
35 | Public
36 |
37 | -
39 |
-
40 |
} 42 | size="small" 43 | badge={{ 44 | href: `/${owner}/${repositoryName}/stargazers`, 45 | label: stargazerCount || 0, 46 | }} 47 | > 48 | Star 49 | 50 |
51 | -
52 |
} 54 | size="small" 55 | badge={{ 56 | href: `/${owner}/${repositoryName}/network/members`, 57 | label: forkCount || 0, 58 | }} 59 | > 60 | Fork 61 | 62 |
63 |
{nav}
20 | );
21 | return (
22 | <>
23 |
26 | {topNav ? (
27 |
43 |
28 |
30 | ) : null}
31 | {topNav}
29 |
37 | {sidebar ? : null}
38 |
42 |
39 | {nav}
40 |
41 |
44 |
69 |
70 | );
71 | }
72 |
--------------------------------------------------------------------------------
/src/components/AppNavBarProfile/AppNavBarProfile.test.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { render, within } from "@testing-library/react";
3 |
4 | import AppNavBarProfile from "./AppNavBarProfile";
5 |
6 | const data = {
7 | organization: [
8 | { label: "Overview", link: "/microsoft" },
9 | { label: "Repositories", link: "/orgs/microsoft/repositories" },
10 | ],
11 | user: [
12 | { label: "Overview", link: "/topheman" },
13 | { label: "Repositories", link: "/topheman?tab=repositories" },
14 | ],
15 | };
16 |
17 | describe("components/AppNavBarProfile", () => {
18 | it("[organization] should show correct links", () => {
19 | const { container } = render(
20 |
52 | {sidebar ? (
53 |
68 |
59 | {sidebar}
60 |
61 | ) : null}
62 | {!reverse ? navbar : null}
63 |
64 | {main}
65 |
66 | {reverse ? navbar : null}
67 |
42 | File too big to be displayed ({size.value} {size.unit})
43 |
44 | );
45 | }
46 | return (
47 |
51 | {numberOfLines} lines ({sourceLinesOfCode}{" "}
52 |
56 | sloc
57 |
58 | ){" | "} {size.value} {size.unit}
59 |
60 |
61 |
62 | Raw
63 |
64 |
65 |
66 | }
67 | className={className}
68 | >
69 |
37 |
70 | );
71 | }
72 |
--------------------------------------------------------------------------------
/src/utils/github/repository.ts:
--------------------------------------------------------------------------------
1 | import type { ParsedUrlQuery } from "querystring";
2 | /**
3 | * Parse query from urls like :
4 | * - `[owner]/[repository]/tree/[branchName]`
5 | * - `[owner]/[repository]/commit/[commitId]`
6 | * - `[owner]/[repository]/blob/[branchName]?path=[path]`
7 | */
8 | export const parseQuery = (
9 | query: ParsedUrlQuery
10 | ): {
11 | owner: string;
12 | repositoryName: string;
13 | branchName?: string;
14 | commitId?: string;
15 | path?: string;
16 | } => {
17 | const { owner, repositoryName, branchName, commitId, path } = query;
18 | return {
19 | owner: typeof owner === "string" ? owner : "",
20 | repositoryName: typeof repositoryName === "string" ? repositoryName : "",
21 | branchName:
22 | // eslint-disable-next-line no-nested-ternary
23 | typeof branchName === "string"
24 | ? branchName
25 | : Array.isArray(branchName)
26 | ? branchName.join("/")
27 | : undefined,
28 | commitId: typeof commitId === "string" ? commitId : undefined,
29 | path: typeof path === "string" ? path : undefined,
30 | };
31 | };
32 |
33 | export function getRepositoryVariables({
34 | owner,
35 | repositoryName,
36 | branchName,
37 | commitId,
38 | path,
39 | }: {
40 | owner: string;
41 | repositoryName: string;
42 | branchName?: string;
43 | commitId?: string;
44 | path?: string;
45 | }): {
46 | owner: string;
47 | name: string;
48 | ref: string;
49 | refPath: string;
50 | upperCaseReadmeRefPath: string;
51 | lowerCaseReadmeRefPath: string;
52 | commit?: string;
53 | path?: string;
54 | } {
55 | return {
56 | owner,
57 | name: repositoryName,
58 | ref: branchName ?? "HEAD",
59 | refPath: `${branchName ?? "HEAD"}:${path || ""}`,
60 | upperCaseReadmeRefPath: `${branchName ?? "HEAD"}:README.md`,
61 | lowerCaseReadmeRefPath: `${branchName ?? "HEAD"}:readme.md`,
62 | commit: commitId,
63 | path,
64 | };
65 | }
66 |
67 | type ResolveCurrentRefType = {
68 | currentRef: {
69 | name: string;
70 | prefix: "refs/heads/" | "refs/tags/";
71 | } | null;
72 | defaultBranchName: string;
73 | };
74 |
75 | export function resolveCurrentRef({
76 | currentRef,
77 | defaultBranchName,
78 | }: ResolveCurrentRefType): {
79 | name: string;
80 | prefix: "refs/heads/" | "refs/tags/";
81 | } {
82 | return (
83 | currentRef || {
84 | name: defaultBranchName,
85 | prefix: "refs/heads/",
86 | }
87 | );
88 | }
89 |
--------------------------------------------------------------------------------
/src/stories/assets/stackalt.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/ExternalTwitterButton/ExternalTwitterButton.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * inspired by https://github.com/topheman/d3-react-experiments/blob/master/src/components/TwitterButton/TwitterButton.js
3 | * and https://github.com/topheman/react-fiber-experiments/blob/master/src/components/TwitterButton.js
4 | * and finally https://github.com/topheman/nextjs-movie-browser/blob/master/src/components/TwitterButton.tsx
5 | */
6 |
7 | import clsx from "clsx";
8 | import React from "react";
9 |
10 | import TwitterIcon from "../icons/TwitterIcon";
11 |
12 | export interface ExternalTwitterButtonProps {
13 | text?: string;
14 | url?: string;
15 | hashtags?: string;
16 | via?: string;
17 | related?: string;
18 | buttonTitle?: string;
19 | className?: string;
20 | }
21 |
22 | /**
23 | * Not using the iframe because it breaks back button for some reason
24 | */
25 | const ExternalTwitterButton: React.FunctionComponent
38 | {count} result
39 | {count > 1 ? "s" : ""}{" "}
40 | {count ? (
41 | <>
42 | ({from}-
43 | {to})
44 |
45 | ) : null}
46 | {typeLabel ? (
47 | <>
48 | {" "}
49 | for{" "}
50 |
51 | {typeLabel}
52 | {" "}
53 | repositories
54 |
55 | ) : null}{" "}
56 | sorted by{" "}
57 | {sortByLabel}
58 |
59 |
60 |
68 |
69 |
14 |
16 | );
17 | };
18 |
19 | const SHORT_LIST = ["Red", "Blue", "Orange"];
20 | const LONG_LIST = [
21 | "black",
22 | "red",
23 | "green",
24 | "yellow",
25 | "blue",
26 | "magenta",
27 | "cyan",
28 | "white",
29 | "gray",
30 | "grey",
31 | "d-black",
32 | "d-red",
33 | "d-green",
34 | "d-yellow",
35 | "d-blue",
36 | "d-magenta",
37 | "d-cyan",
38 | "d-white",
39 | "d-gray",
40 | "d-grey",
41 | ];
42 |
43 | export const Base = Template.bind({});
44 | Base.args = {
45 | buttonLabel: "Type",
46 | menuLabel: "Select Type",
47 | alignMenu: "right",
48 | children: (
49 |
50 |
56 | ),
57 | };
58 |
59 | export const WithoutMenuLabel = Template.bind({});
60 | WithoutMenuLabel.args = {
61 | buttonLabel: "Type",
62 | alignMenu: "right",
63 | children: (
64 | -
51 | {SHORT_LIST.map((color) => (
52 |
- {color} 53 | ))} 54 |
65 |
71 | ),
72 | };
73 |
74 | export const MultipleData = Template.bind({});
75 | MultipleData.args = {
76 | buttonLabel: "Type",
77 | menuLabel: "Select Type",
78 | alignMenu: "right",
79 | children: (
80 | -
66 | {SHORT_LIST.map((color) => (
67 |
- {color} 68 | ))} 69 |
81 |
87 | ),
88 | };
89 |
90 | export const MultipleDataWithoutMenuLabel = Template.bind({});
91 | MultipleDataWithoutMenuLabel.args = {
92 | buttonLabel: "Type",
93 | alignMenu: "right",
94 | children: (
95 | -
82 | {LONG_LIST.map((color) => (
83 |
- {color} 84 | ))} 85 |
96 |
102 | ),
103 | };
104 |
--------------------------------------------------------------------------------
/src/components/AppRepositoryBreadcrumb/AppRepositoryBreadcrumb.test.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { render } from "@testing-library/react";
3 |
4 | import AppRepositoryBreadCrumb, {
5 | AppRepositoryBreadcrumbProps,
6 | } from "./AppRepositoryBreadcrumb";
7 |
8 | const baseRender = (props: Partial-
97 | {LONG_LIST.map((color) => (
98 |
- {color} 99 | ))} 100 |
26 |
34 |
35 | {repositoryName}
36 |
37 |
38 | {separator}
39 | {currentPath
40 | .split("/")
41 | .reduce<{ path: string; pathFragment: string; isLast: boolean }[]>(
42 | (acc, pathFragment, index, array) => {
43 | acc.push({
44 | path: [`${acc[index - 1]?.path || ""}`, pathFragment]
45 | .filter(Boolean)
46 | .join("/"),
47 | pathFragment,
48 | isLast: index === array.length - 1,
49 | });
50 | return acc;
51 | },
52 | []
53 | )
54 | .map(({ path, pathFragment, isLast }) => {
55 | return (
56 |
57 | {isLast ? (
58 | {pathFragment}
59 | ) : (
60 |
68 |
69 | {pathFragment}
70 |
71 |
72 | )}
73 | {separator}
74 |
75 | );
76 | })}
77 |
78 | );
79 | }
80 |
--------------------------------------------------------------------------------
/src/components/AppRepositoryInfosAbout/AppRepositoryInfosAbout.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import { LinkIcon, BookIcon, LawIcon } from "@primer/octicons-react";
3 | import clsx from "clsx";
4 |
5 | import AppTopicsTagList from "../AppTopicsTagList/AppTopicsTagList";
6 | import { GetRepositoryInfosOverviewQuery } from "../../libs/graphql";
7 | import { formatUrl } from "../../utils/string";
8 |
9 | export type AppRepositoryInfosAboutProps = {
10 | repository?: GetRepositoryInfosOverviewQuery["repository"];
11 | className?: string;
12 | };
13 |
14 | export default function AppRepositoryInfosAbout({
15 | repository,
16 | className,
17 | }: AppRepositoryInfosAboutProps): JSX.Element | null {
18 | if (!repository) {
19 | return null;
20 | }
21 | return (
22 |
23 |
74 | );
75 | }
76 |
--------------------------------------------------------------------------------
/src/graphql/queries/getRepositoryInfosBlob.graphql:
--------------------------------------------------------------------------------
1 | query GetRepositoryInfosBlob(
2 | $owner: String!
3 | $name: String!
4 | $ref: String! # examples: HEAD|master|feature/foo
5 | $refPath: String! # examples: HEAD:common.js|master:index.js|feature/foo:src/foo.php|master:src
6 | $path: String! # examples: common.js|src/foo.js|style/toto.css
7 | ) {
8 | rateLimit {
9 | limit
10 | cost
11 | remaining
12 | resetAt
13 | }
14 | repository(name: $name, owner: $owner) {
15 | id
16 | nameWithOwner
17 | description
18 | homepageUrl
19 | stargazerCount
20 | forkCount
21 | defaultBranchRef {
22 | name
23 | prefix
24 | }
25 | openGraphImageUrl
26 | # identified what kind of ref was passed
27 | currentRef: ref(qualifiedName: $ref) {
28 | name
29 | prefix
30 | }
31 | branches: refs(refPrefix: "refs/heads/", first: 10, direction: DESC) {
32 | totalCount
33 | edges {
34 | node {
35 | name
36 | }
37 | }
38 | }
39 | tags: refs(refPrefix: "refs/tags/", first: 10, direction: DESC) {
40 | totalCount
41 | edges {
42 | node {
43 | name
44 | }
45 | }
46 | }
47 | file: object(expression: $refPath) {
48 | ... on Blob {
49 | byteSize
50 | text
51 | }
52 | }
53 | gitInfos: ref(qualifiedName: $ref) {
54 | # if $ref is a tag
55 | tag: target {
56 | ... on Tag {
57 | name
58 | target {
59 | ... on Commit {
60 | history(first: 1, path: $path) {
61 | edges {
62 | node {
63 | oid
64 | messageHeadline
65 | committedDate
66 | author {
67 | user {
68 | login
69 | avatarUrl
70 | }
71 | }
72 | }
73 | }
74 | }
75 | }
76 | }
77 | }
78 | }
79 | # if $ref is a branch
80 | branch: target {
81 | ... on Commit {
82 | history(first: 1, path: $path) {
83 | edges {
84 | node {
85 | oid
86 | messageHeadline
87 | committedDate
88 | author {
89 | user {
90 | login
91 | avatarUrl
92 | }
93 | }
94 | }
95 | }
96 | }
97 | }
98 | }
99 | }
100 | }
101 | }
102 |
--------------------------------------------------------------------------------
/src/components/AppTagDate/AppTagDate.stories.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import { Story, Meta } from "@storybook/react";
3 |
4 | import AppTagDate, { AppTagDateProps } from "./AppTagDate";
5 |
6 | export default {
7 | title: "AppTagDate",
8 | component: AppTagDate,
9 | } as Meta;
10 |
11 | const Template: StoryAbout
24 |{repository.description}
25 | {repository.homepageUrl ? ( 26 |
27 |
38 | ) : null}
39 | Topics
40 |Resources
45 | {repository.readmeLowercase || repository.readmeUppercase ? ( 46 |
47 |
48 |
49 |
54 | ) : null}
55 | License
56 | {repository.licenseInfo ? ( 57 |
58 |
66 |
67 |
72 | ) : null}
73 |
39 |
43 | );
44 | }
45 | return (
46 | Your request couldn't be matched.
40 |A little explanation:
41 |
51 |
82 | );
83 | }
84 |
--------------------------------------------------------------------------------
/cypress/integration/repository.spec.ts:
--------------------------------------------------------------------------------
1 | export {};
2 |
3 | describe("repository", () => {
4 | describe("AppGitRefSwitch", () => {
5 | it("Default branch should be checked", () => {
6 | cy.visit("/topheman/docker-experiments");
7 | cy.get("button[label=master]").click();
8 | cy.get(
9 | "a[href='/topheman/docker-experiments/tree/master'][aria-checked=true]"
10 | ).should("exist");
11 | cy.get("a[href='/topheman/docker-experiments/tree/develop']").should(
12 | "exist"
13 | );
14 | });
15 | it("Changing path should adjust", () => {
16 | cy.visit("/topheman/docker-experiments");
17 | cy.get("[role=grid]").findByRole("link", { name: "api" }).click();
18 | cy.url().should(
19 | "eq",
20 | `${
21 | Cypress.config().baseUrl
22 | }/topheman/docker-experiments/tree/master?path=api`
23 | );
24 | cy.get("button[label=master]").click();
25 | cy.get(
26 | "a[href='/topheman/docker-experiments/tree/master?path=api'][aria-checked=true]"
27 | ).should("exist");
28 | cy.get(
29 | "a[href='/topheman/docker-experiments/tree/develop?path=api']"
30 | ).should("exist");
31 | });
32 | it("Changing branch should adjust", () => {
33 | cy.visit("/topheman/docker-experiments");
34 | cy.get("button[label=master]").click();
35 | cy.get("a[href='/topheman/docker-experiments/tree/develop']").click();
36 | cy.url().should(
37 | "eq",
38 | `${Cypress.config().baseUrl}/topheman/docker-experiments/tree/develop`
39 | );
40 | cy.get("button[label=develop]").should("exist");
41 | cy.get("a[href='/topheman/docker-experiments/tree/master']").should(
42 | "exist"
43 | );
44 | cy.get(
45 | "a[href='/topheman/docker-experiments/tree/develop'][aria-checked=true]"
46 | ).should("exist");
47 | });
48 | it("Changing path to blob should also adjust", () => {
49 | cy.visit("/topheman/docker-experiments");
50 | cy.get("[role=grid]").findByRole("link", { name: "api" }).click();
51 | cy.url().should(
52 | "eq",
53 | `${
54 | Cypress.config().baseUrl
55 | }/topheman/docker-experiments/tree/master?path=api`
56 | );
57 | cy.get("[role=grid]").findByRole("link", { name: "README.md" }).click();
58 | cy.url().should(
59 | "eq",
60 | `${
61 | Cypress.config().baseUrl
62 | }/topheman/docker-experiments/blob/master?path=api%2FREADME.md`
63 | );
64 | cy.get("button[label=master]").click();
65 | cy.get(
66 | "a[href='/topheman/docker-experiments/blob/master?path=api%2FREADME.md'][aria-checked=true]"
67 | ).should("exist");
68 | cy.get(
69 | "a[href='/topheman/docker-experiments/blob/develop?path=api%2FREADME.md']"
70 | ).should("exist");
71 | });
72 | });
73 | });
74 |
--------------------------------------------------------------------------------
/src/components/BaseSelectMenu/BaseSelectMenu.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useRef } from "react";
2 | import { XIcon } from "@primer/octicons-react";
3 | import clsx from "clsx";
4 |
5 | import BaseButton from "../BaseButton/BaseButton";
6 |
7 | export type BaseSelectMenuProps = {
8 | buttonLabel: string;
9 | menuLabel?: string;
10 | children: React.ReactChild | React.ReactChild[];
11 | alignMenu: "left" | "right";
12 | icon?: JSX.Element;
13 | className?: string;
14 | };
15 |
16 | export default function BaseSelectMenu({
17 | buttonLabel,
18 | menuLabel,
19 | className,
20 | children,
21 | alignMenu,
22 | icon,
23 | ...props
24 | }: BaseSelectMenuProps): JSX.Element | null {
25 | const buttonRef = useRef(null);
26 | const [open, setOpen] = useState(false);
27 | const toggle = () => {
28 | setOpen(!open);
29 | };
30 | const close = (e: MouseEvent) => {
31 | if (e.target === buttonRef.current) {
32 | return;
33 | }
34 | setOpen(false);
35 | };
36 | useEffect(() => {
37 | if (open) {
38 | document.addEventListener("click", close);
39 | }
40 | return () => {
41 | document.removeEventListener("click", close);
42 | };
43 | }, [open]);
44 | return (
45 | <>
46 |
47 |
55 | {buttonLabel}
56 |
57 | <>
58 |
85 |
86 | );
87 | }
88 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * When customising color in tailwind, use the following in order to
3 | * benefit from the opacity utility.
4 | * Declare your colors like:
5 | * ```
6 | :root {
7 | --color-primary: 37, 99, 235;
8 | --color-secondary: 253, 224, 71;
9 | }
10 | *
11 | * Source : https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo
12 | *
13 | * However, colors that are declared that way won't pass the linter,
14 | * - so you have to add them to the whitelist in .eslintrc.js
15 | * - only use them on background (since it's mainly here you need opacity)
16 | * - override the colors on textColor/borderColor with the raw color so
17 | * it will be recognized by linter
18 | */
19 | const makeColorWithOpacity = (cssVarname) => ({
20 | opacityVariable,
21 | opacityValue,
22 | }) => {
23 | if (opacityValue !== undefined) {
24 | return `rgba(var(${cssVarname}), ${opacityValue})`;
25 | }
26 | if (opacityVariable !== undefined) {
27 | return `rgba(var(${cssVarname}), var(${opacityVariable}, 1))`;
28 | }
29 | return `rgb(var(${cssVarname}))`;
30 | };
31 |
32 | const brandColors = {
33 | white: makeColorWithOpacity("--color-rgb-white"),
34 | "white-always": makeColorWithOpacity("--color-rgb-white-always"),
35 | "brand-primary": makeColorWithOpacity("--color-rgb-brand-primary"),
36 | "brand-secondary": makeColorWithOpacity("--color-rgb-brand-secondary"),
37 | };
38 |
39 | module.exports = {
40 | mode: "jit",
41 | purge: [
42 | "./src/pages/**/*.{js,ts,jsx,tsx}",
43 | "./src/components/**/*.{js,ts,jsx,tsx}",
44 | ],
45 | darkMode: false, // or 'media' or 'class'
46 | theme: {
47 | colors: {
48 | ...brandColors,
49 | },
50 | // only targetting Roboto:300,400,700 in google fonts
51 | fontWeight: {
52 | light: 300,
53 | normal: 400,
54 | bold: 700,
55 | },
56 | textColor: {
57 | ...brandColors,
58 | white: "var(--color-text-white)",
59 | "white-always": "var(--color-text-white-always)",
60 | "brand-primary": "var(--color-text-brand-primary)",
61 | primary: "var(--color-text-primary)",
62 | secondary: "var(--color-text-secondary)",
63 | },
64 | backgroundColor: {
65 | ...brandColors,
66 | canvas: makeColorWithOpacity("--color-bg-canvas"),
67 | "canvas-inverted": makeColorWithOpacity("--color-bg-canvas-inverted"),
68 | primary: makeColorWithOpacity("--color-bg-primary"),
69 | },
70 | borderColor: {
71 | ...brandColors,
72 | "brand-primary": "var(--color-border-brand-primary)",
73 | primary: "var(--color-border-primary)",
74 | "primary-active": "var(--color-border-primary-active)",
75 | "primary-hover": "var(--color-border-primary-hover)",
76 | "primary-focus": "var(--color-border-primary-focus)",
77 | secondary: "var(--color-border-secondary)",
78 | light: "var(--color-border-light)",
79 | },
80 | extend: {},
81 | },
82 | variants: {
83 | extend: {},
84 | },
85 | plugins: [],
86 | };
87 |
--------------------------------------------------------------------------------
/src/tests/helpers/index.ts:
--------------------------------------------------------------------------------
1 | import { User, Organization } from "../../libs/graphql";
2 |
3 | export const makeUser = (props: Partial
65 | {menuLabel ? (
66 |
67 | {menuLabel}
68 |
71 |
72 | ) : null}
73 |
77 |
83 |
84 |
74 | {children}
75 |
76 | \n 
\n 
\n
\n';
48 |
--------------------------------------------------------------------------------
/src/pages/orgs/[owner]/repositories.tsx:
--------------------------------------------------------------------------------
1 | import { useRouter } from "next/router";
2 | import type { GetServerSideProps, GetServerSidePropsResult } from "next";
3 |
4 | import type { ParseQuery } from "../../../types";
5 | import { initializeApollo, addApolloState } from "../../../libs/apollo-client";
6 | import { getSearchRepoGraphqlVariables } from "../../../utils/github/searchRepos";
7 | import {
8 | GetOrganizationWithRepositoriesQuery,
9 | GetOrganizationWithRepositoriesDocument,
10 | useGetOrganizationWithRepositoriesQuery,
11 | Organization,
12 | } from "../../../libs/graphql";
13 | import AppMainLayout from "../../../components/AppMainLayout/AppMainLayout";
14 | import AppProfileNavTab from "../../../components/AppNavBarProfile/AppNavBarProfile";
15 | import AppProfileRepositories from "../../../components/AppProfileRepositories/AppProfileRepositories";
16 | import AppOrganizationCardMini from "../../../components/AppOrganizationCardMini/AppOrganizationCardMini";
17 | import { addHttpCacheHeader } from "../../../utils/server";
18 |
19 | // necessary typeguard as query.owner is of type string | string[]
20 | const parseQuery: ParseQueryClick for GitHub Stats
\n\n
75 |
82 | {markdown}
83 |
84 |
85 | );
86 | }
87 | return null;
88 | }
89 |
--------------------------------------------------------------------------------
/src/components/AppRepositoryListItem/AppRepositoryListItem.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 |
3 | import { Repository } from "../../libs/graphql";
4 | import AppTagLanguage from "../AppTagLanguage/AppTagLanguage";
5 | import AppTagCount from "../AppTagCount/AppTagCount";
6 | import AppTagLicense from "../AppTagLicense/AppTagLicense";
7 | import AppTagDate from "../AppTagDate/AppTagDate";
8 | import AppTopicsTagList from "../AppTopicsTagList/AppTopicsTagList";
9 |
10 | export type AppRepositoryListItemProps = {
11 | repository: Repository;
12 | };
13 |
14 | export default function AppRepositoryListItem({
15 | repository,
16 | ...props
17 | }: AppRepositoryListItemProps): JSX.Element {
18 | return (
19 |
23 |
87 | );
88 | }
89 |
--------------------------------------------------------------------------------
/src/graphql/queries/getRepositoryInfosOverview.graphql:
--------------------------------------------------------------------------------
1 | query GetRepositoryInfosOverview(
2 | $owner: String!
3 | $name: String!
4 | $ref: String! # examples: HEAD|master|feature/foo
5 | $refPath: String! # examples: HEAD:|master:|feature/foo:|master:src
6 | $upperCaseReadmeRefPath: String! # examples: HEAD:README.md|feature/foo:README.md
7 | $lowerCaseReadmeRefPath: String! # examples: HEAD:README.md|feature/foo:README.md
8 | ) {
9 | rateLimit {
10 | limit
11 | cost
12 | remaining
13 | resetAt
14 | }
15 | repository(name: $name, owner: $owner) {
16 | id
17 | nameWithOwner
18 | description
19 | homepageUrl
20 | stargazerCount
21 | forkCount
22 | defaultBranchRef {
23 | name
24 | prefix
25 | }
26 | openGraphImageUrl
27 | # identified what kind of ref was passed
28 | currentRef: ref(qualifiedName: $ref) {
29 | name
30 | prefix
31 | }
32 | branches: refs(refPrefix: "refs/heads/", first: 10, direction: DESC) {
33 | totalCount
34 | edges {
35 | node {
36 | name
37 | }
38 | }
39 | }
40 | tags: refs(refPrefix: "refs/tags/", first: 10, direction: DESC) {
41 | totalCount
42 | edges {
43 | node {
44 | name
45 | }
46 | }
47 | }
48 | gitInfos: object(expression: $ref) {
49 | ... on Commit {
50 | history(first: 1) {
51 | totalCount
52 | edges {
53 | node {
54 | oid
55 | messageHeadline
56 | committedDate
57 | author {
58 | user {
59 | login
60 | avatarUrl
61 | }
62 | }
63 | }
64 | }
65 | }
66 | }
67 | }
68 | repositoryTopics(first: 15) {
69 | nodes {
70 | topic {
71 | name
72 | }
73 | }
74 | }
75 | # check should be case insensitive
76 | readmeUppercase: object(expression: $upperCaseReadmeRefPath) {
77 | ... on Blob {
78 | text
79 | }
80 | }
81 | readmeLowercase: object(expression: $lowerCaseReadmeRefPath) {
82 | ... on Blob {
83 | text
84 | }
85 | }
86 | licenseInfo {
87 | name
88 | }
89 | # latest release + totalCount
90 | releases(first: 1, orderBy: { field: CREATED_AT, direction: DESC }) {
91 | totalCount
92 | edges {
93 | node {
94 | name
95 | createdAt
96 | tag {
97 | name
98 | }
99 | }
100 | }
101 | }
102 | packages(first: 10) {
103 | totalCount
104 | edges {
105 | node {
106 | name
107 | packageType
108 | }
109 | }
110 | }
111 | # no contributors for the moment - https://maravindblog.wordpress.com/2021/08/12/how-to-get-contributors-using-github-graphql/
112 | languages(first: 10, orderBy: { field: SIZE, direction: DESC }) {
113 | edges {
114 | size
115 | node {
116 | name
117 | color
118 | }
119 | }
120 | }
121 | ...RepositoryFiles
122 | }
123 | }
124 |
--------------------------------------------------------------------------------
24 | node)}
40 | />
41 |
83 | 25 | 26 | 30 | {repository.name} 31 | 32 | 33 |
34 |{repository.description}
35 |-
42 | {repository.primaryLanguage ? (
43 |
-
44 |
45 |
46 | ) : null}
47 | {repository.stargazerCount > 0 ? (
48 | -
49 |
55 |
56 | ) : null}
57 | {repository.forkCount > 0 ? (
58 | -
59 |
65 |
66 | ) : null}
67 | {repository.licenseInfo ? (
68 | -
69 |
70 |
71 | ) : null}
72 | {repository.updatedAt ? (
73 | -
74 |
79 |
80 | ) : null}
81 |
84 |
86 | {/* some graph */}
85 |