90 lines
7 KiB
Markdown
90 lines
7 KiB
Markdown
# Deep Research (the Research Gallery) on a hidden page, and every map served from /dx-maps/
|
|
|
|
This branch adds the **Deep Research** page, `/deep-research`: the Research Gallery (the research
|
|
maps, dashboards and lists in one app), filling the page below the site header, on desktop and
|
|
phone. The page is **hidden**: it is in no menu, and robots are told not to index it; it is reached
|
|
by its address. The Research page is DX Life's own again, with the production simple map. Every map
|
|
on the site loads from the same build tree.
|
|
|
|
## What changed
|
|
|
|
| | |
|
|
|---|---|
|
|
| `public/dx-maps/` | **The dx-maps output folder, dropped in** (doxa-maps `development` eca1ecb4a, `public/dx-maps/`, copied unchanged). Every map on this site loads from it, same-origin. |
|
|
| `app/pages/deep-research/index.vue` | **Deep Research: the Research Gallery.** The page loads one script (`/dx-maps/doxa-maps-spa/doxa-maps-spa.js`) and adds one element (`<doxa-maps-spa>`), sized to the viewport below the header; its `tree-base` is built at runtime from the page's own origin. Every section of the gallery shows, the Experimental section included. Hidden: in no menu, `robots: noindex`. |
|
|
| `app/pages/research/index.vue` | **The Research page, DX Life production's (fc4d622):** the heading, the "By Region" link, the research map on its own (`bundle="research-map"`, `<doxa-research-map>`) and the UUPG list. One addition, under the map: "Want Deeper Research? See our Deep-Research Maps →", linking to `/deep-research` (the locale prefix kept). The two phrases, and the page name "Deep Research", are in `i18n/locales/<code>/common.json` for all 11 locales; "Deep Research" stays a name in every language, as the gallery's own heading does. |
|
|
| `app/pages/regions/index.vue`, `app/utils/nav.ts`, `nuxt.config.ts` | `/regions` is DX Life's own index again, with its menu item, and `/countries` goes to it (`USE_LEGACY_REGIONS_PAGE` and `LEGACY_REGIONS_PAGE` on). Set both off to send `/regions` to a gallery tab instead. |
|
|
| `app/composables/useDoxaMap.ts` | The home (engagement), pray (prayer) and adopt (adoption) maps now load `/dx-maps/doxa-simple-map/doxa-simple-map.js`; the research-map key loads `/dx-maps/doxa-research-map/doxa-research-map.js`. Mapbox GL moves from v3.3.0 to v3.24.0, the version the dx-maps bundles are built and tested with. |
|
|
| `app/components/DoxaMapSlot.vue` | With no Mapbox token configured, it asks the map for the keyless MapLibre engine (see **Map engine**). With a token, the config passes through unchanged. The map fills the slot's box, not the viewport (`--profile-min-h: 0`), so the slot never cuts off the map's attribution and bottom controls. |
|
|
| `public/embed/map/index.html`, `public/research/doxa-research-map.html` | The same: bundles from `/dx-maps/`, Mapbox GL v3.24.0. |
|
|
| `public/js/doxa-simple-map.js`, `public/js/doxa-research-map.js` | **Kept, unused.** No page loads them any more (every map loads from `/dx-maps/`), but they stay in place so nothing DX-life relied on is deleted. |
|
|
|
|
Unchanged on purpose: the element names (`<doxa-map>`, `<doxa-research-map>`, `<doxa-maps-spa>`)
|
|
and `nuxt.config.ts` (its `isCustomElement` lists only those names). `public/js/pplr-data-maps.iife.js`
|
|
and `/research/pplr-data-maps.html` are a separate showcase with no dx-maps equivalent, so they are
|
|
also unchanged.
|
|
|
|
**Language.** The gallery follows the site's language and the language switcher (all 11 locales;
|
|
Arabic lays out right-to-left).
|
|
|
|
**Map engine.** Every map on the site (the Deep Research gallery and the home, pray, adopt, research
|
|
and country maps) uses the keyless MapLibre engine by default, so the whole site's maps work with no
|
|
secrets at all. To switch back to Mapbox, as doxa.life uses it today, set
|
|
`NUXT_PUBLIC_MAP_PROVIDER=mapbox` together with `NUXT_PUBLIC_MAPBOX_TOKEN`; a token alone does not
|
|
switch, and "mapbox" without a token falls back to MapLibre. The page loads only the map bundle; each
|
|
map loads its own engine, so nothing is fetched from api.mapbox.com unless Mapbox is chosen.
|
|
|
|
**What comes from elsewhere.** The map code and the data folder are this site's own (`/dx-maps/`). The
|
|
MapLibre engine comes from jsDelivr, the base-map tiles from OpenFreeMap and VersaTiles, one
|
|
dashboard's country figures from the World Bank API, and the maps' people-group data from the prayer
|
|
API (`NUXT_PUBLIC_PRAY_BASE_URL`, default `https://pray.doxa.life`).
|
|
|
|
**One scrollbar.** The gallery is a full-page app: it fills exactly the space between the header and
|
|
the bottom of the screen. The Deep Research page has no footer and does not scroll itself, so the
|
|
only scrollbar is the gallery's own.
|
|
|
|
**Phone.** The gallery opens straight on a map (Simple Research). Its list of views sits behind the
|
|
☰ button. Big Picture is marked **Desktop only** there (it needs a wide screen); every other view
|
|
works on a phone.
|
|
|
|
## Run it
|
|
|
|
```bash
|
|
bun install
|
|
bun run dev
|
|
```
|
|
|
|
Then open <http://localhost:3000/deep-research/> (Nuxt prints the port if 3000 is taken). No database
|
|
or `.env` is needed for this page. Without `DATABASE_URL`, the dev server only logs
|
|
"skipping migrations".
|
|
|
|
- Arabic: <http://localhost:3000/ar/deep-research/>
|
|
- Open a specific view: `/deep-research/?tab=prayer-map` (also `research-map-plus-grid`,
|
|
`regions-dashboard`, `upg-100`, and so on).
|
|
- The Research page with the simple map: <http://localhost:3000/research/>
|
|
- Share and embed links in the maps point at this site's own `/dx-maps/` pages.
|
|
- To run it against a **local** dx-maps, and to try all three ways a site can take the gallery (drop-in,
|
|
CDN, subdomain) with the exact ports and settings: [documentation/LAPTOP-6WAY.md](documentation/LAPTOP-6WAY.md).
|
|
|
|
## Deployment method: the dx-maps output folder dropped in (this branch, deep-research, from research-gallery-drop-in)
|
|
|
|
Identical to research-gallery-js (maps from the CDN), except that the dx-maps **output folder is dropped into `public/dx-maps/`** and
|
|
every map loads **same-origin** from it: `NUXT_PUBLIC_DX_MAPS_BASE` defaults to empty, which means this
|
|
site's own `/dx-maps/`. That covers the Research Gallery, the home (engagement), pray (prayer) and adopt maps
|
|
(`useDoxaMap`, `DoxaMapSlot`), and the static pages `public/embed/map/` and
|
|
`public/research/doxa-research-map.html` (which carry `/dx-maps` as a constant). Each map is told its
|
|
`assetsBase` in the tree. No iframe is used, and no other host is involved.
|
|
|
|
## /embed-test
|
|
|
|
`/embed-test` embeds **every web plugin** in the dx-maps tree, as JavaScript (no iframe). The list is read
|
|
at runtime from the tree's `manifest.json`, never typed: section 1 is every profile with `stage: production`,
|
|
section 2 every other profile. A profile whose `targets` leave out `web` (a desktop-only plugin, such as
|
|
Rudder) is skipped. Each card loads its bundle's script and adds the element that bundle defines. A card
|
|
mounts its plugin when it scrolls into view and removes it when it leaves (browsers allow only a few WebGL
|
|
maps at once). `?only=<bundle>/<profile>` (or a bundle name, comma-separated) shows just those.
|
|
|
|
## Updating the maps
|
|
|
|
Replace `public/dx-maps/` with a newer build of the tree, from the doxa-maps repo's `public/dx-maps/`.
|
|
No page needs to change.
|