commit 00876f77caad9dde7e55509b6f122f60baba8873 parent 107eab1b82988495e835bc73f03a4715c503437b Author: Yohanes Bandung <bandungpenting@gmail.com> Date: Sat, 7 Mar 2020 12:38:35 +0700 feature(theme): install styled-components and styled-theming Diffstat:
| M | babel.config.js | | | 6 | +++--- |
| M | package.json | | | 5 | ++++- |
| M | public/index.html | | | 5 | ++--- |
| M | src/App.js | | | 111 | +++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------- |
| A | src/Theme/Style.js | | | 15 | +++++++++++++++ |
| M | yarn.lock | | | 104 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---- |
6 files changed, 197 insertions(+), 49 deletions(-)
diff --git a/babel.config.js b/babel.config.js @@ -2,10 +2,10 @@ module.exports = function(api) { api.cache(true); const presets = ["@babel/preset-env", "@babel/preset-react"]; - // const plugins = [ ... ]; + const plugins = [["babel-plugin-styled-components", { ssr: true }]]; return { - presets - // plugins + presets, + plugins }; }; diff --git a/package.json b/package.json @@ -12,7 +12,9 @@ }, "dependencies": { "react": "^16.13.0", - "react-dom": "^16.13.0" + "react-dom": "^16.13.0", + "styled-components": "^5.0.1", + "styled-theming": "^2.2.0" }, "devDependencies": { "@babel/cli": "^7.8.4", @@ -20,6 +22,7 @@ "@babel/preset-env": "^7.8.7", "@babel/preset-react": "^7.8.3", "babel-loader": "^8.0.6", + "babel-plugin-styled-components": "^1.10.7", "html-webpack-plugin": "^3.2.0", "webpack": "^4.42.0", "webpack-cli": "^3.3.11", diff --git a/public/index.html b/public/index.html @@ -1,6 +1,5 @@ -<!-- sourced from https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html --> <!DOCTYPE html> -<html> +<html style="min-width: 100vw;min-height: 100vh;"> <head> <title>Yohanes Bandung Bond - Frontend Developer</title> <meta charset="UTF-8" /> @@ -24,7 +23,7 @@ <meta property="og:site_name" content="ybbond.dev" /> <!-- OG Tags --> </head> - <body> + <body style="min-width: 100vw;min-height: 100vh;margin:0;padding:0;"> <div id="react-app"></div> <noscript> <div> diff --git a/src/App.js b/src/App.js @@ -1,45 +1,82 @@ import React, { Component } from "react"; +import styled, { ThemeProvider } from "styled-components"; +import theme from "styled-theming"; + +import Style from "./Theme/Style"; + +const backgroundColor = theme("mode", { + light: "#fdfdfd", + dark: "#1b1b1b" +}); + +const color = theme("mode", { + light: "#1b1b1b", + dark: "#fdfdfd" +}); + +const linkColor = theme("mode", { + light: "#2d2d2d", + dark: "#d8dcd5" +}); + +const Text = styled.p` + font-family: Trebuchet MS, Helvetica, sans-serif; +`; + +const Wrapper = styled.div` + min-height: calc(100vh - 2px); + background-color: ${backgroundColor}; + color: ${color}; + padding: 1px; +`; + +const Link = styled.a` + color: ${linkColor}; +`; + +const darkmode = true; class App extends Component { render() { return ( - <div> - <center> - <div style={{ maxWidth: 600, textAlign: "left" }}> - <h1 style={{ fontFamily: "Trebuchet MS, Helvetica, sans-serif" }}> - Yohanes Bandung Bondowoso - </h1> - <p style={{ fontFamily: "Trebuchet MS, Helvetica, sans-serif" }}> - Currently work as Frontend Engineer of kumparan.com in Jakarta, - Indonesia. Building it with React, React Native for Android and - iOS. - <br /> - <br /> - Eager to learn. - <br /> - Hardships. - <br /> - I cannot say that I am humble, but I learn from experience that - each individuals, their own excellences. - <br /> - I try to learn from everyone, and everything. - <br /> - <br /> - Contact:{" "} - <a - href="mailto:bandungpenting@gmail.com?Subject=From%20ybbond.dev" - target="_top" - > - bandungpenting@gmail.com - </a> - </p> - <p style={{ fontFamily: "Trebuchet MS, Helvetica, sans-serif" }}> - Other site:{" "} - <a href="https://reason.ybbond.dev">reason.ybbond.dev</a> - </p> - </div> - </center> - </div> + <ThemeProvider theme={{ mode: darkmode ? "dark" : "light" }}> + <Wrapper> + <Style dark={darkmode ? "dark" : light} /> + <center> + <div style={{ maxWidth: 600, textAlign: "left" }}> + <Text as="h1">Yohanes Bandung Bondowoso</Text> + <Text> + Currently work as Frontend Engineer of kumparan.com in Jakarta, + Indonesia. Building it with React, React Native for Android and + iOS. + <br /> + <br /> + Eager to learn. + <br /> + Hardships. + <br /> + I cannot say that I am humble, but I learn from experience that + each individuals, their own excellences. + <br /> + I try to learn from everyone, and everything. + <br /> + <br /> + Contact:{" "} + <Link + href="mailto:bandungpenting@gmail.com?Subject=From%20ybbond.dev" + target="_top" + > + bandungpenting@gmail.com + </Link> + </Text> + <Text> + Other site:{" "} + <Link href="https://reason.ybbond.dev">reason.ybbond.dev</Link> + </Text> + </div> + </center> + </Wrapper> + </ThemeProvider> ); } } diff --git a/src/Theme/Style.js b/src/Theme/Style.js @@ -0,0 +1,15 @@ +import React from "react"; + +const Style = props => ( + <style + dangerouslySetInnerHTML={{ + __html: ` +html { + background-color: ${props.dark ? "#1b1b1b" : "#fdfdfd"}; +} + ` + }} + /> +); + +export default React.memo(Style); diff --git a/yarn.lock b/yarn.lock @@ -65,7 +65,7 @@ lodash "^4.17.13" source-map "^0.5.0" -"@babel/helper-annotate-as-pure@^7.8.3": +"@babel/helper-annotate-as-pure@^7.0.0", "@babel/helper-annotate-as-pure@^7.8.3": version "7.8.3" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.8.3.tgz#60bc0bc657f63a0924ff9a4b4a0b24a13cf4deee" integrity sha512-6o+mJrZBxOoEX77Ezv9zwW7WV8DdluouRKNY/IR5u/YTMuKHgugHOzYWlYvYLpLA9nPsQCAAASpCIbjI9Mv+Uw== @@ -164,7 +164,7 @@ dependencies: "@babel/types" "^7.8.3" -"@babel/helper-module-imports@^7.8.3": +"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.8.3": version "7.8.3" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz#7fe39589b39c016331b6b8c3f441e8f0b1419498" integrity sha512-R0Bx3jippsbAEtzkpZ/6FIiuzOURPcMjHp+Z6xPe6DtApDJx+w7UYyOLanZqO8+wKR9G10s/FmHXvxaMd9s6Kg== @@ -767,7 +767,7 @@ "@babel/parser" "^7.8.6" "@babel/types" "^7.8.6" -"@babel/traverse@^7.8.3", "@babel/traverse@^7.8.4", "@babel/traverse@^7.8.6": +"@babel/traverse@^7.4.5", "@babel/traverse@^7.8.3", "@babel/traverse@^7.8.4", "@babel/traverse@^7.8.6": version "7.8.6" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.8.6.tgz#acfe0c64e1cd991b3e32eae813a6eb564954b5ff" integrity sha512-2B8l0db/DPi8iinITKuo7cbPznLCEk0kCxDoB9/N6gGNg/gxOXiR/IcymAFPiBwk5w6TtQ27w4wpElgp9btR9A== @@ -791,6 +791,28 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" +"@emotion/is-prop-valid@^0.8.3": + version "0.8.7" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.7.tgz#803449993f436f9a6c67752251ea3fc492a1044c" + integrity sha512-OPkKzUeiid0vEKjZqnGcy2mzxjIlCffin+L2C02pdz/bVlt5zZZE2VzO0D3XOPnH0NEeF21QNKSXiZphjr4xiQ== + dependencies: + "@emotion/memoize" "0.7.4" + +"@emotion/memoize@0.7.4": + version "0.7.4" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" + integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== + +"@emotion/stylis@^0.8.4": + version "0.8.5" + resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" + integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== + +"@emotion/unitless@^0.7.4": + version "0.7.5" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" + integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== + "@types/events@*": version "3.0.0" resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7" @@ -1152,6 +1174,21 @@ babel-plugin-dynamic-import-node@^2.3.0: dependencies: object.assign "^4.1.0" +"babel-plugin-styled-components@>= 1", babel-plugin-styled-components@^1.10.7: + version "1.10.7" + resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.7.tgz#3494e77914e9989b33cc2d7b3b29527a949d635c" + integrity sha512-MBMHGcIA22996n9hZRf/UJLVVgkEOITuR2SvjHLb5dSTUyR4ZRGn+ngITapes36FI3WLxZHfRhkA1ffHxihOrg== + dependencies: + "@babel/helper-annotate-as-pure" "^7.0.0" + "@babel/helper-module-imports" "^7.0.0" + babel-plugin-syntax-jsx "^6.18.0" + lodash "^4.17.11" + +babel-plugin-syntax-jsx@^6.18.0: + version "6.18.0" + resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" + integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY= + balanced-match@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767" @@ -1430,6 +1467,11 @@ camelcase@^5.0.0: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320" integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg== +camelize@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b" + integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs= + caniuse-lite@^1.0.30001030: version "1.0.30001032" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001032.tgz#b8d224914e2cd7f507085583d4e38144c652bce4" @@ -1741,6 +1783,11 @@ crypto-browserify@^3.11.0: randombytes "^2.0.0" randomfill "^1.0.3" +css-color-keywords@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" + integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU= + css-select@^1.1.0: version "1.2.0" resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858" @@ -1751,6 +1798,15 @@ css-select@^1.1.0: domutils "1.5.1" nth-check "~1.0.1" +css-to-react-native@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756" + integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ== + dependencies: + camelize "^1.0.0" + css-color-keywords "^1.0.0" + postcss-value-parser "^4.0.2" + css-what@2.1: version "2.1.3" resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2" @@ -2596,6 +2652,13 @@ hmac-drbg@^1.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" +hoist-non-react-statics@^3.0.0: + version "3.3.2" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" + integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== + dependencies: + react-is "^16.7.0" + homedir-polyfill@^1.0.1: version "1.0.3" resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz#743298cef4e5af3e194161fbadcc2151d3a058e8" @@ -3847,6 +3910,11 @@ posix-character-classes@^0.1.0: resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab" integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs= +postcss-value-parser@^4.0.2: + version "4.0.3" + resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.3.tgz#651ff4593aa9eda8d5d0d66593a2417aeaeb325d" + integrity sha512-N7h4pG+Nnu5BEIzyeaaIYWs0LI5XC40OrRh5L60z0QjFsqGWcHcbkBvpe1WYpcIS9yQ8sOi/vIPt1ejQCrMVrg== + pretty-error@^2.0.2: version "2.1.1" resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.1.tgz#5f4f87c8f91e5ae3f3ba87ab4cf5e03b1a17f1a3" @@ -4009,7 +4077,7 @@ react-dom@^16.13.0: prop-types "^15.6.2" scheduler "^0.19.0" -react-is@^16.8.1: +react-is@^16.7.0, react-is@^16.8.1: version "16.13.0" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.0.tgz#0f37c3613c34fe6b37cd7f763a0d6293ab15c527" integrity sha512-GFMtL0vHkiBv9HluwNZTggSn/sCyEt9n02aM0dSAjGGyqyNlAyftYm4phPxdvCigG15JreC5biwxCgTAJZ7yAA== @@ -4385,6 +4453,11 @@ sha.js@^2.4.0, sha.js@^2.4.8: inherits "^2.0.1" safe-buffer "^5.0.1" +shallowequal@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" + integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== + shebang-command@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea" @@ -4660,6 +4733,27 @@ strip-eof@^1.0.0: resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf" integrity sha1-u0P/VZim6wXYm1n80SnJgzE2Br8= +styled-components@^5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.0.1.tgz#57782a6471031abefb2db5820a1876ae853bc619" + integrity sha512-E0xKTRIjTs4DyvC1MHu/EcCXIj6+ENCP8hP01koyoADF++WdBUOrSGwU1scJRw7/YaYOhDvvoad6VlMG+0j53A== + dependencies: + "@babel/helper-module-imports" "^7.0.0" + "@babel/traverse" "^7.4.5" + "@emotion/is-prop-valid" "^0.8.3" + "@emotion/stylis" "^0.8.4" + "@emotion/unitless" "^0.7.4" + babel-plugin-styled-components ">= 1" + css-to-react-native "^3.0.0" + hoist-non-react-statics "^3.0.0" + shallowequal "^1.1.0" + supports-color "^5.5.0" + +styled-theming@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/styled-theming/-/styled-theming-2.2.0.tgz#3084e43d40eaab4bc11ebafd3de04e3622fee37e" + integrity sha1-MITkPUDqq0vBHrr9PeBONiL+434= + supports-color@6.1.0, supports-color@^6.1.0: version "6.1.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3" @@ -4667,7 +4761,7 @@ supports-color@6.1.0, supports-color@^6.1.0: dependencies: has-flag "^3.0.0" -supports-color@^5.3.0: +supports-color@^5.3.0, supports-color@^5.5.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==