Fernando Gurgel

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -1,5 +1,35 @@
-# Dependency directories
-node_modules/
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# Next.js build output
-.next
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

README.md

@@ -1,6 +1,21 @@
-# Desafio - Front-end Developer
+# Desafio - Front-end Developer | Fernando Gurgel
 Este desafio tem como objetivo te avaliar como desenvolvedor Front-end: JavaScript, HTML, CSS e lógica de programação.
 
+## Principais Diferenciais deste projeto
+Dentre as principais melhorias e diferenciais, estão:
+- Super Otimização de velocidade para mobile e desktop (score 100% GTMetrix e Google Pagespeed)
+- Páginas estáticas (ISR - incremental static regeneration)
+- Suporte a tema escuro (selecionado automaticamente)
+- Alta reutilização de código usando utils (DRY)
+- Tipagem (TypeScript)
+- NextJS
+- OOCSS
+- SASS
+
+## DEMO
+![GIF mostrando as funcionalidade do projeto](https://media4.giphy.com/media/ALCUlzW0k88Hl8g1A0/giphy.gif?cid=790b7611221ccc32a7c753f142ab2dd99fd0ce18b411f8ab&rid=giphy.gif&ct=g)
+
+Versão Live: [acessar](https://front-end-challenge-beta.vercel.app).
 ## O Desafio
 Queremos montar uma versão do blog da Apiki apenas para Devs, e queremos que essa seja uma solução headless, esta nova versão terá as seguintes páginas: 
 

components/AuthorSection.tsx

@@ -0,0 +1,49 @@
+import { NextPage } from "next";
+import Image from "next/image";
+import { AuthorSectionProps } from "../types/AuthorSection";
+import styles from "../styles/AuthorSection.module.scss";
+
+const AuthorSection: NextPage<AuthorSectionProps> = ({
+  hideOnMobile = false,
+  avatar,
+  authorLink,
+  authorName,
+  date,
+}) => {
+  const post_date = new Date(date);
+  const date_options: Intl.DateTimeFormatOptions = {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  };
+  return (
+    <>
+      {authorName && (
+        <span
+          id={hideOnMobile ? styles.hideOnMobile : ""}
+          className={styles.post_author_section}
+        >
+          <a className={styles.post_author_link} href={authorLink}>
+            {avatar && (
+              <Image
+                alt={authorName || "Autor do post"}
+                className={styles.post_author_avatar}
+                width={48}
+                height={48}
+                src={avatar}
+              />
+            )}
+            <span className={styles.post_author_name}>
+              {authorName ?? null}
+            </span>
+          </a>
+          <span className={styles.post_date}>
+            {post_date.toLocaleDateString("pt-BR", date_options) ?? null}
+          </span>
+        </span>
+      )}
+    </>
+  );
+};
+
+export default AuthorSection;

components/Navbar.tsx

@@ -0,0 +1,41 @@
+import Image from "next/image";
+import logo from "../public/logo-apiki-symbol.png";
+import styles from "../styles/Navbar.module.scss";
+
+const Navbar = () => {
+  return (
+    <nav
+      role="navbar"
+      aria-label="Barra de Navegação"
+      className={styles.navbar}
+    >
+      <a
+        role="home"
+        aria-label="Link da página inicial"
+        href="https://blog.apiki.com/"
+        className={styles.navbar_link}
+      >
+        <Image src={logo} alt="logo" width={50} height={50} />
+        Página inicial
+      </a>
+      <a
+        role="about"
+        aria-label="Link da página sobre nós"
+        href="https://blog.apiki.com/sobre/"
+        className={styles.navbar_link}
+      >
+        Sobre nós
+      </a>
+      <a
+        role="contact"
+        aria-label="Link da página de contatos"
+        href="https://apiki.com/atendimento/"
+        className={styles.navbar_link}
+      >
+        Contato
+      </a>
+    </nav>
+  );
+};
+
+export default Navbar;

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,10 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+  images: {
+    domains: ["blog.apiki.com", "secure.gravatar.com"],
+  },
+};
+
+module.exports = nextConfig;

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "front-end-challenge",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "axios": "^0.27.2",
+    "html-entities": "^2.3.3",
+    "html-react-parser": "^3.0.1",
+    "isomorphic-dompurify": "^0.20.0",
+    "next": "12.2.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "sass": "^1.54.3",
+    "sharp": "^0.30.7"
+  },
+  "devDependencies": {
+    "@types/node": "18.6.3",
+    "@types/react": "18.0.15",
+    "@types/react-dom": "18.0.6",
+    "eslint": "8.21.0",
+    "eslint-config-next": "12.2.3",
+    "typescript": "4.7.4"
+  }
+}

pages/_app.tsx

@@ -0,0 +1,14 @@
+import "../styles/globals.scss";
+import type { AppProps } from "next/app";
+import Navbar from "../components/Navbar";
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <>
+      <Navbar />
+      <Component {...pageProps} />
+    </>
+  );
+}
+
+export default MyApp;

pages/index.tsx

@@ -0,0 +1,27 @@
+import type { GetStaticProps, NextPage } from "next";
+import { PostsProps } from "../types/Posts";
+import { fetchPosts } from "../utils/post";
+import Page from "./page/[slug]";
+
+const getTenPostsUrl =
+  "https://blog.apiki.com/wp-json/wp/v2/posts?_embed&categories=518";
+
+const Home: NextPage<PostsProps> = (props) => {
+  return <Page {...props} />;
+};
+
+export const getStaticProps: GetStaticProps = async () => {
+  const postsOptions = { params: { page: 1 } };
+
+  const { posts, headers } = await fetchPosts(getTenPostsUrl, postsOptions);
+
+  return {
+    props: {
+      posts,
+      totalPages: parseInt(headers["x-wp-totalpages"] as string) ?? 1,
+      page: 1,
+    },
+  };
+};
+
+export default Home;