From 9d26097a4d5f2856fdd769f37ebc1951615034d3 Mon Sep 17 00:00:00 2001 From: Wei He Date: Sat, 14 Dec 2024 19:24:42 +0000 Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8=20Support=20transparent=20backgro?= =?UTF-8?q?und?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/empty-mirrors-whisper.md | 5 +++++ common/helpers.ts | 31 +++++++++++++++++++++++++++-- common/types/configType.ts | 1 + package.json | 6 +++--- src/components/preview/preview.tsx | 8 +++++++- 5 files changed, 45 insertions(+), 6 deletions(-) create mode 100644 .changeset/empty-mirrors-whisper.md diff --git a/.changeset/empty-mirrors-whisper.md b/.changeset/empty-mirrors-whisper.md new file mode 100644 index 00000000..e4a1acb6 --- /dev/null +++ b/.changeset/empty-mirrors-whisper.md @@ -0,0 +1,5 @@ +--- +"socialify": minor +--- + +Support transparent background diff --git a/common/helpers.ts b/common/helpers.ts index 063aa9a1..b506dafb 100644 --- a/common/helpers.ts +++ b/common/helpers.ts @@ -9,6 +9,7 @@ import { plus, signal, } from 'hero-patterns' +import type { CSSProperties } from 'react' import { type SimpleIcon, siApachegroovy, @@ -140,7 +141,7 @@ const getSimpleIconsImageURI = function (language: string, theme: Theme) { return `data:image/svg+xml,${encodeURIComponent(iconSvg)}` } -const getHeroPattern = (pattern: Pattern, theme: Theme) => { +const getHeroPattern = (pattern: Pattern, theme: Theme): CSSProperties => { const PATTERN_FUNCTIONS_MAPPING: { [key: string]: any } = { [Pattern.signal]: signal, [Pattern.charlieBrown]: charlieBrown, @@ -152,9 +153,15 @@ const getHeroPattern = (pattern: Pattern, theme: Theme) => { [Pattern.floatingCogs]: floatingCogs, [Pattern.diagonalStripes]: diagonalStripes, [Pattern.solid]: null, + [Pattern.transparent]: null, } const patternFunction = PATTERN_FUNCTIONS_MAPPING[pattern] - const themedBackgroundColor = theme === Theme.dark ? '#000' : '#fff' + const themedBackgroundColor = + pattern === Pattern.transparent + ? 'transparent' + : theme === Theme.dark + ? '#000' + : '#fff' if (!patternFunction) { return { @@ -185,6 +192,25 @@ const getHeroPattern = (pattern: Pattern, theme: Theme) => { } } +const getChessBoardPattern = (theme: Theme): CSSProperties => { + const chessPatternColors = { + light: ['#fff', '#ccc'], + dark: ['#2f2f2f', '#000'], + }[theme === 'Dark' ? 'dark' : 'light'] + + return { + backgroundImage: `url('data:image/svg+xml,${encodeURIComponent( + ` + + + + + `.replace(/\n\s+/g, '') + )}`, + backgroundRepeat: 'repeat', + } +} + let webpSupport: boolean | undefined const checkWebpSupport = (): boolean => { if (webpSupport !== undefined) { @@ -229,6 +255,7 @@ const version = packageJson.version export { getSimpleIconsImageURI, getHeroPattern, + getChessBoardPattern, checkWebpSupport, HOST_PREFIX, autoThemeCss, diff --git a/common/types/configType.ts b/common/types/configType.ts index e2513200..53afc5f9 100644 --- a/common/types/configType.ts +++ b/common/types/configType.ts @@ -15,6 +15,7 @@ enum Pattern { floatingCogs = 'Floating Cogs', diagonalStripes = 'Diagonal Stripes', solid = 'Solid', + transparent = 'Transparent', } enum Font { diff --git a/package.json b/package.json index f40858cb..9acbbc72 100644 --- a/package.json +++ b/package.json @@ -16,9 +16,9 @@ "test:e2e:update-snapshot": "playwright test --update-snapshots", "test": "pnpm test:unit && pnpm test:e2e", "start": "next start", - "lint": "biome ci --max-diagnostics=999 .", - "lint:fix": "biome check --write --verbose --max-diagnostics=999 .", - "lint:fix-unsafe": "biome check --write-unsafe --verbose --max-diagnostics=999 .", + "lint": "biome ci .", + "lint:fix": "biome check --write --verbose .", + "lint:fix-unsafe": "biome check --write-unsafe --verbose .", "ncu": "npx npm-check-updates -u", "verify": "pnpm lint && pnpm test && pnpm build", "download-font": "./fonts/download-font.sh", diff --git a/src/components/preview/preview.tsx b/src/components/preview/preview.tsx index c1e97153..fb3c7299 100644 --- a/src/components/preview/preview.tsx +++ b/src/components/preview/preview.tsx @@ -5,7 +5,8 @@ import Router from 'next/router' import React, { useContext } from 'react' import { MdContentCopy, MdDownload } from 'react-icons/md' -import { checkWebpSupport } from '@/common/helpers' +import { checkWebpSupport, getChessBoardPattern } from '@/common/helpers' +import { Pattern } from '@/common/types/configType' import Card from '@/src/components/preview/card' import toaster from '@/src/components/toaster' import ConfigContext from '@/src/contexts/ConfigContext' @@ -109,6 +110,11 @@ const Preview: React.FC = () => { 'min-[640px]:w-[640px] min-[640px]:h-[320px]' )} onClick={copyImageUrl} + style={ + config.pattern === Pattern.transparent + ? getChessBoardPattern(config.theme) + : undefined + } >
Date: Sat, 14 Dec 2024 19:58:29 +0000 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=92=84=20Apply=20correct=20checkerboa?= =?UTF-8?q?rd=20for=20transparent=20background=20when=20using=20auto=20the?= =?UTF-8?q?me?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- common/helpers.ts | 57 +++++++++++++++++++++++++++++++---------------- 1 file changed, 38 insertions(+), 19 deletions(-) diff --git a/common/helpers.ts b/common/helpers.ts index b506dafb..fb6aab62 100644 --- a/common/helpers.ts +++ b/common/helpers.ts @@ -192,25 +192,6 @@ const getHeroPattern = (pattern: Pattern, theme: Theme): CSSProperties => { } } -const getChessBoardPattern = (theme: Theme): CSSProperties => { - const chessPatternColors = { - light: ['#fff', '#ccc'], - dark: ['#2f2f2f', '#000'], - }[theme === 'Dark' ? 'dark' : 'light'] - - return { - backgroundImage: `url('data:image/svg+xml,${encodeURIComponent( - ` - - - - - `.replace(/\n\s+/g, '') - )}`, - backgroundRepeat: 'repeat', - } -} - let webpSupport: boolean | undefined const checkWebpSupport = (): boolean => { if (webpSupport !== undefined) { @@ -250,6 +231,44 @@ const autoThemeCss = ` } ` +const getChessBoardPattern = (theme: Theme): CSSProperties => { + const chessPatternColors = { + light: ['#fff', '#ccc'], + dark: ['#2f2f2f', '#000'], + } + + const getSVGImage = (mode: 'light' | 'dark') => { + const [color1, color2] = chessPatternColors[mode] + return ` + + + + + + + ` + } + + let svg: string + if (theme === Theme.auto) { + svg = ` + + + ${getSVGImage('light')} + ${getSVGImage('dark')} + + ` + } else { + svg = getSVGImage(theme === Theme.dark ? 'dark' : 'light') + } + svg = svg.replace(/\n\s*/g, '') + + return { + backgroundImage: `url('data:image/svg+xml,${encodeURIComponent(svg.replace(/\n\s*/g, ''))}`, + backgroundRepeat: 'repeat', + } +} + const version = packageJson.version export {