✨ Support transparent background (#445)

* ✨ Support transparent background

* 💄 Apply correct checkerboard for transparent background when using auto theme

.changeset/empty-mirrors-whisper.md

@@ -0,0 +1,5 @@
+---
+"socialify": minor
+---
+
+Support transparent background

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 {
@@ -224,11 +231,50 @@ 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 `
+      <svg id="card-${mode}" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" shape-rendering="crispEdges">
+        <rect width="10" height="10" fill="${color1}"/>
+        <rect x="10" width="10" height="10" fill="${color2}"/>
+        <rect y="10" width="10" height="10" fill="${color2}"/>
+        <rect x="10" y="10" width="10" height="10" fill="${color1}"/>
+      </svg>
+    `
+  }
+
+  let svg: string
+  if (theme === Theme.auto) {
+    svg = `
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" shape-rendering="crispEdges">
+        <style>${autoThemeCss}</style>
+        <g class="card-light">${getSVGImage('light')}</g>
+        <g class="card-dark">${getSVGImage('dark')}</g>
+      </svg>
+    `
+  } 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 {
   getSimpleIconsImageURI,
   getHeroPattern,
+  getChessBoardPattern,
   checkWebpSupport,
   HOST_PREFIX,
   autoThemeCss,

common/types/configType.ts

@@ -15,6 +15,7 @@ enum Pattern {
   floatingCogs = 'Floating Cogs',
   diagonalStripes = 'Diagonal Stripes',
   solid = 'Solid',
+  transparent = 'Transparent',
 }
 
 enum Font {

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",

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
+        }
       >
         <div
           className={classnames(