Skip to content

Commit

Permalink
add utils.js and fallback images
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tanujkanti4441
Tanujkanti4441 committed Dec 30, 2024
1 parent d33888c commit 83da282
Show file tree
Hide file tree
Showing 9 changed files with 41 additions and 18 deletions.
3 changes: 2 additions & 1 deletion src/_includes/components/card.macro.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,8 @@ <h3 class="card__title">
{{ params.teaser }}
</p>
<div class="card__footer">
<img class="blog-post__author-photo" src="{% if params.authorImage %}{{ params.authorImage }} {% else %}../../../assets/images/people/_placeholder-avatar.svg{% endif %}" alt="{{ params.authorName }}" width="40" height="40" loading="lazy">
{% set fallback_image = '/assets/images/people/_placeholder-avatar.svg' %}
<img class="blog-post__author-photo" src="{{ params.image if params.image else fallback_image }}" alt="{{ params.authorName }}" width="40" height="40" loading="lazy" onerror="this.src = '{{fallback_image}}'">
<div class="blog-post__author__details">
<div class="blog-post__author-name">{{ params.authorName }}</div>
<time class="blog-post__publish-date" datetime="{{ params.date }}">{{ params.date | readableDate }}</time>
Expand Down
3 changes: 2 additions & 1 deletion src/_includes/components/donation.macro.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@
-->

{%- macro donationItem(params) -%}
{% set fallback_image = '/assets/images/people/_placeholder-avatar.svg' %}
<div class="donation">
<img class="donation__sponsor-logo" src="{{ params.image }}" width="40" height="40" alt="{{ params.name }}" onerror="this.src = '/assets/images/people/_placeholder-avatar.svg'" loading="lazy"/>
<img class="donation__sponsor-logo" src="{{ params.image if params.image else fallback_image }}" width="40" height="40" alt="{{ params.name }}" onerror="this.src = '{{fallback_image}}'" loading="lazy"/>

<div class="donation__content">
<p class="donation__sponsor-name">{{ params.name }}</p>
Expand Down
7 changes: 4 additions & 3 deletions src/_includes/components/profile.macro.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<!-- default profile -->
{% set fallback_image = '/assets/images/people/_placeholder-avatar.svg' %}
{%- macro member(params) -%}
<div class="profile profile--member">
<img class="profile__photo profile__photo--large" src="{% if params.photo %}{{ params.photo }} {% else %}../../../assets/images/people/_placeholder-avatar.svg{% endif %}" alt="{{ params.name }}" width="80" height="80">
<img class="profile__photo profile__photo--large" src="{{ params.image if params.image else fallback_image }}" alt="{{ params.name }}" width="80" height="80" onerror="this.src = '{{fallback_image}}'">
<div class="profile__details">
<div class="profile__name">
{{ params.name }}
Expand Down Expand Up @@ -75,7 +76,7 @@
<!-- has avatar, name, and handle only -->
{%- macro contributor(params) -%}
<div class="profile profile--contributor">
<img class="profile__photo profile__photo--medium" src="{% if params.photo %}{{ params.photo }} {% else %}../../../assets/images/people/_placeholder-avatar.svg{% endif %}" width="56" height="56" alt="{{ params.name }}" loading="lazy">
<img class="profile__photo profile__photo--medium" src="{{ params.image if params.image else fallback_image }}" width="56" height="56" alt="{{ params.name }}" loading="lazy" onerror="this.src = '{{fallback_image}}'">
<div class="profile__details">
<div class="profile__name">{{ params.name }}</div>
<a href="https://github.com/{{ params.handle}}" class="profile__handle">@{{ params.handle }}</a>
Expand All @@ -87,7 +88,7 @@
{%- macro post_author(params) -%}
<div class="profile profile--author">
<div class="profile--author__details">
<img class="profile__photo profile__photo--small" src="{% if params.photo %}{{ params.photo }} {% else %}../../../assets/images/people/_placeholder-avatar.svg{% endif %}" alt="{{ params.name }}" width="48" height="48" loading="lazy">
<img class="profile__photo profile__photo--small" src="{{ params.image if params.image else fallback_image }}" alt="{{ params.name }}" width="48" height="48" loading="lazy" onerror="this.src = '{{fallback_image}}'">
<div class="profile__details">
<div class="profile__name">
{{ params.name }}
Expand Down
7 changes: 5 additions & 2 deletions src/content/pages/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@
{%- from 'components/donation.macro.html' import donationItem %}
{%- from 'components/card.macro.html' import card %}

{% set fallback_image = '/assets/images/people/_placeholder-avatar.svg' %}

