Yet Another Dev Blog

Add Stack Overflow Flair with Publish

On the road of creating Yet Another Dev Blog, I have decided to go on a Flair hunt, which I began with StackOverflow.

With Publish, it's so easy to create a new Component:

private struct StackOverflowFlair: Component {
    let userID: String
    let username: String
    let profileName: String
    let theme: Theme?
    
    enum Theme {
        case clean
        case dark
        case hotdog
        
        var name: String {
            String(describing: self)
        }
    }
    
    var body: Component {
        let description = "profile for \(profileName) at Stack Overflow, Q&A for professional and enthusiast programmers"
        var imageURL = "https://stackoverflow.com/users/flair/\(userID).png"
        
        if let themeName = theme?.name {
            imageURL.append(contentsOf: "?theme=\(themeName)")
        }

        return Link(url: "https://stackoverflow.com/users/\(userID)/\(username)") {
            Node<HTML.BodyContext>.img(.src(imageURL),
                                       .alt(description),
                                       .width(208),
                                       .height(58),
                                       .title(description))
        }
    }
}

And the usage is quite simple, just add the Component to your favorite place:

StackOverflowFlair(userID: "3227743",
                   username: "edusta",
                   profileName: "EDUsta",
                   theme: nil)

VoilĂ !

Example image
Tagged with: