Stort genombrott - Guidesystemet klart och två guider migrerade

ffuniversewebbutveckling

De senaste två dagarna har varit intensiva och otroligt produktiva! Vi har nu inte bara migrerat hela guidesystemets design från PHP till modern kod, utan också genomfört fullständiga migreringar av både FF7-guiden och FF1-guiden. Låt oss dyka ner i vad som åstadkommits.

Guidesystemet - Från WordPress och PHP till Astro

Den första stora milstolpen var att migrera hela guidetemat från det gamla WordPress-baserade systemet till Astro. För den som inte är bekant med dessa tekniker: WordPress är ett CMS (innehållshanteringssystem) som körs på servrar med PHP (ett programmeringsspråk) och databaser, medan Astro är ett modernt ramverk som genererar statiska HTML-filer direkt vid byggtid. Markdown är ett enkelt textformat för att skriva innehåll, och Frontmatter är metadata (som titel, datum, kategorier) som läggs överst i varje Markdown-fil.

Vad migrerades?

Vi konverterade tre kritiska komponenter från det gamla FFU2 WordPress-temat:

1. Menu-systemet (/inc/menu.php → src/utils/guideMenu.ts)

  • PHP-logiken omskriven till TypeScript
  • Hanterar hierarkiska menyer med föräldra/barn-relationer
  • Automatisk breadcrumb-generering
  • Aktiv sidmarkering

2. Sidomenyn (sidebar.php → src/components/guide/GuideSidebar.astro)

  • Spellogotyp från varje guide
  • Mobil meny-toggle
  • Mobilanpassad sökfunktion
  • Hierarkisk navigation
  • Breadcrumbs med schema.org-markup

3. Huvudet/Header (header.php → src/components/guide/GuideHeader.astro)

  • Spelspecifika bakgrundsbilder
  • Responsiv design
  • Sökformulär för desktop

Varför är detta viktigt?

Nu har vi en innehållsdriven arkitektur där menyer byggs automatiskt från våra Markdown-filer istället för att hårdkodas. Detta betyder att när vi lägger till en ny sida, uppdateras menyn automatiskt. All guidlogik är nu återanvändbar över alla 22 spelguider vi ska migrera.

FF7-guiden - Vår största guide är klar!

FF7-guiden har alltid varit vår mest omfattande och mest komplexa guide, vilket gjorde den till det perfekta testfallet. Om vi kan migrera FF7, kan vi migrera allt!

Statistik från FF7-migrationen

  • 190 sidor migrerade från WordPress XML-export
  • 350 bilder nedladdade och organiserade
  • 7 olika sidmallar konverterade till Astro-komponenter
  • 34 draft-bossar konsoliderade in i 16 föräldrasidor
  • Byggtid: 2.16 sekunder för hela sajten!

De sju sidmallarna

En av utmaningarna var att hantera FF7:s olika sidmallar:

  1. Boss-mallen - Den mest komplexa med HP, MP, Level, svagheter och “related bosses”
  2. Karaktärs-mallar - Tre varianter (boxes, onebox, simple) med svenskspråkiga fält som “ålder”, “längd_i_cm”, “vikt_i_kg”, “hemstad”, “yrke”, “födelsedag”, och “vapen”
  3. Limit Break-mallen - För karaktärernas specialattacker
  4. Location-mallen - För orter och områden
  5. Standard-mallen - För vanliga guidesidor

Alla bevarar den ursprungliga WordPress-strukturen perfekt, men är nu byggda i modern Astro-kod istället för PHP.

URL-bevarandet

En kritisk del var att bevara alla befintliga URL:er. En sida som bossar/rufus i WordPress blev src/content/pages/ff7/bossar/rufus.md och får samma URL: /guide/ff7/bossar/rufus/. Detta säkerställer att alla gamla bokmärken och länkar fortsätter fungera.

Bildhantering

Alla 350 bilder flyttades från WordPress hierarkiska struktur till public/images/ff7/. Vi skrev batch-script för att automatiskt uppdatera alla bildreferenser i Markdown:

find src/content/pages/ff7 -name "*.md" -type f -exec sed -i '' 's|!\[\](images/|![](/images/ff7/|g' {} \;

FF1-guiden - Lärdom och förbättringar

Efter FF7 var det dags för FF1, och här lärde vi oss ännu mer om hur migrationen ska fungera optimalt.

Statistik från FF1-migrationen

  • 41 publicerade sidor med korrekt YAML frontmatter
  • 26 barnsidor i föräldramappar (boss/, guide/, magier/, bilder/)
  • 15 topnivå-sidor (flat struktur)
  • 94 bilder nedladdade (24 featured + 70 gallery)
  • Byggtid: 354 sidor genererade

Kritiska lärdomar från FF1

