feat: added mdx support

astro.config.mjs

@@ -5,6 +5,7 @@ import { escape } from "html-escaper";
 import solid from "@astrojs/solid-js";
 import image from "@astrojs/image";
 import compress from "astro-compress";
+import mdx from "@astrojs/mdx";
 
 const createAnchorLabel = (heading) => {
 	const node = h("span.anchor-label", escape(heading));
@@ -22,6 +23,7 @@ export default defineConfig({
 			html: false,
 		}),
 		image(),
+		mdx(),
 	],
 	markdown: {
 		syntaxHighlight: "prism",

package.json

@@ -19,6 +19,7 @@
 	},
 	"devDependencies": {
 		"@astrojs/image": "^0.3.2",
+		"@astrojs/mdx": "^0.7.0",
 		"@astrojs/solid-js": "^0.4.1",
 		"@typescript-eslint/eslint-plugin": "^5.32.0",
 		"@typescript-eslint/parser": "^5.32.0",

src/components/ArticleContent/ArticleContent.scss

@@ -6,6 +6,21 @@
 		font-size: var(--font-size-lg);
 	}
 
+	& h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		margin-top: 3rem;
+		margin-bottom: 1rem;
+		padding-bottom: 5px;
+	}
+
+	h2 {
+		border-bottom: 1px solid var(--border-color);
+	}
+
 	& ul {
 		padding-left: 1.5rem;
 		line-height: var(--line-height-base);

src/components/Counter/Counter.scss

@@ -0,0 +1,14 @@
+.counter {
+	margin: 2rem 0;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	row-gap: 15px;
+	border: 1px solid var(--border-color);
+	border-radius: var(--border-radius-md);
+	padding: 15px 5px;
+	& div {
+		display: flex;
+		column-gap: 3px;
+	}
+}

src/components/Counter/Counter.tsx

@@ -1,17 +1,45 @@
-import type { Component } from 'solid-js';
+import type { Component } from "solid-js";
 
-import { createSignal, createEffect } from 'solid-js';
+import { createSignal, createEffect } from "solid-js";
+import Button from "@components/Button";
+import "./Counter.scss";
 
-const Counter: Component = () => {
+const Counter: Component<{ tick?: number }> = (props) => {
+	const [isRunned, setIsRunned] = createSignal<boolean>(false);
 	const [count, setCount] = createSignal<number>(0);
 
+	const run = () => setIsRunned(true);
+	const stop = () => setIsRunned(false);
+	const inc = () => setCount(count() + 1);
+	const dec = () => setCount(count() - 1);
+
 	createEffect(() => {
 		setInterval(() => {
+			if (isRunned()) {
 				setCount(count() + 1);
-		}, 500);
+			}
+		}, props.tick || 200);
 	});
 
-	return <div>{count()}</div>;
+	return (
+		<div class="counter">
+			<span>{count()}</span>
+			<div>
+				<Button disabled={isRunned()} onClick={run}>
+					Run
+				</Button>
+				<Button disabled={isRunned()} onClick={inc}>
+					+
+				</Button>
+				<Button disabled={isRunned()} onClick={dec}>
+					-
+				</Button>
+				<Button disabled={!isRunned()} onClick={stop}>
+					Stop
+				</Button>
+			</div>
+		</div>
+	);
 };
 
 export default Counter;

src/pages/blog/[...slug].astro

@@ -5,18 +5,18 @@ import ArticleLayout from "@layouts/article.astro";
 
 // TODO: generate pages based on user language
 export async function getStaticPaths() {
-	const data = await Astro.glob<ArticleType>("../../../content/articles/**/*.md");
+	const data = await Astro.glob<ArticleType>("../../../content/articles/**/*.mdx");
 	return data.map((article) => {
 		const published_at = new Date(article.frontmatter.published_at).toLocaleDateString("en-CA");
 		const slug = `${published_at}/${article.frontmatter.slug}`;
-		const props = { Content: article.Content, frontmatter: article.frontmatter };
+		return { params: { slug }, props: article };
-		return { params: { slug }, props };
 	});
 }
 
-const { Content, frontmatter: data } = Astro.props as MarkdownInstance<ArticleType>;
+const article = Astro.props as MarkdownInstance<ArticleType>;
+const Content = article.default
 ---
 
-<ArticleLayout content={data}>
+<ArticleLayout content={article.frontmatter}>
 	<Content />
 </ArticleLayout>

src/templates/About.astro

@@ -5,11 +5,10 @@ import SkillsList from '@components/SkillsList';
 import SkillsBlock from '@components/SkillsBlock';
 
 // TODO: import content based on user ui language
-import * as data from '../../content/about/ru/index.md';
+import { default as Content } from '../../content/about/ru/index.mdx';
 import ArticleContent from '@components/ArticleContent';
 
 const { skills } = SITE_METADATA;
-const { Content } = data;
 ---
 
 <PageLayout title="Обо мне">

src/templates/Articles.astro

@@ -1,9 +1,9 @@
 ---
-import PageLayout from '@layouts/default.astro';
+import PageLayout from "@layouts/default.astro";
-import ArticlesList from '@components/ArticlesList';
+import ArticlesList from "@components/ArticlesList";
-import { transformArticles, formatToArticleBlocks } from '@utils/articles';
+import { transformArticles, formatToArticleBlocks } from "@utils/articles";
 
-const articles = await Astro.glob<ArticleType>('../../content/articles/**/*.md');
+const articles = await Astro.glob<ArticleType>("../../content/articles/**/*.mdx");
 const tags = new Set(articles.map((article) => article.frontmatter.tags).flat());
 ---
 
@@ -14,10 +14,7 @@ const tags = new Set(articles.map((article) => article.frontmatter.tags).flat())
 	<section>
 		<ArticlesList
 			client:load
-			data={{
+			data={{ articles: formatToArticleBlocks(transformArticles(articles)), tags: [...tags] }}
-				articles: formatToArticleBlocks(transformArticles(articles)),
-				tags: [...tags],
-			}}
 			emptyPlaceholder="Не найдено ни одной статьи..."
 		/>
 	</section>

src/templates/Home.astro

@@ -4,7 +4,7 @@ import PageLayout from '@layouts/default.astro';
 import RecentArticles from '@components/RecentArticles';
 import { Splash, SplashHeading, SplashLinks, Link } from '@components/Splash';
 
-const data = await Astro.glob<ArticleType>('../../content/articles/**/*.md');
+const data = await Astro.glob<ArticleType>('../../content/articles/**/*.mdx');
 const articles = utils.transformArticles(data);
 ---
 

tsconfig.json

@@ -5,7 +5,7 @@
 		"moduleResolution": "node",
 		"resolveJsonModule": true,
 		"isolatedModules": true,
-		"types": ["vite/client", "@astrojs/image/client"],
+		"types": ["vite/client", "@astrojs/image/client", "mdx"],
 		"sourceMap": true,
 		"baseUrl": ".",
 		"jsx": "preserve",