improvement: clean up media page

ash-project · Oct 4, 2023 · 9502960 · 9502960
1 parent 5a0d9a1
commit 9502960
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 38 deletions.
diff --git a/lib/ash_hq_web/components/app_view/top_bar.ex b/lib/ash_hq_web/components/app_view/top_bar.ex
@@ -164,7 +164,7 @@ defmodule AshHqWeb.Components.AppView.TopBar do
                 </LivePatch>
               </div>
               <div class="py-1" role="none">
-                <Form for={:sign_out} action={~p'/sign-out'} method="get">
+                <Form for={%{}} as={:sign_out} action={~p'/sign-out'} method="get">
                   <button
                     label="logout"
                     type="submit"

diff --git a/lib/ash_hq_web/components/search.ex b/lib/ash_hq_web/components/search.ex
@@ -48,7 +48,7 @@ defmodule AshHqWeb.Components.Search do
               <div class="w-full flex flex-row justify-start top-0">
                 <Heroicons.Outline.SearchIcon class="h-6 w-6 mr-4" />
                 <div class="flex flex-row justify-between w-full mr-10 border-b border-base-light-600">
-                  <Form for={:search} change="search" submit="go-to-doc" class="w-full">
+                  <Form for={%{}} as={:sign_out} change="search" submit="go-to-doc" class="w-full">
                     <input
                       id="search-input"
                       name="search"
@@ -60,7 +60,7 @@ defmodule AshHqWeb.Components.Search do
                 </div>
               </div>
               <div class="ml-10">
-                <Form for={:types} change={@change_types}>
+                <Form for={%{}} as={:types} change={@change_types}>
                   <div class="sm:grid sm:grid-cols-2 md:grid-cols-3 lg:flex lg:flex-row lg:space-x-6 lg:flex-wrap mt-2 text-sm text-base-light-500 dark:text-base-dark-300">
                     <div class="hidden lg:block">Search For:</div>
                     {#for type <- AshHq.Docs.Extensions.Search.Types.types() -- ["Forum"]}

diff --git a/lib/ash_hq_web/pages/home.ex b/lib/ash_hq_web/pages/home.ex
@@ -3,7 +3,7 @@ defmodule AshHqWeb.Pages.Home do
 
   use Surface.LiveComponent
 
-  alias AshHqWeb.Components.{CalloutText, CodeExample, Feature, SearchBar}
+  alias AshHqWeb.Components.{CalloutText, CodeExample, Feature}
   alias Surface.Components.Form
   alias Surface.Components.Form.{Field, Submit, TextInput}
   import AshHqWeb.Components.CodeExample, only: [to_code: 1]

diff --git a/lib/ash_hq_web/pages/media.ex b/lib/ash_hq_web/pages/media.ex
@@ -6,8 +6,8 @@ defmodule AshHqWeb.Pages.Media do
     ~F"""
     <div class="container sm:mx-auto">
       <div class="grid grid-cols-2 gap-4">
-        <div class="col-span-2 lg:col-span-1 flex-col">
-          <div class="text-xl">Podcasts</div>
+        <div class="col-span-2 lg:col-span-1 flex-col flex items-center justify-center">
+          <div class="text-3xl font-bold mt-8 mb-8 text-center">Podcasts</div>
           <iframe
             allow="autoplay *; encrypted-media *; fullscreen *; clipboard-write"
             frameborder="0"
@@ -35,8 +35,8 @@ defmodule AshHqWeb.Pages.Media do
             src="https://embed.podcasts.apple.com/ro/podcast/27-ash-framework-with-zach-daniel/id1516100616?i=1000503190100"
           />
         </div>
-        <div class="col-span-2 lg:col-span-1">
-          <div class="text-xl">Youtube</div>
+        <div class="col-span-2 lg:col-span-1 flex-col flex items-center">
+          <div class="text-3xl font-bold mt-8 mb-8 text-center">Youtube Playlist</div>
           <iframe
             width="560"
             height="315"
@@ -47,38 +47,38 @@ defmodule AshHqWeb.Pages.Media do
             allowfullscreen
           />
         </div>
-
-        <div class="col-span-2 lg:col-span-1 text-2xl">
-          <div class="text-xl mb-8">Example Projects</div>
-          <ul class="list-disc">
-            <li class="mb-4">
-              <a
-                class="hover:text-primary-light-400 dark:hover:text-primary-dark-400"
-                href="https://github.com/ash-project/ash_hq"
-              >AshHq (this website)</a>
-            </li>
-            <li class="mb-4">
-              <a
-                class="hover:text-primary-light-400 dark:hover:text-primary-dark-400"
-                href="https://github.com/team-alembic/realworld"
-              >Real World</a>
-            </li>
-            <li class="mb-4">
-              <a
-                class="hover:text-primary-light-400 dark:hover:text-primary-dark-400"
-                href="https://github.com/lukegalea/openats"
-              >Open ATS</a>
-            </li>
-            <li class="mb-4">
-              <a
-                class="hover:text-primary-light-400 dark:hover:text-primary-dark-400"
-                href="https://github.com/brettkolodny/todoish"
-              >Todoish</a>
-            </li>
-          </ul>
         </div>
-      </div>
+        </div>
+
+        <div class="text-2xl flex flex-col items-center justify-center text-center">
+          <div class="text-3xl font-bold mt-8 mb-8 text-center">Example Projects</div>
+          {#for %{title: title, href: href, description: description} <- examples()}
+            <div class="max-w-7xl px-4 sm:px-6 md:px-8 my-8 hidden sm:block">
+              <h2 class="mt-8 font-semibold text-red-500 dark:text-red-400">
+                <a href={href}>{title}</a>
+              </h2>
+              <p class="text-base-dark-500 dark:text-base-light-300 mt-4 max-w-3xl space-y-6">
+                {raw description}
+              </p>
+            </div>
+          {/for}
     </div>
     """
   end
+
+  defp examples do
+    [
+      %{title: "AshHq", href: "https://github.com/ash-project/ash_hq", description: """
+      This website that you're on right now!
+      It contains all kinds of goodies, from a (now deprecated) ChatGPT bot, to a discord channel synchronizer, to a documentation importer.
+      """},
+      %{title: "Real World", href: "https://github.com/team-alembic/real-world", description: """
+      An idiomatic Ash implementation of the <a href="https://codebase.show/projects/realworld">Real World example app</a>. Contains lots of idiomatic Ash code, and uses a demo application that is
+      available in hundreds of languages/frameworks.
+      """},
+      %{title: "Todoish", href: "https://github.com/brettkolodny/todoish", description: """
+      A bite sized Ash & LiveView application that lets you create and shate to-do lists.
+      """}
+    ]
+  end
 end