A curated list of libraries & SDKs for the Bluesky API and AT Protocol

added proper card design

+49 -16
+18 -5
_includes/project_card.html
··· 20 20 {% endif %} 21 21 22 22 <li> 23 - <a href="{{ include.project.url }}" target="_blank">{{ info.name }}</a> 24 - by {{ user }} *{{ info.stars }}<br> 25 - {{ info.description }}<br> 26 - Last release: {{ last_release | date_to_string }} | 27 - commit: {{ info.last_commit.author_date | date_to_string }} | {{ info.license | replace: "-", " " }} 23 + <p class="title"> 24 + <a class="project-name" href="{{ include.project.url }}" target="_blank">{{ info.name }}</a> 25 + <span class="author"><span class="dot">•</span> 26 + <a href="https://github.com/{{ info.user_login }}" target="_blank">{{ user }}</a></span> 27 + <span class="stars">★ <span class="count">{{ info.stars }}</span></span> 28 + </p> 29 + 30 + <p class="description"> 31 + {{ info.description }} 32 + </p> 33 + 34 + <p class="stats"> 35 + <img src="/assets/images/release.png" width="15"> Last release: {{ last_release | date: "%b %Y" | default: "–" }} 36 + <span class="separator">|</span> 37 + <img src="/assets/images/commit.png" width="15"> Last commit: {{ info.last_commit.author_date | date: "%b %Y" }} 38 + <span class="separator">|</span> 39 + <span class="license">{{ info.license | replace: "-", " " | default: "Unknown" }}</span> 40 + </p> 28 41 </li>
assets/images/commit.png

This is a binary file and will not be displayed.

assets/images/release.png

This is a binary file and will not be displayed.

+30 -10
assets/style.scss
··· 10 10 11 11 a { 12 12 text-decoration: none; 13 - color: hsl(210, 75%, 45%); 13 + color: hsl(210, 90%, 45%); 14 14 15 15 &:hover { text-decoration: underline; } 16 16 } ··· 40 40 font-size: 16pt; 41 41 font-weight: 500; 42 42 } 43 + } 43 44 44 - ul { 45 - list-style-type: none; 46 - padding-left: 0; 47 - margin: 10px; 45 + .projects { 46 + list-style-type: none; 47 + padding-left: 0; 48 + width: 525px; 49 + margin: 10px auto; 48 50 49 - li { 50 - margin: 16px 0px; 51 - text-align: center; 52 - line-height: 125%; 53 - } 51 + li { 52 + border: 1px solid #ccc; 53 + border-radius: 8px; 54 + margin: 20px 0px; 55 + padding: 2px 16px; 56 + line-height: 125%; 57 + text-align: left; 58 + 59 + .title { position: relative; padding-right: 35px; } 60 + .project-name { font-size: 14pt; font-weight: 500; margin-right: 2px; } 61 + .author { font-size: 11pt; vertical-align: bottom; } 62 + .author a { color: #333; } 63 + .author .dot { margin-right: 2px; } 64 + .stars { position: absolute; right: 0px; font-size: 10pt; color: #666; } 65 + .stars .count { font-size: 11pt; } 66 + 67 + .description { line-height: 145%; font-size: 11pt; } 68 + 69 + .stats { margin-top: 15px; font-size: 11pt; } 70 + .stats img { position: relative; top: 2px; margin-right: 2px; } 71 + .stats .separator { margin: 0px 5px; font-size: 13pt; } 72 + .description + .stats { margin-top: 18px; border-top: 1px solid #ddd; padding-top: 15px; } 73 + .license { border: 1px solid #bbb; border-radius: 5px; padding: 1px 5px; font-size: 10pt; white-space: nowrap; } 54 74 } 55 75 } 56 76
+1 -1
index.html
··· 7 7 8 8 <div class="language"> 9 9 <h2>{{ data.name }}</h2> 10 - <ul> 10 + <ul class="projects"> 11 11 {% assign repos = data.repos | sort: "info.stars", "first" | reverse %} 12 12 13 13 {% for repo in repos %}