Merge branch 'main' into change-chat-app-response-status-code

Author: chvmvd

docs/3-web-servers/07-fetch-api-post/_samples/chat-app/main.mjs

@@ -9,7 +9,7 @@ app.get("/messages", (request, response) => {
   response.json(messages);
 });
 
-app.post("/send", (request, response) => {
+app.post("/messages", (request, response) => {
   messages.push(request.body.message);
   response.sendStatus(201); // Created（新しいメッセージを作成）
 });

docs/3-web-servers/07-fetch-api-post/_samples/chat-app/public/script.js

@@ -15,7 +15,7 @@ setInterval(async () => {
 document.getElementById("send-button").onclick = async () => {
   const messageInput = document.getElementById("message-input");
   const message = messageInput.value;
-  await fetch("/send", {
+  await fetch("/messages", {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ message: message }),

docs/3-web-servers/07-fetch-api-post/index.mdx

@@ -283,7 +283,7 @@ document.getElementById("search-button").onclick = async () => {
 
 <video src={chatAppVideo} controls muted />
 
-サーバー側では、これまでのメッセージを保存する配列`messages`を用意しましょう。`/messages`に対するGETリクエストを受けたとき、配列`messages`をJSON形式で返すようにしてください。また、`/send`に対するPOSTリクエストを受けたとき、`Array#push`メソッドで受け取ったメッセージを配列`messages`に追加して、適切な<Term>ステータスコード</Term>を返すようにしてください。
+サーバー側では、これまでのメッセージを保存する配列`messages`を用意しましょう。`/messages`に対するGETリクエストを受けたとき、配列`messages`をJSON形式で返すようにしてください。また、`/messages`に対するPOSTリクエストを受けたとき、`Array#push`メソッドで受け取ったメッセージを配列`messages`に追加して、適切な<Term>ステータスコード</Term>を返すようにしてください。
 
 ```javascript title="main.mjsの抜粋 (サーバーとして動作するJavaScript)"
 const messages = [];
@@ -292,13 +292,13 @@ app.get("/messages", (request, response) => {
   // messagesをJSON形式で返す
 });
 
-app.post("/send", (request, response) => {
+app.post("/messages", (request, response) => {
   // 受け取ったメッセージをmessagesに追加
   response.sendStatus(201); // Created（新しいメッセージを作成）
 });
 ```
 
-ブラウザ側では、新着メッセージを確認するために、定期的に`/messages`にGETリクエストを発行し、受け取ったレスポンスに基づいてメッセージの一覧を表示するようにしてください。また、メッセージを入力し、送信ボタンを押すと、`/send`に対してPOSTリクエストでメッセージの内容を送信するようにしてください。
+ブラウザ側では、新着メッセージを確認するために、定期的に`/messages`にGETリクエストを発行し、受け取ったレスポンスに基づいてメッセージの一覧を表示するようにしてください。また、メッセージを入力し、送信ボタンを押すと、`/messages`に対してPOSTリクエストでメッセージの内容を送信するようにしてください。
 
 ```javascript title="public/script.jsの抜粋 (ブラウザ上で動作するJavaScript)"
 setInterval(async () => {
@@ -325,7 +325,7 @@ app.get("/messages", (request, response) => {
   response.json(messages);
 });
 
-app.post("/send", (request, response) => {
+app.post("/messages", (request, response) => {
   messages.push(request.body.message);
   response.sendStatus(201); // Created（新しいメッセージを作成）
 });
@@ -358,7 +358,7 @@ setInterval(async () => {
 document.getElementById("send-button").onclick = async () => {
   const messageInput = document.getElementById("message-input");
   const message = messageInput.value;
-  await fetch("/send", {
+  await fetch("/messages", {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ message: message }),

docs/3-web-servers/08-database/_samples/forum/main.mjs

@@ -11,7 +11,7 @@ app.get("/posts", async (request, response) => {
   response.json(posts);
 });
 
-app.post("/send", async (request, response) => {
+app.post("/posts", async (request, response) => {
   await client.post.create({ data: { message: request.body.message } });
   response.sendStatus(201); // Created（新しいメッセージを作成）
 });

docs/3-web-servers/08-database/_samples/forum/public/script.js

@@ -15,7 +15,7 @@ setInterval(async () => {
 document.getElementById("send-button").onclick = async () => {
   const messageInput = document.getElementById("message-input");
   const message = messageInput.value;
-  await fetch("/send", {
+  await fetch("/posts", {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ message: message }),

docs/3-web-servers/08-database/index.mdx

@@ -291,7 +291,7 @@ app.get("/posts", async (request, response) => {
 
 ### 手順7
 
-前頁での演習問題2と同様にして、ブラウザ側で、定期的に`/posts`にGETリクエストを発行し、受け取ったレスポンスに基づいてメッセージの一覧を表示するようにしてください。また、メッセージを入力し、送信ボタンを押すと、`/send`に対してPOSTリクエストでメッセージの内容を送信するようにしてください。
+前頁での演習問題2と同様にして、ブラウザ側で、定期的に`/posts`にGETリクエストを発行し、受け取ったレスポンスに基づいてメッセージの一覧を表示するようにしてください。また、メッセージを入力し、送信ボタンを押すと、`/posts`に対してPOSTリクエストでメッセージの内容を送信するようにしてください。
 
 <Answer title="手順7まで">
 
@@ -337,7 +337,7 @@ setInterval(async () => {
 document.getElementById("send-button").onclick = async () => {
   const messageInput = document.getElementById("message-input");
   const message = messageInput.value;
-  await fetch("/send", {
+  await fetch("/posts", {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ message: message }),
@@ -349,13 +349,13 @@ document.getElementById("send-button").onclick = async () => {
 
 ### 手順8
 
-メッセージの送信先 (`/send`へのPOSTリクエスト) を作成しましょう。送られてきたデータが正しいか、Node.jsのデバッガを用いて確認してみましょう。
+メッセージの送信先 (`/posts`へのPOSTリクエスト) を作成しましょう。送られてきたデータが正しいか、Node.jsのデバッガを用いて確認してみましょう。
 
 <Answer title="手順8まで">
 
 ```javascript title="main.mjsの抜粋 (サーバーとして動作するJavaScript)"
 app.use(express.urlencoded({ extended: true }));
-app.post("/send", async (request, response) => {
+app.post("/posts", async (request, response) => {
   debugger; // ここでrequestオブジェクトの中身を確認
 });
 ```
@@ -369,7 +369,7 @@ app.post("/send", async (request, response) => {
 <Answer title="手順9まで">
 
 ```javascript title="main.mjsの抜粋 (サーバーとして動作するJavaScript)"
-app.post("/send", async (request, response) => {
+app.post("/posts", async (request, response) => {
   await client.post.create({ data: { message: request.body.message } });
   response.sendStatus(201); // Created（新しいメッセージを作成）
 });

docusaurus.config.ts

@@ -69,6 +69,7 @@ const config: Config = {
     },
     prism: {
       theme: prismThemes.github,
+      darkTheme: prismThemes.dracula,
     },
     navbar: {
       title: "ut.code(); Learn",

src/css/custom.css

@@ -7,13 +7,11 @@
   --ifm-color-primary-lighter: rgb(102, 212, 189);
   --ifm-color-primary-lightest: rgb(146, 224, 208);
   --ifm-code-font-size: 95%;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
-.docusaurus-highlight-code-line {
-  background-color: rgb(72, 77, 91);
-  display: block;
-  margin: 0 calc(-1 * var(--ifm-pre-padding));
-  padding: 0 var(--ifm-pre-padding);
+[data-theme="dark"] {
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
 .markdown p > img,
@@ -26,8 +24,3 @@
   max-height: 30rem;
   background-color: #fff;
 }
-
-/* https://github.com/facebook/docusaurus/pull/7173 */
-.markdown .admonition h5 code {
-  text-transform: none;
-}