✨ - Add Twitter Share button (#22)

Author: claudiocoder

.prettierignore

@@ -0,0 +1,5 @@
+# Ignore all HTML files:
+**/*.mdx
+**/*.md
+
+node_modules

package-lock.json

@@ -4,17 +4,17 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "contentlayer build && next build",
     "start": "next start",
     "lint": "next lint",
     "format": "prettier --check .",
     "format:fix": "prettier --write ."
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.3.0",
-    "@fortawesome/free-brands-svg-icons": "^6.3.0",
-    "@fortawesome/free-regular-svg-icons": "^6.3.0",
-    "@fortawesome/free-solid-svg-icons": "^6.3.0",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@types/node": "18.15.0",
     "@types/react": "18.0.28",

package.json

@@ -3,17 +3,18 @@ title: Mis 5 Sitios Favoritos para Aprender Programación
 date: 2023-12-12
 description: Mis 5 Sitios Favoritos para Aprender Programación
 thumbnailUrl: /blog/developer.png
-author: Por claudio_coder
+author: '@claudio_coder'
 ---
 
 ![](/blog/apps.png 'Image generated by OpenAI DALL-E')
 
-<p className='text-xs text-center mx-auto text-gray-600 italic'>
-  Image created with OpenAI
-</p>
+<div className='text-xs text-center w-full mx-auto text-gray-600 italic'>
+  <span>Image created with OpenAI</span>
+</div>
 <br />
 <br />
-# [Codecademy](https://www.codecademy.com/) > Gratis y versión de pago | Inglés
+# [Codecademy](https://www.codecademy.com/) 
+> Gratis y versión de pago | Inglés
 <br />
 Codecademy fue el primer sitio web donde empecé a aprender a programar. Te enseña
 a programar de forma interactiva, con ejercicios donde tendrás que cumplir retos
@@ -94,7 +95,8 @@ y todos son muy completos y fáciles de entender.
 ![](/blog/platzi.jpg 'https://codigofacilito.com/')
 <br />
 <br />
-# [Treehouse](https://teamtreehouse.com/) > Versión de pago | Inglés
+# [Treehouse](https://teamtreehouse.com/) 
+> Versión de pago | Inglés
 <br />
 Treehouse es una plataforma de educación en línea que ofrece cursos de
 programación y diseño. Aunque no he utilizado la plataforma por mucho tiempo, he

posts/blog/resources_developers.mdx

@@ -4,6 +4,7 @@ import { format, parseISO } from 'date-fns'
 import Footer from '@/components/Footer'
 import { Mdx } from '@/components/Mdx'
 import metadata from '@/utils/metadata'
+import SocialMediaScripts from '@/components/SocialMediaScripts'
 
 type Props = {
   params: {
@@ -48,13 +49,24 @@ const BlogPage = async ({ params }: Props) => {
           {format(parseISO(post.date), 'MMMM dd, yyyy')}
         </time>
         <p className='text-gray-500 italic text-sm'>{post.author}</p>
+
+        <div className='my-2'>
+          <a
+            href='https://twitter.com/share?ref_src=twsrc%5Etfw'
+            className='twitter-share-button'
+            data-show-count='false'
+          >
+            <span>Compartir en X</span>
+          </a>
+        </div>
       </div>
       <div className='sm:pl-[5%] sm:pr-[15%] h-[70vh] mb-4 overflow-auto'>
         <Mdx code={post.body.code} />
       </div>
       <div className='pt-6 pl-[5%]'>
         <Footer />
       </div>
+      <SocialMediaScripts />
     </div>
   )
 }

src/app/[slug]/page.tsx

@@ -0,0 +1,7 @@
+'use client'
+
+import Script from 'next/script'
+
+export default function SocialMediaScripts() {
+  return <Script async src='https://platform.twitter.com/widgets.js' />
+}

src/components/SocialMediaScripts.tsx

@@ -1,8 +1,8 @@
 import {
   faGithub,
   faLinkedin,
-  faSquareTwitter,
   faTwitch,
+  faXTwitter,
 } from '@fortawesome/free-brands-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
@@ -16,8 +16,8 @@ const SocialNetwork = () => {
         legacyBehavior
       >
         <FontAwesomeIcon
-          className='text-3xl text-blue-500 cursor-pointer'
-          icon={faSquareTwitter}
+          className='text-3xl text-black-500 cursor-pointer'
+          icon={faXTwitter}
         />
       </Link>
       <Link