From 71905e525eed66bddb9f604eaefa4118d4ba6988 Mon Sep 17 00:00:00 2001 From: Padmaja Bhol <75530516+padmajabhol@users.noreply.github.com> Date: Mon, 20 Jun 2022 12:25:05 +0530 Subject: [PATCH 01/62] Move content to config and images to cloudinary --- config/content/landingpage.js | 90 +++++++++++++++++++++++++++++++++++ config/content/navbar.js | 34 +++++++++++++ config/seo.js | 0 3 files changed, 124 insertions(+) create mode 100644 config/content/landingpage.js create mode 100644 config/content/navbar.js create mode 100644 config/seo.js diff --git a/config/content/landingpage.js b/config/content/landingpage.js new file mode 100644 index 0000000..f26350c --- /dev/null +++ b/config/content/landingpage.js @@ -0,0 +1,90 @@ +/* eslint-disable max-len */ +export default { + landing: { + head: 'Read and Sign the Manifesto', + img: { + src: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702025/CiS/bg_jhdw6s.png', + alt: 'landing' + } + }, + section1: { + head: 'Premise', + img: { + src: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702092/CiS/section-img_pkjqly.png', + alt: 'laptops', + }, + content: [ + { + id: 1, + subhead: 'Science is often computing', + para: 'Much of modern science involves code these days, in large part due to the amount of data available - it would be almost impossible to analyse without computational assistance.' + }, + { + id: 2, + subhead: 'Science requires peer review', + para: 'One of the basic prerequisites for any published scientific results is that it be reviewed by peers, to ensure the research and conclusions are valid.' + } + ] + }, + section2: { + content: [ + { + id: 1, + head: 'Code == Science', + para: 'If software is required to perform science, it stands to reason that errors in your software mean errors in your science.', + img: { + src: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702030/CiS/clock_dryc5d.png', + alt: 'clock', + }, + }, + { + id: 2, + head: 'Possible Solution?', + para: 'Scientific code needs to be peer reviewed, and ideally open source.That’s easier said than done. Getting there requires awareness, culture shift, and adherence to best practices.', + img: { + src: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702098/CiS/talking_q54knb.png', + alt: 'humans', + } + }, + ] + }, + + section3: { + content: [ + { + head: 'Looking to Contribute?', + para: [ + { + id: 1, + sub: 'Do you wish more code was open source? Have you wished in the past that a DB of open source journals existed? Share your story.' + }, + { + id: 2, + sub: 'Add more journals to our list Right now it’s a google form, but hopefully we’ll have the full site up and running soon!' + }, + { + id: 3, + sub: 'Pick up a technical or design task on GitHub: https://github.com/codeisscience/code-is-science' + } + ] + }, + { + head: 'Latest Posts', + links: [ + { + title: 'Good practices & good quality code', + link: '', + }, + { + title: 'Mozfest Session 2017', + link: '', + }, + { + title: 'Mozfest Is Coming', + link: '', + } + ] + } + ] + } +} \ No newline at end of file diff --git a/config/content/navbar.js b/config/content/navbar.js new file mode 100644 index 0000000..40495da --- /dev/null +++ b/config/content/navbar.js @@ -0,0 +1,34 @@ +export default { + title: 'Navbar', + logo: { + src: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702059/CiS/logo_ch4fzv.png', + alt: 'Code Is Science', + }, + navItems: [ + { + id: 'home', + name: 'Home', + link: '/home', + }, + { + id: 'journals', + name: 'Journals', + link: '/journals', + }, + { + id: 'manifesto', + name: 'Manifesto', + link: '/manifesto', + }, + { + id: 'contact', + name: 'Contact', + link: '/contact', + }, + { + id: 'login', + name: 'Login', + link: '/login', + }, + ], +}; \ No newline at end of file diff --git a/config/seo.js b/config/seo.js new file mode 100644 index 0000000..e69de29 From ed6bf805335793c6a51a9e3439f4f8e2da7ad5f8 Mon Sep 17 00:00:00 2001 From: Padmaja Bhol <75530516+padmajabhol@users.noreply.github.com> Date: Tue, 21 Jun 2022 01:33:51 +0530 Subject: [PATCH 02/62] Move footer and manifesto content/assets --- config/content/footer.js | 71 +++++++++++++++++++++++++++++++ config/content/manifesto.js | 85 +++++++++++++++++++++++++++++++++++++ 2 files changed, 156 insertions(+) create mode 100644 config/content/footer.js create mode 100644 config/content/manifesto.js diff --git a/config/content/footer.js b/config/content/footer.js new file mode 100644 index 0000000..fadca66 --- /dev/null +++ b/config/content/footer.js @@ -0,0 +1,71 @@ +import { ImTwitter, ImMail, ImGithub } from 'react-icons/im'; +import { IoLogoSlack } from 'react-icons/io'; + +export default{ + img: { + src: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702085/CiS/rocket_vkcatz.png', + alt: 'Code Is Science', + }, + copyright: 'Copyright © 2022 Code is Science', + col1: { + head: 'Useful Links', + links: [ + { + id:1, + sub: 'Contribute', + link: 'https://github.com/codeisscience', + }, + { + id: 2, + sub: 'Manifesto', + link: 'https://codeisscience.github.io/manifesto/manifesto.html', + }, + { + id: 3, + sub: 'Code of Conduct', + link: '/home', + }, + ] + }, + col2: { + head: 'Resources', + links: [ + { + id: 1, + sub: 'Authors', + link: '/home', + }, + { + id: 2, + sub: 'Open Science', + link: '/home', + }, + { + id: 3, + sub: 'Contributors', + link: '/home', + } + ] + }, + socials: { + head: 'Contact Us', + links: [ + { + icon: ImMail, + link: 'mailto:contact@codeisscience.com', + }, + { + icon: ImTwitter, + link: 'https://twitter.com/codeisscience', + }, + { + icon: ImGithub, + link: 'https://github.com/codeisscience', + }, + { + icon: IoLogoSlack, + link: '', + } + ] + } +} \ No newline at end of file diff --git a/config/content/manifesto.js b/config/content/manifesto.js new file mode 100644 index 0000000..61eafbf --- /dev/null +++ b/config/content/manifesto.js @@ -0,0 +1,85 @@ +/* eslint-disable max-len */ +import { ImTwitter, ImMail, ImGithub } from 'react-icons/im'; + +export default { + title: 'Manifesto', + section1: { + img: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702069/CiS/manifesto-img-1_tsnufg.png', + alt: 'manifesto image', + head: 'Code is Science Manifesto', + sub: 'Through working with scientific code, we agree that scientific code needs to be treated as a genuine research output. For this reason we have created a manifesto, which will allow both individuals and organisations to sign up and agree to make genuine efforts to both make their own scientific code open, as well as sharing the manifesto mission with others.', + link: 'https://codeisscience.github.io/manifesto/manifesto.html', + }, + section2: { + head: 'I want to express my support for the manifesto! Tell me how', + cards: [ + { + id:1, + img: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702103/CiS/walking-man_ncunny.png', + alt: 'Card Image', + head: 'Sign the manifesto as an individual', + link : 'https://docs.google.com/forms/d/e/1FAIpQLSeaDLDaREkUyOwpvbQf41hxT12ixoBToTdBhlgTj_YoW0tSgw/viewform', + }, + { + id: 2, + img: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702076/CiS/peers_m0fgdd.png', + alt: 'Card Image', + head: 'Sign the manifesto as an organisation or institution.', + sub: 'Please make sure you have authority to sign on behalf of your organisation before you sign on behalf of an organisation.', + link: 'https://docs.google.com/forms/d/e/1FAIpQLSdUPKlP__5saaYMyEJwkHF3gRNAHiKihOlp6zd6QK4vUqs3gg/viewform', + }, + { + id: 3, + img: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702037/CiS/hands-icon_omk7ug.png', + alt: 'Card Image', + sub: 'We’re particularly interested in adding logos and links indicating organisational support from publishers, funders, and research institutions.' + } + ] + }, + section3: [ + { + head: 'How can I contribute?', + list: [ + { + id: 1, + sub: 'Sign the manifesto and share with all your friends!', + }, + { + id: 2, + sub: 'Add links to your personal and institutional sites.', + }, + { + id: 3, + sub: 'You can also look at the issues on GitHub and see if there’s anything else you can pick up. You can also look at our roadmap to get an understanding of our timeline.', + } + ] + }, + ], + section4: [ + { + head: 'Contact', + links: [ + { + id: 1, + icon: ImTwitter, + sub: 'Twitter: @codeisscience', + link: 'https://twitter.com/codeisscience', + }, + { + id: 2, + icon: ImMail, + sub: 'Email: contact@codeisscience.com', + link: 'mailto:contact@codeisscience.com', + }, + { + id: 3, + icon: ImGithub, + sub: 'Github: You can also create issues on the manifesto repository', + link: 'https://github.com/codeisscience', + } + ] + } + ] + + +} \ No newline at end of file From ea9a16020f388e8e73b13f261fbcab6f3d98c328 Mon Sep 17 00:00:00 2001 From: Padmaja Bhol <75530516+padmajabhol@users.noreply.github.com> Date: Mon, 27 Jun 2022 03:28:06 +0530 Subject: [PATCH 03/62] Redo navbar --- package-lock.json | 262 ++++++++++++++++++ package.json | 3 + src/components/marginals/Footer/Footer.js | 2 +- src/components/marginals/Navbar/Navbar.js | 32 +++ src/components/marginals/Navbar/styles.js | 82 ++++++ {config => src/config}/content/footer.js | 0 src/config/content/index.js | 4 + {config => src/config}/content/landingpage.js | 0 {config => src/config}/content/manifesto.js | 0 {config => src/config}/content/navbar.js | 4 + {config => src/config}/seo.js | 0 src/index.js | 8 +- 12 files changed, 393 insertions(+), 4 deletions(-) create mode 100644 src/components/marginals/Navbar/Navbar.js create mode 100644 src/components/marginals/Navbar/styles.js rename {config => src/config}/content/footer.js (100%) create mode 100644 src/config/content/index.js rename {config => src/config}/content/landingpage.js (100%) rename {config => src/config}/content/manifesto.js (100%) rename {config => src/config}/content/navbar.js (87%) rename {config => src/config}/seo.js (100%) diff --git a/package-lock.json b/package-lock.json index 0140448..9c4ec9c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,8 @@ "version": "0.1.0", "dependencies": { "@babel/plugin-proposal-decorators": "^7.16.7", + "@fortawesome/free-solid-svg-icons": "^6.1.1", + "@fortawesome/react-fontawesome": "^0.1.18", "@mdx-js/loader": "^1.6.22", "@testing-library/jest-dom": "^5.11.4", "@testing-library/user-event": "^12.1.10", @@ -24,6 +26,7 @@ "react-router-bootstrap": "^0.25.0", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", + "styled-components": "^5.3.5", "web-vitals": "^1.0.1" }, "devDependencies": { @@ -1849,6 +1852,29 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.3.tgz", + "integrity": "sha512-RFg04p6C+1uO19uG8N+vqanzKqiM9eeV1LDOG3bmkYmuOj7NbKNlFC/4EZq5gnwAIlcC/jOT24f8Td0iax2SXA==", + "dependencies": { + "@emotion/memoize": "^0.7.4" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz", + "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==" + }, + "node_modules/@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "node_modules/@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, "node_modules/@eslint/eslintrc": { "version": "0.4.3", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz", @@ -1893,6 +1919,52 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz", + "integrity": "sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz", + "integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==", + "hasInstallScript": true, + "peer": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.1.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz", + "integrity": "sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.1.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.1.18", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.18.tgz", + "integrity": "sha512-RwLIB4TZw0M9gvy5u+TusAA0afbwM4JQIimNH/j3ygd6aIvYPQLqXMhC9ErY26J23rDPyDZldIfPq/HpTTJ/tQ==", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.x" + } + }, "node_modules/@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", @@ -5154,6 +5226,26 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/babel-plugin-styled-components": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz", + "integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==", + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.16.0", + "@babel/helper-module-imports": "^7.16.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.11", + "picomatch": "^2.3.0" + }, + "peerDependencies": { + "styled-components": ">= 2" + } + }, + "node_modules/babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==" + }, "node_modules/babel-plugin-syntax-object-rest-spread": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", @@ -5829,6 +5921,11 @@ "node": ">= 6" } }, + "node_modules/camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha512-W2lPwkBkMZwFlPCXhIlYgxu+7gC/NUlCtdK652DAJ1JdgV0sTrvuPFshNPrFa1TY2JOkLhgdeEBplB4ezEa+xg==" + }, "node_modules/caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -6693,6 +6790,14 @@ "node": ">=6.0.0" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "engines": { + "node": ">=4" + } + }, "node_modules/css-color-names": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", @@ -6829,6 +6934,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "node_modules/css-to-react-native": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", + "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -20845,6 +20960,11 @@ "sha.js": "bin.js" } }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -21848,6 +21968,36 @@ "inline-style-parser": "0.1.1" } }, + "node_modules/styled-components": { + "version": "5.3.5", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.5.tgz", + "integrity": "sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==", + "hasInstallScript": true, + "dependencies": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0", + "react-is": ">= 16.8.0" + } + }, "node_modules/stylehacks": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz", @@ -26609,6 +26759,29 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, + "@emotion/is-prop-valid": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.3.tgz", + "integrity": "sha512-RFg04p6C+1uO19uG8N+vqanzKqiM9eeV1LDOG3bmkYmuOj7NbKNlFC/4EZq5gnwAIlcC/jOT24f8Td0iax2SXA==", + "requires": { + "@emotion/memoize": "^0.7.4" + } + }, + "@emotion/memoize": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz", + "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==" + }, + "@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, "@eslint/eslintrc": { "version": "0.4.3", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz", @@ -26640,6 +26813,36 @@ } } }, + "@fortawesome/fontawesome-common-types": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz", + "integrity": "sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz", + "integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==", + "peer": true, + "requires": { + "@fortawesome/fontawesome-common-types": "6.1.1" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz", + "integrity": "sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.1.1" + } + }, + "@fortawesome/react-fontawesome": { + "version": "0.1.18", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.18.tgz", + "integrity": "sha512-RwLIB4TZw0M9gvy5u+TusAA0afbwM4JQIimNH/j3ygd6aIvYPQLqXMhC9ErY26J23rDPyDZldIfPq/HpTTJ/tQ==", + "requires": { + "prop-types": "^15.8.1" + } + }, "@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", @@ -29102,6 +29305,23 @@ "@babel/helper-define-polyfill-provider": "^0.3.1" } }, + "babel-plugin-styled-components": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz", + "integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.16.0", + "@babel/helper-module-imports": "^7.16.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.11", + "picomatch": "^2.3.0" + } + }, + "babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==" + }, "babel-plugin-syntax-object-rest-spread": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", @@ -29649,6 +29869,11 @@ "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==" }, + "camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha512-W2lPwkBkMZwFlPCXhIlYgxu+7gC/NUlCtdK652DAJ1JdgV0sTrvuPFshNPrFa1TY2JOkLhgdeEBplB4ezEa+xg==" + }, "caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -30327,6 +30552,11 @@ "postcss": "^7.0.5" } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==" + }, "css-color-names": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", @@ -30421,6 +30651,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "css-to-react-native": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", + "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -41227,6 +41467,11 @@ "safe-buffer": "^5.0.1" } }, + "shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -42041,6 +42286,23 @@ "inline-style-parser": "0.1.1" } }, + "styled-components": { + "version": "5.3.5", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.5.tgz", + "integrity": "sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + } + }, "stylehacks": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz", diff --git a/package.json b/package.json index 442d317..c3208ce 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,8 @@ "private": true, "dependencies": { "@babel/plugin-proposal-decorators": "^7.16.7", + "@fortawesome/free-solid-svg-icons": "^6.1.1", + "@fortawesome/react-fontawesome": "^0.1.18", "@mdx-js/loader": "^1.6.22", "@testing-library/jest-dom": "^5.11.4", "@testing-library/user-event": "^12.1.10", @@ -19,6 +21,7 @@ "react-router-bootstrap": "^0.25.0", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", + "styled-components": "^5.3.5", "web-vitals": "^1.0.1" }, "scripts": { diff --git a/src/components/marginals/Footer/Footer.js b/src/components/marginals/Footer/Footer.js index 566c698..d744119 100644 --- a/src/components/marginals/Footer/Footer.js +++ b/src/components/marginals/Footer/Footer.js @@ -6,7 +6,7 @@ import { ImTwitter, ImMail, ImGithub } from 'react-icons/im'; import { IoLogoSlack } from 'react-icons/io'; import RocketImg from '../../../assets/rocket.webp'; -function Footer() { +function Footer () { return ( diff --git a/src/components/marginals/Navbar/Navbar.js b/src/components/marginals/Navbar/Navbar.js new file mode 100644 index 0000000..cd72e41 --- /dev/null +++ b/src/components/marginals/Navbar/Navbar.js @@ -0,0 +1,32 @@ +/* eslint-disable react/self-closing-comp */ +/* eslint-disable no-unused-vars */ +import React, { useState } from "react"; +import { Link } from "react-router-dom"; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { Nav, Logo, Hamburger, Menu, MenuLink, Button, Items } from './styles'; +import { navbar } from '../../../config/content'; + +function Navbar() { + const [isOpen, setIsOpen] = useState(false); + + return ( + + ); +}; + +export default Navbar \ No newline at end of file diff --git a/src/components/marginals/Navbar/styles.js b/src/components/marginals/Navbar/styles.js new file mode 100644 index 0000000..ed77efe --- /dev/null +++ b/src/components/marginals/Navbar/styles.js @@ -0,0 +1,82 @@ +import styled from "styled-components"; + +export const Button = styled.button` + display: none; + border: none; + font-size: 20px; + flex-direction: column; + cursor: pointer; + @media (max-width: 768px) { + display: flex; + } +`; + +export const MenuLink = styled.a` + padding: 1rem 2rem; + cursor: pointer; + text-align: center; + text-decoration: none; + color: #67bc98; + transition: all 0.3s ease-in; + font-size: 0.9rem; + &:hover { + color: #7b7fda; + } +`; + +export const Nav = styled.div` + padding: 0 2rem; + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + background: white; + position: absolute; + top: 0; + left: 0; + right: 0; +`; + +export const Logo = styled.img` + width: 9rem; +`; + +export const Menu = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + position: relative; + @media (max-width: 768px) { + overflow: hidden; + flex-direction: column; + max-height: ${({ isOpen }) => (isOpen ? "300px" : "0")}; + transition: max-height 0.3s ease-in; + width: 100%; + } +`; + +export const Hamburger = styled.div` + display: none; + flex-direction: column; + cursor: pointer; + span { + height: 2px; + width: 25px; + background: #7b7fda; + margin-bottom: 4px; + border-radius: 5px; + } + @media (max-width: 768px) { + display: flex; + } +`; + +export const Items = styled.li` + text-decoration: none; + list-style: none; + color: black; + padding: 0 10px; + margin: 0 10px; + cursor: pointer; + text-transform: capitalize; +`; \ No newline at end of file diff --git a/config/content/footer.js b/src/config/content/footer.js similarity index 100% rename from config/content/footer.js rename to src/config/content/footer.js diff --git a/src/config/content/index.js b/src/config/content/index.js new file mode 100644 index 0000000..6754094 --- /dev/null +++ b/src/config/content/index.js @@ -0,0 +1,4 @@ +export { default as landingpage } from './landingpage'; +export { default as footer } from './footer'; +export { default as manifesto } from './manifesto'; +export { default as navbar } from './navbar'; \ No newline at end of file diff --git a/config/content/landingpage.js b/src/config/content/landingpage.js similarity index 100% rename from config/content/landingpage.js rename to src/config/content/landingpage.js diff --git a/config/content/manifesto.js b/src/config/content/manifesto.js similarity index 100% rename from config/content/manifesto.js rename to src/config/content/manifesto.js diff --git a/config/content/navbar.js b/src/config/content/navbar.js similarity index 87% rename from config/content/navbar.js rename to src/config/content/navbar.js index 40495da..c148dd0 100644 --- a/config/content/navbar.js +++ b/src/config/content/navbar.js @@ -1,9 +1,13 @@ +import { faBars, faXmark } from '@fortawesome/free-solid-svg-icons'; + export default { title: 'Navbar', logo: { src: 'https://res.cloudinary.com/dh6j2zoog/image/upload/v1655702059/CiS/logo_ch4fzv.png', alt: 'Code Is Science', }, + icon: faBars, + icon2: faXmark, navItems: [ { id: 'home', diff --git a/config/seo.js b/src/config/seo.js similarity index 100% rename from config/seo.js rename to src/config/seo.js diff --git a/src/index.js b/src/index.js index 2e4afe3..f2aacb1 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,12 @@ +/* eslint-disable no-unused-vars */ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import 'bootstrap/dist/css/bootstrap.min.css'; -import { Route, BrowserRouter as Router, Switch, Redirect } from 'react-router-dom'; +import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom'; import { Journal, Contact, Manifesto, Home } from './pages'; -import { Footer, Login, SignUp, Header, Navbar } from './components'; +import { Footer, Login, SignUp, Header } from './components'; +import Navbar from './components/marginals/Navbar/Navbar'; function App() { return ( @@ -17,9 +19,9 @@ function App() { - +