[add] AGPL-3.0 license

[optimize] several UI & logic details
[optimize] update ReadMe document

ReadMe.md

@@ -1,11 +1,8 @@
-![](src/image/logo.png)
+# Wiki map
 
-# React-MobX-Bootstrap.ts
+Wiki map [PWA][4] with [Text-to-Speak][5] support, which is based on [OpenStreetMap][14] & [Wikipedia API][15], and can be used as a **trusted Tour guide**.
 
-[React][1] project scaffold based on [TypeScript][2], [MobX][3] & [Bootstrap][4],
-which is inspired by [WebCell scaffold][5].
-
-[![CI & CD](https://github.com/idea2app/React-MobX-Bootstrap-ts/workflows/CI%20&%20CD/badge.svg)][7]
+[![CI & CD](https://github.com/Open-Source-Bazaar/Wiki-map/actions/workflows/main.yml/badge.svg)][7]
 
 ## Technology stack
 
@@ -18,13 +15,6 @@ which is inspired by [WebCell scaffold][5].
 -   Package bundler: [Parcel v2][11]
 -   CI / CD: GitHub [Actions][12] + [Pages][13]
 
-## Extra components
-
-1. [Component Sample](src/component/TSXSample.tsx)
-2. Rich-text editor
-    - [HTML version][14]
-    - [JSON version](src/component/Editor.tsx)
-
 ## Development
 
 ```shell
@@ -41,16 +31,27 @@ npm start
 pnpm build
 ```
 
+## Inspired by
+
+1. https://en.wikipedia.org/wiki/Special:Nearby
+2. https://www.producthunt.com/products/wiki-map
+3. https://www.osmand.net/docs/user/plugins/wikipedia
+4. https://nearbywiki.org/
+5. https://wiki-map.com/
+6. https://github.com/super8989/WikiMap
+7. https://github.com/corrinachow/wiki-maps
+
 [1]: https://reactjs.org/
 [2]: https://www.typescriptlang.org/
 [3]: https://mobx.js.org/
-[4]: https://getbootstrap.com/
-[5]: https://github.com/EasyWebApp/scaffold
-[7]: https://github.com/idea2app/React-MobX-Bootstrap-ts/actions
+[4]: https://web.dev/progressive-web-apps/
+[5]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API
+[7]: https://github.com/Open-Source-Bazaar/Wiki-map/actions/workflows/main.yml
 [8]: https://react-bootstrap.github.io/
 [9]: https://github.com/EasyWebApp/KoAJAX
 [10]: https://developers.google.com/web/tools/workbox
 [11]: https://parceljs.org
 [12]: https://github.com/features/actions
 [13]: https://pages.github.com/
-[14]: https://github.com/idea2app/React-Bootstrap-editor
+[14]: https://www.openstreetmap.org/
+[15]: https://www.mediawiki.org/wiki/API:Main_page

package.json

@@ -1,8 +1,9 @@
 {
-    "name": "react-mobx-bootstrap-ts",
-    "version": "0.3.0",
-    "description": "React project scaffold based on TypeScript, MobX & Bootstrap, which is inspired by WebCell scaffold.",
+    "name": "@open-source-bazaar/wiki-map",
+    "version": "0.6.0",
     "author": "[email protected]",
+    "license": "AGPL-3.0",
+    "description": "Wiki map PWA with Text-to-Speak support, which is based on OpenStreetMap & Wikipedia API, and can be used as a trusted Tour guide.",
     "dependencies": {
         "browser-unhandled-rejection": "^1.0.2",
         "idea-react": "^1.0.0-beta.0",
@@ -29,15 +30,15 @@
         "@parcel/transformer-typescript-tsc": "2.7.0",
         "@parcel/transformer-webmanifest": "2.7.0",
         "@types/lodash": "^4.14.191",
-        "@types/node": "^16.18.16",
+        "@types/node": "^16.18.18",
         "@types/react": "^17.0.53",
         "@types/react-dom": "^17.0.19",
         "husky": "^8.0.3",
         "lint-staged": "^13.2.0",
         "parcel": "2.7.0",
         "postcss": "^8.4.21",
         "postcss-modules": "^4.3.1",
-        "prettier": "^2.8.4",
+        "prettier": "^2.8.6",
         "process": "^0.11.10",
         "typescript": "~4.7.4",
         "workbox-cli": "^6.5.4"

src/component/AutoMap.tsx

@@ -1,4 +1,4 @@
-import { OpenMap, OpenMapProps } from 'idea-react';
+import { Loading, OpenMap, OpenMapProps } from 'idea-react';
 import { observer } from 'mobx-react';
 import { PureComponent } from 'react';
 
@@ -39,6 +39,8 @@ export class AutoMap extends PureComponent<AutoMapProps> {
                 ]}
                 {...this.props}
             />
-        ) : null;
+        ) : (
+            <Loading />
+        );
     }
 }

src/component/IconButton.tsx

@@ -26,7 +26,7 @@ export const IconButton: FC<IconButtonProps> = ({
 );
 
 export const FloatIconButton: FC<IconButtonProps> = ({
-    className = 'position-fixed bottom-0 end-0 p-3',
+    className = 'position-fixed bottom-0 end-0 z-1 p-3',
     style,
     ...props
 }) => (

src/component/WikiList.tsx

@@ -7,7 +7,7 @@ import { i18n } from '../model/Translation';
 import {
     WikiBasePage,
     WikiModel,
-    WikiPage,
+    WikiSearchPage,
     WikiPageFilter
 } from '../model/Wiki';
 
@@ -41,19 +41,19 @@ export class WikiList extends ScrollList<WikiListProps> {
                 {'snippet' in page && (
                     <Card.Text
                         dangerouslySetInnerHTML={{
-                            __html: (page as WikiPage).snippet
+                            __html: (page as WikiSearchPage).snippet
                         }}
                     />
                 )}
             </Card.Body>
 
             {'wordcount' in page && (
                 <Card.Footer className="d-flex justify-content-between align-items-center">
-                    <span>📜 {(page as WikiPage).wordcount}</span>
-                    <time dateTime={(page as WikiPage).timestamp}>
+                    <span>📜 {(page as WikiSearchPage).wordcount}</span>
+                    <time dateTime={(page as WikiSearchPage).timestamp}>
                         📅{' '}
                         {new Date(
-                            (page as WikiPage).timestamp
+                            (page as WikiSearchPage).timestamp
                         ).toLocaleString()}
                     </time>
                 </Card.Footer>

src/index.html

@@ -4,10 +4,10 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-        <title>React MobX Bootstrap TS</title>
+        <title>Wiki map</title>
         <meta
             name="description"
-            content="React project scaffold based on TypeScript, MobX & Bootstrap, which is inspired by WebCell scaffold."
+            content="Wiki map PWA with Text-to-Speak support, which is based on OpenStreetMap & Wikipedia API, and can be used as a trusted Tour guide."
         />
         <meta name="author" content="[email protected]" />
 

src/index.webmanifest

@@ -1,8 +1,8 @@
 {
-  "name": "React scaffold",
-  "short_name": "React Demo",
+  "name": "Wiki map",
+  "short_name": "Wiki map",
   "start_url": ".",
-  "description": "React project scaffold based on TypeScript, MobX & Bootstrap, which is inspired by WebCell scaffold.",
+  "description": "Wiki map PWA with Text-to-Speak support, which is based on OpenStreetMap & Wikipedia API, and can be used as a trusted Tour guide.",
   "scope": ".",
   "display": "standalone",
   "orientation": "any",