ssr

server/api.ts

@@ -0,0 +1,71 @@
+import axios from "axios";
+
+const API_BASE = process.env.VITE_APP_API_URL || "https://cycle-rider.ru";
+
+export const api = axios.create({
+  baseURL: API_BASE,
+  timeout: 10000,
+});
+
+export interface WorkoutItem {
+  id: string;
+  name: string;
+  created_by: string;
+  created_at: string;
+  description: string;
+  cadence: number;
+  heart_rate: number;
+  max_cadence: number;
+  max_heart_rate: number;
+  temperature: number;
+  speed: number;
+  power: number;
+  max_speed: number;
+  max_power: number;
+  duraion_sec: number;
+  distantion: number;
+  attachment: { url: string } | null;
+  latitude: number;
+  longitude: number;
+  is_public: boolean;
+  workouted_at: string;
+  external_links?: { values: Array<{ type: string; value: string }> };
+  photos?: Array<{
+    id: string;
+    url: string;
+    size: number;
+    latitude: number | null;
+    longitude: number | null;
+  }>;
+}
+
+export interface WorkoutListResponse {
+  results: WorkoutItem[];
+}
+
+export interface WorkoutDetailResponse {
+  workout: WorkoutItem;
+  results: Array<{
+    timestamp: number;
+    longitude: number;
+    latitude: number;
+    elevation: number | null;
+    power: number | null;
+    heart_rate: number | null;
+    speed: number | null;
+  }>;
+}
+
+export async function getPublicWorkouts(): Promise<WorkoutItem[]> {
+  const res = await api.get<WorkoutListResponse>("/api/v0/public/workouts");
+  return res.data.results;
+}
+
+export async function getPublicWorkout(
+  id: string,
+): Promise<WorkoutDetailResponse> {
+  const res = await api.get<WorkoutDetailResponse>(
+    `/api/v0/public/workouts/${id}`,
+  );
+  return res.data;
+}

server/index.ts

