feat(app): add ko-fi to banner and FUNDING.yaml

...and intermediate directories if they don't already exist

.github/FUNDING.yaml

@@ -0,0 +1,5 @@
+# Thanks for considering supporting this project! 🎉
+github: [phosphor-icons, rektdeckard]
+patreon: phosphoricons
+buy_me_a_coffee: phosphoricons
+ko_fi: phosphoricons

.github/FUNDING.yml

@@ -1,3 +0,0 @@
-github: [phosphor-icons, rektdeckard]
-patreon: phosphoricons
-custom: ["https://www.buymeacoffee.com/phosphoricons"]

.github/workflows/dreamhost-preview-static.yaml

@@ -0,0 +1,54 @@
+name: Build and deploy to preview
+
+on:
+  push
+
+concurrency:
+  group: 'preview'
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+          run_install: false
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Install sshpass
+        run: sudo apt-get install -y sshpass
+
+      - name: Add SSH Key to known_hosts
+        env:
+          KNOWN_HOSTS_ENTRY: ${{ secrets.DREAMHOST_KNOWN_HOSTS_ENTRY }}
+          HOST: ${{ secrets.HOST }}
+        run: |
+          mkdir -p ~/.ssh
+          echo "$KNOWN_HOSTS_ENTRY" >> ~/.ssh/known_hosts
+          chmod 644 ~/.ssh/known_hosts
+
+      - name: Build static site
+        run: pnpm build
+
+      - name: Deploy via rsync and sshpass
+        env:
+          USERNAME: ${{ secrets.DREAMHOST_FTP_USERNAME }}
+          PASSWORD: ${{ secrets.DREAMHOST_FTP_PASSWORD }}
+          HOST: ${{ secrets.DREAMHOST_FTP_HOST }}
+          DEPLOY_PATH: preview.phosphoricons.com
+        run: |
+          sshpass -p "$PASSWORD" rsync -avz --delete ./dist/* $USERNAME@$HOST:$DEPLOY_PATH

.github/workflows/dreamhost-static.yaml

@@ -0,0 +1,56 @@
+name: Build and deploy to production
+
+on:
+  push:
+    branches:
+      - master
+
+concurrency:
+  group: 'prod'
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+          run_install: false
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Install sshpass
+        run: sudo apt-get install -y sshpass
+
+      - name: Add SSH Key to known_hosts
+        env:
+          KNOWN_HOSTS_ENTRY: ${{ secrets.DREAMHOST_KNOWN_HOSTS_ENTRY }}
+          HOST: ${{ secrets.HOST }}
+        run: |
+          mkdir -p ~/.ssh
+          echo "$KNOWN_HOSTS_ENTRY" >> ~/.ssh/known_hosts
+          chmod 644 ~/.ssh/known_hosts
+
+      - name: Build static site
+        run: pnpm build
+
+      - name: Deploy via rsync and sshpass
+        env:
+          USERNAME: ${{ secrets.DREAMHOST_FTP_USERNAME }}
+          PASSWORD: ${{ secrets.DREAMHOST_FTP_PASSWORD }}
+          HOST: ${{ secrets.DREAMHOST_FTP_HOST }}
+          DEPLOY_PATH: phosphoricons.com
+        run: |
+          sshpass -p "$PASSWORD" rsync -avz --delete ./dist/* $USERNAME@$HOST:$DEPLOY_PATH

.github/workflows/sync-docs.yaml

@@ -0,0 +1,100 @@
+name: Sync documentation
+
+on:
+  push:
+    paths:
+      - 'README.md'
+      - '.github/FUNDING.yaml'
+      - '.github/logo.png'
+    branches:
+      - master
+  workflow_dispatch:  # Allows manual triggering
+
+concurrency:
+  group: 'docs'
+  cancel-in-progress: true
+
+jobs:
+  sync-docs:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        repository: [
+          'phosphor-icons/core',
+          'phosphor-icons/figma',
+          'phosphor-icons/flutter',
+          'phosphor-icons/penpot',
+          'phosphor-icons/phosphor-elm',
+          'phosphor-icons/play',
+          'phosphor-icons/react',
+          'phosphor-icons/sketch',
+          'phosphor-icons/swift',
+          'phosphor-icons/theme',
+          'phosphor-icons/unplugin',
+          'phosphor-icons/vue',
+          'phosphor-icons/web',
+          'phosphor-icons/webcomponents'
+        ]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          path: source-repo
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+          run_install: false
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+          cache-dependency-path: source-repo/pnpm-lock.yaml
+
+      - name: Install dependencies
+        working-directory: source-repo
+        run: pnpm install
+
+      - name: Sync to target repositories
+        env:
+          GITHUB_TOKEN: ${{ secrets.SYNC_PAT }}
+        run: |
+          echo "Syncing to ${{ matrix.repository }}"
+
+          # Get the source repository name and commit info
+          COMMIT_URL="https://github.com/${GITHUB_REPOSITORY}/commit/${GITHUB_SHA}"
+
+          # Clone target repository using HTTPS with token
+          git clone "https://x-access-token:${GITHUB_TOKEN}@github.com/${{ matrix.repository }}.git" target-repo
+
+          # Run sync script
+          cd source-repo
+          pnpm run sync-docs -- target-repo
+          cd ..
+
+          # Create PR if there are changes
+          cd target-repo
+          if [[ -n "$(git status --porcelain)" ]]; then
+            git config user.name "github-actions[bot]"
+            git config user.email "github-actions[bot]@users.noreply.github.com"
+
+            # Create branch
+            BRANCH="sync-readme-$(date +%Y%m%d-%H%M%S)"
+            git checkout -b $BRANCH
+
+            # Commit and push changes
+            git add .
+            git commit -am "chore(docs): sync readme section"
+            git push "https://x-access-token:${GITHUB_TOKEN}@github.com/${{ matrix.repository }}.git" $BRANCH
+
+            # Create PR using the GitHub CLI
+            gh pr create \
+              --repo "${{ matrix.repository }}" \
+              --title "chore(docs): sync readme section" \
+              --body "Automated PR to sync README section. This change originates from the following commit: ${COMMIT_URL}". \
+              --base $(git remote show origin | sed -n '/HEAD branch/s/.*: //p') \
+              --head $BRANCH
+          fi

README.md

@@ -1,7 +1,10 @@
-<img src="/meta/phosphor-mark-tight-black.png" width="96" align="right" />
-
 # Phosphor Icons
 
+<!-- BEGIN_LOGO -->
+<img src="/.github/logo.png" width="128" align="right" />
+<!-- END_LOGO -->
+
+<!-- BEGIN_OVERVIEW -->
 Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really.
 
 - 1,248 icons and counting
@@ -10,6 +13,7 @@ Phosphor is a flexible icon family for interfaces, diagrams, presentations — w
 - Raw stroke information retained to fine-tune the style
 
 More ways to use at [phosphoricons.com](https://phosphoricons.com).
+<!-- END_OVERVIEW -->
 
 ## For developers
 
@@ -23,10 +27,10 @@ Phosphor is available for [web](https://github.com/phosphor-icons/web), [React](
 <!doctype html>
 <html>
   <head>
-    <script src="https://unpkg.com/@phosphor-icons/web"></script>
+    <script src="https://unpkg.com/@phosphor-icons/web@2.1.1"></script>
   </head>
   <body>
-    <i class="ph-smiley"></i>
+    <i class="ph ph-smiley"></i>
     <i class="ph-fill ph-heart" style="color: hotpink"></i>
     <i class="ph-thin ph-cube"></i>
   </body>
@@ -89,39 +93,53 @@ ReactDOM.render(<App />, document.getElementById("root"));
 > [!NOTE]
 > Due to possible namespace collisions with built-in HTML elements, compononent names in the Vue library are prefixed with `Ph`, but otherwise follow the same naming conventions. Both Pascal and kebab-case conventions can be used in templates.
 
-## Our Related Projects
+<!-- BEGIN_LINKS -->
+## Our Projects
 
 - [@phosphor-icons/homepage](https://github.com/phosphor-icons/homepage) ▲ Phosphor homepage and general info
 - [@phosphor-icons/core](https://github.com/phosphor-icons/core) ▲ Phosphor icon assets and catalog
-- [@phosphor-icons/react](https://github.com/phosphor-icons/react) ▲ Phosphor icon component library for React
-- [@phosphor-icons/web](https://github.com/phosphor-icons/web) ▲ Phosphor icons for Vanilla JS
-- [@phosphor-icons/vue](https://github.com/phosphor-icons/vue) ▲ Phosphor icon component library for Vue
-- [@phosphor-icons/swift](https://github.com/phosphor-icons/swift) ▲ Phosphor icon component library for SwiftUI
 - [@phosphor-icons/elm](https://github.com/phosphor-icons/phosphor-elm) ▲ Phosphor icons for Elm
-- [@phosphor-icons/flutter](https://github.com/phosphor-icons/flutter) ▲ Phosphor IconData library for Flutter
-- [@phosphor-icons/webcomponents](https://github.com/phosphor-icons/webcomponents) ▲ Phosphor icons as Web Components
 - [@phosphor-icons/figma](https://github.com/phosphor-icons/figma) ▲ Phosphor icons Figma plugin
-- [@phosphor-icons/sketch](https://github.com/phosphor-icons/sketch) ▲ Phosphor icons Sketch plugin
+- [@phosphor-icons/flutter](https://github.com/phosphor-icons/flutter) ▲ Phosphor IconData library for Flutter
 - [@phosphor-icons/pack](https://github.com/phosphor-icons/pack) ▲ Phosphor web font stripper to generate minimal icon bundles
+- [@phosphor-icons/penpot](https://github.com/phosphor-icons/penpot) ▲ Phosphor icons Penpot plugin
+- [@phosphor-icons/react](https://github.com/phosphor-icons/react) ▲ Phosphor icon component library for React
+- [@phosphor-icons/sketch](https://github.com/phosphor-icons/sketch) ▲ Phosphor icons Sketch plugin
+- [@phosphor-icons/swift](https://github.com/phosphor-icons/swift) ▲ Phosphor icon component library for SwiftUI
 - [@phosphor-icons/theme](https://github.com/phosphor-icons/theme) ▲ A VS Code (and other IDE) theme with the Phosphor color palette
+- [@phosphor-icons/unplugin](https://github.com/phosphor-icons/theme) ▲ A multi-framework bundler plugin for generating Phosphor sprite sheets
+- [@phosphor-icons/vue](https://github.com/phosphor-icons/vue) ▲ Phosphor icon component library for Vue
+- [@phosphor-icons/web](https://github.com/phosphor-icons/web) ▲ Phosphor icons for Vanilla JS
+- [@phosphor-icons/webcomponents](https://github.com/phosphor-icons/webcomponents) ▲ Phosphor icons as Web Components
 
 ## Community Projects
 
-- [phosphor-react-native](https://github.com/duongdev/phosphor-react-native) ▲ Phosphor icon component library for React Native
+- [adamglin0/compose-phosphor-icons](https://github.com/adamglin0/compose-phosphor-icon) ▲ Phosphor icons for Compose Multiplatform
-- [phosphor-svelte](https://github.com/haruaki07/phosphor-svelte) ▲ Phosphor icons for Svelte apps
+- [brettkolodny/phosphor-lustre](https://github.com/brettkolodny/phosphor-lustre) ▲ Phosphor icons for Lustre
-- [phosphor-r](https://github.com/dreamRs/phosphoricons) ▲ Phosphor icon wrapper for R documents and applications
+- [cjohansen/phosphor-clj](https://github.com/cjohansen/phosphor-clj) ▲ Phosphor icons as Hiccup for Clojure and ClojureScript
-- [blade-phosphor-icons](https://github.com/codeat3/blade-phosphor-icons) ▲ Phosphor icons in your Laravel Blade views
+- [codeat3/blade-phosphor-icons](https://github.com/codeat3/blade-phosphor-icons) ▲ Phosphor icons in your Laravel Blade views
+- [dreamRs/phosphor-r](https://github.com/dreamRs/phosphoricons) ▲ Phosphor icon wrapper for R documents and applications
+- [duongdev/phosphor-react-native](https://github.com/duongdev/phosphor-react-native) ▲ Phosphor icon component library for React Native
+- [haruaki07/phosphor-svelte](https://github.com/haruaki07/phosphor-svelte) ▲ Phosphor icons for Svelte apps
+- [IgnaceMaes/ember-phosphor-icons](https://github.com/IgnaceMaes/ember-phosphor-icons) ▲ Phosphor icons for Ember apps
+- [lucagoslar/phosphor-css](https://github.com/lucagoslar/phosphor-css) ▲ CSS wrapper for Phosphor SVG icons
+- [maful/ruby-phosphor-icons](https://github.com/maful/ruby-phosphor-icons) ▲ Phosphor icons for Ruby and Rails applications
+- [meadowsys/phosphor-svgs](https://github.com/meadowsys/phosphor-svgs) ▲ Phosphor icons as Rust string constants
+- [mwood/tamagui-phosphor-icons](https://github.com/mwood23/tamagui-phosphor-icons) ▲ Phosphor icons for Tamagui
+- [oyedejioyewole/nuxt-phosphor-icons](https://github.com/oyedejioyewole/nuxt-phosphor-icons) ▲ Phosphor icons integration for Nuxt
+- [pepaslabs/phosphor-uikit](https://github.com/pepaslabs/phosphor-uikit) ▲ Xcode asset catalog generator for Swift/UIKit
+- [raycast/phosphor-icons](https://www.raycast.com/marinsokol/phosphor-icons) ▲ Phosphor icons Raycast extension
+- [reatlat/eleventy-plugin-phosphoricons](https://github.com/reatlat/eleventy-plugin-phosphoricons) ▲ An Eleventy shortcode plugin to embed icons as inline SVGs
+- [robruiz/wordpress-phosphor-icons-block](https://github.com/robruiz/phosphor-icons-block) ▲ Phosphor icon block for use in WordPress v5.8+
+- [sachaw/solid-phosphor](https://github.com/sachaw/solid-phosphor) ▲ Phosphor icons for SolidJS
+- [SeanMcP/phosphor-astro](https://github.com/SeanMcP/phosphor-astro) ▲ Phosphor icons as Astro components
+- [SorenHolstHansen/phosphor-leptos](https://github.com/SorenHolstHansen/phosphor-leptos) ▲ Phosphor icon component library for Leptos apps (rust)
+- [vnphanquang/phosphor-icons-tailwindcss](https://github.com/vnphanquang/phosphor-icons-tailwindcss) ▲ TailwindCSS plugin for Phosphor icons
 - [wireui/phosphoricons](https://github.com/wireui/phosphoricons) ▲ Phosphor icons for Laravel
-- [phosphor-css](https://github.com/lucagoslar/phosphor-css) ▲ CSS wrapper for Phosphor SVG icons
-- [ruby-phosphor-icons](https://github.com/maful/ruby-phosphor-icons) ▲ Phosphor icons for Ruby and Rails applications
-- [eleventy-plugin-phosphoricons](https://github.com/reatlat/eleventy-plugin-phosphoricons) ▲ An Eleventy plugin for add shortcode, allows Phosphor icons to be embedded as inline svg into templates
-- [phosphor-leptos](https://github.com/SorenHolstHansen/phosphor-leptos) ▲ Phosphor icon component library for Leptos apps (rust)
-- [wordpress-phosphor-icons-block](https://github.com/robruiz/phosphor-icons-block) ▲ Phosphor icon block for use in WordPress v5.8+
-- [ember-phosphor-icons](https://github.com/IgnaceMaes/ember-phosphor-icons) ▲ Phosphor icons for Ember apps
 
 If you've made a port of Phosphor and you want to see it here, just open a PR [here](https://github.com/phosphor-icons/homepage)!
 
 ## License
 
 MIT © [Phosphor Icons](https://github.com/phosphor-icons)
-
+<!-- END_LINKS -->

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phosphor-icons/homepage",
-  "version": "2.0.6",
+  "version": "2.1.1",
   "license": "MIT",
   "homepage": "https://phosphoricons.com",
   "author": {
@@ -20,12 +20,14 @@
   ],
   "repository": "github:phosphor-icons/homepage",
   "private": true,
+  "packageManager": "pnpm@9",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,json,vue}\"",
-    "generate": "tsx scripts/generate.ts"
+    "generate": "tsx scripts/generate.ts",
+    "sync-docs": "tsx scripts/sync-docs.ts"
   },
   "dependencies": {
     "@phosphor-icons/core": "^2.1.1",

scripts/sync-docs.ts

@@ -0,0 +1,72 @@
+import fs from "node:fs";
+import path from "node:path";
+
+const README_PATH = "README.md";
+const FUNDING_PATH = ".github/FUNDING.yaml";
+const LOGO_PATH = ".github/logo.png";
+
+const SYNC_SECTIONS = ["LOGO", "OVERVIEW", "LINKS"];
+const SYNC_FILES: Array<string | Array<string>> = [
+  [FUNDING_PATH, ".github/FUNDING.yml"],
+  [LOGO_PATH, "meta"],
+]; // These files will be replaced in the target repository
+
+(function main() {
+  const targetRepo = process.argv[process.argv.length - 1];
+  if (!targetRepo) throw new Error("Target repository not provided");
+
+  const readmePath = path.resolve(__dirname, `../${README_PATH}`);
+  const readmeContent = fs.readFileSync(readmePath, "utf8");
+
+  const targetReadmePath = path.resolve(__dirname, `../../${targetRepo}/${README_PATH}`);
+  if (!fs.existsSync(targetReadmePath)) throw new Error(`README.md not found in ${targetRepo}`);
+
+  for (const section of SYNC_SECTIONS) {
+    const readmeSection = extractSection(readmeContent, section);
+    if (readmeSection) {
+      const targetReadmeContent = fs.readFileSync(targetReadmePath, "utf8");
+      const updatedDocsContent = updateSection(targetReadmeContent, section, readmeSection);
+      fs.writeFileSync(targetReadmePath, updatedDocsContent);
+    }
+  }
+
+  for (const file of SYNC_FILES) {
+    const fileName = Array.isArray(file) ? file[0] : file;
+    const filePath = path.resolve(__dirname, `../${fileName}`);
+    const fileContent = fs.readFileSync(filePath);
+
+    // If target file has aliases, remove them
+    if (Array.isArray(file)) {
+      for (const alias of file) {
+        const targetPath = path.resolve(__dirname, `../../${targetRepo}/${alias}`);
+        if (fs.existsSync(targetPath)) {
+          fs.rmSync(targetPath, { recursive: true });
+        }
+      }
+    }
+
+    // Write the target file and intermediate directories, or overwrite if it already exists
+    const targetPath = path.resolve(__dirname, `../../${targetRepo}/${fileName}`);
+    if (!fs.existsSync(path.dirname(targetPath))) {
+      fs.mkdirSync(path.dirname(targetPath), { recursive: true });
+    }
+    fs.writeFileSync(targetPath, fileContent);
+  }
+})();
+
+function extractSection(content: string, section: string) {
+  const pattern = new RegExp(
+    `<!-- BEGIN_${section} -->\n([\\s\\S]*)\n<!-- END_${section} -->`,
+    "g",
+  );
+  const match = pattern.exec(content);
+  return match?.[1];
+}
+
+function updateSection(content: string, section: string, newContent: string) {
+  const pattern = new RegExp(
+    `<!-- BEGIN_${section} -->\n([\\s\\S]*)\n<!-- END_${section} -->`,
+    "g",
+  );
+  return content.replace(pattern, `<!-- BEGIN_${section} -->\n${newContent}\n<!-- END_${section} -->`);
+}

src/components/App/App.css

@@ -48,6 +48,10 @@ body {
   background-color: var(--acid);
 }
 
+::-moz-color-swatch {
+  border: none;
+}
+
 h2 {
   font-weight: 400;
 }

src/components/Footer/Footer.tsx

@@ -65,6 +65,14 @@ const Footer = (_: FooterProps) => {
               AllTrails
             </a>
             ,{" "}
+            <a className="main-link" href="https://www.anthropic.com">
+              Anthropic
+            </a>
+            ,{" "}
+            <a className="main-link" href="https://www.babbel.com/">
+              Babbel
+            </a>
+            ,{" "}
             <a
               className="main-link"
               href="https://www.dive.club/course/figma-academy"
@@ -76,8 +84,8 @@ const Footer = (_: FooterProps) => {
               Framer
             </a>
             ,{" "}
-            <a className="main-link" href="https://www.outgo.co/">
+            <a className="main-link" href="https://www.khanacademy.org/">
-              Outgo
+              Khan Academy
             </a>
             ,{" "}
             <a

src/components/Header/Header.tsx

@@ -60,6 +60,10 @@ const Header = (_: HeaderProps) => {
               We are now processing donations via{" "}
               <a href="https://www.buymeacoffee.com/phosphoricons">
                 Buy Me a Coffee
+              </a>{" "}
+              and{" "}
+              <a href="https://ko-fi.com/phosphoricons">
+                Ko-fi
               </a>
               ! Your one-time or recurring contribution does a lot to keep us
               going. Please show us some support if you can!

src/components/IconGrid/IconGrid.css

@@ -16,6 +16,8 @@
 
 .grid-item {
   display: flex;
+  appearance: none;
+  background: transparent;
   box-sizing: border-box;
   width: 160px;
   height: 160px;

src/components/IconGrid/IconGridItem.tsx

@@ -68,11 +68,10 @@ const IconGridItem = (props: IconGridItemProps) => {
   }, [originOffset]);
 
   return (
-    <motion.div
+    <motion.button
       className="grid-item"
       key={name}
       ref={ref}
-      tabIndex={0}
       style={{
         ...style,
         backgroundColor: isOpen ? "var(--background-layer)" : undefined,
@@ -80,7 +79,6 @@ const IconGridItem = (props: IconGridItemProps) => {
       custom={delayRef}
       transition={transition}
       variants={itemVariants}
-      onKeyPress={(e) => e.key === "Enter" && handleOpen()}
       onClick={handleOpen}
     >
       <Icon />
@@ -89,7 +87,7 @@ const IconGridItem = (props: IconGridItemProps) => {
         {isNew && <span className="badge new">•</span>}
         {isUpdated && <span className="badge updated">•</span>}
       </p>
-    </motion.div>
+    </motion.button>
   );
 };
 

src/components/Links/Links.tsx

@@ -14,7 +14,7 @@ const Links = (_: LinksProps) => {
         <ArrowElbowDownRight size={24} />
         <OutboundLink
           className="nav-link"
-          href="https://phosphoricons.com/assets/phosphor-icons.zip"
+          href="/assets/phosphor-icons.zip"
           eventLabel="Download all"
           download
           type="application/zip"
@@ -45,7 +45,7 @@ const Links = (_: LinksProps) => {
       <div>
         <ArrowElbowDownRight size={24} />
         <OutboundLink
-          href="https://phosphoricons.com/assets/phosphor-icons.sketchplugin.zip"
+          href="/assets/phosphor-icons.sketchplugin.zip"
           eventLabel="Download sketch plugin"
           download
           type="application/zip"