Skip to content

Fix Astro Island margins in Markdown #3340

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
delucis merged 6 commits into from
Sep 19, 2025
Merged

Fix Astro Island margins in Markdown #3340

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
28fd24a
fix: markdown island margins
HiDeoo Jul 25, 2025
61bedc2
docs: add more examples
HiDeoo Jul 29, 2025
b4dbc6d
refactor: clean up and use variable
HiDeoo Aug 26, 2025
8693be4
Merge branch 'main' into hd-fix-md-styles-astro-island
HiDeoo Aug 26, 2025
a6894c1
chore: remove demo content
HiDeoo Aug 26, 2025
67ddf34
chore: add changeset
HiDeoo Aug 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
docs: add more examples
  • Loading branch information
@HiDeoo
HiDeoo committed Jul 29, 2025
commit 61bedc2f0c1359204be3c76694f1d0850adf4f56
299 changes: 299 additions & 0 deletions docs/src/components/Debug.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import type { ComponentChildren } from 'preact';

import './debug.css';

export function IslandBlock() {
return <p>This is an Astro Island block.</p>;
}
Expand All @@ -26,3 +28,300 @@ export function IslandSlot(props: { children: ComponentChildren }) {
</>
);
}

// https://github.com/cloudflare/cloudflare-docs/blob/production/src/components/ResourcesBySelector.tsx
export function IslandCfExample() {
const visibleResources: {
collection: string;
id: string;
data: {
title: string;
description: string;
url: string;
};
}[] = [
{
collection: 'stream',
id: 'example-video',
data: {
title: 'Example Video',
description: 'This is an example video from Cloudflare Stream.',
url: 'example-video-url',
},
},
{
collection: 'docs',
id: 'example-doc',
data: {
title: 'Example Document',
description: 'This is an example document from Cloudflare Docs.',
url: 'example-doc-url',
},
},
];

return (
<div>
<div className={`grid grid-cols-2 gap-4`}>
{visibleResources.map((page) => {
const href = page.collection === 'stream' ? `/videos/${page.data.url}/` : `/${page.id}/`;

return (
<a
key={page.id}
href={href}
className="flex flex-col gap-2 rounded-sm border border-solid border-gray-200 p-6 text-black no-underline hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800"
>
<p className="decoration-accent underline decoration-2 underline-offset-4">
{page.data.title}
</p>
<span className="line-clamp-3" title={page.data.description}>
{page.data.description}
</span>
</a>
);
})}
</div>
</div>
);
}

export function IslandGraph() {
return (
<div>
<svg width="640" height="400">
<g
transform="translate(0,370)"
fill="none"
font-size="10"
font-family="sans-serif"
text-anchor="middle"
>
<path class="domain" stroke="currentColor" d="M40,6V0H620V6"></path>
<g class="tick" opacity="1" transform="translate(40,0)">
<line stroke="currentColor" y2="6"></line>
<text fill="currentColor" y="9" dy="0.71em">
2023
</text>
</g>
<g class="tick" opacity="1" transform="translate(89.26027397260273,0)">
<line stroke="currentColor" y2="6"></line>
<text fill="currentColor" y="9" dy="0.71em">
February
</text>
</g>
<g class="tick" opacity="1" transform="translate(133.75342465753425,0)">
<line stroke="currentColor" y2="6"></line>
<text fill="currentColor" y="9" dy="0.71em">
March
</text>
</g>
<g class="tick" opacity="1" transform="translate(183.013698630137,0)">
<line stroke="currentColor" y2="6"></line>
<text fill="currentColor" y="9" dy="0.71em">
April
</text>
</g>
<g class="tick" opacity="1" transform="translate(230.6849315068493,0)">
<line stroke="currentColor" y2="6"></line>
<text fill="currentColor" y="9" dy="0.71em">
May
</text>
</g>
<g class="tick" opacity="1" transform="translate(279.94520547945206,0)">
<line stroke="currentColor" y2="6"></line>
<text fill="currentColor" y="9" dy="0.71em">
June
</text>
</g>
<g class="tick" opacity="1" transform="translate(327.6164383561644,0)">
<line stroke="currentColor" y2="6"></line>
<text fill="currentColor" y="9" dy="0.71em">
July
</text>
</g>
<g class="tick" opacity="1" transform="translate(376.87671232876704,0)">
<line stroke="currentColor" y2="6"></line>
<text fill="currentColor" y="9" dy="0.71em">
August
</text>
</g>
<g class="tick" opacity="1" transform="translate(426.1369863013699,0)">
<line stroke="currentColor" y2="6"></line>
<text fill="currentColor" y="9" dy="0.71em">
September
</text>
</g>
<g class="tick" opacity="1" transform="translate(473.8082191780822,0)">
<line stroke="currentColor" y2="6"></line>
<text fill="currentColor" y="9" dy="0.71em">
October
</text>
</g>
<g class="tick" opacity="1" transform="translate(523.068493150685,0)">
<line stroke="currentColor" y2="6"></line>
<text fill="currentColor" y="9" dy="0.71em">
November
</text>
</g>
<g class="tick" opacity="1" transform="translate(570.7397260273973,0)">
<line stroke="currentColor" y2="6"></line>
<text fill="currentColor" y="9" dy="0.71em">
December
</text>
</g>
<g class="tick" opacity="1" transform="translate(620,0)">
<line stroke="currentColor" y2="6"></line>
<text fill="currentColor" y="9" dy="0.71em">
2024
</text>
</g>
</g>
<g
transform="translate(40,0)"
fill="none"
font-size="10"
font-family="sans-serif"
text-anchor="end"
>
<path class="domain" stroke="currentColor" d="M-6,370H0V20H-6"></path>
<g class="tick" opacity="1" transform="translate(0,370)">
<line stroke="currentColor" x2="-6"></line>
<text fill="currentColor" x="-9" dy="0.32em">
0
</text>
</g>
<g class="tick" opacity="1" transform="translate(0,335)">
<line stroke="currentColor" x2="-6"></line>
<text fill="currentColor" x="-9" dy="0.32em">
10
</text>
</g>
<g class="tick" opacity="1" transform="translate(0,300)">
<line stroke="currentColor" x2="-6"></line>
<text fill="currentColor" x="-9" dy="0.32em">
20
</text>
</g>
<g class="tick" opacity="1" transform="translate(0,265)">
<line stroke="currentColor" x2="-6"></line>
<text fill="currentColor" x="-9" dy="0.32em">
30
</text>
</g>
<g class="tick" opacity="1" transform="translate(0,230)">
<line stroke="currentColor" x2="-6"></line>
<text fill="currentColor" x="-9" dy="0.32em">
40
</text>
</g>
<g class="tick" opacity="1" transform="translate(0,195)">
<line stroke="currentColor" x2="-6"></line>
<text fill="currentColor" x="-9" dy="0.32em">
50
</text>
</g>
<g class="tick" opacity="1" transform="translate(0,160)">
<line stroke="currentColor" x2="-6"></line>
<text fill="currentColor" x="-9" dy="0.32em">
60
</text>
</g>
<g class="tick" opacity="1" transform="translate(0,125.00000000000001)">
<line stroke="currentColor" x2="-6"></line>
<text fill="currentColor" x="-9" dy="0.32em">
70
</text>
</g>
<g class="tick" opacity="1" transform="translate(0,89.99999999999999)">
<line stroke="currentColor" x2="-6"></line>
<text fill="currentColor" x="-9" dy="0.32em">
80
</text>
</g>
<g class="tick" opacity="1" transform="translate(0,54.99999999999999)">
<line stroke="currentColor" x2="-6"></line>
<text fill="currentColor" x="-9" dy="0.32em">
90
</text>
</g>
<g class="tick" opacity="1" transform="translate(0,20)">
<line stroke="currentColor" x2="-6"></line>
<text fill="currentColor" x="-9" dy="0.32em">
100
</text>
</g>
</g>
</svg>
</div>
);
}

