feat: improve admonitions notes (#1549)

* feat: change color of aside notes

* rename aside dir to admonitions

_includes/admonitions/caution.html

@@ -0,0 +1,4 @@
+<div class="doc-box doc-notice" markdown="1"><p class="doc-notice-title"><i class="fa fa-lg fa-exclamation-triangle"></i> Caution</p>
+{{include.content}}
+</div>
+

_includes/admonitions/note.html

@@ -0,0 +1,3 @@
+<div class="doc-box doc-info" markdown="1"><p class="doc-info-title"><i class="fa fa-lg fa-info-circle"></i> Note</p>
+{{include.content}}
+</div>

_includes/admonitions/warning.html

@@ -0,0 +1,4 @@
+<div class="doc-box doc-warn" markdown="1">
+<p class="doc-warn-title"><svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M12 7C11.7348 7 11.4804 7.10536 11.2929 7.29289C11.1054 7.48043 11 7.73478 11 8V12C11 12.2652 11.1054 12.5196 11.2929 12.7071C11.4804 12.8946 11.7348 13 12 13C12.2652 13 12.5196 12.8946 12.7071 12.7071C12.8946 12.5196 13 12.2652 13 12V8C13 7.73478 12.8946 7.48043 12.7071 7.29289C12.5196 7.10536 12.2652 7 12 7ZM12 15C11.8022 15 11.6089 15.0586 11.4444 15.1685C11.28 15.2784 11.1518 15.4346 11.0761 15.6173C11.0004 15.8 10.9806 16.0011 11.0192 16.1951C11.0578 16.3891 11.153 16.5673 11.2929 16.7071C11.4327 16.847 11.6109 16.9422 11.8049 16.9808C11.9989 17.0194 12.2 16.9996 12.3827 16.9239C12.5654 16.8482 12.7216 16.72 12.8315 16.5556C12.9414 16.3911 13 16.1978 13 16C13 15.7348 12.8946 15.4804 12.7071 15.2929C12.5196 15.1054 12.2652 15 12 15ZM21.71 7.56L16.44 2.29C16.2484 2.10727 15.9948 2.00368 15.73 2H8.27C8.00523 2.00368 7.75163 2.10727 7.56 2.29L2.29 7.56C2.10727 7.75163 2.00368 8.00523 2 8.27V15.73C2.00368 15.9948 2.10727 16.2484 2.29 16.44L7.56 21.71C7.75163 21.8927 8.00523 21.9963 8.27 22H15.73C15.9948 21.9963 16.2484 21.8927 16.44 21.71L21.71 16.44C21.8927 16.2484 21.9963 15.9948 22 15.73V8.27C21.9963 8.00523 21.8927 7.75163 21.71 7.56ZM20 15.31L15.31 20H8.69L4 15.31V8.69L8.69 4H15.31L20 8.69V15.31Z"></path></svg> Warning</p>  
+{{include.content}}
+</div>

_includes/community-caveat.html

@@ -1,4 +1,4 @@
-{% include warning.html content="This information refers to third-party sites,
+{% include admonitions/warning.html content="This information refers to third-party sites,
 products, or modules that are not maintained by the Expressjs team.  Listing here does not constitute
 an endorsement or recommendation from the Expressjs project team.
 " %}

css/dark-theme.css

@@ -1,7 +1,17 @@
+.dark-mode:root{
+  --box-fg: rgb(255, 255, 255);
+  --info-bg: rgb(23, 29, 79);
+  --info-accent: rgb(189, 195, 255);
+  --notice-bg: rgb(78, 64, 34);
+  --notice-accent: rgb(249, 232, 195);
+  --warn-bg: rgb(78, 34, 50);
+  --warn-accent: rgb(249, 195, 214);
+}
+
 :root {
   --main_dark_bg: #010409;
   --second_dark_bg: #0d1117;
-  --darker_hover: #171b20;;
+  --darker_hover: #171b20;
   --dark_hover: #383838;
   --second_dark_hover: #484848;
   --dark_inner_text: #888888;
@@ -130,15 +140,11 @@ html.dark-mode div#overlay {
     color: var(--dark_main_text) !important;
   }
 }
-html.dark-mode .doc-box.doc-info,
-html.dark-mode .doc-box.doc-notice,
-html.dark-mode .doc-box.doc-warn {
-  color: var(--dark_main_text);
-  background: var(--main_dark_bg);
-}
+
 html.dark-mode .doc-box.doc-info pre.language-javascript {
   background: var(--main_dark_bg);
 }
+
 html.dark-mode h1,
 html.dark-mode h2,
 html.dark-mode h3,

css/style.css

@@ -5,6 +5,16 @@
 
 /* general */
 
+:root {
+  --box-fg: rgb(24, 24, 24);
+  --info-bg: rgb(207, 212, 252);
+  --info-accent: rgb(15, 28, 138);
+  --notice-bg: rgb(252, 234, 197);
+  --notice-accent: rgb(115, 82, 13);
+  --warn-bg: rgb(250, 209, 223);
+  --warn-accent: rgb(138, 15, 58);
+}
+
 * {
   box-sizing: border-box;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
@@ -465,11 +475,10 @@ html[xmlns] .clearfix {
 /* doc boxes */
 
 .doc-box {
-  font-size: 12px;
-  line-height: 14px;
-  padding: 10px;
-  border-radius: 3px;
-  margin: 20px 3% 20px 3%;
+  padding: 16px;
+  color: var(--box-fg);
+  border-radius: 0 6px 6px 0;
+  margin-top: 1rem;
 }
 
 .doc-box pre {
@@ -510,18 +519,46 @@ html[xmlns] .clearfix {
 
 
 .doc-notice {
-  background: #faf6e8;
-  border: 1px solid #ded8c1;
+  background: var(--notice-bg);
+  border-left: 3px solid var(--notice-accent);
+}
+
+.doc-notice a{
+  color: var(--notice-accent);
+  text-decoration: underline;
 }
 
 .doc-info {
-  background: #f7faec;
-  border: 1px solid #dfe2d3;
+  background: var(--info-bg);
+  border-left: 3px solid var(--info-accent);
+}
+
+.doc-info a{
+  color: var(--info-accent);
+  text-decoration: underline;
+}
+
+.doc-info-title {
+  color: var(--info-accent);
+  font-weight: 600;
 }
 
 .doc-warn {
-  background: #f9f1f1;
-  border: 1px solid #e2d3d3;
+  background: var(--warn-bg);
+  border-left: 3px solid var(--warn-accent);
+}
+
+.doc-warn-title {
+  color: var(--warn-accent);
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.doc-warn a {
+  color: var(--warn-accent);
+  text-decoration: underline;
 }
 
 #i18n-notice-box {

en/4x/api.md

@@ -9,7 +9,7 @@ redirect_from: "/4x/api.html"
 
   <h1>4.x API</h1>
 
-  {% include note.html content="Express 4.0 requires Node.js 0.10 or higher." %}
+  {% include admonitions/note.html content="Express 4.0 requires Node.js 0.10 or higher." %}
 
   {% include api/{{ page.lang }}/4x/express.md %}
   {% include api/{{ page.lang }}/4x/app.md %}

en/5x/api.md

@@ -9,9 +9,9 @@ redirect_from: "/5x/api.html"
 
   <h1>5.x API</h1>
 
-  {% include note.html content="This is early beta documentation that may be incomplete and is still under development." %}
+  {% include admonitions/caution.html content="This is early beta documentation that may be incomplete and is still under development." %}
 
-  {% include note.html content="Express 5.0 requires Node.js 18 or higher." %}
+  {% include admonitions/note.html content="Express 5.0 requires Node.js 18 or higher." %}
 
   {% include api/{{ page.lang }}/5x/express.md %}
   {% include api/{{ page.lang }}/5x/app.md %}

en/advanced/best-practice-security.md

@@ -14,7 +14,7 @@ The term _"production"_ refers to the stage in the software lifecycle when an ap
 
 Development and production environments are usually set up differently and have vastly different requirements. What's fine in development may not be acceptable in production. For example, in a development environment you may want verbose logging of errors for debugging, while the same behavior can become a security concern in a production environment. And in development, you don't need to worry about scalability, reliability, and performance, while those concerns become critical in production.
 
-{% include note.html content="If you believe you have discovered a security vulnerability in Express, please see
+{% include admonitions/note.html content="If you believe you have discovered a security vulnerability in Express, please see
 [Security Policies and Procedures](/en/resources/contributing.html#security-policies-and-procedures).
 " %}
 
@@ -120,7 +120,7 @@ disable using the `app.disable()` method:
 app.disable('x-powered-by')
 ```
 
-{% include note.html content="Disabling the `X-Powered-By header` does not prevent
+{% include admonitions/note.html content="Disabling the `X-Powered-By header` does not prevent
 a sophisticated attacker from determining that an app is running Express. It may
 discourage a casual exploit, but there are other ways to determine an app is running
 Express." %}

es/advanced/best-practice-security.md

@@ -13,7 +13,7 @@ El término *"producción"* hace referencia a la etapa del ciclo de vida del sof
 
 Los entornos de desarrollo y producción se configuran normalmente de forma diferente y tiene requisitos también muy diferentes. Lo que funciona en el desarrollo puede que no sea aceptable en la producción. Por ejemplo, en un entorno de desarrollo, puede que desee el registro detallado de errores a efecto de depuración, mientras que el mismo comportamiento puede suponer un problema de seguridad en un entorno de producción. De la misma forma, en el desarrollo, no es necesario preocuparse por la escalabilidad, la fiabilidad y el rendimiento, mientras que estos son clave en la producción.
 
-{% include note.html content="Si crees haber encontrado una vulnerabilidad de seguridad en Express, por favor mira nuestras [Políticas de Seguridad y Procedimientos](/en/resources/contributing.html#security-policies-and-procedures).
+{% include admonitions/note.html content="Si crees haber encontrado una vulnerabilidad de seguridad en Express, por favor mira nuestras [Políticas de Seguridad y Procedimientos](/en/resources/contributing.html#security-policies-and-procedures).
 " %}
 
 Las mejores prácticas de seguridad para aplicaciones Express en producción incluyen:

id/4x/api.md

@@ -8,7 +8,7 @@ lang: id
 
   <h1>4.x API</h1>
 
-  {% include note.html content="Express 4.0 requires Node.js 0.10 or higher." %}
+  {% include admonitions/note.html content="Express 4.0 requires Node.js 0.10 or higher." %}
 
   {% include api/en/4x/express.md %}
   {% include api/en/4x/app.md %}

id/advanced/best-practice-security.md

@@ -13,7 +13,7 @@ The term _"production"_ refers to the stage in the software lifecycle when an ap
 
 Development and production environments are usually set up differently and have vastly different requirements. What's fine in development may not be acceptable in production. For example, in a development environment you may want verbose logging of errors for debugging, while the same behavior can become a security concern in a production environment. And in development, you don't need to worry about scalability, reliability, and performance, while those concerns become critical in production.
 
-{% include note.html content="If you believe you have discovered a security vulnerability in Express, please see
+{% include admonitions/note.html content="If you believe you have discovered a security vulnerability in Express, please see
 [Security Policies and Procedures](/en/resources/contributing.html#security-policies-and-procedures).
 " %}
 
@@ -119,7 +119,7 @@ disable using the `app.disable()` method:
 app.disable('x-powered-by')
 ```
 
-{% include note.html content="Disabling the `X-Powered-By header` does not prevent
+{% include admonitions/note.html content="Disabling the `X-Powered-By header` does not prevent
 a sophisticated attacker from determining that an app is running Express. It may
 discourage a casual exploit, but there are other ways to determine an app is running
 Express." %}

ja/advanced/best-practice-security.md

@@ -13,7 +13,7 @@ lang: ja
 
 開発環境と実稼働環境は通常、別々にセットアップされ、それぞれの要件は大きく異なっています。開発環境では許可されることが、実稼働環境では許可されないことがあります。例えば、開発環境ではデバッグのためにエラーの詳細なロギングを実行できますが、同じ動作が実稼働環境ではセキュリティー上の問題となります。開発環境では、スケーラビリティー、信頼性、パフォーマンスについて心配する必要はありませんが、それらは実稼働環境では重大な問題となります。
 
-{% include note.html content="If you believe you have discovered a security vulnerability in Express, please see [Security Policies and Procedures](/en/resources/contributing.html#security-policies-and-procedures)." %}
+{% include admonitions/note.html content="If you believe you have discovered a security vulnerability in Express, please see [Security Policies and Procedures](/en/resources/contributing.html#security-policies-and-procedures)." %}
 
 本番環境でのExpressアプリケーションのセキュリティのベスト・プラクティスは次のとおりです。
 
@@ -83,7 +83,7 @@ app.disable('x-powered-by')
 
 `helmet.js` を使用する場合は、この操作が自動的に実行されます。
 
-{% include note.html content="Disabling the `X-Powered-By header` does not prevent a sophisticated attacker from determining that an app is running Express. It may discourage a casual exploit, but there are other ways to determine an app is running Express. "%}
+{% include admonitions/note.html content="Disabling the `X-Powered-By header` does not prevent a sophisticated attacker from determining that an app is running Express. It may discourage a casual exploit, but there are other ways to determine an app is running Express. "%}
 
 ## Cookie をセキュアに使用する
 

ko/advanced/best-practice-security.md

@@ -13,7 +13,7 @@ __"프로덕션 (production)"__ 이라는 용어는 소프트웨어 라이프사
 
 개발 환경 및 프로덕션 환경은 일반적으로 서로 다르게 설정되며 두 환경의 요구사항은 크게 다릅니다. 개발 환경에서는 좋은 것일지라도 프로덕션 환경에서는 허용되지 않을 수도 있습니다. 예를 들면, 개발 환경에서는 디버깅을 위해 상세한 오류 로깅이 선호될 수 있지만, 이러한 행동은 프로덕션 환경에서 보안 우려사항이 될 수 있습니다. 그리고 개발 환경에서는 확장성, 신뢰성 및 성능에 대해 걱정할 필요가 없지만, 이러한 요인들은 프로덕션 환경에서 매우 중요해집니다.
 
-{% include note.html content="Express의 보안 취약점을 발견하신것 같다면,
+{% include admonitions/note.html content="Express의 보안 취약점을 발견하신것 같다면,
 [Security Policies and Procedures](/en/resources/contributing.html#security-policies-and-procedures)를 따라주십시오.
 " %}
 
@@ -91,7 +91,7 @@ app.disable('x-powered-by')
 
 `helmet.js`를 사용하는 경우에는 사용자를 대신하여 `helmet.js`가 위의 작업을 실행합니다.
 
-{% include note.html content="`X-Powered-By header`를 비활성화하는 행위는 고수준의 공격자가 앱이 Express를 사용하고 있는지 확인하는 걸 막을 수 없습니다. 일반적인 취약점은 막을지 모르지만, 앱이 Express를 사용하고 있는지 알아내는 다른 방법은 많이 있습니다. "%}
+{% include admonitions/note.html content="`X-Powered-By header`를 비활성화하는 행위는 고수준의 공격자가 앱이 Express를 사용하고 있는지 확인하는 걸 막을 수 없습니다. 일반적인 취약점은 막을지 모르지만, 앱이 Express를 사용하고 있는지 알아내는 다른 방법은 많이 있습니다. "%}
 
 <a name="use-cookies-securely"></a>
 ## 쿠키를 안전하게 사용

th/advanced/best-practice-security.md

@@ -13,7 +13,7 @@ The term _"production"_ refers to the stage in the software lifecycle when an ap
 
 Development and production environments are usually set up differently and have vastly different requirements. What's fine in development may not be acceptable in production. For example, in a development environment you may want verbose logging of errors for debugging, while the same behavior can become a security concern in a production environment. And in development, you don't need to worry about scalability, reliability, and performance, while those concerns become critical in production.
 
-{% include note.html content="If you believe you have discovered a security vulnerability in Express, please see
+{% include admonitions/note.html content="If you believe you have discovered a security vulnerability in Express, please see
 [Security Policies and Procedures](/en/resources/contributing.html#security-policies-and-procedures).
 " %}
 
@@ -86,7 +86,7 @@ app.disable('x-powered-by')
 
 If you use `helmet.js`, it takes care of this for you.
 
-{% include note.html content="Disabling the `X-Powered-By header` does not prevent
+{% include admonitions/note.html content="Disabling the `X-Powered-By header` does not prevent
 a sophisticated attacker from determining that an app is running Express.  It may
 discourage a casual exploit, but there are other ways to determine an app is running
 Express. "%}

tr/advanced/best-practice-security.md

@@ -13,7 +13,7 @@ _"canlı ortam"_ terimi, bir uygulama veya API'nin genel olarak son kullanıcıl
 
 Canlı ve geliştirme ortamları genel olarak farklı şekilde kurulurlar ve çok farklı gereksinimleri vardır. Geliştirme ortamında iyi olan bir şey canlı ortamda kabul edilebilir olmayabilir. Örneğin, geliştirme ortamında hata ayıklama için ayrıntılı hataların loglanmasını isteyebilirsiniz, ancak aynı şey canlı ortamda güvenlik açığı oluşturabilir. Ve geliştirme ortamında ölçeklenebilirlik, güvenilirlik ve performans hakkında endişe etmenize gerek yok iken, bu konular canlı ortamda kritikleşir.
 
-{% include note.html content="Express'te bir güvenlik açığı keşfettiğinizi düşünüyorsanız, lütfen bakınız
+{% include admonitions/note.html content="Express'te bir güvenlik açığı keşfettiğinizi düşünüyorsanız, lütfen bakınız
 [Güvenlik Politikaları ve Prosedürleri](https://github.com/expressjs/express/blob/master/Security.md).
 " %}
 
@@ -86,7 +86,7 @@ app.disable('x-powered-by')
 
 Eğer `helmet.js` kullanıyorsanız, bunu sizin için halleder.
 
-{% include note.html content="X-Powered-By başlığının devre dışı bırakılması, tecrübeli bir saldırganın bir uygulamanın Express çalıştırdığını belirlemesini önlemez. Bu, sıradan bir istismarı engelleyebilir, ancak bir uygulamanın Express çalıştırdığını belirlemenin başka yolları da var. "%}
+{% include admonitions/note.html content="X-Powered-By başlığının devre dışı bırakılması, tecrübeli bir saldırganın bir uygulamanın Express çalıştırdığını belirlemesini önlemez. Bu, sıradan bir istismarı engelleyebilir, ancak bir uygulamanın Express çalıştırdığını belirlemenin başka yolları da var. "%}
 
 ## Çerezleri güvenli kullanın