rock-n-code/ccn
1
0 Fork 0
Code Issues Pull Requests Actions Projects Releases Activity

Implemented phase 0 for the POC prototype in the Website service.

Browse Source
This commit is contained in:
javier committed 2026-09-21 10:22:55 +02:00
1 parent 916df7e2f0
commit 717df5208c
31 files changed
+2351 -240
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Services/Website/Sources/Library/Catalogs/Localizable.xcstrings
+4 -4
View File
@@ -1,13 +1,13 @@
{
"sourceLanguage" : "en",
"strings" : {
"index.greeting" : {
"index.heading" : {
"comment" : "The landing page's greeting paragraph.",
"localizations" : {
"en" : {
"stringUnit" : {
"state" : "translated",
"value" : "Hello world! This is HTML5 Boilerplate."
"value" : "Back issues, from shops you can vet first."
}
}
}
@@ -18,7 +18,7 @@
"en" : {
"stringUnit" : {
"state" : "translated",
"value" : "Index page"
"value" : "CCN — Comics marketplace"
}
}
}
@@ -51,7 +51,7 @@
"en" : {
"stringUnit" : {
"state" : "translated",
"value" : "Page Not Found"
"value" : "Page Not Found — CCN"
}
}
}
Services/Website/Sources/Library/Internal/Components/Icon.swift
+96
View File
@@ -0,0 +1,96 @@
import Elementary
/// A decorative inline SVG stroke icon, drawn in the current text colour.
struct Icon: HTML {
// MARK: Properties
/// The glyph the icon draws.
let glyph: Glyph
/// The icon's rendered width and height, in pixels.
let size: Int
// MARK: Initializers
/// Creates an icon.
/// - Parameters:
/// - glyph: the glyph the icon draws.
/// - size: the icon's rendered width and height, in pixels; 20 by default.
init(
_ glyph: Glyph,
size: Int = 20
) {
self.glyph = glyph
self.size = size
}
// MARK: Computed
/// Rendered raw: the markup is static, never user input.
var body: some HTML {
HTMLRaw(
"""
<svg class="icon" width="\(size)" height="\(size)" viewBox="0 0 24 24" fill="none" stroke="currentColor" \
stroke-width="\(glyph.strokeWidth)" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">\(glyph.shapes)</svg>
"""
)
}
}
// MARK: - Enumerations
extension Icon {
/// A glyph an ``Icon`` can draw.
enum Glyph {
/// A bell.
case bell
/// A bookmark.
case bookmark
/// A check mark.
case check
/// Filter lines.
case filter
/// A key.
case key
/// A speech bubble.
case message
/// A magnifying glass.
case search
/// A shopfront.
case shop
/// Sort arrows.
case sort
}
}
extension Icon.Glyph {
// MARK: Computed
/// The shapes the glyph is drawn with.
var shapes: String {
switch self {
case .bell: #"<path d="M6 16V11a6 6 0 0 1 12 0v5l2 2H4z"></path><path d="M10 21h4"></path>"#
case .bookmark: #"<path d="M6 3h12v18l-6-4-6 4z"></path>"#
case .check: #"<path d="m5 12 5 5 9-10"></path>"#
case .filter: #"<path d="M4 6h16M7 12h10M10 18h4"></path>"#
case .key: #"<circle cx="7.5" cy="15.5" r="4.5"></circle><path d="M10.7 12.3 21 2"></path><path d="m18 5 3 3"></path><path d="m15 8 3 3"></path>"#
case .message: #"<path d="M4 5h16v11H8l-4 4z"></path>"#
case .search: #"<circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path>"#
case .shop: #"<path d="M3 9.5 12 4l9 5.5"></path><path d="M5 10v9h14v-9"></path><path d="M10 19v-5h4v5"></path>"#
case .sort: #"<path d="M7 4v16M7 20l-3-3M7 20l3-3M17 20V4M17 4l-3 3M17 4l3 3"></path>"#
}
}
/// The glyph's stroke width; heavier for glyphs drawn small.
var strokeWidth: String {
switch self {
case .check: "3.5"
case .filter, .key, .search, .sort: "2.2"
default: "2"
}
}
}
Services/Website/Sources/Library/Internal/Components/SiteFooter.swift
+154
View File
@@ -0,0 +1,154 @@
import Elementary
/// The site footer: the about blurb, the link columns, the language toggle, and the legal line.
struct SiteFooter: HTML {
// MARK: Computed
var body: some HTML {
footer(.class("site-footer")) {
div(.class("site-footer__inner")) {
div(.class("site-footer__columns")) {
div(.class("site-footer__about")) {
span(.class("site-footer__wordmark")) {
"CCN"
}
p {
"A marketplace for single-issue comics, manga, trade paperbacks and hardcovers, sold by independent shops in the Netherlands and across the EU."
}
}
for column in Self.columns {
nav(
.class("site-footer__column"),
.custom(
name: "aria-label",
value: column.title
)
) {
h2(.class("site-footer__heading")) {
column.title
}
ul(.class("site-footer__links")) {
for link in column.links {
li {
a(.href(link.path)) {
link.label
}
}
}
}
}
}
language
}
div(.class("site-footer__legal")) {
span {
"CCN B.V. · Amsterdam · KvK [NUMBER] · BTW-id [NUMBER] · Business sellers show their KvK number on their shop page; consumers have a 14-day right of withdrawal on purchases from business sellers."
}
span(.class("site-footer__legal-links")) {
a(.href(.Route.terms)) {
"Terms"
}
a(.href(.Route.privacy)) {
"Privacy"
}
a(.href(.Route.sellerRules)) {
"Seller rules"
}
}
}
}
}
}
}
// MARK: - Helpers
private extension SiteFooter {
// MARK: Type aliases
/// A titled column of links.
typealias Column = (title: String, links: [(label: String, path: String)])
// MARK: Constants
/// The link columns, in reading order.
static let columns: [Column] = [
(
title: "Browse",
links: Format.allCases.map { ($0.label, $0.path) } + [
("By series", .Route.series)
]
),
(
title: "Sell",
links: [
("Open a shop", .Route.openShop),
("Seller dashboard", .Route.sellerDashboard),
("Grading guide", .Route.gradingGuide),
("Trade at events", .Route.events),
]
),
(
title: "Account",
links: [
("Sign in or join", .Route.signIn),
("Want list & alerts", .Route.wants),
("My collection", .Route.collection),
("Messages", .Route.messages),
("Passkeys & settings", .Route.account),
("Lost your passkey?", .Route.recover),
]
),
]
// MARK: Computed
/// The language toggle; display-only while the prototype serves English alone.
var language: some HTML {
div(.class("site-footer__column site-footer__language")) {
h2(.class("site-footer__heading")) {
"Language"
}
div(
.class("language-toggle"),
.custom(
name: "role",
value: "group"
),
.custom(
name: "aria-label",
value: "Language"
)
) {
button(
.class("language-toggle__option"),
.type(.button),
.custom(
name: "aria-pressed",
value: "false"
),
.disabled
) {
"NL"
}
button(
.class("language-toggle__option"),
.type(.button),
.custom(
name: "aria-pressed",
value: "true"
)
) {
"EN"
}
}
span(.class("site-footer__note")) {
"Prices in € · ships to NL"
}
}
}
}
Services/Website/Sources/Library/Internal/Components/SiteHeader.swift
+253
View File
@@ -0,0 +1,253 @@
import Elementary
/// The site header: the wordmark, the format navigation, the search field, and the viewer's actions.
///
/// One markup serves all three layouts; the shared stylesheet rearranges it through grid areas.
struct SiteHeader: HTML {
// MARK: Properties
/// The format marked as current in the navigation, or `nil` for none.
let active: Format?
/// The signed-in viewer, or `nil` to render the signed-out actions.
let viewer: Viewer?
// MARK: Initializers
/// Creates a site header.
/// - Parameters:
/// - active: the format marked as current, or `nil` (the default) for none.
/// - viewer: the signed-in viewer, or `nil` (the default) to render the signed-out actions.
init(
active: Format? = nil,
viewer: Viewer? = nil
) {
self.active = active
self.viewer = viewer
}
// MARK: Computed
var body: some HTML {
header(.class("site-header")) {
div(.class("site-header__inner")) {
a(
.class("site-header__brand"),
.href(.Route.home)
) {
"CCN"
}
navigation
search
div(.class("site-header__actions")) {
if let viewer {
actions(for: viewer)
} else {
guestActions
}
}
}
}
}
}
// MARK: - Helpers
private extension SiteHeader {
// MARK: Computed
/// The signed-out actions: *Open a shop* and the passkey sign-in.
@HTMLBuilder
var guestActions: some HTML {
a(
.class("site-header__icon-link phone-only"),
.href(.Route.openShop),
.custom(
name: "aria-label",
value: "Open a shop"
)
) {
Icon(.shop, size: 22)
}
a(
.class("site-header__text-link from-desktop"),
.href(.Route.openShop)
) {
"Open a shop"
}
a(
.class("site-header__sign-in"),
.href(.Route.signIn)
) {
Icon(.key, size: 15)
span {
"Sign in"
span(.class("from-desktop")) {
" with passkey"
}
}
}
}
/// The format links, plus the series and events links shown on tablet only.
var navigation: some HTML {
nav(
.class("site-nav"),
.custom(
name: "aria-label",
value: "Formats"
)
) {
for format in Format.allCases {
if format == active {
a(
.class("site-nav__link"),
.href(format.path),
.custom(
name: "aria-current",
value: "page"
)
) {
format.label
}
} else {
a(
.class("site-nav__link"),
.href(format.path)
) {
format.label
}
}
}
a(
.class("site-nav__link site-nav__link--extra"),
.href(.Route.series)
) {
"Series"
}
a(
.class("site-nav__link site-nav__link--extra"),
.href(.Route.events)
) {
"Events"
}
}
}
/// The search field, a plain `GET` form.
var search: some HTML {
form(
.class("site-search"),
.action(.Route.search),
.method(.get),
.custom(
name: "role",
value: "search"
)
) {
label(
.class("visually-hidden"),
.for("site-search-query")
) {
"Search listings"
}
input(
.class("site-search__input"),
.id("site-search-query"),
.type(.search),
.name("q"),
.placeholder("Search title, issue, grade or shop")
)
button(
.class("site-search__submit"),
.type(.submit),
.custom(
name: "aria-label",
value: "Search"
)
) {
Icon(.search, size: 16)
}
}
}
// MARK: Methods
/// The signed-in actions: want list, messages, shop, and account.
/// - Parameter viewer: the signed-in viewer.
@HTMLBuilder
func actions(
for viewer: Viewer
) -> some HTML {
counter(
.bell,
label: "Want list",
count: viewer.newWantMatches,
unit: "new matches",
path: .Route.wants
)
counter(
.message,
label: "Messages",
count: viewer.unreadMessages,
unit: "unread",
path: .Route.messages
)
a(
.class("site-header__text-link site-header__text-link--strong from-desktop"),
.href(.Route.sellerDashboard)
) {
"My shop"
}
a(
.class("site-header__account"),
.href(.Route.account),
.custom(
name: "aria-label",
value: "Account of \(viewer.displayName)"
)
) {
span(.class("from-desktop")) {
viewer.displayName
}
span(.class("site-header__avatar")) {
viewer.initials
}
}
}
/// An icon link with a count badge, omitted at zero.
/// - Parameters:
/// - glyph: the glyph the link shows.
/// - label: the link's accessible name.
/// - count: the number the badge shows.
/// - unit: what the count measures.
/// - path: the path the link leads to.
func counter(
_ glyph: Icon.Glyph,
label: String,
count: Int,
unit: String,
path: String
) -> some HTML {
a(
.class("site-header__icon-link"),
.href(path),
.custom(
name: "aria-label",
value: count > 0 ? "\(label), \(count) \(unit)" : label
)
) {
Icon(glyph)
if count > 0 {
span(.class("site-header__badge")) {
"\(count)"
}
}
}
}
}
Services/Website/Sources/Library/Internal/Components/SiteLayout.swift
+53
View File
@@ -0,0 +1,53 @@
import Elementary
/// The frame a page wraps its content in: a skip link, the ``SiteHeader``, the content inside `main`, and the ``SiteFooter``.
struct SiteLayout<Content: HTML>: HTML {
// MARK: Properties
/// The format marked as current in the header, or `nil` for none.
let active: Format?
/// The screen's markup, rendered inside the `main` landmark.
let content: Content
/// The signed-in viewer, or `nil` to render the signed-out header.
let viewer: Viewer?
// MARK: Initializers
/// Creates a site layout around a screen's content.
/// - Parameters:
/// - active: the format marked as current, or `nil` (the default) for none.
/// - viewer: the signed-in viewer, or `nil` (the default) to render the signed-out header.
/// - content: the screen's markup.
init(
active: Format? = nil,
viewer: Viewer? = nil,
@HTMLBuilder content: () -> Content
) {
self.active = active
self.content = content()
self.viewer = viewer
}
// MARK: Computed
var body: some HTML {
a(
.class("skip-link"),
.href("#main")
) {
"Skip to content"
}
SiteHeader(
active: active,
viewer: viewer
)
main(.id("main")) {
content
}
SiteFooter()
}
}
Services/Website/Sources/Library/Internal/Enumerations/Format.swift
+34
View File
@@ -0,0 +1,34 @@
/// A format listings are published in, declared in navigation order; the raw value is the search filter token.
enum Format: String, CaseIterable, Sendable {
/// Single-issue comics.
case singleIssues = "single-issues"
/// Manga volumes.
case manga
/// Trade paperbacks.
case tradePaperbacks = "trade-paperbacks"
/// Hardcovers.
case hardcovers
}
// MARK: - Extensions
extension Format {
// MARK: Computed
/// The format's name as shown in the navigation.
var label: String {
switch self {
case .singleIssues: "Single issues"
case .manga: "Manga"
case .tradePaperbacks: "Trade paperbacks"
case .hardcovers: "Hardcovers"
}
}
/// The path of the search screen filtered to the format.
var path: String {
"\(String.Route.search)?format=\(rawValue)"
}
}
Services/Website/Sources/Library/Internal/Extensions/Page+Defaults.swift
+4 -4
View File
@@ -11,9 +11,9 @@ extension Page {
/// The fonts preloaded on every page: one per face the stylesheets actually render.
///
/// Listed rather than derived from every WOFF2 in ``StaticFile/all``: a subset gated by a `unicode-range` no page reaches would add a
/// download that never otherwise happens. Empty until the site ships fonts of its own.
/// download that never otherwise happens. All three faces render on every page.
static var preloadedFonts: [StaticFile] {
[]
[.fontArchivo, .fontOswald, .fontAnton]
}
/// The territories paired with the site's languages, in Open Graph's `language_TERRITORY` form.
@@ -147,11 +147,11 @@ extension Page {
)
meta(
.name("theme-color"),
.content("#fafafa")
.content("#191713")
)
meta(
.name("theme-color"),
.content("#0c0710"),
.content("#0f0e0b"),
.custom(
name: "media",
value: "(prefers-color-scheme: dark)"
Services/Website/Sources/Library/Internal/Extensions/String+Routes.swift
+39
View File
@@ -0,0 +1,39 @@
extension String {
/// A namespace for the paths of the site's screens.
///
/// Screens not built yet are listed too, and answer with the not-found page until they are.
enum Route {
/// The account screen.
static let account = "/account"
/// The collection tracker.
static let collection = "/collection"
/// The events screen.
static let events = "/events"
/// The public grading guide.
static let gradingGuide = "/grading-guide"
/// The browse / home screen.
static let home = "/"
/// The message threads.
static let messages = "/messages"
/// The open-a-shop onboarding.
static let openShop = "/sell/open-a-shop"
/// The privacy statement.
static let privacy = "/privacy"
/// The passkey recovery screen.
static let recover = "/recover"
/// The search results screen.
static let search = "/search"
/// The seller dashboard.
static let sellerDashboard = "/sell"
/// The rules sellers agree to.
static let sellerRules = "/seller-rules"
/// The series index.
static let series = "/series"
/// The passkey sign-in screen.
static let signIn = "/sign-in"
/// The terms of service.
static let terms = "/terms"
/// The want list.
static let wants = "/wants"
}
}
Services/Website/Sources/Library/Internal/Pages/IndexPage.swift
+29 -2
View File
@@ -82,9 +82,36 @@ extension IndexPage: Page {
// MARK: Properties
/// The hero alone, until the listings exist.
var content: some HTML {
p {
localize("index.greeting", locale: locale)
SiteLayout {
div(.class("page")) {
section(.class("hero")) {
p(.class("type-eyebrow")) {
"Single issues · Manga · Trades · Hardcovers"
}
h1(.class("type-hero")) {
localize("index.heading", locale: locale)
}
p(.class("type-lead")) {
"Search every listing by title, print and grade. Browse any seller's shop without an account — sign in with a passkey only when you're ready to buy, make an offer or message."
}
div(.class("hero__actions")) {
a(
.class("button button--primary button--lg"),
.href(Format.singleIssues.path)
) {
"Browse single issues"
}
a(
.class("button button--outline button--lg"),
.href(.Route.series)
) {
"Browse by series"
}
}
}
}
}
}
Services/Website/Sources/Library/Internal/Pages/NotFoundPage.swift
+15 -5
View File
@@ -47,11 +47,21 @@ extension NotFoundPage: Page {
// MARK: Properties
var content: some HTML {
h1 {
localize("notFound.heading", locale: locale)
}
p {
localize("notFound.message", locale: locale)
SiteLayout {
div(.class("page not-found")) {
h1(.class("type-h1")) {
localize("notFound.heading", locale: locale)
}
p(.class("type-lead")) {
localize("notFound.message", locale: locale)
}
a(
.class("button button--dark"),
.href(.Route.home)
) {
"Back to browsing"
}
}
}
}
Services/Website/Sources/Library/Internal/Types/StaticFile.swift
+12
View File
@@ -51,6 +51,9 @@ extension StaticFile {
static let all: [Self] = [
.appleTouchIcon,
.favicon,
.fontAnton,
.fontArchivo,
.fontOswald,
.icon,
.icon192,
.icon512,
@@ -104,6 +107,15 @@ extension StaticFile {
/// The `favicon.ico` icon.
static let favicon = Self("favicon", as: .ico)
/// The `font/anton-400.woff2` lettering face.
static let fontAnton = Self("anton-400", as: .woff2)
/// The `font/archivo-variable.woff2` body face (weights 400–700).
static let fontArchivo = Self("archivo-variable", as: .woff2)
/// The `font/oswald-variable.woff2` display face (weights 500–700).
static let fontOswald = Self("oswald-variable", as: .woff2)
/// The `icon.svg` icon.
static let icon = Self("icon", as: .svg)
Services/Website/Sources/Library/Internal/Types/Viewer.swift
+50
View File
@@ -0,0 +1,50 @@
/// The signed-in person a page is rendered for.
struct Viewer: Sendable {
// MARK: Properties
/// The viewer's name.
let displayName: String
/// The number of new listings matching the viewer's want list.
let newWantMatches: Int
/// The number of messages the viewer has not read yet.
let unreadMessages: Int
// MARK: Initializers
/// Creates a viewer.
/// - Parameters:
/// - displayName: the viewer's name.
/// - newWantMatches: the number of new listings matching the viewer's want list; none by default.
/// - unreadMessages: the number of messages the viewer has not read yet; none by default.
init(
displayName: String,
newWantMatches: Int = 0,
unreadMessages: Int = 0
) {
self.displayName = displayName
self.newWantMatches = newWantMatches
self.unreadMessages = unreadMessages
}
}
// MARK: - Extensions
extension Viewer {
// MARK: Computed
/// The uppercased initials of the first two words of the display name.
var initials: String {
displayName
.split(separator: " ")
.prefix(2)
.compactMap(\.first)
.map { String($0).uppercased() }
.joined()
}
}