Skip to content

Commit 42c5c4f

Browse files
LeadcodeDevLeadcodeDev
committed
feat: implement some changes
1 parent d148163 commit 42c5c4f

37 files changed

Lines changed: 1142 additions & 61 deletions

‎apps/blog/astro.config.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import mdx from '@astrojs/mdx'
44
import tailwindcss from '@tailwindcss/vite'
55
import { shikiConfig } from '@explainer/mdx/shiki'
66
import { remarkAutoImport } from '@explainer/mdx/remark-auto-import'
7+
import { thumbnailIntegration } from '@explainer/thumbnail/integration'
78

89
export default defineConfig({
910
site: 'https://blog.example.com',
@@ -12,6 +13,10 @@ export default defineConfig({
1213
mdx({
1314
remarkPlugins: [remarkAutoImport],
1415
}),
16+
thumbnailIntegration({
17+
appName: 'Blog',
18+
content: { type: 'collection', dir: './src/content/posts' },
19+
}),
1520
],
1621
vite: {
1722
plugins: [tailwindcss()],

‎apps/blog/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"react-dom": "^19.0.0",
2020
"@explainer/ui": "workspace:*",
2121
"@explainer/mdx": "workspace:*",
22+
"@explainer/thumbnail": "workspace:*",
2223
"@iconify/react": "^5.2.0"
2324
},
2425
"devDependencies": {

‎apps/blog/public/favicon.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎apps/blog/src/layouts/base.astro‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,34 @@ import { ThemeToggle } from '@explainer/ui'
55
interface Props {
66
title: string
77
description?: string
8+
thumbnail?: string
89
}
910
10-
const { title, description = 'Explainer Blog' } = Astro.props
11+
const { title, description = 'Explainer Blog', thumbnail } = Astro.props
12+
const thumbnailUrl = thumbnail ?? `${Astro.url.pathname.replace(/\/$/, '')}/thumbnail.png`
1113
---
1214

1315
<!doctype html>
1416
<html lang="en">
1517
<head>
1618
<meta charset="UTF-8" />
1719
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
20+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
1821
<meta name="description" content={description} />
22+
<meta property="og:title" content={title} />
23+
<meta property="og:description" content={description} />
24+
<meta property="og:image" content={thumbnailUrl} />
25+
<meta property="og:type" content="website" />
26+
<meta name="twitter:card" content="summary_large_image" />
27+
<meta name="twitter:title" content={title} />
28+
<meta name="twitter:description" content={description} />
29+
<meta name="twitter:image" content={thumbnailUrl} />
1930
<title>{title} — Blog</title>
2031
<script is:inline>
2132
(function () {
22-
var theme = localStorage.getItem('theme')
23-
if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
24-
document.documentElement.classList.add('dark')
25-
}
33+
var theme = localStorage.getItem('theme') || 'system'
34+
var isDark = theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
35+
document.documentElement.classList.toggle('dark', isDark)
2636
})()
2737
</script>
2838
</head>

‎apps/blog/src/layouts/post.astro‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,13 @@ interface Props {
88
date: Date
99
tags: string[]
1010
cover?: string
11+
thumbnail?: string
1112
}
1213
13-
const { title, description, date, tags, cover } = Astro.props
14+
const { title, description, date, tags, cover, thumbnail } = Astro.props
1415
---
1516

16-
<Base title={title} description={description}>
17+
<Base title={title} description={description} thumbnail={thumbnail}>
1718
<article>
1819
{cover && (
1920
<img

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const { Content } = await render(post)
2424
date={post.data.date}
2525
tags={post.data.tags}
2626
cover={post.data.cover}
27+
thumbnail={`/${getPostSlug(post)}/thumbnail.png`}
2728
>
2829
<Content components={{ ...mdxOverrides, Callout, Tabs, Tab, Steps, Step, CodeGroup }} />
2930
</PostLayout>

‎apps/blog/src/styles/globals.css‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,52 @@
22

33
@source "../../../../packages/ui/src";
44
@source "../../../../packages/mdx/src";
5+
6+
/* Table styles */
7+
.prose table {
8+
width: 100%;
9+
border-collapse: separate;
10+
border-spacing: 0;
11+
margin-top: 1.5em;
12+
margin-bottom: 1.5em;
13+
font-size: 0.875rem;
14+
line-height: 1.5rem;
15+
border: 1px solid var(--color-border);
16+
border-radius: var(--radius-lg);
17+
overflow: hidden;
18+
}
19+
20+
.prose thead {
21+
background-color: var(--color-muted);
22+
}
23+
24+
.prose thead th {
25+
padding: 0.625rem 1rem;
26+
text-align: left;
27+
font-weight: 600;
28+
font-size: 0.8125rem;
29+
color: var(--color-muted-foreground);
30+
border-bottom: 1px solid var(--color-border);
31+
}
32+
33+
.prose tbody tr {
34+
border-bottom: 1px solid var(--color-border);
35+
transition: background-color 0.15s;
36+
}
37+
38+
.prose tbody tr:hover {
39+
background-color: var(--color-muted);
40+
}
41+
42+
.prose tbody tr:last-child {
43+
border-bottom: none;
44+
}
45+
46+
.prose tbody td {
47+
padding: 0.625rem 1rem;
48+
vertical-align: top;
49+
}
50+
51+
.prose tbody td code {
52+
font-size: 0.8125rem;
53+
}

‎apps/docs/astro.config.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import remarkDirective from 'remark-directive'
66
import { shikiConfig } from '@explainer/mdx/shiki'
77
import { remarkAutoImport } from '@explainer/mdx/remark-auto-import'
88
import { remarkDirectiveHandler } from '@explainer/mdx/remark-directive-handler'
9+
import { thumbnailIntegration } from '@explainer/thumbnail/integration'
910

1011
export default defineConfig({
1112
devToolbar: { enabled: false },
@@ -14,6 +15,10 @@ export default defineConfig({
1415
mdx({
1516
remarkPlugins: [remarkAutoImport, remarkDirective, remarkDirectiveHandler],
1617
}),
18+
thumbnailIntegration({
19+
appName: 'Docs',
20+
content: { type: 'collection', dir: './src/content/docs' },
21+
}),
1722
],
1823
vite: {
1924
plugins: [tailwindcss()],

‎apps/docs/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"@astrojs/mdx": "^4.2.0",
1313
"@astrojs/react": "^4.2.0",
1414
"@explainer/mdx": "workspace:*",
15+
"@explainer/thumbnail": "workspace:*",
1516
"@explainer/ui": "workspace:*",
1617
"@iconify/react": "^5.2.0",
1718
"@tailwindcss/vite": "^4.0.0",

‎apps/docs/public/favicon.svg‎

Lines changed: 9 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)