new look 3 columns
Bobby Grayson 3 days ago 2 files (+177, -58)
@@ -28,26 +28,46 @@ </script><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/heex.min.js"></script></head>- <body class="h-full bg-gray-50 font-mono">+ <body class="h-full font-mono bg-gradient-to-br from-cyan-50 to-indigo-50">+ <!-- Sidebar Toggle Button -->+ <button id="sidebar-toggle" class="fixed top-4 left-4 z-50 p-2 rounded-full bg-gradient-to-r from-fuchsia-500 to-cyan-500 text-white shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105">+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />+ </svg>+ </button>+<div class="flex h-full">- <!-- Sidebar -->- <div class="w-72 bg-white border-r-2 border-gray-200 p-6 overflow-y-auto">- <div class="mb-12">- <h1 class="text-2xl font-bold text-gray-900 mb-2 pb-2 border-b-2 border-gray-200">+ <!-- Sidebar - Hidden by default -->+ <div id="sidebar" class="fixed inset-y-0 left-0 w-72 bg-gradient-to-b from-fuchsia-100 to-cyan-100 border-r-2 border-fuchsia-300 p-6 overflow-y-auto transform -translate-x-full transition-transform duration-300 ease-in-out z-40 shadow-2xl">+ <button id="sidebar-close" class="absolute top-4 right-4 text-gray-700 hover:text-fuchsia-600">+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />+ </svg>+ </button>++ <div class="mb-12 pt-8">+ <h1 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-600 to-cyan-600 mb-2 pb-2 border-b-2 border-fuchsia-200">Tidbits, Thoughts</h1>- <div class="space-y-2"></div>+ <div class="text-sm text-gray-600 mt-2">+ <div class="inline-flex items-center">+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-fuchsia-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />+ </svg>+ <span><%= total_readers() %> <%= if total_readers() == 1, do: "reader", else: "readers" %> online</span>+ </div>+ </div></div><div>- <h2 class="text-lg font-bold text-gray-900 mb-4 pb-2 border-b-2 border-gray-200">+ <h2 class="text-lg font-bold text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-600 to-cyan-600 mb-4 pb-2 border-b-2 border-fuchsia-200">Recent Posts</h2><div class="space-y-6"><%= for {title, date, slug} <- recent_posts() do %><div class="group"><a href={~p"/post/#{slug}"} class="block">- <h3 class="text-sm font-medium text-gray-900 group-hover:text-blue-600 transition-colors">+ <h3 class="text-sm font-medium text-gray-800 group-hover:text-fuchsia-600 transition-colors">{title}</h3><p class="text-xs text-gray-500 mt-1 font-normal">@@ -59,32 +79,50 @@ <% end %></div></div><div>- <h2 class="mt-4 text-lg font-bold text-gray-900 mb-4 pb-2 border-b-2 border-gray-200">+ <h2 class="mt-8 text-lg font-bold text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-600 to-cyan-600 mb-4 pb-2 border-b-2 border-fuchsia-200">Posts by Tag</h2>- <%= for {tag, _posts} <- posts_by_tag() do %>- <div class="space-y-6">- <div class="group">- <a href={~p"/post/#{tag}"} class="block">- <h3 class="text-sm font-medium text-gray-900 group-hover:text-blue-600 transition-colors">- {tag}- </h3>- </a>- </div>- </div>- <% end %>+ <div class="flex flex-wrap gap-2">+ <%= for {tag, _posts} <- posts_by_tag() do %>+ <a href={~p"/post/#{tag}"} class="inline-block px-3 py-1 bg-gradient-to-r from-fuchsia-200 to-cyan-200 rounded-full text-xs font-medium text-gray-800 hover:from-fuchsia-300 hover:to-cyan-300 transition-colors">+ {tag}+ </a>+ <% end %>+ </div></div></div>--<!-- Main content -->- <main class="flex-1 overflow-y-auto bg-gray-50">++ <!-- Main content -->+ <main class="flex-1 overflow-y-auto px-4">{@inner_content}</main></div>+<script>document.addEventListener('DOMContentLoaded', (event) => {+ // Highlight.js initializationdocument.querySelectorAll('pre code').forEach((block) => {hljs.highlightBlock(block);+ });++ // Sidebar toggle functionality+ const sidebar = document.getElementById('sidebar');+ const sidebarToggle = document.getElementById('sidebar-toggle');+ const sidebarClose = document.getElementById('sidebar-close');++ sidebarToggle.addEventListener('click', () => {+ sidebar.classList.toggle('-translate-x-full');+ });++ sidebarClose.addEventListener('click', () => {+ sidebar.classList.add('-translate-x-full');+ });++ // Close sidebar when clicking outside+ document.addEventListener('click', (event) => {+ if (!sidebar.contains(event.target) && !sidebarToggle.contains(event.target)) {+ sidebar.classList.add('-translate-x-full');+ }});});</script>
MODIFIED
lib/blog_web/live/post_live/index.ex
MODIFIED
lib/blog_web/live/post_live/index.ex
@@ -27,7 +27,8 @@ {:ok,assign(socket,tech_posts: tech_posts,non_tech_posts: non_tech_posts,- total_readers: total_readers+ total_readers: total_readers,+ page_title: "Tidbits & Thoughts - A Retro Hacker Blog")}end@@ -38,48 +39,128 @@ enddef render(assigns) do~H"""- <div class="px-8 py-12">+ <div class="py-12 px-4 sm:px-6 lg:px-8 min-h-screen"><div class="max-w-7xl mx-auto">- <div class="mb-4 text-sm text-gray-500">- {@total_readers} {if @total_readers == 1, do: "person", else: "people"} browsing the blog- </div>+ <!-- Header with retro styling -->+ <header class="mb-12 text-center">+ <div class="inline-block p-1 bg-gradient-to-r from-fuchsia-500 to-cyan-500 rounded-lg shadow-lg mb-6">+ <h1 class="text-4xl md:text-5xl font-bold bg-white px-6 py-3 rounded-md">+ <span class="text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-600 to-cyan-600">+ Thoughts & Tidbits+ </span>+ </h1>+ </div>- <div class="grid grid-cols-1 md:grid-cols-2 gap-8">- <%!-- Tech Posts Column --%>- <div>- <h2 class="text-2xl font-bold mb-6 pb-2 border-b">Tech & Programming</h2>- <div class="space-y-6">- <div :for={post <- @tech_posts} class="mb-8">- <.link navigate={~p"/post/#{post.slug}"}>- <h3 class="text-xl font-bold hover:text-blue-600 transition-colors">- {post.title}- </h3>- <p class="text-sm text-gray-600 mt-1">- {post.tags |> Enum.map(& &1.name) |> Enum.join(", ")}- </p>- </.link>- </div>+ <div class="flex justify-center items-center space-x-2 text-sm text-gray-600 mb-4">+ <div class="inline-flex items-center px-3 py-1 rounded-full bg-gradient-to-r from-fuchsia-100 to-cyan-100 border border-fuchsia-200">+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-fuchsia-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />+ </svg>+ <span><%= @total_readers %> <%= if @total_readers == 1, do: "person", else: "people" %> browsing</span>+ </div>+ </div>++ <p class="text-gray-600 max-w-2xl mx-auto">+ A collection of thoughts on technology, life, and weird little things I make.+ </p>+ </header>++ <!-- Two column layout for posts -->+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">+ <!-- Tech Posts Column -->+ <div class="bg-gradient-to-br from-fuchsia-50 to-cyan-50 rounded-xl p-6 shadow-lg border border-fuchsia-100">+ <div class="flex items-center mb-6">+ <div class="w-3 h-3 rounded-full bg-fuchsia-400 mr-2"></div>+ <div class="w-3 h-3 rounded-full bg-cyan-400 mr-2"></div>+ <div class="w-3 h-3 rounded-full bg-indigo-400 mr-4"></div>+ <h2 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-600 to-cyan-600">+ Tech & Programming+ </h2>+ </div>++ <div class="space-y-4">+ <%= for post <- @tech_posts do %>+ <div class="group bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-300 border-l-4 border-fuchsia-400">+ <.link navigate={~p"/post/#{post.slug}"} class="block">+ <h3 class="text-xl font-bold text-gray-800 group-hover:text-fuchsia-600 transition-colors">+ <%= post.title %>+ </h3>+ <div class="flex flex-wrap gap-2 mt-2">+ <%= for tag <- post.tags do %>+ <span class="inline-block px-2 py-1 bg-gradient-to-r from-fuchsia-100 to-cyan-100 rounded-full text-xs font-medium text-gray-700">+ <%= tag.name %>+ </span>+ <% end %>+ </div>+ </.link>+ </div>+ <% end %>+ </div>+ </div>++ <!-- Non-Tech Posts Column -->+ <div class="bg-gradient-to-br from-cyan-50 to-fuchsia-50 rounded-xl p-6 shadow-lg border border-cyan-100">+ <div class="flex items-center mb-6">+ <div class="w-3 h-3 rounded-full bg-cyan-400 mr-2"></div>+ <div class="w-3 h-3 rounded-full bg-fuchsia-400 mr-2"></div>+ <div class="w-3 h-3 rounded-full bg-indigo-400 mr-4"></div>+ <h2 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-600 to-fuchsia-600">+ Life & Everything Else+ </h2>+ </div>++ <div class="space-y-4">+ <%= for post <- @non_tech_posts do %>+ <div class="group bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-300 border-l-4 border-cyan-400">+ <.link navigate={~p"/post/#{post.slug}"} class="block">+ <h3 class="text-xl font-bold text-gray-800 group-hover:text-cyan-600 transition-colors">+ <%= post.title %>+ </h3>+ <div class="flex flex-wrap gap-2 mt-2">+ <%= for tag <- post.tags do %>+ <span class="inline-block px-2 py-1 bg-gradient-to-r from-cyan-100 to-fuchsia-100 rounded-full text-xs font-medium text-gray-700">+ <%= tag.name %>+ </span>+ <% end %>+ </div>+ </.link>+ </div>+ <% end %></div></div>- <%!-- Non-Tech Posts Column --%>- <div>- <h2 class="text-2xl font-bold mb-6 pb-2 border-b">Life & Everything Else</h2>- <div class="space-y-6">- <div :for={post <- @non_tech_posts} class="mb-8">- <.link navigate={~p"/post/#{post.slug}"}>- <h3 class="text-xl font-bold hover:text-blue-600 transition-colors">- {post.title}- </h3>- <p class="text-sm text-gray-600 mt-1">- {post.tags |> Enum.map(& &1.name) |> Enum.join(", ")}- </p>- </.link>- </div>+ <!-- Non-Tech Posts Column -->+ <div class="bg-gradient-to-br from-cyan-50 to-fuchsia-50 rounded-xl p-6 shadow-lg border border-cyan-100">+ <div class="flex items-center mb-6">+ <div class="w-3 h-3 rounded-full bg-cyan-400 mr-2"></div>+ <div class="w-3 h-3 rounded-full bg-fuchsia-400 mr-2"></div>+ <div class="w-3 h-3 rounded-full bg-indigo-400 mr-4"></div>+ <h2 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-600 to-fuchsia-600">+ Tech Demos+ </h2>+ </div>++ <div class="space-y-4">+ <%= for post <- @non_tech_posts do %>+ <div class="group bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-300 border-l-4 border-cyan-400">+ <.link navigate={~p"/post/#{post.slug}"} class="block">+ <h3 class="text-xl font-bold text-gray-800 group-hover:text-cyan-600 transition-colors">+ <%= "Reddit Links Feed" %>+ </h3>+ </.link>+ </div>+ <% end %></div></div></div>- </div>+ </div>++ <!-- Retro footer -->+ <footer class="mt-16 text-center">+ <div class="inline-block px-4 py-2 bg-gradient-to-r from-fuchsia-100 to-cyan-100 rounded-full text-sm text-gray-700">+ <span class="font-mono">/* Crafted with ♥ and Elixir */</span>+ </div>+ </footer></div>"""end