Notice.astro

---
import { getISODateString, noticesWithId } from "@data/utils/notices";
import Markdown from "@components/utils/Markdown.astro";
import type { Lang } from "@components/types";

/**
 * `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;
}

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

const { lang, strip } = Astro.props;

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>
  {
    contents.map(({ date, content, id }) => (
      <li id={id}>
        <span class="date">{getISODateString(date)}</span>
        <Markdown content={content} />
      </li>
    ))
  }
</ul>

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

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

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

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