deployn/astro-deploy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(blog): use responsive table in mdx blog

Browse Source
This commit is contained in:
Jewgeni Lewash 2024-03-03 18:21:14 +01:00
parent 0e004601c5
commit e0f65256cd
3 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/blog/Table.astro Normal file
View File

@ -0,0 +1,9 @@
---
---
<div class="mb-4 min-w-full overflow-x-auto">
<table class="my-2 min-w-full whitespace-nowrap text-sm">
<slot />
</table>
</div>

2
src/components/layout/Header.astro
View File

@ -70,7 +70,7 @@ const navLinks = [
class="block font-sans text-sm font-medium leading-normal text-zinc-900 antialiased dark:text-zinc-100">
<div
role="button"
class="w-full gap-2 rounded-lg pr-4 text-start leading-tight transition-all hover:bg-zinc-50 dark:hover:bg-zinc-950">
class="text- w-full gap-2 rounded-lg px-4 leading-tight transition-all hover:bg-zinc-50 dark:hover:bg-zinc-950">
{label}
</div>
</a>

6
src/pages/blog/[...slug].astro
View File

@ -2,6 +2,7 @@
import { getCollection } from 'astro:content';
import type { CollectionEntry } from 'astro:content';
import BaseLayout from '@/layouts/BaseLayout.astro';
import Table from '@/components/blog/Table.astro';
export async function getStaticPaths() {
const blogEntries = await getCollection('blog');
@ -17,13 +18,14 @@ interface Props {
const { entry } = Astro.props as Props;
const { Content } = await entry.render();
const components = { table: Table };
const { title } = entry.data;
---
<BaseLayout>
<div
class="container prose mx-auto space-y-16 px-4 py-16 dark:prose-invert lg:px-8 lg:py-32 xl:max-w-7xl">
class="prose dark:prose-invert container mx-auto space-y-16 px-4 py-16 lg:px-8 lg:py-32 xl:max-w-7xl">
<h1 class="text-4xl font-bold">{title}</h1>
<Content />
<Content components={components} />
</div>
</BaseLayout>