From 52b72500682c2700dafe451b937f3c103bbc6a58 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Josh=20Goldberg=20=E2=9C=A8?= Date: Thu, 19 Sep 2024 09:22:48 -0400 Subject: [PATCH] feat: badge back (#120) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 💖 --- cspell.json | 43 ++++----- src/assets/logos/icon-wifi.svg | 11 +++ src/assets/qr/discord.png | Bin 0 -> 12354 bytes src/assets/sponsors/datastax-black.svg | 18 ++++ src/assets/sponsors/datastax-white.svg | 18 ++++ src/components/DeepBlueSea.astro | 26 ++++- src/components/SponsorLogos.astro | 125 +++++++++++++++++++++++++ src/components/Sponsors.astro | 80 +--------------- src/data/sponsors.ts | 11 +++ src/layouts/BadgeLayout.astro | 24 ++--- src/pages/badge/back.astro | 82 ++++++++++++++-- src/pages/badge/front.astro | 16 +++- 12 files changed, 325 insertions(+), 129 deletions(-) create mode 100644 src/assets/logos/icon-wifi.svg create mode 100644 src/assets/qr/discord.png create mode 100644 src/assets/sponsors/datastax-black.svg create mode 100644 src/assets/sponsors/datastax-white.svg create mode 100644 src/components/SponsorLogos.astro diff --git a/cspell.json b/cspell.json index 42c16dd..7cc01b5 100644 --- a/cspell.json +++ b/cspell.json @@ -8,43 +8,27 @@ "*.svg" ], "words": [ - "Afficianado", - "Autometics", - "Axosoft", - "Cernicova", - "Excalidraw", - "Extism", - "FAANG", - "FOSS", - "Faneuil", - "Fiberplane", - "Harborside", - "Instabase", - "Katerina", - "Livecoder", - "Livestream", - "MBTA", - "Pinterest", - "Rizèl", - "SQUOCT", - "Simons", - "Skroumpelou", "_epichunter", "aakansha", + "Afficianado", "allowfullscreen", "anonrig", "astro", "astrojs", "astropub", + "Autometics", + "Axosoft", "blackgirlbytes", "bluesky", "bootcamp", "bostonts", "cernicova", + "Cernicova", "codesandbox", "contejas", "danvdk", "danvk", + "datastax", "devrel", "devs", "dimitri", @@ -52,21 +36,33 @@ "doshi", "dragomir", "dragomirtitian", + "Excalidraw", + "Extism", + "FAANG", + "Faneuil", "farrelly", + "Fiberplane", "fontsource", + "FOSS", "fosstodon", "griffing", + "Harborside", "igalia", "inngest", + "Instabase", "josefin", "joshuakgoldberg", "jsparty", + "Katerina", "keturakis", "kless", "knip", "konami", "konamimojisplosion", "laurynas", + "Livecoder", + "Livestream", + "MBTA", "michigantypescript", "mitropoulos", "murg", @@ -77,12 +73,17 @@ "nowrap", "openjs", "packagejson", + "Pinterest", "plone", "psyber", "referrerpolicy", "rizel", + "Rizèl", "scarlett", + "Simons", + "Skroumpelou", "squiggleconf", + "SQUOCT", "sugaroverflow", "sylwia", "tejas", diff --git a/src/assets/logos/icon-wifi.svg b/src/assets/logos/icon-wifi.svg new file mode 100644 index 0000000..df91b52 --- /dev/null +++ b/src/assets/logos/icon-wifi.svg @@ -0,0 +1,11 @@ + + + diff --git a/src/assets/qr/discord.png b/src/assets/qr/discord.png new file mode 100644 index 0000000000000000000000000000000000000000..20d6daa77abc4f542aacee9aa4711fb26b301b09 GIT binary patch literal 12354 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 literal 0 HcmV?d00001 diff --git a/src/assets/sponsors/datastax-black.svg b/src/assets/sponsors/datastax-black.svg new file mode 100644 index 0000000..2e6d68e --- /dev/null +++ b/src/assets/sponsors/datastax-black.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/sponsors/datastax-white.svg b/src/assets/sponsors/datastax-white.svg new file mode 100644 index 0000000..e902ae0 --- /dev/null +++ b/src/assets/sponsors/datastax-white.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/components/DeepBlueSea.astro b/src/components/DeepBlueSea.astro index 4a6781d..f4a237f 100644 --- a/src/components/DeepBlueSea.astro +++ b/src/components/DeepBlueSea.astro @@ -30,6 +30,15 @@ const { class: className, light = "bottom", unmasked, ...rest } = Astro.props; text-align: center; } + .deep-blue-sea-bottom, + .deep-blue-sea-top { + --squiggleMask: radial-gradient( + circle at center, + transparent 10%, + #000 80% + ); + } + .deep-blue-sea-bottom { background: linear-gradient( 180deg, @@ -38,14 +47,21 @@ const { class: className, light = "bottom", unmasked, ...rest } = Astro.props; ); } - .deep-blue-sea-contrast { - background: linear-gradient(180deg, #197297 0%, var(--colorHeroShadow) 40%); - } - .deep-blue-sea-top { background: linear-gradient(180deg, #104f69 0%, var(--colorHeroShadow) 90%); } + .deep-blue-sea-contrast { + background: linear-gradient(180deg, #197297 0%, var(--colorHeroShadow) 40%); + --squiggleMask: linear-gradient( + to bottom, + #000 30%, + rgba(0, 0, 0, 0.15) 40%, + rgba(0, 0, 0, 0.25) 70%, + transparent 100% + ); + } + .squiggles { bottom: 0; left: 0; @@ -56,7 +72,7 @@ const { class: className, light = "bottom", unmasked, ...rest } = Astro.props; } .squiggles:not(.squiggles-unmasked) { - mask-image: radial-gradient(circle at center, transparent 10%, #000 80%); + mask-image: var(--squiggleMask); } .squiggle { diff --git a/src/components/SponsorLogos.astro b/src/components/SponsorLogos.astro new file mode 100644 index 0000000..105dbae --- /dev/null +++ b/src/components/SponsorLogos.astro @@ -0,0 +1,125 @@ +--- +import _ from "lodash"; +import { Image } from "astro:assets"; + +import { sponsorsBySlug } from "~/data/sponsors"; + +const sponsorGroups = _.groupBy( + Object.values(sponsorsBySlug), + (sponsor) => sponsor.placement, +); + +interface Props { + light?: boolean; + size?: "normal" | "small"; +} + +const { size = "normal", light } = Astro.props; +--- + +
+ { + Object.values(sponsorGroups).map((sponsors) => ( + + )) + } +
+ + diff --git a/src/components/Sponsors.astro b/src/components/Sponsors.astro index 66f50d7..838264e 100644 --- a/src/components/Sponsors.astro +++ b/src/components/Sponsors.astro @@ -1,17 +1,10 @@ --- import _ from "lodash"; -import { Image } from "astro:assets"; - -import { sponsorsBySlug } from "~/data/sponsors"; import BodyText from "./BodyText.astro"; import FullSection from "./FullSection.astro"; import HeadingFlanked from "./HeadingFlanked.astro"; - -const sponsorGroups = _.groupBy( - Object.values(sponsorsBySlug), - (sponsor) => sponsor.placement, -); +import SponsorLogos from "./SponsorLogos.astro"; --- @@ -21,36 +14,7 @@ const sponsorGroups = _.groupBy( have our sincere appreciation and thanks. -
- { - Object.values(sponsorGroups).map((sponsors) => ( - - )) - } -
+ diff --git a/src/pages/badge/back.astro b/src/pages/badge/back.astro index 3524c30..b0b6f36 100644 --- a/src/pages/badge/back.astro +++ b/src/pages/badge/back.astro @@ -5,22 +5,90 @@ import "@fontsource/urbanist"; import "~/layouts/base.css"; import "~/layouts/normalize.css"; -import Heading from "~/components/Heading.astro"; +import qrDiscord from "~/assets/qr/discord.png"; +import SponsorLogos from "~/components/SponsorLogos.astro"; import BadgeLayout from "~/layouts/BadgeLayout.astro"; +import { Image } from "astro:assets"; --- - hi +
+ +
+
+ +
+
+ See the schedule, speakers, and more on +
+
discord.squiggleconf.com
+
+
diff --git a/src/pages/badge/front.astro b/src/pages/badge/front.astro index 9a69bbb..dee07f1 100644 --- a/src/pages/badge/front.astro +++ b/src/pages/badge/front.astro @@ -8,21 +8,29 @@ import "~/layouts/normalize.css"; import Heading from "~/components/Heading.astro"; import SquiggleFlanked from "~/components/SquiggleFlanked.astro"; import BadgeLayout from "~/layouts/BadgeLayout.astro"; +import BodyArea from "~/components/BodyArea.astro"; const name = Astro.url.searchParams.get("name"); const role = Astro.url.searchParams.get("role"); --- - - {name?.split(/\s+/g).map((line) =>
{line}
)} - -
+ + + {name?.split(/\s+/g).map((line) =>
{line}
)} + + +
{role}