Browse Source

chore: cleanup, replace emotion with @emotion/css

Signed-off-by: Muthu Kumar <muthukumar@thefeathers.in>
pull/1/head
Muthu Kumar 3 years ago
parent
commit
5ba131c2a6
Signed by: mkrhere GPG Key ID: 3FD688398897097E
  1. 3
      package.json
  2. 145
      pnpm-lock.yaml
  3. 2
      src/components/Container.tsx
  4. 2
      src/components/Dashed.tsx
  5. 2
      src/components/Menu.tsx
  6. 10
      src/index.css
  7. 2
      src/pages/Contact.tsx
  8. 4
      src/pages/Exp.tsx
  9. 4
      src/pages/Projects.tsx

3
package.json

@ -13,7 +13,8 @@
]
},
"dependencies": {
"emotion": "^10.0.27",
"@emotion/css": "^11.5.0",
"date-fns": "^2.25.0",
"framer-motion": "^4.1.17",
"react": "^17.0.2",
"react-dom": "^17.0.2",

145
pnpm-lock.yaml

@ -1,12 +1,13 @@
lockfileVersion: 5.3
specifiers:
'@emotion/css': ^11.5.0
'@svgr/rollup': ^5.5.0
'@types/react': ^17.0.14
'@types/react-dom': ^17.0.9
'@types/react-router-dom': ^5.1.8
'@vitejs/plugin-react-refresh': ^1.3.5
emotion: ^10.0.27
date-fns: ^2.25.0
framer-motion: ^4.1.17
react: ^17.0.2
react-dom: ^17.0.2
@ -16,7 +17,8 @@ specifiers:
vite: ^2.4.3
dependencies:
emotion: 10.0.27
'@emotion/css': 11.5.0
date-fns: 2.25.0
framer-motion: 4.1.17_react-dom@17.0.2+react@17.0.2
react: 17.0.2
react-dom: 17.0.2_react@17.0.2
@ -315,7 +317,6 @@ packages:
/@babel/helper-plugin-utils/7.14.5:
resolution: {integrity: sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==}
engines: {node: '>=6.9.0'}
dev: true
/@babel/helper-remap-async-to-generator/7.14.5:
resolution: {integrity: sha512-rLQKdQU+HYlxBwQIj8dk4/0ENOUEhA/Z0l4hN8BexpvmSMN9oA9EagjnhnDpNsRdWCfjwa4mn/HyBXO9yhQP6A==}
@ -1001,6 +1002,15 @@ packages:
'@babel/helper-plugin-utils': 7.14.5
dev: true
/@babel/plugin-syntax-jsx/7.14.5:
resolution: {integrity: sha512-ohuFIsOMXJnbOMRfX7/w7LocdR6R7whhuRD4ax8IipLcLPlZGJKkBxgHp++U4N/vKyU16/YDQr2f5seajD3jIw==}
engines: {node: '>=6.9.0'}
peerDependencies:
'@babel/core': ^7.0.0-0
dependencies:
'@babel/helper-plugin-utils': 7.14.5
dev: false
/@babel/plugin-syntax-jsx/7.14.5_@babel+core@7.12.3:
resolution: {integrity: sha512-ohuFIsOMXJnbOMRfX7/w7LocdR6R7whhuRD4ax8IipLcLPlZGJKkBxgHp++U4N/vKyU16/YDQr2f5seajD3jIw==}
engines: {node: '>=6.9.0'}
@ -2492,13 +2502,48 @@ packages:
resolution: {integrity: sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==}
dev: true
/@emotion/cache/10.0.29:
resolution: {integrity: sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==}
/@emotion/babel-plugin/11.3.0:
resolution: {integrity: sha512-UZKwBV2rADuhRp+ZOGgNWg2eYgbzKzQXfQPtJbu/PLy8onurxlNCLvxMQEvlr1/GudguPI5IU9qIY1+2z1M5bA==}
peerDependencies:
'@babel/core': ^7.0.0
dependencies:
'@babel/helper-module-imports': 7.14.5
'@babel/plugin-syntax-jsx': 7.14.5
'@babel/runtime': 7.14.8
'@emotion/hash': 0.8.0
'@emotion/memoize': 0.7.5
'@emotion/serialize': 1.0.2
babel-plugin-macros: 2.8.0
convert-source-map: 1.8.0
escape-string-regexp: 4.0.0
find-root: 1.1.0
source-map: 0.5.7
stylis: 4.0.10
dev: false
/@emotion/cache/11.5.0:
resolution: {integrity: sha512-mAZ5QRpLriBtaj/k2qyrXwck6yeoz1V5lMt/jfj6igWU35yYlNKs2LziXVgvH81gnJZ+9QQNGelSsnuoAy6uIw==}
dependencies:
'@emotion/sheet': 0.9.4
'@emotion/stylis': 0.8.5
'@emotion/utils': 0.11.3
'@emotion/memoize': 0.7.4
'@emotion/sheet': 1.0.3
'@emotion/utils': 1.0.0
'@emotion/weak-memoize': 0.2.5
stylis: 4.0.10
dev: false
/@emotion/css/11.5.0:
resolution: {integrity: sha512-mqjz/3aqR9rp40M+pvwdKYWxlQK4Nj3cnNjo3Tx6SM14dSsEn7q/4W2/I7PlgG+mb27iITHugXuBIHH/QwUBVQ==}
peerDependencies:
'@babel/core': ^7.0.0
peerDependenciesMeta:
'@babel/core':
optional: true
dependencies:
'@emotion/babel-plugin': 11.3.0
'@emotion/cache': 11.5.0
'@emotion/serialize': 1.0.2
'@emotion/sheet': 1.0.3
'@emotion/utils': 1.0.0
dev: false
/@emotion/hash/0.8.0:
@ -2507,6 +2552,7 @@ packages:
/@emotion/is-prop-valid/0.8.8:
resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==}
requiresBuild: true
dependencies:
'@emotion/memoize': 0.7.4
dev: false
@ -2516,30 +2562,30 @@ packages:
resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==}
dev: false
/@emotion/serialize/0.11.16:
resolution: {integrity: sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==}
/@emotion/memoize/0.7.5:
resolution: {integrity: sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==}
dev: false
/@emotion/serialize/1.0.2:
resolution: {integrity: sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==}
dependencies:
'@emotion/hash': 0.8.0
'@emotion/memoize': 0.7.4
'@emotion/unitless': 0.7.5
'@emotion/utils': 0.11.3
csstype: 2.6.17
dev: false
/@emotion/sheet/0.9.4:
resolution: {integrity: sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==}
'@emotion/utils': 1.0.0
csstype: 3.0.8
dev: false
/@emotion/stylis/0.8.5:
resolution: {integrity: sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==}
/@emotion/sheet/1.0.3:
resolution: {integrity: sha512-YoX5GyQ4db7LpbmXHMuc8kebtBGP6nZfRC5Z13OKJMixBEwdZrJ914D6yJv/P+ZH/YY3F5s89NYX2hlZAf3SRQ==}
dev: false
/@emotion/unitless/0.7.5:
resolution: {integrity: sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==}
dev: false
/@emotion/utils/0.11.3:
resolution: {integrity: sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==}
/@emotion/utils/1.0.0:
resolution: {integrity: sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==}
dev: false
/@emotion/weak-memoize/0.2.5:
@ -4011,21 +4057,6 @@ packages:
object.assign: 4.1.2
dev: true
/babel-plugin-emotion/10.2.2:
resolution: {integrity: sha512-SMSkGoqTbTyUTDeuVuPIWifPdUGkTk1Kf9BWRiXIOIcuyMfsdp2EjeiiFvOzX8NOBvEh/ypKYvUh2rkgAJMCLA==}
dependencies:
'@babel/helper-module-imports': 7.14.5
'@emotion/hash': 0.8.0
'@emotion/memoize': 0.7.4
'@emotion/serialize': 0.11.16
babel-plugin-macros: 2.8.0
babel-plugin-syntax-jsx: 6.18.0
convert-source-map: 1.8.0
escape-string-regexp: 1.0.5
find-root: 1.1.0
source-map: 0.5.7
dev: false
/babel-plugin-istanbul/6.0.0:
resolution: {integrity: sha512-AF55rZXpe7trmEylbaE1Gv54wn6rwU03aptvRoVIGP8YykoSxqdVLV1TfwflBCE/QtHmqtP8SWlTENqbK8GCSQ==}
engines: {node: '>=8'}
@ -4136,10 +4167,6 @@ packages:
- supports-color
dev: true
/babel-plugin-syntax-jsx/6.18.0:
resolution: {integrity: sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=}
dev: false
/babel-plugin-syntax-object-rest-spread/6.13.0:
resolution: {integrity: sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=}
dev: true
@ -4272,6 +4299,7 @@ packages:
/bindings/1.5.0:
resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==}
requiresBuild: true
dependencies:
file-uri-to-path: 1.0.0
dev: true
@ -4658,6 +4686,7 @@ packages:
/chokidar/3.5.2:
resolution: {integrity: sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==}
engines: {node: '>= 8.10.0'}
requiresBuild: true
dependencies:
anymatch: 3.1.2
braces: 3.0.2
@ -5013,15 +5042,6 @@ packages:
elliptic: 6.5.4
dev: true
/create-emotion/10.0.27:
resolution: {integrity: sha512-fIK73w82HPPn/RsAij7+Zt8eCE8SptcJ3WoRMfxMtjteYxud8GDTKKld7MYwAX2TVhrw29uR1N/bVGxeStHILg==}
dependencies:
'@emotion/cache': 10.0.29
'@emotion/serialize': 0.11.16
'@emotion/sheet': 0.9.4
'@emotion/utils': 0.11.3
dev: false
/create-hash/1.2.0:
resolution: {integrity: sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==}
dependencies:
@ -5306,13 +5326,8 @@ packages:
cssom: 0.3.8
dev: true
/csstype/2.6.17:
resolution: {integrity: sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A==}
dev: false
/csstype/3.0.8:
resolution: {integrity: sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==}
dev: true
/cyclist/1.0.1:
resolution: {integrity: sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=}
@ -5338,6 +5353,11 @@ packages:
whatwg-url: 8.7.0
dev: true
/date-fns/2.25.0:
resolution: {integrity: sha512-ovYRFnTrbGPD4nqaEqescPEv1mNwvt+UTqI3Ay9SzNtey9NZnYu6E2qCcBBgJ6/2VF1zGGygpyTDITqpQQ5e+w==}
engines: {node: '>=0.11'}
dev: false
/debug/2.6.9:
resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
dependencies:
@ -5705,13 +5725,6 @@ packages:
engines: {node: '>= 4'}
dev: true
/emotion/10.0.27:
resolution: {integrity: sha512-2xdDzdWWzue8R8lu4G76uWX5WhyQuzATon9LmNeCy/2BHVC6dsEpfhN1a0qhELgtDVdjyEA6J8Y/VlI5ZnaH0g==}
dependencies:
babel-plugin-emotion: 10.2.2
create-emotion: 10.0.27
dev: false
/encodeurl/1.0.2:
resolution: {integrity: sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=}
engines: {node: '>= 0.8'}
@ -5842,7 +5855,6 @@ packages:
/escape-string-regexp/4.0.0:
resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
engines: {node: '>=10'}
dev: true
/escodegen/2.0.0:
resolution: {integrity: sha512-mmHKys/C8BFUGI+MAWNcSYoORYLMdPzjrknd2Vc+bUsjN5bXcr8EhrNB+UTqfL1y3I9c4fw2ihgtMPQLBRiQxw==}
@ -6422,6 +6434,7 @@ packages:
/file-uri-to-path/1.0.0:
resolution: {integrity: sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==}
requiresBuild: true
dev: true
optional: true
@ -6548,7 +6561,7 @@ packages:
resolution: {integrity: sha512-DUxuQaKoqfNne8iikd14SAkh5uw4+8vNifp6gmA73yYNS6ywLIWSLD/n/mBzHQRpW3J7rbATEakmiA8JvkTyZw==}
engines: {node: '>=6.11.5', yarn: '>=1.0.0'}
dependencies:
'@babel/code-frame': 7.10.4
'@babel/code-frame': 7.14.5
chalk: 2.4.2
micromatch: 3.1.10
minimatch: 3.0.4
@ -6677,6 +6690,7 @@ packages:
resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
os: [darwin]
requiresBuild: true
dev: true
optional: true
@ -8854,6 +8868,7 @@ packages:
/nan/2.14.2:
resolution: {integrity: sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==}
requiresBuild: true
dev: true
optional: true
@ -8958,6 +8973,7 @@ packages:
/node-notifier/8.0.2:
resolution: {integrity: sha512-oJP/9NAdd9+x2Q+rfphB2RJCHjod70RcRLjosiPMMu5gjIfwVnOUGq2nbTjTUbmy0DJ/tFIVT30+Qe3nzl4TJg==}
requiresBuild: true
dependencies:
growly: 1.3.0
is-wsl: 2.2.0
@ -11737,6 +11753,10 @@ packages:
postcss-selector-parser: 3.1.2
dev: true
/stylis/4.0.10:
resolution: {integrity: sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==}
dev: false
/supports-color/5.5.0:
resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
engines: {node: '>=4'}
@ -12405,6 +12425,7 @@ packages:
/watchpack-chokidar2/2.0.1:
resolution: {integrity: sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==}
requiresBuild: true
dependencies:
chokidar: 2.1.8
dev: true

