diff --git a/.github/files/lint-project-structure.sh b/.github/files/lint-project-structure.sh index 2eed5522e096d..6aed629c955f8 100755 --- a/.github/files/lint-project-structure.sh +++ b/.github/files/lint-project-structure.sh @@ -1,4 +1,4 @@ -#!/bin/bash +#!/usr/bin/env bash set -eo pipefail shopt -s dotglob diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 797a52ee82ae7..78a8e982e2a03 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -319,8 +319,8 @@ importers: specifier: 2.0.5 version: 2.0.5(@babel/runtime@7.24.0)(react@18.3.1) social-logos: - specifier: 2.5.9 - version: 2.5.9(react@18.3.1) + specifier: workspace:* + version: link:../social-logos uplot: specifier: 1.6.24 version: 1.6.24 @@ -1217,6 +1217,37 @@ importers: specifier: 18.3.1 version: 18.3.1(react@18.3.1) + projects/js-packages/social-logos: + dependencies: + prop-types: + specifier: ^15.8.1 + version: 15.8.1 + react: + specifier: 18.3.1 + version: 18.3.1 + react-dom: + specifier: 18.3.1 + version: 18.3.1(react@18.3.1) + devDependencies: + svg2ttf: + specifier: ^6.0.3 + version: 6.0.3 + svgicons2svgfont: + specifier: ^12.0.0 + version: 12.0.0 + svgo: + specifier: ^3.3.2 + version: 3.3.2 + svgstore-cli: + specifier: ^2.0.1 + version: 2.0.1 + wawoff2: + specifier: ^2.0.1 + version: 2.0.1 + xml2js: + specifier: ^0.6.2 + version: 0.6.2 + projects/js-packages/storybook: dependencies: '@wordpress/api-fetch': @@ -3663,8 +3694,8 @@ importers: specifier: 7.5.2 version: 7.5.2 social-logos: - specifier: 2.5.9 - version: 2.5.9(react@18.3.1) + specifier: workspace:* + version: link:../../js-packages/social-logos swiper: specifier: 6.7.0 version: 6.7.0 @@ -11917,6 +11948,11 @@ packages: dependencies: '@babel/runtime': 7.24.0 + /@xmldom/xmldom@0.7.13: + resolution: {integrity: sha512-lm2GW5PkosIzccsaZIz7tp8cPADSIlIHWDFTR1N0SzfinhhYgeIQjFMz4rYzanCScr3DqQLeomUDArp6MWKm+g==} + engines: {node: '>=10.0.0'} + dev: true + /@xtuc/ieee754@1.2.0: resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==} @@ -12955,6 +12991,16 @@ packages: resolution: {integrity: sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA==} dev: false + /cheerio-select@1.6.0: + resolution: {integrity: sha512-eq0GdBvxVFbqWgmCm7M3XGs1I8oLy/nExUnh6oLqmBditPO9AqQJrkslDpMun/hZ0yyTs8L0m85OHp4ho6Qm9g==} + dependencies: + css-select: 4.3.0 + css-what: 6.1.0 + domelementtype: 2.3.0 + domhandler: 4.3.1 + domutils: 2.8.0 + dev: true + /cheerio-select@2.1.0: resolution: {integrity: sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==} dependencies: @@ -12966,6 +13012,19 @@ packages: domutils: 3.1.0 dev: true + /cheerio@1.0.0-rc.10: + resolution: {integrity: sha512-g0J0q/O6mW8z5zxQ3A8E8J1hUgp4SMOvEoW/x84OwyHKe/Zccz83PVT4y5Crcr530FV6NgmKI1qvGTKVl9XXVw==} + engines: {node: '>= 6'} + dependencies: + cheerio-select: 1.6.0 + dom-serializer: 1.4.1 + domhandler: 4.3.1 + htmlparser2: 6.1.0 + parse5: 6.0.1 + parse5-htmlparser2-tree-adapter: 6.0.1 + tslib: 2.5.0 + dev: true + /cheerio@1.0.0-rc.12: resolution: {integrity: sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==} engines: {node: '>= 6'} @@ -13714,6 +13773,10 @@ packages: /csstype@3.1.3: resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==} + /cubic2quad@1.2.1: + resolution: {integrity: sha512-wT5Y7mO8abrV16gnssKdmIhIbA9wSkeMzhh27jAguKrV82i24wER0vL5TGhUJ9dbJNDcigoRZ0IAHFEEEI4THQ==} + dev: true + /custom-error-instance@2.1.1: resolution: {integrity: sha512-p6JFxJc3M4OTD2li2qaHkDCw9SfMw82Ldr6OC9Je1aXiGfhx2W8p3GaoeaGrPJTUN9NirTM/KTxHWMUdR1rsUg==} dev: false @@ -15842,6 +15905,17 @@ packages: once: 1.4.0 path-is-absolute: 1.0.1 + /glob@7.2.3: + resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} + dependencies: + fs.realpath: 1.0.0 + inflight: 1.0.6 + inherits: 2.0.4 + minimatch: 3.1.2 + once: 1.4.0 + path-is-absolute: 1.0.1 + dev: true + /glob@8.0.3: resolution: {integrity: sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==} engines: {node: '>=12'} @@ -18314,6 +18388,10 @@ packages: engines: {node: '>= 0.6'} dev: true + /microbuffer@1.0.0: + resolution: {integrity: sha512-O/SUXauVN4x6RaEJFqSPcXNtLFL+QzJHKZlyDVYFwcDDRVca3Fa/37QXXC+4zAGGa4YhHrHxKXuuHvLDIQECtA==} + dev: true + /micromark-core-commonmark@2.0.1: resolution: {integrity: sha512-CUQyKr1e///ZODyD1U3xit6zXwy1a8q2a1S1HKtIlmgvurrEpaw/Y9y6KSIbF8P59cn/NjzHyO+Q2fAyYLQrAA==} dependencies: @@ -19263,6 +19341,12 @@ packages: engines: {node: '>=0.10.0'} dev: true + /parse5-htmlparser2-tree-adapter@6.0.1: + resolution: {integrity: sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==} + dependencies: + parse5: 6.0.1 + dev: true + /parse5-htmlparser2-tree-adapter@7.0.0: resolution: {integrity: sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==} dependencies: @@ -19270,6 +19354,10 @@ packages: parse5: 7.1.2 dev: true + /parse5@6.0.1: + resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==} + dev: true + /parse5@7.1.2: resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==} dependencies: @@ -21202,6 +21290,10 @@ packages: immutable: 4.3.6 source-map-js: 1.2.0 + /sax@1.3.0: + resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==} + dev: true + /saxes@6.0.0: resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==} engines: {node: '>=v12.22.7'} @@ -21456,15 +21548,6 @@ packages: dot-case: 3.0.4 tslib: 2.5.0 - /social-logos@2.5.9(react@18.3.1): - resolution: {integrity: sha512-Wvrwqylbe1wDn/Nr8Se7vmgEKYeKPY3DDEinhPyWQkc30brA/ECX0i/DgPL/4HQxQr5Iel14D0pzF8xq4gi+Vg==} - peerDependencies: - react: 15 - 18 - dependencies: - prop-types: 15.8.1 - react: 18.3.1 - dev: false - /sorcery@0.11.0: resolution: {integrity: sha512-J69LQ22xrQB1cIFJhPfgtLuI6BpWRiWu1Y3vSsIwK/eAScqJxd/+CJlUuHQRdX2C9NGFamq+KqNywGgaThwfHw==} hasBin: true @@ -21980,6 +22063,34 @@ packages: resolution: {integrity: sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==} dev: true + /svg-pathdata@6.0.3: + resolution: {integrity: sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==} + engines: {node: '>=12.0.0'} + dev: true + + /svg2ttf@6.0.3: + resolution: {integrity: sha512-CgqMyZrbOPpc+WqH7aga4JWkDPso23EgypLsbQ6gN3uoPWwwiLjXvzgrwGADBExvCRJrWFzAeK1bSoSpE7ixSQ==} + hasBin: true + dependencies: + '@xmldom/xmldom': 0.7.13 + argparse: 2.0.1 + cubic2quad: 1.2.1 + lodash: 4.17.21 + microbuffer: 1.0.0 + svgpath: 2.6.0 + dev: true + + /svgicons2svgfont@12.0.0: + resolution: {integrity: sha512-fjyDkhiG0M1TPBtZzD12QV3yDcG2fUgiqHPOCYzf7hHE40Hl3GhnE6P1njsJCCByhwM7MiufyDW3L7IOR5dg9w==} + engines: {node: '>=16.15.0'} + hasBin: true + dependencies: + commander: 9.3.0 + glob: 8.1.0 + sax: 1.3.0 + svg-pathdata: 6.0.3 + dev: true + /svgo@3.3.2: resolution: {integrity: sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==} engines: {node: '>=14.0.0'} @@ -21993,6 +22104,26 @@ packages: csso: 5.0.5 picocolors: 1.0.1 + /svgpath@2.6.0: + resolution: {integrity: sha512-OIWR6bKzXvdXYyO4DK/UWa1VA1JeKq8E+0ug2DG98Y/vOmMpfZNj+TIG988HjfYSqtcy/hFOtZq/n/j5GSESNg==} + dev: true + + /svgstore-cli@2.0.1: + resolution: {integrity: sha512-CnqgjG/eRoeNc4B064mDw8a2QN81SKgIifB+A5OGwVYi62hC4pZauuyIKk+9yYgk4+vA5Oxu6EzXrXmzhlxQhw==} + hasBin: true + dependencies: + glob: 7.2.3 + svgstore: 3.0.1 + yargs-parser: 20.2.9 + dev: true + + /svgstore@3.0.1: + resolution: {integrity: sha512-nL6WTxYnsVl3e0G/mwGEFSnPAWUrzIwHAPOwInD4QUuLDKxaKMnXduf0Ipw3m/g9AldPhp1Y8E/nkReFBukJrA==} + engines: {node: '>= 12'} + dependencies: + cheerio: 1.0.0-rc.10 + dev: true + /swiper@6.7.0: resolution: {integrity: sha512-zCfvWn7H7mCq7jgVurckhAwkjPUeMCkdC4rA7lagvaD3mIrNhKiaYYo2+nkxMVpiaWuCQ38e44Mya/dKb7HpyQ==} engines: {node: '>= 4.7.0'} @@ -22884,6 +23015,13 @@ packages: glob-to-regexp: 0.4.1 graceful-fs: 4.2.11 + /wawoff2@2.0.1: + resolution: {integrity: sha512-r0CEmvpH63r4T15ebFqeOjGqU4+EgTx4I510NtK35EMciSdcTxCw3Byy3JnBonz7iyIFZ0AbVo0bbFpEVuhCYA==} + hasBin: true + dependencies: + argparse: 2.0.1 + dev: true + /wcwidth@1.0.1: resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==} dependencies: @@ -23290,10 +23428,23 @@ packages: resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==} engines: {node: '>=12'} + /xml2js@0.6.2: + resolution: {integrity: sha512-T4rieHaC1EXcES0Kxxj4JWgaUQHDk+qwHcYOCFHfiwKz7tOVPLq7Hjq9dM1WCMhylqMEfP7hMcOIChvotiZegA==} + engines: {node: '>=4.0.0'} + dependencies: + sax: 1.3.0 + xmlbuilder: 11.0.1 + dev: true + /xml@1.0.1: resolution: {integrity: sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw==} dev: true + /xmlbuilder@11.0.1: + resolution: {integrity: sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==} + engines: {node: '>=4.0'} + dev: true + /xmlchars@2.2.0: resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==} @@ -23374,6 +23525,11 @@ packages: decamelize: 1.2.0 dev: true + /yargs-parser@20.2.9: + resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==} + engines: {node: '>=10'} + dev: true + /yargs-parser@21.1.1: resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==} engines: {node: '>=12'} diff --git a/projects/js-packages/components/changelog/add-social_logos_to_monorepo b/projects/js-packages/components/changelog/add-social_logos_to_monorepo new file mode 100644 index 0000000000000..c47cb18e82997 --- /dev/null +++ b/projects/js-packages/components/changelog/add-social_logos_to_monorepo @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Updated package dependencies. diff --git a/projects/js-packages/components/package.json b/projects/js-packages/components/package.json index 9841cf6c639d4..d9c656454c456 100644 --- a/projects/js-packages/components/package.json +++ b/projects/js-packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@automattic/jetpack-components", - "version": "0.53.4", + "version": "0.53.5-alpha", "description": "Jetpack Components Package", "author": "Automattic", "license": "GPL-2.0-or-later", @@ -30,7 +30,7 @@ "prop-types": "^15.7.2", "qrcode.react": "3.1.0", "react-slider": "2.0.5", - "social-logos": "2.5.9", + "social-logos": "workspace:*", "uplot": "1.6.24", "uplot-react": "1.1.4" }, diff --git a/projects/js-packages/social-logos/.eslintignore b/projects/js-packages/social-logos/.eslintignore new file mode 100644 index 0000000000000..ace83c4d9a379 --- /dev/null +++ b/projects/js-packages/social-logos/.eslintignore @@ -0,0 +1 @@ +src/react/social-logo-data.jsx diff --git a/projects/js-packages/social-logos/.gitattributes b/projects/js-packages/social-logos/.gitattributes new file mode 100644 index 0000000000000..cc44d22c2260d --- /dev/null +++ b/projects/js-packages/social-logos/.gitattributes @@ -0,0 +1,18 @@ +# Files not needed to be distributed in the package. +.gitattributes export-ignore +node_modules export-ignore + +# Files to include in the mirror repo, but excluded via gitignore +# Remember to end all directories with `/**` to properly tag every file. +/build/** production-include + +# Files to exclude from the mirror repo +/build/svg-clean/** production-exclude +/changelog/** production-exclude +/.eslintignore production-exclude +/.eslintrc.cjs production-exclude +/jest.config.cjs production-exclude +**/stories/** production-exclude +/src/** production-exclude +/tests/** production-exclude +/tools/** production-exclude diff --git a/projects/js-packages/social-logos/.gitignore b/projects/js-packages/social-logos/.gitignore new file mode 100644 index 0000000000000..3eebe7b0d4ff8 --- /dev/null +++ b/projects/js-packages/social-logos/.gitignore @@ -0,0 +1,3 @@ +vendor/ +node_modules/ +build/ diff --git a/projects/js-packages/social-logos/CHANGELOG.md b/projects/js-packages/social-logos/CHANGELOG.md new file mode 100644 index 0000000000000..6ed63d5e96dcf --- /dev/null +++ b/projects/js-packages/social-logos/CHANGELOG.md @@ -0,0 +1,54 @@ +## 2.5.9 - 2024-03-05 +* Added SMS icon. + +## 2.5.8 - 2023-12-20 +* Added Bluesky icon. + +## 2.5.7 - 2023-12-11 +* Updated Patreon icon. + +## 2.5.6 - 2023-10-13 +* Updated X icon. +* Removed unnecessary aria label attributes from Threads and X SVGs. + +## 2.5.5 - 2023-09-15 +* Added X icon. + +## 2.5.4 - 2023-07-10 +* Added Threads icon. + +## 2.5.3 - 2023-06-15 +* Added Fediverse icon. +* Added Nextdoor icon. +* Updated dev dependencies and build tools. +* Updated icon font. + +## 2.5.2 - 2023-02-01 +* Added Mastodon icon. + +## 2.5.1 - 2023-01-13 +* React 18 support + +## 2.5.0 - 2022-02-01 +* Added copy post url button. + +## 2.4.0 - 2021-09-01 +* Updated icons: `medium`, `facebook` +* React 17 support +* Update dev dependencies and build tools. + +## 2.3.0 - 2021-01-27 +* New icons: `medium-alt`, `tiktok`, and `tiktok-alt`. +* Updated icon: `medium`. + +## 2.2.0 - 2021-01-19 +* New icon: `patreon`. + +## 2.1.2 - 2020-03-12 +* Built the package with updated dependencies. + +## 2.1.1 - 2020-03-10 +* Build: fixed the bug where the React component would render no icon at all (despite properly passed properties). + +## 2.1.0 - 2018-01-31 +* Build: refactored (aligned build system with Gridicons). diff --git a/projects/js-packages/social-logos/README.md b/projects/js-packages/social-logos/README.md new file mode 100644 index 0000000000000..f5e02803392d2 --- /dev/null +++ b/projects/js-packages/social-logos/README.md @@ -0,0 +1,66 @@ +# Social Logos +A repository of all the social logos used on WordPress.com. + +Each logo was pulled from the official branding resource of each service. Branding guidelines were adhered to as much as possible. + +Some logos include an official alternate version, if it's provided by the guideline resource. Sometimes it is desirable to have a visually consistent row of icons, all enclosed with the same shape. If the guidelines permit it, then an alternate version was created with a 18dp square or 20dp circle. + +For example, the Tumblr guidelines state that it's ok to enclose the logo in any shape, so there's an alternate logo with an 18dp square. + +Official guideline resources: + +- Facebook: https://www.facebookbrand.com +- Twitter: https://about.twitter.com/company/brand-assets +- Instagram: https://www.instagram-brand.com +- LinkedIn: https://brand.linkedin.com +- Google+: https://developers.google.com/+/branding-guidelines and http://gplus-brand.appspot.com +- Pinterest: https://business.pinterest.com/en/brand-guidelines +- Squarespace: http://www.squarespace.com/brand-guidelines/ +- reddit: https://www.reddit.com/about/alien/ +- Mastodon: https://joinmastodon.org/branding +- Fediverse: https://commons.wikimedia.org/wiki/File:Fediverse_logo_proposal.svg +- Nextdoor: https://about.nextdoor.com/gb/media/ +- http://findguidelin.es +- Threads: https://en.wikipedia.org/wiki/File:Threads_(app)_logo.svg +- X: https://about.twitter.com/en/who-we-are/brand-toolkit + +## Using the SocialLogo component in your project: + +Note that this component requires [react](https://www.npmjs.com/package/react) to be installed in your project. + +SocialLogo renders a single social-logo svg based on an `icon` prop. It takes a size property but defaults to 24px. For greater sharpness, the icons should only be shown at either 18px, 24px, 36px or 48px. + +There's a gallery with all the available icons in https://wpcalypso.wordpress.com/devdocs/design/social-logo. + +``` +npm install social-logos --save +``` +#### Usage + +``` +import SocialLogo from 'social-logos'; +function MyComponent() { + return ; +} +``` + +#### Props + +* `icon`: String - the icon name. +* `size`: Number - (default: 24) set the size of the icon. +* `onClick`: Function - (optional) if you need a click callback. + +## Notes & Pixel Grid + +The icon grid is based on [Gridicons](https://github.com/Automattic/gridicons) and adheres to the same rules. That is to say, the set is designed on a 24px base grid. That means logos will look their sharpest and crispest when SVGs are inserted with 24px width/height, or the icon font is used at `font-size: 24px;`. + +Logos will also scale well to other sizes, like 18px (75% size), or 36px (150% size). Normally, using icon-sets outside of their pixelgrid is a surefire way to get fuzzy icons. This is also true in the case of this logo set, however unlike custom-designed icons, this is almost unavoidable in the case of logos. The problem is, every single logo is designed with its own dimensions. If we are to respect branding guidelines (which we should), no hinting or pixel-tuning is applied to any logo added to this set. Which means even at the base 24px size, logos could appear fuzzy and less than optimal. That is the way of the world, and a tradeoff between flexibility and respecting the original logo design on one hand, and pixel-perfect logos on the other hand. + +So to summarize: + +- **Do** use Social Logos at 48px, 36px, 24px, 18px, 12px. Prioritize 24px or above if you can. +- **Try to avoid** using Social logos at 16px, 17px, or any arbitrary pixel-size that's incompatible with the base 24px grid. For example, don't size the icon font in EMs. + +## License + +Social Logos is licensed under [GNU General Public License v2 (or later)](./LICENSE.txt). diff --git a/projects/js-packages/social-logos/changelog/.gitkeep b/projects/js-packages/social-logos/changelog/.gitkeep new file mode 100644 index 0000000000000..e69de29bb2d1d diff --git a/projects/js-packages/social-logos/changelog/add-social_logos_to_monorepo b/projects/js-packages/social-logos/changelog/add-social_logos_to_monorepo new file mode 100644 index 0000000000000..41dc1caa34bc1 --- /dev/null +++ b/projects/js-packages/social-logos/changelog/add-social_logos_to_monorepo @@ -0,0 +1,4 @@ +Significance: major +Type: added + +Social Logos is now developed in the [Jetpack monorepo](https://github.com/Automattic/jetpack). diff --git a/projects/js-packages/social-logos/changelog/add-social_logos_to_monorepo2 b/projects/js-packages/social-logos/changelog/add-social_logos_to_monorepo2 new file mode 100644 index 0000000000000..118ae3e262d54 --- /dev/null +++ b/projects/js-packages/social-logos/changelog/add-social_logos_to_monorepo2 @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Cleaned up outdated and irrelevant documentation. diff --git a/projects/js-packages/social-logos/changelog/add-social_logos_to_monorepo3 b/projects/js-packages/social-logos/changelog/add-social_logos_to_monorepo3 new file mode 100644 index 0000000000000..b2afb4f66ebb2 --- /dev/null +++ b/projects/js-packages/social-logos/changelog/add-social_logos_to_monorepo3 @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Rewrote build system. diff --git a/projects/js-packages/social-logos/changelog/add-social_logos_to_monorepo4 b/projects/js-packages/social-logos/changelog/add-social_logos_to_monorepo4 new file mode 100644 index 0000000000000..19f11b033748f --- /dev/null +++ b/projects/js-packages/social-logos/changelog/add-social_logos_to_monorepo4 @@ -0,0 +1,4 @@ +Significance: patch +Type: added + +CSS file with encoded inline font is now automatically generated. diff --git a/projects/js-packages/social-logos/changelog/add-social_logos_to_monorepo5 b/projects/js-packages/social-logos/changelog/add-social_logos_to_monorepo5 new file mode 100644 index 0000000000000..8310e23908032 --- /dev/null +++ b/projects/js-packages/social-logos/changelog/add-social_logos_to_monorepo5 @@ -0,0 +1,4 @@ +Significance: major +Type: removed + +PDF file is no longer built. diff --git a/projects/js-packages/social-logos/changelog/add-social_logos_to_monorepo6 b/projects/js-packages/social-logos/changelog/add-social_logos_to_monorepo6 new file mode 100644 index 0000000000000..9be4c1970090e --- /dev/null +++ b/projects/js-packages/social-logos/changelog/add-social_logos_to_monorepo6 @@ -0,0 +1,4 @@ +Significance: major +Type: removed + +TTF font file is no longer built. diff --git a/projects/js-packages/social-logos/changelog/add-social_logos_to_monorepo7 b/projects/js-packages/social-logos/changelog/add-social_logos_to_monorepo7 new file mode 100644 index 0000000000000..be20661d30f51 --- /dev/null +++ b/projects/js-packages/social-logos/changelog/add-social_logos_to_monorepo7 @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Social logo colors CSS file is now included in source files. diff --git a/projects/js-packages/social-logos/changelog/add-social_logos_to_monorepo8 b/projects/js-packages/social-logos/changelog/add-social_logos_to_monorepo8 new file mode 100644 index 0000000000000..7ede05c38bc74 --- /dev/null +++ b/projects/js-packages/social-logos/changelog/add-social_logos_to_monorepo8 @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Example files are rewritten. diff --git a/projects/js-packages/social-logos/composer.json b/projects/js-packages/social-logos/composer.json new file mode 100644 index 0000000000000..4ec48573a6627 --- /dev/null +++ b/projects/js-packages/social-logos/composer.json @@ -0,0 +1,35 @@ +{ + "name": "automattic/social-logos", + "description": "A repository of all the social logos used on WordPress.com.", + "type": "library", + "license": "GPL-2.0-or-later", + "require": {}, + "require-dev": { + "automattic/jetpack-changelogger": "@dev" + }, + "scripts": { + "build-development": "./tools/build", + "build-production": "./tools/build --prod" + }, + "repositories": [ + { + "type": "path", + "url": "../../packages/*", + "options": { + "monorepo": true + } + } + ], + "minimum-stability": "dev", + "prefer-stable": true, + "extra": { + "autorelease": true, + "autotagger": true, + "npmjs-autopublish": true, + "mirror-repo": "Automattic/social-logos", + "release-branch-prefix": "social-logos", + "changelogger": { + "link-template": "https://github.com/Automattic/social-logos/compare/v${old}...v${new}" + } + } +} diff --git a/projects/js-packages/social-logos/package.json b/projects/js-packages/social-logos/package.json new file mode 100644 index 0000000000000..8a794a6152990 --- /dev/null +++ b/projects/js-packages/social-logos/package.json @@ -0,0 +1,47 @@ +{ + "name": "social-logos", + "version": "3.0.0-alpha", + "description": "A repository of all the social logos used on WordPress.com.", + "homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/social-logos/", + "bugs": { + "url": "https://github.com/Automattic/jetpack/labels/[JS Package] Social Logos" + }, + "exports": { + ".": { + "jetpack:src": "./src/react/index.jsx", + "default": "./build/react/index.jsx" + }, + "./svg-sprite/social-logos.svg": { + "default": "./build/svg-sprite/social-logos.svg" + }, + "./font/*": { + "default": "./build/font/*" + } + }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "repository": { + "type": "git", + "url": "https://github.com/Automattic/jetpack.git", + "directory": "projects/js-packages/social-logos" + }, + "license": "GPL-2.0+", + "dependencies": { + "prop-types": "^15.8.1", + "react": "18.3.1", + "react-dom": "18.3.1" + }, + "devDependencies": { + "svg2ttf": "^6.0.3", + "svgicons2svgfont": "^12.0.0", + "svgo": "^3.3.2", + "svgstore-cli": "^2.0.1", + "wawoff2": "^2.0.1", + "xml2js": "^0.6.2" + }, + "scripts": { + "build": "./tools/build" + } +} diff --git a/projects/js-packages/social-logos/src/font/codepoints.json b/projects/js-packages/social-logos/src/font/codepoints.json new file mode 100644 index 0000000000000..5e9e049e1ba77 --- /dev/null +++ b/projects/js-packages/social-logos/src/font/codepoints.json @@ -0,0 +1,60 @@ +{ + "amazon": 62976, + "blogger-alt": 62977, + "blogger": 62978, + "codepen": 61974, + "digg": 61985, + "dribbble": 61953, + "dropbox": 61989, + "eventbrite": 62979, + "facebook": 61955, + "feed": 62483, + "flickr": 61969, + "foursquare": 61990, + "ghost": 63004, + "github": 61952, + "google-plus-alt": 61976, + "google-plus": 61958, + "instagram": 61973, + "linkedin": 61959, + "mail": 62480, + "medium": 63011, + "pinterest-alt": 61968, + "pinterest": 61961, + "pocket": 61988, + "polldaddy": 61975, + "print": 62569, + "reddit": 61986, + "share": 62485, + "skype": 61984, + "spotify": 62741, + "squarespace": 62981, + "stumbleupon": 61987, + "telegram": 62982, + "tumblr-alt": 62983, + "tumblr": 61972, + "twitch": 62742, + "twitter-alt": 61954, + "twitter": 62992, + "vimeo": 61970, + "whatsapp": 62984, + "wordpress": 61957, + "xanga": 62985, + "youtube": 61971, + "behance": 61697, + "google-alt": 61698, + "google": 61699, + "woocommerce": 61700, + "patreon": 61701, + "medium-alt": 61702, + "tiktok-alt": 61703, + "tiktok": 61704, + "link": 61705, + "mastodon": 61706, + "fediverse": 61707, + "nextdoor": 61708, + "threads": 61709, + "x": 61710, + "bluesky": 61711, + "sms": 61712 +} diff --git a/projects/js-packages/social-logos/src/react/example.css b/projects/js-packages/social-logos/src/react/example.css new file mode 100644 index 0000000000000..c08ffce4a4323 --- /dev/null +++ b/projects/js-packages/social-logos/src/react/example.css @@ -0,0 +1,135 @@ +html { + color: #767676; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; + line-height: 1.15; +} + +a:link, a:visited { + color: #999; +} + +a:active { + color: #1fc1ad; +} + +h1 { + text-align: center; + font-size: 24pt; +} + +.social-logos-example > p { + text-align: center; + margin-bottom: 2em; +} + +.social-logos-example { + max-width: 900px; + margin: 100px auto; +} + +[type=checkbox] { + margin: 0; +} + +.icons { + padding: 0 20px; + overflow: hidden; + margin-bottom: 50px; + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.icons div { + width: 64px; + height: 64px; + float: left; + padding: 6px 2px; + position: relative; + font-size: 7pt; + cursor: pointer; + text-align: center; +} + +.icons div p { + margin: 0; + color: #767676; + text-align: center; + overflow: hidden; + max-height: 2.2em; + word-break: break-word; +} + +.icons div p.is-hidden { + display: none; +} + + +.icons div:hover svg { + fill: #1fc1ad; +} + +.display-control-group { + display: flex; + justify-content: space-around; + margin-bottom: 20px; +} + +.display-control { + display: flex; +} + +.display-control h4 { + margin: 0 10px 0 0; +} + +.switch { + position: relative; + display: inline-block; + width: 40px; + height: 20px; +} + +.switch input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +.handle { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 2px solid gray; + border-radius: 10px; + transition: .4s; + box-sizing: border-box; +} + +.handle:before { + position: absolute; + content: ""; + height: 12px; + width: 12px; + left: 2px; + bottom: 2px; + background: gray; + border-radius: 50%; + transition: .4s; +} + +input:checked + .handle { + border-color: #3AA662; +} + +input:checked + .handle:before { + background: #3AA662; + transform: translateX(20px); +} + +input:focus + .handle { + box-shadow: 0 0 3px #2196F3; +} diff --git a/projects/js-packages/social-logos/src/react/example.jsx b/projects/js-packages/social-logos/src/react/example.jsx new file mode 100644 index 0000000000000..815faf04873da --- /dev/null +++ b/projects/js-packages/social-logos/src/react/example.jsx @@ -0,0 +1,74 @@ +import React, { useState } from 'react'; +import SocialLogo from './social-logo'; +import { SocialLogoData } from './social-logo-data'; +import './example.css'; + +/** + * An example React component that displays all the social logos. + * + * @returns {React.Component} The `SocialLogosExample` component. + */ +function SocialLogosExample() { + const [ useSmallIcons, setUseSmallIcons ] = useState( false ); + const [ showIconNames, setShowIconNames ] = useState( true ); + + const iconSize = useSmallIcons ? 24 : 48; + + const handleClick = name => { + const code = ``; + window.prompt( 'Copy component code:', code ); + }; + + const handleSmallIconsToggle = e => { + setUseSmallIcons( e.target.checked ); + }; + + const handleIconNamesToggle = e => { + setShowIconNames( e.target.checked ); + }; + + const allSocialLogos = SocialLogoData.map( logo => { + return ( +
+ + { showIconNames &&

{ logo.name }

} +
+ ); + } ); + + return ( +
+

Social Logos

+ +
+
+

Small icons

+ +
+
+

Icon names

+ +
+
+ +
{ allSocialLogos }
+ +

+ GitHub +

+
+ ); +} + +export default SocialLogosExample; diff --git a/projects/js-packages/social-logos/src/react/index.jsx b/projects/js-packages/social-logos/src/react/index.jsx new file mode 100644 index 0000000000000..e985e5c4a725f --- /dev/null +++ b/projects/js-packages/social-logos/src/react/index.jsx @@ -0,0 +1,5 @@ +/** + * Export components. + */ +export { default } from './social-logo'; +export { SocialLogoData } from './social-logo-data'; diff --git a/projects/js-packages/social-logos/src/react/social-logo-data.jsx b/projects/js-packages/social-logos/src/react/social-logo-data.jsx new file mode 100644 index 0000000000000..d67e43688295e --- /dev/null +++ b/projects/js-packages/social-logos/src/react/social-logo-data.jsx @@ -0,0 +1,231 @@ +/** This is a generated file. Do not edit. */ +export const SocialLogoData = [ + { + name: 'amazon', + svg: , + }, + { + name: 'behance', + svg: , + }, + { + name: 'blogger-alt', + svg: , + }, + { + name: 'blogger', + svg: , + }, + { + name: 'bluesky', + svg: , + }, + { + name: 'codepen', + svg: , + }, + { + name: 'dribbble', + svg: , + }, + { + name: 'dropbox', + svg: , + }, + { + name: 'eventbrite', + svg: , + }, + { + name: 'facebook', + svg: , + }, + { + name: 'fediverse', + svg: , + }, + { + name: 'feed', + svg: , + }, + { + name: 'flickr', + svg: , + }, + { + name: 'foursquare', + svg: , + }, + { + name: 'ghost', + svg: , + }, + { + name: 'github', + svg: , + }, + { + name: 'google-alt', + svg: , + }, + { + name: 'google-plus-alt', + svg: , + }, + { + name: 'google-plus', + svg: , + }, + { + name: 'google', + svg: , + }, + { + name: 'instagram', + svg: , + }, + { + name: 'link', + svg: , + }, + { + name: 'linkedin', + svg: , + }, + { + name: 'mail', + svg: , + }, + { + name: 'mastodon', + svg: , + }, + { + name: 'medium-alt', + svg: , + }, + { + name: 'medium', + svg: , + }, + { + name: 'nextdoor', + svg: , + }, + { + name: 'patreon', + svg: , + }, + { + name: 'pinterest-alt', + svg: , + }, + { + name: 'pinterest', + svg: , + }, + { + name: 'pocket', + svg: , + }, + { + name: 'polldaddy', + svg: , + }, + { + name: 'print', + svg: , + }, + { + name: 'reddit', + svg: , + }, + { + name: 'share', + svg: , + }, + { + name: 'skype', + svg: , + }, + { + name: 'sms', + svg: , + }, + { + name: 'spotify', + svg: , + }, + { + name: 'squarespace', + svg: , + }, + { + name: 'stumbleupon', + svg: , + }, + { + name: 'telegram', + svg: , + }, + { + name: 'threads', + svg: , + }, + { + name: 'tiktok-alt', + svg: , + }, + { + name: 'tiktok', + svg: , + }, + { + name: 'tumblr-alt', + svg: , + }, + { + name: 'tumblr', + svg: , + }, + { + name: 'twitch', + svg: , + }, + { + name: 'twitter-alt', + svg: , + }, + { + name: 'twitter', + svg: , + }, + { + name: 'vimeo', + svg: , + }, + { + name: 'whatsapp', + svg: , + }, + { + name: 'woocommerce', + svg: , + }, + { + name: 'wordpress', + svg: , + }, + { + name: 'x', + svg: , + }, + { + name: 'xanga', + svg: , + }, + { + name: 'youtube', + svg: , + }, +]; diff --git a/projects/js-packages/social-logos/src/react/social-logo.jsx b/projects/js-packages/social-logos/src/react/social-logo.jsx new file mode 100644 index 0000000000000..37f2ad5af4d75 --- /dev/null +++ b/projects/js-packages/social-logos/src/react/social-logo.jsx @@ -0,0 +1,39 @@ +import PropTypes from 'prop-types'; +import React, { PureComponent } from 'react'; +import { SocialLogoData } from './social-logo-data'; + +export default class SocialLogo extends PureComponent { + static defaultProps = { + size: 24, + }; + + static propTypes = { + icon: PropTypes.string.isRequired, + size: PropTypes.number, + onClick: PropTypes.func, + className: PropTypes.string, + }; + + render() { + const { size, onClick, icon, className, ...otherProps } = this.props; + + const iconClass = [ 'social-logo', 'social-logo-' + icon, className ] + .filter( Boolean ) + .join( ' ' ); + + const logoData = SocialLogoData.find( logo => logo.name === icon ); + + if ( ! logoData ) { + return ; + } + + const svg = React.cloneElement( logoData.svg, { + className: iconClass, + height: size, + width: size, + onClick: onClick, + ...otherProps, + } ); + return svg; + } +} diff --git a/projects/js-packages/social-logos/src/social-logo-colors.css b/projects/js-packages/social-logos/src/social-logo-colors.css new file mode 100644 index 0000000000000..210b92b3c55b3 --- /dev/null +++ b/projects/js-packages/social-logos/src/social-logo-colors.css @@ -0,0 +1,26 @@ +:root { + --color-blogger: #ff5722; + --color-eventbrite: #ff8000; + --color-facebook: #0866ff; + --color-godaddy: #5ea95a; + --color-google-plus: #df4a32; + --color-instagram: #d93174; + --color-linkedin: #0976b4; + --color-mastodon: #6364ff; + --color-medium: #12100e; + --color-nextdoor: #8ed500; + --color-pinterest: #cc2127; + --color-pocket: #ee4256; + --color-print: #f8f8f8; + --color-reddit: #5f99cf; + --color-skype: #00aff0; + --color-stumbleupon: #eb4924; + --color-substack: #ff6719; + --color-squarespace: #222; + --color-telegram: #08c; + --color-tumblr: #35465c; + --color-twitter: #55acee; + --color-whatsapp: #43d854; + --color-wix: #faad4d; + --color-x: #000; +} diff --git a/projects/js-packages/social-logos/src/svg-sprite/example.css b/projects/js-packages/social-logos/src/svg-sprite/example.css new file mode 100644 index 0000000000000..c08ffce4a4323 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg-sprite/example.css @@ -0,0 +1,135 @@ +html { + color: #767676; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; + line-height: 1.15; +} + +a:link, a:visited { + color: #999; +} + +a:active { + color: #1fc1ad; +} + +h1 { + text-align: center; + font-size: 24pt; +} + +.social-logos-example > p { + text-align: center; + margin-bottom: 2em; +} + +.social-logos-example { + max-width: 900px; + margin: 100px auto; +} + +[type=checkbox] { + margin: 0; +} + +.icons { + padding: 0 20px; + overflow: hidden; + margin-bottom: 50px; + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.icons div { + width: 64px; + height: 64px; + float: left; + padding: 6px 2px; + position: relative; + font-size: 7pt; + cursor: pointer; + text-align: center; +} + +.icons div p { + margin: 0; + color: #767676; + text-align: center; + overflow: hidden; + max-height: 2.2em; + word-break: break-word; +} + +.icons div p.is-hidden { + display: none; +} + + +.icons div:hover svg { + fill: #1fc1ad; +} + +.display-control-group { + display: flex; + justify-content: space-around; + margin-bottom: 20px; +} + +.display-control { + display: flex; +} + +.display-control h4 { + margin: 0 10px 0 0; +} + +.switch { + position: relative; + display: inline-block; + width: 40px; + height: 20px; +} + +.switch input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +.handle { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 2px solid gray; + border-radius: 10px; + transition: .4s; + box-sizing: border-box; +} + +.handle:before { + position: absolute; + content: ""; + height: 12px; + width: 12px; + left: 2px; + bottom: 2px; + background: gray; + border-radius: 50%; + transition: .4s; +} + +input:checked + .handle { + border-color: #3AA662; +} + +input:checked + .handle:before { + background: #3AA662; + transform: translateX(20px); +} + +input:focus + .handle { + box-shadow: 0 0 3px #2196F3; +} diff --git a/projects/js-packages/social-logos/src/svg-sprite/example.html b/projects/js-packages/social-logos/src/svg-sprite/example.html new file mode 100644 index 0000000000000..d405891a056f1 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg-sprite/example.html @@ -0,0 +1,78 @@ + + + +Social Logos + + + + + + + {{SVG_HERE}} + + + + diff --git a/projects/js-packages/social-logos/src/svg/amazon.svg b/projects/js-packages/social-logos/src/svg/amazon.svg new file mode 100644 index 0000000000000..179f48cf04734 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/amazon.svg @@ -0,0 +1,21 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/behance.svg b/projects/js-packages/social-logos/src/svg/behance.svg new file mode 100644 index 0000000000000..96fd6f206063d --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/behance.svg @@ -0,0 +1,26 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/blogger-alt.svg b/projects/js-packages/social-logos/src/svg/blogger-alt.svg new file mode 100644 index 0000000000000..0c962f42c5fb9 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/blogger-alt.svg @@ -0,0 +1,14 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/blogger.svg b/projects/js-packages/social-logos/src/svg/blogger.svg new file mode 100644 index 0000000000000..07047283865bf --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/blogger.svg @@ -0,0 +1,15 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/bluesky.svg b/projects/js-packages/social-logos/src/svg/bluesky.svg new file mode 100644 index 0000000000000..907311c2d9d00 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/bluesky.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/projects/js-packages/social-logos/src/svg/codepen.svg b/projects/js-packages/social-logos/src/svg/codepen.svg new file mode 100644 index 0000000000000..94fc6559f325b --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/codepen.svg @@ -0,0 +1,34 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/dribbble.svg b/projects/js-packages/social-logos/src/svg/dribbble.svg new file mode 100644 index 0000000000000..e69250660ac96 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/dribbble.svg @@ -0,0 +1,19 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/dropbox.svg b/projects/js-packages/social-logos/src/svg/dropbox.svg new file mode 100644 index 0000000000000..c92c58522af44 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/dropbox.svg @@ -0,0 +1,12 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/eventbrite.svg b/projects/js-packages/social-logos/src/svg/eventbrite.svg new file mode 100644 index 0000000000000..6440ffb305291 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/eventbrite.svg @@ -0,0 +1,21 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/facebook.svg b/projects/js-packages/social-logos/src/svg/facebook.svg new file mode 100644 index 0000000000000..3f8792f85c9ce --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/facebook.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/projects/js-packages/social-logos/src/svg/fediverse.svg b/projects/js-packages/social-logos/src/svg/fediverse.svg new file mode 100644 index 0000000000000..566e7da62e76f --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/fediverse.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/feed.svg b/projects/js-packages/social-logos/src/svg/feed.svg new file mode 100644 index 0000000000000..1c899bb366922 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/feed.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/flickr.svg b/projects/js-packages/social-logos/src/svg/flickr.svg new file mode 100644 index 0000000000000..ca4722afd0b32 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/flickr.svg @@ -0,0 +1,11 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/foursquare.svg b/projects/js-packages/social-logos/src/svg/foursquare.svg new file mode 100644 index 0000000000000..dd89e601e13ca --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/foursquare.svg @@ -0,0 +1,17 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/ghost.svg b/projects/js-packages/social-logos/src/svg/ghost.svg new file mode 100644 index 0000000000000..a55fcbd99cf56 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/ghost.svg @@ -0,0 +1,11 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/github.svg b/projects/js-packages/social-logos/src/svg/github.svg new file mode 100644 index 0000000000000..c975befe1f5fd --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/github.svg @@ -0,0 +1,17 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/google-alt.svg b/projects/js-packages/social-logos/src/svg/google-alt.svg new file mode 100644 index 0000000000000..1b73791e202e8 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/google-alt.svg @@ -0,0 +1,13 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/google-plus-alt.svg b/projects/js-packages/social-logos/src/svg/google-plus-alt.svg new file mode 100644 index 0000000000000..d4be85d01f0f8 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/google-plus-alt.svg @@ -0,0 +1,12 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/google-plus.svg b/projects/js-packages/social-logos/src/svg/google-plus.svg new file mode 100644 index 0000000000000..0e388c61cc30a --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/google-plus.svg @@ -0,0 +1,14 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/google.svg b/projects/js-packages/social-logos/src/svg/google.svg new file mode 100644 index 0000000000000..f5ccc51782e73 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/google.svg @@ -0,0 +1,12 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/instagram.svg b/projects/js-packages/social-logos/src/svg/instagram.svg new file mode 100644 index 0000000000000..0b6fb9d96a371 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/instagram.svg @@ -0,0 +1,27 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/link.svg b/projects/js-packages/social-logos/src/svg/link.svg new file mode 100644 index 0000000000000..f10afa09df4ed --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/link.svg @@ -0,0 +1,13 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/linkedin.svg b/projects/js-packages/social-logos/src/svg/linkedin.svg new file mode 100644 index 0000000000000..a75bc82d69b00 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/linkedin.svg @@ -0,0 +1,14 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/mail.svg b/projects/js-packages/social-logos/src/svg/mail.svg new file mode 100644 index 0000000000000..d287d4ce4e232 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/mail.svg @@ -0,0 +1,11 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/mastodon.svg b/projects/js-packages/social-logos/src/svg/mastodon.svg new file mode 100644 index 0000000000000..a4e7dd27645a1 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/mastodon.svg @@ -0,0 +1,6 @@ + + + + + diff --git a/projects/js-packages/social-logos/src/svg/medium-alt.svg b/projects/js-packages/social-logos/src/svg/medium-alt.svg new file mode 100644 index 0000000000000..4898f3565f002 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/medium-alt.svg @@ -0,0 +1,7 @@ + + + medium-alt + + + + \ No newline at end of file diff --git a/projects/js-packages/social-logos/src/svg/medium.svg b/projects/js-packages/social-logos/src/svg/medium.svg new file mode 100644 index 0000000000000..19cf83eb0b907 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/medium.svg @@ -0,0 +1,3 @@ + + + diff --git a/projects/js-packages/social-logos/src/svg/nextdoor.svg b/projects/js-packages/social-logos/src/svg/nextdoor.svg new file mode 100644 index 0000000000000..aa9b19e1bdfdf --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/nextdoor.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/patreon.svg b/projects/js-packages/social-logos/src/svg/patreon.svg new file mode 100644 index 0000000000000..283bd6801b061 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/patreon.svg @@ -0,0 +1,3 @@ + + + diff --git a/projects/js-packages/social-logos/src/svg/pinterest-alt.svg b/projects/js-packages/social-logos/src/svg/pinterest-alt.svg new file mode 100644 index 0000000000000..11dda7c40bf6a --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/pinterest-alt.svg @@ -0,0 +1,16 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/pinterest.svg b/projects/js-packages/social-logos/src/svg/pinterest.svg new file mode 100644 index 0000000000000..5bcd6b02ef5c5 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/pinterest.svg @@ -0,0 +1,17 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/pocket.svg b/projects/js-packages/social-logos/src/svg/pocket.svg new file mode 100644 index 0000000000000..fa20873e5a2ae --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/pocket.svg @@ -0,0 +1,17 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/polldaddy.svg b/projects/js-packages/social-logos/src/svg/polldaddy.svg new file mode 100644 index 0000000000000..7d081f51b0f39 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/polldaddy.svg @@ -0,0 +1,32 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/print.svg b/projects/js-packages/social-logos/src/svg/print.svg new file mode 100644 index 0000000000000..688539c01e570 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/print.svg @@ -0,0 +1,12 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/reddit.svg b/projects/js-packages/social-logos/src/svg/reddit.svg new file mode 100644 index 0000000000000..222c495009204 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/reddit.svg @@ -0,0 +1,26 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/share.svg b/projects/js-packages/social-logos/src/svg/share.svg new file mode 100644 index 0000000000000..055f7f8792c68 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/share.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/skype.svg b/projects/js-packages/social-logos/src/svg/skype.svg new file mode 100644 index 0000000000000..360d429ef14ac --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/skype.svg @@ -0,0 +1,27 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/sms.svg b/projects/js-packages/social-logos/src/svg/sms.svg new file mode 100644 index 0000000000000..c03c8eb7423e2 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/sms.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/projects/js-packages/social-logos/src/svg/spotify.svg b/projects/js-packages/social-logos/src/svg/spotify.svg new file mode 100644 index 0000000000000..908f5d491ee9b --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/spotify.svg @@ -0,0 +1,16 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/squarespace.svg b/projects/js-packages/social-logos/src/svg/squarespace.svg new file mode 100644 index 0000000000000..2af2fe5e526c9 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/squarespace.svg @@ -0,0 +1,19 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/stumbleupon.svg b/projects/js-packages/social-logos/src/svg/stumbleupon.svg new file mode 100644 index 0000000000000..faaba96d203f6 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/stumbleupon.svg @@ -0,0 +1,14 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/telegram.svg b/projects/js-packages/social-logos/src/svg/telegram.svg new file mode 100644 index 0000000000000..983ce801cea08 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/telegram.svg @@ -0,0 +1,13 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/threads.svg b/projects/js-packages/social-logos/src/svg/threads.svg new file mode 100644 index 0000000000000..947b8c7af288e --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/threads.svg @@ -0,0 +1,3 @@ + + + diff --git a/projects/js-packages/social-logos/src/svg/tiktok-alt.svg b/projects/js-packages/social-logos/src/svg/tiktok-alt.svg new file mode 100644 index 0000000000000..46d8d097471f7 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/tiktok-alt.svg @@ -0,0 +1,4 @@ + + + + diff --git a/projects/js-packages/social-logos/src/svg/tiktok.svg b/projects/js-packages/social-logos/src/svg/tiktok.svg new file mode 100644 index 0000000000000..85ca8271aa06b --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/tiktok.svg @@ -0,0 +1,3 @@ + + + diff --git a/projects/js-packages/social-logos/src/svg/tumblr-alt.svg b/projects/js-packages/social-logos/src/svg/tumblr-alt.svg new file mode 100644 index 0000000000000..5ec153afbf3c4 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/tumblr-alt.svg @@ -0,0 +1,12 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/tumblr.svg b/projects/js-packages/social-logos/src/svg/tumblr.svg new file mode 100644 index 0000000000000..df2cf1159b772 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/tumblr.svg @@ -0,0 +1,13 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/twitch.svg b/projects/js-packages/social-logos/src/svg/twitch.svg new file mode 100644 index 0000000000000..e649f4b5d3b8d --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/twitch.svg @@ -0,0 +1,11 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/twitter-alt.svg b/projects/js-packages/social-logos/src/svg/twitter-alt.svg new file mode 100644 index 0000000000000..e5e44fb1d9c36 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/twitter-alt.svg @@ -0,0 +1,16 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/twitter.svg b/projects/js-packages/social-logos/src/svg/twitter.svg new file mode 100644 index 0000000000000..ab9f37d312d88 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/twitter.svg @@ -0,0 +1,17 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/vimeo.svg b/projects/js-packages/social-logos/src/svg/vimeo.svg new file mode 100644 index 0000000000000..b389993c322c8 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/vimeo.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/whatsapp.svg b/projects/js-packages/social-logos/src/svg/whatsapp.svg new file mode 100644 index 0000000000000..372bce8770e2e --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/whatsapp.svg @@ -0,0 +1,22 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/woocommerce.svg b/projects/js-packages/social-logos/src/svg/woocommerce.svg new file mode 100644 index 0000000000000..c3e3748b1502b --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/woocommerce.svg @@ -0,0 +1,11 @@ + + + + + diff --git a/projects/js-packages/social-logos/src/svg/wordpress.svg b/projects/js-packages/social-logos/src/svg/wordpress.svg new file mode 100644 index 0000000000000..cb69363bd0361 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/wordpress.svg @@ -0,0 +1,20 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/x.svg b/projects/js-packages/social-logos/src/svg/x.svg new file mode 100644 index 0000000000000..ca3bd7b8f2395 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/x.svg @@ -0,0 +1,3 @@ + + + diff --git a/projects/js-packages/social-logos/src/svg/xanga.svg b/projects/js-packages/social-logos/src/svg/xanga.svg new file mode 100644 index 0000000000000..9909d4aafd297 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/xanga.svg @@ -0,0 +1,10 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/src/svg/youtube.svg b/projects/js-packages/social-logos/src/svg/youtube.svg new file mode 100644 index 0000000000000..90bb051ef2a36 --- /dev/null +++ b/projects/js-packages/social-logos/src/svg/youtube.svg @@ -0,0 +1,14 @@ + + + + + + + + + diff --git a/projects/js-packages/social-logos/tools/build b/projects/js-packages/social-logos/tools/build new file mode 100755 index 0000000000000..cab0a7a888768 --- /dev/null +++ b/projects/js-packages/social-logos/tools/build @@ -0,0 +1,29 @@ +#!/usr/bin/env bash + +# Start in the right folder. +root_dir="$(dirname "${BASH_SOURCE[0]}")/.." +cd "$root_dir" + +# Output. +echo 'Starting full build...' + +# Run through full build flow. +./tools/clean && +./tools/svg-optimize && +./tools/svg-to-php && +./tools/svg-to-sprite && +./tools/svg-to-font.js && +./tools/svg-to-react-data.js && +./tools/build-react && +echo 'Build complete.' || +echo 'Build failure!' + +if [[ $1 == '--prod' ]]; then + echo 'Checking for changed source files...' + if ! git diff --exit-code --stat './src'; then + echo 'Production builds should not change the ./src folder!' + echo 'Did you forget to commit changes to ./src/react/social-logo-data.jsx?' + exit 1 + fi + echo 'Build is clean.' +fi diff --git a/projects/js-packages/social-logos/tools/build-react b/projects/js-packages/social-logos/tools/build-react new file mode 100755 index 0000000000000..d4cf75c1aa7bb --- /dev/null +++ b/projects/js-packages/social-logos/tools/build-react @@ -0,0 +1,18 @@ +#!/usr/bin/env bash + +# Define some paths. +src_react_dir=src/react +dest_react_dir=build/react + +# Start in the right folder. +root_dir="$(dirname "${BASH_SOURCE[0]}")/.." +cd "$root_dir" + +# Make dir if it doesn't exist. +mkdir -p "$dest_react_dir" + +# Copy source files to build folder. +cp "$src_react_dir/"* "$dest_react_dir" + +# Output. +echo "Created React files in '$dest_react_dir'." diff --git a/projects/js-packages/social-logos/tools/clean b/projects/js-packages/social-logos/tools/clean new file mode 100755 index 0000000000000..a5d86d6aa13eb --- /dev/null +++ b/projects/js-packages/social-logos/tools/clean @@ -0,0 +1,11 @@ +#!/usr/bin/env bash + +# Start in the right folder. +root_dir="$(dirname "${BASH_SOURCE[0]}")/.." +cd "$root_dir" + +# Clean up old build files. +rm -rf build + +# Output. +echo "Cleaned up old build files." diff --git a/projects/js-packages/social-logos/tools/svg-optimize b/projects/js-packages/social-logos/tools/svg-optimize new file mode 100755 index 0000000000000..6e4c6e981cf7b --- /dev/null +++ b/projects/js-packages/social-logos/tools/svg-optimize @@ -0,0 +1,24 @@ +#!/usr/bin/env bash + +# Start in the right folder. +root_dir="$(dirname "${BASH_SOURCE[0]}")/.." +cd "$root_dir" + +# Define some paths. +src_svg_dir=src/svg +dest_svg_dir=build/svg-clean +config_file=tools/svgo.config.mjs + +# Make dir if it doesn't exist. +mkdir -p "$dest_svg_dir" + +# Optimize SVGs +npx svgo --config="$config_file" -f "$src_svg_dir" -o "$dest_svg_dir" -q + +for i in "$dest_svg_dir"/*.svg; do + # Add to SVG innards. + sed -E -i.bak 's|(>)(.*)()|\1\2\3|' "$i" && rm "$i.bak" +done + +# Output. +echo "Created optimized SVGs in '$dest_svg_dir'." diff --git a/projects/js-packages/social-logos/tools/svg-to-font.js b/projects/js-packages/social-logos/tools/svg-to-font.js new file mode 100755 index 0000000000000..3e5090704a962 --- /dev/null +++ b/projects/js-packages/social-logos/tools/svg-to-font.js @@ -0,0 +1,145 @@ +#!/usr/bin/env node +/* eslint-disable no-console */ +const svgDir = 'build/svg-clean'; +const srcSvgDir = 'src/svg'; +const codepointsFile = 'src/font/codepoints.json'; +const destFontDir = 'build/font'; +const cssFile = destFontDir + '/social-logos.css'; +const woff2FontFile = destFontDir + '/social-logos.woff2'; + +const { spawnSync } = require( 'child_process' ); +const fs = require( 'fs' ); +const path = require( 'path' ); +const process = require( 'process' ); +const glob = require( 'glob' ); +const svg2ttf = require( 'svg2ttf' ); +const SVGIcons2SVGFontStream = require( 'svgicons2svgfont' ); +const wawoff2 = require( 'wawoff2' ); + +// Start in the right folder. +const rootDir = __dirname + '/..'; +process.chdir( rootDir ); + +const getCodepoint = name => { + // If a codepoint for this name does not yet exist, create one. + if ( ! codepoints[ name ] ) { + maxCodepoint++; + codepoints[ name ] = maxCodepoint; + } + // Return codepoint. + return codepoints[ name ]; +}; + +const writeCodepoints = () => { + fs.writeFile( + codepointsFile, + JSON.stringify( codepoints, null, '\t' ) + '\n', + { encoding: 'utf8' }, + err => { + if ( err ) { + throw err; + } + // console.log('Wrote codepoints file.'); + fs.copyFileSync( codepointsFile, destFontDir + '/codepoints.json' ); + } + ); +}; + +const svg2woff2 = async fontBuffer => { + // Grab timestamp of last commit that affected the source SVG folder. TTFs + // store timestamp as per spec, and svg2ttf has an override we can use to + // prevent generating a slightly different font file on each run. + const last_svg_commit_timestamp = spawnSync( 'git', [ + 'log', + '-1', + '--first-parent', + '--format=%ct', + srcSvgDir, + ] ) + .stdout.toString() + .trim(); + + const ttf = svg2ttf( fontBuffer.toString(), { ts: last_svg_commit_timestamp } ); + const woff2Data = await wawoff2.compress( ttf.buffer ); + fs.writeFileSync( woff2FontFile, woff2Data ); + // console.log('WOFF2 font created.'); + return Buffer.from( woff2Data ); +}; + +const generateCSS = woff2Buffer => { + const base64Font = Buffer.from( woff2Buffer ).toString( 'base64' ); + + let cssCodepoints = ''; + for ( const name in codepoints ) { + cssCodepoints += name + ': \\' + codepoints[ name ].toString( 16 ) + '\n'; + } + const cssContent = `/* This is a generated file. Do not edit. */ +@font-face { + font-family: 'social-logos'; + src: url( + data:application/octet-stream;base64,${ base64Font } + ) format('woff2'); + font-weight: normal; + font-style: normal; +} + +/* +${ cssCodepoints }*/`; + fs.writeFile( cssFile, cssContent, () => {} ); + + // console.log('Wrote CSS file.'); +}; + +// Make dir if it doesn't exist. +if ( ! fs.existsSync( destFontDir ) ) { + fs.mkdirSync( destFontDir, { recursive: true } ); +} + +const codepoints = require( path.resolve( codepointsFile ) ); +let maxCodepoint = Math.max( ...Object.values( codepoints ) ); + +let fontBuffer = Buffer.alloc( 0 ); + +const fontStream = new SVGIcons2SVGFontStream( { + fontName: 'social-logos', + descent: 0, + normalize: true, + fontHeight: 300, + log: () => {}, // suppress default log messages +} ); + +fontStream + .on( 'data', data => { + // This concats to the font buffer each time a glyph is written. + fontBuffer = Buffer.concat( [ fontBuffer, data ] ); + } ) + .on( 'finish', async function () { + const woff2Buffer = await svg2woff2( fontBuffer ); + generateCSS( woff2Buffer ); + writeCodepoints(); + console.log( `Created font files in '${ destFontDir }'.` ); + } ) + .on( 'error', function ( err ) { + console.log( err ); + } ); + +glob( svgDir + '/*.svg', ( error, files ) => { + if ( error ) { + console.log( error ); + return; + } + + files.forEach( file => { + const glyph = fs.createReadStream( file ); + const glyphName = path.basename( file, '.svg' ); + const glyphUnicode = String.fromCharCode( getCodepoint( glyphName ) ); + glyph.metadata = { + name: glyphName, + unicode: [ glyphUnicode ], + }; + // Trigger `data` event on font stream. + fontStream.write( glyph ); + } ); + // Trigger `end` event on font stream. + fontStream.end(); +} ); diff --git a/projects/js-packages/social-logos/tools/svg-to-php b/projects/js-packages/social-logos/tools/svg-to-php new file mode 100755 index 0000000000000..2e16f9dc7bb9f --- /dev/null +++ b/projects/js-packages/social-logos/tools/svg-to-php @@ -0,0 +1,56 @@ +#!/usr/bin/env bash + +# Start in the right folder. +root_dir="$(dirname "${BASH_SOURCE[0]}")/.." +cd "$root_dir" + +# Define some paths. +svg_dir=build/svg-clean +dest_php_dir=build/php +dest_php_file="$dest_php_dir"/social-logos.php + +# Make dir if it doesn't exist. +mkdir -p "$dest_php_dir" + +# Output header to PHP file. +cat <<"EOF" > $dest_php_file + '" "$logoName" >> $dest_php_file + + # Get SVG value, add some classes, and add it as a PHP array value. + sed -E "s|