├── src
    ├── vite-env.d.ts
    ├── assets
    │   ├── gradients
    │   │   ├── left.png
    │   │   └── right.png
    │   └── logos
    │   │   ├── Apple.svg
    │   │   ├── Apple_dark.svg
    │   │   ├── Lumix_logo.svg
    │   │   ├── Lumix_logo_dark.svg
    │   │   ├── SIGMA.svg
    │   │   ├── SIGMA_dark.svg
    │   │   ├── SONY.svg
    │   │   ├── SONY_dark.svg
    │   │   ├── Sony_Alpha_logo.svg
    │   │   ├── Panasonic.svg
    │   │   └── Panasonic_dark.svg
    ├── routes
    │   ├── index.tsx
    │   ├── shuin_list.tsx
    │   ├── prefecture.tsx
    │   ├── cluster.tsx
    │   ├── map_openlayers.tsx
    │   ├── shuin.tsx
    │   ├── root.tsx
    │   └── photo.tsx
    ├── contexts
    │   ├── loading.tsx
    │   └── map_token.tsx
    ├── hooks
    │   └── useMediaQuery.tsx
    ├── i18n
    │   ├── ja.ts
    │   ├── zh_CN.ts
    │   └── en.ts
    ├── main.tsx
    ├── index.css
    ├── App.tsx
    ├── components
    │   ├── manufacture_icon.tsx
    │   ├── camera_name.tsx
    │   ├── dialog_map.tsx
    │   ├── shuin_masonry.tsx
    │   ├── photo_masonry.tsx
    │   ├── shuin_modal.tsx
    │   └── photo_modal.tsx
    ├── models
    │   └── gallery.ts
    └── App.css
├── public
    └── logo.png
├── postcss.config.js
├── vercel.json
├── README.md
├── tsconfig.node.json
├── .gitignore
├── vite.config.ts
├── .eslintrc.cjs
├── tsconfig.json
├── index.html
├── package.json
└── tailwind.config.js


/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hebingchang/boar-gallery-web/HEAD/public/logo.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     '@tailwindcss/postcss': {},
4 |   },
5 | }
6 | 


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 |   "rewrites":  [
3 |     {"source": "/(.*)", "destination": "/"}
4 |   ]
5 | }
6 | 
7 | 


--------------------------------------------------------------------------------
/src/assets/gradients/left.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hebingchang/boar-gallery-web/HEAD/src/assets/gradients/left.png


--------------------------------------------------------------------------------
/src/assets/gradients/right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hebingchang/boar-gallery-web/HEAD/src/assets/gradients/right.png


--------------------------------------------------------------------------------
/src/routes/index.tsx:
--------------------------------------------------------------------------------
1 | import PhotoMasonry from "../components/photo_masonry.tsx";
2 | 
3 | 
4 | export default function Index() {
5 |   return <div className='px-2 pt-4 pb-12'>
6 |     <PhotoMasonry/>
7 |   </div>
8 | }
9 | 


--------------------------------------------------------------------------------
/src/contexts/loading.tsx:
--------------------------------------------------------------------------------
1 | import React, { createContext } from "react";
2 | 
3 | export const LoadingContext = createContext<{
4 |   loading: boolean,
5 |   setLoading: React.Dispatch<React.SetStateAction<boolean>>
6 | } | null>(null);
7 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Boar Gallery
 2 | 
 3 | This is the frontend service for [Boar Gallery](https://gallery.boar.osaka).
 4 | 
 5 | It has to work with the specific backend, which is not yet open source.
 6 | 
 7 | ## Development
 8 | 
 9 | ```bash
10 | yarn dev
11 | ```
12 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "skipLibCheck": true,
 5 |     "module": "ESNext",
 6 |     "moduleResolution": "bundler",
 7 |     "allowSyntheticDefaultImports": true,
 8 |     "strict": true
 9 |   },
10 |   "include": ["vite.config.ts"]
11 | }
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/src/contexts/map_token.tsx:
--------------------------------------------------------------------------------
 1 | import React, { createContext } from "react";
 2 | 
 3 | export enum MapType {
 4 |   Apple,
 5 |   Baidu,
 6 |   MapBox,
 7 | }
 8 | 
 9 | export interface MapToken {
10 |   type: MapType,
11 |   token: string
12 | }
13 | 
14 | export const MapTokenContext = createContext<{
15 |   token: MapToken | undefined,
16 |   setToken: React.Dispatch<React.SetStateAction<MapToken | undefined>>
17 | } | null>(null);
18 | 


--------------------------------------------------------------------------------
/src/routes/shuin_list.tsx:
--------------------------------------------------------------------------------
 1 | import ShuinMasonry from "../components/shuin_masonry.tsx";
 2 | import { useTranslation } from "react-i18next";
 3 | 
 4 | export default function ShuinList() {
 5 |   const { t } = useTranslation()
 6 | 
 7 |   return <div className='px-2 pt-4 pb-12'>
 8 |     <div className='text-4xl md:text-5xl mb-6 md:mb-8 ml-2 pt-2'>
 9 |       {t('sidebar.shuin')}
10 |     </div>
11 | 
12 |     <ShuinMasonry/>
13 |   </div>
14 | }
15 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import react from '@vitejs/plugin-react-swc'
 3 | import Unfonts from 'unplugin-fonts/vite'
 4 | 
 5 | // https://vitejs.dev/config/
 6 | export default defineConfig({
 7 |   plugins: [
 8 |     react(),
 9 |     Unfonts({
10 |       // Google Fonts API V2
11 |       fontsource: {
12 |         families: [
13 |           'Dancing Script Variable'
14 |         ]
15 |       },
16 |     }),
17 |   ],
18 | })
19 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: { browser: true, es2020: true },
 4 |   extends: [
 5 |     'eslint:recommended',
 6 |     'plugin:@typescript-eslint/recommended',
 7 |     'plugin:react-hooks/recommended',
 8 |   ],
 9 |   ignorePatterns: ['dist', '.eslintrc.cjs'],
10 |   parser: '@typescript-eslint/parser',
11 |   plugins: ['react-refresh'],
12 |   rules: {
13 |     'react-refresh/only-export-components': [
14 |       'warn',
15 |       { allowConstantExport: true },
16 |     ],
17 |   },
18 | }
19 | 


--------------------------------------------------------------------------------
/src/hooks/useMediaQuery.tsx:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from "react";
 2 | 
 3 | const useMediaQuery = (query: string) => {
 4 |   const [matches, setMatches] = useState(false);
 5 | 
 6 |   useEffect(() => {
 7 |     const media = window.matchMedia(query);
 8 |     if (media.matches !== matches) {
 9 |       setMatches(media.matches);
10 |     }
11 |     const listener = () => setMatches(media.matches);
12 |     window.addEventListener("resize", listener);
13 |     return () => window.removeEventListener("resize", listener);
14 |   }, [matches, query]);
15 | 
16 |   return matches;
17 | }
18 | 
19 | export default useMediaQuery;
20 | 


--------------------------------------------------------------------------------
/src/assets/logos/Apple.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="814" height="1000">
2 |   <path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"/>
3 | </svg>


--------------------------------------------------------------------------------
/src/assets/logos/Apple_dark.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="814" height="1000">
2 |   <path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z" fill="white"/>
3 | </svg>


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2020",
 4 |     "useDefineForClassFields": true,
 5 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 6 |     "module": "ESNext",
 7 |     "skipLibCheck": true,
 8 | 
 9 |     /* Bundler mode */
10 |     "moduleResolution": "bundler",
11 |     "allowImportingTsExtensions": true,
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "noEmit": true,
15 |     "jsx": "react-jsx",
16 | 
17 |     /* Linting */
18 |     "strict": true,
19 |     "noUnusedLocals": true,
20 |     "noUnusedParameters": true,
21 |     "noFallthroughCasesInSwitch": true
22 |   },
23 |   "include": ["src"],
24 |   "references": [{ "path": "./tsconfig.node.json" }]
25 | }
26 | 


--------------------------------------------------------------------------------
/src/assets/logos/Lumix_logo.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" width="500" height="114">
3 | <path
4 | d="m 285.4,103.6 28.8,-43.6 -0.1,8.6 0,34.9 17.2,0 0,-70.6 -17.1,0 -37.8,56.8 -37,-56.8 -17.1,0 0,70.6 17.2,0 0,-34.9 -0.1,-8.6 28.8,43.6 z M 10,10.4 10,99.1 c 0,3.1 2.1,4.6 4.8,4.6 l 80.9,0 0,-12.5 -63.3,0 c -1.7,0 -2.4,-1.1 -2.4,-3.2 l 0,-77.6 z m 179.4,93.3 c 4.7,0 5.9,-1.8 8.3,-4.8 2.4,-3 5.9,-11.3 5.9,-20.8 l 0,-45 -17.2,0 0,41.9 c 0,5.8 0,11.6 -2.2,13.8 -2.2,2.2 -5.4,2.7 -10.7,2.7 l -35.6,0 c -5.4,0 -8.5,-0.4 -10.7,-2.7 -2.2,-2.2 -2.2,-8 -2.2,-13.8 l 0,-41.9 -17.2,0 0,45 c 0,9.5 3.6,17.8 5.9,20.8 2.4,3 3.5,4.8 8.3,4.8 z m 182.3,0 -17.2,0 0,-70.6 17.2,0 z M 490,103.5 447.7,67 l 39.4,-33.9 -21.8,0 -28.6,24.5 -28.4,-24.6 -21.9,0 39.6,34.1 -42.4,36.7 21.8,0 31.5,-27.3 31.4,27.2 z"/>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/src/assets/logos/Lumix_logo_dark.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" width="500" height="114" fill="#fff">
3 | <path
4 | d="m 285.4,103.6 28.8,-43.6 -0.1,8.6 0,34.9 17.2,0 0,-70.6 -17.1,0 -37.8,56.8 -37,-56.8 -17.1,0 0,70.6 17.2,0 0,-34.9 -0.1,-8.6 28.8,43.6 z M 10,10.4 10,99.1 c 0,3.1 2.1,4.6 4.8,4.6 l 80.9,0 0,-12.5 -63.3,0 c -1.7,0 -2.4,-1.1 -2.4,-3.2 l 0,-77.6 z m 179.4,93.3 c 4.7,0 5.9,-1.8 8.3,-4.8 2.4,-3 5.9,-11.3 5.9,-20.8 l 0,-45 -17.2,0 0,41.9 c 0,5.8 0,11.6 -2.2,13.8 -2.2,2.2 -5.4,2.7 -10.7,2.7 l -35.6,0 c -5.4,0 -8.5,-0.4 -10.7,-2.7 -2.2,-2.2 -2.2,-8 -2.2,-13.8 l 0,-41.9 -17.2,0 0,45 c 0,9.5 3.6,17.8 5.9,20.8 2.4,3 3.5,4.8 8.3,4.8 z m 182.3,0 -17.2,0 0,-70.6 17.2,0 z M 490,103.5 447.7,67 l 39.4,-33.9 -21.8,0 -28.6,24.5 -28.4,-24.6 -21.9,0 39.6,34.1 -42.4,36.7 21.8,0 31.5,-27.3 31.4,27.2 z"/>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/png" href="/logo.png" />
 6 |     <meta name="description" content="A gallery of Boar :)">
 7 |     <meta name="keywords" content="Photo, Gallery">
 8 |     <meta name="author" content="Boar">
 9 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, maximum-scale=1.0, user-scalable=0" />
10 |     <title>Boar Gallery</title>
11 |     <!-- Google tag (gtag.js) -->
12 |     <script async src="https://www.googletagmanager.com/gtag/js?id=G-0F8RZ48NVV"></script>
13 |     <script>
14 |       window.dataLayer = window.dataLayer || [];
15 |       function gtag(){dataLayer.push(arguments);}
16 |       gtag('js', new Date());
17 | 
18 |       gtag('config', 'G-0F8RZ48NVV');
19 |     </script>
20 |   </head>
21 |   <body class="bg-background">
22 |     <div id="root"></div>
23 |     <script type="module" src="/src/main.tsx"></script>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/src/i18n/ja.ts:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   translation: {
 3 |     "sidebar.home": "ホーム",
 4 |     "sidebar.map": "マップ",
 5 |     "sidebar.shuin": "御朱印",
 6 |     "sidebar.lucky": "I'm Feeling Lucky",
 7 | 
 8 |     "map.countries": "国・地域",
 9 |     "map.select_country": "国・地域を選択してください",
10 | 
11 |     "unknown_lens": "レンズ不明",
12 | 
13 |     "prefecture.all_area": "{{name}}全域",
14 |     "prefecture.city": "市・区・町・村",
15 | 
16 |     "copyright.reserved": "© {{year}}。無断使用・無断転載を禁じます。",
17 |     "copyright.description": "当サイトに掲載されている写真やコンテンツの著作権は、各ページに表示された著作権者に帰属します。無断複製、転載、配布、改変、商用利用を禁じます。",
18 | 
19 |     "photo.enable_hdr": "HDR",
20 |     "photo.hdr_tooltip": "すべてのデバイスが高ダイナミックレンジ（HDR）をサポートしているわけではありません。",
21 | 
22 |     "shuin.basic_information": "御朱印情報",
23 |     "shuin.is_limited": "限定",
24 |     "shuin.price": "初穂料",
25 |     "shuin.type.written": "直書き",
26 |     "shuin.type.leaflet": "書き置き",
27 |     "shuin.yen": "円",
28 |     "shuin.genre.shrine": "神社",
29 |     "shuin.genre.temple": "お寺",
30 |   }
31 | }


--------------------------------------------------------------------------------
/src/i18n/zh_CN.ts:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   translation: {
 3 |     "sidebar.home": "主页",
 4 |     "sidebar.map": "地图",
 5 |     "sidebar.shuin": "御朱印",
 6 |     "sidebar.lucky": "手气不错",
 7 | 
 8 |     "map.countries": "国家 / 地区",
 9 |     "map.select_country": "请选择一个国家或地区",
10 | 
11 |     "unknown_lens": "未知镜头",
12 | 
13 |     "prefecture.all_area": "{{name}}全域",
14 |     "prefecture.city": "市区町村",
15 | 
16 |     "copyright.reserved": "版权所有 © {{year}}。保留一切权利。",
17 |     "copyright.description": "本网站的所有内容，包括但不限于文字、图像、音频和视频资料，均受到版权法的保护，归作品署名者所有，除非另有标注。未经作品署名者明确书面许可，任何人不得复制、分发、传播、展示或以其他任何方式使用这些内容。特定内容的使用应遵守网站上公布的任何附加许可条件。",
18 | 
19 |     "photo.enable_hdr": "HDR",
20 |     "photo.hdr_tooltip": "并非所有终端都支持高动态范围（HDR）的显示。",
21 | 
22 |     "shuin.basic_information": "基本信息",
23 |     "shuin.is_limited": "限定",
24 |     "shuin.price": "价格",
25 |     "shuin.type.written": "手写",
26 |     "shuin.type.leaflet": "预印",
27 |     "shuin.yen": "日元",
28 |     "shuin.genre.shrine": "神社",
29 |     "shuin.genre.temple": "寺院",
30 |   }
31 | }


--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | import {
 4 |   BrowserRouter,
 5 | } from "react-router-dom";
 6 | import './index.css'
 7 | import 'unfonts.css'
 8 | import App from "./App.tsx";
 9 | import i18n from "i18next";
10 | import { initReactI18next } from "react-i18next";
11 | import LanguageDetector from 'i18next-browser-languagedetector';
12 | import en from "./i18n/en.ts";
13 | import zh_CN from "./i18n/zh_CN.ts";
14 | import ja from "./i18n/ja.ts";
15 | 
16 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment
17 | // @ts-expect-error
18 | window.global = globalThis;
19 | 
20 | i18n
21 |   .use(LanguageDetector)
22 |   .use(initReactI18next)
23 |   .init({
24 |     resources: {
25 |       en: en,
26 |       "zh-CN": zh_CN,
27 |       ja: ja,
28 |     },
29 |     interpolation: {
30 |       escapeValue: false
31 |     }
32 |   });
33 | 
34 | ReactDOM.createRoot(document.getElementById('root')!).render(
35 |   <React.StrictMode>
36 |     <BrowserRouter>
37 |       <App/>
38 |     </BrowserRouter>
39 |   </React.StrictMode>,
40 | )
41 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @import 'mapbox-gl/dist/mapbox-gl.css' layer(base);
 2 | @import 'ol/ol.css' layer(base);
 3 | 
 4 | @import 'tailwindcss';
 5 | 
 6 | @config '../tailwind.config.js';
 7 | 
 8 | /*
 9 |   The default border color has changed to `currentcolor` in Tailwind CSS v4,
10 |   so we've added these compatibility styles to make sure everything still
11 |   looks the same as it did with Tailwind CSS v3.
12 | 
13 |   If we ever want to remove these styles, we need to add an explicit border
14 |   color utility to any element that depends on these defaults.
15 | */
16 | @layer base {
17 |   *,
18 |   ::after,
19 |   ::before,
20 |   ::backdrop,
21 |   ::file-selector-button {
22 |     border-color: var(--color-gray-200, currentcolor);
23 |   }
24 | }
25 | 
26 | /*html, body, #root, #root > div {*/
27 | /*    height: 100%;*/
28 | /*}*/
29 | 
30 | /*#root > div > main {*/
31 | /*    height: 100%;*/
32 | /*}*/
33 | 
34 | .text-logo {
35 |     font-family: "Dancing Script Variable", cursive;
36 |     font-optical-sizing: auto;
37 |     font-weight: 700;
38 |     font-style: normal;
39 |     font-size: 1.5em;
40 | }
41 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import { HeroUIProvider } from "@heroui/react";
 2 | import { Route, Routes, useNavigate } from "react-router-dom";
 3 | import Root from "./routes/root.tsx";
 4 | import Index from "./routes";
 5 | import Map from "./routes/map_openlayers.tsx";
 6 | import Photo from "./routes/photo.tsx";
 7 | import Prefecture from "./routes/prefecture.tsx";
 8 | import "./App.css"
 9 | import Mapkit from "./routes/cluster.tsx";
10 | import ShuinList from "./routes/shuin_list.tsx";
11 | import ShuinPage from "./routes/shuin.tsx";
12 | 
13 | function App() {
14 |   const navigate = useNavigate();
15 | 
16 |   return (
17 |     <HeroUIProvider navigate={navigate}>
18 |       <Routes>
19 |         <Route path="/" element={<Root/>}>
20 |           <Route path="" element={<Index/>}/>
21 |           <Route path="map" element={<Map/>}/>
22 |           <Route path="shuin" element={<ShuinList/>}/>
23 |           <Route path="cluster" element={<Mapkit/>}/>
24 |           <Route path="photo/:id" element={<Photo/>}/>
25 |           <Route path="shuin/:id" element={<ShuinPage/>}/>
26 |           <Route path="prefecture/:prefectureId" element={<Prefecture/>}/>
27 |           <Route path="prefecture/:prefectureId/city/:cityId" element={<Prefecture/>}/>
28 |         </Route>
29 |       </Routes>
30 |     </HeroUIProvider>
31 |   )
32 | }
33 | 
34 | export default App
35 | 


