`, what its components teleport to
+ `` (confirm host, toast host, drawer) first in ``, no
+ `modulepreload` links, and the module entry replaced by a small loader
+ (below);
+ - writes `dist/sitemap.xml` from the indexable routes, dated with the build
+ date, and the `.gz` / `.br` files of both;
+ - checks the result (`lib/seo/checkLanding.ts`): the h1, the positioning
+ line, the player count, every FAQ question and answer, the example plan
+ and GitHub links, one title, description and canonical, the Open Graph
+ tags, both JSON-LD blocks, robots and sitemap. Anything missing fails the
+ build.
+
+On load (`lib/seo/prerenderMount.ts`, used by `main.ts`):
+
+- The loader in `index.html` starts the app's entry only after the page's
+ first contentful paint (1 s fallback for a background tab), and only once
+ the page is parsed, so `/env.js` has run. Where `skip-prerender` hides
+ the page it starts at once: nothing paints. This keeps the text's paint
+ (the LCP) free of the scripts.
+- `main.ts` creates the app with `createSSRApp` over prerendered markup
+ (`createApp` otherwise), waits for the route and the `HomepageHeader`
+ chunk, and hydrates: the same elements stay, nothing repaints. The body
+ teleports hydrate from ``'s first child on, in render order;
+ `HomepageHeader` must stay a `defineAsyncComponent` in `App.vue` for that
+ order to match (a test checks the prerender's order).
+- Any route other than the landing page (another path, or a stored session
+ redirected to `/empire`), or a stored locale that isn't English: the
+ landing markup and its teleports are removed and the app mounts fresh
+ (nothing would match the prerender).
+- Whatever depends on the browser (the analytics consent banner, the
+ translation banner) shows only after mount, so the hydrated tree equals the
+ prerender.
+
+Don't use scoped CSS on the landing page: its chunk CSS isn't loaded before
+the app is.
+
+## Serving
+
+The Docker image serves `dist/` with spa-to-http, which answers every path
+that is no file with `index.html`, the prerendered landing page; Netlify
+rewrites the same way. The app mounts the right page on the client (see
+above). The cost: a crawler that doesn't run JavaScript gets the landing
+page's HTML, title and canonical on every URL, also on `/market` and
+`/imprint-tos`. Google renders JavaScript and gets each page's own title,
+description, canonical or `noindex`. A server that can serve an empty shell
+for the other paths would fix it. Every hard load of another path also
+downloads the hidden landing HTML and its eager hero image.
+
+## Updating
+
+- **Counts** (players, plans): `PLAYER_COUNT` and `PLAN_COUNT` in
+ `features/homepage/homepage.constants.ts`, and "6,000" in the description
+ of `index.html` and `homepage.seo.description`.
+- **Share image**: replace `public/images/og/prunplanner.jpg` (1200 × 630,
+ under 300 kB). Its alt text is `og:image:alt` in `index.html`.
+- **A new public page**: `meta: { indexable: true }` on its route, a title
+ and description through `useHead`.
diff --git a/index.html b/index.html
index 345efec25..9addf8450 100644
--- a/index.html
+++ b/index.html
@@ -1,18 +1,84 @@
-
+
-
PRUNplanner
+
PRUNplanner: Base and Empire Planner for Prosperous Universe
+ content="Free planning tool for Prosperous Universe (PrUn): plan bases and empires, find planets, compare ROI and track burn with FIO. Used by over 6,000 players." />
+
+
+
+
+
-
-
-
+ property="og:title"
+ content="PRUNplanner: Base and Empire Planner for Prosperous Universe" />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/package.json b/package.json
index a56da3a11..55fb2b9a3 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
"packageManager": "pnpm@10.30.3",
"scripts": {
"dev": "vite",
- "build": "vite build",
+ "build": "vite build && vite build --ssr src/prerender.ts --outDir .prerender && node scripts/prerender.mjs",
"tsc": "vue-tsc --project tsconfig.typecheck.json",
"tsc:watch": "vue-tsc --project tsconfig.typecheck.json --watch",
"preview": "vite preview",
diff --git a/public/images/homepage/plan-1440.webp b/public/images/homepage/plan-1440.webp
new file mode 100644
index 000000000..90a42d877
Binary files /dev/null and b/public/images/homepage/plan-1440.webp differ
diff --git a/public/images/og/prunplanner.jpg b/public/images/og/prunplanner.jpg
new file mode 100644
index 000000000..c53d7739f
Binary files /dev/null and b/public/images/og/prunplanner.jpg differ
diff --git a/public/robots.txt b/public/robots.txt
new file mode 100644
index 000000000..0797f8a0e
--- /dev/null
+++ b/public/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://prunplanner.org/sitemap.xml
diff --git a/scripts/prerender.mjs b/scripts/prerender.mjs
new file mode 100644
index 000000000..22e420227
--- /dev/null
+++ b/scripts/prerender.mjs
@@ -0,0 +1,66 @@
+// Prerenders "/" into dist/index.html after `vite build` and the SSR build
+// of src/prerender.ts (see the build script and docs/seo.md). The logic is
+// in src/prerender.ts; this only provides a DOM, reads and writes files.
+import { readdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { brotliCompressSync, gzipSync } from "node:zlib";
+import { JSDOM } from "jsdom";
+
+const DIST = "dist";
+const BUNDLE = ".prerender/assets";
+
+// modules that read browser globals at import time (storage, navigator)
+const dom = new JSDOM("", {
+ url: "https://prunplanner.org/",
+ pretendToBeVisual: true,
+});
+for (const key of [
+ "window",
+ "document",
+ "navigator",
+ "localStorage",
+ "sessionStorage",
+ "location",
+ "history",
+ "DOMParser",
+ "HTMLElement",
+ "Element",
+ "Node",
+ "getComputedStyle",
+ "requestAnimationFrame",
+ "cancelAnimationFrame",
+])
+ Object.defineProperty(globalThis, key, {
+ value: dom.window[key],
+ configurable: true,
+ writable: true,
+ });
+window.matchMedia = () => ({ matches: false, addEventListener() {} });
+
+const entry = readdirSync(BUNDLE).find((f) => /^prerender\..*\.js$/.test(f));
+const { renderLanding, renderSitemap, injectLanding, checkLanding } =
+ await import(`../${BUNDLE}/${entry}`);
+
+const shell = readFileSync(`${DIST}/index.html`, "utf8");
+const { html, teleports } = await renderLanding();
+const index = injectLanding(shell, html, teleports);
+const sitemap = renderSitemap(new Date());
+
+const files = { "index.html": index, "sitemap.xml": sitemap };
+for (const [name, content] of Object.entries(files)) {
+ writeFileSync(`${DIST}/${name}`, content);
+ // next to Vite's compressed files, which still hold the empty shell
+ writeFileSync(`${DIST}/${name}.gz`, gzipSync(content, { level: 9 }));
+ writeFileSync(`${DIST}/${name}.br`, brotliCompressSync(content));
+}
+rmSync(".prerender", { recursive: true, force: true });
+
+const errors = checkLanding(
+ index,
+ readFileSync(`${DIST}/robots.txt`, "utf8"),
+ sitemap
+);
+if (errors.length) {
+ console.error(`prerender: dist/index.html fails:\n- ${errors.join("\n- ")}`);
+ process.exit(1);
+}
+console.log(`prerender: / (${Math.round(index.length / 1024)} kB), sitemap.xml`);
diff --git a/src/App.vue b/src/App.vue
index e186c269a..5f7611d1d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 7415fe6f6..672d0363d 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -39,6 +39,16 @@
/* popovers, menus, lists, tooltips, toasts, modals, tables */
--radius-panel: 6px;
--shadow-panel: 0 10px 15px -3px rgb(0 0 0 / 0.6);
+ /* the landing tours' step progress, its duration set inline */
+ --animate-tour-progress: tour-progress 5s linear forwards;
+ @keyframes tour-progress {
+ from {
+ width: 0;
+ }
+ to {
+ width: 100%;
+ }
+ }
}
/* chart colours, read by useChartTheme (src/ui/charts/chartTheme.ts);
diff --git a/src/features/account/components/LoginComponent.vue b/src/features/account/components/LoginComponent.vue
index d92261d8d..ce22f15bf 100644
--- a/src/features/account/components/LoginComponent.vue
+++ b/src/features/account/components/LoginComponent.vue
@@ -10,14 +10,13 @@
import router from "@/router";
// UI
+ import { PFormItem, PInput, PNotice, PSpin } from "@/ui";
import {
- PForm,
- PFormItem,
- PFormSeparator,
- PInput,
- PButton,
- PNotice,
- } from "@/ui";
+ landingField,
+ landingHeading,
+ landingInput,
+ landingPrimaryButton,
+ } from "@/features/homepage/homepage.constants";
const inputUsername: Ref
= ref(null);
const inputPassword: Ref = ref(null);
@@ -62,67 +61,58 @@
-
-
+
-
+
+
{{
loginError === "throttled"
? $t("account.components.login.throttled")
: $t("account.components.login.error")
}}
-
-
-
-
-
-
- {{ $t("account.components.login.tos_link") }}
-
-
-
-
-
+
+
+
-
-
-
-
-
- {{ $t("account.components.login.forgot_link") }}
-
-
-
-
-
-
-
- {{ $t("account.components.login.buttons.login") }}
-
-
-
-
+
+ {{ $t("account.components.login.forgot_link") }}
+
+
+
+
+
+
+ {{ $t("account.components.login.tos_link") }}
+
+
+
+
diff --git a/src/features/account/components/RegistrationComponent.vue b/src/features/account/components/RegistrationComponent.vue
index d59841c8d..79b244ea1 100644
--- a/src/features/account/components/RegistrationComponent.vue
+++ b/src/features/account/components/RegistrationComponent.vue
@@ -13,18 +13,23 @@
import { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: "global" });
+ import { PFormItem, PIcon, PInput, PNotice, PSpin } from "@/ui";
+ import { CheckSharp } from "@vicons/material";
import {
- PForm,
- PFormItem,
- PFormSeparator,
- PButton,
- PInput,
- PNotice,
- } from "@/ui";
+ landingField,
+ landingHeading,
+ landingInput,
+ landingPrimaryButton,
+ } from "@/features/homepage/homepage.constants";
import type { UserRegistrationPayload } from "@/features/api/schemas/user.schemas";
import { useQuery } from "@/lib/query_cache/useQuery";
import { isEmailAddress } from "@/features/account/account.util";
+ // the welcome state's button: the panel switches to the login form
+ defineEmits<{
+ (e: "login"): void;
+ }>();
+
const isLoading = ref(false);
const registrationSuccess = ref(false);
const registrationUsername: Ref = ref(null);
@@ -178,208 +183,176 @@
-
-
-
-
- {{
- $t("account.components.registration.result.ok_header", {
- username: registrationUsername,
- })
- }}
-
-
- {{
- $t("account.components.registration.result.ok_message")
- }}
-
-
-
-
- {{ $t("account.components.registration.title") }}
-
-
-
-
-
- {{ $t("account.components.registration.tos_link") }}
-
+
+
+
+
+ {{
+ $t("account.components.registration.result.ok_header", {
+ username: registrationUsername,
+ })
+ }}
+
+
+ {{ $t("account.components.registration.result.ok_message") }}
+
+
+ {{ $t("account.components.login.buttons.login") }}
+
+
+
+
+
+ {{ fieldErrors.password.join(" ") }}
+
+
+ {{ $t("account.components.registration.form.password_info") }}
-
-
-
-
- {{ fieldErrors.email.join(" ") }}
-
-
- {{
- $t(
- "account.components.registration.form.email_invalid"
- )
- }}
-
-
- {{
- $t(
- "account.components.registration.form.email_info"
- )
- }}
-
+
+
+
+
+
+
+ {{ fieldErrors.email.join(" ") }}
+
+
+ {{ $t("account.components.registration.form.email_invalid") }}
+
+
+ {{ $t("account.components.registration.form.email_info") }}
-
-
-
- {{
- $t(
- "account.components.registration.form.security_question"
- )
- }}
-
-
-
-
- {{ activeSecurityOption }}
-
-
- {{ `PLI ${activeSecurityOption}` }}
-
-
-
- {{
- $t(
- "account.components.registration.form.another_planet"
- )
- }}
-
-
-
+
+
+
+
+ {{ $t("account.components.registration.form.security_question") }}
+
+
+
+ {{
+ activeSecurityOption
+ }}
+
+
+
+ >
+ {{
+ `PLI ${activeSecurityOption}`
+ }}
+
+
+ :label="t('account.components.registration.form.planet_name')">
{{ fieldErrors.planet_input.join(" ") }}
-
-
- {{
- $t(
- "account.components.registration.buttons.register"
- )
- }}
-
-
-
-
-
+
+ {{ $t("account.components.registration.form.another_planet") }}
+
+
+
+
+
+
+
+ {{ $t("account.components.registration.tos_link") }}
+
+
+
+
diff --git a/src/features/account/useAuthPanel.ts b/src/features/account/useAuthPanel.ts
index 97fcfb9dd..6cdec0296 100644
--- a/src/features/account/useAuthPanel.ts
+++ b/src/features/account/useAuthPanel.ts
@@ -1,39 +1,66 @@
import { ref, type Ref } from "vue";
-// Module state: the homepage header renders the panels, other components
-// (the shared plan banner) open them.
+// Composables
+import { trackEvent } from "@/lib/analytics/useAnalytics";
+
+// Types & Interfaces
+import type { IAnalyticsEventProperties } from "@/lib/analytics/useAnalytics.types";
+
+type AuthPanel = "login" | "registration";
+type AuthPanelSource = IAnalyticsEventProperties["landing:auth_open"]["source"];
+
+// Module state: the homepage header renders the panel, other components
+// (the landing page, the shared plan banner) open it.
const showLogin: Ref = ref(false);
const showRegistration: Ref = ref(false);
/**
- * Login and registration panels of the homepage header, at most one open.
+ * Login and registration panel of the homepage header, one form at a time.
* @author jplacht
*/
export function useAuthPanel() {
- function toggleLogin(): void {
- showRegistration.value = false;
- showLogin.value = !showLogin.value;
+ function show(panel: AuthPanel | null): void {
+ showLogin.value = panel === "login";
+ showRegistration.value = panel === "registration";
}
- function toggleRegistration(): void {
- showLogin.value = false;
- showRegistration.value = !showRegistration.value;
+ function toggle(panel: AuthPanel, isOpen: boolean): void {
+ if (isOpen) show(null);
+ else open(panel, "header");
}
+ const toggleLogin = (): void => toggle("login", showLogin.value);
+ const toggleRegistration = (): void =>
+ toggle("registration", showRegistration.value);
+
function close(): void {
- showLogin.value = false;
- showRegistration.value = false;
+ show(null);
+ }
+
+ /** The welcome state after a registration: on to the login form */
+ function showLoginForm(): void {
+ show("login");
}
/**
- * Opens a panel from further down the page and scrolls up to it.
+ * Opens the panel on a form, where the page is: it slides in over it.
*
- * @param {"login" | "registration"} panel Panel to open
+ * @param {AuthPanel} panel Form to show
+ * @param {AuthPanelSource} source Where the visitor opened it
*/
- function open(panel: "login" | "registration"): void {
- showLogin.value = panel === "login";
- showRegistration.value = panel === "registration";
- window.scrollTo({ top: 0, behavior: "smooth" });
+ function open(panel: AuthPanel, source: AuthPanelSource): void {
+ show(panel);
+ trackEvent("landing:auth_open", { panel, source });
+ }
+
+ /**
+ * The switch inside the open panel
+ *
+ * @param {AuthPanel} panel Form switched to
+ */
+ function switchTo(panel: AuthPanel): void {
+ show(panel);
+ trackEvent("landing:auth_switch", { panel });
}
return {
@@ -42,6 +69,8 @@ export function useAuthPanel() {
toggleLogin,
toggleRegistration,
open,
+ switchTo,
+ showLoginForm,
close,
};
}
diff --git a/src/features/analytics/components/AnalyticsFooterLink.vue b/src/features/analytics/components/AnalyticsFooterLink.vue
index 1a08e3ff7..63077d423 100644
--- a/src/features/analytics/components/AnalyticsFooterLink.vue
+++ b/src/features/analytics/components/AnalyticsFooterLink.vue
@@ -1,5 +1,5 @@
diff --git a/src/features/homepage/components/HomepageTour.vue b/src/features/homepage/components/HomepageTour.vue
new file mode 100644
index 000000000..c91a4fbd0
--- /dev/null
+++ b/src/features/homepage/components/HomepageTour.vue
@@ -0,0 +1,287 @@
+
+
+
+
+
+
+
+
+ {{ num(i) }}
+
+
+ {{ $t(stepText(step.key, "title")) }}
+
+
+
+
+
+ {{ $t(stepText(active.key, "text")) }}
+
+
+
+
+ {{ $t(playing ? "homepage.tour.pause" : "homepage.tour.play") }}
+
+
+
+
+
+
+
+
+
+
+ {{ num(i) }}
+
+
+
+ {{ $t(stepText(step.key, "title")) }}
+
+
+ {{ $t(stepText(step.key, "text")) }}
+
+
+
+
+
+
+
+
+ {{
+ $t("homepage.tour.step_of", {
+ step: index + 1,
+ total: steps.length,
+ })
+ }}
+
+
+
+
+ {{ $t(playing ? "homepage.tour.pause" : "homepage.tour.play") }}
+
+
+
+
diff --git a/src/features/homepage/components/HomepageTourViewport.vue b/src/features/homepage/components/HomepageTourViewport.vue
new file mode 100644
index 000000000..c58f911cb
--- /dev/null
+++ b/src/features/homepage/components/HomepageTourViewport.vue
@@ -0,0 +1,37 @@
+
+
+
+
+
+
diff --git a/src/features/homepage/homepage.constants.ts b/src/features/homepage/homepage.constants.ts
new file mode 100644
index 000000000..056e3436c
--- /dev/null
+++ b/src/features/homepage/homepage.constants.ts
@@ -0,0 +1,52 @@
+import type { IHomepageTourStep } from "@/features/homepage/homepageTour.types";
+
+// the owner's figures (2026-10-12), updated by hand
+export const PLAYER_COUNT = 6000;
+export const PLAN_COUNT = 40000;
+
+// the owner keeps this plan shared for the landing page
+export const EXAMPLE_PLAN_UUID = "7864a361-cca5-4384-8477-ceec21a8ee65";
+export const EXAMPLE_PLAN_PATH = `/shared/${EXAMPLE_PLAN_UUID}`;
+
+export const GITHUB_URL = "https://github.com/PRUNplanner/frontend";
+export const CROWDIN_URL = "https://crowdin.com/project/prunplanner";
+
+// landing buttons only: lime primary, outlined secondary; the kit's
+// buttonConfig keeps the blue primary everywhere else
+const buttonBase =
+ "inline-flex items-center justify-center gap-2.5 min-h-13.5 px-6 rounded-lg text-[17px] cursor-pointer transition-[filter,translate] hover:brightness-110 hover:-translate-y-px";
+export const landingPrimaryButton = `${buttonBase} bg-prunplanner text-black font-bold disabled:cursor-auto disabled:opacity-50 disabled:hover:brightness-100 disabled:hover:translate-y-0`;
+export const landingOutlineButton = `${buttonBase} border border-white/28 text-white font-medium`;
+
+// the login and registration forms in the landing panel: label above,
+// 50 px inputs, hint below (PFormItem's label, field and info, stacked)
+export const landingField =
+ "flex flex-col gap-2 [&>label]:h-auto [&>label]:text-sm [&>label]:font-semibold [&>label]:text-white";
+export const landingInput =
+ "w-full *:h-12.5! *:rounded-lg! *:bg-[#030707]! *:border *:border-white/22 *:text-base! *:text-white! *:focus-within:border-prunplanner";
+export const landingHeading =
+ "m-0 text-4xl leading-[1.04] font-black tracking-[-0.03em] text-white";
+
+// Tour regions are measured on the current captures in
+// public/images/homepage: retaking a shot means re-measuring its boxes.
+export const PLAN_TOUR: IHomepageTourStep[] = [
+ { key: "whole", box: [0, 0, 1, 1], zoom: 1 },
+ { key: "buildings", box: [0.05, 0.538, 0.671, 0.997], zoom: 1.45 },
+ { key: "workforce", box: [0.066, 0.205, 0.363, 0.424], zoom: 2.3 },
+ { key: "money", box: [0.379, 0.205, 0.519, 0.416], zoom: 2.6 },
+ { key: "flow", box: [0.679, 0.205, 0.992, 0.749], zoom: 1.6 },
+ { key: "tabs", box: [0.05, 0.108, 0.53, 0.146], zoom: 1.8 },
+];
+export const PLANET_SEARCH_TOUR: IHomepageTourStep[] = [
+ { key: "materials", box: [0.052, 0.225, 0.31, 0.425], zoom: 2.5 },
+ { key: "conditions", box: [0.048, 0.44, 0.313, 0.84], zoom: 2.1 },
+ { key: "matches", box: [0.337, 0.228, 0.983, 0.815], zoom: 1.4 },
+ { key: "create_plan", box: [0.341, 0.279, 0.363, 0.313], zoom: 2.8 },
+ { key: "compare", box: [0.335, 0.955, 0.431, 0.993], zoom: 2.3 },
+];
+export const EMPIRE_TOUR: IHomepageTourStep[] = [
+ { key: "totals", box: [0.095, 0.152, 0.44, 0.22], zoom: 2.0 },
+ { key: "plans", box: [0.059, 0.246, 0.475, 0.432], zoom: 1.9 },
+ { key: "material_io", box: [0.493, 0.226, 0.983, 1.0], zoom: 1.29 },
+ { key: "tabs", box: [0.715, 0.014, 0.944, 0.045], zoom: 2.2 },
+];
diff --git a/src/features/homepage/homepageTour.types.ts b/src/features/homepage/homepageTour.types.ts
new file mode 100644
index 000000000..41ec4496a
--- /dev/null
+++ b/src/features/homepage/homepageTour.types.ts
@@ -0,0 +1,8 @@
+export type HomepageTourName = "plan" | "planet_search" | "empire";
+
+export interface IHomepageTourStep {
+ key: string;
+ /** x0, y0, x1, y1 in fractions of the image */
+ box: [number, number, number, number];
+ zoom: number;
+}
diff --git a/src/features/homepage/homepageTour.util.ts b/src/features/homepage/homepageTour.util.ts
new file mode 100644
index 000000000..9e01dd444
--- /dev/null
+++ b/src/features/homepage/homepageTour.util.ts
@@ -0,0 +1,34 @@
+import type { IHomepageTourStep } from "@/features/homepage/homepageTour.types";
+
+/**
+ * Zoom and pan of a tour viewport, origin top left: the step's box centred
+ * as far as the image allows, so no empty edge shows.
+ *
+ * @author jplacht
+ */
+export function tourTransform(step: IHomepageTourStep): string {
+ const [x0, y0, x1, y1] = step.box;
+ const z = step.zoom;
+ const clamp = (v: number) => Math.min(0, Math.max(1 - z, v));
+ const tx = clamp(0.5 - ((x0 + x1) / 2) * z) * 100;
+ const ty = clamp(0.5 - ((y0 + y1) / 2) * z) * 100;
+ // + 0 turns -0 into 0
+ return `translate(${+tx.toFixed(2) + 0}%, ${+ty.toFixed(2) + 0}%) scale(${z})`;
+}
+
+/**
+ * Position of the outlined region in the unzoomed image, outline and radius
+ * divided by the zoom so they look the same at every step
+ */
+export function tourHighlight(step: IHomepageTourStep): Record {
+ const [x0, y0, x1, y1] = step.box;
+ const pct = (v: number) => `${+(v * 100).toFixed(2)}%`;
+ return {
+ left: pct(x0),
+ top: pct(y0),
+ width: pct(x1 - x0),
+ height: pct(y1 - y0),
+ outlineWidth: `${+(2 / step.zoom).toFixed(2)}px`,
+ borderRadius: `${+(6 / step.zoom).toFixed(2)}px`,
+ };
+}
diff --git a/src/features/sharing/components/SharedPlanBanner.vue b/src/features/sharing/components/SharedPlanBanner.vue
index 0cf4b7ead..4f4859bb0 100644
--- a/src/features/sharing/components/SharedPlanBanner.vue
+++ b/src/features/sharing/components/SharedPlanBanner.vue
@@ -79,10 +79,10 @@
{{ $t("sharing.banner.save") }}
-
+
{{ $t("sharing.banner.signup") }}
-
+
{{ $t("homepage.navigation.login") }}
diff --git a/src/layout/components/HomepageHeader.vue b/src/layout/components/HomepageHeader.vue
index 45273d385..7b0332ea2 100644
--- a/src/layout/components/HomepageHeader.vue
+++ b/src/layout/components/HomepageHeader.vue
@@ -1,12 +1,6 @@
-
-
-
- PRUN planner
-
-
+
-
-
-
- PRUN planner
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ {{ $t("homepage.auth_panel.label") }}
+
+
+ {{ $t("homepage.navigation.login") }}
+
+
+ {{ $t("homepage.navigation.registration") }}
+
-
- ");
+ expect(
+ doc.title === homepage.seo.title,
+ `title "${doc.title}", not the landing title`
+ );
+ expect(
+ count('meta[name="description"]') === 1,
+ "not exactly one description"
+ );
+ expect(
+ doc.querySelector('meta[name="description"]')?.getAttribute("content") ===
+ homepage.seo.description,
+ "description differs from homepage.seo.description"
+ );
+ expect(
+ count('link[rel="canonical"]') === 1 &&
+ doc
+ .querySelector('link[rel="canonical"]')
+ ?.getAttribute("href") === `${SITE_URL}/`,
+ "not exactly one canonical to /"
+ );
+ for (const selector of OG) expect(count(selector) === 1, `no ${selector}`);
+
+ const types = [
+ ...doc.querySelectorAll('script[type="application/ld+json"]'),
+ ].map((script) => {
+ try {
+ return JSON.parse(script.textContent!)["@type"];
+ } catch {
+ return "invalid JSON";
+ }
+ });
+ expect(
+ types.join() === "WebSite,WebApplication",
+ `JSON-LD blocks: ${types.join() || "none"}`
+ );
+
+ // robots and sitemap
+ expect(
+ robots.includes(`Sitemap: ${SITE_URL}/sitemap.xml`),
+ "robots.txt names no sitemap"
+ );
+ const xml = new DOMParser().parseFromString(sitemap, "application/xml");
+ expect(
+ !xml.querySelector("parsererror") &&
+ xml.querySelectorAll("url > loc").length > 0,
+ "sitemap.xml is no valid sitemap"
+ );
+
+ return errors;
+}
diff --git a/src/lib/seo/prerenderMount.ts b/src/lib/seo/prerenderMount.ts
new file mode 100644
index 000000000..8abba400b
--- /dev/null
+++ b/src/lib/seo/prerenderMount.ts
@@ -0,0 +1,52 @@
+import type { App } from "vue";
+import type { Router } from "vue-router";
+
+const root = () => document.getElementById("app")!;
+
+/** dist/index.html: #app holds the prerendered landing page */
+export const isPrerendered = (): boolean =>
+ root().hasAttribute("data-prerendered");
+
+/**
+ * Before the app mounts. The static description and canonical of
+ * index.html go, so the ones useHead sets are the only ones. Over the
+ * prerendered landing page, the route and the header are loaded first, so
+ * the app hydrates the markup as it is: the same elements stay, nothing
+ * repaints.
+ *
+ * @param {Router} router The app's router
+ * @param {string} locale The active locale; the prerender is in en_US
+ * @author jplacht
+ */
+export async function prepareMount(
+ router: Router,
+ locale: string
+): Promise<void> {
+ document
+ .querySelectorAll(
+ 'head link[rel="canonical"], head meta[name="description"]'
+ )
+ .forEach((el) => el.remove());
+
+ if (!isPrerendered()) return;
+
+ await Promise.all([
+ router.isReady(),
+ import("@/layout/components/HomepageHeader.vue"),
+ ]);
+
+ // a stored session went on to /empire, or a stored locale isn't the
+ // prerender's English: nothing matches, so mount fresh (hydration would
+ // keep the classes of elements whose tag matches). The prerender's body
+ // teleports go with it.
+ if (router.currentRoute.value.name !== "homepage" || locale !== "en_US") {
+ while (root().previousSibling) root().previousSibling!.remove();
+ root().replaceChildren();
+ }
+}
+
+/** Mounts (or hydrates) the app; a stored session's hidden #app shows again */
+export function mountApp(app: App): void {
+ app.mount(root());
+ root().removeAttribute("data-prerendered");
+}
diff --git a/src/lib/seo/site.ts b/src/lib/seo/site.ts
new file mode 100644
index 000000000..a17a67870
--- /dev/null
+++ b/src/lib/seo/site.ts
@@ -0,0 +1,28 @@
+// the production origin: canonical links and the sitemap name it on every host
+export const SITE_URL = "https://prunplanner.org";
+
+/** "en_US" as a BCP 47 tag for <html lang>; key mode is English */
+export function htmlLang(locale: string): string {
+ return locale === "keymode" ? "en" : locale.replace("_", "-");
+}
+
+/**
+ * sitemap.xml of the indexable pages
+ *
+ * @param {string[]} paths Paths of the routes with meta.indexable
+ * @param {Date} date Build date, the lastmod of every page
+ */
+export function buildSitemap(paths: string[], date: Date): string {
+ const lastmod = date.toISOString().slice(0, 10);
+ const urls = paths
+ .map(
+ (path) =>
+ ` <url><loc>${SITE_URL}${path}</loc><lastmod>${lastmod}</lastmod></url>`
+ )
+ .join("\n");
+ return `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${urls}
+</urlset>
+`;
+}
diff --git a/src/locales/en_US/account.json b/src/locales/en_US/account.json
index c7ec1e1fe..89687aa07 100644
--- a/src/locales/en_US/account.json
+++ b/src/locales/en_US/account.json
@@ -1,11 +1,11 @@
{
"components": {
"login": {
- "title": "Login",
+ "title": "Back to your empire.",
"error": "Error logging in. Please check your username and password.",
"throttled": "Too many login attempts. Please wait and try again later.",
"buttons": {
- "login": "Login"
+ "login": "Log in"
},
"form": {
"username": "Username",
@@ -13,36 +13,34 @@
},
"tos": "By using PRUNplanner you agree to the {tos_link}.",
"tos_link": "Terms of Service",
- "forgot": "Forgot your password? Request a {forgot_link}.",
- "forgot_link": "Password Reset"
+ "forgot_link": "Forgot your password?"
},
"registration": {
- "title": "Account Information",
+ "title": "Start planning, it's free.",
"tos": "PRUNplanner is free to use. By creating an account, you acknowledge and agree to the {tos_link}.",
"tos_link": "Terms of Service",
"result": {
"ok_header": "Welcome, {username}!",
- "ok_message": "Registration succesful. You can now login to PRUNplanner.",
+ "ok_message": "Registration successful. You can now log in to PRUNplanner.",
"error": "Error during registration.",
"fix_fields": "Please fix the fields marked below.",
"throttled": "Too many registration attempts. Please wait a minute and try again.",
"unknown": "Unknown error. Please try again later."
},
"buttons": {
- "register": "Create Account"
+ "register": "Create account"
},
"form": {
"username": "Username",
- "username_info": "Must be at least 3 characters long. Can't contain spaces.",
+ "username_info": "At least 3 characters, no spaces.",
"password": "Password",
"password_info": "At least 8 characters, not only numbers, and not a common password.",
"email": "Email (optional)",
- "email_placeholder": "Not mandatory, but recommended.",
- "email_info": "Only used to reset your password if you forget it. No newsletters, never shared. You can add it later in Profile.",
+ "email_info": "Not mandatory, but recommended. Increases your account security.",
"email_invalid": "This doesn't look like an email address. Leave it empty or fix it to create your account.",
- "security_question": "Security Question",
- "question": "Enter the name of planet {planet}. To find it, open a new Prosperous Universe buffer with the command {command}. You'll see the planets name listed under 'Name' in the planet information",
- "planet_name": "Name",
+ "security_question": "Security question",
+ "question": "Enter the name of planet {planet}. To find it, open a new Prosperous Universe buffer with this command and read the planet's name under \"Name\".",
+ "planet_name": "Planet name",
"another_planet": "Use a different planet"
}
},
diff --git a/src/locales/en_US/common.json b/src/locales/en_US/common.json
index 724c0d0e1..ae2dfb473 100644
--- a/src/locales/en_US/common.json
+++ b/src/locales/en_US/common.json
@@ -127,5 +127,10 @@
"chip": "Update ready",
"whats_new_title": "PRUNplanner {version} is here",
"whats_new_action": "What's new"
+ },
+ "not_found": {
+ "title": "Page not found",
+ "text": "There is no page at this address.",
+ "home": "Go to the start page"
}
}
diff --git a/src/locales/en_US/homepage.json b/src/locales/en_US/homepage.json
index abdcd33cc..52d1dfb06 100644
--- a/src/locales/en_US/homepage.json
+++ b/src/locales/en_US/homepage.json
@@ -1,74 +1,177 @@
{
"navigation": {
"registration": "Create account",
- "login": "Log in"
+ "login": "Log in",
+ "sections": "Sections",
+ "how": "How it works",
+ "features": "Features",
+ "tools": "Tools",
+ "github": "GitHub"
+ },
+ "auth_panel": {
+ "label": "Log in or create an account",
+ "switch": "Account"
},
"hero": {
"eyebrow": "Base and empire planner for Prosperous Universe",
- "title": "Plan a base before you build it.",
- "lead": "Pick a planet, add buildings and recipes, and watch daily profit, workforce, area and payback update as you go. Then group your bases into an empire and see what it makes, burns and has to ship.",
+ "title": "Plan a base {accent} you build it.",
+ "title_accent": "before",
+ "positioning": "The definitive Prosperous Universe companion for all who love to strategize and optimise.",
+ "lead": "Know what a base earns, what it needs and when it pays back, before you spend anything on it. Then group your bases into an empire and see what it makes, burns and has to ship.",
"cta": "Start planning, it's free",
"cta_logged_in": "Open your empire",
- "how": "How it works",
- "facts": "Free · Open source · Prices from FIO",
+ "example": "Open an example plan",
+ "example_note": "The example needs no account. Registering takes a minute with the game open.",
"image_alt": "The plan editor for an iron base on Montem: workforce, overview, production buildings and material I/O",
- "image_caption": "An iron base on Montem (OT-580b): 19,313 ȼ profit a day, pays back in 64 days."
+ "image_title": "prunplanner.org / plan / Montem iron"
},
- "setup": {
- "title": "Three things to set up",
- "lead": "Everything in PRUNplanner hangs off plans, empires and exchange preferences.",
+ "numbers": {
+ "label": "PRUNplanner in numbers",
+ "players": "players plan with it",
+ "plans": "plans created",
+ "free_value": "Free",
+ "free": "No ads, no paid tier.",
+ "languages_value": "{count} languages",
+ "languages": "Open source, translated by players."
+ },
+ "tour": {
+ "pause": "Pause",
+ "play": "Play",
+ "step_of": "Guided tour · step {step} of {total}",
"plan": {
- "label": "Plan",
- "text": "One base on one planet: buildings, recipes, habitation, experts and COGC. Start from Planet Search.",
- "alt": "Production buildings and recipes in the plan editor"
+ "label": "Plan tour steps",
+ "whole": {
+ "title": "The whole plan",
+ "text": "One base on one screen: workforce, costs, storage, production and material flow, updating as you change it."
+ },
+ "buildings": {
+ "title": "Add buildings",
+ "text": "Pick buildings and recipes from what the planet offers. Each one shows efficiency, revenue, area and construction cost."
+ },
+ "workforce": {
+ "title": "Staff it",
+ "text": "Workforce needed against housing supplied, per tier, with the luxuries you choose to provide."
+ },
+ "money": {
+ "title": "See the money",
+ "text": "This iron base on Montem makes 19,312.82 a day and pays back in 63.79 days."
+ },
+ "flow": {
+ "title": "Check the flow",
+ "text": "Material I/O lists what the base consumes and produces per day, and what each line is worth."
+ },
+ "tabs": {
+ "title": "Go deeper",
+ "text": "POPR, visitation frequency, construction cart, supply cart and repair analysis are one tab away."
+ }
},
- "empire": {
- "label": "Empire",
- "text": "Your plans together. See total profit, and which materials you're short of or have spare across all bases.",
- "alt": "Empire material I/O with surplus and deficit per material"
+ "planet_search": {
+ "label": "Planet Search tour steps",
+ "materials": {
+ "title": "Pick your materials",
+ "text": "H2O, at least 21 a day. Add more materials, in any-of or all-of groups."
+ },
+ "conditions": {
+ "title": "Set the conditions",
+ "text": "Surface, fertility, gravity, pressure, temperature and the active COGC program."
+ },
+ "matches": {
+ "title": "Read the matches",
+ "text": "9 of 4576 planets, with their other resources, COGC and infrastructure."
+ },
+ "create_plan": {
+ "title": "Start a plan",
+ "text": "The + button creates a plan on that planet."
+ },
+ "compare": {
+ "title": "Compare up to four",
+ "text": "Pin planets with the star and see them side by side."
+ }
},
- "exchange": {
- "label": "Exchange preference",
- "text": "Which CX prices to use, with your own prices per material or per planet. Every plan in the empire is priced with it.",
- "alt": "An exchange preference with ticker overrides"
+ "empire": {
+ "label": "Empire tour steps",
+ "totals": {
+ "title": "One bottom line",
+ "text": "Revenue, cost and profit of all bases together: this empire makes 186,973.33 a day."
+ },
+ "plans": {
+ "title": "Every plan side by side",
+ "text": "Each base with its planet, COGC and daily profit, and how many permits the empire uses."
+ },
+ "material_io": {
+ "title": "Short or spare",
+ "text": "Material I/O across all bases shows what the empire has to buy or ship in, and what it can sell."
+ },
+ "tabs": {
+ "title": "Look further",
+ "text": "Analysis and Production Opportunities are one tab away."
+ }
}
},
"most_used": {
- "title": "What players use most",
- "lead": "Where to settle, what pays back, and when a base runs dry.",
+ "eyebrow": "What players use most",
+ "title": "Where to settle, what pays back, and when a base runs dry.",
"needs_fio": "Needs FIO",
"planet_search": {
"label": "Planet Search",
"title": "Find the planet for your next base.",
"lead": "Filter every planet in the universe and start a plan from the result.",
- "point_1": "Materials you want to extract, with a minimum per day",
- "point_2": "Surface, gravity, pressure, temperature and fertility",
- "point_3": "COGC program and infrastructure",
- "point_4": "Compare up to four planets side by side",
"alt": "Planet Search: filters on the left, matching planets with their resources, COGC and infrastructure"
},
+ "empire": {
+ "label": "Empire",
+ "title": "Run every base as one empire.",
+ "lead": "Put your plans together and see what the whole operation earns, and which materials it is short of or has spare.",
+ "alt": "Empire view: revenue, cost and profit, the list of plans, and material I/O across all bases"
+ },
"resource_roi": {
"label": "Resource ROI",
"title": "See which planet pays back fastest.",
- "lead": "Pick a resource and your exchange preference. Every planet that has it gets a costed plan.",
- "point_1": "Plan cost, daily profit and ROI in days",
- "point_2": "Daily output and % of the best planet",
- "point_3": "POPR, COGC, environment and infrastructure next to it",
+ "lead": "Pick a resource and your exchange preference. Every planet that has it gets a costed plan: plan cost, daily profit and ROI in days, next to POPR, COGC, environment and infrastructure.",
"alt": "Resource ROI for ALO: planets ranked with daily output, plan cost, daily profit and ROI in days"
},
"fio_burn": {
"label": "FIO Burn",
"title": "Know when a base runs out.",
- "lead": "Link your FIO account and Burn compares your real stock with what each plan uses.",
- "point_1": "Days left per material and base",
- "point_2": "Red and yellow thresholds you set",
- "point_3": "A resupply list per base, exported as XIT actions",
+ "lead": "Link your FIO account and Burn compares your real stock with what each plan uses: days left per material, thresholds you set, and a resupply list per base exported as XIT actions.",
"alt": "FIO Burn: burn per plan, with one base expanded to show consumption, stock and days left per material"
+ },
+ "starter": {
+ "label": "New to the game",
+ "title": "Start from a typical setup, then make it yours.",
+ "text": "An empty plan offers what other players typically plan on that planet. It is a guideline, not a rule: change every building and recipe until you have found your own best setup."
+ },
+ "shared": {
+ "label": "Shared plans",
+ "title": "Send a plan as a link.",
+ "text": "Anyone with the link can see the recipes and try changes, without an account. Good for asking your corporation for feedback."
+ }
+ },
+ "setup": {
+ "eyebrow": "How it works",
+ "title": "From first base to empire.",
+ "lead": "Three things carry everything: plans, empires and exchange preferences.",
+ "label": "Set-up steps",
+ "plan": {
+ "label": "Plan",
+ "text": "One base on one planet: buildings, recipes, habitation, experts and COGC. Start from Planet Search.",
+ "alt": "Production buildings and recipes in the plan editor"
+ },
+ "empire": {
+ "label": "Empire",
+ "text": "Your plans together. See total profit, and which materials you're short of or have spare across all bases.",
+ "alt": "Empire material I/O with surplus and deficit per material"
+ },
+ "exchange": {
+ "label": "Exchange preference",
+ "text": "Which CX prices to use, with your own prices per material or per planet. Every plan in the empire is priced with it.",
+ "alt": "An exchange preference with ticker overrides"
}
},
"tools": {
- "title": "And the tools around it",
- "lead": "Market data and calculators, priced from FIO. Link your FIO account and Repair uses your real bases too.",
+ "eyebrow": "And the tools around it",
+ "title": "Market data and calculators, priced from FIO.",
+ "lead": "FIO is the community service that reads your in-game data. Link your account and Repair uses your real bases too.",
"with_fio": "with FIO",
"market_live": {
"label": "Market Live",
@@ -103,16 +206,54 @@
"text": "ȼ per need point for safety, health, comfort, culture and education."
}
},
+ "faq": {
+ "eyebrow": "Questions",
+ "title": "Before you sign up.",
+ "what": {
+ "question": "What is PRUNplanner?",
+ "answer": "PRUNplanner is a free, open source planning tool for the browser game Prosperous Universe (PrUn). You plan bases and whole empires in it, find planets, compare what pays back and see when a base runs out of materials."
+ },
+ "free": {
+ "question": "Is PRUNplanner free?",
+ "answer": "Yes. There are no ads and no paid tier. The code is on GitHub."
+ },
+ "fio": {
+ "question": "Do I need FIO to use it?",
+ "answer": "No. Plans, empires, Planet Search, Resource ROI and the calculators work without it. FIO Burn and Repair read your real in-game stock and buildings, so those two need a linked FIO account."
+ },
+ "try": {
+ "question": "Can I try it without an account?",
+ "answer": "Yes. Open the example plan: you can change buildings and recipes and see the numbers update. You need an account to save plans of your own."
+ },
+ "official": {
+ "question": "Is it an official Prosperous Universe tool?",
+ "answer": "No. It is a community project made by a player and is not made by the game's developer."
+ },
+ "languages": {
+ "question": "Which languages does it support?",
+ "answer": "English and {count} more, translated by players on Crowdin."
+ }
+ },
"closing": {
- "title": "Free, open source and translated by players.",
- "text": "No ads, no paid tier. Code on GitHub, translations on Crowdin.",
+ "title": "Plan your next base {accent}",
+ "title_accent": "before you pay for it.",
+ "text": "Over {players} players already do. Free, open source and translated by players. Registering takes a minute with the game open.",
+ "cta": "Start planning",
"github": "View on GitHub",
- "cta": "Start planning"
+ "github_text": "Read the code or contribute.",
+ "translate": "Translate on Crowdin",
+ "translate_text": "{count} languages so far."
},
"footer": {
"made_in": "Made in Munich, with contributions from around the world.",
"imprint": "Imprint and terms",
"translate": "Translate on Crowdin",
"language": "Language"
+ },
+ "seo": {
+ "title": "PRUNplanner: Base and Empire Planner for Prosperous Universe",
+ "description": "Free planning tool for Prosperous Universe (PrUn): plan bases and empires, find planets, compare ROI and track burn with FIO. Used by over 6,000 players.",
+ "imprint_title": "Imprint and Terms of Service",
+ "imprint_description": "Imprint, terms of service and privacy policy of PRUNplanner, the free planning tool for Prosperous Universe."
}
}
diff --git a/src/main.ts b/src/main.ts
index f3054fe34..8ae786356 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,4 @@
-import { createApp } from "vue";
+import { createApp, createSSRApp } from "vue";
import "@fontsource/roboto/300.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
@@ -23,7 +23,9 @@ import router from "@/router";
// app + uses
import { trackVueError } from "@/lib/analytics/useAnalytics";
-const app = createApp(AppProvider);
+// the prerendered landing page is hydrated, any other page rendered
+import { isPrerendered, mountApp, prepareMount } from "@/lib/seo/prerenderMount";
+const app = (isPrerendered() ? createSSRApp : createApp)(AppProvider);
app.config.performance = import.meta.env.DEV;
app.config.errorHandler = trackVueError;
@@ -72,5 +74,8 @@ app.use(head);
import { useUserStore } from "./stores/userStore";
import type { Composer } from "vue-i18n";
-// mount
-app.mount("#app");
+// mount, over the prerendered landing page without a flash. Not awaited:
+// lazy chunks import from this module, which has to finish evaluating first
+prepareMount(router, i18n.global.locale.value)
+ .catch(console.error)
+ .then(() => mountApp(app));
diff --git a/src/prerender.ts b/src/prerender.ts
new file mode 100644
index 000000000..028c6a485
--- /dev/null
+++ b/src/prerender.ts
@@ -0,0 +1,81 @@
+import { createSSRApp } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { createPinia } from "pinia";
+import { createHead } from "@unhead/vue/server";
+
+import AppProvider from "@/AppProvider.vue";
+import router from "@/router";
+import { i18n } from "@/lib/i18n";
+import { buildSitemap } from "@/lib/seo/site";
+
+// The build-time prerender of "/" (scripts/prerender.mjs runs this bundle):
+// English, logged out, tours on their first step, panel closed. No
+// onMounted runs, so it sends no events and makes no API calls.
+
+/**
+ * The landing page's markup for #app of dist/index.html, and what its
+ * components teleport to <body> (the client hydrates both)
+ */
+export async function renderLanding(): Promise<{
+ html: string;
+ teleports: string;
+}> {
+ const app = createSSRApp(AppProvider);
+ app.use(router);
+ app.use(createPinia());
+ app.use(i18n);
+ app.use(createHead());
+ await router.push("/");
+ await router.isReady();
+ const ctx: { teleports?: Record<string, string> } = {};
+ const html = await renderToString(app, ctx);
+ return { html, teleports: ctx.teleports?.body ?? "" };
+}
+
+/** sitemap.xml of every route with meta.indexable */
+export function renderSitemap(date: Date): string {
+ return buildSitemap(
+ router
+ .getRoutes()
+ .filter((r) => r.meta.indexable)
+ .map((r) => r.path),
+ date
+ );
+}
+
+// the app's entry starts once the prerendered page has painted (its
+// first-contentful-paint entry), or after a second where that never comes
+// (a background tab), so the text paints without waiting for the scripts.
+// Where index.html hides the page (skip-prerender) nothing paints: it starts
+// right away. Either way only once the page is parsed, after /env.js has run.
+const START_AFTER_PAINT = (src: string) =>
+ `<script>(function(){var s=0;function load(){var e=document.createElement("script");e.type="module";e.crossOrigin="";e.src=${JSON.stringify(src)};document.head.appendChild(e)}function go(){if(s)return;s=1;if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",load);else load()}if(document.documentElement.classList.contains("skip-prerender"))go();try{new PerformanceObserver(function(l){if(l.getEntriesByName("first-contentful-paint").length)go()}).observe({type:"paint",buffered:true})}catch(e){}setTimeout(go,1000)})()</script>`;
+
+/**
+ * dist/index.html with the landing page in #app, marked for main.ts (which
+ * hydrates it), the body teleports first in <body>, and its scripts loaded
+ * after the first paint. The server answers every path with it; index.html
+ * hides the landing page where it doesn't belong.
+ */
+export function injectLanding(
+ shell: string,
+ markup: string,
+ teleports = ""
+): string {
+ const mount = '<div id="app"></div>';
+ if (!shell.includes(mount)) throw new Error("no empty #app in the shell");
+ // hydration looks for body teleports from <body>'s first child on
+ const body = shell.match(/<body[^>]*>\s*/);
+ if (!body) throw new Error("no <body> in the shell");
+ const entry = shell.match(
+ /<script type="module"[^>]*src="([^"]+)"[^>]*><\/script>/
+ );
+ if (!entry) throw new Error("no module entry in the shell");
+ return shell
+ .replace(body[0], `${body[0].trimEnd()}${teleports}`)
+ .replace(mount, `<div id="app" data-prerendered>${markup}</div>`)
+ .replace(/\s*<link rel="modulepreload"[^>]*>/g, "")
+ .replace(entry[0], START_AFTER_PAINT(entry[1]));
+}
+
+export { checkLanding } from "@/lib/seo/checkLanding";
diff --git a/src/router/index.ts b/src/router/index.ts
index 310c1d535..cf53f7829 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -37,7 +37,7 @@ const router = createRouter({
{
name: "homepage",
path: "/",
- meta: { showHeader: false },
+ meta: { indexable: true },
component: () => import("@/views/HomepageView.vue"),
props: true,
},
@@ -89,7 +89,6 @@ const router = createRouter({
{
name: "shared-plan",
path: "/shared/:sharedPlanUuid",
- meta: { showHeader: false },
component: () => import("@/views/PlanLoadView.vue"),
props: true,
},
@@ -119,10 +118,9 @@ const router = createRouter({
},
{
// public: the app layout logged in, the homepage header logged out
- // (showHeader would add a second logo to it)
name: "market",
path: "/market",
- meta: { showHeader: false },
+ meta: { indexable: true },
component: () => import("@/views/tools/MarketReportView.vue"),
},
{
@@ -135,7 +133,7 @@ const router = createRouter({
{
name: "imprint-tos",
path: "/imprint-tos",
- meta: { showHeader: false },
+ meta: { indexable: true },
component: () => import("@/views/ImprintToSView.vue"),
},
{
@@ -173,20 +171,18 @@ const router = createRouter({
{
name: "verify-email",
path: "/verify-email/:verifyCode?",
- meta: { showHeader: false, requiresAuth: true },
+ meta: { requiresAuth: true },
props: true,
component: () => import("@/views/VerifyEmailView.vue"),
},
{
name: "request-password-reset",
path: "/request-password-reset",
- meta: { showHeader: false },
component: () => import("@/views/RequestPasswordResetView.vue"),
},
{
name: "password-reset",
path: "/password-reset/:resetCode?",
- meta: { showHeader: false },
props: true,
component: () => import("@/views/PasswordResetView.vue"),
},
@@ -202,6 +198,12 @@ const router = createRouter({
meta: { requiresAuth: true },
component: () => import("@/views/APIKeyView.vue"),
},
+ {
+ // an unknown address: noindex, not a soft 404 with the landing page
+ name: "not-found",
+ path: "/:pathMatch(.*)*",
+ component: () => import("@/views/NotFoundView.vue"),
+ },
// every kit component in every state; dev server and e2e builds only
...(import.meta.env.DEV || import.meta.env.VITE_KIT_PAGE === "true"
? [
diff --git a/src/router/router.d.ts b/src/router/router.d.ts
index 8b06bdcbd..fd3758663 100644
--- a/src/router/router.d.ts
+++ b/src/router/router.d.ts
@@ -3,6 +3,7 @@ import "vue-router";
declare module "vue-router" {
interface RouteMeta {
requiresAuth?: boolean;
- showHeader?: boolean;
+ /** in search engines: canonical URL, in the sitemap; all others noindex */
+ indexable?: boolean;
}
}
diff --git a/src/tests/AppProvider.test.ts b/src/tests/AppProvider.test.ts
new file mode 100644
index 000000000..3d90fa511
--- /dev/null
+++ b/src/tests/AppProvider.test.ts
@@ -0,0 +1,67 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { unref } from "vue";
+import { createPinia, setActivePinia } from "pinia";
+
+import AppProvider from "@/AppProvider.vue";
+import { mountComponent } from "@/tests/mountComponent";
+
+const head = vi.hoisted(() => ({ useHead: vi.fn() }));
+vi.mock("@unhead/vue", () => head);
+const route = vi.hoisted(() => ({ path: "/", meta: {} as { indexable?: boolean } }));
+vi.mock("vue-router", async (original) => ({
+ ...(await original<typeof import("vue-router")>()),
+ useRoute: () => route,
+}));
+vi.mock("@/App.vue", () => ({ default: { render: () => null } }));
+
+interface Head {
+ titleTemplate: (title?: string) => string;
+ htmlAttrs: { lang: unknown }
+ meta: { name: string; content: () => string | undefined }[];
+ link: unknown;
+};
+
+async function mountHead(path: string, indexable?: boolean): Promise<Head> {
+ route.path = path;
+ route.meta = { indexable };
+ setActivePinia(createPinia());
+ await mountComponent(AppProvider);
+ return head.useHead.mock.lastCall![0];
+}
+
+const meta = (h: Head, name: string) =>
+ h.meta.find((m) => m.name === name)!.content();
+
+describe("AppProvider head", () => {
+ beforeEach(() => head.useHead.mockClear());
+
+ it("adds the site name to every page title, and is the site name alone", async () => {
+ const h = await mountHead("/empire");
+
+ expect(h.titleTemplate("Empire")).toBe("Empire · PRUNplanner");
+ expect(h.titleTemplate(undefined)).toBe("PRUNplanner");
+ });
+
+ it("follows the locale in <html lang> and sets the site description", async () => {
+ const h = await mountHead("/");
+
+ expect(unref(h.htmlAttrs.lang)).toBe("en-US");
+ expect(meta(h, "description")).toBe("homepage.seo.description");
+ });
+
+ it("gives an indexable page its canonical URL and no robots tag", async () => {
+ const h = await mountHead("/imprint-tos", true);
+
+ expect(meta(h, "robots")).toBeUndefined();
+ expect(unref(h.link)).toEqual([
+ { rel: "canonical", href: "https://prunplanner.org/imprint-tos" },
+ ]);
+ });
+
+ it("keeps every other page out of the index, without a canonical", async () => {
+ const h = await mountHead("/shared/abc");
+
+ expect(meta(h, "robots")).toBe("noindex");
+ expect(unref(h.link)).toEqual([]);
+ });
+});
diff --git a/src/tests/features/account/components/LoginComponent.test.ts b/src/tests/features/account/components/LoginComponent.test.ts
index c87d3f422..8034a3d05 100644
--- a/src/tests/features/account/components/LoginComponent.test.ts
+++ b/src/tests/features/account/components/LoginComponent.test.ts
@@ -73,4 +73,29 @@ describe("LoginComponent", () => {
expect(wrapper.text()).toContain("account.components.login.throttled");
expect(wrapper.text()).not.toContain("account.components.login.error");
});
+
+ it("disables and spins the button while the login runs", async () => {
+ const pinia = createPinia();
+ setActivePinia(pinia);
+ let answer!: (r: "ok") => void;
+ vi.spyOn(useUserStore(), "performLogin").mockReturnValue(
+ new Promise((r) => (answer = r))
+ );
+ const { wrapper } = await mountComponent(LoginComponent, {}, { pinia });
+ const button = () => wrapper.find("button[type=submit]");
+ expect(button().attributes("disabled")).toBeDefined();
+
+ const [username, password] = wrapper.findAll("input");
+ await username.setValue("test-user");
+ await password.setValue("correct-horse-battery");
+ expect(button().attributes("disabled")).toBeUndefined();
+
+ await wrapper.find("form").trigger("submit");
+ expect(button().attributes("aria-busy")).toBe("true");
+ expect(button().attributes("disabled")).toBeDefined();
+
+ answer("ok");
+ await flushPromises();
+ expect(button().attributes("aria-busy")).toBe("false");
+ });
});
diff --git a/src/tests/features/account/components/RegistrationComponent.test.ts b/src/tests/features/account/components/RegistrationComponent.test.ts
index c42d7650e..905ad2c77 100644
--- a/src/tests/features/account/components/RegistrationComponent.test.ts
+++ b/src/tests/features/account/components/RegistrationComponent.test.ts
@@ -222,7 +222,7 @@ describe("RegistrationComponent", () => {
expect(sentBody()).toMatchObject({ username: "test-user" });
});
- it("replaces the form with the success message", async () => {
+ it("replaces the form with the welcome state and its log in button", async () => {
mock.onPost(SIGNUP_URL).reply(200, { username: "test-user" });
const { wrapper } = await mountComponent(RegistrationComponent);
await fill(wrapper, { ...VALID });
@@ -236,7 +236,16 @@ describe("RegistrationComponent", () => {
"account.components.registration.result.ok_message"
);
expect(inputs(wrapper)).toHaveLength(0);
- expect(wrapper.find("button").exists()).toBe(false);
+ expect(wrapper.find("[role=status]").exists()).toBe(true);
+
+ // the panel switches to the login form
+ const buttons = wrapper.findAll("button");
+ expect(buttons).toHaveLength(1);
+ expect(buttons[0].text()).toBe("account.components.login.buttons.login");
+ await buttons[0].trigger("click");
+ expect(
+ wrapper.findComponent(RegistrationComponent).emitted("login")
+ ).toHaveLength(1);
});
it("spins the button while the request runs", async () => {
diff --git a/src/tests/features/account/useAuthPanel.test.ts b/src/tests/features/account/useAuthPanel.test.ts
index 1ede30763..bef309165 100644
--- a/src/tests/features/account/useAuthPanel.test.ts
+++ b/src/tests/features/account/useAuthPanel.test.ts
@@ -1,5 +1,7 @@
import { describe, it, expect, beforeEach, vi } from "vitest";
+vi.mock("@/lib/analytics/useAnalytics", () => ({ trackEvent: vi.fn() }));
+import { trackEvent } from "@/lib/analytics/useAnalytics";
import { useAuthPanel } from "@/features/account/useAuthPanel";
describe("useAuthPanel", () => {
@@ -8,10 +10,11 @@ describe("useAuthPanel", () => {
beforeEach(() => {
panel.close();
+ vi.mocked(trackEvent).mockClear();
window.scrollTo = vi.fn();
});
- it("toggles one panel and closes the other", () => {
+ it("toggles one form from the header and closes the other", () => {
panel.toggleLogin();
expect(state()).toEqual([true, false]);
@@ -20,14 +23,43 @@ describe("useAuthPanel", () => {
panel.toggleRegistration();
expect(state()).toEqual([false, false]);
+
+ expect(vi.mocked(trackEvent).mock.calls).toEqual([
+ ["landing:auth_open", { panel: "login", source: "header" }],
+ ["landing:auth_open", { panel: "registration", source: "header" }],
+ ]);
});
- it("opens a panel for every user of the composable and scrolls up", () => {
- useAuthPanel().open("registration");
+ it("opens a form for every user of the composable, where the page is", () => {
+ useAuthPanel().open("registration", "closing");
expect(state()).toEqual([false, true]);
- panel.open("login");
+ panel.open("login", "shared_plan");
+ expect(state()).toEqual([true, false]);
+ expect(window.scrollTo).not.toHaveBeenCalled();
+ expect(trackEvent).toHaveBeenLastCalledWith("landing:auth_open", {
+ panel: "login",
+ source: "shared_plan",
+ });
+ });
+
+ it("goes on to the login form after a registration, without an event", () => {
+ panel.open("registration", "hero");
+ vi.mocked(trackEvent).mockClear();
+
+ panel.showLoginForm();
+
expect(state()).toEqual([true, false]);
- expect(window.scrollTo).toHaveBeenCalledTimes(2);
+ expect(trackEvent).not.toHaveBeenCalled();
+ });
+
+ it("switches the open panel's form", () => {
+ panel.open("login", "hero");
+ panel.switchTo("registration");
+
+ expect(state()).toEqual([false, true]);
+ expect(trackEvent).toHaveBeenLastCalledWith("landing:auth_switch", {
+ panel: "registration",
+ });
});
});
diff --git a/src/tests/features/homepage/components/HomepageTour.test.ts b/src/tests/features/homepage/components/HomepageTour.test.ts
new file mode 100644
index 000000000..c5d46de27
--- /dev/null
+++ b/src/tests/features/homepage/components/HomepageTour.test.ts
@@ -0,0 +1,221 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { nextTick } from "vue";
+
+import HomepageTour from "@/features/homepage/components/HomepageTour.vue";
+import HomepageTourViewport from "@/features/homepage/components/HomepageTourViewport.vue";
+import { trackEvent } from "@/lib/analytics/useAnalytics";
+import { mountComponent } from "@/tests/mountComponent";
+import type { IHomepageTourStep } from "@/features/homepage/homepageTour.types";
+
+vi.mock("@/lib/analytics/useAnalytics", () => ({ trackEvent: vi.fn() }));
+
+const STEPS: IHomepageTourStep[] = [
+ { key: "one", box: [0, 0, 1, 1], zoom: 1 },
+ { key: "two", box: [0, 0, 0.5, 0.5], zoom: 2 },
+ { key: "three", box: [0.5, 0.5, 1, 1], zoom: 2 },
+];
+
+// the IntersectionObserver the tour creates, to report it on or off screen
+let observer: { cb: IntersectionObserverCallback; disconnect: () => void };
+function stubObserver() {
+ vi.stubGlobal(
+ "IntersectionObserver",
+ class {
+ constructor(cb: IntersectionObserverCallback) {
+ observer = { cb, disconnect: this.disconnect };
+ }
+ observe = vi.fn();
+ disconnect = vi.fn();
+ }
+ );
+}
+const onScreen = async (isIntersecting: boolean) => {
+ observer.cb(
+ [{ isIntersecting } as IntersectionObserverEntry],
+ {} as IntersectionObserver
+ );
+ await nextTick();
+};
+
+async function mountTour(props: Record<string, unknown> = {}) {
+ const mounted = await mountComponent(HomepageTour, {
+ name: "plan",
+ image: "plan",
+ alt: "the plan",
+ steps: STEPS,
+ layout: "strip",
+ ...props,
+ });
+ const { wrapper } = mounted;
+ const steps = () => wrapper.findAll("[role=group] button");
+ const active = () =>
+ steps().findIndex((b) => b.attributes("aria-pressed") === "true");
+ const toggle = () => wrapper.findAll("button").at(-1)!;
+ return { ...mounted, steps, active, toggle };
+}
+
+describe("HomepageTour", () => {
+ beforeEach(() => {
+ vi.useFakeTimers();
+ vi.mocked(trackEvent).mockClear();
+ stubObserver();
+ window.matchMedia = vi.fn().mockReturnValue({ matches: false });
+ });
+
+ afterEach(() => {
+ vi.useRealTimers();
+ vi.restoreAllMocks();
+ });
+
+ it("starts on the first step and waits until it is on screen", async () => {
+ const { active, wrapper } = await mountTour();
+ expect(active()).toBe(0);
+ expect(wrapper.findComponent(HomepageTourViewport).props("step")).toBe(
+ STEPS[0]
+ );
+
+ vi.advanceTimersByTime(10_000);
+ await nextTick();
+ expect(active()).toBe(0);
+ });
+
+ it("advances every interval and loops, with a progress bar on the active step", async () => {
+ const { active, steps } = await mountTour({ interval: 1000 });
+ await onScreen(true);
+ expect(steps()[0].find(".animate-tour-progress").exists()).toBe(true);
+
+ for (const expected of [1, 2, 0]) {
+ vi.advanceTimersByTime(1000);
+ await nextTick();
+ expect(active()).toBe(expected);
+ }
+ // automatic advances send nothing
+ expect(trackEvent).not.toHaveBeenCalled();
+ });
+
+ it("jumps to a clicked step and restarts its timer", async () => {
+ const { active, steps } = await mountTour({ interval: 1000 });
+ await onScreen(true);
+ vi.advanceTimersByTime(600);
+
+ await steps()[2].trigger("click");
+ expect(active()).toBe(2);
+ expect(trackEvent).toHaveBeenCalledWith("landing:tour_step", {
+ tour: "plan",
+ step: "three",
+ });
+
+ vi.advanceTimersByTime(600);
+ await nextTick();
+ expect(active()).toBe(2);
+ vi.advanceTimersByTime(400);
+ await nextTick();
+ expect(active()).toBe(0);
+ });
+
+ it("stops on Pause and goes on with Play", async () => {
+ const { active, toggle } = await mountTour({ interval: 1000 });
+ await onScreen(true);
+ expect(toggle().text()).toBe("homepage.tour.pause");
+
+ await toggle().trigger("click");
+ expect(toggle().text()).toBe("homepage.tour.play");
+ vi.advanceTimersByTime(3000);
+ await nextTick();
+ expect(active()).toBe(0);
+
+ await toggle().trigger("click");
+ vi.advanceTimersByTime(1000);
+ await nextTick();
+ expect(active()).toBe(1);
+ expect(vi.mocked(trackEvent).mock.calls).toEqual([
+ ["landing:tour_toggle", { tour: "plan", is_playing: false }],
+ ["landing:tour_toggle", { tour: "plan", is_playing: true }],
+ ]);
+ });
+
+ it("does not advance by itself with reduced motion, steps still work", async () => {
+ vi.mocked(window.matchMedia).mockReturnValue({
+ matches: true,
+ } as MediaQueryList);
+ const { active, steps, toggle } = await mountTour({ interval: 1000 });
+ await onScreen(true);
+ expect(toggle().text()).toBe("homepage.tour.play");
+
+ vi.advanceTimersByTime(5000);
+ await nextTick();
+ expect(active()).toBe(0);
+
+ await steps()[1].trigger("click");
+ expect(active()).toBe(1);
+ });
+
+ it("pauses off screen and in a hidden tab", async () => {
+ const { active } = await mountTour({ interval: 1000 });
+ await onScreen(true);
+ await onScreen(false);
+ vi.advanceTimersByTime(3000);
+ await nextTick();
+ expect(active()).toBe(0);
+
+ await onScreen(true);
+ vi.spyOn(document, "hidden", "get").mockReturnValue(true);
+ document.dispatchEvent(new Event("visibilitychange"));
+ await nextTick();
+ vi.advanceTimersByTime(3000);
+ await nextTick();
+ expect(active()).toBe(0);
+ });
+
+ it("plays without an IntersectionObserver", async () => {
+ vi.stubGlobal("IntersectionObserver", undefined);
+ const { active } = await mountTour({ interval: 1000 });
+ vi.advanceTimersByTime(1000);
+ await nextTick();
+ expect(active()).toBe(1);
+ });
+
+ it("stops its timer and listeners when it leaves", async () => {
+ const removed = vi.spyOn(document, "removeEventListener");
+ const { wrapper } = await mountTour({ interval: 1000 });
+ await onScreen(true);
+ const { disconnect } = observer;
+
+ wrapper.unmount();
+
+ expect(disconnect).toHaveBeenCalled();
+ expect(removed).toHaveBeenCalledWith(
+ "visibilitychange",
+ expect.any(Function)
+ );
+ expect(() => vi.advanceTimersByTime(5000)).not.toThrow();
+ });
+
+ it("loads the hero image first, in two sizes; the others lazily", async () => {
+ const hero = await mountTour({ eager: true });
+ const img = hero.wrapper.find("img");
+ expect(img.attributes("fetchpriority")).toBe("high");
+ expect(img.attributes("loading")).toBe("eager");
+ expect(img.attributes("srcset")).toBe(
+ "/images/homepage/plan-1440.webp 1440w, /images/homepage/plan.webp 2880w"
+ );
+
+ const other = await mountTour({ image: "empire" });
+ expect(other.wrapper.find("img").attributes("loading")).toBe("lazy");
+ expect(other.wrapper.find("img").attributes("srcset")).toBeUndefined();
+ });
+
+ it("lists the steps beside the image, with the active step's text and the step count", async () => {
+ const { wrapper, steps } = await mountTour({
+ layout: "list",
+ name: "empire",
+ reverse: true,
+ });
+
+ expect(wrapper.find("article").exists()).toBe(true);
+ expect(wrapper.find(".order-2").exists()).toBe(true);
+ expect(steps()[0].text()).toContain("homepage.tour.empire.one.text");
+ expect(steps()[1].text()).not.toContain("homepage.tour.empire.two.text");
+ expect(wrapper.text()).toContain("homepage.tour.step_of");
+ });
+});
diff --git a/src/tests/features/homepage/homepageTour.util.test.ts b/src/tests/features/homepage/homepageTour.util.test.ts
new file mode 100644
index 000000000..08649c3b7
--- /dev/null
+++ b/src/tests/features/homepage/homepageTour.util.test.ts
@@ -0,0 +1,76 @@
+import { describe, it, expect } from "vitest";
+
+import {
+ tourHighlight,
+ tourTransform,
+} from "@/features/homepage/homepageTour.util";
+import {
+ EMPIRE_TOUR,
+ PLAN_TOUR,
+ PLANET_SEARCH_TOUR,
+} from "@/features/homepage/homepage.constants";
+import type { IHomepageTourStep } from "@/features/homepage/homepageTour.types";
+
+const step = (
+ box: IHomepageTourStep["box"],
+ zoom: number
+): IHomepageTourStep => ({ key: "s", box, zoom });
+
+describe("tourTransform", () => {
+ it("leaves the whole image as it is", () => {
+ expect(tourTransform(step([0, 0, 1, 1], 1))).toBe(
+ "translate(0%, 0%) scale(1)"
+ );
+ });
+
+ it("centres the box", () => {
+ expect(tourTransform(step([0.379, 0.205, 0.519, 0.416], 2.6))).toBe(
+ "translate(-66.74%, -30.73%) scale(2.6)"
+ );
+ });
+
+ it("stops at the image's edges", () => {
+ // right edge: 1 - 2.2 = -1.2; top edge: 0
+ expect(tourTransform(step([0.715, 0.014, 0.944, 0.045], 2.2))).toBe(
+ "translate(-120%, 0%) scale(2.2)"
+ );
+ });
+});
+
+describe("tourHighlight", () => {
+ it("places the outline on the box, its width independent of the zoom", () => {
+ expect(tourHighlight(step([0.05, 0.108, 0.53, 0.146], 1.8))).toEqual({
+ left: "5%",
+ top: "10.8%",
+ width: "48%",
+ height: "3.8%",
+ outlineWidth: "1.11px",
+ borderRadius: "3.33px",
+ });
+ });
+});
+
+describe("the landing page's tours", () => {
+ // the part of the image the 16:10 viewport shows, in image fractions
+ function visible({ box, zoom }: IHomepageTourStep, axis: 0 | 1) {
+ const centre = (box[axis] + box[axis + 2]) / 2;
+ const offset = Math.min(0, Math.max(1 - zoom, 0.5 - centre * zoom));
+ return [-offset / zoom, (1 - offset) / zoom];
+ }
+
+ it.each([
+ ["plan", PLAN_TOUR],
+ ["planet_search", PLANET_SEARCH_TOUR],
+ ["empire", EMPIRE_TOUR],
+ ])("%s: every outlined region is fully inside the viewport", (_, tour) => {
+ for (const s of tour)
+ for (const axis of [0, 1] as const) {
+ const [from, to] = visible(s, axis);
+ expect(s.box[axis], s.key).toBeGreaterThanOrEqual(from - 1e-9);
+ expect(s.box[axis + 2], s.key).toBeLessThanOrEqual(to + 1e-9);
+ // no empty edge: the shown part stays within the image
+ expect(from).toBeGreaterThanOrEqual(0);
+ expect(to).toBeLessThanOrEqual(1 + 1e-9);
+ }
+ });
+});
diff --git a/src/tests/layout/components/HomepageHeader.test.ts b/src/tests/layout/components/HomepageHeader.test.ts
index aa96ae4e2..ea89f7701 100644
--- a/src/tests/layout/components/HomepageHeader.test.ts
+++ b/src/tests/layout/components/HomepageHeader.test.ts
@@ -1,13 +1,22 @@
import { beforeEach, describe, expect, it, vi } from "vitest";
+import { nextTick } from "vue";
import { RouterLinkStub } from "@vue/test-utils";
import HomepageHeader from "@/layout/components/HomepageHeader.vue";
import LoginComponent from "@/features/account/components/LoginComponent.vue";
import RegistrationComponent from "@/features/account/components/RegistrationComponent.vue";
-import { PButton } from "@/ui";
+import { PDrawer } from "@/ui";
import { useAuthPanel } from "@/features/account/useAuthPanel";
+import { trackEvent } from "@/lib/analytics/useAnalytics";
import { mountComponent } from "@/tests/mountComponent";
+const route = vi.hoisted(() => ({ name: "homepage" as string }));
+vi.mock("vue-router", async (original) => ({
+ ...(await original<typeof import("vue-router")>()),
+ useRoute: () => route,
+}));
+vi.mock("@/lib/analytics/useAnalytics", () => ({ trackEvent: vi.fn() }));
+
// the forms have their own tests: only their presence matters here
vi.mock("@/features/account/components/LoginComponent.vue", () => ({
default: { name: "LoginComponent", template: "<p>login form</p>" },
@@ -15,6 +24,7 @@ vi.mock("@/features/account/components/LoginComponent.vue", () => ({
vi.mock("@/features/account/components/RegistrationComponent.vue", () => ({
default: {
name: "RegistrationComponent",
+ emits: ["login"],
template: "<p>registration form</p>",
},
}));
@@ -24,49 +34,72 @@ describe("HomepageHeader", () => {
beforeEach(() => {
panel.close();
- // jsdom has no scrolling, open() asks for it
- vi.spyOn(window, "scrollTo").mockImplementation(() => {});
+ route.name = "homepage";
+ vi.mocked(trackEvent).mockClear();
});
- it("opens one panel at a time from the login and register buttons", async () => {
- const { wrapper } = await mountComponent(HomepageHeader);
- const login = wrapper.find("button[type=button]");
- const register = wrapper.findComponent(PButton);
- expect(login.text()).toBe("homepage.navigation.login");
- expect(register.text()).toBe("homepage.navigation.registration");
- expect(wrapper.findComponent(LoginComponent).exists()).toBe(false);
- expect(wrapper.findComponent(RegistrationComponent).exists()).toBe(
- false
- );
+ const forms = (wrapper: Awaited<ReturnType<typeof mountComponent>>["wrapper"]) => [
+ wrapper.findComponent(LoginComponent).exists(),
+ wrapper.findComponent(RegistrationComponent).exists(),
+ ];
- await login.trigger("click");
- expect(wrapper.findComponent(LoginComponent).exists()).toBe(true);
- expect(wrapper.findComponent(RegistrationComponent).exists()).toBe(
- false
- );
-
- await register.trigger("click");
- expect(wrapper.findComponent(LoginComponent).exists()).toBe(false);
- expect(wrapper.findComponent(RegistrationComponent).exists()).toBe(
- true
- );
+ it("opens the panel on the form of the header button, the same button closes it", async () => {
+ const { wrapper } = await mountComponent(HomepageHeader);
+ const drawer = wrapper.findComponent(PDrawer);
+ expect(drawer.props("show")).toBe(false);
+
+ await wrapper.find("[data-login]").trigger("click");
+ expect(drawer.props("show")).toBe(true);
+ expect(forms(wrapper)).toEqual([true, false]);
+
+ await wrapper.find("[data-registration]").trigger("click");
+ expect(forms(wrapper)).toEqual([false, true]);
+
+ await wrapper.find("[data-registration]").trigger("click");
+ expect(drawer.props("show")).toBe(false);
+ expect(trackEvent).toHaveBeenCalledWith("landing:auth_open", {
+ panel: "login",
+ source: "header",
+ });
+ });
- // the same button again folds its panel
- await register.trigger("click");
- expect(wrapper.findComponent(RegistrationComponent).exists()).toBe(
- false
+ it("switches the form inside the open panel", async () => {
+ panel.open("login", "hero");
+ const { wrapper } = await mountComponent(HomepageHeader);
+ // the drawer is teleported to the body
+ const [login, registration] = document.querySelectorAll<HTMLElement>(
+ "[role=dialog] [role=group] button"
);
+ expect(login.getAttribute("aria-pressed")).toBe("true");
+
+ registration.click();
+ await nextTick();
+ expect(forms(wrapper)).toEqual([false, true]);
+ expect(trackEvent).toHaveBeenLastCalledWith("landing:auth_switch", {
+ panel: "registration",
+ });
+
+ // the welcome state's button after a registration: not a switch
+ vi.mocked(trackEvent).mockClear();
+ await wrapper.findComponent(RegistrationComponent).vm.$emit("login");
+ expect(forms(wrapper)).toEqual([true, false]);
+ expect(trackEvent).not.toHaveBeenCalled();
});
- it("shows a panel that was opened from elsewhere", async () => {
- panel.open("login");
+ it("closes the panel from the drawer (X, Esc, backdrop)", async () => {
+ panel.open("registration", "closing");
const { wrapper } = await mountComponent(HomepageHeader);
- expect(wrapper.findComponent(LoginComponent).exists()).toBe(true);
+ wrapper.findComponent(PDrawer).vm.$emit("update:show", false);
+ expect(panel.showRegistration.value).toBe(false);
+
+ // opening is the header's buttons' job, the drawer only closes
+ wrapper.findComponent(PDrawer).vm.$emit("update:show", true);
+ expect(panel.showLogin.value || panel.showRegistration.value).toBe(false);
});
- it("closes both panels when the header leaves", async () => {
- panel.open("registration");
+ it("closes the panel when the header leaves", async () => {
+ panel.open("registration", "hero");
const { wrapper } = await mountComponent(HomepageHeader);
wrapper.unmount();
@@ -76,26 +109,13 @@ describe("HomepageHeader", () => {
});
it.each([
- [true, 1],
- [false, 0],
- ])(
- "with showHeader=%s links the name back to the start: %s heading(s) in the link",
- async (showHeader, headings) => {
- const { wrapper } = await mountComponent(HomepageHeader, {
- showHeader,
- });
-
- const link = wrapper.findComponent(RouterLinkStub);
- expect(link.props("to")).toBe("/");
- expect(link.findAll("h2")).toHaveLength(headings);
- }
- );
-
- it("shows the link heading by default", async () => {
+ ["homepage", 4],
+ ["shared-plan", 0],
+ ])("on %s shows %i section links", async (name, links) => {
+ route.name = name;
const { wrapper } = await mountComponent(HomepageHeader);
- expect(wrapper.findComponent(RouterLinkStub).find("h2").text()).toBe(
- "PRUNplanner"
- );
+ expect(wrapper.findAll("nav a")).toHaveLength(links);
+ expect(wrapper.findComponent(RouterLinkStub).props("to")).toBe("/");
});
});
diff --git a/src/tests/lib/seo/checkLanding.test.ts b/src/tests/lib/seo/checkLanding.test.ts
new file mode 100644
index 000000000..7fcb7f2f5
--- /dev/null
+++ b/src/tests/lib/seo/checkLanding.test.ts
@@ -0,0 +1,149 @@
+import { describe, it, expect, beforeAll, afterEach, vi } from "vitest";
+import { readFileSync } from "node:fs";
+
+import { checkLanding } from "@/lib/seo/checkLanding";
+import { memoryStorage } from "@/tests/memoryStorage";
+import { injectLanding, renderLanding } from "@/prerender";
+import { SupportedLanguages } from "@/lib/i18n";
+
+const read = (path: string) =>
+ readFileSync(new URL(path, import.meta.url), "utf-8");
+
+const shell = read("../../../../index.html");
+const robots = read("../../../../public/robots.txt");
+const SITEMAP =
+ '<?xml version="1.0"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><url><loc>https://prunplanner.org/</loc></url></urlset>';
+
+describe("index.html", () => {
+ const doc = new DOMParser().parseFromString(shell, "text/html");
+ const jsonLd = [
+ ...doc.querySelectorAll('script[type="application/ld+json"]'),
+ ].map((s) => JSON.parse(s.textContent!));
+
+ it("names the game in the title and description", () => {
+ expect(doc.title).toContain("Prosperous Universe");
+ expect(
+ doc.querySelector('meta[name="description"]')!.getAttribute("content")
+ ).toContain("Prosperous Universe (PrUn)");
+ });
+
+ it("drops keywords, language and author", () => {
+ for (const name of ["keywords", "language", "author"])
+ expect(doc.querySelector(`meta[name="${name}"]`)).toBeNull();
+ });
+
+ it("lists the supported languages and no rating in its JSON-LD", () => {
+ const app = jsonLd.find((d) => d["@type"] === "WebApplication");
+ expect(app.inLanguage).toEqual(
+ SupportedLanguages.map((l) => String(l.value).replace("_", "-"))
+ );
+ expect(app.aggregateRating).toBeUndefined();
+ expect(app.offers.price).toBe("0");
+ });
+});
+
+describe("index.html's prerender check", () => {
+ // the inline script that hides the landing page where it doesn't belong
+ const check = new DOMParser()
+ .parseFromString(shell, "text/html")
+ .querySelector("head script:not([type])")!.textContent!;
+ const hidden = (path: string, user?: object) => {
+ document.documentElement.className = "";
+ window.history.replaceState({}, "", path);
+ vi.stubGlobal(
+ "localStorage",
+ memoryStorage(
+ user ? { prunplanner_user: JSON.stringify(user) } : {}
+ )
+ );
+ new Function(check)();
+ return document.documentElement.classList.contains("skip-prerender");
+ };
+
+ afterEach(() => {
+ window.history.replaceState({}, "", "/");
+ document.documentElement.className = "";
+ });
+
+ it.each([
+ ["/", undefined, false],
+ ["/", { preferences: { locale: "en_US" } }, false],
+ ["/market", undefined, true],
+ ["/shared/abc", undefined, true],
+ ["/", { accessToken: "a", refreshToken: "r" }, true],
+ ["/", { preferences: { locale: "de_DE" } }, true],
+ ])("on %s with %o hides it: %s", (path, user, hide) => {
+ expect(hidden(path, user)).toBe(hide);
+ });
+
+ it("still hides it off / when storage is unreadable", () => {
+ const blocked = () => {
+ document.documentElement.className = "";
+ vi.stubGlobal("localStorage", {
+ getItem: () => {
+ throw new Error("blocked");
+ },
+ });
+ new Function(check)();
+ return document.documentElement.classList.contains("skip-prerender");
+ };
+ window.history.replaceState({}, "", "/market");
+ expect(blocked()).toBe(true);
+ window.history.replaceState({}, "", "/");
+ expect(blocked()).toBe(false);
+ });
+});
+
+describe("checkLanding", () => {
+ let index: string;
+
+ beforeAll(async () => {
+ const { html, teleports } = await renderLanding();
+ index = injectLanding(shell, html, teleports);
+ });
+
+ it("passes the prerendered landing page", () => {
+ expect(checkLanding(index, robots, SITEMAP)).toEqual([]);
+ });
+
+ it("names what a crawler would miss", () => {
+ const broken = index
+ .replace(/<h1[\s\S]*?<\/h1>/, "")
+ .replace(/<link rel="canonical"[^>]*>/, "")
+ .replace(/<meta property="og:type"[^>]*>/, "")
+ .replace(/<script type="application\/ld\+json">[\s\S]*?<\/script>/, "")
+ .replace("<title>", "<title>x ");
+
+ expect(checkLanding(broken, "", "<urlset>")).toEqual([
+ "0 h1, not 1",
+ "h1 without the claim or the game",
+ expect.stringContaining('title "x'),
+ "not exactly one canonical to /",
+ 'no meta[property="og:type"]',
+ "JSON-LD blocks: WebApplication",
+ "robots.txt names no sitemap",
+ "sitemap.xml is no valid sitemap",
+ ]);
+ });
+
+ it("reports missing page text, links and a doubled description", () => {
+ const broken = index
+ .replaceAll("6,000+", "6000")
+ .replaceAll('href="/shared/', 'href="/x/')
+ .replace(
+ "</head>",
+ '<meta name="description" content="again"></head>'
+ )
+ .replace(
+ /<script type="application\/ld\+json">/,
+ '<script type="application/ld+json">{'
+ );
+
+ expect(checkLanding(broken, robots, SITEMAP)).toEqual([
+ "no player count",
+ "no link to the example plan",
+ "not exactly one description",
+ "JSON-LD blocks: invalid JSON,WebApplication",
+ ]);
+ });
+});
diff --git a/src/tests/lib/seo/prerenderMount.test.ts b/src/tests/lib/seo/prerenderMount.test.ts
new file mode 100644
index 000000000..d087a5792
--- /dev/null
+++ b/src/tests/lib/seo/prerenderMount.test.ts
@@ -0,0 +1,86 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { App } from "vue";
+import type { Router } from "vue-router";
+
+import { mountApp, prepareMount } from "@/lib/seo/prerenderMount";
+
+vi.mock("@/layout/components/HomepageHeader.vue", () => ({ default: {} }));
+
+function setup(prerendered: boolean, route = "homepage") {
+ document.head.innerHTML =
+ '<meta name="description" content="static"><link rel="canonical" href="https://prunplanner.org/"><meta name="theme-color" content="#030707">';
+ document.body.innerHTML = prerendered
+ ? '<!--teleport start anchor--><div class="ptoast-host"></div><!--teleport anchor--><div id="app" data-prerendered><h1>landing</h1></div>'
+ : '<div id="app"></div>';
+ const isReady = vi.fn().mockResolvedValue(undefined);
+ const router = { isReady, currentRoute: { value: { name: route } } };
+ return { router: router as unknown as Router, isReady };
+}
+
+describe("prepareMount", () => {
+ afterEach(() => {
+ document.head.innerHTML = "";
+ document.body.innerHTML = "";
+ });
+
+ it("hands the description and canonical to useHead", async () => {
+ const { router } = setup(false);
+
+ await prepareMount(router, "en_US");
+
+ expect(document.head.innerHTML).toBe(
+ '<meta name="theme-color" content="#030707">'
+ );
+ });
+
+ it("over the empty shell, mounts right away", async () => {
+ const { router, isReady } = setup(false);
+
+ await prepareMount(router, "en_US");
+
+ expect(isReady).not.toHaveBeenCalled();
+ });
+
+ it("over the prerendered landing page, waits for the route first", async () => {
+ const { router, isReady } = setup(true);
+
+ await prepareMount(router, "en_US");
+
+ expect(isReady).toHaveBeenCalled();
+ });
+
+ it("mounts on #app and shows a hidden #app again", () => {
+ setup(true);
+ const mount = vi.fn();
+
+ mountApp({ mount } as unknown as App);
+
+ expect(mount).toHaveBeenCalledWith(document.getElementById("app"));
+ expect(document.getElementById("app")!.hasAttribute("data-prerendered")).toBe(false);
+ });
+
+ it("hydrates the landing page as it is", async () => {
+ const { router } = setup(true);
+
+ await prepareMount(router, "en_US");
+
+ expect(document.body.innerHTML).toContain("ptoast-host");
+ expect(document.getElementById("app")!.innerHTML).toBe("<h1>landing</h1>");
+ });
+
+ it("clears the landing page and its teleports when a session goes on to /empire", async () => {
+ const { router } = setup(true, "empire");
+
+ await prepareMount(router, "en_US");
+
+ expect(document.body.innerHTML).toBe('<div id="app" data-prerendered=""></div>');
+ });
+
+ it("mounts fresh over the English prerender when another locale is stored", async () => {
+ const { router } = setup(true);
+
+ await prepareMount(router, "de_DE");
+
+ expect(document.body.innerHTML).toBe('<div id="app" data-prerendered=""></div>');
+ });
+});
diff --git a/src/tests/lib/seo/site.test.ts b/src/tests/lib/seo/site.test.ts
new file mode 100644
index 000000000..0f8008d9e
--- /dev/null
+++ b/src/tests/lib/seo/site.test.ts
@@ -0,0 +1,32 @@
+import { describe, it, expect } from "vitest";
+
+import { buildSitemap, htmlLang } from "@/lib/seo/site";
+
+describe("htmlLang", () => {
+ it.each([
+ ["en_US", "en-US"],
+ ["zh_CN", "zh-CN"],
+ ["keymode", "en"],
+ ])("%s is %s", (locale, lang) => expect(htmlLang(locale)).toBe(lang));
+});
+
+describe("buildSitemap", () => {
+ it("lists every path with the build date", () => {
+ const xml = buildSitemap(
+ ["/", "/imprint-tos"],
+ new Date("2026-10-20T12:00:00Z")
+ );
+ const doc = new DOMParser().parseFromString(xml, "application/xml");
+
+ expect(doc.querySelector("parsererror")).toBeNull();
+ expect(
+ [...doc.querySelectorAll("url")].map((url) => [
+ url.querySelector("loc")!.textContent,
+ url.querySelector("lastmod")!.textContent,
+ ])
+ ).toEqual([
+ ["https://prunplanner.org/", "2026-10-20"],
+ ["https://prunplanner.org/imprint-tos", "2026-10-20"],
+ ]);
+ });
+});
diff --git a/src/tests/prerender.test.ts b/src/tests/prerender.test.ts
new file mode 100644
index 000000000..122034b18
--- /dev/null
+++ b/src/tests/prerender.test.ts
@@ -0,0 +1,156 @@
+import { describe, it, expect, vi } from "vitest";
+
+import { apiService } from "@/lib/apiService";
+import { trackEvent, trackPageview } from "@/lib/analytics/useAnalytics";
+import {
+ checkLanding,
+ injectLanding,
+ renderLanding,
+ renderSitemap,
+} from "@/prerender";
+
+vi.mock("@/lib/analytics/useAnalytics", async (original) => ({
+ ...(await original<typeof import("@/lib/analytics/useAnalytics")>()),
+ trackEvent: vi.fn(),
+ trackPageview: vi.fn(),
+}));
+
+const SHELL = `<!DOCTYPE html><html><head><title>t
+
`;
+
+describe("prerender", () => {
+ it("renders the logged-out landing page in English, without events or requests", async () => {
+ const get = vi.spyOn(apiService, "get");
+ const { html, teleports } = await renderLanding();
+ const doc = new DOMParser().parseFromString(html, "text/html");
+
+ expect(doc.querySelectorAll("h1")).toHaveLength(1);
+ expect(doc.querySelector("h1")!.textContent).toContain(
+ "Plan a base before you build it."
+ );
+ expect(doc.querySelectorAll("#faq details")).toHaveLength(6);
+ // the auth panel is closed, the tours on their first step
+ expect(doc.querySelector("[role=dialog]")).toBeNull();
+ expect(
+ doc.querySelector('[role=group] button[aria-pressed="true"]')!.textContent
+ ).toContain("01");
+ // confirm host, toast host, drawer: the order the client hydrates
+ // them in (HomepageHeader, async, comes last on both sides)
+ const parts = teleports.split("").slice(1);
+ expect(parts).toHaveLength(3);
+ expect(parts[1]).toContain("ptoast-host");
+ expect(trackEvent).not.toHaveBeenCalled();
+ expect(get).not.toHaveBeenCalled();
+ // the router records its pageview; PostHog never starts in the
+ // prerender, so capture() drops it
+ expect(vi.mocked(trackPageview).mock.calls.flat()).toEqual(["homepage"]);
+ });
+
+ it("puts the markup into #app and the teleports first in ", () => {
+ const index = injectLanding(
+ SHELL,
+ "landing ",
+ ""
+ );
+
+ expect(index).toContain(
+ '
landing '
+ );
+ expect(index).toContain('rel="canonical"');
+ });
+
+ it("starts the scripts after the first paint, without modulepreloads", () => {
+ const index = injectLanding(SHELL, "landing ");
+
+ expect(index).not.toContain("modulepreload");
+ expect(index).not.toContain('
-
+
-
-
-
- {{ $t("homepage.hero.eyebrow") }}
-
+
+
+
- {{ $t("homepage.hero.title") }}
+ class="m-0 max-w-[1100px] flex flex-col items-center gap-7 text-balance text-[clamp(44px,6.6vw,92px)] leading-[0.98] font-black tracking-[-0.035em] text-white">
+
+
+
+
+ {{
+ $t("homepage.hero.title_accent")
+ }}
+
+
-
+
+ {{ $t("homepage.hero.positioning") }}
+
+
{{ $t("homepage.hero.lead") }}
-
+
+ :class="landingPrimaryButton">
{{ $t("homepage.hero.cta_logged_in") }}
+
+ :class="landingPrimaryButton"
+ @click="open('registration', 'hero')">
{{ $t("homepage.hero.cta") }}
+
-
- {{ $t("homepage.hero.how") }}
- ↓
-
+
+ {{ $t("homepage.hero.example") }}
+
+
+
+ {{ $t("homepage.hero.example_note") }}
+
+
+
+
+
+
+
+ {{ $t("homepage.hero.image_title") }}
+
+
+
+
-
- {{ $t("homepage.hero.facts") }}
+
+
+
+
+
+
+
+
+ {{ cell.value }}
+
+
{{ cell.text }}
-
- {{ $t("homepage.hero.image_caption") }}
-
-
-
-
-
-
- {{ $t("homepage.setup.title") }}
-
-
- {{ $t("homepage.setup.lead") }}
-
+
+
+
+
{{ $t("homepage.most_used.eyebrow") }}
+
{{ $t("homepage.most_used.title") }}
-
-
- 0{{ index + 1 }}
+
+
+
+ {{ $t("homepage.most_used.planet_search.label") }}
-
- {{ $t(`homepage.setup.${item.key}.label`) }}
+
+ {{ $t("homepage.most_used.planet_search.title") }}
-
- {{ $t(`homepage.setup.${item.key}.text`) }}
+
+ {{ $t("homepage.most_used.planet_search.lead") }}
-
-
+
+
+
+ {{ $t("homepage.most_used.empire.label") }}
+
+ {{ $t("homepage.most_used.empire.title") }}
+
+
+ {{ $t("homepage.most_used.empire.lead") }}
+
+
+
+
+
+
+
+ {{ $t(`homepage.most_used.${tool.key}.label`) }}
+
+ {{ $t("homepage.most_used.needs_fio") }}
+
+
+
+ {{ $t(`homepage.most_used.${tool.key}.title`) }}
+
+
+ {{ $t(`homepage.most_used.${tool.key}.lead`) }}
+
+
+
+
+
+
+
+
+
+ {{ $t("homepage.most_used.starter.label") }}
+
+
+ {{ $t("homepage.most_used.starter.title") }}
+
+
+ {{ $t("homepage.most_used.starter.text") }}
+
+
+
+
+ {{ $t("homepage.most_used.shared.label") }}
+
+
+ {{ $t("homepage.most_used.shared.title") }}
+
+
+ {{ $t("homepage.most_used.shared.text") }}
+
+
+ {{ $t("homepage.hero.example") }}
+
+
-
-
- {{ $t("homepage.most_used.title") }}
-
-
- {{ $t("homepage.most_used.lead") }}
+
+
+
+
{{ $t("homepage.setup.eyebrow") }}
+
{{ $t("homepage.setup.title") }}
+
+ {{ $t("homepage.setup.lead") }}
+
-
- {{ $t(`homepage.most_used.${tool.key}.label`) }}
+ role="group"
+ :aria-label="$t('homepage.setup.label')"
+ class="flex-[1_1_340px] flex flex-col gap-3">
+
- {{ $t("homepage.most_used.needs_fio") }}
+ class="pt-1 font-mono text-sm font-bold text-prunplanner">
+ 0{{ index + 1 }}
-
-
- {{ $t(`homepage.most_used.${tool.key}.title`) }}
-
-
- {{ $t(`homepage.most_used.${tool.key}.lead`) }}
-
-
-
-
-
+
+
+ {{ $t(`homepage.setup.${item.key}.label`) }}
+
+
+ {{ $t(`homepage.setup.${item.key}.text`) }}
+
+
+
+
+
+
-
-
-
-
-
- {{ $t("homepage.tools.title") }}
-
-
+
+