Migreringslyft - FFU på väg mot 30 år

ffuniversewebbutveckling

Det har varit tyst här på bloggen ett tag, men vi har inte glömt bort sajten - tvärtom! Vi jobbar nu intensivt med en stor teknisk migration av hela FFUniverse-nätverket inför vår 30-års dag. Det är mycket att göra, men vi tar det steg för steg och idag kan vi visa upp ordentliga framsteg.

Vad händer?

FFUniverse fyller snart 30 år, och vi vill fira det genom att modernisera hela sajten från grunden. Vi migrerar från det gamla WordPress-baserade systemet till en modern lösning byggd med Astro - ett snabbt och modernt ramverk för att bygga innehållsrika webbplatser. WordPress gav oss ganska mycket vikt, saktade ned och försvårade utvecklingen ibland, och innebar ganska mycket administration (uppdatera, säkra, underhålla) - allt utan att vi egentligen någonsin fick skribenter att hjälpa oss. Så vi skalar bort allt det och tänker nytt.

Varför Astro?

Astro är ett modernt webbramverk specifikt designat för innehållsrika webbplatser. Till skillnad från WordPress som kräver en databas, PHP-runtime, och ständiga säkerhetsuppdateringar, genererar Astro statiska HTML-filer vid byggtid. Resultatet? Blixtsnabb sajt utan databasfrågor, “zero JavaScript by default”, och vi skriver innehåll i Markdown-filer med full versionskontroll istället för i ett admin-gränssnitt.

Säkerhetsmässigt är skillnaden enorm. Astro genererar statiska filer - inget att hacka, ingen PHP-kod att exploatera, ingen databas att bryta sig in i. Cloudflare Pages hostar filerna på CDN-noder över hela världen. Vi får full kontroll över utvecklingsprocessen och kan använda moderna verktyg som TypeScript och Vite, utan att vara låsta till WordPress ekosystem.

Dagens arbete: En ny, fräsch framsida

Idag har vi lagt särskilt fokus på att återskapa vår klassiska framsida - den där du väljer din väg mellan Guider, Nyheter, Community, och Om oss. Den gamla versionen var byggd i PHP och hade en riktigt snygg design med stora bildbanners och färgglada kort. Nu har vi återskapt den med moderna webbtekniker.

Tekniska detaljer

För den som är intresserad i det tekniska:

1. Bildhantering Vi hämtade de klassiska bannerbilderna från det gamla temat, här hjälpe GitHub copilot oss att analysera sidorna, ladda ner resurser, och strukturera dem i ett Astro-projekt:

  • banner_guider_animated.gif - den animerade guidebannern
  • banner_nyheter.jpg - nyhetssektionens bakgrund
  • game_over.jpg och magic_pot.png - övriga resurser till 404 och community-mallarna

2. Modern CSS-arkitektur Vi använder moderna CSS-tekniker istället för det gamla:

  • CSS custom properties (variabler) för design tokens
  • CSS layers för strukturerad stilhantering
  • Flexbox och Grid för layout
  • clamp() för responsiv typografi
  • Gradient bakgrunder för kortkomponenterna

3. URL-hantering med utility-funktioner En av de stora utmaningarna med vårt nätverk av sub-domäner är att hantera länkar korrekt både i utveckling och produktion. Vi har byggt getSiteUrl() helper-funktioner som:

  • I utvecklingsläge: returnerar relativa paths (t.ex. /guide)
  • I produktion: returnerar fulla domän-URLs (t.ex. /guide)

Detta gör det smidigt att utveckla lokalt med en enda dev-server, medan produktionsbygget fungerar med Cloudflare Pages routing mellan olika domäner.

4. Responsiv design Framsidan anpassar sig automatiskt till olika skärmstorlekar:

  • Desktop: 500px höga banner-sektioner för maximal bildvisning
  • Mobil: 350px höga banners, enkolumnslayout för korten
  • Döljer viss text på mindre skärmar för bättre läsbarhet

5. Interaktiva effekter Vi har lagt till subtila men effektfulla hover-effekter:

  • Scale-transformationer på banner-korten
  • Ljusare bakgrundsbilder vid hover
  • Translatering uppåt och skuggeffekter på de mindre korten
  • Allt med mjuka CSS-transitioner

6. Översätta logik från PHP PHP har skrivits om av copilot, till mer modern och framtidsrättad React i Astro.

Struktur och organisation

Projektet följer Astros best practices:

  • src/pages/ - Astro-sidor som blir routes
  • src/components/ - Återanvändbara komponenter
  • src/layouts/ - Layout-komponenter (BaseLayout, WwwLayout, etc.)
  • src/utils/ - Helper-funktioner för URL-hantering och mer
  • src/styles/ - Global CSS med design tokens
  • public/ - Statiska assets som bilder

Nästa steg

Det är mycket kvar att göra innan vi är klara med hela migrationen:

  • Migrera alla guider och artiklar
  • Sätta upp rätt routing för alla sub-domäner
  • Implementera sökfunktionalitet
  • Optimera bildhantering
  • Testa allt noggrant

Men vi tar det steg för steg, och varje steg för oss närmare målet. Det känns fantastiskt att se hur modern webbutveckling gör sajten snabbare, mer tillgänglig, och enklare att underhålla.

Följ utvecklingen

Vi kommer att fortsätta dokumentera resan här på bloggen. Har du frågor eller funderingar? Hör av dig!

Och för dig som är tekniskt intresserad: projektet är byggt som en learning-experience i hur man migrerar stora legacy-sajter till moderna ramverk. Det är utmanande men otroligt lärorikt.