<script setup lang="ts">
import { marked } from "marked";
import type { EntryType } from "#imports";

const { data } = await useFetch("/api/getNewsList");

onMounted(() => {
    const twitterScript = document.createElement("script");
    const twitterDivision = document.getElementById("twitter");
    twitterScript.type = "text/javascript";
    twitterScript.src = "https://platform.twitter.com/widgets.js";
    twitterScript.async = true;
    twitterDivision?.appendChild(twitterScript);
});

useSeoMeta(
    generateSeoMeta(
        "ホーム",
        "岐阜高専宇宙工学研究会のホームページ",
        "/sera-logo-text.svg"
    )
);
</script>

<template>
    <main>
        <div id="news-board">
            <h3>News</h3>
            <div></div>
            <ul id="news-list">
                <li v-for="entry in data" :key="(entry.date as number)">
                    <small>
                        {{
                            new Date(entry.date as number).toLocaleDateString(
                                "ja-JP",
                                { dateStyle: "medium" }
                            )
                        }}
                    </small>
                    <div class="new-label" v-if="data?.indexOf(entry) < 2">
                        NEW!
                    </div>
                    <article
                        v-html="marked.parse(entry.cardContent as string)"
                    ></article>
                    <NuxtLink
                        v-if="entry.entryType === EntryType.Article"
                        :to="(entry.linkPath as string)"
                    >
                        <Icon
                            name="material-symbols:keyboard-double-arrow-right-rounded"
                        />
                        Read More
                    </NuxtLink>
                </li>
            </ul>
        </div>
        <div id="twitter">
            <a
                class="twitter-timeline"
                data-lang="ja"
                data-dnt="true"
                data-align="center"
                data-theme="dark"
                :data-height="16 * 70"
                :data-width="16 * 33"
                href="https://twitter.com/SERA_NITGC?ref_src=twsrc%5Etfw"
            >
                Tweets by SERA_NITGC
            </a>
        </div>
    </main>
</template>

<style scoped>
main {
    display: grid;
    grid: auto-flow / 2fr 1fr;
}

#news-board {
    max-width: 60rem;
    max-height: 50rem;
    width: fit-content;
    place-self: center;
    overflow-y: scroll;
    border: var(--neptune1) solid 3px;
    box-shadow: 10px 5px 5px var(--starlight1);
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: repeat(2, auto);
    & > h3 {
        place-self: center;
    }
    & > div {
        width: 90%;
        place-self: center;
        border: var(--neptune1) solid 1px;
    }
}

#news-list {
    list-style: none;
    padding: 0 0.75rem;
    & li {
        display: flex;
        align-items: center;
        border-bottom: var(--starlight1) solid 2px;
    }
    & li:last-child {
        border-bottom: none;
    }
    & li > * {
        margin: 0 0.5rem;
    }
    & li > *:first-child {
        margin-left: 0;
    }
    & li > *:last-child {
        margin-right: 0;
    }
    & li .new-label {
        background-color: var(--sun2);
        padding: 0.25rem 0.5rem;
    }
    & li a {
        text-decoration: none;
        color: var(--neptune1);
        display: flex;
        align-items: center;
    }
    & li a span {
        height: 24px;
        width: 24px;
        margin-right: 0.125rem;
    }
}

#twitter {
    display: flex;
    place-self: center;
    width: fit-content;
    & > .twitter-timeline-rendered {
        display: unset;
        width: unset;
        max-width: unset;
        margin: unset;
    }
}

@media screen and (max-width: 1024px) {
    main {
        width: calc(100vw - 4rem);
        margin: 0;
        place-self: center;
        place-content: center;
        grid: auto-flow / 75vw;
    }

    #news-board {
        margin: 1rem 0;
        width: 90%;
    }

    #twitter {
        margin: 1rem 0;
        width: 90%;
        justify-self: center;
    }
}
</style>
