+<meta name="description"> +<meta property="og:title"> +<meta property="og:description"> +<meta property="og:image"> +<meta property="og:url"> +``` + +This is an important architectural requirement. + +--- + +## 4. Repository structure + +Target structure: + +```text +crr-share/ +├── src/ +│ ├── components/ +│ │ ├── AppHeader.vue +│ │ ├── EventHeader.vue +│ │ ├── EventPoster.vue +│ │ ├── SharePanel.vue +│ │ ├── ShareText.vue +│ │ ├── ShareInstructions.vue +│ │ └── FacebookPost.vue +│ │ +│ ├── content/ +│ │ └── events/ +│ │ ├── festas-2026.md +│ │ └── penalty-cup-2026.md +│ │ +│ ├── data/ +│ │ └── events.ts +│ │ +│ ├── layouts/ +│ │ └── DefaultLayout.vue +│ │ +│ ├── pages/ +│ │ ├── HomePage.vue +│ │ ├── SharePage.vue +│ │ └── EventSharePage.vue +│ │ +│ ├── router/ +│ │ └── routes.ts +│ │ +│ ├── styles/ +│ │ └── global.css +│ │ +│ ├── types/ +│ │ └── event.ts +│ │ +│ ├── App.vue +│ └── main.ts +│ +├── public/ +│ ├── images/ +│ │ └── events/ +│ ├── favicon.svg +│ └── logo.* +│ +├── scripts/ +│ └── validate-events.ts +│ +├── Dockerfile +├── compose.yaml +├── nginx.conf +├── .dockerignore +├── vite.config.ts +├── tsconfig.json +├── package.json +├── package-lock.json +└── README.md +``` + +The agent may simplify component splitting where appropriate, but should preserve the overall separation between: + +- content loading +- event schema/model +- routing +- sharing UI +- Facebook embed +- layout/styling + +--- + +## 5. Event content model + +Each event must be represented by **one Markdown file**. + +Example: + +```markdown +--- +title: "Festas do 66.º Aniversário" +slug: "festas-2026" + +active: true + +date: + start: 2026-09-05 + end: 2026-09-07 + +location: + name: "Centro Recreativo da Rebolaria" + locality: "Rebolaria, Batalha" + +poster: "/images/events/festas-2026.jpg" + +facebook: + url: "https://www.facebook.com/story.php?story_fbid=122327514458210862&id=61556325866671" + embed: true + +share: + text: | + Já está tudo preparado para mais um grande fim de semana na Rebolaria! 🎉🥳 + + Dias 5, 6 e 7 de setembro, apareçam e venham festejar connosco! ❤️💚 + + Vejam o programa completo aqui em baixo 👇 +--- + +## Sobre o evento + +O Centro Recreativo da Rebolaria celebra o seu **66.º aniversário** +com três dias de música, tradição, convívio e animação. + +## Programa + +### Sábado, 5 de setembro + +- 15h00 — Torneio de Penalty Cup +- 19h00 — Abertura do restaurante +- 22h00 — Pedro Nobre +- De seguida — DJ Pinona + +### Domingo, 6 de setembro + +- 12h00 — Abertura do arraial +- 16h30 — Rancho Folclórico Rosas do Lena +- 19h00 — Abertura do restaurante +- 22h00 — Red Kiss + +### Segunda-feira, 7 de setembro + +- 18h30 — Jogos tradicionais +- 19h00 — Abertura do restaurante +- 22h00 — Fábio Tacho — Teclista e Vocalista +``` + +The Markdown body is for human-readable event information. + +The YAML frontmatter is for structured application data. + +--- + +## 6. Event TypeScript model + +Define an explicit event model. + +For example: + +```ts +export interface EventDate { + start: string; + end: string; +} + +export interface EventLocation { + name: string; + locality?: string; +} + +export interface FacebookConfig { + url: string; + embed: boolean; +} + +export interface ShareConfig { + text: string; +} + +export interface EventData { + title: string; + slug: string; + active: boolean; + date: EventDate; + location: EventLocation; + poster: string; + facebook: FacebookConfig; + share: ShareConfig; + html: string; +} +``` + +Do not rely on untyped frontmatter objects throughout the app. + +--- + +## 7. Event loading + +Implement one central event loader in: + +```text +src/data/events.ts +``` + +Use Vite: + +```ts +import.meta.glob(...) +``` + +to load event Markdown files at build time. + +A reasonable approach is: + +```ts +const files = import.meta.glob( + "../content/events/*.md", + { + query: "?raw", + import: "default", + eager: true, + }, +); +``` + +Then for each file: + +1. parse YAML frontmatter with `gray-matter` +2. validate metadata with `zod` +3. render Markdown body with `markdown-it` +4. return a typed `EventData` + +Expose helpers such as: + +```ts +getEvents() +getEventBySlug(slug) +getActiveEvent() +``` + +Sort events deterministically, preferably by start date descending. + +--- + +## 8. Schema validation + +Use `zod`. + +Required fields: + +```text +title +slug +active +date.start +date.end +location.name +poster +facebook.url +facebook.embed +share.text +``` + +Validate: + +- slug format +- valid dates +- end date >= start date +- valid Facebook URL +- non-empty share text +- poster path starts with `/` +- exactly zero or one active events +- no duplicated slugs + +Example schema concept: + +```ts +const EventSchema = z.object({ + title: z.string().min(1), + slug: z.string().regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/), + active: z.boolean(), + date: z.object({ + start: z.string(), + end: z.string(), + }), + location: z.object({ + name: z.string().min(1), + locality: z.string().optional(), + }), + poster: z.string().startsWith("/"), + facebook: z.object({ + url: z.string().url(), + embed: z.boolean(), + }), + share: z.object({ + text: z.string().min(1), + }), +}); +``` + +If event data is invalid, the production build must fail with a clear error. + +--- + +## 9. Explicit validation script + +In addition to runtime/build-time loading validation, create: + +```text +scripts/validate-events.ts +``` + +and expose: + +```json +{ + "scripts": { + "validate": "tsx scripts/validate-events.ts", + "build": "npm run validate && vite-ssg build" + } +} +``` + +The validator should catch: + +- invalid YAML +- invalid field types +- duplicate slugs +- multiple `active: true` events +- invalid Facebook URLs +- invalid date ranges +- missing poster files where practical + +The agent may adapt the exact command to the chosen `vite-ssg` setup. + +--- + +## 10. Routes + +Use Vue Router-compatible route definitions. + +Required routes: + +```text +/ +/partilhar +/partilhar/:slug +``` + +### `/` + +Simple CRR landing page. + +### `/partilhar` + +Resolve the current event using: + +```ts +getActiveEvent() +``` + +Prefer rendering the active event directly rather than introducing an unnecessary HTTP redirect. + +If there is no active event, render a friendly empty state. + +### `/partilhar/:slug` + +Render the requested historical/current event. + +Unknown slugs should produce a sensible 404/not-found state. + +--- + +## 11. Static generation + +Configure `vite-ssg` so every event route is generated at build time. + +The generated route list should include: + +```text +/ +/partilhar +/partilhar/festas-2026 +/partilhar/penalty-cup-2026 +... +``` + +Do not hard-code event routes manually. + +Generate them from the Markdown content. + +The agent must verify the final `dist` directory contains pre-rendered content for every event. + +--- + +## 12. Event page UX + +Mobile is the primary target. + +Page order: + +```text +CRR branding + +Event title +Event date/location + +Poster + +------------------------ + +AJUDA-NOS A DIVULGAR + +Suggested sharing text + +[ Copiar texto ] + +✓ Texto copiado + +[ Abrir publicação no Facebook ] + +------------------------ + +COMO PARTILHAR + +1. Copia o texto. +2. Abre a publicação. +3. Escolhe Partilhar → Escrever publicação. +4. Cola o texto e publica. + +------------------------ + +Original Facebook publication +(optional embed) + +------------------------ + +About the event + +Programme +``` + +The two primary calls to action are: + +```text +Copiar texto +Abrir publicação no Facebook +``` + +Both must be large, touch-friendly controls. + +--- + +## 13. `SharePanel.vue` + +Create a reusable component receiving something like: + +```ts +interface Props { + shareText: string; + facebookUrl: string; +} +``` + +Responsibilities: + +- show the suggested text +- copy text to clipboard +- show success/failure state +- expose Facebook button +- display sharing instructions + +Do not let Facebook-specific embed logic live in this component. + +--- + +## 14. Copy functionality + +Primary implementation: + +```ts +await navigator.clipboard.writeText(props.shareText); +``` + +After successful copy: + +```text +✓ Copiado +``` + +Restore to: + +```text +Copiar texto +``` + +after around 2–3 seconds. + +If Clipboard API is unavailable or fails: + +1. select the textarea +2. try a compatible fallback +3. if copying still fails, show: + +```text +Não foi possível copiar automaticamente. Selecione o texto acima e copie-o manualmente. +``` + +The share text must remain visible/selectable even without JavaScript. + +--- + +## 15. Facebook button + +The button must use the original CRR Facebook post URL directly. + +Conceptually: + +```vue +<a + :href="facebookUrl" + target="_blank" + rel="noopener noreferrer" + class="primary-facebook-button" +> + Abrir publicação no Facebook +</a> +``` + +Do not construct: + +```text +facebook.com/sharer/sharer.php?u=<facebook post> +``` + +The objective is to open the actual original CRR publication. + +--- + +## 16. Facebook embed + +Create: + +```text +src/components/FacebookPost.vue +``` + +Props: + +```ts +interface Props { + url: string; +} +``` + +Only render it when: + +```yaml +facebook: + embed: true +``` + +Use the official Facebook post plugin/embed mechanism. + +Keep this isolated so it can be changed without affecting event data or sharing logic. + +The entire page must remain usable if the embed: + +- does not load +- is blocked by browser privacy controls +- is blocked by cookies/tracking settings +- is unavailable because the Facebook post is not public +- changes behavior in the future + +The embed is optional enhancement only. + +Always keep a visible normal link to the original Facebook publication. + +--- + +## 17. Multiple suggested texts — future compatibility + +V1 can use: + +```yaml +share: + text: | + ... +``` + +But design the data and component structure so the project can later support: + +```yaml +share: + texts: + - | + Já está tudo preparado... + + - | + As Festas da Rebolaria estão quase aí... + + - | + Dias 5, 6 e 7... +``` + +Future UI could provide: + +```text +Texto 1 +Texto 2 +Texto 3 +``` + +The implementation should not require a major rewrite to support this. + +--- + +## 18. Optional native sharing + +As a secondary enhancement, support: + +```ts +navigator.share(...) +``` + +when available. + +This should share the CRR landing/event page itself. + +Example: + +```text +[ Partilhar esta página ] +``` + +This is not a replacement for the Facebook workflow and should be visually secondary. + +Do not make it a V1 blocker. + +--- + +## 19. Design + +Design principles: + +- Portuguese UI +- mobile-first +- maximum content width around 600–700px +- large readable typography +- large buttons +- minimal visual clutter +- accessible contrast +- poster prominently displayed +- CRR identity/colours where available +- no dashboard/admin appearance + +Prefer normal CSS rather than introducing a large UI framework unless justified. + +Use semantic HTML inside Vue templates: + +```text +header +main +section +article +footer +button +a +``` + +Avoid icon-only actions. + +--- + +## 20. Metadata and social previews + +Use `@unhead/vue` so each pre-rendered event page gets unique metadata. + +For every event generate: + +```html +<title>...

{{ event.title }}

Publicação original no Facebook