[add] Card component & List page of GitHub projects

components/Git/Card.tsx

@@ -0,0 +1,70 @@
+import { text2color } from 'idea-react';
+import { GitRepository } from 'mobx-github';
+import { observer } from 'mobx-react';
+import { FC, useContext } from 'react';
+import { Badge, Button, Card, Col, Row } from 'react-bootstrap';
+
+import { I18nContext } from '../../models/Translation';
+import { GitLogo } from './Logo';
+
+export interface GitCardProps
+  extends Pick<GitRepository, 'full_name' | 'html_url' | 'languages'>,
+    Partial<Pick<GitRepository, 'topics' | 'description' | 'homepage'>> {
+  className?: string;
+}
+
+export const GitCard: FC<GitCardProps> = observer(
+  ({
+    className = 'shadow-sm',
+    full_name,
+    html_url,
+    languages = [],
+    topics = [],
+    description,
+    homepage,
+  }) => {
+    const { t } = useContext(I18nContext);
+
+    return (
+      <Card className={className}>
+        <Card.Body className="d-flex flex-column gap-3">
+          <Card.Title as="h3" className="h5">
+            <a target="_blank" href={html_url} rel="noreferrer">
+              {full_name}
+            </a>
+          </Card.Title>
+
+          <nav className="flex-fill">
+            {topics.map(topic => (
+              <Badge
+                key={topic}
+                className="me-1"
+                bg={text2color(topic, ['light'])}
+                as="a"
+                target="_blank"
+                href={`https://github.com/topics/${topic}`}
+              >
+                {topic}
+              </Badge>
+            ))}
+          </nav>
+          <Row as="ul" className="list-unstyled g-4" xs={4}>
+            {languages.map(language => (
+              <Col key={language} as="li">
+                <GitLogo name={language} />
+              </Col>
+            ))}
+          </Row>
+          <Card.Text>{description}</Card.Text>
+        </Card.Body>
+        <Card.Footer className="d-flex justify-content-between align-items-center">
+          {homepage && (
+            <Button variant="success" target="_blank" href={homepage}>
+              {t('home_page')}
+            </Button>
+          )}
+        </Card.Footer>
+      </Card>
+    );
+  },
+);

components/Git/Logo.tsx

@@ -0,0 +1,48 @@
+import { observable } from 'mobx';
+import { observer } from 'mobx-react';
+import { PureComponent } from 'react';
+import { Image } from 'react-bootstrap';
+
+export interface GitLogoProps {
+  name: string;
+}
+
+@observer
+export class GitLogo extends PureComponent<GitLogoProps> {
+  @observable
+  accessor path = '';
+
+  async componentDidMount() {
+    const { name } = this.props;
+    const topic = name.toLowerCase();
+
+    try {
+      const { src } = await this.loadImage(
+        `https://raw.githubusercontent.com/github/explore/master/topics/${topic}/${topic}.png`,
+      );
+      this.path = src;
+    } catch {
+      const { src } = await this.loadImage(`https://github.com/${name}.png`);
+
+      this.path = src;
+    }
+  }
+
+  loadImage(path: string) {
+    return new Promise<HTMLImageElement>((resolve, reject) => {
+      const image = new globalThis.Image();
+
+      image.onload = () => resolve(image);
+      image.onerror = reject;
+
+      image.src = path;
+    });
+  }
+
+  render() {
+    const { path } = this;
+    const { name } = this.props;
+
+    return path && <Image fluid src={path} alt={name} />;
+  }
+}

components/Navigator/MainNavigator.tsx

@@ -19,6 +19,7 @@ const topNavBarMenu = ({ t }: typeof i18n): MenuItem[] => [
     href: '/article/open-collaborator-award',
     name: t('open_collaborator_award'),
   },
+  { href: '/project', name: t('open_source_projects') },
   { href: '/issue', name: 'GitHub issues' },
   {
     href: 'https://github.com/Open-Source-Bazaar/Git-Hackathon-scaffold',

package.json

@@ -44,18 +44,18 @@
     "@babel/plugin-proposal-decorators": "^7.28.0",
     "@babel/plugin-transform-typescript": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
-    "@cspell/eslint-plugin": "^9.1.3",
-    "@eslint/js": "^9.30.1",
+    "@cspell/eslint-plugin": "^9.1.5",
+    "@eslint/js": "^9.31.0",
     "@softonus/prettier-plugin-duplicate-remover": "^1.1.2",
     "@stylistic/eslint-plugin": "^5.1.0",
     "@types/eslint-config-prettier": "^6.11.3",
     "@types/koa": "^2.15.0",
     "@types/koa__router": "^12.0.4",
     "@types/next-pwa": "^5.6.9",
-    "@types/node": "^22.16.0",
+    "@types/node": "^22.16.3",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
-    "eslint": "^9.30.1",
+    "eslint": "^9.31.0",
     "eslint-config-next": "^15.3.5",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-react": "^7.37.5",

pages/project.tsx

@@ -0,0 +1,55 @@
+import { Loading } from 'idea-react';
+import { GitRepository, RepositoryModel } from 'mobx-github';
+import { observer } from 'mobx-react';
+import { ScrollList } from 'mobx-restful-table';
+import { cache, compose, errorLogger } from 'next-ssr-middleware';
+import { FC, useContext } from 'react';
+import { Col, Container, Row } from 'react-bootstrap';
+
+import { GitCard } from '../components/Git/Card';
+import { PageHead } from '../components/Layout/PageHead';
+import { repositoryStore } from '../models/Repository';
+import { I18nContext } from '../models/Translation';
+
+export const getServerSideProps = compose(cache(), errorLogger, async () => {
+  const list = await new RepositoryModel('Open-Source-Bazaar').getList({
+    relation: ['languages'],
+  });
+
+  return { props: JSON.parse(JSON.stringify({ list })) };
+});
+
+const ProjectListPage: FC<{ list: GitRepository[] }> = observer(({ list }) => {
+  const i18n = useContext(I18nContext);
+  const { t } = i18n;
+
+  return (
+    <Container>
+      <PageHead title={t('open_source_projects')} />
+      <h1 className="my-4">{t('open_source_projects')}</h1>
+
+      {repositoryStore.downloading > 0 && <Loading />}
+
+      <ScrollList
+        translator={i18n}
+        store={repositoryStore}
+        filter={{ relation: ['languages'] }}
+        renderList={allItems => (
+          <Row as="ul" className="list-unstyled g-4" xs={1} sm={2}>
+            {allItems.map(
+              item =>
+                item.homepage && (
+                  <Col key={item.id} as="li">
+                    <GitCard className="h-100 shadow-sm" {...item} />
+                  </Col>
+                ),
+            )}
+          </Row>
+        )}
+        defaultData={list}
+      />
+    </Container>
+  );
+});
+
+export default ProjectListPage;