@@ -0,0 +1,286 @@
+import express, { Request, Response } from "express";
+import { getPublicWorkouts, getPublicWorkout } from "./api";
+import { renderTemplate, getAssetTags, SeoMeta } from "./template";
+
+const app = express();
+const PORT = process.env.SSR_PORT || 3001;
+const BASE_URL = process.env.SSR_BASE_URL || "https://cycle-rider.ru";
+
+app.disable("x-powered-by");
+
+// --- Helpers ---
+
+function getAssetTagsSafe(): string {
+  try {
+    return getAssetTags();
+  } catch {
+    return '<script type="module" src="/src/main.ts"></script>';
+  }
+}
+
+function escapeHtml(text: string): string {
+  return text.replace(/</g, "<").replace(/>/g, ">");
+}
+
+function formatDate(iso: string): string {
+  const d = new Date(iso);
+  const dd = String(d.getDate()).padStart(2, "0");
+  const mm = String(d.getMonth() + 1).padStart(2, "0");
+  const yyyy = d.getFullYear();
+  return `${dd}.${mm}.${yyyy}`;
+}
+
+function formatDuration(sec: number): string {
+  const h = Math.floor(sec / 3600);
+  const m = Math.floor((sec % 3600) / 60);
+  return `${h} ч. ${m} мин.`;
+}
+
+function formatDistance(meters: number): string {
+  return (meters / 1000).toFixed(1);
+}
+
+function formatSpeed(ms: number): string {
+  return Math.round(ms * 3.6).toString();
+}
+
+function getToken(req: Request): string | null {
+  const cookieHeader = req.headers.cookie;
+  if (!cookieHeader) return null;
+  const match = cookieHeader.match(/(?:^|;\s*)token=([^;]*)/);
+  return match ? decodeURIComponent(match[1]) : null;
+}
+
+// --- Routes ---
+
+// GET / — Landing page (SEO)
+app.get("/", async (_req: Request, res: Response) => {
+  const token = getToken(_req);
+  if (token) {
+    res.redirect(302, "/explore");
+    return;
+  }
+
+  try {
+    let workoutsHtml: string;
+    try {
+      const workouts = await getPublicWorkouts();
+      const top5 = workouts.slice(0, 5);
+      workoutsHtml = top5
+        .map(
+          (w) =>
+            `  <li><a href="/public/workouts/${w.id}">${escapeHtml(w.name)}</a> — ${formatDate(w.workouted_at)}, ${formatDistance(w.distantion)} км</li>`,
+        )
+        .join("\n");
+    } catch {
+      workoutsHtml = "  <li>Загрузка…</li>";
+    }
+
+    const content = `
+    <h1>Cycle Rider — анализ велотренировок</h1>
+    <p>Платформа для анализа велотренировок: мощность, пульс, скорость, каденс. Загрузите FIT/GPX файлы и получите детальную аналитику.</p>
+    <h2>Последние тренировки</h2>
+    <ul>
+${workoutsHtml}
+    </ul>
+    <h2>Возможности</h2>
+    <ul>
+      <li>Нормализованная мощность (NP) и FTP</li>
+      <li>Пульсовые зоны и скорость</li>
+      <li>Каденс и дистанция</li>
+      <li>Профиль высоты</li>
+    </ul>`;
+
+    const meta: SeoMeta = {
+      title: "Cycle Rider — Анализ велотренировок: мощность, пульс, скорость",
+      description:
+        "Анализируй велотренировки: мощность (FTP, NP), пульс, скорость, каденс, зоны мощности. Загрузка FIT/GPX. Cycle Rider.",
+      canonicalUrl: `${BASE_URL}/`,
+      jsonLd: {
+        "@context": "https://schema.org",
+        "@type": "WebApplication",
+        name: "Cycle Rider",
+        description: "Платформа для анализа велотренировок",
+        url: `${BASE_URL}/`,
+        applicationCategory: "HealthApplication",
+        operatingSystem: "Web",
+        offers: {
+          "@type": "Offer",
+          price: "0",
+        },
+      },
+    };
+
+    res.send(renderTemplate({ meta, content, assetTags: getAssetTagsSafe() }));
+  } catch {
+    res.status(500).send("Internal Server Error");
+  }
+});
+
+// GET /explore — Public feed
+app.get("/explore", async (_req: Request, res: Response) => {
+  try {
+    const workouts = await getPublicWorkouts();
+    const list = workouts
+      .map(
+        (w) =>
+          `      <li>\n        <a href="/public/workouts/${w.id}">${escapeHtml(w.name)}</a>\n        — ${formatDate(w.workouted_at)}, ${formatDistance(w.distantion)} км, ${formatSpeed(w.speed)} км/ч, ${w.heart_rate} уд/мин\n      </li>`,
+      )
+      .join("\n");
+
+    const content = `
+    <h1>Публичные тренировки</h1>
+    <p>Лента велотренировок от сообщества.</p>
+    <ul>
+${list}
+    </ul>`;
+
+    const meta: SeoMeta = {
+      title: "Публичные велотренировки — Cycle Rider",
+      description:
+        "Лента публичных велотренировок: скорость, пульс, мощность, расстояние. Cycle Rider.",
+      canonicalUrl: `${BASE_URL}/explore`,
+      jsonLd: {
+        "@context": "https://schema.org",
+        "@type": "WebPage",
+        name: "Публичные велотренировки",
+        url: `${BASE_URL}/explore`,
+        description:
+          "Лента публичных велотренировок: скорость, пульс, мощность, расстояние.",
+      },
+    };
+
+    res.send(renderTemplate({ meta, content, assetTags: getAssetTagsSafe() }));
+  } catch {
+    res.status(500).send("Internal Server Error");
+  }
+});
+
+// GET /public/workouts/:id — Workout detail
+app.get("/public/workouts/:id", async (req: Request, res: Response) => {
+  try {
+    const detail = await getPublicWorkout(req.params.id);
+    const w = detail.workout;
+
+    const content = `
+    <h1>${escapeHtml(w.name)}</h1>
+    <p>${escapeHtml(w.description)}</p>
+    <ul class="workout-metrics">
+      <li>Дата: ${formatDate(w.workouted_at)}</li>
+      <li>Расстояние: ${formatDistance(w.distantion)} км</li>
+      <li>Средняя скорость: ${formatSpeed(w.speed)} км/ч</li>
+      <li>Макс. скорость: ${formatSpeed(w.max_speed)} км/ч</li>
+      <li>Средний пульс: ${w.heart_rate} уд/мин</li>
+      <li>Макс. пульс: ${w.max_heart_rate} уд/мин</li>
+      <li>Средняя мощность: ${w.power} Вт</li>
+      <li>Макс. мощность: ${w.max_power} Вт</li>
+      <li>Каденс: ${w.cadence} об/мин</li>
+      <li>Длительность: ${formatDuration(w.duraion_sec)}</li>
+    </ul>`;
+
+    const desc =
+      w.description.slice(0, 150) + (w.description.length > 150 ? "…" : "");
+    const metrics = `${formatDistance(w.distantion)} км, ${formatSpeed(w.speed)} км/ч, пульс ${w.heart_rate}, мощность ${w.power} Вт`;
+
+    const meta: SeoMeta = {
+      title: `${w.name} — Cycle Rider`,
+      description: `${desc} ${metrics}`,
+      canonicalUrl: `${BASE_URL}/public/workouts/${w.id}`,
+      jsonLd: {
+        "@context": "https://schema.org",
+        "@type": "SportsActivity",
+        name: w.name,
+        description: desc,
+        url: `${BASE_URL}/public/workouts/${w.id}`,
+        startDate: w.workouted_at,
+        sport: "Cycling",
+      },
+    };
+
+    res.send(renderTemplate({ meta, content, assetTags: getAssetTagsSafe() }));
+  } catch (err: unknown) {
+    // Check for 404 from API
+    if (
+      err &&
+      typeof err === "object" &&
+      "response" in err &&
+      (err as { response?: { status?: number } }).response?.status === 404
+    ) {
+      res.status(404).send("Not found");
+      return;
+    }
+    res.status(500).send("Internal Server Error");
+  }
+});
+
+// GET /routes — Routes page (minimal)
+app.get("/routes", async (_req: Request, res: Response) => {
+  try {
+    const content = `
+    <h1>Конструктор маршрутов</h1>
+    <p>Создайте свой велосипедный маршрут на карте. Добавляйте точки, рассчитывайте дистанцию и экспортируйте в GPX.</p>`;
+
+    const meta: SeoMeta = {
+      title: "Конструктор веломаршрутов — Cycle Rider",
+      description:
+        "Создайте велосипедный маршрут на карте, экспортируйте в GPX. Cycle Rider.",
+      canonicalUrl: `${BASE_URL}/routes`,
+    };
+
+    res.send(renderTemplate({ meta, content, assetTags: getAssetTagsSafe() }));
+  } catch {
+    res.status(500).send("Internal Server Error");
+  }
+});
+
+// GET /sitemap.xml
+app.get("/sitemap.xml", async (_req: Request, res: Response) => {
+  try {
+    const workouts = await getPublicWorkouts();
+
+    const staticUrls = [
+      `<url><loc>${BASE_URL}/</loc><changefreq>daily</changefreq><priority>1.0</priority></url>`,
+      `<url><loc>${BASE_URL}/explore</loc><changefreq>daily</changefreq><priority>0.9</priority></url>`,
+      `<url><loc>${BASE_URL}/routes</loc><changefreq>weekly</changefreq><priority>0.5</priority></url>`,
+    ];
+
+    const workoutUrls = workouts.map((w) => {
+      const date = new Date(w.workouted_at).toISOString().split("T")[0];
+      return `<url><loc>${BASE_URL}/public/workouts/${w.id}</loc><lastmod>${date}</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>`;
+    });
+
+    const xml = `<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n  ${[
+      ...staticUrls,
+      ...workoutUrls,
+    ].join("\n  ")}\n</urlset>`;
+
+    res.set("Content-Type", "application/xml; charset=utf-8");
+    res.send(xml);
+  } catch {
+    res.status(500).send("Internal Server Error");
+  }
+});
+
+// GET /robots.txt
+app.get("/robots.txt", (_req: Request, res: Response) => {
+  const text = `User-agent: *
+Allow: /
+Disallow: /auth/
+Disallow: /workouts/
+Disallow: /preferences/
+Disallow: /admin/
+
+Sitemap: ${BASE_URL}/sitemap.xml
+`;
+  res.set("Content-Type", "text/plain; charset=utf-8");
+  res.send(text);
+});
+
+// Health check
+app.get("/health", (_req: Request, res: Response) => {
+  res.json({ status: "ok" });
+});
+
+app.listen(PORT, () => {
+  console.log(`SSR server listening on :${PORT}`);
+});

