Add cloud limits cheatsheet

Author: RoyalIcing

lib/components_guide_web.ex

@@ -56,7 +56,7 @@ defmodule ComponentsGuideWeb do
       @opts Keyword.merge(
               [
                 layout: {ComponentsGuideWeb.LayoutView, "live.html"},
-                container: {:div, class: "relative h-screen flex overflow-hidden bg-white"}
+                container: {:div, class: "relative h-screen flex overflow-hidden"}
               ],
               unquote(opts)
             )

lib/components_guide_web/controllers/cheatsheets_controller.ex

@@ -14,7 +14,7 @@ defmodule ComponentsGuideWeb.CheatsheetsController do
     render(conn, "index.html", article: "intro", wasm_constant: @wasm_constant)
   end
 
-  @articles ["rxjs", "error-messages"]
+  @articles ["rxjs", "error-messages", "cloud-limits"]
 
   def show(conn, %{"id" => article}) when article in @articles do
     render(conn, "index.html", article: article)

lib/components_guide_web/templates/cheatsheets/_header.html.eex

@@ -1,3 +1,3 @@
-<header style="<%= header_styles() %>">
+<header class="<%= ComponentsGuideWeb.TopicsView.class_for_topic(:cheatsheets) %>">
   <%= render ComponentsGuideWeb.CheatsheetsView, "_top.html" %>
 </header>

lib/components_guide_web/templates/cheatsheets/_nav.html.eex

@@ -1,7 +1,7 @@
 <nav class="pt-6 pb-4">
-  <ul y-y x-x=md class="text-xl font-bold text-shadow" data-links="p-3">
-    <li><%= link("Intro", to: '/cheatsheets') %>
+  <ul y-y x-x=md class="text-xl font-bold" data-links="p-3">
     <li><%= link("Error Messages", to: '/cheatsheets/error-messages') %>
+    <li><%= link("Cloud Limits", to: '/cheatsheets/cloud-limits') %>
     <li><%= link("RxJS", to: '/cheatsheets/rxjs') %>
   </ul>
 </nav>

lib/components_guide_web/templates/cheatsheets/_top.html.eex

@@ -1,7 +1,7 @@
-<div class="mx-auto max-w-4xl text-white">
-  <h2 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><%= "Library Cheatsheets" %></span>
-  </h2>
+<div class="mx-auto max-w-4xl">
+  <h1 y-y x-x=md class="pt-8 row space-x-4 text-4xl text-center font-bold leading-tight">
+    <span class="mr-1 text-5xl">🐝💨</span>
+    <span><%= "Cheatsheets" %></span>
+  </h1>
   <%= render ComponentsGuideWeb.CheatsheetsView, "_nav.html" %>
 </div>

lib/components_guide_web/templates/cheatsheets/cloud-limits.html.md

@@ -0,0 +1,40 @@
+# Cloud Limits
+
+## Storage
+
+<svg viewbox="0 0 24 16" width="480" height="360" class="border border-gray-800 rounded-lg">
+  <title>Cloud Storage Limits</title>
+  <g fill="#eb4859">
+    <circle cx="5" cy="2" r="<%= :math.sqrt(0.065 / :math.pi()) %>" />
+    <circle cx="5" cy="4.2" r="<%= :math.sqrt(0.4 / :math.pi()) %>" />
+    <circle cx="5" cy="6.5" r="<%= :math.sqrt(1.048 / :math.pi()) %>" />
+    <circle cx="5" cy="11.5" r="<%= :math.sqrt(26.12 / :math.pi()) %>" />
+  </g>
+  <g fill="currentColor" style="font-size: 1px; alignment-baseline: central;">
+    <text x="6" y="2.3" class="small">TCP packet: 64KiB</text>
+    <text x="6.3" y="4.5" class="small">DynamoDB attribute: 400KB</text>
+    <text x="6.6" y="6.8" class="small">GCP Datastore entity: ~1MiB</text>
+    <text x="9" y="11.8" class="small">Cloudflare KV entry: 25MiB</text>
+  </g>
+</svg>
+
+- TCP packet: 65,535 bytes (64KiB - 1 byte)
+- Max size of DynamoDB attribute key & value: 400KB
+- Max size of GCP Datastore entity: 1,048,572 bytes (1MiB - 4 bytes)
+- Max size of Cloudflare KV entry: 25MiB
+- Max size of Gmail attachment: 25MiB
+- Max size of S3 Object: 5TB
+  - Max size of single PUT: 5GB
+  - Multipart upload part size: 5MiB to 5GiB
+  - S3 Metadata: 2KB
+
+----
+
+<svg viewbox="0 0 20 10" width="500" height="250">
+  <g fill="#d1272e">
+    <circle cx="2" cy="4" r="<%= :math.sqrt(0.065 / :math.pi()) %>" />
+    <circle cx="4" cy="4" r="<%= :math.sqrt(0.4 / :math.pi()) %>" />
+    <circle cx="7" cy="4" r="<%= :math.sqrt(1.048 / :math.pi()) %>" />
+    <circle cx="13" cy="4" r="<%= :math.sqrt(26.12 / :math.pi()) %>" />
+  </g>
+</svg>

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

@@ -59,9 +59,10 @@ header_links = [
 
 <%= subject_banner(:accessibility_first) %>
 <%= subject_banner(:react_typescript) %>
-<%= subject_banner(:robust_javascript_interactivity) %>
 <%= subject_banner(:web_standards) %>
 <%= subject_banner(:composable_systems) %>
+<%= subject_banner(:cheatsheets) %>
+<%= subject_banner(:robust_javascript_interactivity) %>
 
 <div hidden class="text-white">
   <section class="pt-20 pb-20" style="<%= sections_styles(:dark) %>">

lib/components_guide_web/templates/layout/_contentinfo.html.eex

@@ -1,5 +1,5 @@
 <footer role="contentinfo" class="container pt-16 pb-6 text-gray-500 border-t border-gray-800 tracking-wide">
-  <div class="text-center text-xl text-white" style="--link-decoration: underline">
+  <div class="text-center text-xl text-white" data-links="underline-on-hover">
     Follow <a href="https://twitter.com/ComponentsGuide">@ComponentsGuide</a> on Twitter for the latest articles.
   </div>
 

lib/components_guide_web/views/landing_view.ex

@@ -9,6 +9,7 @@ defmodule ComponentsGuideWeb.LandingView do
     do: ComponentsGuideWeb.RobustJavascriptInteractivityView
 
   defp subject_to_module(:web_standards), do: ComponentsGuideWeb.WebStandardsView
+  defp subject_to_module(:cheatsheets), do: ComponentsGuideWeb.CheatsheetsView
   defp subject_to_module(:composable_systems), do: ComponentsGuideWeb.ComposableSystemsView
 
   def subject_banner(subject) do

lib/components_guide_web/views/topics_view.ex

@@ -12,7 +12,8 @@ defmodule ComponentsGuideWeb.TopicsView do
     react_typescript: "bg-blue-200",
     robust_javascript_interactivity: "bg-orange-200",
     web_standards: "bg-yellow-200",
-    composable_systems: "bg-green-200",
+    composable_systems: "bg-lime-200",
+    cheatsheets: "bg-teal-200",
   }
 
   def class_for_topic(topic), do: @backgrounds[topic]