Merge Feat/componentize app into Main

components/LandingLayout/index.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+function LandingLayout(props) {
+  return <div className="main-container">{props.children}</div>
+}
+
+export default LandingLayout

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 <footer className="footer">Tecla SAP - {getYears()}</footer>
+}
+
+export default MainFooter

components/MainHeader/index.jsx

@@ -0,0 +1,19 @@
+import Image from 'next/image'
+import React from 'react'
+import MainLogo from '../MainLogo'
+
+function MainHeader() {
+  return (
+    <header className="header">
+      <div className="header__content">
+        <MainLogo />
+        <h1 className="header__title heading-1">Tecla SAP</h1>
+        <p className="header__description text">
+          Artigos em inglês traduzidos para pt-BR.
+        </p>
+      </div>
+    </header>
+  )
+}
+
+export default MainHeader

components/MainLogo/index.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+
+function MainLogo() {
+  // return <h2 className="main-logo">Tecla Sap</h2>
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 515.443 224.094">
+      <g id="Group_6" data-name="Group 6" transform="translate(-1090.859 -422)">
+        <path
+          id="Path_25"
+          data-name="Path 25"
+          d="M689.416,581.4C677.935,547.775,430.384,569.68,309,565.459c-79.322,1.93-34.919,61.453-47.209,101.48-14.831,61.1,372.847,29.812,408.4,25.471C704.185,688.261,687.177,623.523,689.416,581.4Z"
+          transform="translate(865.041 -84.707)"
+          fill="#543dc9"
+        />
+        <text
+          id="TECLA_SAP"
+          data-name="TECLA SAP"
+          transform="translate(1183.928 504.5)"
+          fill="#fff"
+          fontSize="60"
+          fontFamily="ProximaNova-Extrabld, Proxima Nova, sans-serif"
+        >
+          <tspan x="0" y="55">
+            TECLA SAP
+          </tspan>
+        </text>
+        <path
+          id="Path_26"
+          data-name="Path 26"
+          d="M714,545.607c-2.765-22.753-438.446,2.485-478.874-5.856s-25.757,102.727-20.469,124.158,481.039,7.025,489.866,0S716.763,568.359,714,545.607Z"
+          transform="translate(887.188 -81.328)"
+          fill="none"
+          stroke="#22d9ae"
+          strokeWidth="8"
+        />
+        <path
+          id="Path_27"
+          data-name="Path 27"
+          d="M294.2,521.81c-17.707-.652-26.105,175.4,0,196.615,25.165,20.451,370.79,7.124,389.111-6.616s17.518-156.392,17.9-190C703.517,501.5,368.75,522.233,294.2,521.81Z"
+          transform="translate(877.041 -86.877)"
+          fill="none"
+          stroke="#4e7cfc"
+          strokeWidth="8"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export default MainLogo

components/PostContainer/index.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import postList from '../../public/postList'
+import PostTemplate from '../PostTemplate'
+
+function PostContainer() {
+  return (
+    <ul className="posts">
+      {postList &&
+        postList.map((post, ind) => (
+          <PostTemplate
+            key={`post-${ind}`}
+            link={post.link}
+            title={post.title}
+            description={post.description}
+          />
+        ))}
+    </ul>
+  )
+}
+
+export default PostContainer

components/PostTemplate/index.jsx

@@ -0,0 +1,23 @@
+import Link from 'next/link'
+import React from 'react'
+
+function PostTemplate(props) {
+  return (
+    <Link href={props.link}>
+      <li className="card">
+        <h2 className="card_title">
+          <a
+            className="card__link heading-2"
+            href={props.link}
+            title={props.title}
+          >
+            {props.title}
+          </a>
+        </h2>
+        <p className="card__desc text">{props.description}</p>
+      </li>
+    </Link>
+  )
+}
+
+export default PostTemplate

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')]
   }
 })

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": {

pages/_app.js

@@ -1,4 +1,5 @@
 import '../styles/globals.css'
+import '../styles/main.scss'
 
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />

pages/index.js

@@ -1,53 +1,21 @@
 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'
+import MainFooter from '../components/MainFooter'
+import LandingLayout from '../components/LandingLayout'
+import MainHeader from '../components/MainHeader'
 
 export default function Home() {
   return (
     <>
-      <header className={styles.header}>
-        <Head>
-          <title>Tecla SAP</title>
-          <link rel="icon" href="/favicon.ico" />
-        </Head>
-      </header>
-      <div className={styles.container}>
-        <main className={styles.main}>
-          <Image
-            src="/logo_high.png"
-            className={styles.logo}
-            alt="Logotipo do projeto"
-            width={400}
-            height={262}
-          />
-          <h1 className={styles.title}>Tecla SAP</h1>
-
-          <p className={styles.description}>
-            Artigos em inglês traduzidos para pt-BR.
-          </p>
-
-          <div className={styles.grid}>
-            <Link href="/posts/17-dicas-otimizacao-javascript">
-              <a
-                className={styles.card}
-                title="17 dicas de otimização de Javascript para conhecer em 2021"
-              >
-                17 dicas de otimização de Javascript para conhecer em 2021
-              </a>
-            </Link>
-            <Link href="/posts/lazy-loading-nativo-de-imagens-sem-javascript">
-              <a
-                className={styles.card}
-                title="Lazy-loading nativo de imagens sem Javascript"
-              >
-                Lazy-loading nativo de imagens (sem Javascript)
-              </a>
-            </Link>
-          </div>
-        </main>
-        <footer className={styles.footer}>Tecla SAP - 2021</footer>
-      </div>
+      <Head>
+        <title>Tecla SAP</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <LandingLayout>
+        <MainHeader />
+        <PostContainer />
+        <MainFooter />
+      </LandingLayout>
     </>
   )
 }

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

styles/base/_colors.scss

@@ -0,0 +1,11 @@
+$black: #1a1a1a !default;
+$white: #ffffff !default;
+$lilac: #543DC9 !default;
+$blue: #4E7CFC !default;
+$green: #B9F2E7 !default;
+
+$color-map:
+  "white" $white,
+  "black" $black;
+
+body { color: $black; }

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
+  )
+);
+

styles/base/_index.scss

@@ -0,0 +1,6 @@
+@forward './colors.scss';
+@forward './mixins.scss';
+@forward './reset.scss';
+@forward './fonts.scss';
+
+

styles/base/_mixins.scss

@@ -0,0 +1,67 @@
+@use './colors' as *;
+@use './fonts' as *;
+
+// 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 post-animation-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 post-animation-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 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;
+  }
+}
+
+// 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;
+}
+
+