refactor(MarkdownPostLayout): clean up code formatting and improve layout structure

- Removed unnecessary whitespace for better readability.
- Wrapped ListPosts component in a div for improved layout consistency.
This commit is contained in:
EFEELE
2025-04-30 16:09:42 -06:00
parent 82da0c1e09
commit cc4608fbf5

View File

@@ -11,7 +11,7 @@ import Share from "../components/ui/Share.astro";
const { frontmatter } = Astro.props; const { frontmatter } = Astro.props;
const currentUrl = `${Astro.site}${Astro.url.pathname}`; const currentUrl = `${Astro.site}${Astro.url.pathname}`;
const tweetText = encodeURIComponent( const tweetText = encodeURIComponent(
`"${frontmatter.title}" - by ${frontmatter.author} | EFEELE`, `"${frontmatter.title}" - by ${frontmatter.author} | EFEELE`
); );
import Heading from "../components/ui/Heading.astro"; import Heading from "../components/ui/Heading.astro";
--- ---
@@ -29,12 +29,12 @@ import Heading from "../components/ui/Heading.astro";
copyButton.innerHTML = copyButtonLabel; copyButton.innerHTML = copyButtonLabel;
codeBlock.setAttribute("tabindex", "0"); codeBlock.setAttribute("tabindex", "0");
// wrap codeblock with relative parent element // wrap codeblock with relative parent element
if (codeBlock.parentNode) { if (codeBlock.parentNode) {
codeBlock.parentNode.insertBefore(wrapper, codeBlock); codeBlock.parentNode.insertBefore(wrapper, codeBlock);
wrapper.appendChild(codeBlock); wrapper.appendChild(codeBlock);
// Add the copy button to the wrapper instead of the codeBlock // Add the copy button to the wrapper instead of the codeBlock
// This ensures the button stays fixed relative to the code block container // This ensures the button stays fixed relative to the code block container
wrapper.appendChild(copyButton); wrapper.appendChild(copyButton);
@@ -48,7 +48,7 @@ import Heading from "../components/ui/Heading.astro";
async function copyCode(block: HTMLElement, button: HTMLButtonElement) { async function copyCode(block: HTMLElement, button: HTMLButtonElement) {
let code = block.querySelector("code"); let code = block.querySelector("code");
if (!code) return; if (!code) return;
let text = code.innerText; let text = code.innerText;
await navigator.clipboard.writeText(text); await navigator.clipboard.writeText(text);
@@ -72,7 +72,7 @@ import Heading from "../components/ui/Heading.astro";
> >
<div class="w-64 max-xl:hidden"></div> <div class="w-64 max-xl:hidden"></div>
<article <article
class="flex flex-col gap-8 max-w-3xl max-md:w-full pb-10 pt-8 mt-8 px-14 max-md:px-10 max-sm:px-4 dark:bg-transparent bg-white dark:border-0 border border-neutral-100 rounded-2xl" class="flex flex-col gap-8 max-w-3xl max-md:w-full pb-10 pt-8 mt-8 px-14 max-md:px-10 max-sm:px-4 dark:bg-transparent bg-white dark:border-0 border border-neutral-100 rounded-2xl"
> >
<header class="flex flex-col gap-4" id="start"> <header class="flex flex-col gap-4" id="start">
<div class="flex gap-2 flex-wrap"> <div class="flex gap-2 flex-wrap">
@@ -122,7 +122,7 @@ import Heading from "../components/ui/Heading.astro";
} }
</figure> </figure>
<div class="markdown " id="content"> <div class="markdown" id="content">
<slot /> <slot />
</div> </div>
<Share currentUrl={currentUrl} tweetText={tweetText} /> <Share currentUrl={currentUrl} tweetText={tweetText} />
@@ -136,7 +136,8 @@ import Heading from "../components/ui/Heading.astro";
<NavigationArticles /> <NavigationArticles />
<hr class="text-mint-300/50" /> <hr class="text-mint-300/50" />
</div> </div>
<div class="px-8 max-sm:px-4">
<ListPosts currentPostUrl={Astro.url.pathname} /> <ListPosts currentPostUrl={Astro.url.pathname} />
</div>
</div> </div>
</Layout> </Layout>