From 4cc46f177d77f311ebe9cc1c72583c7e2d1b12f4 Mon Sep 17 00:00:00 2001
From: camilo micheletto
Date: Sat, 20 Mar 2021 21:53:16 -0300
Subject: [PATCH 1/7] added Sass dependecies
---
next.config.js | 4 ++++
package.json | 1 +
yarn.lock | 37 ++++++++++++++++++++++---------------
3 files changed, 27 insertions(+), 15 deletions(-)
diff --git a/next.config.js b/next.config.js
index 329b8f6..7ad4c19 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,8 +1,12 @@
// eslint-disable-next-line @typescript-eslint/no-var-requires
const withPWA = require('next-pwa')
+const path = require('path')
module.exports = withPWA({
pwa: {
dest: 'public'
+ },
+ sassOptions: {
+ includePaths: [path.join(__dirname, 'styles')]
}
})
diff --git a/package.json b/package.json
index 58703f9..ceb81b7 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
"react": "17.0.1",
"react-dom": "17.0.1",
"react-highlight": "^0.13.0",
+ "sass": "^1.32.8",
"styled-components": "^5.2.1"
},
"devDependencies": {
diff --git a/yarn.lock b/yarn.lock
index 552f990..dccfa14 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2850,6 +2850,21 @@ chokidar@3.4.3:
optionalDependencies:
fsevents "~2.1.2"
+"chokidar@>=2.0.0 <4.0.0", chokidar@^3.4.1:
+ version "3.5.1"
+ resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a"
+ integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==
+ dependencies:
+ anymatch "~3.1.1"
+ braces "~3.0.2"
+ glob-parent "~5.1.0"
+ is-binary-path "~2.1.0"
+ is-glob "~4.0.1"
+ normalize-path "~3.0.0"
+ readdirp "~3.5.0"
+ optionalDependencies:
+ fsevents "~2.3.1"
+
chokidar@^2.1.8:
version "2.1.8"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
@@ -2869,21 +2884,6 @@ chokidar@^2.1.8:
optionalDependencies:
fsevents "^1.2.7"
-chokidar@^3.4.1:
- version "3.5.1"
- resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a"
- integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==
- dependencies:
- anymatch "~3.1.1"
- braces "~3.0.2"
- glob-parent "~5.1.0"
- is-binary-path "~2.1.0"
- is-glob "~4.0.1"
- normalize-path "~3.0.0"
- readdirp "~3.5.0"
- optionalDependencies:
- fsevents "~2.3.1"
-
chownr@^1.1.1:
version "1.1.4"
resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
@@ -7674,6 +7674,13 @@ sass-loader@10.0.5:
schema-utils "^3.0.0"
semver "^7.3.2"
+sass@^1.32.8:
+ version "1.32.8"
+ resolved "https://registry.yarnpkg.com/sass/-/sass-1.32.8.tgz#f16a9abd8dc530add8834e506878a2808c037bdc"
+ integrity sha512-Sl6mIeGpzjIUZqvKnKETfMf0iDAswD9TNlv13A7aAF3XZlRPMq4VvJWBC2N2DXbp94MQVdNSFG6LfF/iOXrPHQ==
+ dependencies:
+ chokidar ">=2.0.0 <4.0.0"
+
saxes@^5.0.0:
version "5.0.1"
resolved "https://registry.yarnpkg.com/saxes/-/saxes-5.0.1.tgz#eebab953fa3b7608dbe94e5dadb15c888fa6696d"
From 70bda5ed82bf3d024ebd6c0d281f351eee91f34f Mon Sep 17 00:00:00 2001
From: camilo micheletto
Date: Sat, 20 Mar 2021 21:54:23 -0300
Subject: [PATCH 2/7] added base Sass styling
---
styles/base/_colors.scss | 4 ++
styles/base/_index.scss | 3 ++
styles/base/_mixins.scss | 44 ++++++++++++++++++++
styles/base/_reset.scss | 77 +++++++++++++++++++++++++++++++++++
styles/components/_index.scss | 2 +
styles/main.scss | 1 +
6 files changed, 131 insertions(+)
create mode 100644 styles/base/_colors.scss
create mode 100644 styles/base/_index.scss
create mode 100644 styles/base/_mixins.scss
create mode 100644 styles/base/_reset.scss
create mode 100644 styles/components/_index.scss
create mode 100644 styles/main.scss
diff --git a/styles/base/_colors.scss b/styles/base/_colors.scss
new file mode 100644
index 0000000..e5c7d24
--- /dev/null
+++ b/styles/base/_colors.scss
@@ -0,0 +1,4 @@
+$black: #1a1a1a;
+$white: #ffffff;
+$lilac: #543DC9;
+$blue: #4E7CFC;
\ No newline at end of file
diff --git a/styles/base/_index.scss b/styles/base/_index.scss
new file mode 100644
index 0000000..41a019f
--- /dev/null
+++ b/styles/base/_index.scss
@@ -0,0 +1,3 @@
+@forward './colors.scss';
+@forward './mixins.scss';
+@forward './reset.scss';
diff --git a/styles/base/_mixins.scss b/styles/base/_mixins.scss
new file mode 100644
index 0000000..470b73f
--- /dev/null
+++ b/styles/base/_mixins.scss
@@ -0,0 +1,44 @@
+@use './colors' as *;
+
+@mixin sidebar-template($direction) {
+ content: '';
+ position: absolute;
+ left: 0;
+ transition: transform 0.2s ease-in;
+
+ // Se for usado como @include sidebar-template(top)
+ @if $direction == top {
+ width: 16px;
+ height: 100%;
+ bottom: -16px;
+ background-image: linear-gradient(
+ to top,
+ $lilac 50%,
+ $blue
+ );
+
+ transform-origin: bottom;
+ transform: scaleY(.2);
+
+ // Se for usado como @include sidebar-template(bottom)
+ } @else if $direction == bottom {
+ width: 50%;
+ height: 16px;
+ bottom: -16px;
+ background-image: linear-gradient(
+ 90deg,
+ #543DC9 50%,
+ #4E7CFC
+ );
+
+ transform-origin: left;
+ transform: scaleX(.15);
+ }
+}
+
+@mixin touch-support($width: 320px) {
+ // Se for maior que largura $width e tiver suporte a hover
+ @media (min-width: $width) and (hover: hover) {
+ @content;
+ }
+}
\ No newline at end of file
diff --git a/styles/base/_reset.scss b/styles/base/_reset.scss
new file mode 100644
index 0000000..f423582
--- /dev/null
+++ b/styles/base/_reset.scss
@@ -0,0 +1,77 @@
+// From Picalli modern CSS reset
+// https://piccalil.li/blog/a-modern-css-reset
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+ margin: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role='list'],
+ol[role='list'] {
+ list-style: none;
+}
+
+/* Set core root defaults */
+html:focus-within {
+ scroll-behavior: smooth;
+}
+
+/* Set core body defaults */
+body {
+ min-height: 100vh;
+ text-rendering: optimizeSpeed;
+ line-height: 1.5;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+ text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+ max-width: 100%;
+ display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+ font: inherit;
+}
+
+/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+ html:focus-within {
+ scroll-behavior: auto;
+ }
+
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ scroll-behavior: auto !important;
+ }
+}
diff --git a/styles/components/_index.scss b/styles/components/_index.scss
new file mode 100644
index 0000000..732a7ee
--- /dev/null
+++ b/styles/components/_index.scss
@@ -0,0 +1,2 @@
+@forward './PostTemplate';
+@forward './PostContainer';
\ No newline at end of file
diff --git a/styles/main.scss b/styles/main.scss
new file mode 100644
index 0000000..0556091
--- /dev/null
+++ b/styles/main.scss
@@ -0,0 +1 @@
+@use './components/' as *;
\ No newline at end of file
From 495f2611abbfe367cf1339d10815b47fc7cf1814 Mon Sep 17 00:00:00 2001
From: camilo micheletto
Date: Sat, 20 Mar 2021 21:55:09 -0300
Subject: [PATCH 3/7] added post and post container components and styling
---
components/PostContainer/index.jsx | 21 ++++++++++++
components/PostTemplate/index.jsx | 19 +++++++++++
pages/_app.js | 1 +
pages/index.js | 21 ++----------
public/postList.js | 15 ++++++++
public/sw.js.map | 2 +-
styles/components/_PostContainer.scss | 8 +++++
styles/components/_PostTemplate.scss | 49 +++++++++++++++++++++++++++
8 files changed, 116 insertions(+), 20 deletions(-)
create mode 100644 components/PostContainer/index.jsx
create mode 100644 components/PostTemplate/index.jsx
create mode 100644 public/postList.js
create mode 100644 styles/components/_PostContainer.scss
create mode 100644 styles/components/_PostTemplate.scss
diff --git a/components/PostContainer/index.jsx b/components/PostContainer/index.jsx
new file mode 100644
index 0000000..08c99ab
--- /dev/null
+++ b/components/PostContainer/index.jsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import postList from '../../public/postList'
+import PostTemplate from '../PostTemplate'
+
+function PostContainer() {
+ return (
+
+ {postList &&
+ postList.map((post, ind) => (
+
+ ))}
+
+ )
+}
+
+export default PostContainer
diff --git a/components/PostTemplate/index.jsx b/components/PostTemplate/index.jsx
new file mode 100644
index 0000000..8639577
--- /dev/null
+++ b/components/PostTemplate/index.jsx
@@ -0,0 +1,19 @@
+import Link from 'next/link'
+import React from 'react'
+
+function PostTemplate(props) {
+ return (
+
+
+
+ {props.description}
+
+
+ )
+}
+
+export default PostTemplate
diff --git a/pages/_app.js b/pages/_app.js
index 1e1cec9..4e0281f 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,4 +1,5 @@
import '../styles/globals.css'
+import '../styles/main.scss'
function MyApp({ Component, pageProps }) {
return
diff --git a/pages/index.js b/pages/index.js
index f95b2ab..28ab217 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,7 +1,7 @@
import Head from 'next/head'
import styles from '../styles/Home.module.css'
-import Link from 'next/link'
import Image from 'next/image'
+import PostContainer from '../components/PostContainer'
export default function Home() {
return (
@@ -27,24 +27,7 @@ export default function Home() {
Artigos em inglês traduzidos para pt-BR.
-
+
diff --git a/public/postList.js b/public/postList.js
new file mode 100644
index 0000000..67189c0
--- /dev/null
+++ b/public/postList.js
@@ -0,0 +1,15 @@
+const postList = [
+ {
+ link:"/posts/17-dicas-otimizacao-javascript",
+ title:"17 dicas de otimização de Javascript para conhecer em 2021",
+ description:"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus impedit vero eveniet adipisci dicta alias."
+ },
+ {
+ link:"/posts/lazy-loading-nativo-de-imagens-sem-javascript",
+ title:"Lazy-loading nativo de imagens sem Javascript",
+ description:"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus impedit vero eveniet adipisci dicta alias."
+ }
+
+]
+
+export default postList
\ No newline at end of file
diff --git a/public/sw.js.map b/public/sw.js.map
index 6396669..9b50969 100644
--- a/public/sw.js.map
+++ b/public/sw.js.map
@@ -1 +1 @@
-{"version":3,"file":"sw.js","sources":["../../../../private/var/folders/1z/01j8x05d1w76z8d6rxdlrvpc0000gn/T/c4157e06c49d23f57cd3848be714340d/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/Users/diego.griep/Projects/tecla-sap/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from '/Users/diego.griep/Projects/tecla-sap/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {skipWaiting as workbox_core_skipWaiting} from '/Users/diego.griep/Projects/tecla-sap/node_modules/workbox-core/skipWaiting.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/Users/diego.griep/Projects/tecla-sap/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n \n);\n\n\n\n\n\n\n\nworkbox_core_skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\n"],"names":["importScripts","workbox_core_skipWaiting","workbox_core_clientsClaim","workbox_routing_registerRoute","workbox_strategies_NetworkOnly","plugins"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAG2I;EAC3I;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;EAGAA,aAAa;AAUbC,qBAAwB;AAExBC,sBAAyB;AAIzBC,uBAA6B,CAAC,KAAD,EAAQ,IAAIC,mBAAJ,CAAmC;EAAE,eAAY,KAAd;EAAqBC,EAAAA,OAAO,EAAE;EAA9B,CAAnC,CAAR,EAAgF,KAAhF,CAA7B;;"}
\ No newline at end of file
+{"version":3,"file":"sw.js","sources":["../../../../../tmp/3cc71c213fd971de3d83cecb25ec32e9/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {skipWaiting as workbox_core_skipWaiting} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-core/skipWaiting.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n \n);\n\n\n\n\n\n\n\nworkbox_core_skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\n"],"names":["importScripts","workbox_core_skipWaiting","workbox_core_clientsClaim","workbox_routing_registerRoute","workbox_strategies_NetworkOnly","plugins"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAG0I;EAC1I;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;EAGAA,aAAa;AAUbC,qBAAwB;AAExBC,sBAAyB;AAIzBC,uBAA6B,CAAC,KAAD,EAAQ,IAAIC,mBAAJ,CAAmC;EAAE,eAAY,KAAd;EAAqBC,EAAAA,OAAO,EAAE;EAA9B,CAAnC,CAAR,EAAgF,KAAhF,CAA7B;;"}
\ No newline at end of file
diff --git a/styles/components/_PostContainer.scss b/styles/components/_PostContainer.scss
new file mode 100644
index 0000000..5fcb1ad
--- /dev/null
+++ b/styles/components/_PostContainer.scss
@@ -0,0 +1,8 @@
+@use '../base/' as *;
+
+.posts {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+ gap: 30px;
+ place-items: start center;
+}
\ No newline at end of file
diff --git a/styles/components/_PostTemplate.scss b/styles/components/_PostTemplate.scss
new file mode 100644
index 0000000..ccad6ba
--- /dev/null
+++ b/styles/components/_PostTemplate.scss
@@ -0,0 +1,49 @@
+@use '../base' as *;
+
+.card {
+ display: grid;
+ gap: 2ch;
+ width: clamp(310px, 90%, 600px);
+ padding: 0 0 1ch 3ch;
+
+ position: relative;
+
+ color: $black;
+ font-family: 'Inter', sans-serif;
+ line-height: 1.4;
+
+ cursor: pointer;
+
+ @media (max-width: 420px) {
+ padding: 0 0 1ch 1ch;
+ }
+
+ &__link {
+ transition: color 0.3s ease-in;
+ &:hover {
+ color: $lilac;
+ }
+ }
+
+ &:hover {
+ /* Ao fazer o hover sobre o elemento as bordas irão reagir
+ mas só se não houver configuração de reduced motion*/
+ @media (prefers-reduced-motion: no-preference) {
+ &::before {
+ transform: scaleY(1);
+ }
+ &::after {
+ transform: scaleX(1);
+ }
+ }
+ }
+ /* Estilos da borda não aparecerão em dispositivos de toque*/
+ @include touch-support() {
+ &::after {
+ @include sidebar-template(bottom);
+ }
+ &::before {
+ @include sidebar-template(top);
+ }
+ }
+}
From 2372bd1adc2da9df4ae52d0466bf47df9e0b91cf Mon Sep 17 00:00:00 2001
From: camilo micheletto
Date: Mon, 22 Mar 2021 14:17:29 -0300
Subject: [PATCH 4/7] updated caniuse local dependencies
---
yarn.lock | 13 ++++---------
1 file changed, 4 insertions(+), 9 deletions(-)
diff --git a/yarn.lock b/yarn.lock
index dccfa14..94f4137 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2775,15 +2775,10 @@ camelize@^1.0.0:
resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
-caniuse-lite@^1.0.30001093, caniuse-lite@^1.0.30001113, caniuse-lite@^1.0.30001154:
- version "1.0.30001190"
- resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001190.tgz#acc6d4a53c68be16cfc314d55c9cab637e558cba"
- integrity sha512-62KVw474IK8E+bACBYhRS0/L6o/1oeAVkpF2WetjV58S5vkzNh0/Rz3lD8D4YCbOTqi0/aD4X3LtoP7V5xnuAg==
-
-caniuse-lite@^1.0.30001181:
- version "1.0.30001191"
- resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001191.tgz#bacb432b6701f690c8c5f7c680166b9a9f0843d9"
- integrity sha512-xJJqzyd+7GCJXkcoBiQ1GuxEiOBCLQ0aVW9HMekifZsAVGdj5eJ4mFB9fEhSHipq9IOk/QXFJUiIr9lZT+EsGw==
+caniuse-lite@^1.0.30001093, caniuse-lite@^1.0.30001113, caniuse-lite@^1.0.30001154, caniuse-lite@^1.0.30001181:
+ version "1.0.30001203"
+ resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001203.tgz"
+ integrity sha512-/I9tvnzU/PHMH7wBPrfDMSuecDeUKerjCPX7D0xBbaJZPxoT9m+yYxt0zCTkcijCkjTdim3H56Zm0i5Adxch4w==
capture-exit@^2.0.0:
version "2.0.0"
From 63146f98766c68e415e68502788da9c3a30512c6 Mon Sep 17 00:00:00 2001
From: camilo micheletto
Date: Mon, 22 Mar 2021 14:19:04 -0300
Subject: [PATCH 5/7] componentized landing page and added to the index
---
components/LandingLayout/index.jsx | 7 +++++
components/MainFooter/index.jsx | 14 +++++++++
components/MainHeader/index.jsx | 19 ++++++++++++
components/MainLogo/index.jsx | 50 ++++++++++++++++++++++++++++++
components/PostTemplate/index.jsx | 8 +++--
pages/index.js | 39 +++++++----------------
public/sw.js.map | 2 +-
7 files changed, 109 insertions(+), 30 deletions(-)
create mode 100644 components/LandingLayout/index.jsx
create mode 100644 components/MainFooter/index.jsx
create mode 100644 components/MainHeader/index.jsx
create mode 100644 components/MainLogo/index.jsx
diff --git a/components/LandingLayout/index.jsx b/components/LandingLayout/index.jsx
new file mode 100644
index 0000000..8192372
--- /dev/null
+++ b/components/LandingLayout/index.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+function LandingLayout(props) {
+ return {props.children}
+}
+
+export default LandingLayout
diff --git a/components/MainFooter/index.jsx b/components/MainFooter/index.jsx
new file mode 100644
index 0000000..79cab94
--- /dev/null
+++ b/components/MainFooter/index.jsx
@@ -0,0 +1,14 @@
+import React from 'react'
+
+function MainFooter() {
+ const getYears = () => {
+ const creationYear = '2021'
+ const actualYear = new Date().getFullYear()
+ return actualYear > creationYear
+ ? `${creationYear} - ${actualYear}`
+ : `${creationYear}`
+ }
+ return
+}
+
+export default MainFooter
diff --git a/components/MainHeader/index.jsx b/components/MainHeader/index.jsx
new file mode 100644
index 0000000..ecfb277
--- /dev/null
+++ b/components/MainHeader/index.jsx
@@ -0,0 +1,19 @@
+import Image from 'next/image'
+import React from 'react'
+import MainLogo from '../MainLogo'
+
+function MainHeader() {
+ return (
+
+ )
+}
+
+export default MainHeader
diff --git a/components/MainLogo/index.jsx b/components/MainLogo/index.jsx
new file mode 100644
index 0000000..bc6f55b
--- /dev/null
+++ b/components/MainLogo/index.jsx
@@ -0,0 +1,50 @@
+import React from 'react'
+
+function MainLogo() {
+ // return Tecla Sap
+ return (
+
+ )
+}
+
+export default MainLogo
diff --git a/components/PostTemplate/index.jsx b/components/PostTemplate/index.jsx
index 8639577..9fd67a7 100644
--- a/components/PostTemplate/index.jsx
+++ b/components/PostTemplate/index.jsx
@@ -6,11 +6,15 @@ function PostTemplate(props) {
- {props.description}
+ {props.description}
)
diff --git a/pages/index.js b/pages/index.js
index 28ab217..1bc1c22 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,36 +1,21 @@
import Head from 'next/head'
-import styles from '../styles/Home.module.css'
-import Image from 'next/image'
import PostContainer from '../components/PostContainer'
+import MainFooter from '../components/MainFooter/MainFooter'
+import LandingLayout from '../components/LandingLayout'
+import MainHeader from '../components/MainHeader'
export default function Home() {
return (
<>
-
-
-
-
- Tecla SAP
-
-
- Artigos em inglês traduzidos para pt-BR.
-
-
-
-
-
-
+
+ Tecla SAP
+
+
+
+
+
+
+
>
)
}
diff --git a/public/sw.js.map b/public/sw.js.map
index 9b50969..8104ab0 100644
--- a/public/sw.js.map
+++ b/public/sw.js.map
@@ -1 +1 @@
-{"version":3,"file":"sw.js","sources":["../../../../../tmp/3cc71c213fd971de3d83cecb25ec32e9/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {skipWaiting as workbox_core_skipWaiting} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-core/skipWaiting.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n \n);\n\n\n\n\n\n\n\nworkbox_core_skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\n"],"names":["importScripts","workbox_core_skipWaiting","workbox_core_clientsClaim","workbox_routing_registerRoute","workbox_strategies_NetworkOnly","plugins"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAG0I;EAC1I;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;EAGAA,aAAa;AAUbC,qBAAwB;AAExBC,sBAAyB;AAIzBC,uBAA6B,CAAC,KAAD,EAAQ,IAAIC,mBAAJ,CAAmC;EAAE,eAAY,KAAd;EAAqBC,EAAAA,OAAO,EAAE;EAA9B,CAAnC,CAAR,EAAgF,KAAhF,CAA7B;;"}
\ No newline at end of file
+{"version":3,"file":"sw.js","sources":["../../../../../tmp/ba0e9132f7f8993abf56abcf50936c91/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {skipWaiting as workbox_core_skipWaiting} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-core/skipWaiting.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n \n);\n\n\n\n\n\n\n\nworkbox_core_skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\n"],"names":["importScripts","workbox_core_skipWaiting","workbox_core_clientsClaim","workbox_routing_registerRoute","workbox_strategies_NetworkOnly","plugins"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAG0I;EAC1I;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;EAGAA,aAAa;AAUbC,qBAAwB;AAExBC,sBAAyB;AAIzBC,uBAA6B,CAAC,KAAD,EAAQ,IAAIC,mBAAJ,CAAmC;EAAE,eAAY,KAAd;EAAqBC,EAAAA,OAAO,EAAE;EAA9B,CAAnC,CAAR,EAAgF,KAAhF,CAA7B;;"}
\ No newline at end of file
From bdae273e0943cfc9e44ff10ac07f6e3f884c1615 Mon Sep 17 00:00:00 2001
From: camilo micheletto
Date: Mon, 22 Mar 2021 14:21:19 -0300
Subject: [PATCH 6/7] styled the new components and updated the base styling
---
public/logo.svg | 1 +
styles/base/_colors.scss | 15 ++++++++---
styles/base/_fonts.scss | 36 +++++++++++++++++++++++++
styles/base/_index.scss | 3 +++
styles/base/_mixins.scss | 33 +++++++++++++++++++----
styles/components/_LandingLayout.scss | 15 +++++++++++
styles/components/_MainFooter.scss | 8 ++++++
styles/components/_MainHeader.scss | 24 +++++++++++++++++
styles/components/_MainLogo.scss | 38 +++++++++++++++++++++++++++
styles/components/_PostContainer.scss | 3 +++
styles/components/_PostTemplate.scss | 23 +++++++++++-----
styles/components/_index.scss | 7 ++++-
styles/main.scss | 3 ++-
styles/utilities/_fonts.scss | 8 ++++++
styles/utilities/_index.scss | 1 +
15 files changed, 201 insertions(+), 17 deletions(-)
create mode 100644 public/logo.svg
create mode 100644 styles/base/_fonts.scss
create mode 100644 styles/components/_LandingLayout.scss
create mode 100644 styles/components/_MainFooter.scss
create mode 100644 styles/components/_MainHeader.scss
create mode 100644 styles/components/_MainLogo.scss
create mode 100644 styles/utilities/_fonts.scss
create mode 100644 styles/utilities/_index.scss
diff --git a/public/logo.svg b/public/logo.svg
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/public/logo.svg
@@ -0,0 +1 @@
+
diff --git a/styles/base/_colors.scss b/styles/base/_colors.scss
index e5c7d24..b7007de 100644
--- a/styles/base/_colors.scss
+++ b/styles/base/_colors.scss
@@ -1,4 +1,11 @@
-$black: #1a1a1a;
-$white: #ffffff;
-$lilac: #543DC9;
-$blue: #4E7CFC;
\ No newline at end of file
+$black: #1a1a1a !default;
+$white: #ffffff !default;
+$lilac: #543DC9 !default;
+$blue: #4E7CFC !default;
+$green: #B9F2E7 !default;
+
+$color-map:
+ "white" $white,
+ "black" $black;
+
+body { color: $black; }
\ No newline at end of file
diff --git a/styles/base/_fonts.scss b/styles/base/_fonts.scss
new file mode 100644
index 0000000..ec125d7
--- /dev/null
+++ b/styles/base/_fonts.scss
@@ -0,0 +1,36 @@
+$main-font: "Inter", sans-serif;
+
+
+$font-map: (
+ "heading-1": (
+ $main-font,
+ 2.9rem,
+ bold
+ ),
+ "heading-2": (
+ $main-font,
+ 1.8rem,
+ bold
+ ),
+ "subheading": (
+ $main-font,
+ 1.375rem,
+ 200
+ ),
+ "title": (
+ $main-font,
+ 1.05rem,
+ bold
+ ),
+ "text": (
+ $main-font,
+ 1rem,
+ 200
+ ),
+ "text-small": (
+ $main-font,
+ 0.75rem,
+ 200
+ )
+);
+
diff --git a/styles/base/_index.scss b/styles/base/_index.scss
index 41a019f..0595fef 100644
--- a/styles/base/_index.scss
+++ b/styles/base/_index.scss
@@ -1,3 +1,6 @@
@forward './colors.scss';
@forward './mixins.scss';
@forward './reset.scss';
+@forward './fonts.scss';
+
+
diff --git a/styles/base/_mixins.scss b/styles/base/_mixins.scss
index 470b73f..74fe2f7 100644
--- a/styles/base/_mixins.scss
+++ b/styles/base/_mixins.scss
@@ -1,12 +1,14 @@
@use './colors' as *;
+@use './fonts' as *;
-@mixin sidebar-template($direction) {
+// Mixin da animação lateral dos posts
+@mixin post-animation-template($direction) {
content: '';
position: absolute;
left: 0;
transition: transform 0.2s ease-in;
- // Se for usado como @include sidebar-template(top)
+ // Se for usado como @include post-animation-template(top)
@if $direction == top {
width: 16px;
height: 100%;
@@ -20,7 +22,7 @@
transform-origin: bottom;
transform: scaleY(.2);
- // Se for usado como @include sidebar-template(bottom)
+ // Se for usado como @include post-animation-template(bottom)
} @else if $direction == bottom {
width: 50%;
height: 16px;
@@ -36,9 +38,30 @@
}
}
-@mixin touch-support($width: 320px) {
+// Mixin que identifica telas com suporte p/ hover > que tamanho x
+@mixin touch-support($width: 460px) {
// Se for maior que largura $width e tiver suporte a hover
@media (min-width: $width) and (hover: hover) {
@content;
}
-}
\ No newline at end of file
+}
+
+// Pega um mapa de fontes e retorna em forma de propriedades css
+@mixin font-generator($font-name) {
+ $font: map-get($font-map, $font-name);
+ @if $font == null {
+ @error "Fonte #{$font-name} não disponível";
+ }
+ $family: nth($font, 1);
+ $size: nth($font, 2);
+ $weight: nth($font, 3);
+
+ font: {
+ family: $family;
+ size: $size;
+ weight: $weight;
+ }
+ line-height: 1.4;
+}
+
+
diff --git a/styles/components/_LandingLayout.scss b/styles/components/_LandingLayout.scss
new file mode 100644
index 0000000..b193f98
--- /dev/null
+++ b/styles/components/_LandingLayout.scss
@@ -0,0 +1,15 @@
+.main-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ inline-size: 100%;
+ min-block-size: 100vh;
+ gap: 20px;
+
+ // Melhoria contínua, as propriedades acima não tem suporte > 95%
+ @supports not ((inline-size: test) or (min-block-size: test)) {
+ width: 100%;
+ min-height: 100vh;
+ }
+}
\ No newline at end of file
diff --git a/styles/components/_MainFooter.scss b/styles/components/_MainFooter.scss
new file mode 100644
index 0000000..e7e5c43
--- /dev/null
+++ b/styles/components/_MainFooter.scss
@@ -0,0 +1,8 @@
+.footer {
+ height: 60px;
+ width: 100%;
+
+ display: grid;
+ place-items: center;
+ margin-top: auto;
+}
\ No newline at end of file
diff --git a/styles/components/_MainHeader.scss b/styles/components/_MainHeader.scss
new file mode 100644
index 0000000..77f831b
--- /dev/null
+++ b/styles/components/_MainHeader.scss
@@ -0,0 +1,24 @@
+@use '../base/' as *;
+
+.header {
+ display: grid;
+ place-items: center;
+ gap: 1ch 0;
+
+ height: clamp(210px, 60%, 320px);
+ padding-block: 2ch;
+
+ @supports not(padding-block: 2ch) {
+ padding: 2ch 0;
+ }
+
+ // background: $lilac;
+
+ text-align: center;
+ &__logo {
+ object-fit: contain;
+ }
+ &__title {
+ color: $lilac;
+ }
+}
\ No newline at end of file
diff --git a/styles/components/_MainLogo.scss b/styles/components/_MainLogo.scss
new file mode 100644
index 0000000..046696f
--- /dev/null
+++ b/styles/components/_MainLogo.scss
@@ -0,0 +1,38 @@
+@use '../base/' as *;
+
+#Path_26 {
+ stroke-dasharray: 1250;
+ stroke-dashoffset: 0;
+ animation: animate-stroke 1s forwards ease-in 1.2s;
+}
+
+#Path_27 {
+ stroke-dasharray: 1250;
+ stroke-dashoffset: 0;
+ animation: animate-stroke 1s forwards ease-in 1s;
+}
+
+:is(#Path_26, #Path_27):hover {
+ animation: animate-stroke 1s forwards ease-in 1s;
+}
+
+
+#TECLA_SAP {
+ text-transform: uppercase;
+}
+
+@keyframes animate-stroke {
+ 0% {
+ stroke-dashoffset: 0;
+ }
+ 40% {
+ stroke-dashoffset: 1250;
+ }
+ 80% {
+ stroke-dashoffset: 2500;
+ }
+ 100% {
+ stroke-dashoffset: 2500;
+ }
+
+}
diff --git a/styles/components/_PostContainer.scss b/styles/components/_PostContainer.scss
index 5fcb1ad..d346068 100644
--- a/styles/components/_PostContainer.scss
+++ b/styles/components/_PostContainer.scss
@@ -1,6 +1,9 @@
@use '../base/' as *;
.posts {
+ margin: 0;
+ padding: 0;
+
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
diff --git a/styles/components/_PostTemplate.scss b/styles/components/_PostTemplate.scss
index ccad6ba..a95e81c 100644
--- a/styles/components/_PostTemplate.scss
+++ b/styles/components/_PostTemplate.scss
@@ -8,10 +8,6 @@
position: relative;
- color: $black;
- font-family: 'Inter', sans-serif;
- line-height: 1.4;
-
cursor: pointer;
@media (max-width: 420px) {
@@ -40,10 +36,25 @@
/* Estilos da borda não aparecerão em dispositivos de toque*/
@include touch-support() {
&::after {
- @include sidebar-template(bottom);
+ @include post-animation-template(bottom);
+ }
+ &::before {
+ @include post-animation-template(top);
}
+ }
+ @media (max-width: 460px) {
&::before {
- @include sidebar-template(top);
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 0;
+
+ transform: translateX(-10px);
+
+ height: 100%;
+ width: 10px;
+
+ background-image: linear-gradient(to top, #543dc9 50%, #4e7cfc);
}
}
}
diff --git a/styles/components/_index.scss b/styles/components/_index.scss
index 732a7ee..9863bdc 100644
--- a/styles/components/_index.scss
+++ b/styles/components/_index.scss
@@ -1,2 +1,7 @@
@forward './PostTemplate';
-@forward './PostContainer';
\ No newline at end of file
+@forward './PostContainer';
+@forward './MainFooter';
+@forward './LandingLayout';
+@forward './MainHeader';
+@forward './MainLogo';
+
diff --git a/styles/main.scss b/styles/main.scss
index 0556091..f9ad3ca 100644
--- a/styles/main.scss
+++ b/styles/main.scss
@@ -1 +1,2 @@
-@use './components/' as *;
\ No newline at end of file
+@use './components/' as *;
+@use './utilities/fonts' as *;
diff --git a/styles/utilities/_fonts.scss b/styles/utilities/_fonts.scss
new file mode 100644
index 0000000..0866180
--- /dev/null
+++ b/styles/utilities/_fonts.scss
@@ -0,0 +1,8 @@
+@use '../base' as *;
+
+// Pega cada fonte no mapa de fontes e cria uma classe utilitária com essa fonte, para ver todos os itens da classe basta ir no mapa de base/fonts
+@each $font in map-keys($font-map) {
+ .#{unquote($font)} {
+ @include font-generator($font);
+ }
+}
\ No newline at end of file
diff --git a/styles/utilities/_index.scss b/styles/utilities/_index.scss
new file mode 100644
index 0000000..f7bc2fd
--- /dev/null
+++ b/styles/utilities/_index.scss
@@ -0,0 +1 @@
+@forward './fonts';
\ No newline at end of file
From ba3116ede3d94bcdd903f5b87fe9cc4338c04bfa Mon Sep 17 00:00:00 2001
From: cs-camilo-micheletto
Date: Mon, 22 Mar 2021 14:46:25 -0300
Subject: [PATCH 7/7] corrected element link in index
---
pages/index.js | 2 +-
public/sw.js.map | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/pages/index.js b/pages/index.js
index 1bc1c22..20578c5 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,6 +1,6 @@
import Head from 'next/head'
import PostContainer from '../components/PostContainer'
-import MainFooter from '../components/MainFooter/MainFooter'
+import MainFooter from '../components/MainFooter'
import LandingLayout from '../components/LandingLayout'
import MainHeader from '../components/MainHeader'
diff --git a/public/sw.js.map b/public/sw.js.map
index 8104ab0..d48d626 100644
--- a/public/sw.js.map
+++ b/public/sw.js.map
@@ -1 +1 @@
-{"version":3,"file":"sw.js","sources":["../../../../../tmp/ba0e9132f7f8993abf56abcf50936c91/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {skipWaiting as workbox_core_skipWaiting} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-core/skipWaiting.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n \n);\n\n\n\n\n\n\n\nworkbox_core_skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\n"],"names":["importScripts","workbox_core_skipWaiting","workbox_core_clientsClaim","workbox_routing_registerRoute","workbox_strategies_NetworkOnly","plugins"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAG0I;EAC1I;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;EAGAA,aAAa;AAUbC,qBAAwB;AAExBC,sBAAyB;AAIzBC,uBAA6B,CAAC,KAAD,EAAQ,IAAIC,mBAAJ,CAAmC;EAAE,eAAY,KAAd;EAAqBC,EAAAA,OAAO,EAAE;EAA9B,CAAnC,CAAR,EAAgF,KAAhF,CAA7B;;"}
\ No newline at end of file
+{"version":3,"file":"sw.js","sources":["../../../../../tmp/cba07910852e3f0303829779880b7f34/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {skipWaiting as workbox_core_skipWaiting} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-core/skipWaiting.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n \n);\n\n\n\n\n\n\n\nworkbox_core_skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\n"],"names":["importScripts","workbox_core_skipWaiting","workbox_core_clientsClaim","workbox_routing_registerRoute","workbox_strategies_NetworkOnly","plugins"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAG0I;EAC1I;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;EAGAA,aAAa;AAUbC,qBAAwB;AAExBC,sBAAyB;AAIzBC,uBAA6B,CAAC,KAAD,EAAQ,IAAIC,mBAAJ,CAAmC;EAAE,eAAY,KAAd;EAAqBC,EAAAA,OAAO,EAAE;EAA9B,CAAnC,CAAR,EAAgF,KAAhF,CAA7B;;"}
\ No newline at end of file