Brand kit

<div id="brand"></div>
<script src="https://YOUR-SUPPORT-HOST/brand.js" data-project="pk_…" data-target="#brand" defer></script>

<script src="https://YOUR-SUPPORT-HOST/brand.js" data-project="pk_…" data-target="#press"
  data-template="editorial" data-theme="dark" data-radius="round" data-accent="#fca311"
  data-sections="logos,colors,typography" defer></script>

// BrandKitView.swift. MIT. A list of a HelpBites brand kit's colours and logos.
import SwiftUI

struct BrandKit: Decodable {
  struct Colour: Decodable, Hashable { let name, hex, usage: String }
  struct Asset: Decodable, Identifiable { let id, kind, name, url, downloadUrl: String }
  let name, tagline: String
  let colors: [Colour]
  let assets: [Asset]
}

struct BrandKitView: View {
  let host: URL
  let projectKey: String
  var cornerRadius: CGFloat = 12
  @State private var kit: BrandKit?

  var body: some View {
    List {
      if let kit {
        Section(kit.tagline) {
          ForEach(kit.colors, id: \.self) { colour in
            HStack {
              RoundedRectangle(cornerRadius: cornerRadius / 2).fill(Color(brandHex: colour.hex)).frame(width: 36, height: 36)
              VStack(alignment: .leading) { Text(colour.name); Text(colour.hex.uppercased()).font(.caption.monospaced()).foregroundStyle(.secondary) }
            }
          }
        }
        Section("Logos") {
          ForEach(kit.assets.filter { $0.kind == "logo" || $0.kind == "icon" }) { asset in
            Link(destination: host.appending(path: String(asset.downloadUrl.dropFirst()))) {
              HStack {
                AsyncImage(url: URL(string: asset.url)) { $0.resizable().scaledToFit() } placeholder: { Color.clear }
                  .frame(width: 56, height: 40).padding(6).background(.quaternary, in: .rect(cornerRadius: cornerRadius))
                Text(asset.name)
              }
            }
          }
        }
      }
    }
    .navigationTitle(kit?.name ?? "Brand")
    .task {
      struct Envelope: Decodable { let brand: BrandKit }
      let url = host.appending(path: "v1/brand/\(projectKey)")
      if let answer = try? await URLSession.shared.data(from: url) { kit = try? JSONDecoder().decode(Envelope.self, from: answer.0).brand }
    }
  }
}

extension Color {
  init(brandHex hex: String) {
    let v = Int(hex.dropFirst(), radix: 16) ?? 0
    self.init(red: Double(v >> 16 & 255) / 255, green: Double(v >> 8 & 255) / 255, blue: Double(v & 255) / 255)
  }
}

curl -s https://YOUR-SUPPORT-HOST/v1/brand/PROJECT_PUBLIC_KEY

{
  "brand": {
    "name": "Acme", "tagline": "Orders, sorted.", "about": "…", "accent": "#14213d",
    "colors": [{ "name": "Ink", "hex": "#14213d", "usage": "Text and the wordmark" }],
    "fonts": [{ "name": "Fraunces", "role": "display", "cssUrl": "https://fonts.googleapis.com/css2?family=Fraunces", "downloadUrl": "", "weights": "400, 600", "sample": "" }],
    "guidelines": [{ "id": "g_1", "title": "Clear space", "body": "Leave the height of the **A**.", "html": "<p>Leave the height of the <strong>A</strong>.</p>" }],
    "assets": [{ "id": "a1", "kind": "logo", "name": "Wordmark", "description": "", "url": "https://bucket.example.com/…/a.svg", "downloadUrl": "/brand/pk_…/files/a1", "mime": "image/svg+xml", "size": 2048, "width": 120, "height": 40, "background": "dark", "createdAt": "…" }],
    "page": { "url": "/brand/pk_…", "template": "minimal", "theme": "auto" }
  }
}

HOST=https://YOUR-SUPPORT-HOST
KEY=ak_...

# Upload a logo drawn for dark backgrounds
curl -s $HOST/v1/admin/brand/assets -H "authorization: Bearer $KEY" \
  -F project=PROJECT_ID -F file=@wordmark-white.svg -F kind=logo -F background=dark -F name="Wordmark, white"

# Set colours, a font and the page, and turn the page on
curl -s -X PATCH "$HOST/v1/admin/brand?project=PROJECT_ID" -H "authorization: Bearer $KEY" -H 'content-type: application/json' -d '{
  "tagline": "Orders, sorted.",
  "colors": [{ "name": "Ink", "hex": "#14213d", "usage": "Text and the wordmark" }, { "name": "Signal", "hex": "#fca311", "usage": "Buttons" }],
  "fonts": [{ "name": "Fraunces", "role": "display", "cssUrl": "https://fonts.googleapis.com/css2?family=Fraunces:wght@400;600&display=swap" }],
  "page": { "public": true, "template": "split" }
}'