2
src/components/Container.tsx

@ -1,5 +1,5 @@
import React, { useState, useEffect, useRef, useLayoutEffect } from "react";
import { css, cx } from "emotion";
import { css, cx } from "@emotion/css";
import { useHistory } from "react-router-dom";
import { ReactComponent as Logo } from "../assets/logo.svg";

2
src/components/Dashed.tsx

@ -1,5 +1,5 @@
import React from "react";
import { css } from "emotion";
import { css } from "@emotion/css";
const Dashed: React.FunctionComponent = ({ children }) => (
<span

2
src/components/Menu.tsx

@ -1,6 +1,6 @@
import React from "react";
import { Link } from "react-router-dom";
import { css, cx } from "emotion";
import { css, cx } from "@emotion/css";
import { motion } from "framer-motion";
import RevealChildren from "./RevealChildren";
import useMediaQuery from "../util/useMediaQuery";

10
src/index.css

@ -57,7 +57,15 @@ h1 {
}
h2 {
font-size: 3rem;
font-size: min(10vw, 3rem);
}
h3 {
font-size: min(7.5vw, 2.5rem);
}
h4 {
font-size: min(5vw, 1.2rem);
}
a {

2
src/pages/Contact.tsx

@ -1,5 +1,5 @@
import React from "react";
import { css } from "emotion";
import { css } from "@emotion/css";
import { useEffect, useState } from "react";
import Container from "../components/Container";

4
src/pages/Exp.tsx

@ -1,5 +1,5 @@
import React from "react";
import { css } from "emotion";
import { css } from "@emotion/css";
import Container from "../components/Container";
const exp = [
@ -67,7 +67,7 @@ const ExpUnit: React.FunctionComponent<Experience> = ({ title, location, positio
position: relative;
`}>
<Circle />
<h3>{[title, location].filter(Boolean).join(", ")}</h3>
<h4>{[title, location].filter(Boolean).join(", ")}</h4>
<span
className={css`
color: #bdbdbd;

4
src/pages/Projects.tsx

@ -1,5 +1,5 @@
import React from "react";
import { css } from "emotion";
import { css } from "@emotion/css";
import Container from "../components/Container";
const exp = [
@ -82,7 +82,7 @@ const ProjectUnit: React.FunctionComponent<Project> = ({ title, url, description
href={url}
target="_blank"
rel="noreferrer">
<h3>{title}</h3>
<h4>{title}</h4>
<p
className={css`
color: #bdbdbd;

Loading…
Cancel
Save