diff --git a/docs/public/banner_bluesky.png b/docs/public/banner_bluesky.png new file mode 100644 index 00000000..2aa9f204 Binary files /dev/null and b/docs/public/banner_bluesky.png differ diff --git a/docs/public/banner_linkedin.png b/docs/public/banner_linkedin.png new file mode 100644 index 00000000..a281feae Binary files /dev/null and b/docs/public/banner_linkedin.png differ diff --git a/docs/resources/logo.md b/docs/resources/logo.md index aa09ed49..46da41d8 100644 --- a/docs/resources/logo.md +++ b/docs/resources/logo.md @@ -92,6 +92,31 @@ header, a slide, a repository social preview. | File | [`code_cover.png`](/code_cover.png) | | Size | 2278 × 830, PNG, transparent background | +## Profile Banners + +The claim of the home page, set in the site's own face and the mark's red, on +white: the cover image of the project's LinkedIn page and its Bluesky profile. +Both platforms lay the round profile picture over the lower left of the cover, +so the text sits to the right of it, centered in the space that remains. The +background is white because the profile card around it is white — a tinted +cover reads as a mistake there, not as a design. + +![The LinkedIn cover: UI5 apps for ABAP, built by the team you already have](/banner_linkedin.png) + +| | | +| --- | --- | +| File | [`banner_linkedin.png`](/banner_linkedin.png) | +| Size | 4512 × 764, PNG — four times the 1128 × 191 LinkedIn displays, so the text stays sharp once LinkedIn has scaled it down | +| Used by | the cover of [the project's LinkedIn page](https://www.linkedin.com/company/abap2ui5/) | + +![The Bluesky banner: UI5 apps for ABAP, built by the team you already have](/banner_bluesky.png) + +| | | +| --- | --- | +| File | [`banner_bluesky.png`](/banner_bluesky.png) | +| Size | 3000 × 1000, PNG — the 3:1 Bluesky asks for | +| Used by | the banner of [the project's Bluesky profile](https://bsky.app/profile/abap2ui5.bsky.social) | + ## Mascots Three animals travel with the project — on posts, slides and covers, where the diff --git a/scripts/check-images.mjs b/scripts/check-images.mjs index e2cc165c..924ad715 100644 --- a/scripts/check-images.mjs +++ b/scripts/check-images.mjs @@ -7,7 +7,8 @@ * are a fifth of that with no visible difference, so a screenshot is WebP * here, and this is what says so the next time somebody drags a PNG in. The * exceptions are the files the logo page hands OUT - the mark, the wordmark - * on white, the code cover, the mascots, the preview card - which are PNG + * on white, the code cover, the profile banners, the mascots, the preview + * card - which are PNG * because that is what a reader downloads them as, and the icons, which the * browser wants as PNG. Those are listed, and anything not listed is a * screenshot. @@ -35,6 +36,7 @@ const PUBLIC = path.join(ROOT, 'docs', 'public'); const DELIVERABLE = [ /^favicon\.(?:png|ico)$/, /^apple-touch-icon\.png$/, /^og-image\.png$/, /^logo\.png$/, /^logo_white_back\.png$/, /^code_cover\.png$/, /^mascots\//, + /^banner_linkedin\.png$/, /^banner_bluesky\.png$/, ]; /* Content is a screenshot or the hero mark: WebP, and never more than this. The largest today is 62 kB. A deliverable is a PNG somebody downloads, and diff --git a/scripts/lib/vocabulary.txt b/scripts/lib/vocabulary.txt index 3044221f..ed597d17 100644 --- a/scripts/lib/vocabulary.txt +++ b/scripts/lib/vocabulary.txt @@ -62,6 +62,7 @@ anthropic api backend backends +bluesky bundler cdnjs css