New Home page and creators

safewlabs · Oct 9, 2023 · d76e91e · d76e91e
1 parent be3f34d
commit d76e91e
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 22 deletions.
diff --git a/app/controllers/home_controller.rb b/app/controllers/home_controller.rb
@@ -9,6 +9,7 @@ def index
                                    .order("RANDOM()")
                                    .take(8)
     @posts = Post.published.last(3)
+    @creators = CreatorProfile.order("RANDOM()").take(16)
     set_meta_tags title: "Home",
       description: "Comix home",
       keywords: "Comics, Indie comics"

diff --git a/app/controllers/profiles_controller.rb b/app/controllers/profiles_controller.rb
@@ -1,6 +1,26 @@
 # frozen_string_literal: true
 
 class ProfilesController < ApplicationController
+  def index
+    @pagy, @creator_profiles = pagy(CreatorProfile.all)
+    set_meta_tags title: "Creators",
+          description: "Directory of our Creatorss",
+          keywords: "Comics, Indie comics",
+          twitter: {
+            card: "photo",
+            image: {
+              _: @creator_profiles.first.avatar,
+              width: 200,
+              height: 200
+            }
+          },
+          og: {
+            title: :title,
+            site_name: :site,
+            image: @creator_profiles.first.avatar
+          }
+  end
+
   def show
     @creator_profile = CreatorProfile.find_by(slug: params[:slug])
     set_meta_tags title: @creator_profile.name,

diff --git a/app/javascript/controllers/marquee_controller.js b/app/javascript/controllers/marquee_controller.js
@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="marquee"
+export default class extends Controller {
+  connect() {
+  }
+}
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
@@ -25,6 +25,56 @@
   </div>
 </section>
 
+<section data-controller="slider">
+  <div class="max-w-screen-xl px-4 py-8 mx-auto sm:px-6 sm:py-12 lg:px-8">
+    <header>
+      <h2 class="text-xl font-bold text-gray-900 sm:text-3xl">
+        Creators
+      </h2>
+      <div class="mt-4">
+        <%= link_to "Browse all",
+                    profiles_path,
+                    class: "inline-flex items-center justify-center rounded-md border border-transparent bg-cx-purple px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-800 focus:ring-offset-2 sm:w-auto",
+                    data: { "umami-event": "Home-Browse-All-Creators-Click" }
+        %>
+      </div>
+    </header>
+    <ul class="items-slider">
+      <% cache @creators, expires_in: 60.seconds do %>
+        <% @creators.each do |profile| %>
+          <li>
+              <%= render(CreatorProfiles::AvatarComponent.new(creator_profile: profile)) %>
+              <div class="text-xl">
+                <%= profile.name %><br/>
+                <%= profile.skills %>
+              </div>
+          </li>
+        <% end %>
+      <% end %>
+    </ul>
+  </div>
+</section>
+
+<div class="bg-white pt-6 px-4 sm:px-6 lg:pb-8 lg:px-8">
+  <div class="relative max-w-lg mx-auto lg:max-w-7xl px-8">
+    <%= render(MailchimpComponent.new()) %>
+    <div>
+      <h2 class="text-3xl tracking-tight font-extrabold text-gray-900 sm:text-4xl">Freshly Pressed</h2>
+      <p class="mt-3 text-xl text-gray-500 sm:mt-4">Articles, Interviews &amp; News from the universe of Comix!</p>
+      <div class="mt-2 pb-4 w-full">
+        <%= link_to "Browse all", posts_path, class: "inline-flex items-center justify-center rounded-md border border-transparent bg-cx-purple px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-800 focus:ring-offset-2 sm:w-auto" %>
+      </div>
+    </div>
+    <div class="mt-3 grid gap-16 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12">
+      <% cache @posts, expires_in: 60.seconds do %>
+        <% @posts.each do |post| %>
+          <%= render(Marketing::PostBlurbComponent.new(post: post)) %>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+</div>
+
 <section data-controller="slider">
   <div class="max-w-screen-xl px-4 py-8 mx-auto sm:px-6 sm:py-12 lg:px-8">
     <header>
@@ -115,24 +165,4 @@
   <div class="mt-2 pb-4 w-full flex justify-center">
     <%= link_to "Join us as a creator", for_creators_path, class: "inline-flex items-center justify-center rounded-md border border-transparent bg-cx-purple px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-800 focus:ring-offset-2 sm:w-auto" %>
   </div>
-</div>
-
-<div class="bg-white pt-6 px-4 sm:px-6 lg:pb-8 lg:px-8">
-  <div class="relative max-w-lg mx-auto lg:max-w-7xl px-8">
-    <%= render(MailchimpComponent.new()) %>
-    <div>
-      <h2 class="text-3xl tracking-tight font-extrabold text-gray-900 sm:text-4xl">Freshly Pressed</h2>
-      <p class="mt-3 text-xl text-gray-500 sm:mt-4">Articles, Interviews &amp; News from the universe of Comix!</p>
-      <div class="mt-2 pb-4 w-full">
-        <%= link_to "Browse all", posts_path, class: "inline-flex items-center justify-center rounded-md border border-transparent bg-cx-purple px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-800 focus:ring-offset-2 sm:w-auto" %>
-      </div>
-    </div>
-    <div class="mt-3 grid gap-16 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12">
-      <% cache @posts, expires_in: 60.seconds do %>
-        <% @posts.each do |post| %>
-          <%= render(Marketing::PostBlurbComponent.new(post: post)) %>
-        <% end %>
-      <% end %>
-    </div>
-  </div>
-</div>
+</div>
diff --git a/app/views/profiles/index.html.erb b/app/views/profiles/index.html.erb
@@ -0,0 +1,28 @@
+<%= render(PageTitleComponent.new(title: "Creator Profiles")) %>
+
+<section>
+  <div class="max-w-screen-xl px-4 py-8 mx-auto sm:px-6 sm:py-12 lg:px-8">
+    <header>
+      <h2 class="text-xl font-bold text-gray-900 sm:text-3xl">
+        Creators
+      </h2>
+    </header>
+
+    <ul class="grid gap-4 mt-4 sm:grid-cols-2 lg:grid-cols-4">
+      <% cache @creator_profiles, expires_in: 60.seconds do %>
+        <% @creator_profiles.each do |profile| %>
+          <li>
+            <%= render(CreatorProfiles::AvatarComponent.new(creator_profile: profile)) %>
+            <div class="text-xl">
+              <%= profile.name %><br/>
+              <%= profile.skills %>
+            </div>
+          </li>
+        <% end %>
+      <% end %>
+    </ul>
+  </div>
+  <div class="text-center w-full">
+    <%== pagy_nav(@pagy) %>
+  </div>
+</section>
diff --git a/config/routes.rb b/config/routes.rb
@@ -41,7 +41,7 @@
   end
   resources :projects, param: :slug
   resources :posts, param: :slug, only: [:index, :show]
-  resources :profiles, param: :slug, only: [:show]
+  resources :profiles, param: :slug, only: [:index, :show]
   resources :stores, param: :slug, only: [:show]
   resources :products, param: :slug, only: [:show]
   resources :stores, param: :slug, only: [:show]