From 152c8b6c650c8028a1de3107f5b5e7afcc1e439a Mon Sep 17 00:00:00 2001 From: Jean Carlo Hilger Date: Sun, 14 Feb 2021 15:28:00 -0300 Subject: [PATCH 1/2] feat: adds header component --- gatsby-config.js | 1 + package-lock.json | 46 +++++++++++++++++++++++++-- package.json | 1 + src/components/Header/header.scss | 14 ++++++++ src/components/Header/index.jsx | 16 ++++++++++ src/pages/index.js | 6 +++- src/styles/global.css | 8 ++++- static/images/undraw_teacher_35j2.svg | 1 + 8 files changed, 89 insertions(+), 4 deletions(-) create mode 100644 src/components/Header/header.scss create mode 100644 src/components/Header/index.jsx create mode 100644 static/images/undraw_teacher_35j2.svg diff --git a/gatsby-config.js b/gatsby-config.js index 303ab45..b4f229a 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -9,5 +9,6 @@ module.exports = { plugins: [ "gatsby-plugin-sass", "gatsby-plugin-postcss", + "gatsby-plugin-scroll-reveal", ], } diff --git a/package-lock.json b/package-lock.json index 0581e62..54ffad7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,10 @@ { - "name": "gatsby-starter-hello-world", + "name": "uffsnlp.github.io", "version": "0.1.0", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "gatsby-starter-hello-world", "version": "0.1.0", "license": "0BSD", "dependencies": { @@ -13,6 +12,7 @@ "gatsby": "^2.26.1", "gatsby-plugin-postcss": "^3.7.0", "gatsby-plugin-sass": "^3.2.0", + "gatsby-plugin-scroll-reveal": "^0.0.7", "postcss": "^8.2.6", "react": "^16.12.0", "react-dom": "^16.12.0", @@ -8268,6 +8268,19 @@ "sass": "^1.30.0" } }, + "node_modules/gatsby-plugin-scroll-reveal": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/gatsby-plugin-scroll-reveal/-/gatsby-plugin-scroll-reveal-0.0.7.tgz", + "integrity": "sha512-G9slNyz7WNVMwBeGXnQ/FhJc61Q9THkvUIAlft4Uws4QJKn0OdvsDqUAUQkTGKU8hkHhaMAKiugL/8gRYuAZZA==", + "dependencies": { + "intersection-observer": "^0.7.0", + "sal.js": "^0.6.2" + }, + "peerDependencies": { + "gatsby": ">=2.0.0", + "react": "^16.8.0" + } + }, "node_modules/gatsby-plugin-typescript": { "version": "2.6.0", "resolved": "https://registry.npmjs.org/gatsby-plugin-typescript/-/gatsby-plugin-typescript-2.6.0.tgz", @@ -9969,6 +9982,11 @@ "node": ">= 0.4" } }, + "node_modules/intersection-observer": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.7.0.tgz", + "integrity": "sha512-Id0Fij0HsB/vKWGeBe9PxeY45ttRiBmhFyyt/geBdDHBYNctMRTE3dC1U3ujzz3lap+hVXlEcVaB56kZP/eEUg==" + }, "node_modules/into-stream": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/into-stream/-/into-stream-3.1.0.tgz", @@ -16632,6 +16650,11 @@ "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, + "node_modules/sal.js": { + "version": "0.6.6", + "resolved": "https://registry.npmjs.org/sal.js/-/sal.js-0.6.6.tgz", + "integrity": "sha512-XuhEEHRnzWMKGTC3ndZ0pCXPA5xU2rrPhFbb82EIq7M3ctjkJIg/AxnnQwPvn7IZ+I2Ku6kaqNOuA64anDwEjg==" + }, "node_modules/sass": { "version": "1.32.7", "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.7.tgz", @@ -27861,6 +27884,15 @@ "sass-loader": "^10.1.0" } }, + "gatsby-plugin-scroll-reveal": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/gatsby-plugin-scroll-reveal/-/gatsby-plugin-scroll-reveal-0.0.7.tgz", + "integrity": "sha512-G9slNyz7WNVMwBeGXnQ/FhJc61Q9THkvUIAlft4Uws4QJKn0OdvsDqUAUQkTGKU8hkHhaMAKiugL/8gRYuAZZA==", + "requires": { + "intersection-observer": "^0.7.0", + "sal.js": "^0.6.2" + } + }, "gatsby-plugin-typescript": { "version": "2.6.0", "resolved": "https://registry.npmjs.org/gatsby-plugin-typescript/-/gatsby-plugin-typescript-2.6.0.tgz", @@ -29054,6 +29086,11 @@ "side-channel": "^1.0.2" } }, + "intersection-observer": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.7.0.tgz", + "integrity": "sha512-Id0Fij0HsB/vKWGeBe9PxeY45ttRiBmhFyyt/geBdDHBYNctMRTE3dC1U3ujzz3lap+hVXlEcVaB56kZP/eEUg==" + }, "into-stream": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/into-stream/-/into-stream-3.1.0.tgz", @@ -34403,6 +34440,11 @@ "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, + "sal.js": { + "version": "0.6.6", + "resolved": "https://registry.npmjs.org/sal.js/-/sal.js-0.6.6.tgz", + "integrity": "sha512-XuhEEHRnzWMKGTC3ndZ0pCXPA5xU2rrPhFbb82EIq7M3ctjkJIg/AxnnQwPvn7IZ+I2Ku6kaqNOuA64anDwEjg==" + }, "sass": { "version": "1.32.7", "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.7.tgz", diff --git a/package.json b/package.json index 6947177..71f293e 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "gatsby": "^2.26.1", "gatsby-plugin-postcss": "^3.7.0", "gatsby-plugin-sass": "^3.2.0", + "gatsby-plugin-scroll-reveal": "^0.0.7", "postcss": "^8.2.6", "react": "^16.12.0", "react-dom": "^16.12.0", diff --git a/src/components/Header/header.scss b/src/components/Header/header.scss new file mode 100644 index 0000000..0233036 --- /dev/null +++ b/src/components/Header/header.scss @@ -0,0 +1,14 @@ + +.header { + position: relative; + width: 100%; + height: 100vh; + background-color: #e1e1e1; + display: flex; + align-items: center; + padding: 1rem; + + // __content { + + // } +} \ No newline at end of file diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx new file mode 100644 index 0000000..8fd2203 --- /dev/null +++ b/src/components/Header/index.jsx @@ -0,0 +1,16 @@ +import React, { Component } from 'react'; +import "./header.scss" + +class Header extends Component { + render() { + return ( +
+
+ { this.props.children } +
+
+ ); + } +} + +export default Header; \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index 2334a4c..e6047f2 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,9 +1,13 @@ import React, { Component } from "react" +import Header from "../components/Header" export default class IndexPage extends Component { render() { return ( -
+
+
+

Laboris fugiat labore Lorem aute adipisicing non sit duis eiusmod excepteur dolore fugiat sit. Aute deserunt sunt laboris velit aliquip voluptate nostrud esse qui laborum culpa. Sint nisi veniam id consectetur id laboris culpa nisi. Incididunt do ea aliquip est consectetur culpa aliquip incididunt adipisicing. Sunt elit minim mollit sunt cillum fugiat voluptate minim.

+
- +
+
+ +

Consequat minim ipsum exercitation minim. Ad dolor consectetur incididunt exercitation in adipisicing nisi nisi anim reprehenderit. Cillum laboris ut excepteur non minim. + +Ipsum non fugiat culpa cupidatat. Occaecat nisi cillum dolore ipsum. Fugiat est id adipisicing ut aliquip amet cillum incididunt proident ea pariatur minim. Laborum eiusmod enim aliqua amet culpa qui anim irure aliquip ut minim culpa cupidatat. Cupidatat consequat proident nostrud elit dolore laborum. Cillum cupidatat nisi commodo velit sint duis enim eiusmod amet nostrud aute. Sit minim veniam elit proident nisi velit. + +Dolore ipsum nisi labore non fugiat minim irure dolor voluptate consequat ad aute. Minim aute fugiat dolor elit incididunt excepteur fugiat ullamco aute occaecat. Eu qui aute nisi dolore officia ad Lorem. Esse non do deserunt ullamco excepteur amet. Do elit aute officia labore esse id aute nisi qui. Non minim aliqua eu proident minim dolore labore in. + +Esse proident enim consectetur do do. Velit nulla Lorem quis consectetur nisi officia voluptate commodo elit. Excepteur consequat anim officia anim culpa id eiusmod sunt sit consequat officia pariatur excepteur. Veniam occaecat aliquip consectetur consectetur sint aute deserunt ea aliqua officia. + +Adipisicing excepteur non enim ea. Sunt aliqua laboris non nulla minim exercitation deserunt eu sint officia id fugiat cillum duis. Nisi non veniam cillum esse excepteur. Non ipsum qui quis adipisicing cillum officia Lorem enim amet commodo. + +Cupidatat commodo veniam ex ad. Eu ut est ut excepteur officia ea minim excepteur amet pariatur cupidatat. Nostrud do enim est quis quis est cupidatat culpa dolor deserunt sint. Occaecat quis velit id id consequat nisi magna consectetur magna et qui mollit sunt laborum. Ad fugiat est aliqua do elit minim. Irure fugiat veniam irure exercitation nostrud exercitation veniam est eiusmod non occaecat amet.

) } diff --git a/src/styles/global.scss b/src/styles/global.scss deleted file mode 100644 index 5563f05..0000000 --- a/src/styles/global.scss +++ /dev/null @@ -1 +0,0 @@ -@import "bootstrap/scss/bootstrap-grid.scss" \ No newline at end of file