export function IslandQuizz(props: {
children: ComponentChildren;
'answer-1': ComponentChildren;
'answer-2': ComponentChildren;
'answer-3': ComponentChildren;
}) {
return (
<section>
<div>
<h3 id="test-your-knowledge">Test your knowledge</h3>
</div>
{props.children}
<form>
<ol>
<li>
<label>
<input type="radio" name="foo" />
{props['answer-1']}
</label>
</li>
<li>
<label>
<input type="radio" name="foo" />
{props['answer-2']}
</label>
</li>
<li>
<label>
<input type="radio" name="foo" />
{props['answer-3']}
</label>
</li>
</ol>
<div>
<button type="submit" disabled>
Submit
</button>
</div>
</form>
</section>
);
}

export function IslandAside(props: {
children: ComponentChildren;
title: ComponentChildren;
footer: ComponentChildren;
}) {
return (
<aside>
<header>{props.title}</header>
<main>{props.children}</main>
<footer>{props.footer}</footer>
</aside>
);
}

export function IslandNewsletter() {
return (
<form class="not-content">
<label>
Subscribe to our newsletter
<input type="email" name="email" placeholder="[email protected]" required />
</label>
<button type="submit">Subscribe</button>
</form>
);
}
85 changes: 85 additions & 0 deletions docs/src/components/debug.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
:root {
--spacing: 0.25rem;
--radius-sm: 0.25rem;
--tw-border-style: solid;
--color-black: var(--sl-color-white);
--color-accent: var(--sl-color-orange);
}

.grid {
display: grid;
}

.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gap-4 {
gap: calc(var(--spacing) * 4);
}

.flex {
display: flex;
}

.flex-col {
flex-direction: column;
}

.gap-2 {
gap: calc(var(--spacing) * 2);
}

.rounded-sm {
border-radius: var(--radius-sm);
}

.border {
border-style: var(--tw-border-style);
border-width: 1px;
}

.border-solid {
--tw-border-style: solid;
border-style: solid;
}

.border-gray-200 {
border-color: var(--color-gray-200);
}

.p-6 {
padding: calc(var(--spacing) * 6);
}

.text-black {
color: var(--color-black);
}

.no-underline {
text-decoration-line: none;
}

.underline {
text-decoration-line: underline;
}

.decoration-accent {
-webkit-text-decoration-color: var(--color-accent);
text-decoration-color: var(--color-accent);
}

.decoration-2 {
text-decoration-thickness: 2px;
}

.underline-offset-4 {
text-underline-offset: 4px;
}

.line-clamp-3 {
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
}
Loading
Loading