Add Github Links

lib/jola_dev_web/components/core_components.ex

@@ -1222,27 +1222,47 @@ defmodule JolaDevWeb.CoreComponents do
   attr :title, :string, required: true
   attr :description, :string, default: nil
   attr :tags, :list, default: []
-  attr :link, :string, required: true
+  attr :link, :string, default: nil
+  attr :github_link, :string, default: nil
   attr :external, :boolean, default: true
   attr :class, :string, default: nil
 
   def project_card(assigns) do
+    # Determine the primary link (prefer external link over github)
+    assigns = assign(assigns, :primary_link, assigns[:link] || assigns[:github_link])
+
     ~H"""
     <a
-      href={@link}
-      target={if @external, do: "_blank"}
-      rel={if @external, do: "noopener"}
+      href={@primary_link || "#"}
+      target={if @external && @primary_link, do: "_blank"}
+      rel={if @external && @primary_link, do: "noopener"}
       class={["block group", @class]}
     >
       <.card variant={:interactive} hover class="h-full">
         <div class="flex items-start justify-between mb-3">
           <h3 class="text-xl font-semibold text-foreground group-hover:text-foreground/80 transition-colors">
             {@title}
           </h3>
-          <.icon
-            name={if @external, do: "hero-arrow-top-right-on-square", else: "hero-arrow-right"}
-            class="w-5 h-5 text-muted-foreground group-hover:text-foreground transition-colors flex-shrink-0 ml-2"
-          />
+          <div class="flex items-center gap-2 flex-shrink-0 ml-2">
+            <span
+              :if={@github_link}
+              onclick={"event.stopPropagation(); event.preventDefault(); window.open('#{@github_link}', '_blank');"}
+              class="text-muted-foreground hover:text-foreground transition-colors cursor-pointer relative z-10 p-2 -m-2"
+              aria-label="View on GitHub"
+            >
+              <.icon name="lucide-github" class="w-5 h-5" />
+            </span>
+            <span
+              :if={@link}
+              class="text-muted-foreground group-hover:text-foreground transition-colors"
+              aria-label="Visit project"
+            >
+              <.icon
+                name={if @external, do: "hero-arrow-top-right-on-square", else: "hero-arrow-right"}
+                class="w-5 h-5"
+              />
+            </span>
+          </div>
         </div>
 
         <p :if={@description} class="text-muted-foreground mb-4">

lib/jola_dev_web/controllers/page_html/projects.html.heex

@@ -8,11 +8,28 @@
     </header>
 
     <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
+      <.project_card
+        title="ElixirEvents"
+        description="The Elixir Event calendar, find conferences and meetups!"
+        tags={["Elixir", "Community", "Events", "Open Source"]}
+        link="https://elixirevents.net/"
+        github_link="https://github.com/joladev/elixir_events"
+        external
+      />
+
       <.project_card
         title="jola.dev"
         description="This website, built with Phoenix, NimblePublisher, and Tailwind CSS."
         tags={["Elixir", "Phoenix", "Tailwind CSS", "Open Source"]}
-        link="https://github.com/joladev/jola.dev"
+        github_link="https://github.com/joladev/jola.dev"
+        external
+      />
+
+      <.project_card
+        title="darkdown.app"
+        description="Gorgeous notes, nothing else. An online markdown editor with dark mode, easy sharing, and AI integration."
+        tags={["React", "AI", "Markdown"]}
+        link="https://darkdown.app"
         external
       />
 
@@ -32,35 +49,12 @@
         external
       />
 
-      <.project_card
-        title="darkdown.app"
-        description="Gorgeous notes, nothing else. An online markdown editor with dark mode, easy sharing, and AI integration."
-        tags={["React", "AI", "Markdown"]}
-        link="https://darkdown.app"
-        external
-      />
-
       <.project_card
         title="HexDiff"
         description="Generate diffs of packages hosted on hex.pm and visualize and share. Unlike other diffs, these show what code was actually uploaded on hex.pm."
         tags={["Elixir", "Phoenix", "Open Source"]}
         link="https://diff.hex.pm/"
-        external
-      />
-
-      <.project_card
-        title="HexDiff Source"
-        description="The open source repository for HexDiff. Contributions welcome!"
-        tags={["Elixir", "GitHub"]}
-        link="https://github.com/hexpm/diff/"
-        external
-      />
-
-      <.project_card
-        title="ElixirEvents"
-        description="The Elixir Event calendar, find conferences and meetups!"
-        tags={["Elixir", "Community", "Events"]}
-        link="https://elixirevents.net/"
+        github_link="https://github.com/hexpm/diff/"
         external
       />
     </div>