TokamakUI/TokamakPublish

Use Tokamak in your Publish themes.

TokamakPublish

Use Tokamak in your themes for the Publish static generator.

You can either write your entire theme with Tokamak, or integrate it with your existing Plot HTML.

A Tokamak implementation of the .foundation theme is provided under the name .tokamakFoundation.

TokamakHTMLFactory

To make your own Tokamak theme, conform to the TokamakHTMLFactory protocol. That requires the following functions:

struct MyThemeFactory<Site: Website>: TokamakHTMLFactory {
  func makeIndexView(for index: Index, context: PublishingContext<Self.Site>) throws -> IndexView
  func makeSectionView(
    for section: Publish.Section<Self.Site>,
    context: PublishingContext<Self.Site>
  ) throws -> SectionView
  func makeItemView(for item: Item<Self.Site>, context: PublishingContext<Self.Site>) throws -> ItemView
  func makePageView(for page: Page, context: PublishingContext<Self.Site>) throws -> PageView
  func makeTagListView(for page: TagListPage, context: PublishingContext<Self.Site>) throws -> TagListView
  func makeTagDetailsView(for page: TagDetailsPage, context: PublishingContext<Self.Site>) throws -> TagDetailsView
}

In these functions, you can build a View with SwiftUI-compatible syntax:

struct MyThemeFactory<Site: Website>: TokamakHTMLFactory {
  func makePageView(for page: Page, context: PublishingContext<Self.Site>) throws -> PageView {
    Text("Welcome to my website")
      .font(.largeTitle)
    VStack(alignment: .leading) {
      page.body
    }
      .frame(idealWidth: 820, maxWidth: 820)
      .padding(.vertical, 40)
    Text("2020 © Tokamak Contributors")
      .font(.caption)
  }
  ...
}

Plot integration

You can include Tokamak views in your Plot HTML with the view Node:

let myHTML = Plot.HTML(
  .body(
    .h1(.text("My Website")),
    .view {
      Text("This is a Tokamak ") + Text("View")
        .font(.system(.body, design: .monospaced))
    },
    .view(MyTokamakView())
  )
)

You can include Plot nodes in your Tokamak views just as easily:

struct ContentView: View {
  var body: some View {
    Text("My Website")
      .font(.largeTitle)
    Node.p(
      .span("This is a Plot "),
      .span(.text("Node"), .style("font-family: monospace"))
    )
  }
}