Επισκόπηση
Το Tyflos Radio είναι ένας πολιτιστικός ραδιοφωνικός σταθμός και ειδησεογραφική πλατφόρμα με έδρα την Ξάνθη. Το ζητούμενο ήταν πλήρης επανασχεδιασμός και ανακατασκευή: σύγχρονη σκούρα magazine αισθητική, ολοκληρωμένο CMS άρθρων με MDX, πλοήγηση πολλών κατηγοριών με dropdowns, live ραδιοφωνική μετάδοση και ένα widget καιρού για την πόλη.
Το όνομα «Τυφλός» δεν είναι τυχαίο, και η προσβασιμότητα ήταν κρίσιμη από την πρώτη μέρα.
Παραδόθηκε σε 2 εβδομάδες. Live στο tyflos.gr.
Τι φτιάχτηκε
Σύστημα άρθρων — Όλα τα άρθρα αποθηκεύονται ως αρχεία .mdx με πλούσιο frontmatter (κατηγορία, υποκατηγορία, συντάκτης, χρόνος ανάγνωσης, εικόνα εξωφύλλου, σήμανση featured). Το generateStaticParams παράγει όλες τις σελίδες άρθρων κατά το build, χωρίς βάση δεδομένων και χωρίς καθυστέρηση.
Πλοήγηση — Μενού 9 κατηγοριών με dropdowns στο hover. Κάθε κατηγορία έχει υποκατηγορίες (π.χ. Μουσική → Νέο Τραγούδι, Νέος Δίσκος). Στο κινητό, drawer πλήρους οθόνης με σταδιακή εμφάνιση.
Marquee έκτακτων ειδήσεων — Πορτοκαλί ticker κάτω από το μενού, που τροφοδοτείται από τα δεδομένα του πιο πρόσφατου άρθρου.
Διάταξη αρχικής — Σε στυλ περιοδικού: hero card, σειρά με 3 κάρτες και ενότητες ανά κατηγορία (featured, grid και οριζόντια λίστα). Animations σταδιακής αποκάλυψης στο φόρτωμα.
Widget καιρού — Client component που τραβάει τη θερμοκρασία της Ξάνθης από το API του open-meteo. Δεν χρειάζεται API key.
Προσβασιμότητα — Κατ' ελάχιστον WCAG AA. Το όνομα «Τυφλός» το έκανε αδιαπραγμάτευτο: ισχυρές αναλογίες αντίθεσης (≥4.5:1), πλήρης πλοήγηση με πληκτρολόγιο, σημασιολογικό HTML, ουσιαστικά alt κείμενα.
Stack
| Layer | Technology | | Framework | Next.js 14 (App Router) | | Content | MDX files + gray-matter | | Styling | Tailwind CSS v3 | | Fonts | Playfair Display + Satoshi | | Weather | open-meteo API (no key) | | Deploy | Vercel |
Βασικές αποφάσεις
Γιατί MDX και όχι CMS; Η πρώτη φάση δεν έπρεπε να εξαρτάται από εξωτερικές συνδρομές. Η συντακτική ομάδα έχει αρκετές τεχνικές γνώσεις για να επεξεργάζεται αρχεία .mdx, ενώ για τη δεύτερη φάση σχεδιάζεται ενσωμάτωση με Sanity.
Γιατί static generation; Όλα τα άρθρα είναι γνωστά κατά το build. Μηδενική καθυστέρηση από βάση, δωρεάν Vercel tier, στιγμιαίο φόρτωμα σελίδων. Το ISR (incremental static regeneration) θα προστεθεί όταν χρειαστεί περιεχόμενο σε πραγματικό χρόνο.
Κατεύθυνση σχεδιασμού — Σκούρα συντακτική αισθητική: φόντο #0d0d0f, πορτοκαλί τόνος #E8991A από το λογότυπο του Tyflos Radio, Playfair Display στους τίτλους, Satoshi στο UI. Καμία τυποποιημένη σύμβαση ειδησεογραφικού site. Η ενέργεια του ραδιοφώνου περνάει μέσα από την κίνηση, τον ρυθμό και τη ζεστασιά.
