[add] China NGO Database 2.0 pages (#36)

Co-authored-by: TechQuery <[email protected]>

Author: Copilot

.env

@@ -5,3 +5,5 @@ NEXT_PUBLIC_LOGO = https://github.com/Open-Source-Bazaar.png
 NEXT_PUBLIC_LARK_API_HOST = https://open.feishu.cn/open-apis/
 NEXT_PUBLIC_LARK_APP_ID = cli_a8094a652022900d
 NEXT_PUBLIC_LARK_WIKI_URL = https://open-source-bazaar.feishu.cn/wiki/space/7052192153363054596
+
+NEXT_PUBLIC_STRAPI_API_HOST = https://china-ngo-db.onrender.com/api/

.gitignore

@@ -26,10 +26,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env*local
 
 # vercel
 .vercel

.husky/pre-commit

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

.husky/pre-push

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

.npmrc

@@ -1 +1,3 @@
-auto-install-peers = false
+auto-install-peers = false
+//npm.pkg.github.com/:_authToken=${GH_PAT} 
+@open-source-bazaar:registry=https://npm.pkg.github.com

components/Base/ZodiacBar.tsx

@@ -0,0 +1,34 @@
+import Link from 'next/link';
+import { FC, ReactNode } from 'react';
+
+export const ZodiacSigns = ['🐵', '🐔', '🐶', '🐷', '🐭', '🐮', '🐯', '🐰', '🐲', '🐍', '🐴', '🐐'];
+
+export interface ZodiacBarProps {
+  startYear: number;
+  endYear?: number;
+  itemOf?: (year: number, zodiac: string) => { link?: string; title?: ReactNode };
+}
+
+export const ZodiacBar: FC<ZodiacBarProps> = ({
+  startYear,
+  endYear = new Date().getFullYear(),
+  itemOf,
+}) => (
+  <ol className="list-inline d-flex flex-wrap justify-content-center gap-3">
+    {Array.from({ length: endYear - startYear + 1 }, (_, index) => {
+      const year = endYear - index;
+      const zodiac = ZodiacSigns[year % 12];
+      const { link = '#', title } = itemOf?.(year, zodiac) || {};
+
+      return (
+        <li key={index} className="list-inline-item border rounded">
+          <Link className="d-inline-block p-3 text-decoration-none text-center" href={link}>
+            <div className="fs-1">{zodiac}</div>
+
+            {title}
+          </Link>
+        </li>
+      );
+    })}
+  </ol>
+);

components/LarkImage.tsx

@@ -9,11 +9,7 @@ export interface LarkImageProps extends Omit<ImageProps, 'src'> {
   src?: TableCellValue;
 }
 
-export const LarkImage: FC<LarkImageProps> = ({
-  src = DefaultImage,
-  alt,
-  ...props
-}) => (
+export const LarkImage: FC<LarkImageProps> = ({ src = DefaultImage, alt, ...props }) => (
   <Image
     fluid
     loading="lazy"

components/Map/ChinaMap.tsx

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

components/Map/CityStatisticMap.tsx

@@ -0,0 +1,63 @@
+import { computed } from 'mobx';
+import { observer } from 'mobx-react';
+import { ObservedComponent } from 'mobx-react-helper';
+import dynamic from 'next/dynamic';
+import { MarkerMeta, OpenReactMapProps } from 'open-react-map';
+
+import { OrganizationStatistic } from '../../models/Organization';
+import systemStore from '../../models/System';
+
+const ChinaMap = dynamic(() => import('./ChinaMap'), { ssr: false });
+
+export interface CityStatisticMapProps {
+  data: OrganizationStatistic['coverageArea'];
+  onChange?: (city: string) => any;
+}
+
+@observer
+export class CityStatisticMap extends ObservedComponent<CityStatisticMapProps> {
+  componentDidMount() {
+    systemStore.getCityCoordinate();
+  }
+
+  @computed
+  get markers() {
+    const { cityCoordinate } = systemStore,
+      { data } = this.observedProps;
+
+    return Object.entries(data)
+      .map(([city, count]) => {
+        const point = cityCoordinate[city];
+
+        if (point)
+          return {
+            tooltip: `${city} ${count}`,
+            position: [point[1], point[0]],
+          };
+      })
+      .filter(Boolean) as MarkerMeta[];
+  }
+
+  handleChange: OpenReactMapProps['onMarkerClick'] = ({ latlng: { lat, lng } }) => {
+    const { markers } = this;
+    const { tooltip } =
+      markers.find(({ position: p }) => p instanceof Array && lat === p[0] && lng === p[1]) || {};
+    const [city] = tooltip?.split(/\s+/) || [];
+
+    this.props.onChange?.(city);
+  };
+
+  render() {
+    const { markers } = this;
+
+    return (
+      <ChinaMap
+        style={{ height: '70vh' }}
+        center={[34.32, 108.55]}
+        zoom={4}
+        markers={markers}
+        onMarkerClick={this.handleChange}
+      />
+    );
+  }
+}

components/Navigator/MainNavigator.tsx

@@ -45,6 +45,16 @@ const topNavBarMenu = ({ t }: typeof i18n): MenuItem[] => [
       { href: '/license-filter', title: t('license_filter') },
     ],
   },
+  {
+    title: t('NGO'),
+    subs: [
+      { href: '/NGO', title: t('China_NGO_DB') },
+      {
+        href: 'https://open-source-bazaar.feishu.cn/wiki/VGrMwiweVivWrHkTcvpcJTjjnoY',
+        title: t('Open_Source_NGO_plan'),
+      },
+    ],
+  },
   {
     title: t('wiki'),
     subs: [