--------------------------------------------------------------------------------
/src/i18n/en.ts:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   translation: {
 3 |     "sidebar.home": "Timeline",
 4 |     "sidebar.map": "Map",
 5 |     "sidebar.shuin": "Shuin",
 6 |     "sidebar.lucky": "I'm Feeling Lucky",
 7 | 
 8 |     "map.countries": "Country / Region",
 9 |     "map.select_country": "Select a country or region",
10 | 
11 |     "unknown_lens": "Unknown lens",
12 | 
13 |     "prefecture.all_area": "All of {{name}}",
14 |     "prefecture.city": "Municipalities",
15 | 
16 |     "copyright.reserved": "© {{year}}. All rights reserved.",
17 |     "copyright.description": "All contents of this website, including but not limited to text, images, audio, and video materials, are protected by copyright laws and are the property of the copyright holder, unless otherwise indicated. Without the explicit written permission of the copyright holder, no one may copy, distribute, transmit, display, or use these contents in any other way. The use of specific content must comply with any additional license conditions published on the website.",
18 | 
19 |     "photo.enable_hdr": "HDR",
20 |     "photo.hdr_tooltip": "Not all devices support High Dynamic Range (HDR) display.",
21 | 
22 |     "shuin.basic_information": "Information",
23 |     "shuin.is_limited": "LIMITED",
24 |     "shuin.price": "Price",
25 |     "shuin.type.written": "Hand-written",
26 |     "shuin.type.leaflet": "Pre-printed",
27 |     "shuin.yen": "yen",
28 |     "shuin.genre.shrine": "Shrine",
29 |     "shuin.genre.temple": "Temple",
30 |   }
31 | }


--------------------------------------------------------------------------------
/src/components/manufacture_icon.tsx:
--------------------------------------------------------------------------------
 1 | import useDarkMode from "use-dark-mode";
 2 | import sonyLogo from '../assets/logos/SONY.svg';
 3 | import sonyLogoDark from '../assets/logos/SONY_dark.svg';
 4 | import sigmaLogo from '../assets/logos/SIGMA.svg';
 5 | import sigmaLogoDark from '../assets/logos/SIGMA_dark.svg';
 6 | import appleLogo from '../assets/logos/Apple.svg';
 7 | import appleLogoDark from '../assets/logos/Apple_dark.svg';
 8 | import panasonicLogo from '../assets/logos/Panasonic.svg';
 9 | import panasonicLogoDark from '../assets/logos/Panasonic_dark.svg';
10 | 
11 | const logos: { [k: string]: { light: string, dark: string, style: string } } = {
12 |   'SONY': {
13 |     light: sonyLogo,
14 |     dark: sonyLogoDark,
15 |     style: 'h-[0.7rem]',
16 |   },
17 |   'SIGMA': {
18 |     light: sigmaLogo,
19 |     dark: sigmaLogoDark,
20 |     style: 'h-[0.7rem]',
21 |   },
22 |   'Apple': {
23 |     light: appleLogo,
24 |     dark: appleLogoDark,
25 |     style: 'h-4',
26 |   },
27 |   'Panasonic': {
28 |     light: panasonicLogo,
29 |     dark: panasonicLogoDark,
30 |     style: 'h-[0.7rem]',
31 |   },
32 | }
33 | 
34 | export interface ManufactureIconProps {
35 |   name?: string
36 | }
37 | 
38 | export default function ManufactureIcon(props: ManufactureIconProps) {
39 |   const darkmode = useDarkMode()
40 | 
41 |   if (!props.name) return;
42 | 
43 |   const manufacture = logos[props.name]
44 |   if (!manufacture) return props.name
45 | 
46 |   return (
47 |     <img alt={props.name} src={darkmode.value ? manufacture.dark : manufacture.light}
48 |          className={`${manufacture.style} mr-2 inline`}/>
49 |   );
50 | }
51 | 


--------------------------------------------------------------------------------
/src/components/camera_name.tsx:
--------------------------------------------------------------------------------
 1 | import sonyAlpha from '../assets/logos/Sony_Alpha_logo.svg';
 2 | import lumix from '../assets/logos/Lumix_logo.svg';
 3 | import lumixDark from '../assets/logos/Lumix_logo_dark.svg';
 4 | import { Camera } from "../models/gallery.ts";
 5 | import useDarkMode from "use-dark-mode";
 6 | import { Tooltip } from "@heroui/react";
 7 | import { JSX } from "react";
 8 | 
 9 | export interface CameraNameProps {
10 |   camera?: Camera
11 | }
12 | 
13 | export default function CameraName(props: CameraNameProps) {
14 |   const darkmode = useDarkMode()
15 | 
16 |   if (!props.camera) return;
17 |   if (!props.camera?.general_name) return props.camera?.model
18 | 
19 |   let cameraName: JSX.Element
20 | 
21 |   if (props.camera.manufacture.name === 'SONY' && props.camera.general_name.startsWith('α')) {
22 |     cameraName = <Tooltip content={props.camera.model} showArrow placement='right'>
23 |       <div className='flex items-center'>
24 |         <img alt='α' src={sonyAlpha} className='h-[0.7rem] mr-1 inline'/>
25 |         {props.camera.general_name.replace('α', '')}
26 |       </div>
27 |     </Tooltip>
28 |   } else if (props.camera.manufacture.name === 'Panasonic' && props.camera.general_name.startsWith('Lumix')) {
29 |     cameraName = <Tooltip content={props.camera.model} showArrow placement='right'>
30 |       <div className='flex items-center'>
31 |         <img alt='Lumix' src={darkmode.value ? lumixDark : lumix} className='h-[0.8rem] mr-1 inline'/>
32 |         {props.camera.general_name.replace('Lumix', '')}
33 |       </div>
34 |     </Tooltip>
35 |   } else {
36 |     cameraName = <span>{props.camera.general_name}</span>
37 |   }
38 | 
39 |   return cameraName;
40 | }
41 | 


--------------------------------------------------------------------------------
/src/assets/logos/SIGMA.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <!-- Creator: CorelDRAW X8 -->
 4 | <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1058px" height="225px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
 5 | viewBox="0 0 1058 225"
 6 |  xmlns:xlink="http://www.w3.org/1999/xlink"
 7 |  enable-background="new 0 0 190 62">
 8 |  <defs>
 9 |   <style type="text/css">
