Merge remote-tracking branch 'upstream/master' into feat/handle-long-…

…svg-data-uri

.devcontainer/Dockerfile

@@ -0,0 +1,3 @@
+ARG VARIANT="22-bookworm"
+
+FROM mcr.microsoft.com/devcontainers/typescript-node:1-${VARIANT}

.devcontainer/devcontainer.json

@@ -0,0 +1,36 @@
+{
+	"name": "Socialify Dev Environment",
+
+	"build": {
+    "dockerfile": "Dockerfile"
+  },
+
+	"features": {
+		"ghcr.io/devcontainers/features/github-cli:1": {
+			"installDirectlyFromGitHubRelease": true,
+			"version": "latest"
+		}
+	},
+
+	"forwardPorts": [3000],
+
+	"containerEnv": {
+		"NEXT_TELEMETRY_DISABLED": "1",
+		"PNPM_HOME": "/home/node/.local/share/pnpm",
+		"PNPM_STORE_DIR": "/home/node/.local/share/.pnpm-store"
+	},
+
+	"postCreateCommand": "corepack install",
+
+	"postStartCommand": ".devcontainer/post-start.sh",
+
+	"customizations": {
+		"vscode": {
+			"extensions": [
+				"GitHub.copilot",
+				"biomejs.biome",
+				"ms-playwright.playwright"
+			]
+		}
+	}
+}

.devcontainer/post-start.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+
+if [ ! -f /home/node/.first_run ]; then
+  git config --global --add safe.directory $(pwd)
+  git config --global core.autocrlf true
+  git config --global core.editor nano
+
+  pnpm config set store-dir $PNPM_STORE_DIR
+  pnpm install
+  pnpm playwright:install
+
+  if [ ! -f .env ]; then
+    cp .env.example .env
+    echo -e "\e[31mPlease fill in the .env file\e[0m"
+  fi
+
+  touch /home/node/.first_run
+fi

.gitignore

@@ -1,8 +1,5 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# Local vscode
-.vscode
-
 # Playwright
 /.playwright/.cache
 /.playwright/test-report

.husky/prepare-commit-msg

@@ -1,4 +1,4 @@
 #!/bin/sh
 # gitmoji as a commit hook
 exec < /dev/tty
-npx gitmoji-cli --hook $1 $2
+npx --yes gitmoji-cli --hook $1 $2

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "editor.defaultFormatter": "biomejs.biome",
+  "editor.formatOnSave": true,
+  "editor.tabSize": 2,
+  "files.insertFinalNewline": true
+}

CHANGELOG.md

@@ -1,5 +1,25 @@
 # socialify
 
+## 2.15.1
+
+### Patch Changes
+
+- ca0cebb: Set up dev container
+
+## 2.15.0
+
+### Minor Changes
+
+- c739cec: Support transparent background
+
+## 2.14.6
+
+### Patch Changes
+
+- c32156a: remove unused npm packages
+
+  Thanks to [@Sunny-64](https://github.com/Sunny-64)
+
 ## 2.14.5
 
 ### Patch Changes
@@ -8,7 +28,7 @@
   Updated scripts, hooks, and README.md
 
   Thanks to [@Keming-He](https://github.com/KemingHe)
-  
+
   Update Dockerfile
 
 ## 2.14.4

README.md

@@ -78,11 +78,18 @@ pnpm dev
 
 ### Testing and Committing
 
+[![Open in Dev Container](https://img.shields.io/static/v1?label=Dev%20Containers&message=Click%20to%20Launch&color=blue)](https://open.vscode.dev/wei/socialify)
+
+If you already have VS Code and Docker installed locally, you can also click [here](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/wei/socialify) to get started. Clicking this link will cause VS Code to automatically install the Dev Containers extension if needed, clone the source code into a container volume, and spin up a dev container for use.
+
 Socialify uses [`biomejs`](https://biomejs.dev/) as linter/formatter, [`Jest`](https://jestjs.io/) for unit testing, and [`Playwright`](https://playwright.dev/) for end-to-end testing.
 
 Make sure to run and pass the linter, unit and end-to-end tests locally before committing your code. Please let us know in case you need to update the test snapshots. More in `"scripts"` section in your `package.json` file.
 
 ```shell
+# Required: Set environment variables in .env.
+cp .env.example .env
+
 # Run linter/formatter
 pnpm lint
 
@@ -93,7 +100,7 @@ pnpm lint
 pnpm test:unit
 
 # Install Playwright dependencies (first-time)
-# pnpm playwright install --with-deps chrome
+# pnpm playwright:install
 
 # Run e2e tests
 pnpm test:e2e

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

@@ -1,6 +1,6 @@
 {
   "name": "socialify",
-  "version": "2.14.5",
+  "version": "2.15.1",
   "description": "Socialify your project. Share with the world!",
   "author": "@CryogenicPlanet, @wei",
   "license": "MIT",
@@ -16,12 +16,13 @@
     "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",
+    "playwright:install": "pnpm playwright install --with-deps chromium",
     "postinstall": "mkdir -p ./public && cp ./node_modules/yoga-wasm-web/dist/yoga.wasm ./public/yoga.wasm && cp ./node_modules/@resvg/resvg-wasm/index_bg.wasm ./public/resvg_bg.wasm",
     "prepare": "is-ci || husky"
   },
@@ -39,11 +40,10 @@
     "next": "^14.2.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-error-boundary": "^4.1.2",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.4.0",
     "satori": "^0.10.14",
-    "simple-icons": "^13.20.0",
+    "simple-icons": "^13.21.0",
     "styled-jsx": "^5.1.6",
     "use-debounce": "^10.0.4",
     "yoga-wasm-web": "^0.3.3"
@@ -60,8 +60,6 @@
     "@types/react": "18.3.12",
     "autoprefixer": "^10.4.20",
     "daisyui": "^4.12.14",
-    "graphql": "^16.9.0",
-    "graphql-compiler": "^1.7.0",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",