Add site

.gitignore

@@ -4,4 +4,5 @@
 xcuserdata
 node_modules
 dist
-build
+build
+.next

.prettierignore

@@ -1,2 +1,3 @@
 node_modules
-dist
+dist
+.next

.vscode/settings.json

@@ -1,12 +1,16 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": true,
+    "source.fixAll.stylelint": true
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "eslint.validate": ["typescript", "typescriptreact"],
+  "eslint.workingDirectories": ["packages/site", "packages/ios-symbols"],
   "files.exclude": {
     "node_modules": true,
     "yarn.lock": true
-  }
+  },
+  "stylelint.enable": true,
+  "stylelint.validate": ["scss"]
 }

README.md

@@ -4,6 +4,8 @@
 
 [![build](https://github.com/bouchenoiremarc/ios-symbols/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/bouchenoiremarc/ios-symbols/actions/workflows/ci.yml) [![npm](https://img.shields.io/npm/v/ios-symbols?color=%230cf)](https://www.npmjs.com/package/ios-symbols) [![gzipped](https://img.shields.io/bundlephobia/minzip/ios-symbols?label=gzipped&color=%2385f)](https://www.npmjs.com/package/ios-symbols) [![license](https://img.shields.io/github/license/bouchenoiremarc/ios-symbols?color=%23e4b)](https://github.com/bouchenoiremarc/ios-symbols/blob/main/LICENSE)
 
+🔗 Explore and preview symbols in the [playground](https://www.marcbouchenoire.com/ios-symbols).
+
 ## Introduction
 
 [SF Symbols](https://developer.apple.com/sf-symbols/) is a library of iconography from Apple, integrated into the San Francisco system fonts.

lerna.json

@@ -0,0 +1,6 @@
+{
+  "npmClient": "yarn",
+  "packages": ["packages/*"],
+  "useWorkspaces": true,
+  "version": "independent"
+}

package.json

@@ -1,78 +1,34 @@
 {
-  "name": "ios-symbols",
-  "version": "1.0.1",
-  "description": "A collection of every symbol from SF Symbols.",
-  "author": "Marc Bouchenoire",
-  "license": "MIT",
-  "repository": "https://github.com/bouchenoiremarc/ios-symbols",
-  "keywords": [
-    "ios",
-    "symbols",
-    "icons",
-    "font"
-  ],
-  "files": [
-    "dist",
-    "src"
-  ],
-  "sideEffects": false,
-  "source": "./src/index.ts",
-  "main": "./dist/ios-symbols.js",
-  "unpkg": "./dist/ios-symbols.umd.js",
-  "module": "./dist/ios-symbols.module.js",
-  "exports": {
-    ".": {
-      "require": "./dist/ios-symbols.js",
-      "import": "./dist/ios-symbols.modern.js",
-      "types": "./dist/index.d.ts"
-    }
-  },
-  "types": "./dist/index.d.ts",
-  "lint-staged": {
-    "**/*.{ts,tsx}": [
-      "eslint --fix",
-      "prettier --write"
-    ]
-  },
+  "name": "root",
+  "private": true,
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged"
+      "pre-commit": "lerna run --concurrency 1 --stream precommit --since HEAD --exclude-dependents"
     }
   },
+  "workspaces": [
+    "packages/*"
+  ],
   "scripts": {
-    "build": "microbundle --tsconfig tsconfig.build.json",
-    "clean": "jest --clearCache && rimraf node_modules",
-    "lint": "eslint '**/*.{ts,tsx}' --fix && prettier --write '**/*.{ts,tsx}'",
-    "generate": "node -r esbuild-register scripts/generate.ts",
-    "prepare": "rimraf dist && yarn build",
-    "release": "yarn login && np",
-    "test": "jest"
+    "site:dev": "yarn workspace site dev",
+    "site:build": "yarn workspace site build",
+    "generate": "yarn workspace ios-symbols generate",
+    "build": "yarn workspace ios-symbols build",
+    "lint": "lerna run lint --stream",
+    "test": "lerna run test --stream",
+    "prepare": "lerna run prepare --stream",
+    "clean": "lerna run clean"
   },
   "devDependencies": {
-    "@bouchenoiremarc/eslint-config": "^1.3.0",
-    "@types/jest": "^26.0.24",
-    "@types/listr": "^0.14.3",
-    "@types/node": "^16.4.3",
-    "@types/prettier": "^2.3.1",
+    "@bouchenoiremarc/eslint-config": "^1.5.4",
+    "@types/node": "^16.4.2",
     "@types/rimraf": "^3.0.0",
-    "@types/write-file-atomic": "^3.0.2",
-    "app-exists": "^2.1.1",
-    "chalk": "^4.1.1",
-    "clipboardy": "^2.3.0",
-    "esbuild-register": "^2.6.0",
     "eslint": "^7.30.0",
     "husky": "4.3.8",
-    "jest": "^27.0.6",
+    "lerna": "^4.0.0",
     "lint-staged": "^11.0.0",
-    "listr": "^0.14.3",
-    "listr-input": "^0.2.1",
-    "microbundle": "^0.13.3",
-    "np": "^7.5.0",
     "prettier": "^2.3.2",
     "rimraf": "^3.0.2",
-    "ts-jest": "^27.0.3",
-    "typescript": "^4.3.5",
-    "write-file-atomic": "^3.0.3",
-    "write-json-file": "^4.3.0"
+    "typescript": "^4.3.5"
   }
 }

packages/ios-symbols/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "ios-symbols",
+  "version": "1.0.1",
+  "description": "A collection of every symbol from SF Symbols.",
+  "author": "Marc Bouchenoire",
+  "license": "MIT",
+  "repository": "https://github.com/bouchenoiremarc/ios-symbols",
+  "keywords": [
+    "ios",
+    "symbols",
+    "icons",
+    "font"
+  ],
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "source": "./src/index.ts",
+  "main": "./dist/ios-symbols.js",
+  "unpkg": "./dist/ios-symbols.umd.js",
+  "module": "./dist/ios-symbols.module.js",
+  "exports": {
+    ".": {
+      "require": "./dist/ios-symbols.js",
+      "import": "./dist/ios-symbols.modern.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "lint-staged": {
+    "**/*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "scripts": {
+    "build": "microbundle --tsconfig tsconfig.build.json",
+    "clean": "jest --clearCache && rimraf node_modules",
+    "lint": "eslint '**/*.{ts,tsx}' --fix && prettier --write '**/*.{ts,tsx}'",
+    "generate": "node -r esbuild-register scripts/generate.ts",
+    "prepare": "rimraf dist && yarn build",
+    "test": "jest"
+  },
+  "devDependencies": {
+    "@types/jest": "^26.0.24",
+    "@types/listr": "^0.14.3",
+    "@types/prettier": "^2.3.1",
+    "@types/write-file-atomic": "^3.0.2",
+    "app-exists": "^2.1.1",
+    "chalk": "^4.1.1",
+    "clipboardy": "^2.3.0",
+    "esbuild-register": "^2.6.0",
+    "jest": "^27.0.6",
+    "listr": "^0.14.3",
+    "listr-input": "^0.2.1",
+    "microbundle": "^0.13.3",
+    "ts-jest": "^27.0.3",
+    "write-file-atomic": "^3.0.3",
+    "write-json-file": "^4.3.0"
+  }
+}

tsconfig.build.json → packages/ios-symbols/tsconfig.build.json

@@ -1,6 +1,6 @@
 {
   "extends": "./tsconfig",
-  "include": ["src"],
+  "include": ["declarations.d.ts", "src"],
   "compilerOptions": {
     "rootDir": "src"
   }

packages/ios-symbols/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig",
+  "include": ["declarations.d.ts", "scripts", "src", "tests"]
+}

packages/site/.eslintignore

@@ -0,0 +1,4 @@
+**/*.js
+node_modules
+dist
+.next

packages/site/.eslintrc

@@ -0,0 +1,7 @@
+{
+  "extends": [
+    "@bouchenoiremarc/eslint-config",
+    "@bouchenoiremarc/eslint-config/react",
+    "@bouchenoiremarc/eslint-config/next"
+  ]
+}

packages/site/.gitignore

@@ -0,0 +1 @@
+.next

packages/site/.stylelintrc

@@ -0,0 +1,16 @@
+{
+  "plugins": [
+    "stylelint-scss",
+    "stylelint-order"
+  ],
+  "extends": [
+    "stylelint-config-recommended",
+    "stylelint-config-idiomatic-order",
+    "stylelint-config-prettier"
+  ],
+  "defaultSeverity": "warning",
+  "rules": {
+    "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": true
+  }
+}

packages/site/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

packages/site/next.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  basePath: "/ios-symbols",
+  cleanUrls: true,
+  trailingSlash: false,
+  async redirects() {
+    return [
+      {
+        source: "/",
+        destination: "/ios-symbols",
+        permanent: true,
+        basePath: false
+      }
+    ]
+  }
+}

packages/site/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "site",
+  "version": "0.0.0",
+  "private": true,
+  "lint-staged": {
+    "**/*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "**/*.scss": [
+      "stylelint --fix --syntax scss",
+      "prettier --write"
+    ]
+  },
+  "scripts": {
+    "precommit": "lint-staged",
+    "dev": "next dev",
+    "build": "next build",
+    "clean": "rimraf node_modules",
+    "lint": "eslint '**/*.{ts,tsx}' --fix && stylelint '**/*.scss' --fix --syntax scss && prettier --write '**/*.{ts,tsx,scss}'"
+  },
+  "dependencies": {
+    "clsx": "^1.1.1",
+    "framer-motion": "^4.1.17",
+    "ios-symbols": "^1.0.1",
+    "just-debounce-it": "^1.5.0",
+    "leva": "^0.9.13",
+    "next": "^11.1.0",
+    "next-seo": "^4.26.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.15",
+    "@types/react-dom": "^17.0.9",
+    "sass": "^1.36.0",
+    "stylelint": "^13.13.1",
+    "stylelint-config-idiomatic-order": "^8.1.0",
+    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-recommended": "^5.0.0",
+    "stylelint-scss": "^3.20.1"
+  }
+}

