CSS

[nonfungibletunji]

i would like to use a css library like https://open-props.style, is this possible

[maclong9]

Hi there @nonfungibletunji,

Currently the best way to do this is to utilise the Website and Document structs to point to local CSS files. I will detail a simple directory structure and reproduction below:

my-project
├── Package.swift
├── Public
|   └── styles.css
└── Sources
    ├── Home.swift
    └── Application.swift

@import "https://unpkg.com/open-props";
.card {
  border-radius: var(--radius-2);
  padding: var(--size-fluid-3);
  box-shadow: var(--shadow-2);

  &:hover {
    box-shadow: var(--shadow-3);
  }

  @media (--motionOK) {
    animation: var(--animation-fade-in);
  }
}

import WebUI

// MARK: Card Element Protocol
public protocol CardItem {
    var title: String { get }
    var description: String { get }
    var url: String { get }
}

// MARK: Card Element
public struct Card: Element, CardItem {
    public let title: String
    public let description: String
    public let url: String

    public init(
        title: String,
        description: String,
        url: String,
    ) {
        self.title = title
        self.description = description
        self.url = url
    }

    public var body: some HTML {
        Link(to: url, classes: ["card"]) {
            Article {
                Header {
                    Heading(.title) { title }
                }
                Main {
                    Text { description }
                }
            }
        }
    }
}

// MARK: Home Page
struct Home: Document {
    var path: String? { "index" }

    var metadata: Metadata {
        .init(from: Application().metadata, title: "Home")
    }

    var body: some HTML {
      Stack {
        Heading(.largeTitle) { "Hello, world!" }
        Card(
          title: "Some Card", 
          description: "Lorem ipsum dolor sit amet.", 
          url: "https://github.com/apple")
      }
    }
}

Note

The default path for the public directory is at the root of your project named Public, if you'd like to change this, alter assetPath in the build step like so try application.build(assetPath: "/path/to/assets/")

import Foundation
import WebUI

@main
struct Application: Website {
  var metadata: Metadata {
    Metadata(site: "Hello, world", description: "Welcome to WebUI.")
  }

  @WebsiteRouteBuilder
  var routes: [any Document] {
    Home(articles: articles)
  }

  // Point to your stylesheet here
  var stylesheets: [String]? {
    ["/public/styles.css"]
  }

  var baseURL: String? {
    "https://example.com"
  }

  static func main() async throws {
    do {
      let application = Application()
      // Customise asset path here
      try application.build()
      print("✓ Application built successfully.")
    } catch {
      print("⨉ Failed to build application: \(error)")
    }
  }
}