Skip to content

Commit 1240aaf

Browse files
chargomechargome
committed
add cardgrid
1 parent b9bf08d commit 1240aaf

File tree

12 files changed

+94
-97
lines changed

12 files changed

+94
-97
lines changed

‎develop-docs/getting-started/index.mdx‎

Lines changed: 1 addition & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -7,99 +7,7 @@ sidebar_order: 1
77
We recommend going through the [engineering practices](/engineering-practices) and our [development philsophy](/getting-started/philosophy/) before contributing a change to Sentry.
88

99

10-
<div className="flex flex-wrap gap-6">
11-
<Card
12-
className="w-full"
13-
href="/development-infrastructure/"
14-
title="Development Infrastructure"
15-
description="How to get your local dev environment up and running."
16-
image={{
17-
src: "/icon/dev-infra.png",
18-
width: 64,
19-
height: 64,
20-
alt: "Development Infrastructure"
21-
}}
22-
/>
10+
<DevDocsCardGrid />
2311

24-
<Card
25-
className="w-full md:w-[calc(50%-12px)]"
26-
href="/backend/"
27-
title="Backend"
28-
description="The monolith that is powering Sentry."
29-
image={{
30-
src: "/icon/back-end.png",
31-
width: 64,
32-
height: 64,
33-
alt: "Backend"
34-
}}
35-
/>
36-
<Card
37-
className="w-full md:w-[calc(50%-12px)]"
38-
href="/frontend/"
39-
title="Frontend"
40-
description="How we write frontend code."
41-
image={{
42-
src: "/icon/front-end.png",
43-
width: 64,
44-
height: 64,
45-
alt: "Frontend"
46-
}}
47-
48-
/>
49-
<Card
50-
className="w-full md:w-[calc(50%-12px)]"
51-
href="/services/"
52-
title="Services"
53-
description="Running besides the monolith."
54-
image={{
55-
src: "/icon/services.png",
56-
width: 64,
57-
height: 64,
58-
alt: "Services"
59-
}}
60-
/>
61-
<Card
62-
className="w-full md:w-[calc(50%-12px)]"
63-
href="/integrations/"
64-
title="Integrations"
65-
description="Connecting Sentry to other products."
66-
image={{
67-
src: "/icon/integrate.png",
68-
width: 64,
69-
height: 64,
70-
alt: "Integrations"
71-
}}
72-
/>
73-
<Card
74-
className="w-full md:w-[calc(50%-12px)]"
75-
href="/ingestion/"
76-
title="Ingestion"
77-
description="Receiving and processing data."
78-
image={{
79-
src: "/icon/ingest.png",
80-
width: 64,
81-
height: 64,
82-
alt: "Ingestion"
83-
}}
84-
/>
85-
<Card
86-
className="w-full md:w-[calc(50%-12px)]"
87-
href="/sdk/"
88-
title="SDKs"
89-
description="Instrumenting users code."
90-
image={{
91-
src: "/icon/sdks.png",
92-
width: 64,
93-
height: 64,
94-
alt: "SDKs"
95-
}}
96-
/>
97-
<Card
98-
className="w-full"
99-
href="/self-hosted/"
100-
title="Self-Hosted Sentry"
101-
description="How you can run all of Sentry on your own server, without paying anything."
102-
/>
103-
</div>
10412

