@smi-digital/create-smi-app 2.14.2 → 2.15.0

package/templates/integrations/strapi-astro/docker-compose.yml.template

@@ -88,14 +88,14 @@ services:
       - "traefik.http.routers.__APP_NAME__-astro.rule=Host(`${PROJECT_DOMAIN}`) || Host(`www.${PROJECT_DOMAIN}`)"
       - "traefik.http.routers.__APP_NAME__-astro.tls.certresolver=letsencrypt"
       # Global middlewares (defined in webhosting-infra/traefik/dynamic)
-      - "traefik.http.routers.__APP_NAME__-astro.middlewares=secure-headers@file,rate-limit@file"
+      - "traefik.http.routers.__APP_NAME__-astro.middlewares=secure-headers@file,rate-limit@file,compress@file"
       - "traefik.http.routers.__APP_NAME__-astro.service=__APP_NAME__-cache"
       # Backend host → this same cache (Strapi behind it; /uploads cached). The
       # 25 MB upload body limit + rate-limit/secure-headers apply on this route.
       - "traefik.http.routers.__APP_NAME__-strapi.rule=Host(`${BACKEND_DOMAIN}`)"
       - "traefik.http.routers.__APP_NAME__-strapi.tls.certresolver=letsencrypt"
       - "traefik.http.middlewares.__APP_NAME__-strapi-limit.buffering.maxRequestBodyBytes=25000000"
-      - "traefik.http.routers.__APP_NAME__-strapi.middlewares=rate-limit@file,secure-headers@file,__APP_NAME__-strapi-limit"
+      - "traefik.http.routers.__APP_NAME__-strapi.middlewares=rate-limit@file,secure-headers@file,compress@file,__APP_NAME__-strapi-limit"
       - "traefik.http.routers.__APP_NAME__-strapi.service=__APP_NAME__-cache"
       # Both routers share this container's single service (Port 80), which
       # proxies to Astro / Strapi by server_name.

package/templates/integrations/strapi-astro/docs/design.md.template