1. Föräldra/barn-relationer kräver mappstruktur

Den första FF1-migrationen lade alla sidor platt i src/content/pages/ff1/, vilket bröt hierarkin. Vi lärde oss att detta måste struktureras med mappar:

RÄTT STRUKTUR:
src/content/pages/ff1/
  boss.md          (föräldra/listing-sida)
  boss/            (mapp för barn)
    garland.md
    pirate.md
    chaos.md

Detta gör att Astro’s routing automatiskt förstår att /ff1/boss/garland/ är en barn-sida till /ff1/boss/.

2. Story/Disclaimer ska vara direkt i index.astro

I WordPress hade vi hack för att inkludera berättelse och disclaimer. I Astro är det enklare och snabbare att lägga detta direkt i index.astro:

<GuideBaseLayout title="Final Fantasy I Guide" game={game}>
  <section class="story">
    <h1>Välkommen till FFI Universe</h1>
    <p>Fyra unga krigare reser genom landet...</p>
  </section>
</GuideBaseLayout>

3. Bildgallerier

FF1 hade flera gallerisidor med 20-30 bilder vardera. Vi byggde stöd för detta i frontmatter:

---
title: "Bilder"
template: gallery
gallery:
  - image: "/images/ff1/screenshot1.jpg"
    caption: "Opening scene"
  - image: "/images/ff1/screenshot2.jpg"
    caption: "Battle system"
---

Vad betyder allt detta?

Med guidesystemet klart och två guider fullt migrerade har vi nu:

1. En beprövad migrations-pipeline

Vi har dokumenterat varje steg, skrivit återanvändbara script, och lärt oss alla fallgropar. De återstående 20 guiderna kommer att gå mycket snabbare.

2. Dramatisk prestandaförbättring

  • WordPress: Flera sekunder för att ladda en sida (databasfrågor, PHP-körning)
  • Astro: Hela sajten byggs på ~2 sekunder, varje sida laddas instant (statiska filer)

3. Bättre utvecklarupplevelse

  • Skriver innehåll i Markdown med versionskontroll (Git)
  • Inga säkerhetsuppdateringar eller databaser att underhålla
  • Modern TypeScript och komponentbaserad arkitektur
  • Hostat på Cloudflare Pages CDN över hela världen

4. Bevarad historia

All data från WordPress är bevarad:

  • URL:er fungerar exakt som förut
  • All metadata (författare, datum, kategorier)
  • Alla bilder och mediabibliotek
  • Meny-hierarkier och sidrelationer

Nästa steg

Med dessa två guider klara har vi mallar för:

  • ✅ Stora komplexa guider (FF7: 190 sidor, 7 mallar)
  • ✅ Mindre hierarkiska guider (FF1: 41 sidor med barn-struktur)
  • ✅ Boss-databaser med relationer
  • ✅ Karaktärsdata med svenska fält
  • ✅ Bildgallerier
  • ✅ Location- och item-databaser

De återstående 20 guiderna kan nu migreras med samma beprövade process. Varje guide kommer att ta någon timme istället för dagar, tack vare de automatiserade script och lärdomar vi byggt upp.

Teknisk insikt - Migrations-scripten

För den tekniskt intresserade har vi byggt ett robust verktyg:

# Migrera vilken guide som helst
bun run scripts/parse-complete.mjs --game ff8 --wp-file ff8.xml

# Validera migrering
bun run scripts/validate-migration.mjs --game ff8

# Ladda ner bilder
bun run scripts/download-images.mjs --game ff8

Varje script:

  • Läser WordPress XML-export
  • Skapar rätt mappstruktur
  • Konverterar HTML till Markdown
  • Genererar korrekt frontmatter
  • Bygger föräldra/barn-relationer
  • Rensar WordPress-specifika URLs
  • Laddar ner och organiserar bilder

Sammanfattning

På två dagar har vi:

  1. ✅ Migrerat hela guidesystemets design från PHP/WordPress till Astro
  2. ✅ Konverterat 3 kritiska WordPress-komponenter till återanvändbar Astro-kod
  3. ✅ Migrerat FF7-guiden: 190 sidor, 350 bilder, 7 sidmallar
  4. ✅ Migrerat FF1-guiden: 41 sidor, 94 bilder, barn-hierarkier
  5. ✅ Lärt oss kritiska lektioner om mappstruktur och innehållsarkitektur
  6. ✅ Byggt återanvändbara migrations-script för alla återstående guider

Detta är verkligen ett genombrott i vårt 30-års jubileumsprojekt. Nästa steg är att börja migrera de återstående 20 guiderna, och med den process vi nu har på plats kommer det att gå betydligt snabbare!

Vi fortsätter att dokumentera resan här på bloggen. Följ med!