Merge branch 'master' into 202410-rss-to-twitter

README.md

@@ -23,9 +23,7 @@ Markdownファイルのフロントマターにかける設定は以下の通り
 - `author`：記事の著者をページ下部に表示する．
   - `affiliation`：所属．`author`を指定する場合は必須．`oes`とすると[OESの説明ページ](https://utelecon.adm.u-tokyo.ac.jp/about/oes)へのリンクが表示される．
   - `name`：著者名．任意．
-- `breadcrumb`：ページ上部のパンくずリストを定義する．
-  - `title`：パンくずリストのそのページ自身の部分のタイトル．`breadcrumb`を指定する場合は必須．親との差分だけを書く．
-  - `parent`：親ページ．任意．デフォルトは`../`．これを辿っていくことでパンくずリストを構成する．
+- `breadcrumb`：ページ上部のパンくずリストを定義する．詳しくは[後述](#パンくずリストの表示)．
 - `redirect_from`・`redirect_to`：リダイレクトの設定．詳しくは[後述](#redirect_from--redirect_to)．
 
 ## Scripts
@@ -127,7 +125,7 @@ Markdownファイルのフロントマターにかける設定は以下の通り
   - [前述](#srcpages以下のファイルを公開する)の通り，多くのページは`src/pages`以下でページのソースと画像をまとめて管理し，ソースの中ではファイルシステムの相対パスを用いて画像を参照しています．ファイルシステム上での相対パスとURL上での`/`で始まらない相対パスを対応させるには，上記のようなマッピングが必要です．
   - Astroには，このようなマッピングにする設定がありません．
 - 実装
-  - [`TrailingSlashIntegration`](src/lib/TrailingSlashIntegration.ts)で実現しています．ここでは，ビルド後に`src/pages`を参照しながら`dist`内のファイルパスを書き換えています．
+  - [`astro.config.ts`](astro.config.ts)で`format: "preserve"`を指定し，[`Layout.astro`](src/layouts/Layout.astro)で公開時のパスを状況に応じて書き換えることで実現しています．
 
 ### IAL (Inline Attribute List)
 
@@ -195,6 +193,48 @@ pattern: "^\/utol\/"
 - `^\/utol\/$`のようにすると，`/utol/`のみに緊急のお知らせを掲載できます．
 - 同じページのパスに2つ以上の緊急のお知らせがマッチする場合，ファイル名の辞書順で同時に掲載されます．ファイル名は実際のサイトには表示されないため，適宜変更して問題ありません．
 
+### パンくずリストの表示
+
+`breadcrumb`をMarkdownのfrontmatterに記述することで，ページ上部にパンくずリストを表示することができます．
+
+- `title`：パンくずリストのそのページ自身の部分のタイトル．`breadcrumb`を指定する場合は必須．親との差分だけを書く．
+- `parent`：親ページ．任意．デフォルトは`../`．これを辿っていくことでパンくずリストを構成する．
+
+ルート直下のページ（`/utokyo_account/`，`/oc/`など）を除き，パンくずリストを表示するには，`breadcrumb`を記述した上位階層の親ページが必要です．子ページのみに`breadcrumb`を記述することはできません．
+
+#### 例：`/eccs/`以下のページにパンくずリストを表示する場合
+
+- ルート直下の親ページ`/eccs/`（`src/pages/eccs/index.mdx`）
+  ```md
+  ---
+  title: ECCS端末
+  breadcrumb:
+    title: ECCS端末
+  ---
+  ```
+  - ルート直下のページにはパンくずリストが表示されません.
+  - ただし,`breadcrumb`は子ページでパンくずリストを表示するために必須です．
+
+- 子ページ（`parent`を指定しない場合）`/eccs/support/`（`src/pages/eccs/support/index.mdx`）
+  ```md
+  ---
+  title: 問い合わせ先・窓口
+  breadcrumb:
+    title: 問い合わせ
+  ---
+  ```
+  - `parent`はデフォルトで`../`なので，`/eccs/`が親ページになります．
+
+- 子ページ（`parent`を指定することで，`/eccs/`を親ページにする場合）`/eccs/features/printing/`（`src/pages/eccs/features/printing/index.mdx`）
+  ```md
+  ---
+  title: 印刷
+  breadcrumb:
+    title: 印刷
+    parent: ../../
+  ---
+  ```
+
 ## For developers
 
 `@components`に関するドキュメントが[`src/components/README.md`](src/components/README.md)にあります．

astro.config.ts

@@ -9,7 +9,6 @@ import defaultFrontmatterPlugin from "./src/lib/DefaultFrontmatterPlugin.js";
 import dotSlashPlugin from "./src/lib/DotSlashPlugin.js";
 import simpleAttentionPlugin from "./src/lib/SimpleAttentionPlugin.js";
 import externalLinks from "./src/lib/ExternalLinksIntegration.js";
-import trailingSlash from "./src/lib/TrailingSlashIntegration.js";
 import { cleanup } from "./src/lib/CleanupIntegration.js";
 import collectHtmlImages from "./src/lib/CollectHtmlImagesPlugin.js";
 import copyAsset from "./src/lib/CopyAssetIntegration.js";
@@ -36,6 +35,9 @@ export default defineConfig({
       },
     },
   },
+  build: {
+    format: "preserve",
+  },
   markdown: {
     remarkPlugins: [
       dotSlashPlugin,
@@ -72,7 +74,6 @@ export default defineConfig({
     }),
     cleanup(),
     copyAsset(),
-    trailingSlash(),
   ],
   site: "https://utelecon.adm.u-tokyo.ac.jp",
 });

scripts/unused-asset.js

@@ -40,7 +40,7 @@ const parser = unified().use(rehypeParse);
 const [dists, srcs, optimizedImgs] = await Promise.all([
   glob("dist/**/*.html"),
   // Files whose extension is not in DOCUMENT_EXTS and not starting with "_"
-  // e.g. `src/pages/en/meet/img/meet.png`
+  // e.g. `src/pages/en/google/meet/img/meet.png`
   glob("src/pages/**/!(_)*", {
     ignore: `src/pages/**/*{${DOCUMENT_EXTS.join(",")}}`,
     nodir: true,

src/components/README.md

@@ -5,6 +5,7 @@
 コンポーネントはHTMLの要素を返す関数で，複数ページに記述されている内容を共通化したり，そのようなコンポーネントを作るために使われたりします．またコンポーネントには，言語（日本語と英語）に依存しないもの，言語をpropで受け取って出し分けるもの，言語ごとに別々に定義されているものの3種類があります．
 
 このファイルの説明は，Markdownに関する基礎知識に加え，以下の2つのドキュメントを読んでいることを前提としています：
+
 - [What is MDX?](https://mdxjs.com/docs/what-is-mdx/)：MDXに関する基本的な説明
 - [スロット](https://docs.astro.build/ja/core-concepts/astro-components/#スロット)：Astroのコンポーネントに子要素を埋め込む「スロット」に関する説明
 
@@ -44,11 +45,13 @@ prop `cond`がtrueの場合だけ中身の要素が表示されます．また
 ```
 
 注：`.mdx`の場合，JSXの中身もMarkdownとして解釈されます．また，Markdownでは単にテキストを書いた場合は`<p>`要素として解釈されます．よって，1つ目の例で`props.variant === "oc"`のときは以下のHTMLが出力されます：
+
 ```html
 <p>真の場合の内容</p>
 ```
 
 一方，`Fragment`はJSXで用いられる「空のタグ」で，JSXとして認識されますが，HTMLとしては何も出力されません．よって，2つ目の例で`props.variant === "oc"`のときは以下のHTMLが出力されます：
+
 ```html
 真の場合の内容
 ```
@@ -71,6 +74,7 @@ prop `variant`の値によって，表示する要素が切り替わります．
 ```
 
 注：`BlockIALPlugin`により，`.md`および`.mdx`では任意の属性を上のようなsyntaxで指定できます．これは`.astro`で用いられる`slot`属性も含まれます．よって，上の例で`props.variant === "individual"`のときは以下のHTMLが出力されます：
+
 ```html
 <ul>
   <li>学生向けの内容</li>
@@ -87,6 +91,7 @@ prop `variant`の値によって，表示する要素が切り替わります．
 利用例：[`ja/systems/utokyo_account/index.mdx`](ja/systems/utokyo_account/index.mdx)
 
 `/oc/#important`と`/oc/#others`で共通するコンポーネントを作るために利用します．`lang`を指定してください．
+
 - `variant === "oc"`かつ`short`がtrueの場合，`slot="important"`の要素だけが表示されます．
 - `variant === "oc"`かつ`short`がfalseの場合，`slot="important"`の要素は「再掲」と表示されて折りたたまれ，他の要素は表示されます．
 - `variant === "oc"`でない場合，`slot="important"`の要素と他の要素が表示されます．
@@ -120,6 +125,7 @@ prop `variant`の値によって，表示する要素が切り替わります．
 利用例：[`pages/Notice.astro`](pages/Notice.astro)
 
 [`@data`](../data)以下，またはフロントマターにMarkdownで定義されているデータを表示するために利用します．prop `content`にMarkdownを渡すと，それがHTMLに変換されて表示されます．**コンポーネントからコンポーネントにマークアップを渡すために利用しないでください**．代わりに，
+
 - `.mdx`のコンポーネントに渡す場合：`props`に`JSX.Element`を渡して，`{props.hoge}`として埋め込んでください．
   - 例：[`systems/utokyo_wifi/Apply.mdx`](systems/utokyo_wifi/Apply.mdx)
 - `.astro`のコンポーネントに渡す場合：`slot`を利用してください．
@@ -160,4 +166,17 @@ prop `variant`の値によって，表示する要素が切り替わります．
 `@components/{ja,en}/InPreparation.mdx`は，準備中のページを示すコンポーネントです．複数のページを一度に作成する際に，パンくずリストの生成に失敗したり，内部リンクが`404 Not Found`になったりすることを防ぐため，仮のページを作る場合に使われます．言語ごとに別々に定義されています（prop `lang`を取りません）．
 
 ### `WwweccEol.astro`
+
 `@components/{ja,en}/WwweccEol.astro`は，ECCSウェブサイトの閉鎖に伴うuteleconへのコンテンツ移行の旨を示すための特別なコンポーネントです．言語ごとに別々に定義されています（prop `lang`を取りません）．
+
+## 外部メディア等を埋め込むコンポーネント
+
+外部メディア等を埋め込み，スタイルを整えるためのコンポーネントです．これらのコンポーネントは言語に依存しません（prop `lang`を取りません）が，埋め込むメディア等によって異なるpropを取ります．`embed`以下にあります．
+
+### [`YouTube.astro`](embed/YouTube.astro)
+
+`@components/embed/YouTube.astro`は，YouTube動画を埋め込むためのコンポーネントです．prop `src` にYouTubeの埋め込み用URL（`https://www.youtube.com/embed/`から始まるURL）を渡すと，その動画が埋め込まれます．それ以外のprop（`title`など）を指定することもできます．
+
+```jsx
+<YouTube src="動画の埋め込み用URL" />
+```

src/components/embed/YouTube.astro

@@ -0,0 +1,19 @@
+---
+interface Props {
+  src: string;
+}
+
+const { src, ...props } = Astro.props;
+---
+
+<div class="iframe-container">
+  <iframe src={src} loading="lazy" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture web-share" allowfullscreen {...props}>
+    <slot />
+  </iframe>
+</div>
+
+<style>
+  iframe {
+    border: none;
+  }
+</style>

src/components/en/systems/utokyo_account/MFA.mdx

@@ -1,3 +1,16 @@
-Multi-factor authentication (MFA) is a security process in which users prove their identity using at least two pieces of evidence. In addition to passwords, users are asked to verify their identity via SMS, authentication applications, or other methods when signing into their accounts. To improve the overall security of the university, UTokyo requires that you enable multi-factor authentication for your UTokyo Account. Please follow the setup procedures in the "[Initial Setup Procedures for Multi-Factor Authentication for UTokyo Accounts](/en/utokyo_account/mfa/initial)".
+import If from "@components/utils/If.astro";
 
-Currently, some systems cannot be used until multi-factor authentication is enabled, and we plan to gradually expand the number of systems that are subject to such settings. For details, please refer to "[Multi-Factor Authentication is Mandatory for UTokyo Account](/en/notice/2024/mfa100-schedule)".
+{/**
+  * @typedef {object} Props
+  * @property {boolean} [noLink] 初期設定手順へのリンクを表示しない
+  */}
+
+The University of Tokyo has introduced multi-factor authentication to UTokyo Account to improve information system security.
+
+Multi-factor authentication (MFA) is a security process in which users prove their identity using at least two pieces of evidence. In addition to passwords, users are asked to verify their identity via SMS, authentication applications, or other methods when signing into their accounts. MFA improves security by reducing the possibility of someone being able to sign in to your account even if your password is known to someone else for some reason.
+
+On the UTokyo Account, MFA is enabled by users setting up their own initial setup, and we are asking **all users** with a UTokyo Account to enable it. Therefore, some information systems are disabled until you have enabled MFA. It is crucial to ensure the security of your UTokyo Account, not only to protect your personal information but also to protect the information assets held by the university, so we ask you to use multi-factor authentication.
+
+<If cond={!props.noLink}>
+  Please follow the setup procedures in the "[Initial Setup Procedures for Multi-Factor Authentication for UTokyo Accounts](/en/utokyo_account/mfa/initial)".
+</If>

src/components/en/systems/utokyo_wifi/Apply.mdx

@@ -7,7 +7,7 @@ import ApplyHelpMFA from "./ApplyHelpMFA.mdx";
 
 {/**
   * @typedef {object} Props
-  * @property {boolean} support
+  * @property {boolean} [support]
   * @property {boolean} [blockLink]
   * @property {boolean} [inlineHelp]
   * @property {boolean} [utasOnly]

src/components/en/systems/utokyo_wifi/Connect.mdx

@@ -2,20 +2,24 @@ import Help from "@components/utils/Help.astro";
 
 {/**
   * @typedef {object} Props
-  * @property {boolean} support
-  * @property {string} deviceDescription
+  * @property {boolean} [support]
   * @property {string} applyStep
   * @property {JSX.Element} connectConfiguration
   */}
 
-- This process can only be done in the place where UTokyo Wi-Fi (Wi-Fi with SSID `0000UTokyo`) is visible on the Wi-Fi setting menu of your own devices.
+This process can only be done in the place where UTokyo Wi-Fi (Wi-Fi with SSID `0000UTokyo`) is visible on the Wi-Fi setting menu of your own devices.
+{:.additional-info}
 
-1. Select `0000UTokyo` on the Wi-Fi connection settings screen of {props.deviceDescription}.
+1. Select `0000UTokyo` on the Wi-Fi connection settings screen of the device you want to connect.
 2. Enter the user ID and password of your UTokyo Wi-Fi account (not of your UTokyo Account). You can find your user ID and password in the notification email you received in {props.applyStep}. If you have just finished your application, you can also find them on the application completion screen of the account menu.
 3. Once you establish a connection, you can use it just like any normal Wi-Fi.
 
-- When connecting, you may be asked to verify your certificate or to enter the information described in the {props.connectConfiguration}.
-- Please refer to [ECCS Tutor’s page](https://www.sodan.ecc.u-tokyo.ac.jp/en/faq/utokyo-wifi-en/) as well if you are unsure. There are detailed connection instructions for each device. You may also refer to [the "User's Guide" on the page of the Wi-Fi system called "eduroam"](https://www.eduroam.jp/for_users/), which has a similar connection method (replace `eduroam` with UTokyo Wi-Fi SSID when you read the page).
+When connecting, you may be asked to verify your certificate or to enter the information described in the {props.connectConfiguration}.
+{:.additional-info}
+
+Please refer to [ECCS Tutor’s page](https://www.sodan.ecc.u-tokyo.ac.jp/en/faq/utokyo-wifi-en/) as well if you are unsure. There are detailed connection instructions for each device. You may also refer to [the "User's Guide" on the page of the Wi-Fi system called "eduroam"](https://www.eduroam.jp/for_users/), which has a similar connection method (replace `eduroam` with UTokyo Wi-Fi SSID when you read the page).
+{:.additional-info}
+
 <Help lang="en" support={props.support}>
   - If the signal is weak, the connection may be interrupted. Try different locations or times of the day.
   - When you enter your user ID, please include the alphabetical part as well.

src/components/en/systems/utokyo_wifi/index.mdx

@@ -2,53 +2,11 @@ import If from "@components/utils/If.astro";
 import Apply from "./Apply.mdx";
 import Connect from "./Connect.mdx";
 
-{/**
-  * @typedef {object} Props
-  * @property {import("@components/types").Variant} variant
-  * @property {boolean} [important]
-  */}
-
-<If cond={props.variant === "oc"}>
-  - **Task: Apply for an account**
-    <Apply
-      variant="oc"
-      utasOnly
-      support
-      jouhouSecurity= {<a href="/en/utokyo_wifi/#jouhou-security">"Information Security Education" section on UTokyo Wi-Fi page</a>}
-    />
-  - **Task: Try connecting**
-    <Connect
-      deviceDescription="the device you want to connect"
-      applyStep="the step above"
-      connectConfiguration={<a href="/en/utokyo_wifi/#connect-configuration">"Connect Configuration" section on UTokyo Wi-Fi page</a>}
-      support
-    />
-
-
-  <Fragment slot="else">
-    ### Step 1: Check the devices to be used
-
-      Laptops, smartphones, and tablets can generally connect to UTokyo Wi-Fi. However, other types of electronic devices and older devices may not be able to connect. For example, devices that do not support WPA2-Enterprise cannot be connected. Please check for updates to the OS and drivers of your devices and update them appropriately before connecting to UTokyo Wi-Fi.
-
-    ### Step 2: Apply for a UTokyo Wi-Fi Account
-
-       In order to use UTokyo Wi-Fi, a UTokyo Wi-Fi account must be issued each academic year. In this “Step 2”, we will explain the procedure for applying for a UTokyo Wi-Fi account.
-
-      You can apply for your own account using the “UTokyo Wi-Fi Account Menu”. The user ID and password for your account can be viewed on the “UTokyo Wi-Fi Account Menu” screen only immediately after submitting application, and you will also be notified by email. Please note that you can use your issued UTokyo Wi-Fi account to connect to UTokyo Wi-Fi on multiple devices.
-
-      <Apply
-        blockLink
-        inlineHelp
-        jouhouSecurity={<><a href="#jouhou-security">"Information Security Education"</a> section</>}
-      />
-
-    ### Step 3: Connect to UTokyo Wi-Fi
-
-      <Connect
-        deviceDescription="the device you checked in Step 1"
-        applyStep="Step 2"
-        connectConfiguration={<><a href="#connect-configuration">"Connect Configuration" section</a> section below</>}
-      />
-    {:.procedure.gap}
-  </Fragment>
-</If>
+- **Task: Apply for an account**
+  <Apply utasOnly support />
+- **Task: Try connecting**
+  <Connect
+    applyStep="the step above"
+    connectConfiguration={<a href="/en/utokyo_wifi/#connect-configuration">"Connect Configuration" section on UTokyo Wi-Fi page</a>}
+    support
+  />