packages/site/src/components/Favicon.tsx

@@ -0,0 +1,16 @@
+import Head from "next/head"
+
+interface Props {
+  children: string
+}
+
+export function Favicon({ children }: Props) {
+  return (
+    <Head>
+      <link
+        href={`data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text x="50%" y="50%" font-size="90" dominant-baseline="central" text-anchor="middle">${children}</text></svg>`}
+        rel="icon"
+      />
+    </Head>
+  )
+}

packages/site/src/components/Preview.module.scss

@@ -0,0 +1,43 @@
+.container {
+  position: relative;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 4px 24px rgba(0, 0, 0, 0.02);
+
+  &:before {
+    display: inline-block;
+    padding-bottom: 100%;
+    content: "";
+    vertical-align: top;
+  }
+}
+
+.content {
+  position: absolute;
+  display: grid;
+  padding: 20px;
+  contain: strict;
+  gap: 20px;
+  grid-template-rows: 1fr auto;
+  inset: 0;
+}
+
+.symbol {
+  display: flex;
+  color: var(--symbol-color);
+  font-family: var(--symbol-font);
+  font-size: 50px;
+  font-weight: var(--symbol-weight);
+  place-content: center;
+  place-items: center;
+}
+
+.name {
+  overflow: hidden;
+  padding: 0.2em 0;
+  font-size: 14px;
+  line-height: 1;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}