Notice.astro

---
import { getEntry } from "astro:content";
import Markdown from "@components/utils/Markdown.astro";
import type { Lang } from "@components/types";
import { getISODateString, getLocaleDateString } from "../../util";

/**
 * `Markdown`の利用例として紹介されています．
 * このコンポーネントを利用しなくなる場合は，`src/components/README.md`を編集して，
 * 別の利用例を紹介するようにしてください．
 *
 * 利用ページ：
 * - https://utelecon.adm.u-tokyo.ac.jp/
 * - https://utelecon.adm.u-tokyo.ac.jp/notice/
 */

export interface Props {
  lang: Lang;
  strip?: boolean;
  localize?: boolean;
}

interface NoticeContent {
  date: Date;
  content: string;
  id: string;
}

const { lang, strip, localize } = Astro.props;

const { data: noticesWithId } = await getEntry("notices", "notice")!;

const contents: NoticeContent[] = [];

for (const notice of noticesWithId) {
  const content = notice.content[lang] ?? notice.content.ja;
  if (!content) continue;

  if (!strip || contents.length < (notice.important ? 12 : 8)) {
    contents.push({ date: notice.date, content, id: notice.id });
  }
}
---

<ul class:list={["date_list", {localized: localize}]}>
  {
    contents.map(({ date, content, id }) => (
      <li id={id}>
        <span class="date">{localize ? getLocaleDateString(date, lang, "long") : getISODateString(date)}</span>{
        }<span class="title"><Markdown content={content} /></span>
      </li>
    ))
  }
</ul>

<script>
  const target = document.getElementById(location.hash.slice(1));
  if (target) target.classList.add("listitem-highlight");
</script>

<style lang="scss">
  @use "@styles/color";

  .date {
    display: inline-block;
    width: 6rem;
    color: color.$heading-color;
    margin-right: 5px;

    :where(.date_list).localized & {
      width: auto;
    }
  }

  .listitem-highlight {
    background-color: yellow;
  }
</style>