Add http headers page

Author: RoyalIcing

apps/components_guide_web/lib/components_guide_web/controllers/web_standards_controller.ex

@@ -6,7 +6,7 @@ defmodule ComponentsGuideWeb.WebStandardsController do
     render(conn, "index.html", article: "intro")
   end
 
-  @articles ["url", "promise", "http-caching", "html"]
+  @articles ["url", "promise", "http-caching", "html", "http-headers"]
 
   def show(conn, %{"id" => article}) when article in @articles do
     render(conn, "index.html", article: article)

apps/components_guide_web/lib/components_guide_web/templates/web_standards/_nav.html.eex

@@ -4,6 +4,7 @@
     <li><%= link("URL", to: '/web-standards/url') %>
     <li><%= link("HTML", to: '/web-standards/html') %>
     <li><%= link("Promise", to: '/web-standards/promise') %>
+    <li><%= link("HTTP Headers", to: '/web-standards/http-headers') %>
     <li><%= link("HTTP Caching", to: '/web-standards/http-caching') %>
   </ul>
 </nav>

apps/components_guide_web/lib/components_guide_web/templates/web_standards/_top.html.eex

@@ -1,6 +1,6 @@
 <div class="mx-auto max-w-4xl text-white">
   <h1 y-y x-x=md class="pt-8 row space-x-4 text-4xl text-center font-bold leading-tight text-shadow">
-    <span class="mr-1 text-5xl">🧶💝</span>
+    <span class="mr-1 text-5xl">🤝💝</span>
     <span><%= "Web Standards" %></span>
   </h1>
   <%= render ComponentsGuideWeb.WebStandardsView, "_nav.html" %>

apps/components_guide_web/lib/components_guide_web/templates/web_standards/http-headers.html.md

@@ -0,0 +1,89 @@
+# HTTP Headers
+
+<form role="search" class="text-center" id="search-http-headers">
+  <input name="q" type="search" placeholder="Search HTTP Headers…" autofocus class="text-white bg-gray-800 border-gray-700 rounded">
+</form>
+
+<script type="module">
+  const searchForm = document.getElementById("search-http-headers");
+  const listItems = searchForm.parentNode.querySelectorAll('ul li');
+  searchForm.addEventListener('input', () => {
+    const values = new FormData(searchForm);
+    const q = values.get('q').trim().toLowerCase();
+    for (const li of Array.from(listItems)) {
+      const matches = q === '' ? true : li.textContent.toLowerCase().includes(q);
+      li.hidden = !matches;
+    }
+  });
+</script>
+
+## Request
+
+- Host (required)
+- User-Agent
+- Accept
+- Accept-Language
+- Accept-Encoding
+- Origin
+- Referer
+- Connection
+- Content-Length
+- Range
+- Cache-Control
+  - `max-age`
+  - `max-stale`
+  - `min-fresh`
+  - `no-cache`
+  - `no-store`
+  - `no-transform`
+  - `only-if-cached`
+  - `stale-if-error`
+- If-Modified-Since
+- If-Unmodified-Since
+- If-Match
+- If-None-Match
+- If-Range
+- Authorization
+- Expect
+- Cookie
+
+## Response
+
+- Content-Length
+- Content-Type
+- Content-Encoding
+- Transfer-Encoding
+- Location
+- Allow
+- Link
+- Date
+- Accept-Ranges
+- Content-Range
+- Age
+- Expires
+- Vary
+- ETag
+- Cache-Control
+  - `max-age`
+  - `s-maxage`
+  - `no-cache`
+  - `no-store`
+  - `no-transform`
+  - `must-revalidate`
+  - `proxy-revalidate`
+  - `must-understand`
+  - `private`
+  - `public`
+  - `immutable`
+  - `stale-while-revalidate`
+  - `stale-if-error`
+  - https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
+  - https://github.com/mdn/browser-compat-data/blob/main/http/headers/cache-control.json
+- Set-Cookie
+- Access-Control-Allow-Origin
+- Upgrade
+- Alt-Svc
+- Retry-After
+- Server-Timing
+- Report-To
+- Last-Event-ID