diff --git a/_includes/admonitions/caution.html b/_includes/admonitions/caution.html new file mode 100644 index 0000000000..722fb9a63c --- /dev/null +++ b/_includes/admonitions/caution.html @@ -0,0 +1,4 @@ +

Caution

+{{include.content}} +
+ \ No newline at end of file diff --git a/_includes/admonitions/note.html b/_includes/admonitions/note.html new file mode 100644 index 0000000000..0e3e60e386 --- /dev/null +++ b/_includes/admonitions/note.html @@ -0,0 +1,3 @@ +

Note

+{{include.content}} +
diff --git a/_includes/admonitions/warning.html b/_includes/admonitions/warning.html new file mode 100644 index 0000000000..f9eaa5d1d6 --- /dev/null +++ b/_includes/admonitions/warning.html @@ -0,0 +1,4 @@ +
+

Warning

+{{include.content}} +
diff --git a/_includes/community-caveat.html b/_includes/community-caveat.html index edaeb49350..6cd463141f 100644 --- a/_includes/community-caveat.html +++ b/_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. " %} diff --git a/_includes/note.html b/_includes/note.html deleted file mode 100644 index 924986895e..0000000000 --- a/_includes/note.html +++ /dev/null @@ -1,3 +0,0 @@ -
Note: -{{include.content}} -
diff --git a/_includes/warning.html b/_includes/warning.html deleted file mode 100644 index cd28c05371..0000000000 --- a/_includes/warning.html +++ /dev/null @@ -1,3 +0,0 @@ -
Warning: -{{include.content}} -
diff --git a/css/dark-theme.css b/css/dark-theme.css index 3e8b4a76f8..2f26654ee5 100644 --- a/css/dark-theme.css +++ b/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, diff --git a/css/style.css b/css/style.css index 53f6e334dc..b8d1fb188a 100644 --- a/css/style.css +++ b/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); +} + * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; @@ -501,11 +511,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 { @@ -546,18 +555,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 { diff --git a/en/4x/api.md b/en/4x/api.md index 90e1c12d36..495a70113c 100644 --- a/en/4x/api.md +++ b/en/4x/api.md @@ -9,7 +9,7 @@ redirect_from: "/4x/api.html"

4.x API

- {% 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 %} diff --git a/en/5x/api.md b/en/5x/api.md index 529121c14b..4935deaa76 100644 --- a/en/5x/api.md +++ b/en/5x/api.md @@ -9,9 +9,9 @@ redirect_from: "/5x/api.html"

5.x API

- {% 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 %} diff --git a/en/advanced/best-practice-security.md b/en/advanced/best-practice-security.md index 4aa95889dc..e8dcacb0d7 100644 --- a/en/advanced/best-practice-security.md +++ b/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." %} diff --git a/es/advanced/best-practice-security.md b/es/advanced/best-practice-security.md index 8c1b7406e2..2ffffffb25 100755 --- a/es/advanced/best-practice-security.md +++ b/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: diff --git a/id/4x/api.md b/id/4x/api.md index b0feeadefa..e86b22d9a6 100644 --- a/id/4x/api.md +++ b/id/4x/api.md @@ -8,7 +8,7 @@ lang: id

4.x API

- {% 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 %} diff --git a/id/advanced/best-practice-security.md b/id/advanced/best-practice-security.md index 2dd74e0a98..76fea0f875 100644 --- a/id/advanced/best-practice-security.md +++ b/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." %} diff --git a/ja/advanced/best-practice-security.md b/ja/advanced/best-practice-security.md index 043c1fb8b5..4b1353166a 100755 --- a/ja/advanced/best-practice-security.md +++ b/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 をセキュアに使用する diff --git a/ko/advanced/best-practice-security.md b/ko/advanced/best-practice-security.md index 05dc13c35b..e254df914f 100755 --- a/ko/advanced/best-practice-security.md +++ b/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를 사용하고 있는지 알아내는 다른 방법은 많이 있습니다. "%} ## 쿠키를 안전하게 사용 diff --git a/th/advanced/best-practice-security.md b/th/advanced/best-practice-security.md index e5c96c20af..6e922660bd 100644 --- a/th/advanced/best-practice-security.md +++ b/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. "%} diff --git a/tr/advanced/best-practice-security.md b/tr/advanced/best-practice-security.md index bb6b39f468..6e6241b4f6 100644 --- a/tr/advanced/best-practice-security.md +++ b/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