[#393] Blog: add external links style (#405)

* [#393] Blog: add external links style

* [#393] Blog: fix icon link style

* [#393] Blog: fix after review

apps/blog/content/posts/what-is-memebattle.en.mdx

@@ -50,15 +50,15 @@ To date, MemeBattle has several projects in development.
 
 <b>Ligretto</b> is fast-paced online multiplayer game in which you need to lay out cards as quickly as possible and outperform your opponents with reaction and agility.
 
-url: [https://ligretto.app/](https://ligretto.app/)
+[https://ligretto.app/](https://ligretto.app/)
 
 Play with friends at any time - one round takes only a few minutes. Our colleagues sometimes spend their free time like this between meetings 😄
 
 ### GameHub
 
 <b>GameHub</b> is online games service. Unfortunately, there is only one game so far. But in the ideal future, it will be a portal for multiple online games in one ecosystem.
 
-url: [https://mems.fun/](https://mems.fun/)
+[https://mems.fun/](https://mems.fun/)
 
 We are witnessing a profound transformation in people's lives. The world is becoming global and remote.
 In the past, we used to have the chance to effortlessly gather with friends or colleagues at a party or in the office, enjoy ourselves, and engage in board games.
@@ -71,7 +71,7 @@ GameHub and games within it can facilitate spending time together by playing.
 This blog. There will be not only news from the MemeBattle team, but also various posts from everyone.
 First of all, we would like to share technical discoveries and experiences. For example, one of the following posts is planned as a description of using variable fonts research in this blog.
 
-url: [https://blog.mems.fun/](https://blog.mems.fun/)
+[https://blog.mems.fun/](https://blog.mems.fun/)
 
 ### MemeBattle as PaaS
 

apps/blog/content/posts/what-is-memebattle.ru.mdx

@@ -49,15 +49,15 @@ author: 'themezv'
 
 <b>Ligretto</b> – это динамичная многопользовательская онлайн игра, где нужно как можно быстрее выкладывать карты и обыгрывать соперников за счет своей скорости и ловкости.
 
-url: [https://ligretto.app/](https://ligretto.app/)
+[https://ligretto.app/](https://ligretto.app/)
 
 Играйте с друзьями в любое время, ведь один раунд длится буквально несколько минут. Наши коллеги иногда собираются скоротать время между митингами)
 
 ### GameHub
 
 <b>GameHub</b> – сервис настольных игр. К сожалению, там пока что только одна игра. Но в идеальном будущем, это будет портал онлайн игр, объединенных единой экосистемой.
 
-url: [https://mems.fun/](https://mems.fun/)
+[https://mems.fun/](https://mems.fun/)
 
 Жизнь людей кардинально меняется у нас на глазах. Мир становится глобальным и "удаленным". Раньше мы имели возможность легко собраться с друзьями или коллегами в гостях или офисе, весело провести время и поиграть в настольные игры. Теперь многие компании разбросаны по миру и собраться у одного стола уже не так просто.
 GameHub и игры в нем могут помочь снова проводить время вместе за совместной игрой.
@@ -67,7 +67,7 @@ GameHub и игры в нем могут помочь снова проводи
 Этот самый блог. Тут будут не только новости от команды MemeBattle, но и различные посты от всех желающих.
 В первую очередь, хотелось бы делиться техническими открытиями и опытом. Например, в одном из следующих постов хочется описать небольшое исследование подключения шрифтов в этом блоге.
 
-url: [https://blog.mems.fun/](https://blog.mems.fun/)
+[https://blog.mems.fun/](https://blog.mems.fun/)
 
 ### MemeBattle как PaaS
 

apps/blog/src/components/ExternalLink/ExternalLink.tsx

@@ -0,0 +1,4 @@
+export function ExternalLink(props: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
+  const linkClass = 'text-externalLink font-semibold no-underline after:content-externalLink after:ml-4'
+  return <a className={linkClass} {...props} />
+}

apps/blog/src/components/ExternalLink/index.ts

@@ -0,0 +1 @@
+export { ExternalLink } from './ExternalLink'

apps/blog/src/components/Mdx/Mdx.tsx

@@ -2,12 +2,13 @@ import type { ImageProps } from 'next/image'
 import Image from 'next/image'
 import { useMDXComponent } from 'next-contentlayer/hooks'
 import InstagramPost from '../InstagramPost'
+import { ExternalLink } from '../ExternalLink'
 
 interface MdxProps {
   code: string
 }
 
-const components = { Image: (props: ImageProps) => <Image {...props} />, InstagramPost }
+const components = { Image: (props: ImageProps) => <Image {...props} />, InstagramPost, a: ExternalLink }
 
 export function Mdx({ code }: MdxProps) {
   const Component = useMDXComponent(code)

apps/blog/tailwind.config.js

@@ -8,6 +8,7 @@ module.exports = {
     extend: {
       colors: {
         memebattleYellow: '#fce26b',
+        externalLink: '#1ba2ee',
       },
       fontFamily: {
         sans: ['var(--font-gravity)', ...defaultTheme.fontFamily.sans],
@@ -41,6 +42,9 @@ module.exports = {
       letterSpacing: {
         listDash: '0.5rem',
       },
+      content: {
+        externalLink: 'url("../../assets/ext-link-icon.svg")',
+      },
     },
   },