Highlight code

next.config.js

@@ -4,7 +4,9 @@ const isProd = process.env.NODE_ENV === 'production'
 
 module.exports = withPWA({
   // Use the CDN in production and localhost for development.
-  assetPrefix: isProd ? 'https://cdn.statically.io/gh/concretesolutions/tecla-sap/gh-pages/' : '',
+  assetPrefix: isProd
+    ? 'https://cdn.statically.io/gh/concretesolutions/tecla-sap/gh-pages/'
+    : '',
   pwa: {
     dest: 'public'
   }

package.json

@@ -1,8 +1,8 @@
 {
   "name": "tecla-sap",
-  "private": true,
   "homepage": "https://concretesolutions.github.io/tecla-sap",
   "version": "0.1.0",
+  "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -11,17 +11,17 @@
     "test": "jest",
     "test:watch": "yarn test --watchAll",
     "predeploy": "npm run build",
-    "deploy": "gh-pages -d build"
+    "deploy": "gh-pages -b main -d build"
   },
   "dependencies": {
     "next": "10.0.5",
     "next-pwa": "^3.1.5",
     "react": "17.0.1",
     "react-dom": "17.0.1",
+    "react-highlight": "^0.13.0",
     "styled-components": "^5.2.1"
   },
   "devDependencies": {
-    "gh-pages": "^3.1.0",
     "@babel/core": "^7.12.3",
     "@babel/preset-typescript": "^7.12.1",
     "@testing-library/jest-dom": "^5.11.6",
@@ -39,6 +39,7 @@
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "gh-pages": "^3.1.0",
     "husky": "^4.3.0",
     "jest": "^26.6.3",
     "jest-styled-components": "^7.0.3",

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

@@ -2,6 +2,8 @@ import Link from 'next/link'
 import Head from 'next/head'
 import Image from 'next/image'
 import styles from '../../styles/Home.module.css'
+import Highlight from 'react-highlight'
+import 'highlight.js/styles/a11y-dark.css'
 
 export default function TipsJavascriptOptimization() {
   return (
@@ -13,13 +15,17 @@ export default function TipsJavascriptOptimization() {
       </header>
       <div className={styles.container}>
         <main className={styles.posts}>
-          <Image
-            src="/logo_high.png"
-            className={styles.logo}
-            alt="Logotipo do projeto"
-            width={400}
-            height={262}
-          />
+          <Link href="/">
+            <a title="Página principal">
+              <Image
+                src="/logo_high.png"
+                className={styles.logo}
+                alt="Logotipo do projeto"
+                width={400}
+                height={262}
+              />
+            </a>
+          </Link>
 
           <p>
             <Link href="/">
@@ -30,10 +36,16 @@ export default function TipsJavascriptOptimization() {
             <h1 className={styles.post}>
               17 dicas de otimização de Javascript para conhecer em 2021
             </h1>
-            <p className={styles.author}>Autor: Blessing Hirwa || <a className={styles.link} href="https://dev.to/blessingartcreator/17-javascript-optimization-tips-3gil">
-              Versão original
-            </a></p>
-
+            <p className={styles.author}>
+              Autor: Blessing Hirwa ||{' '}
+              <a
+                className={styles.link}
+                href="https://dev.to/blessingartcreator/17-javascript-optimization-tips-3gil"
+              >
+                Versão original
+              </a>
+            </p>
+
             <p>
               Mesmo utilizando Javascript há bastante tempo, às vezes podemos
               não estar atualizados quanto aos novos recursos que ele oferece, e
@@ -47,18 +59,14 @@ export default function TipsJavascriptOptimization() {
               includes para fazer a verificação da condição:
             </p>
             <pre className={styles.pre}>
-              <code>
+              <Highlight language="javascript">
+                {`
                 //formato mais longo
-                <br />
                 if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl'){' '}
-                {<br />}
-                <br />
-                <br />
                 //formato mais curto
-                <br />
-                if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {<br />}
-                <br />
-              </code>
+                if (['abc', 'def', 'ghi', 'jkl'].includes(x))
+                `}
+              </Highlight>
             </pre>
           </article>
         </main>