10513
You can also take a glance at the [Sentry Dockerfile](https://github.com/getsentry/sentry/blob/master/self-hosted/Dockerfile) for more information on how the Sentry server is configured, including its system dependencies.

‎src/components/card.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,16 @@ export function Card({
1919
}) {
2020
return (
2121
<Link href={href} className={className}>
22-
<div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full">
23-
<Image src={image} height={64} alt={imageAlt} className="object-contain" />
22+
<div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full text-[var(--foreground)]">
23+
<Image
24+
src={image}
25+
height={64}
26+
alt={imageAlt}
27+
className="object-contain !border-none !shadow-none"
28+
/>
2429
<div className="flex flex-col justify-center space-y-2">
2530
<h3 className="text-xl font-medium">{title}</h3>
26-
<p>{description}</p>
31+
<p className="text-[length:--font-size-3]">{description}</p>
2732
</div>
2833
</div>
2934
</Link>

‎src/components/devDocsCardGrid.tsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import BackendImg from 'sentry-docs/imgs/back-end.png';
2+
import InfraImg from 'sentry-docs/imgs/dev-infra.png';
3+
import FrontendImg from 'sentry-docs/imgs/front-end.png';
4+
import IngestImg from 'sentry-docs/imgs/ingest.png';
5+
import IntegrationsImg from 'sentry-docs/imgs/integrate.png';
6+
import SkdsImg from 'sentry-docs/imgs/sdks.png';
7+
import ServicesImg from 'sentry-docs/imgs/services.png';
8+
import SelfHostedImg from 'sentry-docs/imgs/support.png';
9+
10+
import {Card} from './card';
11+
12+
export function DevDocsCardGrid() {
13+
return (
14+
<div className="flex flex-wrap gap-6 not-prose">
15+
<Card
16+
className="w-full"
17+
href="/development-infrastructure/"
18+
title="Development Infrastructure"
19+
description="How to get your local dev environment up and running."
20+
image={InfraImg}
21+
imageAlt="Development Infrastructure"
22+
/>
23+
24+
<Card
25+
className="w-full md:w-[calc(50%-12px)]"
26+
href="/backend/"
27+
title="Backend"
28+
description="The monolith that is powering Sentry."
29+
image={BackendImg}
30+
imageAlt="Backend"
31+
/>
32+
<Card
33+
className="w-full md:w-[calc(50%-12px)]"
34+
href="/frontend/"
35+
title="Frontend"
36+
description="How we write frontend code."
37+
image={FrontendImg}
38+
imageAlt="Frontend"
39+
/>
40+
<Card
41+
className="w-full md:w-[calc(50%-12px)]"
42+
href="/services/"
43+
title="Services"
44+
description="Running besides the monolith."
45+
image={ServicesImg}
46+
imageAlt="Services"
47+
/>
48+
<Card
49+
className="w-full md:w-[calc(50%-12px)]"
50+
href="/integrations/"
51+
title="Integrations"
52+
imageAlt="Integrations"
53+
description="Connecting Sentry to other products."
54+
image={IntegrationsImg}
55+
/>
56+
<Card
57+
className="w-full md:w-[calc(50%-12px)]"
58+
href="/ingestion/"
59+
title="Ingestion"
60+
imageAlt="Ingestion"
61+
description="Receiving and processing data."
62+
image={IngestImg}
63+
/>
64+
<Card
65+
className="w-full md:w-[calc(50%-12px)]"
66+
href="/sdk/"
67+
title="SDKs"
68+
imageAlt="SDKs"
69+
description="Instrumenting users code."
70+
image={SkdsImg}
71+
/>
72+
<Card
73+
className="w-full"
74+
href="/self-hosted/"
75+
title="Self-Hosted Sentry"
76+
imageAlt="Self-Hosted Sentry"
77+
description="How you can run all of Sentry on your own server, without paying anything."
78+
image={SelfHostedImg}
79+
/>
80+
</div>
81+
);
82+
}

‎src/components/docPage/type.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
margin-bottom: 1.75rem;
7979
}
8080

81-
h3 {
81+
h3 :not(.not-prose) {
8282
font-size: 1.125rem;
8383
}
8484

‎public/icon/back-end.png‎ renamed to ‎src/imgs/back-end.png‎

File renamed without changes.

‎public/icon/dev-infra.png‎ renamed to ‎src/imgs/dev-infra.png‎

File renamed without changes.

‎public/icon/front-end.png‎ renamed to ‎src/imgs/front-end.png‎

File renamed without changes.

‎public/icon/ingest.png‎ renamed to ‎src/imgs/ingest.png‎

File renamed without changes.

‎public/icon/integrate.png‎ renamed to ‎src/imgs/integrate.png‎

File renamed without changes.

‎public/icon/sdks.png‎ renamed to ‎src/imgs/sdks.png‎

File renamed without changes.

0 commit comments

Comments
 (0)