<section class="section hero hero--homepage">
<div class="content-container grid">
<div class="span-1-7 content-container">
Expand Down Expand Up @@ -52,7 +54,8 @@ <h1 class="section-title">{{ site.homepage.title }}</h1>
<div class="sponsors">
{% for sponsor in top_sponsors %}
<a href="{{ sponsor.url | url }}" class="sponsor-link" rel="nofollow noopener sponsored" target="_blank">
<img loading="lazy" decoding="async" src="{{sponsor.image}}" height="128"
<img loading="lazy" decoding="async" src="{{ sponsor.image if sponsor.image else fallback_image }}" height="128"
onerror="this.src = '{{fallback_image}}'"
alt="{{sponsor.name}}"
title="{{ sponsor.name }}" />
</a>
Expand Down Expand Up @@ -249,7 +252,7 @@ <h2 class="section-title h3">{{ site.homepage.sponsors.title }}</h2>
{% if sponsor.url %}
<a href="{{ sponsor.url }}" class="sponsor-link" rel="nofollow noopen sponsored" target="_blank">
{% endif %}
<img src="{{ sponsor.image }}" alt="{{ sponsor_title }}" title="{{ sponsor_title }}" height="48" loading="lazy" decoding="async" />
<img src="{{ sponsor.image if sponsor.image else fallback_image }}" alt="{{ sponsor_title }}" title="{{ sponsor_title }}" height="48" loading="lazy" decoding="async" onerror="this.src = '{{fallback_image}}'" />
{% if sponsor.url %}
</a>
{% endif %}
Expand Down
19 changes: 12 additions & 7 deletions src/content/pages/sponsors.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
{% set supporting_text = site.sponsors_page.description %}
{% set monthly_donations = sponsors.totals.monthlyDonations | dollars %}
{% set supporting_text = supporting_text | replace("BACKER_COUNT", sponsors.totals.sponsorCount) | replace("MONTHLY_DONATIONS", monthly_donations) %}
{% set fallback_image = '/assets/images/people/_placeholder-avatar.svg' %}

