Add web standards page

Author: RoyalIcing

apps/components_guide_web/lib/components_guide_web/controllers/web_controller.ex

@@ -0,0 +1,37 @@
+defmodule ComponentsGuideWeb.WebController do
+  use ComponentsGuideWeb, :controller
+  require Logger
+
+  def index(conn, _params) do
+    render(conn, "index.html", article: "intro")
+  end
+
+  @articles ["url", "promise"]
+
+  def show(conn, %{"id" => article}) when article in @articles do
+    render(conn, "index.html", article: article)
+  end
+
+  def show(conn, _params) do
+    raise Phoenix.Router.NoRouteError, conn: conn, router: ComponentsGuideWeb.Router
+  end
+end
+
+defmodule ComponentsGuideWeb.WebView do
+  use ComponentsGuideWeb, :view
+
+  use ComponentsGuideWeb.Snippets
+
+  def header_styles() do
+    color = {:lab, 47, 10, -44}
+
+    gradient = Styling.linear_gradient("150grad", [
+      {:lab, 47, 5, -44},
+      {:lab, 47, -24, -44},
+      color,
+      {:lab, 47, 53, -44}
+    ])
+
+    "background-color: #{color |> Styling.to_css()}; background-image: #{gradient};"
+  end
+end

apps/components_guide_web/lib/components_guide_web/router.ex

@@ -33,6 +33,10 @@ defmodule ComponentsGuideWeb.Router do
               ComposableSystemsController,
               only: [:index, :show]
 
+    resources "/web",
+              WebController,
+              only: [:index, :show]
+
     live "/color", ColorLive, :index
     live "/color/:definition", ColorLive, :show
     live "/color/lab/:definition", ColorLive, :lab

apps/components_guide_web/lib/components_guide_web/templates/landing/index.html.eex

@@ -54,6 +54,10 @@ subhead = "Learn via guides to accessibility, TDD, BDD, naming, performance, and
   <%= render ComponentsGuideWeb.AccessibilityFirstView, "_top.html" %>
 </article>
 
+<article class="text-white text-shadow py-6" style="<%= sections_styles(:other) %>">
+  <%= render ComponentsGuideWeb.WebView, "_top.html" %>
+</article>
+
 <article class="text-white text-shadow py-6" style="<%= sections_styles(:orange) %>">
   <%= render ComponentsGuideWeb.ComposableSystemsView, "_top.html" %>
 </article>

apps/components_guide_web/lib/components_guide_web/templates/web/_header.html.eex

@@ -0,0 +1,3 @@
+<header style="<%= header_styles() %>">
+  <%= render ComponentsGuideWeb.WebView, "_top.html" %>
+</header>

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

@@ -0,0 +1,7 @@
+<nav class="pt-6 pb-4">
+  <ul y-y x-x=md class="text-lg font-bold text-shadow" style="--link-padding: 0.75em">
+    <li><%= link("Why?", to: '/web') %>
+    <li><%= link("URL", to: '/web/url') %>
+    <li><%= link("Promise", to: '/web/promise') %>
+  </ul>
+</nav>

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

@@ -0,0 +1,7 @@
+<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><%= "Web Standards" %></span>
+  </h1>
+  <%= render ComponentsGuideWeb.WebView, "_nav.html" %>
+</div>

apps/components_guide_web/lib/components_guide_web/templates/web/index.html.eex

@@ -0,0 +1,9 @@
+<%= render @view_module, "_header.html" %>
+
+<article>
+  <div class="text-white bg-gray-900">
+    <div class="content max-w-4xl mx-auto py-8 text-xl">
+      <%= render(@view_module, @article <> ".html", conn: @conn) %>
+    </div>
+  </div>
+</article>

apps/components_guide_web/lib/components_guide_web/templates/web/intro.html.md

@@ -0,0 +1,2 @@
+# Why do we have the web?
+

apps/components_guide_web/lib/components_guide_web/templates/web/promise.html.md

@@ -0,0 +1 @@
+# Promise

apps/components_guide_web/lib/components_guide_web/templates/web/url.html.md

@@ -0,0 +1,14 @@
+# URL
+
+## Anatomy of a URL
+
+```
+https://example.org/songs?first=20&sortBy=releaseDate
+```
+
+### Scheme
+### Host
+### Path
+### Query
+
+## Relative URLs