10 |    <![CDATA[
11 |     .fil0 {fill:#010101}
12 |    ]]>
13 |   </style>
14 |  </defs>
15 |  <g id="Слой_x0020_1">
16 |   <metadata id="CorelCorpID_0Corel-Layer"/>
17 |   <g id="_929688768">
18 |    <rect class="fil0" x="241" y="12" width="44.6515" height="201.822"/>
19 |    <polygon class="fil0" points="731,12 700,124 699,124 667,12 609,12 577,214 621,214 641,69 642,69 681,214 718,214 757,69 757,69 778,214 823,214 790,12 "/>
20 |    <path class="fil0" d="M1005 214l47 0 -80 -202 -62 0 -80 202 44 0 16 -41 99 0 16 41zm-65 -166l0 0 34 87 -69 0 35 -87z"/>
21 |    <path class="fil0" d="M433 94l0 41 71 0 0 3c0,27 -24,46 -62,46 -38,0 -68,-21 -68,-70 0,-51 32,-70 69,-70 29,0 50,5 74,17l21 -34c-25,-15 -62,-24 -96,-24 -61,0 -116,33 -116,112 0,69 48,108 114,108 74,0 109,-35 110,-98 0,-9 0,-18 -1,-31l-116 0 0 0z"/>
22 |    <path class="fil0" d="M151 96c-28,-6 -47,-3 -75,-9 -18,-3 -23,-10 -23,-18 0,-17 22,-26 51,-26 23,0 46,6 68,16l22 -37c-24,-12 -57,-20 -95,-20 -36,0 -92,17 -92,70 0,30 20,49 47,55 25,6 41,5 71,9 20,3 28,10 28,21 0,16 -21,26 -51,26 -26,0 -52,-5 -78,-16l-18 38c32,14 65,20 93,20 61,0 102,-27 102,-71 0,-30 -18,-51 -50,-58z"/>
23 |   </g>
24 |  </g>
25 | </svg>
26 | 


--------------------------------------------------------------------------------
/src/assets/logos/SIGMA_dark.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <!-- Creator: CorelDRAW X8 -->
 4 | <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1058px" height="225px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
 5 | viewBox="0 0 1058 225"
 6 |  xmlns:xlink="http://www.w3.org/1999/xlink"
 7 |  enable-background="new 0 0 190 62">
 8 |  <defs>
 9 |   <style type="text/css">
10 |    <![CDATA[
11 |     .fil0 {fill:#fefefe}
12 |    ]]>
13 |   </style>
14 |  </defs>
15 |  <g id="Слой_x0020_1">
16 |   <metadata id="CorelCorpID_0Corel-Layer"/>
17 |   <g id="_929688768">
18 |    <rect class="fil0" x="241" y="12" width="44.6515" height="201.822"/>
19 |    <polygon class="fil0" points="731,12 700,124 699,124 667,12 609,12 577,214 621,214 641,69 642,69 681,214 718,214 757,69 757,69 778,214 823,214 790,12 "/>
20 |    <path class="fil0" d="M1005 214l47 0 -80 -202 -62 0 -80 202 44 0 16 -41 99 0 16 41zm-65 -166l0 0 34 87 -69 0 35 -87z"/>
21 |    <path class="fil0" d="M433 94l0 41 71 0 0 3c0,27 -24,46 -62,46 -38,0 -68,-21 -68,-70 0,-51 32,-70 69,-70 29,0 50,5 74,17l21 -34c-25,-15 -62,-24 -96,-24 -61,0 -116,33 -116,112 0,69 48,108 114,108 74,0 109,-35 110,-98 0,-9 0,-18 -1,-31l-116 0 0 0z"/>
22 |    <path class="fil0" d="M151 96c-28,-6 -47,-3 -75,-9 -18,-3 -23,-10 -23,-18 0,-17 22,-26 51,-26 23,0 46,6 68,16l22 -37c-24,-12 -57,-20 -95,-20 -36,0 -92,17 -92,70 0,30 20,49 47,55 25,6 41,5 71,9 20,3 28,10 28,21 0,16 -21,26 -51,26 -26,0 -52,-5 -78,-16l-18 38c32,14 65,20 93,20 61,0 102,-27 102,-71 0,-30 -18,-51 -50,-58z"/>
23 |   </g>
24 |  </g>
25 | </svg>
26 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "boar-gallery",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "tsc && vite build",
 9 |     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "@fontsource-variable/dancing-script": "^5.1.1",
14 |     "@heroui/react": "2.8.5",
15 |     "@uiw/react-baidu-map": "^2.7.1",
16 |     "axios": "^1.12.2",
17 |     "framer-motion": "12.23.24",
18 |     "i18next": "^25.6.0",
19 |     "i18next-browser-languagedetector": "^8.2.0",
20 |     "localforage": "^1.10.0",
21 |     "mapbox-gl": "^3.16.0",
22 |     "mapkit-react": "^1.16.1",
23 |     "masonic": "^4.1.0",
24 |     "match-sorter": "^8.0.0",
25 |     "mini-virtual-list": "^0.3.2",
26 |     "moment": "^2.30.1",
27 |     "ol": "^10.3.1",
28 |     "react": "19.2.0",
29 |     "react-dom": "19.2.0",
30 |     "react-i18next": "^16.2.0",
31 |     "react-icons": "^5.5.0",
32 |     "react-map-gl": "^8.1.0",
33 |     "react-medium-image-zoom": "^5.4.0",
34 |     "react-router-dom": "^7.9.4",
35 |     "react-simple-maps": "^3.0.0",
36 |     "sort-by": "^1.2.0",
37 |     "use-dark-mode": "^2.3.1"
38 |   },
39 |   "devDependencies": {
40 |     "@tailwindcss/postcss": "^4.1.16",
41 |     "@types/apple-mapkit-js-browser": "^5.78.1",
42 |     "@types/mapbox-gl": "^3.4.1",
43 |     "@types/react": "^19.0.7",
44 |     "@types/react-dom": "^19.0.3",
45 |     "@types/react-simple-maps": "^3.0.6",
46 |     "@typescript-eslint/eslint-plugin": "^8.20.0",
47 |     "@typescript-eslint/parser": "^8.20.0",
48 |     "@vitejs/plugin-react-swc": "^3.7.2",
49 |     "eslint": "^9.18.0",
50 |     "eslint-plugin-react-hooks": "^5.1.0",
51 |     "eslint-plugin-react-refresh": "^0.4.18",
52 |     "postcss": "^8.5.1",
53 |     "tailwindcss": "4.1.16",
54 |     "typescript": "^5.7.3",
55 |     "unplugin-fonts": "^1.3.1",
56 |     "vite": "^7.1.12"
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/src/routes/prefecture.tsx:
--------------------------------------------------------------------------------
 1 | import PhotoMasonry from "../components/photo_masonry.tsx";
 2 | import { useNavigate, useParams } from "react-router-dom";
 3 | import { useEffect, useState } from "react";
 4 | import axios from "axios";
 5 | import { Prefecture, Response } from "../models/gallery.ts";
 6 | import { Chip, Select, SelectItem } from "@heroui/react";
 7 | import { useTranslation } from "react-i18next";
 8 | 
 9 | export default function PrefecturePage() {
10 |   const params = useParams()
11 |   const [prefecture, setPrefecture] = useState<Prefecture>()
12 |   const { t } = useTranslation()
13 |   const navigate = useNavigate();
14 | 
15 |   useEffect(() => {
16 |     axios.get<Response<Prefecture>>('https://api.gallery.boar.ac.cn/geo/prefecture', {
17 |       params: {
18 |         id: params.prefectureId,
19 |         with_cities: true
20 |       }
21 |     }).then((res) => {
22 |       setPrefecture(res.data.payload)
23 |     })
24 |   }, [params.prefectureId]);
25 | 
26 |   if (!prefecture) return;
27 | 
28 |   return <div className='px-2 pt-4 pb-12'>
29 |     <div className='text-5xl mb-4 md:mb-6 ml-2 pt-2'>
30 |       {prefecture.name}
31 |     </div>
32 | 
33 |     <div className='mb-8 md:mb-12'>
34 |       <Select label={t('prefecture.city')} selectedKeys={[params.cityId ?? '0']} onChange={(e) => {
35 |         if (e.target.value === '0') {
36 |           navigate(`/prefecture/${params.prefectureId}`)
37 |         } else {
38 |           navigate(`/prefecture/${params.prefectureId}/city/${e.target.value}`)
39 |         }
40 |       }}>
41 |         {[{
42 |           id: 0,
43 |           name: t('prefecture.all_area', { name: prefecture.name }),
44 |           photos_count: prefecture.cities.reduce((a, o) => a + o.photos_count, 0)
45 |         }, ...prefecture.cities].map((c) => (
46 |           <SelectItem key={c.id} textValue={c.name} endContent={<Chip>{c.photos_count}</Chip>}>
47 |             {c.name}
48 |           </SelectItem>
49 |         ))}
50 |       </Select>
51 |     </div>
52 | 
53 |     <div>
54 |       {
55 |         !params.cityId ?
56 |           <PhotoMasonry prefectureId={params.prefectureId} key={'0'}/>
57 |           :
58 |           <PhotoMasonry cityId={params.cityId} key={params.cityId}/>
59 |       }
60 |     </div>
61 |   </div>
62 | }
63 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const { heroui } = require("@heroui/react");
 2 | 
 3 | const generateGrid = (size) => {
 4 |   const gridColumn = {};
 5 |   const gridTemplateColumns = {};
 6 |   const gridRow = {};
 7 |   const gridTemplateRows = {};
 8 |   const gridRowStart = {};
 9 |   const gridRowEnd = {};
10 |   const gridColumnStart = {};
11 |   const gridColumnEnd = {};
12 |   for (let i = 1; i <= size; i++) {
13 |     gridRow[`span-${i}`] = `span ${i} / span ${i}`;
14 |     gridColumn[`span-${i}`] = `span ${i} / span ${i}`;
15 |     gridTemplateColumns[i] = `repeat(${i}, minmax(0, 1fr))`;
16 |     gridTemplateRows[i] = `repeat(${i}, minmax(0, 1fr))`;
17 |     gridRowStart[i] = `${i}`;
18 |     gridRowEnd[i] = `${i}`;
19 |     gridColumnStart[i] = `${i}`;
20 |     gridColumnEnd[i] = `${i}`;
21 |   }
22 |   return {
23 |     gridColumn,
24 |     gridTemplateColumns,
25 |     gridRow,
26 |     gridTemplateRows,
27 |     gridRowStart,
28 |     gridRowEnd,
29 |     gridColumnStart,
30 |     gridColumnEnd,
31 |   };
32 | }
33 | 
34 | /** @type {import('tailwindcss').Config} */
35 | export default {
36 |   content: [
37 |     "./index.html",
38 |     "./src/**/*.{js,ts,jsx,tsx}",
39 |     "./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
40 |   ],
41 |   theme: {
42 |     extend: {
43 |       ...generateGrid(24),
44 |     },
45 |   },
46 |   darkMode: "class",
47 |   plugins: [heroui({
48 |     themes: {
49 |       light: {
50 |         colors: {
51 |           primary: {
52 |             100: "#E9EEF4",
53 |             200: "#D5DEEA",
54 |             300: "#A7B2C2",
55 |             400: "#6E7685",
56 |             500: "#282C34",
57 |             600: "#1D212C",
58 |             700: "#141825",
59 |             800: "#0C101E",
60 |             900: "#070B18",
61 |             DEFAULT: "#282C34",
62 |           }
63 |         }
64 |       },
65 |       dark: {
66 |         colors: {
67 |           primary: {
68 |             100: "#E9EEF4",
69 |             200: "#D5DEEA",
70 |             300: "#A7B2C2",
71 |             400: "#6E7685",
72 |             500: "#282C34",
73 |             600: "#1D212C",
74 |             700: "#141825",
75 |             800: "#0C101E",
76 |             900: "#070B18",
77 |             DEFAULT: "#6E7685",
78 |           }
79 |         }
80 |       }
81 |     }
82 |   })],
83 | }
84 | 
85 | 


--------------------------------------------------------------------------------
/src/models/gallery.ts:
--------------------------------------------------------------------------------
  1 | export interface Response<T> {
  2 |   code: number
  3 |   payload: T
  4 |   success: boolean
  5 | }
  6 | 
  7 | export interface Photo {
  8 |   id: number
  9 |   title: string
 10 |   description: string
 11 |   author?: Author
 12 |   metadata: Metadata
 13 |   thumb_file: File
 14 |   medium_file?: File
 15 |   large_file?: File
 16 |   hdr_file?: File
 17 | }
 18 | 
 19 | export interface Shuin {
 20 |   id: number
 21 |   place: Place
 22 |   is_limited: boolean
 23 |   price: number
 24 |   type: string
 25 |   thumb_file: File
 26 |   medium_file?: File
 27 |   large_file?: File
 28 |   hdr_file?: File
 29 |   date: string
 30 |   genre: string
 31 | }
 32 | 
 33 | export interface PhotoClusterItem {
 34 |   id: number
 35 |   coordinate?: Coordinate
 36 |   thumb_file: File
 37 |   clustering_identifier: string
 38 | }
 39 | 
 40 | export interface Author {
 41 |   id: number
 42 |   name: string
 43 | }
 44 | 
 45 | export interface Metadata {
 46 |   camera?: Camera
 47 |   lens?: Lens
 48 |   has_location?: boolean
 49 |   location?: Coordinate
 50 |   datetime: string
 51 |   exposure_time: number
 52 |   exposure_time_rat: string
 53 |   f_number: number
 54 |   photographic_sensitivity: number
 55 |   focal_length: number
 56 |   city?: City
 57 |   place?: Place
 58 |   timezone: string
 59 |   altitude?: number
 60 | }
 61 | 
 62 | export interface Camera {
 63 |   id: number
 64 |   model: string
 65 |   manufacture: Manufacture
 66 |   general_name?: string
 67 | }
 68 | 
 69 | export interface Manufacture {
 70 |   id: number
 71 |   name: string
 72 | }
 73 | 
 74 | export interface Place {
 75 |   id: number
 76 |   name: string
 77 |   geom: Coordinate
 78 |   city?: City
 79 | }
 80 | 
 81 | export interface Coordinate {
 82 |   longitude: number
 83 |   latitude: number
 84 | }
 85 | 
 86 | export interface Lens {
 87 |   id: number
 88 |   model: string
 89 |   manufacture: Manufacture
 90 |   min_focal_length: number
 91 |   max_focal_length: number
 92 |   min_f_number_in_min_focal_length: number
 93 |   min_f_number_in_max_focal_length: number
 94 | }
 95 | 
 96 | export interface City {
 97 |   id: number
 98 |   name: string
 99 |   prefecture: Prefecture
100 |   photos_count: number
101 | }
102 | 
103 | export interface Prefecture {
104 |   id: number
105 |   name: string
106 |   country: Country
107 |   photos_count?: number
108 |   cities: City[]
109 | }
110 | 
111 | export interface Country {
112 |   id: number
113 |   name: string
114 |   code: string
115 |   center: [number, number]
116 |   extent: [number, number, number, number]
117 |   zoom: [number, number, number]
118 | }
119 | 
120 | export interface File {
121 |   height: number
122 |   url: string
123 |   width: number
124 | }
125 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
  1 | [data-rmiz-ghost] {
  2 |     position: absolute;
  3 |     pointer-events: none;
  4 | }
  5 | 
  6 | [data-rmiz-btn-zoom],
  7 | [data-rmiz-btn-unzoom] {
  8 |     background-color: rgba(0, 0, 0, 0.7);
  9 |     border-radius: 50%;
 10 |     border: none;
 11 |     box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
 12 |     color: #fff;
 13 |     height: 40px;
 14 |     margin: 0;
 15 |     outline-offset: 2px;
 16 |     padding: 9px;
 17 |     touch-action: manipulation;
 18 |     width: 40px;
 19 |     -webkit-appearance: none;
 20 |     -moz-appearance: none;
 21 |     appearance: none;
 22 | }
 23 | 
 24 | [data-rmiz-btn-zoom]:not(:focus):not(:active) {
 25 |     position: absolute;
 26 |     clip: rect(0 0 0 0);
 27 |     clip-path: inset(50%);
 28 |     height: 1px;
 29 |     overflow: hidden;
 30 |     pointer-events: none;
 31 |     white-space: nowrap;
 32 |     width: 1px;
 33 | }
 34 | 
 35 | [data-rmiz-btn-zoom] {
 36 |     position: absolute;
 37 |     inset: 10px 10px auto auto;
 38 |     cursor: zoom-in;
 39 | }
 40 | 
 41 | [data-rmiz-btn-unzoom] {
 42 |     position: absolute;
 43 |     inset: 20px 20px auto auto;
 44 |     cursor: zoom-out;
 45 |     z-index: 1;
 46 | }
 47 | 
 48 | [data-rmiz-content="found"] img,
 49 | [data-rmiz-content="found"] svg,
 50 | [data-rmiz-content="found"] [role="img"],
 51 | [data-rmiz-content="found"] [data-zoom] {
 52 |     cursor: zoom-in;
 53 | }
 54 | 
 55 | [data-rmiz-modal]::backdrop {
 56 |     display: none;
 57 | }
 58 | 
 59 | [data-rmiz-modal][open] {
 60 |     position: fixed;
 61 |     width: 100vw;
 62 |     width: 100dvw;
 63 |     height: 100vh;
 64 |     height: 100dvh;
 65 |     max-width: none;
 66 |     max-height: none;
 67 |     margin: 0;
 68 |     padding: 0;
 69 |     border: 0;
 70 |     background: transparent;
 71 |     overflow: hidden;
 72 | }
 73 | 
 74 | [data-rmiz-modal-overlay] {
 75 |     position: absolute;
 76 |     inset: 0;
 77 |     transition: background-color 0.3s;
 78 | }
 79 | 
 80 | [data-rmiz-modal-overlay="hidden"] {
 81 |     background-color: rgba(255, 255, 255, 0);
 82 | }
 83 | 
 84 | [data-rmiz-modal-overlay="visible"] {
 85 |     background-color: rgba(255, 255, 255, 1);
 86 | }
 87 | 
 88 | /* If data-rmiz-modal-overlay inside .dark */
 89 | .dark [data-rmiz-modal-overlay="visible"] {
 90 |     background-color: rgba(0, 0, 0, 255);
 91 | }
 92 | 
 93 | [data-rmiz-modal-content] {
 94 |     position: relative;
 95 |     width: 100%;
 96 |     height: 100%;
 97 | }
 98 | 
 99 | [data-rmiz-modal-img] {
100 |     position: absolute;
101 |     cursor: zoom-out;
102 |     image-rendering: high-quality;
103 |     transform-origin: top left;
104 |     transition: transform 0.3s;
105 | }
106 | 
107 | @media (prefers-reduced-motion: reduce) {
108 |     [data-rmiz-modal-overlay],
109 |     [data-rmiz-modal-img] {
110 |         transition-duration: 0.01ms !important;
111 |     }
112 | }


--------------------------------------------------------------------------------
/src/routes/cluster.tsx:
--------------------------------------------------------------------------------
 1 | import { useContext, useEffect, useRef, useState } from "react";
 2 | import { Country, PhotoClusterItem, Response } from "../models/gallery.ts";
 3 | import axios from "axios";
 4 | import { Card } from "@heroui/react";
 5 | import useDarkMode from "use-dark-mode";
 6 | import { Annotation, ColorScheme, Map, MapType } from "mapkit-react";
 7 | import { MapTokenContext } from "../contexts/map_token.tsx";
 8 | 
 9 | export default function ClusterPage() {
10 |   const darkmode = useDarkMode()
11 |   const [clusterItems, setClusterItems] = useState<PhotoClusterItem[]>([])
12 |   const [country, setCountry] = useState<Country>()
13 |   // const [countries, setCountries] = useState<Country[]>([])
14 |   const token = useContext(MapTokenContext)
15 |   const appleRef = useRef<mapkit.Map | null>(null)
16 | 
17 |   useEffect(() => {
18 |     axios.get<Response<Country[]>>('https://api.gallery.boar.ac.cn/geo/countries').then((res) => {
19 |       // setCountries(res.data.payload)
20 |       setCountry(res.data.payload[0])
21 |     })
22 |   }, []);
23 | 
24 |   useEffect(() => {
25 |     axios.get<Response<PhotoClusterItem[]>>(`https://api.gallery.boar.ac.cn/photos/cluster?country_id=${country?.id}`).then((res) => {
26 |       setClusterItems(res.data.payload)
27 |     })
28 |   }, [country])
29 | 
30 |   if (!token?.token) return;
31 |   if (!country) return;
32 | 
33 |   return <div className='scrollbar-hide box-border relative' style={{ height: 'calc(100dvh - 4rem)' }}>
34 |     <Map
35 |       token={token!.token.token}
36 |       allowWheelToZoom
37 |       ref={appleRef}
38 |       colorScheme={darkmode.value ? ColorScheme.Dark : ColorScheme.Light}
39 |       mapType={MapType.MutedStandard}
40 |       showsZoomControl
41 |       initialRegion={{
42 |         centerLatitude: (country?.extent[3] + country?.extent[1]) / 2,
43 |         centerLongitude: (country?.extent[2] + country?.extent[0]) / 2,
44 |         latitudeDelta: country?.extent[3] - country?.extent[1],
45 |         longitudeDelta: country?.extent[2] - country?.extent[0],
46 |       }}
47 |     >
48 |       {
49 |         clusterItems.map((item) => {
50 |           if (!item.coordinate) return null;
51 | 
52 |           return <Annotation
53 |             key={item.id}
54 |             latitude={item.coordinate.latitude}
55 |             longitude={item.coordinate.longitude}
56 |             clusteringIdentifier='1'
57 |           >
58 |             <Card
59 |               radius='sm'
60 |               className='border-none'
61 |             >
62 |               <img
63 |                 className='object-cover w-[72px] h-[72px]'
64 |                 src={item.thumb_file.url}
65 |                 width={item.thumb_file.width}
66 |                 height={item.thumb_file.height}
67 |               />
68 |             </Card>
69 |           </Annotation>
70 |         })
71 |       }
72 |     </Map>
73 |   </div>
74 | }
75 | 


--------------------------------------------------------------------------------
/src/assets/logos/SONY.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg width="1280" height="225.28" version="1.1" viewBox="0 0 338.67 59.605" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
 3 |   <defs>
 4 |     <style>
 5 |       .cls-1{fill:#fff}
 6 |     </style>
 7 |   </defs>
 8 |   <g transform="translate(647.97 -300.06)" fill="#0f0f0f" stroke-width=".677">
 9 |     <path d="M-390.37 303.388v6.623h6.469c2.824 0 4.68 1.782 5.737 2.933.847.948 19.474 22.068 19.92 22.623.448.556.448.562.448.915v10.465a7.41 7.41 0 0 1-.143 1.429 2.283 2.283 0 0 1-1.435 1.274 14.78 14.78 0 0 1-1.843.115l-6.475-.008v6.624h36.318v-6.624h-6.834a13.39 13.39 0 0 1-1.83-.116 2.256 2.256 0 0 1-1.428-1.273 7.45 7.45 0 0 1-.148-1.429V336.48a1.422 1.422 0 0 1 .243-.975l20.15-22.988c1.85-2.06 2.812-2.507 5.237-2.507h6.685v-6.624h-29.931v6.61h4.517a1.267 1.267 0 0 1 1.084 2.033c-.095.135-12.531 14.759-12.687 14.901-.156.142-.256.108-.372-.047-.115-.156-12.402-14.854-12.402-14.854-.867-1.064-.19-2.032.827-2.032h4.402v-6.61z"/>
10 |     <path d="M-479.445 303.388v6.623h5.797c4.186 0 4.471 2.331 4.471 4.363v31.002c0 1.855.108 4.402-2.56 4.402h-7.154v6.617h30.542v-6.617h-7.45c-2.974 0-3.11-1.36-3.143-4.253v-26.559l41.947 37.43h10.668l-.563-42.273c.055-3.089.244-4.118 3.441-4.118h6.685v-6.617h-31.157v6.617h6.842c3.143 0 3.67 1.212 3.71 4.118l.374 22.122-36.414-32.857z"/>
11 |     <path d="M-616.978 300.055c-6.563 0-14.02 1.233-20.32 4.064-5.88 2.628-10.668 6.848-10.668 13.844a14.346 14.346 0 0 0 3.895 9.863c1.7 1.571 4.443 4.24 11.61 5.811 3.203.678 10.051 1.768 16.872 2.486 6.82.718 13.432 1.355 16.14 2.08 2.155.548 5.778 1.294 5.778 5.358s-3.813 5.282-4.477 5.547c-.663.264-5.243 2.364-13.466 2.364a57.262 57.262 0 0 1-16.032-2.757c-3.068-1.098-6.285-2.54-9.286-6.205a10.654 10.654 0 0 1-1.931-5.879h-7.45v20.862h8.277v-2.824a1.179 1.179 0 0 1 1.788-1.016 65.2 65.2 0 0 0 12.11 3.915c4.349.907 7.16 1.565 12.565 1.565a53.61 53.61 0 0 0 16.838-2.378 29.39 29.39 0 0 0 10.004-4.938 13.71 13.71 0 0 0 5.358-10.979 15.362 15.362 0 0 0-4.327-10.798 19.053 19.053 0 0 0-5.338-3.65 39.32 39.32 0 0 0-6.584-2.296c-4.294-1.05-13.939-2.364-18.551-2.825-4.837-.5-13.23-1.199-16.582-2.235-1.016-.319-3.089-1.3-3.089-3.705 0-1.713.948-3.163 2.818-4.335 2.973-1.862 8.975-3.021 15.233-3.021a44.182 44.182 0 0 1 17.652 3.447 19.277 19.277 0 0 1 4.199 2.507 12.625 12.625 0 0 1 4.138 6.922h6.686V302.69h-7.45v2.106c0 .678-.678 1.572-2.033.834-3.36-1.748-12.801-5.527-24.377-5.575z"/>
12 |     <path d="m-527.31 300.06c-11.738 0-24.202 4.064-31.246 10.464a26.016 26.016 0 0 0-8.501 19.298 25.637 25.637 0 0 0 8.5 19.365c7.587 6.82 18.967 10.478 31.247 10.478 12.3 0 23.923-3.617 31.327-10.478a26.863 26.863 0 0 0 8.384-19.365 25.773 25.773 0 0 0-8.384-19.283c-7.946-7.207-18.343-10.479-31.327-10.479zm0 7.748c6.421 0 12.605 2.31 16.77 6.409 4.03 3.969 6.136 9.577 6.136 15.578 0 6.286-1.916 11.38-6.135 15.579-4.22 4.2-10.262 6.448-16.771 6.448-6.462 0-12.633-2.296-16.798-6.448a21.79 21.79 0 0 1-6.096-15.579c0-5.974 2.079-11.602 6.096-15.578 4.165-4.119 10.377-6.409 16.798-6.409z"/>
13 |   </g>
14 | </svg>
15 | 


--------------------------------------------------------------------------------
/src/assets/logos/SONY_dark.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg width="1280" height="225.28" version="1.1" viewBox="0 0 338.67 59.605" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
 3 |   <defs>
 4 |     <style>
 5 |       .cls-1{fill:#fff}
 6 |     </style>
 7 |   </defs>
 8 |   <g transform="translate(647.97 -300.06)" fill="#f0f0f0" stroke-width=".677">
 9 |     <path d="M-390.37 303.388v6.623h6.469c2.824 0 4.68 1.782 5.737 2.933.847.948 19.474 22.068 19.92 22.623.448.556.448.562.448.915v10.465a7.41 7.41 0 0 1-.143 1.429 2.283 2.283 0 0 1-1.435 1.274 14.78 14.78 0 0 1-1.843.115l-6.475-.008v6.624h36.318v-6.624h-6.834a13.39 13.39 0 0 1-1.83-.116 2.256 2.256 0 0 1-1.428-1.273 7.45 7.45 0 0 1-.148-1.429V336.48a1.422 1.422 0 0 1 .243-.975l20.15-22.988c1.85-2.06 2.812-2.507 5.237-2.507h6.685v-6.624h-29.931v6.61h4.517a1.267 1.267 0 0 1 1.084 2.033c-.095.135-12.531 14.759-12.687 14.901-.156.142-.256.108-.372-.047-.115-.156-12.402-14.854-12.402-14.854-.867-1.064-.19-2.032.827-2.032h4.402v-6.61z"/>
10 |     <path d="M-479.445 303.388v6.623h5.797c4.186 0 4.471 2.331 4.471 4.363v31.002c0 1.855.108 4.402-2.56 4.402h-7.154v6.617h30.542v-6.617h-7.45c-2.974 0-3.11-1.36-3.143-4.253v-26.559l41.947 37.43h10.668l-.563-42.273c.055-3.089.244-4.118 3.441-4.118h6.685v-6.617h-31.157v6.617h6.842c3.143 0 3.67 1.212 3.71 4.118l.374 22.122-36.414-32.857z"/>
11 |     <path d="M-616.978 300.055c-6.563 0-14.02 1.233-20.32 4.064-5.88 2.628-10.668 6.848-10.668 13.844a14.346 14.346 0 0 0 3.895 9.863c1.7 1.571 4.443 4.24 11.61 5.811 3.203.678 10.051 1.768 16.872 2.486 6.82.718 13.432 1.355 16.14 2.08 2.155.548 5.778 1.294 5.778 5.358s-3.813 5.282-4.477 5.547c-.663.264-5.243 2.364-13.466 2.364a57.262 57.262 0 0 1-16.032-2.757c-3.068-1.098-6.285-2.54-9.286-6.205a10.654 10.654 0 0 1-1.931-5.879h-7.45v20.862h8.277v-2.824a1.179 1.179 0 0 1 1.788-1.016 65.2 65.2 0 0 0 12.11 3.915c4.349.907 7.16 1.565 12.565 1.565a53.61 53.61 0 0 0 16.838-2.378 29.39 29.39 0 0 0 10.004-4.938 13.71 13.71 0 0 0 5.358-10.979 15.362 15.362 0 0 0-4.327-10.798 19.053 19.053 0 0 0-5.338-3.65 39.32 39.32 0 0 0-6.584-2.296c-4.294-1.05-13.939-2.364-18.551-2.825-4.837-.5-13.23-1.199-16.582-2.235-1.016-.319-3.089-1.3-3.089-3.705 0-1.713.948-3.163 2.818-4.335 2.973-1.862 8.975-3.021 15.233-3.021a44.182 44.182 0 0 1 17.652 3.447 19.277 19.277 0 0 1 4.199 2.507 12.625 12.625 0 0 1 4.138 6.922h6.686V302.69h-7.45v2.106c0 .678-.678 1.572-2.033.834-3.36-1.748-12.801-5.527-24.377-5.575z"/>
12 |     <path d="m-527.31 300.06c-11.738 0-24.202 4.064-31.246 10.464a26.016 26.016 0 0 0-8.501 19.298 25.637 25.637 0 0 0 8.5 19.365c7.587 6.82 18.967 10.478 31.247 10.478 12.3 0 23.923-3.617 31.327-10.478a26.863 26.863 0 0 0 8.384-19.365 25.773 25.773 0 0 0-8.384-19.283c-7.946-7.207-18.343-10.479-31.327-10.479zm0 7.748c6.421 0 12.605 2.31 16.77 6.409 4.03 3.969 6.136 9.577 6.136 15.578 0 6.286-1.916 11.38-6.135 15.579-4.22 4.2-10.262 6.448-16.771 6.448-6.462 0-12.633-2.296-16.798-6.448a21.79 21.79 0 0 1-6.096-15.579c0-5.974 2.079-11.602 6.096-15.578 4.165-4.119 10.377-6.409 16.798-6.409z"/>
13 |   </g>
14 | </svg>
15 | 


--------------------------------------------------------------------------------
/src/components/dialog_map.tsx:
--------------------------------------------------------------------------------
 1 | import { Coordinate } from "../models/gallery.ts";
 2 | import { useContext, useEffect, useRef } from "react";
 3 | import { MapTokenContext, MapType } from "../contexts/map_token.tsx";
 4 | import useDarkMode from "use-dark-mode";
 5 | import { ColorScheme, Map as AppleMap, MapType as AppleMapType, Marker as AppleMarker } from "mapkit-react";
 6 | import MapBox, { MapRef, Marker as MapBoxMarker } from 'react-map-gl/mapbox';
 7 | 
 8 | export interface DialogMapProps {
 9 |   coordinate: Coordinate
10 | }
11 | 
12 | export default function DialogMap(props: DialogMapProps) {
13 |   const token = useContext(MapTokenContext)
14 |   const appleRef = useRef<mapkit.Map | null>(null)
15 |   const mapboxRef = useRef<MapRef>(null)
16 |   const darkmode = useDarkMode()
17 | 
18 |   useEffect(() => {
19 |     if (appleRef && appleRef.current) {
20 |       appleRef.current.setCenterAnimated(new mapkit.Coordinate(props.coordinate.latitude, props.coordinate.longitude), true)
21 |     } else if (mapboxRef && mapboxRef.current) {
22 |       mapboxRef.current.setCenter({ lat: props.coordinate.latitude, lng: props.coordinate.longitude })
23 |     }
24 |   }, [props.coordinate.latitude, props.coordinate.longitude])
25 | 
26 |   if (!token?.token) return;
27 | 
28 |   return (
29 |     token!.token.type === MapType.Apple ?
30 |       <AppleMap
31 |         token={token!.token.token}
32 |         allowWheelToZoom
33 |         initialRegion={{
34 |           centerLatitude: props.coordinate.latitude,
35 |           centerLongitude: props.coordinate.longitude,
36 |           latitudeDelta: .01,
37 |           longitudeDelta: .01,
38 |         }}
39 |         ref={appleRef}
40 |         colorScheme={darkmode.value ? ColorScheme.Dark : ColorScheme.Light}
41 |         mapType={AppleMapType.MutedStandard}
42 |         showsZoomControl
43 |       >
44 |         <AppleMarker latitude={props.coordinate.latitude} longitude={props.coordinate.longitude}/>
45 |       </AppleMap>
46 |       :
47 |       <MapBox
48 |         mapboxAccessToken={token!.token.token}
49 |         initialViewState={{
50 |           longitude: props.coordinate.longitude,
51 |           latitude: props.coordinate.latitude,
52 |           zoom: 10
53 |         }}
54 |         style={{ width: '100%', height: '100%', position: 'absolute' }}
55 |         mapStyle={darkmode.value ? 'mapbox://styles/mapbox/dark-v11' : 'mapbox://styles/mapbox/streets-v12'}
56 |         ref={mapboxRef}
57 |         onRender={(e) => {
58 |           const map = e.target
59 |           map.getStyle()?.layers.forEach((layer) => {
60 |             if (layer.id.endsWith("-label")) {
61 |               map.setLayoutProperty(layer.id, "text-field", ["get", "name_ja"])
62 |             }
63 |           })
64 |         }}
65 |       >
66 |         <MapBoxMarker
67 |           longitude={props.coordinate.longitude}
68 |           latitude={props.coordinate.latitude}
69 |           color='red'
70 |         />
71 |       </MapBox>
72 |   );
73 | }
74 | 


--------------------------------------------------------------------------------
/src/assets/logos/Sony_Alpha_logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <svg
 3 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
 4 |    xmlns:cc="http://creativecommons.org/ns#"
 5 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 6 |    xmlns:svg="http://www.w3.org/2000/svg"
 7 |    xmlns="http://www.w3.org/2000/svg"
 8 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
 9 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
10 |    width="290.02347"
11 |    height="207.37518"
12 |    viewBox="0 0 232.01877 165.90015"
13 |    id="svg2"
14 |    version="1.1"
15 |    inkscape:version="0.48.0 r9654"
16 |    sodipodi:docname="Sony_Alpha.eps(converted)-page1.svg">
17 |   <metadata
18 |      id="metadata20">
19 |     <rdf:RDF>
20 |       <cc:Work
21 |          rdf:about="">
22 |         <dc:format>image/svg+xml</dc:format>
23 |         <dc:type
24 |            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
25 |       </cc:Work>
26 |     </rdf:RDF>
27 |   </metadata>
28 |   <defs
29 |      id="defs18" />
30 |   <sodipodi:namedview
31 |      pagecolor="#ffffff"
32 |      bordercolor="#666666"
33 |      borderopacity="1"
34 |      objecttolerance="10"
35 |      gridtolerance="10"
36 |      guidetolerance="10"
37 |      inkscape:pageopacity="0"
38 |      inkscape:pageshadow="2"
39 |      inkscape:window-width="1858"
40 |      inkscape:window-height="1058"
41 |      id="namedview16"
42 |      showgrid="false"
43 |      fit-margin-left="5"
44 |      fit-margin-top="5"
45 |      fit-margin-bottom="5"
46 |      fit-margin-right="5"
47 |      inkscape:zoom="0.71192661"
48 |      inkscape:cx="115.8022"
49 |      inkscape:cy="102.70741"
50 |      inkscape:window-x="54"
51 |      inkscape:window-y="-8"
52 |      inkscape:window-maximized="1"
53 |      inkscape:current-layer="svg2" />
54 |   <g
55 |      transform="translate(1.7647637,2.7879134)"
56 |      style="fill:#e94e09;fill-rule:nonzero;stroke:none"
57 |      id="g4">
58 |     <path
59 |        d="m 219.435,142.691 c -27.178,1.942 -33.245,-11.405 -38.583,-26.935 -3.864,-11.24 -8.25,-25.3977 -10.224,-32.2197 12.491,-19.179 26.968,-42.207 48.524,-76.2502 0,0 -40.333,0 -40.333,0 -7.171,11.2442 -14.254,22.6292 -21.264,33.7662 -2.002,-5.605 -4.759,-11.641 -7.964,-16.771 C 140.309,9.9004 125.711,0 103.955,1.332 75.195,3.0938 53.47,16.876 35.934,34.4113 19.855,50.4903 4.1709,73.9723 2.3877,100.571 0,136.177 26.012,156.572 55.501,158.808 c 23.304,1.769 40.755,-4.426 55.443,-12.113 9.971,-5.217 31.185,-22.894 37.534,-30.775 4.712,21.849 16.872,42.787 44.264,42.787 16.977,0 27.73,-9.319 33.512,-16.522 -2.076,0.16 -4.332,0.328 -6.819,0.506 z M 88.581,129.457 c -6.291,4.558 -14.359,9.4 -22.83,10.716 -21.063,3.27 -30.352,-13.083 -28.886,-34.944 1.144,-17.0677 7.915,-32.8807 15.841,-46.5907 8.123,-14.052 17.608,-26.504 28.421,-34.01 3.861,-2.682 9.66,-5.877 17.704,-6.523 19.358,-1.5545 26.482,19.389 31.407,36.939 2.3,8.237 3.849,16.615 4.596,21.021 -5.52,8.103 -22.655,36.2937 -46.253,53.3917 z"
60 |        id="path6"
61 |        inkscape:connector-curvature="0" />
62 |   </g>
63 |   <g
64 |      transform="translate(-82.880736,246.84021)"
65 |      style="fill:none;stroke:#ffffff;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none"
66 |      id="g8">
67 |     <path
68 |        d="M 27,0 C 27,0 0,0 0,0"
69 |        id="path10"
70 |        inkscape:connector-curvature="0" />
71 |   </g>
72 |   <g
73 |      transform="translate(-82.880736,-78.939615)"
74 |      style="fill:none;stroke:#ffffff;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none"
75 |      id="g12">
76 |     <path
77 |        d="M 27,0 C 27,0 0,0 0,0"
78 |        id="path14"
79 |        inkscape:connector-curvature="0" />
80 |   </g>
81 | </svg>
82 | 


--------------------------------------------------------------------------------
/src/assets/logos/Panasonic.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="91.7">
 2 |   <path d="M43.59 61.96H27.17V40.98h10.67c2.02 0 3.74-.05 5.76-.16a8.78 8.78 0 0 0 6.81-3.67 8.21 8.21 0 0 0 1.6-3.9c.18-1.24.2-2.3.08-3.56a9.01 9.01 0 0 0-9.02-8.17h-15.9v68.02H0V0H44.4c1.77 0 3.26.03 5.03.13C61.22.76 70.93 7.31 75.92 18a30.6 30.6 0 0 1 2.81 17.02A29.06 29.06 0 0 1 55.7 60.65a53.6 53.6 0 0 1-12.1 1.31"/>
 3 |   <path id="a" stroke-width="3.65" d="M144.48 84.53c-.36-5.27-.56-9.73-.67-15.02-.14-6.95-.22-12.8-.27-19.75a40.94 40.94 0 0 0-1.38-10.54 16.68 16.68 0 0 0-8.3-10.77A27.03 27.03 0 0 0 126 25.5a66.75 66.75 0 0 0-26.67-.53c-2.6.45-4.77 1.08-7.22 2.1a19.22 19.22 0 0 0-11.38 12.46 15.3 15.3 0 0 0-.61 6.6c.04.42.15.78.34 1.17l21.53.53a9.65 9.65 0 0 1 .58-3.82 6.54 6.54 0 0 1 4.06-4.07 12.57 12.57 0 0 1 8.59-.15 5.88 5.88 0 0 1 3.9 3.95c.36 1.2.18 2.4-.55 3.43a5.12 5.12 0 0 1-2.46 1.92c-.64.25-1.2.42-1.85.6a84.5 84.5 0 0 1-8.6 1.87c-2.42.4-4.46.77-6.86 1.26a76.94 76.94 0 0 0-9.13 2.38 19.15 19.15 0 0 0-7.4 4.32 15.61 15.61 0 0 0-5.12 9.71c-.37 2.61-.28 4.88.3 7.45a17.8 17.8 0 0 0 12.7 13.51 31.1 31.1 0 0 0 21.16-1.07 20.2 20.2 0 0 0 8.38-6.12l-1.52-11a9.3 9.3 0 0 1-4.26 3.63c-1.7.75-3.25 1.15-5.1 1.34-1.55.15-2.89.04-4.39-.38a6.23 6.23 0 0 1-3.03-1.82 5.41 5.41 0 0 1-1.4-2.69 4.28 4.28 0 0 1 1.46-4.23 8.39 8.39 0 0 1 2.7-1.58 94.5 94.5 0 0 1 7.2-2.34c3.09-.87 5.64-1.81 8.57-3.16.28 2.34.27 4.34-.06 6.67-.23 1.71-.76 3.12-1.69 4.56l1.52 11c.47 1.56.9 2.86 1.44 4.4.3.85.7 1.51 1.3 2.18h23.7a10.28 10.28 0 0 1-1.65-5.04"/>
 4 |   <path id="b" stroke-width="3.65" d="M172.83 32.34a39.66 39.66 0 0 1 9.93-6.45 25.96 25.96 0 0 1 18.9-1.4 20.62 20.62 0 0 1 14.27 13.94 30.88 30.88 0 0 1 1.52 9.83v41.28h-25.4V52.42c0-1.24-.16-2.3-.52-3.48a7.04 7.04 0 0 0-4.13-4.57 9.58 9.58 0 0 0-12.08 4 10.41 10.41 0 0 0-1.5 5.53v35.64h-24.6V25.58h23.07l.54 6.76"/>
 5 |   <use width="100%" height="100%" transform="translate(143.6)" xlink:href="#a"/>
 6 |   <path d="M323.58 66.03c1.83.31 3.36.7 5.12 1.28a4.1 4.1 0 0 1 2.8 3.13 4.67 4.67 0 0 1-1.29 4.4 7.33 7.33 0 0 1-4.25 2.17c-2.26.36-4.26.18-6.4-.6a8.64 8.64 0 0 1-2.73-1.55 6.89 6.89 0 0 1-2.23-3.36 10.4 10.4 0 0 1-.48-3.41H290.7v1.36c0 2.2.34 4.07 1.11 6.14 1.18 3.1 2.79 5.5 5.22 7.76a24.87 24.87 0 0 0 10.65 6 56.77 56.77 0 0 0 25.36 1.6 35.03 35.03 0 0 0 11.37-3.7 23 23 0 0 0 4.4-2.95A19.48 19.48 0 0 0 354.97 63a15.54 15.54 0 0 0-4.82-7.29 26.96 26.96 0 0 0-10.6-5.77l-2.56-.73a113.9 113.9 0 0 0-14.48-3.08c-1.38-.2-2.54-.42-3.9-.74a9 9 0 0 1-1.73-.6 2.86 2.86 0 0 1-1.44-3.78l.11-.22a5.58 5.58 0 0 1 3.43-2.72c2.68-.77 5.14-.7 7.77.18a5.81 5.81 0 0 1 3.98 5.83h22.58a22.28 22.28 0 0 0-1.38-7.72 13.73 13.73 0 0 0-4.62-6.4 21.94 21.94 0 0 0-6.03-3.44 32.78 32.78 0 0 0-6.54-1.82 66.63 66.63 0 0 0-16.07-.9c-3.24.18-5.97.58-9.14 1.32-4.26 1-7.7 2.65-11.14 5.35a17.76 17.76 0 0 0-6.07 8.49 17.86 17.86 0 0 0 .42 12.48 17 17 0 0 0 9.85 9.85c2.37.94 4.44 1.56 6.94 2.07 4.93 1.02 9.1 1.81 14.06 2.66M400.3 24.36c-2.53-.4-4.69-.57-7.25-.57-2.56 0-4.71.17-7.25.57a33.22 33.22 0 0 0-18.65 9.25 30.42 30.42 0 0 0-9.6 19.96 36.59 36.59 0 0 0 1.25 13.76c2 7.22 5.78 12.8 11.73 17.35a30.34 30.34 0 0 0 12.63 5.86 43.8 43.8 0 0 0 9.9 1.06c3.5 0 6.46-.3 9.89-1.06a30.35 30.35 0 0 0 12.63-5.86L401.84 69.7a9.63 9.63 0 0 1-12.74 4.83 9.28 9.28 0 0 1-4.83-4.83 22.31 22.31 0 0 1-1.81-6.17c-.68-4.5-.6-8.4.27-12.86.45-2.31 1.23-4.2 2.52-6.18a9.34 9.34 0 0 1 15.6 0 16.43 16.43 0 0 1 2.52 6.18c.87 4.47.96 8.37.28 12.86-.34 2.25-.88 4.1-1.81 6.17l13.74 14.98a31.58 31.58 0 0 0 11.72-17.35c1.31-4.7 1.69-8.9 1.25-13.76a30.4 30.4 0 0 0-9.6-19.96 33.19 33.19 0 0 0-18.65-9.25"/>
 7 |   <use width="100%" height="100%" transform="translate(282.89)" xlink:href="#b"/>
 8 |   <path d="M505.26 0v16.9h23.91V0zm0 25.59v63.96h23.91V25.59zM593.4 81.25a31.2 31.2 0 0 1-17.18 9.49c-4.64.94-8.7 1.14-13.41.65a31.59 31.59 0 0 1-16.44-6.42 34.24 34.24 0 0 1-9.63-10.82 29.79 29.79 0 0 1-3.78-10.58c-.9-5.44-.66-10.22.77-15.54 3.27-12.1 12.36-20.67 24.63-23.22 7-1.45 13.22-1.3 20.15.49a27.84 27.84 0 0 1 12.57 6.89 25.35 25.35 0 0 1 5.5 7.21 19.24 19.24 0 0 1 2.27 10.4h-21.87a10.68 10.68 0 0 0-4.24-7.06 8.9 8.9 0 0 0-10.27-.5 10.15 10.15 0 0 0-4.5 5.79 29.54 29.54 0 0 0-.28 17.56 13.26 13.26 0 0 0 3.83 6.34 9.13 9.13 0 0 0 7.9 2.5 7.35 7.35 0 0 0 4.62-2.48 9.5 9.5 0 0 0 2.4-4.93c.24-1.35.37-2.5.45-3.87h23.05a23.13 23.13 0 0 1-6.54 18.1"/>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/src/assets/logos/Panasonic_dark.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="91.7" fill="white">
 2 |   <path d="M43.59 61.96H27.17V40.98h10.67c2.02 0 3.74-.05 5.76-.16a8.78 8.78 0 0 0 6.81-3.67 8.21 8.21 0 0 0 1.6-3.9c.18-1.24.2-2.3.08-3.56a9.01 9.01 0 0 0-9.02-8.17h-15.9v68.02H0V0H44.4c1.77 0 3.26.03 5.03.13C61.22.76 70.93 7.31 75.92 18a30.6 30.6 0 0 1 2.81 17.02A29.06 29.06 0 0 1 55.7 60.65a53.6 53.6 0 0 1-12.1 1.31"/>
 3 |   <path id="a" stroke-width="3.65" d="M144.48 84.53c-.36-5.27-.56-9.73-.67-15.02-.14-6.95-.22-12.8-.27-19.75a40.94 40.94 0 0 0-1.38-10.54 16.68 16.68 0 0 0-8.3-10.77A27.03 27.03 0 0 0 126 25.5a66.75 66.75 0 0 0-26.67-.53c-2.6.45-4.77 1.08-7.22 2.1a19.22 19.22 0 0 0-11.38 12.46 15.3 15.3 0 0 0-.61 6.6c.04.42.15.78.34 1.17l21.53.53a9.65 9.65 0 0 1 .58-3.82 6.54 6.54 0 0 1 4.06-4.07 12.57 12.57 0 0 1 8.59-.15 5.88 5.88 0 0 1 3.9 3.95c.36 1.2.18 2.4-.55 3.43a5.12 5.12 0 0 1-2.46 1.92c-.64.25-1.2.42-1.85.6a84.5 84.5 0 0 1-8.6 1.87c-2.42.4-4.46.77-6.86 1.26a76.94 76.94 0 0 0-9.13 2.38 19.15 19.15 0 0 0-7.4 4.32 15.61 15.61 0 0 0-5.12 9.71c-.37 2.61-.28 4.88.3 7.45a17.8 17.8 0 0 0 12.7 13.51 31.1 31.1 0 0 0 21.16-1.07 20.2 20.2 0 0 0 8.38-6.12l-1.52-11a9.3 9.3 0 0 1-4.26 3.63c-1.7.75-3.25 1.15-5.1 1.34-1.55.15-2.89.04-4.39-.38a6.23 6.23 0 0 1-3.03-1.82 5.41 5.41 0 0 1-1.4-2.69 4.28 4.28 0 0 1 1.46-4.23 8.39 8.39 0 0 1 2.7-1.58 94.5 94.5 0 0 1 7.2-2.34c3.09-.87 5.64-1.81 8.57-3.16.28 2.34.27 4.34-.06 6.67-.23 1.71-.76 3.12-1.69 4.56l1.52 11c.47 1.56.9 2.86 1.44 4.4.3.85.7 1.51 1.3 2.18h23.7a10.28 10.28 0 0 1-1.65-5.04"/>
 4 |   <path id="b" stroke-width="3.65" d="M172.83 32.34a39.66 39.66 0 0 1 9.93-6.45 25.96 25.96 0 0 1 18.9-1.4 20.62 20.62 0 0 1 14.27 13.94 30.88 30.88 0 0 1 1.52 9.83v41.28h-25.4V52.42c0-1.24-.16-2.3-.52-3.48a7.04 7.04 0 0 0-4.13-4.57 9.58 9.58 0 0 0-12.08 4 10.41 10.41 0 0 0-1.5 5.53v35.64h-24.6V25.58h23.07l.54 6.76"/>
 5 |   <use width="100%" height="100%" transform="translate(143.6)" xlink:href="#a"/>
 6 |   <path d="M323.58 66.03c1.83.31 3.36.7 5.12 1.28a4.1 4.1 0 0 1 2.8 3.13 4.67 4.67 0 0 1-1.29 4.4 7.33 7.33 0 0 1-4.25 2.17c-2.26.36-4.26.18-6.4-.6a8.64 8.64 0 0 1-2.73-1.55 6.89 6.89 0 0 1-2.23-3.36 10.4 10.4 0 0 1-.48-3.41H290.7v1.36c0 2.2.34 4.07 1.11 6.14 1.18 3.1 2.79 5.5 5.22 7.76a24.87 24.87 0 0 0 10.65 6 56.77 56.77 0 0 0 25.36 1.6 35.03 35.03 0 0 0 11.37-3.7 23 23 0 0 0 4.4-2.95A19.48 19.48 0 0 0 354.97 63a15.54 15.54 0 0 0-4.82-7.29 26.96 26.96 0 0 0-10.6-5.77l-2.56-.73a113.9 113.9 0 0 0-14.48-3.08c-1.38-.2-2.54-.42-3.9-.74a9 9 0 0 1-1.73-.6 2.86 2.86 0 0 1-1.44-3.78l.11-.22a5.58 5.58 0 0 1 3.43-2.72c2.68-.77 5.14-.7 7.77.18a5.81 5.81 0 0 1 3.98 5.83h22.58a22.28 22.28 0 0 0-1.38-7.72 13.73 13.73 0 0 0-4.62-6.4 21.94 21.94 0 0 0-6.03-3.44 32.78 32.78 0 0 0-6.54-1.82 66.63 66.63 0 0 0-16.07-.9c-3.24.18-5.97.58-9.14 1.32-4.26 1-7.7 2.65-11.14 5.35a17.76 17.76 0 0 0-6.07 8.49 17.86 17.86 0 0 0 .42 12.48 17 17 0 0 0 9.85 9.85c2.37.94 4.44 1.56 6.94 2.07 4.93 1.02 9.1 1.81 14.06 2.66M400.3 24.36c-2.53-.4-4.69-.57-7.25-.57-2.56 0-4.71.17-7.25.57a33.22 33.22 0 0 0-18.65 9.25 30.42 30.42 0 0 0-9.6 19.96 36.59 36.59 0 0 0 1.25 13.76c2 7.22 5.78 12.8 11.73 17.35a30.34 30.34 0 0 0 12.63 5.86 43.8 43.8 0 0 0 9.9 1.06c3.5 0 6.46-.3 9.89-1.06a30.35 30.35 0 0 0 12.63-5.86L401.84 69.7a9.63 9.63 0 0 1-12.74 4.83 9.28 9.28 0 0 1-4.83-4.83 22.31 22.31 0 0 1-1.81-6.17c-.68-4.5-.6-8.4.27-12.86.45-2.31 1.23-4.2 2.52-6.18a9.34 9.34 0 0 1 15.6 0 16.43 16.43 0 0 1 2.52 6.18c.87 4.47.96 8.37.28 12.86-.34 2.25-.88 4.1-1.81 6.17l13.74 14.98a31.58 31.58 0 0 0 11.72-17.35c1.31-4.7 1.69-8.9 1.25-13.76a30.4 30.4 0 0 0-9.6-19.96 33.19 33.19 0 0 0-18.65-9.25"/>
 7 |   <use width="100%" height="100%" transform="translate(282.89)" xlink:href="#b"/>
 8 |   <path d="M505.26 0v16.9h23.91V0zm0 25.59v63.96h23.91V25.59zM593.4 81.25a31.2 31.2 0 0 1-17.18 9.49c-4.64.94-8.7 1.14-13.41.65a31.59 31.59 0 0 1-16.44-6.42 34.24 34.24 0 0 1-9.63-10.82 29.79 29.79 0 0 1-3.78-10.58c-.9-5.44-.66-10.22.77-15.54 3.27-12.1 12.36-20.67 24.63-23.22 7-1.45 13.22-1.3 20.15.49a27.84 27.84 0 0 1 12.57 6.89 25.35 25.35 0 0 1 5.5 7.21 19.24 19.24 0 0 1 2.27 10.4h-21.87a10.68 10.68 0 0 0-4.24-7.06 8.9 8.9 0 0 0-10.27-.5 10.15 10.15 0 0 0-4.5 5.79 29.54 29.54 0 0 0-.28 17.56 13.26 13.26 0 0 0 3.83 6.34 9.13 9.13 0 0 0 7.9 2.5 7.35 7.35 0 0 0 4.62-2.48 9.5 9.5 0 0 0 2.4-4.93c.24-1.35.37-2.5.45-3.87h23.05a23.13 23.13 0 0 1-6.54 18.1"/>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/src/components/shuin_masonry.tsx:
--------------------------------------------------------------------------------
  1 | import { useEffect, useMemo, useRef, useState } from "react";
  2 | import axios from "axios";
  3 | import { Response, Shuin } from "../models/gallery.ts";
  4 | import { Card, Image, CardFooter, CardBody, useDisclosure } from "@heroui/react";
  5 | import useMediaQuery from "../hooks/useMediaQuery.tsx";
  6 | import { useWindowSize } from "@react-hook/window-size";
  7 | import {
  8 |   useContainerPosition,
  9 |   useInfiniteLoader,
 10 |   useMasonry,
 11 |   usePositioner,
 12 |   useScroller
 13 | } from "masonic";
 14 | import { useNavigate } from "react-router-dom";
 15 | import ShuinModal from "./shuin_modal.tsx";
 16 | import { useTranslation } from "react-i18next";
 17 | 
 18 | 
 19 | export default function ShuinMasonry() {
 20 |   const [shuin, setShuin] = useState<Shuin[]>([])
 21 |   const isDesktop = useMediaQuery('(min-width: 720px)');
 22 |   const loadedIndex = useRef<{ startIndex: number, stopIndex: number }[]>([]);
 23 | 
 24 |   const containerRef = useRef(null);
 25 |   const [windowWidth, height] = useWindowSize();
 26 |   const { offset, width } = useContainerPosition(containerRef, [
 27 |     windowWidth,
 28 |     height
 29 |   ]);
 30 |   const positioner = usePositioner({
 31 |     width,
 32 |     columnGutter: 8,
 33 |     columnCount: isDesktop ? 4 : 2,
 34 |   });
 35 |   const { scrollTop, isScrolling } = useScroller(offset);
 36 | 
 37 |   useEffect(() => {
 38 |     axios.get<Response<Shuin[]>>('https://api.gallery.boar.ac.cn/shuin/all', {
 39 |       params: {
 40 |         page_size: 20
 41 |       }
 42 |     }).then(res => {
 43 |       setShuin(res.data.payload)
 44 |     })
 45 |   }, [])
 46 | 
 47 |   const maybeLoadMore = useInfiniteLoader((startIndex, stopIndex, items) => {
 48 |     if (loadedIndex.current.find((e) => e.startIndex === startIndex && e.stopIndex === stopIndex)) {
 49 |       return;
 50 |     }
 51 |     loadedIndex.current.push({ startIndex, stopIndex })
 52 | 
 53 |     const lastDate = (items[items.length - 1] as Shuin).date
 54 |     axios.get<Response<Shuin[]>>('https://api.gallery.boar.ac.cn/shuin/all', {
 55 |       params: {
 56 |         page_size: stopIndex - startIndex,
 57 |         last_date: lastDate,
 58 |       }
 59 |     }).then((res) => {
 60 |       const newItems = res.data.payload.filter((item) => !shuin.find(s => s.id === item.id));
 61 |       if (newItems.length > 0) {
 62 |         setShuin((current) => [...current, ...newItems]);
 63 |       }
 64 |     })
 65 |   }, {
 66 |     isItemLoaded: (index, items) => !!items[index],
 67 |   });
 68 | 
 69 |   return useMasonry({
 70 |     positioner,
 71 |     scrollTop,
 72 |     isScrolling,
 73 |     height,
 74 |     containerRef,
 75 |     items: shuin,
 76 |     overscanBy: 3,
 77 |     itemHeightEstimate: 0,
 78 |     onRender: maybeLoadMore,
 79 |     render: MasonryCard,
 80 |     itemKey: (item) => item.id,
 81 |   })
 82 | }
 83 | 
 84 | const MasonryCard = ({ data }: { data: Shuin }) => {
 85 |   const { isOpen, onOpen, onOpenChange } = useDisclosure();
 86 |   const isDesktop = useMediaQuery('(min-width: 960px)');
 87 |   const navigate = useNavigate()
 88 |   const { t } = useTranslation()
 89 | 
 90 |   const openPhotoModel = useMemo(() => () => {
 91 |     history.pushState({}, '', `/shuin/${data.id}`)
 92 |     onOpen();
 93 |   }, [onOpen, data.id])
 94 | 
 95 |   return <Card
 96 |     radius="lg"
 97 |     className="border-none"
 98 |     isPressable={isDesktop}
 99 |     onPress={isDesktop ? openPhotoModel : undefined}
100 |   >
101 |     <CardBody className="overflow-visible p-0" onClick={isDesktop ? undefined : openPhotoModel}>
102 |       <Image
103 |         className="object-cover"
104 |         draggable={false}
105 |         classNames={{
106 |           img: 'pointer-events-none',
107 |           blurredImg: 'pointer-events-none'
108 |         }}
109 |         src={data.thumb_file.url}
110 |         width={data.thumb_file.width}
111 |         height={data.thumb_file.height}
112 |         style={{ height: 'auto' }}
113 |       />
114 |     </CardBody>
115 |     <CardFooter className="text-small justify-between flex-wrap">
116 |       <b>
117 |         {data.place.name}
118 |       </b>
119 |       <p className="text-default-500">
120 |         {t(`shuin.genre.${data.genre}`)}
121 |       </p>
122 |     </CardFooter>
123 | 
124 |     <ShuinModal shuin={data} isOpen={isOpen} onOpenChange={(isOpen, path) => {
125 |       if (!isOpen && path) {
126 |         navigate(path)
127 |       } else if (!isOpen) {
128 |         history.back()
129 |       }
130 |       onOpenChange()
131 |     }}/>
132 |   </Card>
133 | };
134 | 


--------------------------------------------------------------------------------
/src/components/photo_masonry.tsx:
--------------------------------------------------------------------------------
  1 | import { useEffect, useMemo, useRef, useState } from "react";
  2 | import axios from "axios";
  3 | import { Photo, Response } from "../models/gallery.ts";
  4 | import { Card, Image, CardFooter, CardBody, useDisclosure } from "@heroui/react";
  5 | import useMediaQuery from "../hooks/useMediaQuery.tsx";
  6 | import PhotoModal from "../components/photo_modal.tsx";
  7 | import { useWindowSize } from "@react-hook/window-size";
  8 | import {
  9 |   useContainerPosition,
 10 |   useInfiniteLoader,
 11 |   useMasonry,
 12 |   usePositioner,
 13 |   useScroller
 14 | } from "masonic";
 15 | import { useNavigate } from "react-router-dom";
 16 | 
 17 | 
 18 | export default function PhotoMasonry(props: { prefectureId?: string, cityId?: string }) {
 19 |   const [photos, setPhotos] = useState<Photo[]>([])
 20 |   const isDesktop = useMediaQuery('(min-width: 960px)');
 21 |   const loadedIndex = useRef<{ startIndex: number, stopIndex: number }[]>([]);
 22 | 
 23 |   const containerRef = useRef(null);
 24 |   const [windowWidth, height] = useWindowSize();
 25 |   const { offset, width } = useContainerPosition(containerRef, [
 26 |     windowWidth,
 27 |     height
 28 |   ]);
 29 |   const positioner = usePositioner({
 30 |     width,
 31 |     columnGutter: 8,
 32 |     columnCount: isDesktop ? 3 : 2,
 33 |   });
 34 |   const { scrollTop, isScrolling } = useScroller(offset);
 35 |   const query = useMemo(() => ({
 36 |     prefecture_id: props.prefectureId && props.prefectureId !== '0' ? props.prefectureId : undefined,
 37 |     city_id: props.cityId && props.cityId !== '0' ? props.cityId : undefined,
 38 |   }), [props.cityId, props.prefectureId])
 39 | 
 40 |   useEffect(() => {
 41 |     axios.get<Response<Photo[]>>('https://api.gallery.boar.ac.cn/photos/all', {
 42 |       params: {
 43 |         ...query,
 44 |         page_size: 20
 45 |       }
 46 |     }).then(res => {
 47 |       setPhotos(res.data.payload)
 48 |     })
 49 |   }, [query])
 50 | 
 51 |   const maybeLoadMore = useInfiniteLoader((startIndex, stopIndex, items) => {
 52 |     if (loadedIndex.current.find((e) => e.startIndex === startIndex && e.stopIndex === stopIndex)) {
 53 |       return;
 54 |     }
 55 |     loadedIndex.current.push({ startIndex, stopIndex })
 56 | 
 57 |     const lastDate = (items[items.length - 1] as Photo).metadata.datetime
 58 |     axios.get<Response<Photo[]>>('https://api.gallery.boar.ac.cn/photos/all', {
 59 |       params: {
 60 |         ...query,
 61 |         page_size: stopIndex - startIndex,
 62 |         last_datetime: lastDate,
 63 |       }
 64 |     }).then((res) => {
 65 |       if (res.data.payload.length > 0) {
 66 |         setPhotos((current) => [...current, ...res.data.payload]);
 67 |       }
 68 |     })
 69 |   }, {
 70 |     isItemLoaded: (index, items) => !!items[index],
 71 |   });
 72 | 
 73 |   return useMasonry({
 74 |     positioner,
 75 |     scrollTop,
 76 |     isScrolling,
 77 |     height,
 78 |     containerRef,
 79 |     items: photos,
 80 |     overscanBy: 3,
 81 |     itemHeightEstimate: 0,
 82 |     onRender: maybeLoadMore,
 83 |     render: MasonryCard,
 84 |     itemKey: (item) => item.id,
 85 |   })
 86 | }
 87 | 
 88 | const MasonryCard = ({ data }: { data: Photo }) => {
 89 |   const { isOpen, onOpen, onOpenChange } = useDisclosure();
 90 |   const isDesktop = useMediaQuery('(min-width: 960px)');
 91 |   const navigate = useNavigate()
 92 | 
 93 |   const openPhotoModel = useMemo(() => () => {
 94 |     history.pushState({}, '', `/photo/${data.id}`)
 95 |     onOpen();
 96 |   }, [onOpen, data.id])
 97 | 
 98 |   return <Card
 99 |     radius="lg"
100 |     className="border-none"
101 |     isPressable={isDesktop}
102 |     onPress={isDesktop ? openPhotoModel : undefined}
103 |   >
104 |     <CardBody className="overflow-visible p-0" onClick={isDesktop ? undefined : openPhotoModel}>
105 |       <Image
106 |         className="object-cover"
107 |         draggable={false}
108 |         classNames={{
109 |           img: 'pointer-events-none',
110 |           blurredImg: 'pointer-events-none'
111 |         }}
112 |         src={data.thumb_file.url}
113 |         width={data.thumb_file.width}
114 |         height={data.thumb_file.height}
115 |         style={{ height: 'auto' }}
116 |       />
117 |     </CardBody>
118 |     {
119 |       data.metadata.city ?
120 |         <CardFooter className="text-small justify-between flex-wrap">
121 |           <b>
122 |             {`${data.metadata.city.prefecture.name} ${data.metadata.city.name}`}
123 |           </b>
124 |           <p className="text-default-500">
125 |             {`${data.metadata.city.prefecture.country.name}`}
126 |           </p>
127 |         </CardFooter>
128 |         :
129 |         null
130 |     }
131 | 
132 |     <PhotoModal photo={data} isOpen={isOpen} onOpenChange={(isOpen, path) => {
133 |       if (!isOpen && path) {
134 |         navigate(path)
135 |       } else if (!isOpen) {
136 |         history.back()
137 |       }
138 |       onOpenChange()
139 |     }}/>
140 |   </Card>
141 | };
142 | 


--------------------------------------------------------------------------------
/src/routes/map_openlayers.tsx:
--------------------------------------------------------------------------------
  1 | import { useEffect, useRef, useState } from "react";
  2 | import { Country, Prefecture, Response } from "../models/gallery.ts";
  3 | import axios from "axios";
  4 | import VectorLayer from "ol/layer/Vector";
  5 | import VectorSource from "ol/source/Vector";
  6 | import GeoJSON from 'ol/format/GeoJSON';
  7 | import { fromLonLat, transformExtent } from "ol/proj";
  8 | import { View } from "ol";
  9 | import Map from 'ol/Map.js';
 10 | import { Fill, Stroke, Style, Text } from 'ol/style.js';
 11 | import { getArea } from 'ol/sphere';
 12 | import { MultiPolygon } from "ol/geom";
 13 | import { useTranslation } from "react-i18next";
 14 | import { Select, SelectItem } from "@heroui/react";
 15 | import useDarkMode from "use-dark-mode";
 16 | import { useNavigate } from "react-router-dom";
 17 | 
 18 | export default function MapPage() {
 19 |   const darkmode = useDarkMode()
 20 |   const mapElement = useRef<HTMLDivElement>(null)
 21 |   const map = useRef<Map>(null)
 22 |   const [country, setCountry] = useState<Country>()
 23 |   const [countries, setCountries] = useState<Country[]>([])
 24 |   const [prefectures, setPrefectures] = useState<Prefecture[]>([])
 25 |   const hoverIds = useRef<number[]>([]);
 26 |   const navigate = useNavigate()
 27 |   const { t } = useTranslation()
 28 | 
 29 |   useEffect(() => {
 30 |     axios.get<Response<Country[]>>('https://api.gallery.boar.ac.cn/geo/countries').then((res) => {
 31 |       setCountries(res.data.payload)
 32 |       setCountry(res.data.payload[0])
 33 |     })
 34 |   }, [])
 35 | 
 36 |   useEffect(() => {
 37 |     if (country) {
 38 |       axios.get<Response<Prefecture[]>>('https://api.gallery.boar.ac.cn/geo/prefectures', {
 39 |         params: {
 40 |           country_id: country.id,
 41 |           with_photos_count: true
 42 |         }
 43 |       }).then((res) => {
 44 |         setPrefectures(res.data.payload)
 45 |       })
 46 |     }
 47 |   }, [country])
 48 | 
 49 |   useEffect(() => {
 50 |       if (!country) return
 51 |       if (!mapElement || !mapElement.current) return
 52 |       if (!prefectures.length) return
 53 |       if (!navigate) return
 54 | 
 55 |       if (map.current) {
 56 |         map.current?.setTarget(undefined)
 57 |       }
 58 | 
 59 |       // create and add vector source layer
 60 |       const vectorLayer = new VectorLayer({
 61 |         source: new VectorSource({
 62 |           url: `/geojson/${country.code}.json`,
 63 |           format: new GeoJSON(),
 64 |         }),
 65 |         renderBuffer: Math.max(window.outerWidth, window.outerHeight),
 66 |         style: function (feature) {
 67 |           if (feature.getGeometry()?.getType() === 'MultiPolygon') {
 68 |             const hasPhotos = (prefectures.find((p) => p.id === feature.get('id'))?.photos_count ?? 0) > 0
 69 | 
 70 |             let largestPolygon = null;
 71 |             let maxArea = 0;
 72 | 
 73 |             (feature.getGeometry() as MultiPolygon).getPolygons().forEach((polygon) => {
 74 |               const area = getArea(polygon);
 75 |               if (area > maxArea) {
 76 |                 maxArea = area;
 77 |                 largestPolygon = polygon;
 78 |               }
 79 |             });
 80 | 
 81 |             const labelStyle = new Style({
 82 |               text: new Text({
 83 |                 font: '13px "SF Pro SC","SF Pro Display","SF Pro Icons","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif',
 84 |                 overflow: true,
 85 |                 fill: new Fill({
 86 |                   color: darkmode.value ? '#fff' : '#000',
 87 |                 }),
 88 |                 stroke: new Stroke({
 89 |                   color: darkmode.value ? '#000' : '#fff',
 90 |                   width: 3,
 91 |                 }),
 92 |                 text: feature.get('name'),
 93 |               }),
 94 |               geometry: new MultiPolygon([largestPolygon!.getCoordinates()]),
 95 |             });
 96 | 
 97 |             const prefStyle = new Style({
 98 |               fill: new Fill({
 99 |                 color: (hasPhotos ?
100 |                   darkmode.value ? '#792A4C' : '#FEDFE1' :
101 |                   darkmode.value ? '#222222' : '#DDDDDD') + (hoverIds.current.includes(feature.get('id')) ? 'CC' : 'FF'),
102 |               }),
103 |               stroke: new Stroke({
104 |                 color: darkmode.value ? '#000' : '#FFF',
105 |                 width: 1,
106 |               }),
107 |             });
108 | 
109 |             return [prefStyle, labelStyle]
110 |           }
111 |         },
112 |         declutter: true,
113 |       })
114 | 
115 |       // create map
116 |       map.current = new Map({
117 |         target: mapElement.current,
118 |         view: new View({
119 |           center: fromLonLat(country.center),
120 |           zoom: country.zoom[0],
121 |           minZoom: country.zoom[1],
122 |           maxZoom: country.zoom[2],
123 |           extent: transformExtent(country.extent, 'EPSG:4326', 'EPSG:3857'),
124 |         }),
125 |         controls: [],
126 |       })
127 | 
128 |       map.current?.addLayer(vectorLayer)
129 | 
130 |       map.current.on('pointermove', (e) => {
131 |         if (!e.dragging) {
132 |           const features = map.current!.getFeaturesAtPixel(map.current!.getEventPixel(e.originalEvent))
133 |           if (features.length) {
134 |             hoverIds.current = features.map((f) => f.get('id'))
135 |           } else {
136 |             hoverIds.current = []
137 |           }
138 |           map.current!.getTargetElement().style.cursor = features.length ? 'pointer' : '';
139 |           vectorLayer.changed();
140 |         }
141 |       });
142 | 
143 |       map.current.on('click', (e) => {
144 |         const feature = map.current!.forEachFeatureAtPixel(map.current!.getEventPixel(e.originalEvent), (feature) => feature);
145 |         if (feature) {
146 |           navigate(`/prefecture/${feature.get('id')}`)
147 |         }
148 |       });
149 |     }, [country, darkmode.value, navigate, prefectures]
150 |   )
151 | 
152 |   if (!country) return;
153 | 
154 |   return <div className='scrollbar-hide box-border relative' style={{ height: 'calc(100dvh - 4rem)' }}>
155 |     <div className='h-full w-full' ref={mapElement}/>
156 | 
157 |     <Select
158 |       items={countries}
159 |       label={t('map.countries')}
160 |       placeholder={t('map.select_country')}
161 |       selectedKeys={[country.id.toString()]}
162 |       onChange={(e) => {
163 |         if (e.target.value !== '') {
164 |           setCountry(countries.find((c) => c.id.toString() === e.target.value))
165 |         }
166 |       }}
167 |       className='absolute top-4 left-4 w-[20rem]'
168 |     >
169 |       {(c) => <SelectItem key={c.id}>{c.name}</SelectItem>}
170 |     </Select>
171 |   </div>
172 | }
173 | 


--------------------------------------------------------------------------------
/src/routes/shuin.tsx:
--------------------------------------------------------------------------------
  1 | import { useParams } from "react-router-dom";
  2 | import { useEffect, useState, cloneElement, MouseEvent } from "react";
  3 | import { Shuin, Response } from "../models/gallery.ts";
  4 | import axios from "axios";
  5 | import {
  6 |   Button,
  7 |   Card,
  8 |   CardBody,
  9 |   CardFooter,
 10 |   CardHeader, Chip,
 11 |   Divider,
 12 |   Image,
 13 |   Link,
 14 | } from "@heroui/react";
 15 | import moment from "moment/moment";
 16 | import useMediaQuery from "../hooks/useMediaQuery.tsx";
 17 | import DialogMap from "../components/dialog_map.tsx";
 18 | import { MdOutlineOpenInNew } from "react-icons/md";
 19 | import { IoCalendarOutline, IoLocationOutline } from "react-icons/io5";
 20 | import { useTranslation } from "react-i18next";
 21 | import Zoom from 'react-medium-image-zoom'
 22 | 
 23 | export default function ShuinPage() {
 24 |   const { id } = useParams()
 25 |   const [shuin, setShuin] = useState<Shuin>()
 26 |   const isDesktop = useMediaQuery('(min-width: 960px)');
 27 |   const { t } = useTranslation()
 28 | 
 29 |   useEffect(() => {
 30 |     axios.get<Response<Shuin>>('https://api.gallery.boar.ac.cn/shuin/get', {
 31 |       params: { id }
 32 |     }).then((res) => {
 33 |       setShuin(res.data.payload)
 34 |     })
 35 |   }, [id])
 36 | 
 37 |   if (!shuin) return null;
 38 | 
 39 |   return (
 40 |     <div className='scrollbar-hide px-[10px] md:px-[20px] box-content pt-4 pb-12'>
 41 |       <div className='text-5xl mb-8 md:mb-12 ml-2 pt-2'>
 42 |         #S{id}
 43 |       </div>
 44 | 
 45 |       <Card
 46 |         isFooterBlurred
 47 |         radius="lg"
 48 |         className="border-none"
 49 |       >
 50 |         <Zoom
 51 |           ZoomContent={({ buttonUnzoom, img, }) => <>
 52 |             {buttonUnzoom}
 53 |             {img ? cloneElement(img, {
 54 |               // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 55 |               // @ts-expect-error
 56 |               draggable: false,
 57 |               onContextMenu: (e: MouseEvent<HTMLImageElement>) => e.preventDefault()
 58 |             }) : null}
 59 |           </>}
 60 |         >
 61 |           <Image
 62 |             isBlurred
 63 |             className={`object-contain ${isDesktop ? 'max-h-128' : ''}`}
 64 |             draggable={false}
 65 |             classNames={{
 66 |               // img: 'pointer-events-none',
 67 |               // blurredImg: 'pointer-events-none'
 68 |             }}
 69 |             onContextMenu={(e) => e.preventDefault()}
 70 |             src={shuin.large_file!.url}
 71 |             width={shuin.large_file!.width}
 72 |             height={shuin.large_file!.height}
 73 |             style={{ height: 'auto' }}
 74 |           />
 75 |         </Zoom>
 76 |         <CardFooter
 77 |           className="justify-between before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 absolute before:rounded-xl rounded-large bottom-1 shadow-small right-1 z-10 w-auto font-normal">
 78 |           <div
 79 |             className='text-tiny md:text-small text-white/80'>&copy; {moment(shuin.date).year()} {shuin.place.name}</div>
 80 |         </CardFooter>
 81 |       </Card>
 82 | 
 83 |       <div className='gap-4 grid grid-cols-1 md:grid-cols-2 mt-4 pb-4'>
 84 |         <div>
 85 |           <Card>
 86 |             <CardBody>
 87 |               <div className='flex flex-col gap-1'>
 88 |                 {
 89 |                   shuin.place.city ?
 90 |                     <div className='flex items-center text-default-500 gap-2'>
 91 |                       <IoLocationOutline className='shrink-0' size={20}/>
 92 |                       <div className='flex flex-wrap gap-x-3'>
 93 |                         <div className='flex gap-1'>
 94 |                           <div color='foreground'
 95 |                                className="font-bold">{shuin.place.city?.prefecture.name}</div>
 96 |                           <div color='foreground'
 97 |                                className="font-bold">{shuin.place.city?.name}</div>
 98 |                         </div>
 99 |                         <div className='flex items-center'>
100 |                           <Link color='foreground'>{shuin.place.name}</Link>
101 |                         </div>
102 |                       </div>
103 |                     </div>
104 |                     :
105 |                     null
106 |                 }
107 | 
108 |                 <div className='flex items-center text-default-500 gap-2'>
109 |                   <IoCalendarOutline size={20}/>
110 |                   <div>
111 |                     {moment(shuin.date).format('YYYY/MM')}
112 |                   </div>
113 |                 </div>
114 |               </div>
115 |             </CardBody>
116 |           </Card>
117 | 
118 |           <Card className='overflow-visible mt-4'>
119 |             <CardHeader className='text-small font-semibold bg-default-100 py-2'>
120 |               <div>{t('shuin.basic_information')}</div>
121 |             </CardHeader>
122 |             <CardBody className='text-small text-default-500 py-2 overflow-y-visible'>
123 |               <div><b>{t('shuin.price')}：</b>{shuin.price} {t('shuin.yen')}</div>
124 |             </CardBody>
125 |             <Divider className='bg-default-100'/>
126 |             <CardFooter className='py-2 flex space-x-2 text-default-500'>
127 |               <Chip variant="flat">
128 |                 {t(`shuin.type.${shuin.type}`)}
129 |               </Chip>
130 | 
131 |               {
132 |                 shuin.is_limited ?
133 |                   <Chip color="warning" variant="flat">
134 |                     {t('shuin.is_limited')}
135 |                   </Chip>
136 |                   :
137 |                   null
138 |               }
139 |             </CardFooter>
140 |           </Card>
141 |         </div>
142 | 
143 |         <Card className='overflow-hidden min-h-[200px] md:min-h-0' isFooterBlurred>
144 |           <DialogMap coordinate={shuin.place.geom}/>
145 |           <CardFooter
146 |             className="justify-between before:bg-white/10 border-white/20 border-1 overflow-hidden p-0 absolute before:rounded-xl rounded-large bottom-1 shadow-small right-1 z-10 w-auto font-normal">
147 |             <Button
148 |               className="text-tiny text-white bg-black/20"
149 |               variant="flat"
150 |               color="default"
151 |               radius="lg"
152 |               size="sm"
153 |               isIconOnly
154 |               onPress={() => {
155 |                 window.open(`https://maps.google.com/?q=${shuin.place.geom.latitude},${shuin.place.geom.longitude}`)
156 |               }}
157 |             >
158 |               <MdOutlineOpenInNew size={16}/>
159 |             </Button>
160 |           </CardFooter>
161 |         </Card>
162 |       </div>
163 |     </div>
164 |   );
165 | }
166 | 


--------------------------------------------------------------------------------
/src/routes/root.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Button, Divider, Dropdown,
  3 |   DropdownItem, DropdownMenu, DropdownTrigger, Link,
  4 |   Listbox,
  5 |   ListboxItem,
  6 |   Navbar,
  7 |   NavbarBrand,
  8 |   NavbarContent,
  9 |   NavbarItem, NavbarMenu, NavbarMenuItem, NavbarMenuToggle, Spacer
 10 | } from "@heroui/react";
 11 | import useDarkMode from "use-dark-mode";
 12 | import { TbBook, TbHome, TbMap, TbMoon, TbSun } from "react-icons/tb";
 13 | import { Outlet, useNavigate } from "react-router-dom";
 14 | import { LoadingContext } from "../contexts/loading";
 15 | import { useEffect, useState } from "react";
 16 | import { MapToken, MapTokenContext, MapType } from "../contexts/map_token.tsx";
 17 | import axios from "axios";
 18 | import { Response } from "../models/gallery.ts";
 19 | import { HiOutlineTranslate } from "react-icons/hi";
 20 | import { useTranslation } from "react-i18next";
 21 | import moment from "moment";
 22 | import gradLeft from '../assets/gradients/left.png';
 23 | import gradRight from '../assets/gradients/right.png';
 24 | import { FaDice } from "react-icons/fa6";
 25 | 
 26 | const routes = [
 27 |   { route: '/', text: 'sidebar.home', icon: <TbHome size={22}/> },
 28 |   { route: '/shuin', text: 'sidebar.shuin', icon: <TbBook size={22}/> },
 29 |   { route: '/map', text: 'sidebar.map', icon: <TbMap size={22}/> },
 30 | ]
 31 | 
 32 | export default function Root() {
 33 |   const darkMode = useDarkMode(false, {
 34 |     classNameDark: 'dark',
 35 |     classNameLight: 'light',
 36 |     element: document.documentElement,
 37 |   });
 38 | 
 39 |   useEffect(() => {
 40 |     axios.get<Response<string>>('https://api.gallery.boar.ac.cn/geo/ip').then(async (res) => {
 41 |       if (res.data.payload === 'CN') {
 42 |         // mapbox
 43 |         axios.get<Response<string>>('https://api.gallery.boar.ac.cn/mapbox/token').then((res) => {
 44 |           setToken({ type: MapType.MapBox, token: res.data.payload })
 45 |         })
 46 |       } else {
 47 |         // apple map
 48 |         axios.get<Response<string>>('https://api.gallery.boar.ac.cn/mapkit-js/token').then((res) => {
 49 |           setToken({ type: MapType.Apple, token: res.data.payload })
 50 |         })
 51 |       }
 52 |     })
 53 |   }, [])
 54 | 
 55 |   const [loading, setLoading] = useState(false)
 56 |   const [token, setToken] = useState<MapToken>()
 57 |   const [isMenuOpen, setIsMenuOpen] = useState(false);
 58 |   const { t, i18n } = useTranslation()
 59 |   const navigate = useNavigate();
 60 | 
 61 |   return (
 62 |     <MapTokenContext.Provider value={{ token, setToken }}>
 63 |       <LoadingContext.Provider value={{ loading, setLoading }}>
 64 |         <div aria-hidden="true"
 65 |              className="fixed hidden dark:md:block dark:opacity-70 -bottom-[40%] -left-[20%] pointer-events-none">
 66 |           <img src={gradLeft}
 67 |                className="relative opacity-0 shadow-black/5 data-[loaded=true]:opacity-100 shadow-none transition-transform-opacity motion-reduce:transition-none duration-300! rounded-large"
 68 |                alt="left background" data-loaded="true"/>
 69 |         </div>
 70 | 
 71 |         <div aria-hidden="true"
 72 |              className="fixed hidden dark:md:block dark:opacity-70 -top-[80%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] rotate-12 pointer-events-none">
 73 |           <img src={gradRight}
 74 |                className="relative opacity-0 shadow-black/5 data-[loaded=true]:opacity-100 shadow-none transition-transform-opacity motion-reduce:transition-none duration-300! rounded-large"
 75 |                alt="right background" data-loaded="true"/>
 76 |         </div>
 77 | 
 78 |         <main
 79 |           className={`${darkMode.value ? 'dark' : ''} text-foreground scrollbar-hide`}>
 80 |           <Navbar onMenuOpenChange={setIsMenuOpen} isMenuOpen={isMenuOpen}>
 81 |             <NavbarBrand>
 82 |               <Link className="font-bold text-inherit text-logo" href='/'>Boar Gallery</Link>
 83 |             </NavbarBrand>
 84 |             <NavbarContent justify="end">
 85 |               <NavbarItem className={`${isMenuOpen ? '' : 'hidden'} sm:flex`}>
 86 |                 <Dropdown>
 87 |                   <DropdownTrigger>
 88 |                     <Button isIconOnly variant="light">
 89 |                       <HiOutlineTranslate size={20}/>
 90 |                     </Button>
 91 |                   </DropdownTrigger>
 92 |                   <DropdownMenu
 93 |                     aria-label="Single selection example"
 94 |                     variant="flat"
 95 |                     disallowEmptySelection
 96 |                     selectionMode="single"
 97 |                     selectedKeys={[i18n.language]}
 98 |                     onSelectionChange={(l) => i18n.changeLanguage((l as Set<string>).values().next().value)}
 99 |                   >
100 |                     <DropdownItem key="zh-CN">简体中文</DropdownItem>
101 |                     <DropdownItem key="en">English</DropdownItem>
102 |                     <DropdownItem key="ja">日本語</DropdownItem>
103 |                   </DropdownMenu>
104 |                 </Dropdown>
105 |               </NavbarItem>
106 |               <NavbarItem className={`${isMenuOpen ? '' : 'hidden'} sm:flex`}>
107 |                 <Button isIconOnly variant="flat" onPress={darkMode.toggle}>
108 |                   {
109 |                     darkMode.value ?
110 |                       <TbSun size={24}/>
111 |                       :
112 |                       <TbMoon size={20}/>
113 |                   }
114 |                 </Button>
115 |               </NavbarItem>
116 |               <NavbarMenuToggle className="sm:hidden ml-2"/>
117 |             </NavbarContent>
118 | 
119 |             <NavbarMenu>
120 |               {
121 |                 routes.map((r) => (
122 |                   <NavbarMenuItem key={r.route}>
123 |                     <Link
124 |                       className="w-full pt-3 font-bold"
125 |                       size="lg"
126 |                       onPress={() => {
127 |                         navigate(r.route)
128 |                         setIsMenuOpen(false)
129 |                       }}
130 |                       color='foreground'
131 |                     >
132 |                       {r.icon}
133 |                       <Spacer x={2}/>
134 |                       {t(r.text)}
135 |                     </Link>
136 |                   </NavbarMenuItem>
137 |                 ))
138 |               }
139 | 
140 |               <NavbarMenuItem key='lucky'>
141 |                 <Link
142 |                   className="w-full pt-3 font-bold"
143 |                   size="lg"
144 |                   onPress={async () => {
145 |                     const id = (await axios.get<Response<number>>('https://api.gallery.boar.ac.cn/photos/lucky')).data.payload
146 |                     navigate(`/photo/${id}`)
147 |                     setIsMenuOpen(false)
148 |                   }}
149 |                   color='foreground'
150 |                 >
151 |                   <FaDice size={22}/>
152 |                   <Spacer x={2}/>
153 |                   {t('sidebar.lucky')}
154 |                 </Link>
155 |               </NavbarMenuItem>
156 | 
157 |               <Divider className='mt-4 mb-4'/>
158 | 
159 |               <div className='text-tiny text-default-400'>
160 |                 <p>{t('copyright.reserved', { year: moment().year() })}</p>
161 |                 <p className='mt-2'>{t('copyright.description')}</p>
162 |               </div>
163 |             </NavbarMenu>
164 |           </Navbar>
165 | 
166 |           <div
167 |             className="mx-auto max-w-[1024px] flex"
168 |             style={{ minHeight: 'calc(100dvh - 4rem)' }}
169 |           >
170 |             <div className="max-w-64 hidden md:flex flex-col sticky top-20 h-full shrink-0">
171 |               <Listbox>
172 |                 {
173 |                   [...routes.map((r) => (
174 |                     <ListboxItem
175 |                       key={r.route}
176 |                       href={r.route}
177 |                       className="px-4 py-3"
178 |                       variant="flat"
179 |                       startContent={r.icon}
180 |                     >
181 |                       <p className="text-medium font-bold">{t(r.text)}</p>
182 |                     </ListboxItem>
183 |                   )),
184 |                     <ListboxItem
185 |                       key='lucky'
186 |                       onPress={async () => {
187 |                         const id = (await axios.get<Response<number>>('https://api.gallery.boar.ac.cn/photos/lucky')).data.payload
188 |                         navigate(`/photo/${id}`)
189 |                       }}
190 |                       className="px-4 py-3"
191 |                       variant="flat"
192 |                       startContent={<FaDice size={22}/>}
193 |                     >
194 |                       <p className="text-medium font-bold">{t('sidebar.lucky')}</p>
195 |                     </ListboxItem>
196 |                   ]
197 |                 }
198 |               </Listbox>
199 | 
200 |               <Divider className='mt-4 mb-4'/>
201 | 
202 |               <div className='text-tiny text-default-300 px-4'>
203 |                 <p>{t('copyright.reserved', { year: moment().year() })}</p>
204 |                 <p className='mt-2'>{t('copyright.description')}</p>
205 |               </div>
206 |             </div>
207 |             <div className='min-w-0' style={{ flex: '1 1 auto' }}>
208 |               <Outlet/>
209 |             </div>
210 |           </div>
211 |         </main>
212 |       </LoadingContext.Provider>
213 |     </MapTokenContext.Provider>
214 |   );
215 | }
216 | 


--------------------------------------------------------------------------------
/src/routes/photo.tsx:
--------------------------------------------------------------------------------
  1 | import { useParams } from "react-router-dom";
  2 | import { useEffect, useState, cloneElement, MouseEvent } from "react";
  3 | import { Photo, Response } from "../models/gallery.ts";
  4 | import axios from "axios";
  5 | import {
  6 |   Button,
  7 |   Card,
  8 |   CardBody,
  9 |   CardFooter,
 10 |   CardHeader,
 11 |   Divider,
 12 |   Image,
 13 |   Link,
 14 |   Switch,
 15 |   Tooltip
 16 | } from "@heroui/react";
 17 | import moment from "moment/moment";
 18 | import useMediaQuery from "../hooks/useMediaQuery.tsx";
 19 | import ManufactureIcon from "../components/manufacture_icon.tsx";
 20 | import DialogMap from "../components/dialog_map.tsx";
 21 | import { MdOutlineOpenInNew } from "react-icons/md";
 22 | import { IoCalendarOutline, IoLocationOutline } from "react-icons/io5";
 23 | import { PiMountains } from "react-icons/pi";
 24 | import { useTranslation } from "react-i18next";
 25 | import CameraName from "../components/camera_name.tsx";
 26 | import { RxQuestionMarkCircled } from "react-icons/rx";
 27 | import Zoom from 'react-medium-image-zoom'
 28 | 
 29 | export default function PhotoPage() {
 30 |   const { id } = useParams()
 31 |   const [photo, setPhoto] = useState<Photo>()
 32 |   const isDesktop = useMediaQuery('(min-width: 960px)');
 33 |   const { t } = useTranslation()
 34 |   const [showHDR, setShowHDR] = useState(false);
 35 | 
 36 |   useEffect(() => {
 37 |     axios.get<Response<Photo>>('https://api.gallery.boar.ac.cn/photos/get', {
 38 |       params: { id }
 39 |     }).then((res) => {
 40 |       setPhoto(res.data.payload)
 41 |     })
 42 |   }, [id])
 43 | 
 44 |   if (!photo) return null;
 45 | 
 46 |   return (
 47 |     <div className='scrollbar-hide px-[10px] md:px-[20px] box-content pt-4 pb-12'>
 48 |       <div className='text-5xl mb-8 md:mb-12 ml-2 pt-2'>
 49 |         #{id}
 50 |       </div>
 51 | 
 52 |       <Card
 53 |         isFooterBlurred
 54 |         radius="lg"
 55 |         className="border-none"
 56 |       >
 57 |         <Zoom
 58 |           ZoomContent={({ buttonUnzoom, img, }) => <>
 59 |             {buttonUnzoom}
 60 |             {img ? cloneElement(img, {
 61 |               // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 62 |               // @ts-expect-error
 63 |               draggable: false,
 64 |               onContextMenu: (e: MouseEvent<HTMLImageElement>) => e.preventDefault()
 65 |             }) : null}
 66 |           </>}
 67 |         >
 68 |           <Image
 69 |             isBlurred
 70 |             className={`object-contain ${isDesktop ? 'max-h-128' : ''}`}
 71 |             draggable={false}
 72 |             classNames={{
 73 |               // img: 'pointer-events-none',
 74 |               // blurredImg: 'pointer-events-none'
 75 |             }}
 76 |             onContextMenu={(e) => e.preventDefault()}
 77 |             src={showHDR ? photo.hdr_file!.url : photo.large_file!.url}
 78 |             width={showHDR ? photo.hdr_file!.width : photo.large_file!.width}
 79 |             height={showHDR ? photo.hdr_file!.height : photo.large_file!.height}
 80 |             style={{ height: 'auto' }}
 81 |           />
 82 |         </Zoom>
 83 |         <CardFooter
 84 |           className="justify-between before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 absolute before:rounded-xl rounded-large bottom-1 shadow-small right-1 z-10 w-auto font-normal">
 85 |           <div
 86 |             className='text-tiny md:text-small text-white/80'>&copy; {moment(photo.metadata.datetime).year()} {photo.author?.name}</div>
 87 |         </CardFooter>
 88 |       </Card>
 89 | 
 90 |       {
 91 |         photo.hdr_file ?
 92 |           <div className='mt-4 flex justify-end'>
 93 |             <div className='flex justify-center items-center gap-2'>
 94 |               <Switch isSelected={showHDR} onValueChange={setShowHDR}>
 95 |                 {t('photo.enable_hdr')}
 96 |               </Switch>
 97 |               <Tooltip
 98 |                 content={t('photo.hdr_tooltip')}
 99 |                 showArrow
100 |               >
101 |                 <div>
102 |                   <RxQuestionMarkCircled/>
103 |                 </div>
104 |               </Tooltip>
105 |             </div>
106 |           </div>
107 |           :
108 |           null
109 |       }
110 | 
111 |       <div className='gap-4 grid grid-cols-1 md:grid-cols-2 mt-4 pb-4'>
112 |         <div>
113 |           <Card>
114 |             <CardBody>
115 |               <div className='flex flex-col gap-1'>
116 |                 {
117 |                   photo.metadata.city ?
118 |                     <div className='flex items-center text-default-500 gap-2'>
119 |                       <IoLocationOutline className='shrink-0' size={20}/>
120 |                       <div className='flex flex-wrap gap-x-3'>
121 |                         <div className='flex gap-1'>
122 |                           <Link color='foreground'
123 |                                 className="font-bold">{photo.metadata.city.prefecture.country.name}</Link>
124 |                           <Link color='foreground' className="font-bold"
125 |                                 href={`/prefecture/${photo.metadata.city.prefecture.id}`}>{photo.metadata.city.prefecture.name}</Link>
126 |                           <Link color='foreground' className="font-bold"
127 |                                 href={`/prefecture/${photo.metadata.city.prefecture.id}/city/${photo.metadata.city.id}`}>{photo.metadata.city.name}</Link>
128 |                         </div>
129 |                         {
130 |                           photo.metadata.place ?
131 |                             <div className='flex items-center'>
132 |                               <Link color='foreground'>{photo.metadata.place.name}</Link>
133 |                             </div>
134 |                             :
135 |                             null
136 |                         }
137 |                       </div>
138 |                     </div>
139 |                     :
140 |                     null
141 |                 }
142 | 
143 |                 <div className='flex items-center text-default-500 gap-2'>
144 |                   <IoCalendarOutline size={20}/>
145 |                   <div>
146 |                     {moment(photo.metadata.datetime).utcOffset(`+${photo.metadata.timezone.split('+')[1]}`).format('M/D HH:mm ([GMT]Z)')}
147 |                   </div>
148 |                 </div>
149 | 
150 |                 {
151 |                   photo.metadata.altitude ?
152 |                     <div className='flex items-center text-default-500 gap-2'>
153 |                       <PiMountains size={20}/>
154 |                       <div>
155 |                         {parseFloat(photo.metadata.altitude.toFixed(2))}m
156 |                       </div>
157 |                     </div>
158 |                     :
159 |                     null
160 |                 }
161 |               </div>
162 |             </CardBody>
163 |           </Card>
164 | 
165 |           <Card className='overflow-visible mt-4'>
166 |             <CardHeader className='text-small font-semibold bg-default-100 py-2'>
167 |               <ManufactureIcon name={photo.metadata.camera?.manufacture.name}/>
168 |               <CameraName camera={photo.metadata.camera}/>
169 |             </CardHeader>
170 |             <CardBody className='text-small text-default-500 py-2 overflow-y-visible'>
171 |               {photo.metadata.lens ?
172 |                 `${photo.metadata.lens.manufacture.name} ${photo.metadata.lens.model}`
173 |                 :
174 |                 t('unknown_lens')
175 |               }
176 |             </CardBody>
177 |             <Divider className='bg-default-100'/>
178 |             <CardFooter className='py-2 flex justify-around text-default-500'>
179 |               <code className='text-small'>ISO {photo.metadata.photographic_sensitivity}</code>
180 |               <code className='text-small text-default-300 font-extralight'>|</code>
181 |               <code className='text-small'>ƒ{photo.metadata.f_number}</code>
182 |               <code className='text-small text-default-300 font-extralight'>|</code>
183 |               <code className='text-small'>{photo.metadata.exposure_time_rat} s</code>
184 |               <code className='text-small text-default-300 font-extralight'>|</code>
185 |               <code className='text-small'>{photo.metadata.focal_length} mm</code>
186 |             </CardFooter>
187 |           </Card>
188 |         </div>
189 | 
190 |         {
191 |           photo.metadata.location &&
192 |             <Card className='overflow-hidden min-h-[200px] md:min-h-0' isFooterBlurred>
193 |                 <DialogMap coordinate={photo.metadata.location}/>
194 |                 <CardFooter
195 |                     className="justify-between before:bg-white/10 border-white/20 border-1 overflow-hidden p-0 absolute before:rounded-xl rounded-large bottom-1 shadow-small right-1 z-10 w-auto font-normal">
196 |                     <Button
197 |                         className="text-tiny text-white bg-black/20"
198 |                         variant="flat"
199 |                         color="default"
200 |                         radius="lg"
201 |                         size="sm"
202 |                         isIconOnly
203 |                         onPress={() => {
204 |                           window.open(`https://maps.google.com/?q=${photo.metadata.location!.latitude},${photo.metadata.location!.longitude}`)
205 |                         }}
206 |                     >
207 |                         <MdOutlineOpenInNew size={16}/>
208 |                     </Button>
209 |                 </CardFooter>
210 |             </Card>
211 |         }
212 |       </div>
213 |     </div>
214 |   );
215 | }
216 | 


--------------------------------------------------------------------------------
/src/components/shuin_modal.tsx:
--------------------------------------------------------------------------------
  1 | import { Response, Shuin } from "../models/gallery.ts";
  2 | import {
  3 |   Image,
  4 |   Modal,
  5 |   ModalContent,
  6 |   ModalHeader,
  7 |   ModalBody, Spacer, Card, CardFooter, Button, Chip
  8 | } from "@heroui/react";
  9 | import { IoCalendarOutline, IoLocationOutline, IoPricetagOutline } from "react-icons/io5";
 10 | import moment from "moment";
 11 | import useMediaQuery from "../hooks/useMediaQuery.tsx";
 12 | import DialogMap from "./dialog_map.tsx";
 13 | import { MdOutlineOpenInNew } from "react-icons/md";
 14 | import { useTranslation } from "react-i18next";
 15 | import { useEffect, useMemo, useState } from "react";
 16 | import axios from "axios";
 17 | 
 18 | export interface ShuinModalProps {
 19 |   shuin: Shuin
 20 |   isOpen: boolean,
 21 |   onOpenChange: (isOpen: boolean, path?: string) => void;
 22 | }
 23 | 
 24 | export default function ShuinModal(props: ShuinModalProps) {
 25 |   const isDesktop = useMediaQuery('(min-width: 960px)');
 26 |   const { t } = useTranslation()
 27 |   const [shuin, setShuin] = useState(props.shuin)
 28 |   const [loading, setLoading] = useState(true)
 29 | 
 30 |   useEffect(() => {
 31 |     if (props.isOpen) {
 32 |       setLoading(true)
 33 |       setTimeout(() => {
 34 |         axios.get<Response<Shuin>>(`https://api.gallery.boar.ac.cn/shuin/get?id=${props.shuin.id}`).then(res => {
 35 |           setShuin(res.data.payload)
 36 |           setLoading(false)
 37 |         })
 38 |       }, 100)
 39 |     }
 40 |   }, [props.isOpen, props.shuin.id])
 41 | 
 42 |   // if (!photo.medium_file) return null;
 43 |   const isPortrait = shuin.thumb_file.width <= shuin.thumb_file.height;
 44 | 
 45 |   const cityLinks = useMemo(() => <div className='flex gap-1'>
 46 |     <div color='foreground'
 47 |          className="font-bold">{shuin.place.city?.prefecture.name}</div>
 48 |     <div color='foreground'
 49 |          className="font-bold">{shuin.place.city?.name}</div>
 50 |   </div>, [shuin.place.city?.prefecture.name, shuin.place.city?.name])
 51 | 
 52 |   const modal = useMemo(() => {
 53 |     return <ModalContent className='overflow-hidden'>
 54 |       {() => (
 55 |         (!isDesktop) || (!isPortrait) ?
 56 |           <>
 57 |             <ModalHeader className="p-0 flex flex-col gap-1">
 58 |               <Card
 59 |                 isFooterBlurred
 60 |                 radius="lg"
 61 |                 className="border-none items-center"
 62 |               >
 63 |                 <Image
 64 |                   isBlurred
 65 |                   draggable={false}
 66 |                   classNames={{
 67 |                     img: 'pointer-events-none',
 68 |                     blurredImg: 'pointer-events-none'
 69 |                   }}
 70 |                   className="object-contain"
 71 |                   src={shuin.medium_file?.url}
 72 |                   width={shuin.medium_file?.width}
 73 |                   height={shuin.medium_file?.height}
 74 |                   style={{ maxHeight: isDesktop ? 'calc(100dvh - 20rem)' : 'calc(100dvh - 18rem)', height: 'auto' }}
 75 |                 />
 76 |                 <CardFooter
 77 |                   className="justify-between before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 absolute before:rounded-xl rounded-large bottom-1 shadow-small right-1 z-10 w-auto font-normal">
 78 |                   <div
 79 |                     className='text-tiny md:text-small text-black/80'>&copy; {moment(shuin.date).year()} {shuin.place.name}</div>
 80 |                 </CardFooter>
 81 |               </Card>
 82 |             </ModalHeader>
 83 |             <ModalBody className="p-4">
 84 |               <div className='flex flex-wrap items-center gap-1 justify-between'>
 85 |                 {
 86 |                   shuin.place.city ?
 87 |                     <div className='flex items-center text-default-500 gap-1'>
 88 |                       <IoLocationOutline className='shrink-0' size={20}/>
 89 |                       <div className='flex flex-wrap gap-x-3'>
 90 |                         {cityLinks}
 91 |                         <div className='flex items-center'>
 92 |                           <div color='foreground'>{shuin.place.name}</div>
 93 |                         </div>
 94 |                       </div>
 95 |                     </div>
 96 |                     :
 97 |                     <div />
 98 |                 }
 99 | 
100 |                 <div className='flex items-center gap-4'>
101 |                   <div className='flex items-center text-small text-default-500 gap-1.5'>
102 |                     <IoCalendarOutline size={18}/>
103 |                     <div>
104 |                       {moment(shuin.date).format('YYYY/MM')}
105 |                     </div>
106 |                   </div>
107 | 
108 |                   <div className='flex items-center text-small text-default-500 gap-1.5'>
109 |                     <IoPricetagOutline size={18}/>
110 |                     <div>
111 |                       {shuin.price} {t('shuin.yen')}
112 |                     </div>
113 |                   </div>
114 |                 </div>
115 |               </div>
116 | 
117 |               <div className='gap-4 grid grid-cols-1 md:grid-cols-2'>
118 |                 <div className='py-2 flex space-x-2 text-default-500'>
119 |                   <Chip variant="flat">
120 |                     {t(`shuin.type.${shuin.type}`)}
121 |                   </Chip>
122 | 
123 |                   {
124 |                     shuin.is_limited ?
125 |                       <Chip color="warning" variant="flat">
126 |                         {t('shuin.is_limited')}
127 |                       </Chip>
128 |                       :
129 |                       null
130 |                   }
131 |                 </div>
132 | 
133 |                 <Card className='overflow-hidden min-h-[109px]' isFooterBlurred>
134 |                   <DialogMap coordinate={shuin.place.geom}/>
135 |                   <CardFooter
136 |                     className="justify-between before:bg-white/10 border-white/20 border-1 overflow-hidden p-0 absolute before:rounded-xl rounded-large bottom-1 shadow-small right-1 z-10 w-auto font-normal">
137 |                     <Button
138 |                       className="text-tiny text-white bg-black/20"
139 |                       variant="flat"
140 |                       color="default"
141 |                       radius="lg"
142 |                       size="sm"
143 |                       isIconOnly
144 |                       onPress={() => {
145 |                         window.open(`https://maps.google.com/?q=${shuin.place.geom.latitude},${shuin.place.geom.longitude}`)
146 |                       }}
147 |                     >
148 |                       <MdOutlineOpenInNew size={16}/>
149 |                     </Button>
150 |                   </CardFooter>
151 |                 </Card>
152 |               </div>
153 |             </ModalBody>
154 |           </>
155 |           :
156 |           <>
157 |             <ModalHeader className="p-0 flex flex-col gap-1"/>
158 |             <ModalBody className="p-0 overflow-hidden">
159 |               <div className='flex overflow-hidden'>
160 |                 <div className='w-[54%]'>
161 |                   <Card
162 |                     isFooterBlurred
163 |                     radius="lg"
164 |                     className="border-none h-full"
165 |                   >
166 |                     <Image
167 |                       isBlurred
168 |                       classNames={{
169 |                         wrapper: 'h-full',
170 |                         zoomedWrapper: 'h-full',
171 |                         blurredImg: 'h-full pointer-events-none',
172 |                         img: 'pointer-events-none',
173 |                       }}
174 |                       className="object-contain h-full"
175 |                       src={shuin.medium_file?.url}
176 |                       width={shuin.medium_file?.width}
177 |                       height={shuin.medium_file?.height}
178 |                       style={{ height: 'auto', maxHeight: '100%' }}
179 |                     />
180 |                     <CardFooter
181 |                       className="justify-between before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 absolute before:rounded-xl rounded-large bottom-1 shadow-small right-1 z-10 w-auto font-normal">
182 |                       <div
183 |                         className='text-tiny md:text-small text-black/80'>&copy; {moment(shuin.date).year()} {shuin.place.name}</div>
184 |                     </CardFooter>
185 |                   </Card>
186 |                 </div>
187 | 
188 |                 <div className='w-[46%] p-6 flex flex-col gap-1 justify-end'>
189 |                   {
190 |                     shuin.place.city ?
191 |                       <div className='flex items-center text-default-500 gap-1'>
192 |                         <IoLocationOutline size={20}/>
193 |                         <div className='flex flex-wrap gap-x-3'>
194 |                           {cityLinks}
195 |                           <div className='flex items-center'>
196 |                             <div color='foreground'>{shuin.place.name}</div>
197 |                           </div>
198 |                         </div>
199 |                       </div>
200 |                       :
201 |                       null
202 |                   }
203 | 
204 |                   <div className='flex items-center gap-4'>
205 |                     <div className='flex items-center text-default-500 gap-1 text-small'>
206 |                       <IoCalendarOutline size={20}/>
207 |                       {moment(shuin.date).format('YYYY/MM')}
208 |                     </div>
209 | 
210 |                     <div className='flex items-center text-default-500 gap-1 text-small'>
211 |                       <IoPricetagOutline size={20}/>
212 |                       {shuin.price} {t('shuin.yen')}
213 |                     </div>
214 |                   </div>
215 | 
216 |                   <div className='py-2 flex space-x-2 text-default-500'>
217 |                     <Chip variant="flat">
218 |                       {t(`shuin.type.${shuin.type}`)}
219 |                     </Chip>
220 | 
221 |                     {
222 |                       shuin.is_limited ?
223 |                         <Chip color="warning" variant="flat">
224 |                           {t('shuin.is_limited')}
225 |                         </Chip>
226 |                         :
227 |                         null
228 |                     }
229 |                   </div>
230 | 
231 |                   <Spacer y={4}/>
232 | 
233 |                   <div className='gap-4 grid grid-cols-1'>
234 |                     <Card className='overflow-hidden min-h-[256px]' isFooterBlurred>
235 |                       <DialogMap coordinate={shuin.place.geom}/>
236 |                       <CardFooter
237 |                         className="justify-between before:bg-white/10 border-white/20 border-1 overflow-hidden p-0 absolute before:rounded-xl rounded-large bottom-1 shadow-small right-1 z-10 w-auto font-normal">
238 |                         <Button
239 |                           className="text-tiny text-white bg-black/20"
240 |                           variant="flat"
241 |                           color="default"
242 |                           radius="lg"
243 |                           size="sm"
244 |                           isIconOnly
245 |                           onPress={() => {
246 |                             window.open(`https://maps.google.com/?q=${shuin.place.geom.latitude},${shuin.place.geom.longitude}`)
247 |                           }}
248 |                         >
249 |                           <MdOutlineOpenInNew size={16}/>
250 |                         </Button>
251 |                       </CardFooter>
252 |                     </Card>
253 |                   </div>
254 |                 </div>
255 |               </div>
256 |             </ModalBody>
257 |           </>
258 |       )}
259 |     </ModalContent>
260 |   }, [cityLinks, isDesktop, isPortrait, loading, shuin.date, shuin.medium_file?.height, shuin.medium_file?.url, shuin.medium_file?.width, shuin.place.city, shuin.place.geom, shuin.place.name])
261 | 
262 |   return <Modal
263 |     isOpen={props.isOpen}
264 |     onOpenChange={props.onOpenChange}
265 |     backdrop='blur'
266 |     size='4xl'
267 |     scrollBehavior='inside'
268 |     classNames={{
269 |       closeButton: 'z-20'
270 |     }}
271 |   >
272 |     {modal}
273 |   </Modal>;
274 | }
275 | 


--------------------------------------------------------------------------------
/src/components/photo_modal.tsx:
--------------------------------------------------------------------------------
  1 | import { Photo, Response } from "../models/gallery.ts";
  2 | import {
  3 |   Image,
  4 |   Modal,
  5 |   ModalContent,
  6 |   ModalHeader,
  7 |   ModalBody, Link, Spacer, Card, CardFooter, CardHeader, CardBody, Divider, Button, Skeleton
  8 | } from "@heroui/react";
  9 | import { IoCalendarOutline, IoLocationOutline } from "react-icons/io5";
 10 | import moment from "moment";
 11 | import useMediaQuery from "../hooks/useMediaQuery.tsx";
 12 | import ManufactureIcon from "./manufacture_icon.tsx";
 13 | import DialogMap from "./dialog_map.tsx";
 14 | import { MdOutlineOpenInNew } from "react-icons/md";
 15 | import { useTranslation } from "react-i18next";
 16 | import { useEffect, useMemo, useState } from "react";
 17 | import axios from "axios";
 18 | import CameraName from "./camera_name.tsx";
 19 | 
 20 | export interface PhotoModalProps {
 21 |   photo: Photo
 22 |   isOpen: boolean,
 23 |   onOpenChange: (isOpen: boolean, path?: string) => void;
 24 | }
 25 | 
 26 | export default function PhotoModal(props: PhotoModalProps) {
 27 |   const isDesktop = useMediaQuery('(min-width: 960px)');
 28 |   const { t } = useTranslation()
 29 |   const [photo, setPhoto] = useState(props.photo)
 30 |   const [loading, setLoading] = useState(true)
 31 | 
 32 |   useEffect(() => {
 33 |     if (props.isOpen) {
 34 |       setLoading(true)
 35 |       setTimeout(() => {
 36 |         axios.get<Response<Photo>>(`https://api.gallery.boar.ac.cn/photos/get?id=${props.photo.id}`).then(res => {
 37 |           setPhoto(res.data.payload)
 38 |           setLoading(false)
 39 |         })
 40 |       }, 100)
 41 |     }
 42 |   }, [props.isOpen, props.photo.id])
 43 | 
 44 |   // if (!photo.medium_file) return null;
 45 |   const isPortrait = photo.thumb_file.width <= photo.thumb_file.height;
 46 |   const photoDateTime = moment(photo.metadata.datetime).utcOffset(`+${photo.metadata.timezone.split('+')[1]}`).format('M/D HH:mm ([GMT]Z)');
 47 | 
 48 |   const cityLinks = useMemo(() => <div className='flex gap-1'>
 49 |     <Link color='foreground'
 50 |           className="font-bold">{photo.metadata.city?.prefecture.country.name}</Link>
 51 |     <Link
 52 |       color='foreground'
 53 |       className="font-bold cursor-pointer"
 54 |       onPress={() => props.onOpenChange(false, `/prefecture/${photo.metadata.city?.prefecture.id}`)}
 55 |     >
 56 |       {photo.metadata.city?.prefecture.name}
 57 |     </Link>
 58 |     <Link
 59 |       color='foreground'
 60 |       className="font-bold cursor-pointer"
 61 |       onPress={() => props.onOpenChange(false, `/prefecture/${photo.metadata.city?.prefecture.id}/city/${photo.metadata.city?.id}`)}
 62 |     >
 63 |       {photo.metadata.city?.name}
 64 |     </Link>
 65 |   </div>, [photo.metadata.city?.id, photo.metadata.city?.name, photo.metadata.city?.prefecture.country.name, photo.metadata.city?.prefecture.id, photo.metadata.city?.prefecture.name, props])
 66 | 
 67 |   const modal = useMemo(() => {
 68 |     return <ModalContent className='overflow-hidden'>
 69 |       {() => (
 70 |         (!isDesktop) || (!isPortrait) ?
 71 |           <>
 72 |             <ModalHeader className="p-0 flex flex-col gap-1">
 73 |               <Card
 74 |                 isFooterBlurred
 75 |                 radius="lg"
 76 |                 className="border-none"
 77 |               >
 78 |                 <Image
 79 |                   isBlurred
 80 |                   draggable={false}
 81 |                   classNames={{
 82 |                     img: 'pointer-events-none',
 83 |                     blurredImg: 'pointer-events-none'
 84 |                   }}
 85 |                   className="object-contain"
 86 |                   src={photo.medium_file?.url}
 87 |                   width={photo.medium_file?.width}
 88 |                   height={photo.medium_file?.height}
 89 |                   style={{ maxHeight: isDesktop ? 'calc(100dvh - 20rem)' : 'calc(100dvh - 18rem)', height: 'auto' }}
 90 |                 />
 91 |                 <CardFooter
 92 |                   className="justify-between before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 absolute before:rounded-xl rounded-large bottom-1 shadow-small right-1 z-10 w-auto font-normal">
 93 |                   <div
 94 |                     className='text-tiny md:text-small text-white/80'>&copy; {moment(photo.metadata.datetime).year()} {photo.author?.name}</div>
 95 |                 </CardFooter>
 96 |               </Card>
 97 |             </ModalHeader>
 98 |             <ModalBody className="p-4">
 99 |               <div className='flex flex-wrap items-center justify-between'>
100 |                 {
101 |                   photo.metadata.city ?
102 |                     <div className='flex items-center text-default-500 gap-1'>
103 |                       <IoLocationOutline className='shrink-0' size={20}/>
104 |                       <div className='flex flex-wrap gap-x-3'>
105 |                         {cityLinks}
106 |                         {
107 |                           photo.metadata.place ?
108 |                             <div className='flex items-center'>
109 |                               <Link color='foreground'>{photo.metadata.place.name}</Link>
110 |                             </div>
111 |                             :
112 |                             null
113 |                         }
114 |                       </div>
115 |                     </div>
116 |                     :
117 |                     null
118 |                 }
119 | 
120 |                 <div className='flex items-center text-small text-default-500 gap-1.5'>
121 |                   <IoCalendarOutline size={18}/>
122 |                   <div>
123 |                     {photoDateTime}
124 |                   </div>
125 |                 </div>
126 |               </div>
127 | 
128 |               <div className='gap-4 grid grid-cols-1 md:grid-cols-2'>
129 |                 <Card className='overflow-visible'>
130 |                   <CardHeader className='text-small font-semibold bg-default-100 py-2'>
131 |                     {
132 |                       loading ?
133 |                         <Skeleton className="w-2/5 rounded-lg">
134 |                           <div className="h-5 w-2/5 rounded-lg bg-default-200"></div>
135 |                         </Skeleton>
136 |                         :
137 |                         <>
138 |                           <ManufactureIcon
139 |                             name={photo.metadata.camera?.manufacture.name}/>
140 |                           <CameraName camera={photo.metadata.camera}/>
141 |                         </>
142 |                     }
143 |                   </CardHeader>
144 |                   <CardBody className='text-small text-default-500 py-2 overflow-y-visible'>
145 |                     {
146 |                       loading ?
147 |                         <Skeleton className="w-4/5 rounded-lg">
148 |                           <div className="h-5 w-4/5 rounded-lg bg-default-200"></div>
149 |                         </Skeleton>
150 |                         :
151 |                         (photo.metadata.lens ?
152 |                             `${photo.metadata.lens?.manufacture.name} ${photo.metadata.lens?.model}`
153 |                             :
154 |                             t('unknown_lens')
155 |                         )
156 |                     }
157 |                   </CardBody>
158 |                   <Divider className='bg-default-100'/>
159 |                   <CardFooter className='py-2 flex justify-around text-default-500'>
160 |                     <code className='text-small'>ISO {photo.metadata.photographic_sensitivity}</code>
161 |                     <code className='text-small text-default-300 font-extralight'>|</code>
162 |                     <code className='text-small'>ƒ{photo.metadata.f_number}</code>
163 |                     <code className='text-small text-default-300 font-extralight'>|</code>
164 |                     <code className='text-small'>{photo.metadata.exposure_time_rat} s</code>
165 |                     <code className='text-small text-default-300 font-extralight'>|</code>
166 |                     <code className='text-small'>{photo.metadata.focal_length} mm</code>
167 |                   </CardFooter>
168 |                 </Card>
169 | 
170 |                 {
171 |                   (photo.metadata.has_location || photo.metadata.location) ?
172 |                     (
173 |                       photo.metadata.location ?
174 |                         <Card className='overflow-hidden min-h-[109px] md:min-h-0' isFooterBlurred>
175 |                           <DialogMap coordinate={photo.metadata.location}/>
176 |                           <CardFooter
177 |                             className="justify-between before:bg-white/10 border-white/20 border-1 overflow-hidden p-0 absolute before:rounded-xl rounded-large bottom-1 shadow-small right-1 z-10 w-auto font-normal">
178 |                             <Button
179 |                               className="text-tiny text-white bg-black/20"
180 |                               variant="flat"
181 |                               color="default"
182 |                               radius="lg"
183 |                               size="sm"
184 |                               isIconOnly
185 |                               onPress={() => {
186 |                                 window.open(`https://maps.google.com/?q=${photo.metadata.location?.latitude},${photo.metadata.location?.longitude}`)
187 |                               }}
188 |                             >
189 |                               <MdOutlineOpenInNew size={16}/>
190 |                             </Button>
191 |                           </CardFooter>
192 |                         </Card>
193 |                         :
194 |                         <div className='min-h-[109px]'/>
195 |                     )
196 |                     :
197 |                     null
198 |                 }
199 |               </div>
200 |             </ModalBody>
201 |           </>
202 |           :
203 |           <>
204 |             <ModalHeader className="p-0 flex flex-col gap-1"/>
205 |             <ModalBody className="p-0 overflow-hidden">
206 |               <div className='flex overflow-hidden'>
207 |                 <div className='w-[54%]'>
208 |                   <Card
209 |                     isFooterBlurred
210 |                     radius="lg"
211 |                     className="border-none h-full"
212 |                   >
213 |                     <Image
214 |                       isBlurred
215 |                       classNames={{
216 |                         wrapper: 'h-full',
217 |                         zoomedWrapper: 'h-full',
218 |                         blurredImg: 'h-full pointer-events-none',
219 |                         img: 'pointer-events-none',
220 |                       }}
221 |                       className="object-contain h-full"
222 |                       src={photo.medium_file?.url}
223 |                       width={photo.medium_file?.width}
224 |                       height={photo.medium_file?.height}
225 |                       style={{ height: 'auto' }}
226 |                     />
227 |                     <CardFooter
228 |                       className="justify-between before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 absolute before:rounded-xl rounded-large bottom-1 shadow-small right-1 z-10 w-auto font-normal">
229 |                       <div
230 |                         className='text-tiny md:text-small text-white/80'>&copy; {moment(photo.metadata.datetime).year()} {photo.author?.name}</div>
231 |                     </CardFooter>
232 |                   </Card>
233 |                 </div>
234 | 
235 |                 <div className='w-[46%] p-6 flex flex-col gap-1 justify-end'>
236 |                   {
237 |                     photo.metadata.city ?
238 |                       <div className='flex items-center text-default-500 gap-1'>
239 |                         <IoLocationOutline size={20}/>
240 |                         <div className='flex gap-x-3 flex-wrap'>
241 |                           {cityLinks}
242 |                           {
243 |                             photo.metadata.place ?
244 |                               <div className='flex items-center'>
245 |                                 <Link color='foreground'>{photo.metadata.place.name}</Link>
246 |                               </div>
247 |                               :
248 |                               null
249 |                           }
250 |                         </div>
251 |                       </div>
252 |                       :
253 |                       null
254 |                   }
255 | 
256 |                   <div className='flex items-center text-default-500 gap-1 text-small'>
257 |                     <IoCalendarOutline size={20}/>
258 |                     {photoDateTime}
259 |                   </div>
260 | 
261 |                   <Spacer y={4}/>
262 | 
263 |                   <div className='gap-4 grid grid-cols-1'>
264 |                     <Card className='overflow-visible'>
265 |                       <CardHeader className='text-small font-semibold bg-default-100 py-2'>
266 |                         {
267 |                           loading ?
268 |                             <Skeleton className="w-2/5 rounded-lg">
269 |                               <div className="h-5 w-2/5 rounded-lg bg-default-200"></div>
270 |                             </Skeleton>
271 |                             :
272 |                             <>
273 |                               <ManufactureIcon
274 |                                 name={photo.metadata.camera?.manufacture.name}/>
275 |                               <CameraName camera={photo.metadata.camera}/>
276 |                             </>
277 |                         }
278 |                       </CardHeader>
279 |                       <CardBody className='text-small text-default-500 py-2 overflow-y-visible'>
280 |                         {
281 |                           loading ?
282 |                             <Skeleton className="w-4/5 rounded-lg">
283 |                               <div className="h-5 w-4/5 rounded-lg bg-default-200"></div>
284 |                             </Skeleton>
285 |                             :
286 |                             `${photo.metadata.lens?.manufacture.name} ${photo.metadata.lens?.model}`
287 |                         }
288 |                       </CardBody>
289 |                       <Divider className='bg-default-100'/>
290 |                       <CardFooter className='py-2 flex justify-around text-default-500'>
291 |                         <code className='text-small'>ISO {photo.metadata.photographic_sensitivity}</code>
292 |                         <code className='text-small text-default-300 font-extralight'>|</code>
293 |                         <code className='text-small'>ƒ{photo.metadata.f_number}</code>
294 |                         <code className='text-small text-default-300 font-extralight'>|</code>
295 |                         <code className='text-small'>{photo.metadata.exposure_time_rat} s</code>
296 |                         <code className='text-small text-default-300 font-extralight'>|</code>
297 |                         <code className='text-small'>{photo.metadata.focal_length} mm</code>
298 |                       </CardFooter>
299 |                     </Card>
300 | 
301 |                     {
302 |                       (photo.metadata.has_location || photo.metadata.location) ?
303 |                         (
304 |                           photo.metadata.location ?
305 |                             <Card className='overflow-hidden min-h-[256px]' isFooterBlurred>
306 |                               <DialogMap coordinate={photo.metadata.location}/>
307 |                               <CardFooter
308 |                                 className="justify-between before:bg-white/10 border-white/20 border-1 overflow-hidden p-0 absolute before:rounded-xl rounded-large bottom-1 shadow-small right-1 z-10 w-auto font-normal">
309 |                                 <Button
310 |                                   className="text-tiny text-white bg-black/20"
311 |                                   variant="flat"
312 |                                   color="default"
313 |                                   radius="lg"
314 |                                   size="sm"
315 |                                   isIconOnly
316 |                                   onPress={() => {
317 |                                     window.open(`https://maps.google.com/?q=${photo.metadata.location?.latitude},${photo.metadata.location?.longitude}`)
318 |                                   }}
319 |                                 >
320 |                                   <MdOutlineOpenInNew size={16}/>
321 |                                 </Button>
322 |                               </CardFooter>
323 |                             </Card>
324 |                             :
325 |                             <div className='min-h-[256px]'/>
326 |                         )
327 |                         :
328 |                         null
329 |                     }
330 |                   </div>
331 |                 </div>
332 |               </div>
333 |             </ModalBody>
334 |           </>
335 |       )}
336 |     </ModalContent>
337 |   }, [cityLinks, isDesktop, isPortrait, loading, photo.author?.name, photo.medium_file?.height, photo.medium_file?.url, photo.medium_file?.width, photo.metadata.camera, photo.metadata.city, photo.metadata.datetime, photo.metadata.exposure_time_rat, photo.metadata.f_number, photo.metadata.focal_length, photo.metadata.has_location, photo.metadata.lens, photo.metadata.location, photo.metadata.photographic_sensitivity, photo.metadata.place, photo.metadata.timezone, t])
338 | 
339 |   return <Modal
340 |     isOpen={props.isOpen}
341 |     onOpenChange={props.onOpenChange}
342 |     backdrop='blur'
343 |     size='4xl'
344 |     scrollBehavior='inside'
345 |     classNames={{
346 |       closeButton: 'z-20'
347 |     }}
348 |   >
349 |     {modal}
350 |   </Modal>;
351 | }
352 | 


--------------------------------------------------------------------------------