Project structure

.babelrc

@@ -0,0 +1,28 @@
+{
+  "presets": [
+    "next/babel",
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    [
+      "babel-plugin-styled-components",
+      {
+        "displayName": true,
+        "ssr": true
+      }
+    ]
+  ],
+  "env": {
+    "test": {
+      "plugins": [
+        [
+          "babel-plugin-styled-components",
+          {
+            "displayName": false,
+            "ssr": false
+          }
+        ]
+      ]
+    }
+  }
+}

.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc.json

@@ -0,0 +1,35 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "jest": true,
+    "node": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "react-hooks", "@typescript-eslint"],
+  "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off"
+  }
+}

.gitignore

@@ -1,104 +1,34 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# TypeScript v1 declaration files
-typings/
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
 
-# TypeScript cache
-*.tsbuildinfo
+# testing
+/coverage
 
-# Optional npm cache directory
-.npm
+# next.js
+/.next/
+/out/
 
-# Optional eslint cache
-.eslintcache
+# production
+/build
 
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
+# misc
+.DS_Store
+*.pem
 
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-.env.test
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# Next.js build output
-.next
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and *not* Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
 
-# DynamoDB Local files
-.dynamodb/
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
 
-# TernJS port file
-.tern-port
+# vercel
+.vercel

.prettierignore

@@ -0,0 +1,5 @@
+build
+coverage
+.next
+.vscode
+public

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "trailingComma": "none",
+  "semi": false,
+  "singleQuote": true
+}

next.config.js

@@ -0,0 +1,8 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const withPWA = require('next-pwa')
+
+module.exports = withPWA({
+  pwa: {
+    dest: 'public'
+  }
+})

package.json

@@ -0,0 +1,56 @@
+{
+  "name": "tecla-sap",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "./node_modules/.bin/eslint src --max-warnings=0",
+    "test": "jest",
+    "test:watch": "yarn test --watchAll"
+  },
+  "dependencies": {
+    "next": "10.0.5",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "next-pwa": "^3.1.5",
+    "styled-components": "^5.2.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.3",
+    "@babel/preset-typescript": "^7.12.1",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.1.2",
+    "@types/jest": "^26.0.15",
+    "@types/node": "^14.14.7",
+    "@types/react": "^16.9.56",
+    "@types/styled-components": "^5.1.4",
+    "@typescript-eslint/eslint-plugin": "^4.7.0",
+    "@typescript-eslint/parser": "^4.7.0",
+    "babel-loader": "^8.2.1",
+    "babel-plugin-styled-components": "^1.11.1",
+    "eslint": "^7.13.0",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "husky": "^4.3.0",
+    "jest": "^26.6.3",
+    "jest-styled-components": "^7.0.3",
+    "lint-staged": "^10.5.1",
+    "prettier": "2.1.2",
+    "typescript": "^4.0.5"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "src/**/*": [
+      "yarn lint --fix",
+      "yarn test --findRelatedTests --bail"
+    ]
+  }
+}

pages/_app.js

@@ -0,0 +1,7 @@
+import '../styles/globals.css'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

pages/_document.js

@@ -0,0 +1,28 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps }
+  }
+
+  render() {
+    return (
+      <Html lang="pt-BR">
+        <Head>
+          <link rel="preconnect" href="https://fonts.gstatic.com" />
+          <link
+            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap"
+            rel="stylesheet"
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default MyDocument

pages/index.js

@@ -0,0 +1,35 @@
+import Head from 'next/head'
+import styles from '../styles/Home.module.css'
+import Link from 'next/link'
+
+export default function Home() {
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>Tecla SAP</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main}>
+        <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>
+        </div>
+      </main>
+
+      <footer className={styles.footer}>Tecla SAP - 2021</footer>
+    </div>
+  )
+}

pages/posts/17-dicas-otimizacao-javascript.js

@@ -0,0 +1,32 @@
+import Link from 'next/link'
+import Head from 'next/head'
+
+export default function TipsJavascriptOptimization() {
+  return (
+    <>
+      <Head>
+        <title>
+          17 dicas de otimização de Javascript para conhecer em 2021
+        </title>
+      </Head>
+      <div>
+        <p>
+          <Link href="/">
+            <a title="Página principal">Página principal</a>
+          </Link>
+        </p>
+        <h1>17 dicas de otimização de Javascript para conhecer em 2021</h1>
+        <code>
+          Original:
+          https://dev.to/blessingartcreator/17-javascript-optimization-tips-3gil
+        </code>
+
+        <p>
+          Mesmo utilizando Javascript há bastante tempo, às vezes podemos não
+          estar atualizados quanto aos novos recursos que ele oferece, e que
+          podem podem resolver problemas sem escrever mais código.
+        </p>
+      </div>
+    </>
+  )
+}