diff --git a/apps/blog/content/posts/what-is-memebattle.en.mdx b/apps/blog/content/posts/what-is-memebattle.en.mdx index 599357f4..b3841ba6 100644 --- a/apps/blog/content/posts/what-is-memebattle.en.mdx +++ b/apps/blog/content/posts/what-is-memebattle.en.mdx @@ -50,7 +50,7 @@ To date, MemeBattle has several projects in development. Ligretto 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 😄 @@ -58,7 +58,7 @@ Play with friends at any time - one round takes only a few minutes. Our colleagu GameHub 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 diff --git a/apps/blog/content/posts/what-is-memebattle.ru.mdx b/apps/blog/content/posts/what-is-memebattle.ru.mdx index db53ad86..d0682e87 100644 --- a/apps/blog/content/posts/what-is-memebattle.ru.mdx +++ b/apps/blog/content/posts/what-is-memebattle.ru.mdx @@ -49,7 +49,7 @@ author: 'themezv' Ligretto – это динамичная многопользовательская онлайн игра, где нужно как можно быстрее выкладывать карты и обыгрывать соперников за счет своей скорости и ловкости. -url: [https://ligretto.app/](https://ligretto.app/) +[https://ligretto.app/](https://ligretto.app/) Играйте с друзьями в любое время, ведь один раунд длится буквально несколько минут. Наши коллеги иногда собираются скоротать время между митингами) @@ -57,7 +57,7 @@ url: [https://ligretto.app/](https://ligretto.app/) GameHub – сервис настольных игр. К сожалению, там пока что только одна игра. Но в идеальном будущем, это будет портал онлайн игр, объединенных единой экосистемой. -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 diff --git a/apps/blog/src/assets/ext-link-icon.svg b/apps/blog/src/assets/ext-link-icon.svg new file mode 100644 index 00000000..1e7522bb --- /dev/null +++ b/apps/blog/src/assets/ext-link-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/blog/src/components/ExternalLink/ExternalLink.tsx b/apps/blog/src/components/ExternalLink/ExternalLink.tsx new file mode 100644 index 00000000..ad44b445 --- /dev/null +++ b/apps/blog/src/components/ExternalLink/ExternalLink.tsx @@ -0,0 +1,4 @@ +export function ExternalLink(props: React.AnchorHTMLAttributes) { + const linkClass = 'text-externalLink font-semibold no-underline after:content-externalLink after:ml-4' + return +} diff --git a/apps/blog/src/components/ExternalLink/index.ts b/apps/blog/src/components/ExternalLink/index.ts new file mode 100644 index 00000000..96f15f6c --- /dev/null +++ b/apps/blog/src/components/ExternalLink/index.ts @@ -0,0 +1 @@ +export { ExternalLink } from './ExternalLink' diff --git a/apps/blog/src/components/Mdx/Mdx.tsx b/apps/blog/src/components/Mdx/Mdx.tsx index 76d8c056..6e660833 100644 --- a/apps/blog/src/components/Mdx/Mdx.tsx +++ b/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) => , InstagramPost } +const components = { Image: (props: ImageProps) => , InstagramPost, a: ExternalLink } export function Mdx({ code }: MdxProps) { const Component = useMDXComponent(code) diff --git a/apps/blog/tailwind.config.js b/apps/blog/tailwind.config.js index 8d444f85..ea9a720e 100644 --- a/apps/blog/tailwind.config.js +++ b/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")', + }, }, },