Skip to content

Commit 14e6083

Browse files
authored
✨ - Add Twitter Share button (#22)
1 parent 212cf89 commit 14e6083

File tree

7 files changed

+136
-254
lines changed

7 files changed

+136
-254
lines changed

.prettierignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Ignore all HTML files:
2+
**/*.mdx
3+
**/*.md
4+
5+
node_modules

package-lock.json

Lines changed: 96 additions & 240 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@
44
"private": true,
55
"scripts": {
66
"dev": "next dev",
7-
"build": "next build",
7+
"build": "contentlayer build && next build",
88
"start": "next start",
99
"lint": "next lint",
1010
"format": "prettier --check .",
1111
"format:fix": "prettier --write ."
1212
},
1313
"dependencies": {
14-
"@fortawesome/fontawesome-svg-core": "^6.3.0",
15-
"@fortawesome/free-brands-svg-icons": "^6.3.0",
16-
"@fortawesome/free-regular-svg-icons": "^6.3.0",
17-
"@fortawesome/free-solid-svg-icons": "^6.3.0",
14+
"@fortawesome/fontawesome-svg-core": "^6.5.1",
15+
"@fortawesome/free-brands-svg-icons": "^6.5.1",
16+
"@fortawesome/free-regular-svg-icons": "^6.5.1",
17+
"@fortawesome/free-solid-svg-icons": "^6.5.1",
1818
"@fortawesome/react-fontawesome": "^0.2.0",
1919
"@types/node": "18.15.0",
2020
"@types/react": "18.0.28",

posts/blog/resources_developers.mdx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,18 @@ title: Mis 5 Sitios Favoritos para Aprender Programación
33
date: 2023-12-12
44
description: Mis 5 Sitios Favoritos para Aprender Programación
55
thumbnailUrl: /blog/developer.png
6-
author: Por claudio_coder
6+
author: '@claudio_coder'
77
---
88

99
![](/blog/apps.png 'Image generated by OpenAI DALL-E')
1010

11-
<p className='text-xs text-center mx-auto text-gray-600 italic'>
12-
Image created with OpenAI
13-
</p>
11+
<div className='text-xs text-center w-full mx-auto text-gray-600 italic'>
12+
<span>Image created with OpenAI</span>
13+
</div>
1414
<br />
1515
<br />
16-
# [Codecademy](https://www.codecademy.com/) > Gratis y versión de pago | Inglés
16+
# [Codecademy](https://www.codecademy.com/)
17+
> Gratis y versión de pago | Inglés
1718
<br />
1819
Codecademy fue el primer sitio web donde empecé a aprender a programar. Te enseña
1920
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.
9495
![](/blog/platzi.jpg 'https://codigofacilito.com/')
9596
<br />
9697
<br />
97-
# [Treehouse](https://teamtreehouse.com/) > Versión de pago | Inglés
98+
# [Treehouse](https://teamtreehouse.com/)
99+
> Versión de pago | Inglés
98100
<br />
99101
Treehouse es una plataforma de educación en línea que ofrece cursos de
100102
programación y diseño. Aunque no he utilizado la plataforma por mucho tiempo, he

src/app/[slug]/page.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { format, parseISO } from 'date-fns'
44
import Footer from '@/components/Footer'
55
import { Mdx } from '@/components/Mdx'
66
import metadata from '@/utils/metadata'
7+
import SocialMediaScripts from '@/components/SocialMediaScripts'
78

89
type Props = {
910
params: {
@@ -48,13 +49,24 @@ const BlogPage = async ({ params }: Props) => {
4849
{format(parseISO(post.date), 'MMMM dd, yyyy')}
4950
</time>
5051
<p className='text-gray-500 italic text-sm'>{post.author}</p>
52+
53+
<div className='my-2'>
54+
<a
55+
href='https://twitter.com/share?ref_src=twsrc%5Etfw'
56+
className='twitter-share-button'
57+
data-show-count='false'
58+
>
59+
<span>Compartir en X</span>
60+
</a>
61+
</div>
5162
</div>
5263
<div className='sm:pl-[5%] sm:pr-[15%] h-[70vh] mb-4 overflow-auto'>
5364
<Mdx code={post.body.code} />
5465
</div>
5566
<div className='pt-6 pl-[5%]'>
5667
<Footer />
5768
</div>
69+
<SocialMediaScripts />
5870
</div>
5971
)
6072
}

src/components/SocialMediaScripts.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
'use client'
2+
3+
import Script from 'next/script'
4+
5+
export default function SocialMediaScripts() {
6+
return <Script async src='https://platform.twitter.com/widgets.js' />
7+
}

src/components/SocialNetworkContainer.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import {
22
faGithub,
33
faLinkedin,
4-
faSquareTwitter,
54
faTwitch,
5+
faXTwitter,
66
} from '@fortawesome/free-brands-svg-icons'
77
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
88
import Link from 'next/link'
@@ -16,8 +16,8 @@ const SocialNetwork = () => {
1616
legacyBehavior
1717
>
1818
<FontAwesomeIcon
19-
className='text-3xl text-blue-500 cursor-pointer'
20-
icon={faSquareTwitter}
19+
className='text-3xl text-black-500 cursor-pointer'
20+
icon={faXTwitter}
2121
/>
2222
</Link>
2323
<Link

0 commit comments

Comments
 (0)