Add great error messages cheatsheet

Author: RoyalIcing

lib/components_guide_web.ex

@@ -107,6 +107,7 @@ defmodule ComponentsGuideWeb do
       alias ComponentsGuideWeb.Router.Helpers, as: Routes
 
       import Paredown
+      import ComponentsGuideWeb.AssetsHelpers
       alias ComponentsGuideWeb.StylingHelpers, as: Styling
       alias ComponentsGuideWeb.FormattingHelpers, as: Format
 

lib/components_guide_web/controllers/accessibility_first_controller.ex

@@ -51,18 +51,18 @@ defmodule ComponentsGuideWeb.AccessibilityFirstView do
   use ComponentsGuideWeb.Snippets
   use Phoenix.HTML
 
-  def collected_image(conn, image_name) do
-    %{static_path: path_to_image, width: width, height: height} = render(image_name)
-    url = Routes.static_path(conn, "/" <> path_to_image)
-    tag(:img, src: url, width: width / 2, height: height / 2)
-  end
-
-  def collected_figure(conn, image_name, caption) do
-    content_tag(:figure, [
-      collected_image(conn, image_name),
-      content_tag(:figcaption, caption)
-    ])
-  end
+  # def collected_image(conn, image_name) do
+  #   %{static_path: path_to_image, width: width, height: height} = render(image_name)
+  #   url = Routes.static_path(conn, "/" <> path_to_image)
+  #   tag(:img, src: url, width: width / 2, height: height / 2)
+  # end
+
+  # def collected_figure(conn, image_name, caption) do
+  #   content_tag(:figure, [
+  #     collected_image(conn, image_name),
+  #     content_tag(:figcaption, caption)
+  #   ])
+  # end
 
   def table_rows(rows_content) do
     Enum.map(rows_content, &table_row/1)

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"]
+  @articles ["rxjs", "error-messages"]
 
   def show(conn, %{"id" => article}) when article in @articles do
     render(conn, "index.html", article: article)

lib/components_guide_web/template_engines/markdown_engine.ex

@@ -42,7 +42,8 @@ defmodule ComponentsGuideWeb.TemplateEngines.MarkdownEngine do
       Regex.replace(regex, html, fn _whole, tag_suffix, image, content ->
         case tag_suffix do
           "figure" ->
-            "<div><%= collected_figure(@conn, #{inspect(image)}, #{inspect(content)}) %></div>"
+            # "<div><%= inspect(__MODULE__) %></div>"
+            "<div><%= collected_figure(@conn, __MODULE__, #{inspect(image)}, #{inspect(content)}) %></div>"
 
           _ ->
             "!" <> image <> "!" <> content

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

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

lib/components_guide_web/templates/cheatsheets/error-messages.html.md

@@ -0,0 +1,7 @@
+# Great Error Messages
+
+## Network issues
+
+<collected-figure image="vscode-marketplace-offline">
+  When I search in Visual Studio Code’s Marketplace and it was unable to fetch any data, we get an offline error message: “Unable to search the Marketplace when offline, please check your network connection.”
+</collected-figure>

lib/components_guide_web/templates/cheatsheets/vscode-marketplace-offline.png

@@ -327,7 +327,7 @@ getByRole('img', { name: 'New document' });
 ### Roles > Tag Names
 
 <figure>
-  <%= collected_image(@conn, "list-of-roles") %>
+  <%= collected_image(@conn, view_module(@conn), "list-of-roles") %>
   <figcaption>
   <%= line("A list of roles [from the wai-aria spec](https://www.w3.org/TR/wai-aria/#widget_roles).") %>
   </figcaption>

lib/components_guide_web/templates/react_typescript/testing.html.md

@@ -0,0 +1,22 @@
+defmodule ComponentsGuideWeb.AssetsHelpers do
+  @moduledoc """
+  Conveniences for presenting assets like images
+  """
+
+  use Phoenix.HTML
+  import Phoenix.View
+  alias ComponentsGuideWeb.Router.Helpers, as: Routes
+
+  def collected_image(conn, module, image_name) do
+    %{static_path: path_to_image, width: width, height: height} = module.render(image_name, [])
+    url = Routes.static_path(conn, "/" <> path_to_image)
+    tag(:img, src: url, width: width / 2, height: height / 2)
+  end
+
+  def collected_figure(conn, module, image_name, caption) do
+    content_tag(:figure, [
+      collected_image(conn, module, image_name),
+      content_tag(:figcaption, caption)
+    ])
+  end
+end

lib/components_guide_web/views/asset_helpers.ex

@@ -23,11 +23,11 @@ defmodule ComponentsGuideWeb.ReactTypescriptView do
   def article_content_class("editor-prolog"), do: "content text-xl"
   def article_content_class(_article), do: "prose md:prose-xl prose-invert max-w-4xl mx-auto py-16"
 
-  def collected_image(conn, name) do
-    %{static_path: path_to_image, width: width, height: height} = render(name)
-    url = Routes.static_path(conn, "/" <> path_to_image)
-    tag(:img, src: url, width: width / 2, height: height / 2)
-  end
+  # def collected_image(conn, name) do
+  #   %{static_path: path_to_image, width: width, height: height} = render(name)
+  #   url = Routes.static_path(conn, "/" <> path_to_image)
+  #   tag(:img, src: url, width: width / 2, height: height / 2)
+  # end
 
   def table_rows(rows_content) do
     Enum.map(rows_content, &table_row/1)