server/template.ts

@@ -0,0 +1,61 @@
+import fs from "fs";
+import path from "path";
+
+export interface SeoMeta {
+  title: string;
+  description: string;
+  canonicalUrl: string;
+  ogImage?: string;
+  jsonLd?: Record<string, unknown>;
+}
+
+export interface TemplateOptions {
+  meta: SeoMeta;
+  content: string; // HTML content to inject inside <div id="app">
+  assetTags: string; // <script>/<link> tags from built dist/index.html
+}
+
+/**
+ * Read built dist/index.html and extract <script> and <link rel="stylesheet"> tags.
+ * This ensures we always reference the correct hashed asset filenames.
+ */
+export function getAssetTags(): string {
+  const distIndex = path.resolve(__dirname, "../dist/index.html");
+  const html = fs.readFileSync(distIndex, "utf-8");
+  const scriptMatch = html.match(/<script[^>]*src="[^"]*"[^>]*><\/script>/g);
+  const linkMatch = html.match(/<link[^>]*rel="stylesheet"[^>]*>/g);
+  return [...(linkMatch || []), ...(scriptMatch || [])].join("\n    ");
+}
+
+export function renderTemplate(options: TemplateOptions): string {
+  const { meta, content, assetTags } = options;
+  const jsonLdScript = meta.jsonLd
+    ? `\n    <script type="application/ld+json">${JSON.stringify(meta.jsonLd)}</script>`
+    : "";
+
+  return `<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="yandex-verification" content="81ff150ccc5ab8c6" />
+    <title>${meta.title}</title>
+    <meta name="description" content="${meta.description}" />
+    <link rel="canonical" href="${meta.canonicalUrl}" />
+    <meta property="og:title" content="${meta.title}" />
+    <meta property="og:description" content="${meta.description}" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="${meta.canonicalUrl}" />
+    ${meta.ogImage ? `<meta property="og:image" content="${meta.ogImage}" />` : ""}
+    <link rel="icon" href="/favicon.ico" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet" />
+    ${assetTags}
+    ${jsonLdScript}
+  </head>
+  <body>
+    <div id="app">
+      ${content}
+    </div>
+  </body>
+</html>`;
+}