Add [Open Library] & Library Work Flow

.github/scripts/transform-message.ts

@@ -5,10 +5,8 @@ type GitHubSchema = components['schemas'];
 
 type GitHubUser = GitHubSchema['simple-user'];
 
-interface GitHubAction extends Record<
-  'event_name' | 'actor' | 'server_url' | 'repository',
-  string
-> {
+interface GitHubAction
+  extends Record<'event_name' | 'actor' | 'server_url' | 'repository', string> {
   action?: string;
   ref?: string;
   ref_name?: string;

.github/workflows/self-scan.yml

@@ -13,5 +13,5 @@ jobs:
 
       - uses: OWASP/cve-lite-cli@v1
         with:
-          verbose: "true"
+          verbose: 'true'
           fail-on: high

.husky/pre-commit

@@ -1 +1 @@
-npm test
+npm test

.husky/pre-push

@@ -1 +1 @@
-npm run build
+npm run build

components/Activity/Hackathon/Hero.tsx

@@ -18,15 +18,16 @@ export interface HackathonHeroAction extends HackathonHeroNavItem {
 
 export type HackathonHeroCard = Record<'title' | 'description' | 'eyebrow', string>;
 
-export interface HackathonHeroProps extends Record<
-  | `visual${'Kicker' | 'Title' | 'Copy' | 'Chip'}`
-  | 'name'
-  | 'subtitle'
-  | 'description'
-  | 'locationText'
-  | 'imageFallback',
-  string
-> {
+export interface HackathonHeroProps
+  extends Record<
+    | `visual${'Kicker' | 'Title' | 'Copy' | 'Chip'}`
+    | 'name'
+    | 'subtitle'
+    | 'description'
+    | 'locationText'
+    | 'imageFallback',
+    string
+  > {
   agendaItems: Agenda[];
   badges: ReactNode[];
   bottomCard?: HackathonHeroCard;

components/Activity/Hackathon/Resources.tsx

@@ -29,10 +29,8 @@ export interface HackathonProjectItem {
   title: string;
 }
 
-export interface HackathonResourcesProps extends Record<
-  `project${'Subtitle' | 'Title'}` | `template${'Subtitle' | 'Title'}`,
-  string
-> {
+export interface HackathonResourcesProps
+  extends Record<`project${'Subtitle' | 'Title'}` | `template${'Subtitle' | 'Title'}`, string> {
   projectInitialVisible?: number;
   projectItems: HackathonProjectItem[];
   showLessLabel?: string;

components/Activity/Hackathon/Schedule.tsx

@@ -17,10 +17,8 @@ export interface HackathonScheduleFact extends HackathonAwardsMeta {
   meta: string;
 }
 
-export interface HackathonScheduleItem extends Record<
-  'id' | 'phase' | 'title' | 'description',
-  string
-> {
+export interface HackathonScheduleItem
+  extends Record<'id' | 'phase' | 'title' | 'description', string> {
   facts: HackathonScheduleFact[];
 
   endedAt?: TimeData;
@@ -29,10 +27,8 @@ export interface HackathonScheduleItem extends Record<
   tone: HackathonScheduleTone;
 }
 
-export interface HackathonScheduleProps extends Record<
-  'title' | 'subtitle' | 'lead' | 'kicker' | 'stageGoalLabel',
-  string
-> {
+export interface HackathonScheduleProps
+  extends Record<'title' | 'subtitle' | 'lead' | 'kicker' | 'stageGoalLabel', string> {
   items: HackathonScheduleItem[];
   keyDates?: {
     label: string;

components/Activity/Hackathon/theme.less

@@ -14,21 +14,17 @@
 @body: 'Outfit', 'Avenir Next', 'Segoe UI', sans-serif;
 
 .panel-card() {
+  backdrop-filter: blur(18px);
   box-shadow: @shadow;
   border: 1px solid @border;
   border-radius: 28px;
   background: @panel;
-  backdrop-filter: blur(18px);
 }
 
 .section-shell() {
   position: relative;
+  background: linear-gradient(180deg, rgba(5, 8, 20, 0.98), rgba(7, 12, 26, 0.98));
   padding: clamp(4rem, 7vw, 6rem) 0;
-  background: linear-gradient(
-    180deg,
-    rgba(5, 8, 20, 0.98),
-    rgba(7, 12, 26, 0.98)
-  );
   color: @copy;
 }
 
@@ -55,8 +51,8 @@
 }
 
 .section-header() {
-  text-align: center;
   margin-bottom: clamp(2.3rem, 4vw, 3rem);
+  text-align: center;
 }
 
 .section-title() {
@@ -66,35 +62,35 @@
   background-clip: text;
   -webkit-background-clip: text;
   color: transparent;
-  font-family: @heading;
-  font-size: clamp(1.9rem, 4vw, 2.6rem);
   font-weight: 900;
+  font-size: clamp(1.9rem, 4vw, 2.6rem);
+  font-family: @heading;
   letter-spacing: 0.12em;
   text-transform: uppercase;
 }
 
 .section-subtitle() {
   color: @muted;
-  font-family: @heading;
-  font-size: 0.75rem;
   font-weight: 700;
+  font-size: 0.75rem;
+  font-family: @heading;
   letter-spacing: 0.12em;
   text-transform: uppercase;
 }
 
 .accent-line() {
-  width: 72px;
-  height: 2px;
   margin: 1rem auto 0;
+  box-shadow: 0 0 14px rgba(44, 232, 255, 0.32);
   border-radius: 999px;
   background: linear-gradient(90deg, @cyan, @purple);
-  box-shadow: 0 0 14px rgba(44, 232, 255, 0.32);
+  width: 72px;
+  height: 2px;
 }
 
 .button-base() {
   display: inline-flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
   gap: 0.5rem;
   transition:
     transform 0.22s ease,
@@ -105,9 +101,9 @@
   border: 1px solid transparent;
   border-radius: 10px;
   padding: 0.9rem 1.35rem;
-  font-family: @heading;
-  font-size: 0.82rem;
   font-weight: 700;
+  font-size: 0.82rem;
+  font-family: @heading;
   letter-spacing: 0.08em;
   text-align: center;
   text-decoration: none;
@@ -148,9 +144,9 @@
 
 .eyebrow() {
   color: @muted;
-  font-family: @heading;
-  font-size: 0.75rem;
   font-weight: 700;
+  font-size: 0.75rem;
+  font-family: @heading;
   letter-spacing: 0.12em;
   text-transform: uppercase;
 }

components/Layout/CardPage.tsx

@@ -1,10 +1,11 @@
-import { ComponentClass, FC } from 'react';
+import { ComponentType, FC } from 'react';
 import { Col, Pagination, Row } from 'react-bootstrap';
 
 import { SearchPageMeta } from '../../models/System';
 
 export interface CardPageProps extends SearchPageMeta {
-  Card: ComponentClass<any> | FC<any>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Card: ComponentType<any>;
   cardLinkOf?: (id: string) => string;
   pageLinkOf: (page: number) => string;
 }

components/License/helper.ts

@@ -50,4 +50,4 @@ export const licenseTips = ({ t }: typeof i18n): LicenseTips => ({
   privacyLoophole: [{ text: t('tip_privacy_loophole') }],
   marketingEndorsement: [{ text: t('tip_marketing_endorsement') }],
   infectionRange: [{ text: t('tip_infection_range') }],
-});
+});

components/Map/ChinaMap.tsx

@@ -2,9 +2,6 @@ import { OpenReactMap, OpenReactMapProps, TileLayer } from 'open-react-map';
 import { FC } from 'react';
 
 const ChinaMap: FC<OpenReactMapProps> = props => (
-  <OpenReactMap
-    {...props}
-    renderTileLayer={() => <TileLayer vendor="GaoDe" />}
-  />
+  <OpenReactMap {...props} renderTileLayer={() => <TileLayer vendor="GaoDe" />} />
 );
-export default ChinaMap;
+export default ChinaMap;

components/Navigator/MainNavigator.tsx

@@ -81,6 +81,10 @@ const topNavBarMenu = ({ t }: typeof i18n): MenuItem[] => [
       { href: '/recipe', title: t('recipe') },
     ],
   },
+  {
+    href: '/open-library',
+    title: t('open_library'),
+  },
 ];
 
 export interface MainNavigatorProps {

components/Navigator/SearchBar.tsx

@@ -13,8 +13,7 @@ import { I18nContext } from '../../models/Translation';
 import styles from './SearchBar.module.less';
 
 export interface SearchBarProps
-  extends
-    Omit<FormProps, 'onChange'>,
+  extends Omit<FormProps, 'onChange'>,
     Pick<InputGroupProps, 'size'>,
     Pick<FormControlProps, 'name' | 'placeholder' | 'defaultValue' | 'value' | 'onChange'> {
   expanded?: boolean;

components/Organization/Card.tsx

@@ -10,8 +10,7 @@ import { i18n, I18nContext } from '../../models/Translation';
 import { Organization } from '../../models/Organization';
 
 export interface OrganizationCardProps
-  extends
-    Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>,
+  extends Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>,
     Omit<Organization, 'id'>,
     CardProps {
   onSwitch?: (filter: Partial<Pick<Organization, 'entityType' | 'coverageArea'>>) => any;

components/open-library/BookCard.tsx

@@ -0,0 +1,89 @@
+import Link from 'next/link';
+import { observer } from 'mobx-react';
+import { FC, useContext } from 'react';
+import { Badge, Button, Card, CardProps } from 'react-bootstrap';
+
+export type { Book } from '../../models/Book';
+import type { Book } from '../../models/Book';
+import { I18nContext } from '../../models/Translation';
+
+export interface BookCardProps extends CardProps {
+  book: Book;
+  showStatus?: boolean;
+  variant?: 'featured' | 'catalog';
+}
+
+export const BookCard: FC<BookCardProps> = observer(({
+  className = '',
+  book,
+  showStatus = false,
+  variant = 'featured',
+  ...cardProps
+}) => {
+  const isFeatured = variant === 'featured';
+
+  const { t } = useContext(I18nContext);
+
+  return (
+    <Card className={`border-0 shadow${isFeatured ? '-sm' : ''} ${className}`} {...cardProps}>
+      <div className="text-center p-3 position-relative">
+        {showStatus && (
+          <div className="position-absolute top-0 end-0 m-2">
+            <Badge
+              bg={book.status === 'available' ? 'success' : 'warning'}
+              text={book.status === 'available' ? undefined : 'dark'}
+            >
+              {book.status === 'available' ? t('available') : t('borrowed')}
+            </Badge>
+          </div>
+        )}
+        <div className="p-3">
+          <Card.Img
+            variant="top"
+            src={book.cover || '/images/placeholder-book.svg'}
+            alt={`${book.title} ${t('book_cover')}`}
+            className="rounded bg-light"
+            style={{
+              height: '180px',
+              objectFit: 'contain',
+              padding: '10px',
+            }}
+          />
+        </div>
+      </div>
+      <Card.Body className="text-center d-flex flex-column p-3">
+        <Card.Title
+          className="fw-bold h6 mb-2 text-truncate"
+          title={book.title}
+        >
+          {book.title}
+        </Card.Title>
+        <Card.Text
+          className="text-muted small mb-2 text-truncate"
+          title={book.author}
+        >
+          {book.author}
+        </Card.Text>
+        {book.category && (
+          <Card.Text className="text-muted small mb-3">
+            🏷️ {book.category}
+          </Card.Text>
+        )}
+        <div className="mt-auto">
+          <Link href={`/open-library/book/${book.id}`} passHref legacyBehavior>
+            <Button
+              variant="outline-success"
+              size="sm"
+              as="a"
+              className="rounded-pill px-3 fw-medium"
+            >
+              {t('open_library_view_details')}
+            </Button>
+          </Link>
+        </div>
+      </Card.Body>
+    </Card>
+  );
+});
+
+export default BookCard;