{{ hero({
title: site.sponsors_page.title,
Expand Down Expand Up @@ -42,7 +43,8 @@ <h2 class="section-title h4" id="diamond">{{ site.sponsors_page.tiers.diamond.ti

<li>
<a href="{{ sponsor.url | url }}" class="sponsor-link" rel="nofollow noopener sponsored" target="_blank">
<img loading="lazy" decoding="async" src="{{ sponsor.image }}" height="128"
<img loading="lazy" decoding="async" src="{{ sponsor.image if sponsor.image else fallback_image }}" height="128"
onerror="this.src = '{{fallback_image}}'"
alt="{{ sponsor_title }}"
title="{{ sponsor_title }}" />
</a>
Expand All @@ -69,7 +71,8 @@ <h2 class="section-title h4" id="platinum">{{ site.sponsors_page.tiers.platinum.

<li>
<a href="{{ sponsor.url | url }}" class="sponsor-link" rel="nofollow noopener sponsored" target="_blank">
<img loading="lazy" decoding="async" src="{{ sponsor.image }}" height="128"
<img loading="lazy" decoding="async" src="{{ sponsor.image if sponsor.image else fallback_image }}" height="128"
onerror="this.src = '{{fallback_image}}'"
alt="{{ sponsor_title }}"
title="{{ sponsor_title }}" />
</a>
Expand All @@ -96,7 +99,8 @@ <h2 class="section-title h4" id="gold">{{ site.sponsors_page.tiers.gold.title }}

<li>
<a href="{{ sponsor.url | url }}" class="sponsor-link" rel="nofollow noopener sponsored" target="_blank">
<img loading="lazy" decoding="async" src="{{ sponsor.image }}" height="128"
<img loading="lazy" decoding="async" src="{{ sponsor.image if sponsor.image else fallback_image }}" height="128"
onerror="this.src = '{{fallback_image}}'"
alt="{{ sponsor_title }}"
title="{{ sponsor_title }}" />
</a>
Expand All @@ -123,7 +127,8 @@ <h2 class="section-title h4" id="silver">{{ site.sponsors_page.tiers.silver.titl

<li>
<a href="{{ sponsor.url | url }}" class="sponsor-link" rel="nofollow noopener sponsored" target="_blank">
<img loading="lazy" decoding="async" src="{{ sponsor.image }}" height="128"
<img loading="lazy" decoding="async" src="{{ sponsor.image if sponsor.image else fallback_image }}" height="128"
onerror="this.src = '{{fallback_image}}'"
alt="{{ sponsor_title }}"
title="{{ sponsor_title }}" />
</a>
Expand All @@ -150,7 +155,8 @@ <h2 class="section-title h4" id="bronze">{{ site.sponsors_page.tiers.bronze.titl

<li>
<a href="{{ sponsor.url | url }}" class="sponsor-link" rel="nofollow noopener sponsored" target="_blank">
<img loading="lazy" decoding="async" src="{{ sponsor.image }}" height="128"
<img loading="lazy" decoding="async" src="{{ sponsor.image if sponsor.image else fallback_image }}" height="128"
onerror="this.src = '{{fallback_image}}'"
alt="{{ sponsor_title }}"
title="{{ sponsor_title }}" />
</a>
Expand All @@ -174,7 +180,7 @@ <h2 class="section-title h4" id="technology">{{ site.sponsors_page.tiers.technol
{% set sponsor_title = site.sponsors_page.tech_sponsor_title | replace("SPONSOR_NAME", sponsor.name) | replace("TECH", sponsor.donation | capitalize) %}
<li>
<a href="{{ sponsor.url | url }}" class="sponsor-link" rel="nofollow noopener sponsored" target="_blank">
<img loading="lazy" decoding="async" src="{{ sponsor.image }}" alt="{{ sponsor_title }}" title="{{ sponsor_title }}" height="64"/>
<img loading="lazy" decoding="async" src="{{ sponsor.image if sponsor.image else fallback_image }}" alt="{{ sponsor_title }}" title="{{ sponsor_title }}" height="64" onerror="this.src = '{{fallback_image}}'"/>
</a>
</li>
{% endfor %}
Expand Down Expand Up @@ -222,7 +228,6 @@ <h2 class="section-title h3">{{ site.sponsors_page.tiers.backers.title }}</h2>
</div>
<div class="grid">
<ul role="list" class="sponsors span-1-12 sponsors--backers">
{% set fallback_image = '/assets/images/people/_placeholder-avatar.svg' %}
{% for sponsor in sponsors.backers %}
<li>
<a href="{{ sponsor.url | url }}" class="sponsor-link" rel="nofollow noopener sponsored" target="_blank">
Expand Down
3 changes: 2 additions & 1 deletion tools/add-author.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
const fs = require("node:fs/promises");
const { Octokit } = require("@octokit/rest");
const path = require("node:path");
const { getGithubAvatar } = require("./utils");

//-----------------------------------------------------------------------------
// Data
Expand Down Expand Up @@ -46,7 +47,7 @@ async function fetchUserProfile() {
name: profile.name,
title: "Guest Author",
website: profile.blog,
avatar_url: `${profile.avatar_url.replace("private-", "").split("?")[0]}?v=4`,
avatar_url: getGithubAvatar(profile),
bio: profile.bio,
twitter_username: profile.twitter_username,
github_username: profile.login,
Expand Down
5 changes: 3 additions & 2 deletions tools/fetch-sponsors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
const fs = require("node:fs/promises");
const { request } = require("undici");
const { graphql: githubGraphQL } = require("@octokit/graphql");
const { getGithubAvatar } = require("./utils");

//-----------------------------------------------------------------------------
// Data
Expand Down Expand Up @@ -352,7 +353,7 @@ async function fetchGitHubSponsors() {
// return an array in the same format as Open Collective
.map(({ sponsor, tier }) => ({
name: sponsor.name || sponsor.login,
image: `${sponsor.avatarUrl.replace("private-", "").split("?")[0]}?v=4`,
image: getGithubAvatar(sponsor),
url: fixUrl(sponsor.websiteUrl || sponsor.url),
monthlyDonation: tier.monthlyPriceInDollars,
source: "github",
Expand All @@ -365,7 +366,7 @@ async function fetchGitHubSponsors() {
.map(({ sponsor, timestamp, tier, id }) => ({
id,
name: sponsor.name || sponsor.login,
image: `${sponsor.avatarUrl.replace("private-", "").split("?")[0]}?v=4`,
image: getGithubAvatar(sponsor),
url: fixUrl(sponsor.websiteUrl || sponsor.url),
amount: tier.monthlyPriceInDollars,
date: timestamp,
Expand Down
3 changes: 2 additions & 1 deletion tools/fetch-team-data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ const fs = require("node:fs/promises");
const matter = require("gray-matter");
const { Octokit } = require("@octokit/rest");
const path = require("node:path");
const { getGithubAvatar } = require("./utils");

//-----------------------------------------------------------------------------
// Data
Expand Down Expand Up @@ -96,7 +97,7 @@ async function fetchUserProfile(username) {
: profile.blog
? `https://${profile.blog}`
: profile.blog,
avatar_url: `${profile.avatar_url.replace("private-", "").split("?")[0]}?v=4`,
avatar_url: getGithubAvatar(profile),
bio: profile.bio,
twitter_username: profile.twitter_username,
github_username: profile.login,
Expand Down
9 changes: 9 additions & 0 deletions tools/utils.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
"use strict";

function getGithubAvatar(profile) {
return `${profile.avatar_url.replace("private-", "").split("?")[0]}?v=4`
}

module.exports = {
getGithubAvatar
}

0 comments on commit 83da282

Please sign in to comment.