WebsiteFluffy/src/layouts/Markdown.astro

---
import HomeButton from "../components/HomeButton.astro";

interface Props {
    post: any,
    prev?: any,
    next?: any,
    base: string,
}

const { post, prev, next, base } = Astro.props;

const { Content } = await post.render();
---

<HomeButton />

<div class="header">
    <h1>{post.data.title}</h1>
    <p>{post.data.description}</p>
    <ul id="tags" class="pill-list" role="list">
        {post.data.tags.map((item: string) => (
                <li class="pill">#{item}</li>
        ))}
    </ul>
</div>

<hr>

<div id="markdown">
    <div style="margin-bottom: 32px" />
    <Content />
    <div style="margin-top: 32px" />
</div>

<hr>

<ul id="controls" role="list">
    <li>
        {prev && (
            <a class="button" href=`${base}/${prev.slug}` id="prev">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256">
                    <path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path>
                </svg>
                Last
            </a>
        )}
    </li>
    <li>
        {next && (
            <a class="button" href=`${base}/${next.slug}` id="next">
                Next
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256">
                    <path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path>
                </svg>
            </a>
        )}
    </li>
</ul>

<style is:global lang="scss">
    @import "../styles/vars";

    #controls {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-content: center;

        > li > .button {
            // background-color: transparent;
            // padding: 0 16px;

            min-width: 35px;
            height: 35px;

            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    #markdown {
        margin: -32px 0;
        display: block;
        flex-grow: 1;


        :target {
            scroll-margin-block: 5ex;
        }

        h1, h2, h3, h4, h5, h6 {
            margin-top: 16px;
            margin-bottom: 8px;
            line-height: 1.1;
            text-wrap: balance;
        }

        p {
            margin-bottom: 8px;
        }

        a {
            text-decoration: none;
            color: $orange;
            transition: all 0.1s ease-in-out;

            &:hover, &:focus-visible {
                text-decoration: underline;
            }

            &:not([class]) {
                text-decoration-skip-ink: auto;
                color: currentColor;
            }
        }

        ol, ul {
            padding-left: 32px;
        }

        hr {
            margin: 16px 0;
            border: 0;
            border-top: 2px solid $gray;
        }

        p code {
            padding: 2px 4px;

            font-size: 13px;

            border-radius: $radius;
            background-color: $gray;
            color: $light;

            overflow-x: auto
        }

        blockquote {
            margin: 8px 0 8px 16px;
            padding: 0 8px;

            font-style: italic;

            border-left: 2px solid $orange;
        }

        table {
            width: 100%;

            border: 1px solid $gray;

            border-collapse: collapse;

            tr {
                border-bottom: 1px solid $gray;

                &:last-of-type {
                    border: 0 solid transparent;
                }

                th, td {
                    padding: 8px 16px;

                    font-size: 13px;

                    border-right: 1px solid $gray;

                    &:last-of-type {
                        border: 0 solid transparent;
                    }
                }

                th {
                    font-weight: bolder;

                    background-color: $gray;
                }
            }
        }

        // pre {
        //     padding: 8px;
        //
        //     white-space: pre-wrap;
        //     word-wrap: break-word;
        //
        //     border-radius: $radius;
        //     background-color: $gray !important;
        //     color: $light;
        //
        //     overflow-x: scroll;
        //
        //     > code {
        //         padding: 0;
        //     }
        // }

        .astro-code {
            margin: 16px 0;

            padding: 40px 8px 8px;

            position: relative;

            display: block;

            font-size: 13px;

            border-radius: $radius;

            &::before {
                content: attr(data-language);

                padding: 4px 16px;

                width: max-content;
                height: 28px;

                position: absolute;
                top: 4px;
                left: 0;

                font-size: 13px;
                text-transform: capitalize;

                border-top-right-radius: 9999px;
                border-bottom-right-radius: 9999px;
                background-color: $gray;
                color: $light;
            }
        }

        .footnotes {
            margin-top: 32px;
            padding: 16px;

            border-radius: $radius;
            background-color: $gray;

            > h2 {
                padding-top: 0;
            }
        }
    }
</style>