GitHub Repo Unfurling Card for Ghost. Slack-Style Display.

github_unfurl_card.html

<!-- The container where repo details will be populated -->
<div class="github-repo-box" id="githubRepoDetails">
    <!-- Empty by default; JavaScript will populate this -->
</div>

<script>
    // A function to fetch and display repo details
    async function fetchRepoDetails(owner, repo) {
        const response = await fetch(`https://api.github.com/repos/${owner}/${repo}`);
        const repoData = await response.json();

        // Extracting key details from the repoData
        const repoName = repoData.name;
        const ownerName = repoData.owner.login;
        const description = repoData.description;
        const language = repoData.language;
        const stars = repoData.stargazers_count;

        // Constructing the HTML content using flexbox layout
        const content = `
            <p><a href="${repoData.html_url}" target="_blank"><strong>${ownerName}/${repoName}</strong></a></p>
            <p>${description}</p>
            <div class="flex-container">
                <div class="flex-item">
                    <strong>Stars:</strong>
                    <div>${stars}</div>
                </div>
                <div class="flex-item">
                    <strong>Language:</strong>
                    <div>${language}</div>
                </div>
            </div>
        `;

        // Populating the content in the div
        document.getElementById('githubRepoDetails').innerHTML = content;
    }

    // Call the function with the desired repo owner and repo name
    fetchRepoDetails('krzko', 'otelgen');
</script>

<style>
    .flex-container {
        display: flex;
        justify-content: space-between; /* Distribute space between the flex items */
    }
    
    .flex-item {
        flex: 1; /* This ensures each item takes up equal width */
    }

    .github-repo-box {
        border-left: 4px solid black;
        padding-left: 16px;
        background-color: #f7f7f7; /* A light grey background for better contrast */
    }
</style>