After I started using GitHub Actions to generate social media preview images for my blog, I wanted to use them on my home page. This part was easy, but wasn’t too fond on the result: too many blue rectangles 😅

Screen Shot 2021-01-03 at 6 24 54 PM

I figured I could use the color from GitHub labels associated to the blog article, to set different background colors for the images. Since articles can have multiple tags, I made a list of tags by priority. Maybe, for another day, I will combine the colors in some way, like merging colors, using them in different areas of the image.

I wrote a quick conversion method from hex color string to SwiftIU Color, since GitHub label colors come in that format:

"labels": [
      {
        "color": "F05138",
        "default": false,
        "description": "",
        "id": 2614311701,
        "name": "SwiftUI",
        "node_id": "MDU6TGFiZWwyNjE0MzExNzAx",
        "url": "https://api.github.com/repos/eneko/Blog/labels/SwiftUI"
      },
      ...
],

Color parser:

import SwiftUI

public struct ColorParser {

    public init() {}

    public func parse(color: String) -> Color {
        guard color.count == 6 else {
            fatalError("Expected 6 characters, got \(color.count)")
        }
        let red = Double(byte(from: color.dropLast(4))) / 255
        let green = Double(byte(from: color.dropFirst(2).dropLast(2))) / 255
        let blue = Double(byte(from: color.dropFirst(4))) / 255
        return Color(Color.RGBColorSpace.sRGB, red: red, green: green, blue: blue, opacity: 1.0)
    }

    public func byte(from hex: Substring) -> UInt8 {
        return UInt8(hex, radix: 16) ?? 0
    }
}

List of colorized backgrounds, by tag priority:

    /// Select colors for social media preview based on labels. Labels are prioritized as ordered below (from less common to more common).
    static func colors(from issue: GitHubIssue) -> (background: Color, foreground: Color) {
        let customLabels = [
            "Challenge",
            "Command Line",
            "SwiftUI",
            "AWS",
            "Linux",
            "GitHub Actions",
            "Tips",
        ]
        for name in customLabels {
            if let label = issue.labels.first(where: { $0.name == name }) {
                return (background: ColorParser().parse(color: label.color), foreground: .white)
            }
        }
        return (background: Color(#colorLiteral(red: 0.1843137255, green: 0.5411764706, blue: 1, alpha: 1)), foreground: .white)
    }

I’m not to fond on the idea of hardcoding the labels, but definitely want to have some prioritization. Will keep thinking about it and make improvements as needed.

Here is the result, a bit more colorful, looking much better I would say:

Screen Shot 2021-01-07 at 10 06 33 PM

As you can see on the screenshot, I also made other improvements, drawing triangles in SwiftUI. I’m planning on writing another post about that, hopefully will finish soon.

This article was written as an issue on my Blog repository on GitHub (see Issue #20)

First draft: 2021-01-05

Published on: 2021-01-07

Last update: 2021-01-07