@@ -0,0 +1,78 @@
+# DESIGN.md
+
+Implementation and UI design rules, imported into [CLAUDE.md](./CLAUDE.md) via `@DESIGN.md`. Split out because this section changes far more often than the architecture/tech-stack content in CLAUDE.md — edit this file directly for design-rule changes.
+
+## Implementation Rules
+
+Always use the predefined TextStyles, Paddings and Colors as defined in the project's style guide in the /styles folder.
+If a design spec (Figma file, screenshot, written brief) is given to you then always make sure to use exactly the distances/paddings, colors and textStyles it specifies. This is the most important step of the development.
+
+### Figma-to-Code Fidelity (exact-copy mode)
+
+Whenever the designer says "here's the Figma component" (or points to a specific Figma node/frame), this is a **copy task, not an inspiration task**. The designs are built almost exclusively with Auto Layout specifically so they can be translated 1:1 into code — do not "improve," simplify, or reinterpret any part of the structure he has already thought through.
+
+- **Fetch first, assume never.** Use the Figma MCP (`get_design_context` / `get_metadata` / `get_variable_defs`) to pull the actual node data before writing any markup. Never eyeball a screenshot and reconstruct structure from memory.
+- **Copy the Auto Layout structure as the div structure.** Every Auto Layout frame becomes a wrapping element with matching flex-direction, gap, alignment, and nesting depth. Do not flatten, merge, or restructure frames "because it's simpler in code" — the frame hierarchy in Figma is the source of truth for the DOM hierarchy.
+- **Copy paddings exactly**, per frame, as given by Figma — do not round to the nearest value from `_variables.scss`'s spacing scale. If an exact Figma padding doesn't map cleanly to an existing token, use the exact value (via a CSS custom value) rather than substituting the closest predefined one, and flag the mismatch.
+- **Text layers NOT inside Auto Layout** (freely positioned/absolute text) must be made **fluid/responsive to viewport width** — e.g. `clamp()` or `vw`-based sizing — instead of a fixed rem size, since Auto Layout isn't there to reflow them at different breakpoints.
+- **Never substitute your own layout idea for the given one.** If something in the Figma structure seems technically awkward to implement as specified (e.g. conflicts with SSR, an existing component, or a real constraint), stop and ask — don't quietly implement a "cleaner" version instead.
+
+### UI Design Reasoning
+
+Before implementing any UI change, work through these in order. This isn't decoration —
+skipping steps produces code that compiles and lints clean but looks wrong.
+
+#### 1. Typography — which role, why
+
+- Never set font-size/line-height/letter-spacing ad-hoc. Always use a `text-*` mixin from `_textStyles.scss`.
+- Role selection logic: `f1/f2` = fact or Number text (rare). `d1/d2/d3` = section
+  headlines, descending by section importance. `title` = card/subsection headers. `body` = paragraph text.
+  `caption` = supporting/meta text. `label` = UI chrome (buttons, tags, nav) — always `$font-mono`.
+- If a design spec's text doesn't cleanly match an existing role's size, that's a signal to ask
+  (new role needed?) — not to hardcode a one-off size.
+- If a designs spec or figma component uses a different font that can be a signal for a responsive design used in a Hero Section, ask here.
+- Weight comes from the shared `$weights` map (thin/regular/bold) — never a raw `font-weight` value.
+
+#### 2. Spacing — deliberate, not categorical
+
+- Because Capsize trims line-box whitespace, padding/margin values translate directly to visual
+  gap — there's no implicit cushion to hide an imprecise value. Treat every spacing value as exact.
+- Spacing must encode the relationship between adjacent elements, not just "which section": a
+  heading sits closer to the content it introduces than to the next unrelated block. Two elements
+  with a tight relationship (headline + its subline, label + its input) get a smaller value than
+  two elements that just happen to be stacked (end of one section, start of the next).
+- Separately, check whether the section itself is static text or animated/graphic-heavy:
+  static sections use the φ-rem spacing scale from `_variables.scss`; animated/heavy-graphic
+  sections use viewport-relative (vw) or clamped values instead, since a fixed rem value
+  breaks once the section starts moving/scaling with scroll. This is independent of the
+  relationship-based decision above — apply both.
+- If a spacing value is being picked "because it's what's used elsewhere" rather than because
+  of the actual relationship between these two specific elements, stop and reconsider.
+
+#### 3.1. Hierarchy — opacity per element type, not a flat 3-tier
+
+- Opacity is calibrated per element type, not just "primary/secondary/tertiary": e.g. H1 at 1.0,
+  H2 at ~0.9, H3 at ~0.8, The exact values depend on how many heading levels and text roles a given component has. Less Important gets less opacity.
+- Primary content (what the user should read first) stays at or near 1.0. Everything else steps
+  down based on its actual role in that specific component, not a fixed lookup table.
+- If a component has more distinct text elements at full opacity than it has genuinely
+  equal-importance messages, that's a hierarchy bug — flag it rather than implementing it as-is.
+
+#### 3.2. Hierarchy with Spacing
+
+- The Golden Spacing System is also there to help with Hierarchy.
+- Less related Objects get larger paddings, than closer related objects. Specifically with Text on Text.
+- Go bigger on Spacing than you think, because of Capsize. Also when using relative Paddings think about setting minimum borders so that text never gets cut off, or interferes with other text
+
+#### 4. Composition — preserving intent, not inventing
+
+- Identify the section's or website's focal element (its "star") — the one thing meant to hold attention.
+  When implementing, make sure any motif tied to it (shape, color, texture) that recurs
+  elsewhere in the same design is actually preserved in code — don't silently drop a
+  repeated visual detail because it's inconvenient to implement (e.g. a clipped shape reused
+  as both a card background and a button accent).
+- Depth effects (noise texture, glass/blur, parallax) must stay subtle — if an effect visually
+  competes with the focal element, that's a regression, flag it before shipping.
+- If a provided spec (design file, screenshot, written brief) conflicts with this checklist,
+  the spec wins — this section is for filling gaps or catching implementation drift, not
+  overriding what's actually provided.