feat: add changelog and case studies features with live views

- Introduced ChangelogLive and CaseStudyLive modules for displaying changelog entries and case studies.
- Added routes for changelog and case studies in the router.
- Implemented rendering logic for both features, including navigation and content display.

Author: zcesur

lib/algora/content.ex

@@ -7,8 +7,10 @@ defmodule Algora.Content do
 
   defstruct [:slug, :title, :date, :tags, :authors, :content]
 
+  defp base_path, do: Path.join([:code.priv_dir(:algora), "content"])
+
   def load_content(directory, slug) do
-    with {:ok, content} <- File.read(Path.join(directory, "#{slug}.md")),
+    with {:ok, content} <- [base_path(), directory, "#{slug}.md"] |> Path.join() |> File.read(),
          [frontmatter, markdown] <- content |> String.split("---\n", parts: 3) |> Enum.drop(1),
          {:ok, parsed_frontmatter} <- YamlElixir.read_from_string(frontmatter) do
       {:ok,
@@ -24,7 +26,8 @@ defmodule Algora.Content do
   end
 
   def list_content(directory) do
-    directory
+    [base_path(), directory]
+    |> Path.join()
     |> File.ls!()
     |> Enum.filter(&String.ends_with?(&1, ".md"))
     |> Enum.map(fn filename ->

lib/algora_web/live/blog_live.ex

@@ -5,11 +5,9 @@ defmodule AlgoraWeb.BlogLive do
   alias AlgoraWeb.Components.Footer
   alias AlgoraWeb.Components.Header
 
-  defp blog_path, do: Path.join([:code.priv_dir(:algora), "blog"])
-
   @impl true
   def mount(%{"slug" => slug}, _session, socket) do
-    case Algora.Content.load_content(blog_path(), slug) do
+    case Algora.Content.load_content("blog", slug) do
       {:ok, content} ->
         {:ok,
          assign(socket,
@@ -24,7 +22,7 @@ defmodule AlgoraWeb.BlogLive do
 
   @impl true
   def mount(_params, _session, socket) do
-    posts = Algora.Content.list_content(blog_path())
+    posts = Algora.Content.list_content("blog")
     {:ok, assign(socket, posts: posts, page_title: "Blog")}
   end
 

lib/algora_web/live/case_study_live.ex

@@ -0,0 +1,71 @@
+defmodule AlgoraWeb.CaseStudyLive do
+  @moduledoc false
+  use AlgoraWeb, :live_view
+
+  alias AlgoraWeb.Components.Footer
+  alias AlgoraWeb.Components.Header
+
+  @impl true
+  def mount(%{"slug" => slug}, _session, socket) do
+    case Algora.Content.load_content("case_studies", slug) do
+      {:ok, content} ->
+        {:ok,
+         assign(socket,
+           content: content,
+           page_title: content.title
+         )}
+
+      {:error, _reason} ->
+        {:ok, push_navigate(socket, to: ~p"/case-studies")}
+    end
+  end
+
+  @impl true
+  def mount(_params, _session, socket) do
+    posts = Algora.Content.list_content("case_studies")
+    {:ok, assign(socket, posts: posts, page_title: "Case Studies")}
+  end
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div>
+      <Header.header />
+      <div class="max-w-5xl mx-auto px-4 pt-32 pb-16 sm:pb-24">
+        <%= if @live_action == :index do %>
+          <h1 class="text-3xl font-bold mb-8">Case Studies</h1>
+          <div class="space-y-6">
+            <%= for post <- @posts do %>
+              <div class="border border-border p-6 rounded-lg hover:border-border/80">
+                <.link navigate={~p"/case-studies/#{post.slug}"} class="block space-y-2">
+                  <h2 class="text-3xl font-bold hover:text-success font-display">
+                    {post.title}
+                  </h2>
+                  <div class="flex items-center gap-4 text-sm text-muted-foreground">
+                    <time datetime={post.date}>{Algora.Content.format_date(post.date)}</time>
+                  </div>
+                </.link>
+              </div>
+            <% end %>
+          </div>
+        <% else %>
+          <article class="prose dark:prose-invert max-w-none">
+            <header class="mb-8 not-prose">
+              <h1 class="text-5xl font-display font-extrabold tracking-tight mb-4 bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 to-emerald-300">
+                {@content.title}
+              </h1>
+
+              <div class="flex items-center gap-4 text-muted-foreground mb-4">
+                <time datetime={@content.date}>{Algora.Content.format_date(@content.date)}</time>
+              </div>
+            </header>
+
+            {raw(@content.content)}
+          </article>
+        <% end %>
+      </div>
+      <Footer.footer />
+    </div>
+    """
+  end
+end

lib/algora_web/live/changelog_live.ex

@@ -0,0 +1,71 @@
+defmodule AlgoraWeb.ChangelogLive do
+  @moduledoc false
+  use AlgoraWeb, :live_view
+
+  alias AlgoraWeb.Components.Footer
+  alias AlgoraWeb.Components.Header
+
+  @impl true
+  def mount(%{"slug" => slug}, _session, socket) do
+    case Algora.Content.load_content("changelog", slug) do
+      {:ok, content} ->
+        {:ok,
+         assign(socket,
+           content: content,
+           page_title: content.title
+         )}
+
+      {:error, _reason} ->
+        {:ok, push_navigate(socket, to: ~p"/changelog")}
+    end
+  end
+
+  @impl true
+  def mount(_params, _session, socket) do
+    posts = Algora.Content.list_content("changelog")
+    {:ok, assign(socket, posts: posts, page_title: "Changelog")}
+  end
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div>
+      <Header.header />
+      <div class="max-w-5xl mx-auto px-4 pt-32 pb-16 sm:pb-24">
+        <%= if @live_action == :index do %>
+          <h1 class="text-3xl font-bold mb-8">Changelog</h1>
+          <div class="space-y-6">
+            <%= for post <- @posts do %>
+              <div class="border border-border p-6 rounded-lg hover:border-border/80">
+                <.link navigate={~p"/changelog/#{post.slug}"} class="block space-y-2">
+                  <h2 class="text-3xl font-bold hover:text-success font-display">
+                    {post.title}
+                  </h2>
+                  <div class="flex items-center gap-4 text-sm text-muted-foreground">
+                    <time datetime={post.date}>{Algora.Content.format_date(post.date)}</time>
+                  </div>
+                </.link>
+              </div>
+            <% end %>
+          </div>
+        <% else %>
+          <article class="prose dark:prose-invert max-w-none">
+            <header class="mb-8 not-prose">
+              <h1 class="text-5xl font-display font-extrabold tracking-tight mb-4 bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 to-emerald-300">
+                {@content.title}
+              </h1>
+
+              <div class="flex items-center gap-4 text-muted-foreground mb-4">
+                <time datetime={@content.date}>{Algora.Content.format_date(@content.date)}</time>
+              </div>
+            </header>
+
+            {raw(@content.content)}
+          </article>
+        <% end %>
+      </div>
+      <Footer.footer />
+    </div>
+    """
+  end
+end

lib/algora_web/router.ex

@@ -140,6 +140,10 @@ defmodule AlgoraWeb.Router do
       live "/swift", SwiftBountiesLive
       live "/blog/:slug", BlogLive, :show
       live "/blog", BlogLive, :index
+      live "/changelog/:slug", ChangelogLive, :show
+      live "/changelog", ChangelogLive, :index
+      live "/case-studies/:slug", CaseStudyLive, :show
+      live "/case-studies", CaseStudyLive, :index
     end
 
     live_session :root,

…lobally-distributed-livestreaming-app.md …lobally-distributed-livestreaming-app.mdpriv/blog/2024-03-building-a-globally-distributed-livestreaming-app.md renamed to priv/content/blog/2024-03-building-a-globally-distributed-livestreaming-app.md priv/blog/2024-03-building-a-globally-distributed-livestreaming-app.md renamed to priv/content/blog/2024-03-building-a-globally-distributed-livestreaming-app.md

@@ -0,0 +1,98 @@
+---
+title: "How ACME Corp Migrated 100+ Microservices to Elixir"
+date: "2024-03-20"
+company: "ACME Corporation"
+industry: "E-commerce"
+logo: "/images/case-studies/acme-logo.png"
+summary: "Learn how ACME Corp successfully migrated their entire microservices architecture to Elixir, improving performance by 300% and reducing infrastructure costs by 60%."
+---
+
+# How ACME Corp Migrated 100+ Microservices to Elixir
+
+## Company Overview
+
+ACME Corporation is a leading e-commerce platform handling millions of transactions daily. With over 1000 employees and 10 million active users, maintaining system performance and reliability is crucial to their success.
+
+## The Challenge
+
+- Legacy microservices architecture built with Node.js and Python
+- High infrastructure costs due to service redundancy
+- Complex deployment and maintenance procedures
+- Scalability issues during peak shopping seasons
+
+## Why Elixir?
+
+After evaluating several options, ACME chose Elixir for its:
+
+- Excellent concurrency model
+- Built-in fault tolerance
+- Lower infrastructure requirements
+- Strong developer productivity
+- Growing ecosystem
+
+## Implementation
+
+The migration was completed in phases over 8 months:
+
+1. **Planning & Training (1 month)**
+
+   - Team training on Elixir and OTP
+   - Architecture design
+   - Migration strategy development
+
+2. **Initial Migration (3 months)**
+
+   - Core services migration
+   - Development of shared libraries
+   - Setup of monitoring and deployment pipelines
+
+3. **Bulk Migration (3 months)**
+
+   - Systematic migration of remaining services
+   - Performance optimization
+   - Integration testing
+
+4. **Optimization (1 month)**
+   - Fine-tuning
+   - Documentation
+   - Knowledge transfer
+
+## Results
+
+The migration to Elixir delivered impressive results:
+
+- **300%** improvement in overall system performance
+- **60%** reduction in infrastructure costs
+- **90%** decrease in system failures
+- **50%** reduction in deployment complexity
+
+## Key Learnings
+
+1. Invest in team training early
+2. Migrate incrementally
+3. Build strong testing practices
+4. Leverage the BEAM's built-in features
+
+## Testimonial
+
+> "Migrating to Elixir was one of the best technical decisions we've made. The performance improvements and cost savings have been remarkable, and our team loves working with the language."
+>
+> — Sarah Chen, CTO at ACME Corp
+
+## Tools Used
+
+- Phoenix Framework
+- Broadway for data processing
+- LiveView for real-time features
+- Oban for background jobs
+- Commanded for event sourcing
+
+## Looking Forward
+
+ACME continues to expand their use of Elixir, with plans to:
+
+- Build more real-time features with LiveView
+- Implement event sourcing across all services
+- Contribute back to the Elixir community
+
+Want to learn more about how Algora can help with your Elixir migration? [Contact us](/contact) today.

priv/content/case_studies/acme.md

@@ -0,0 +1,42 @@
+---
+title: "AI-Powered Code Reviews"
+date: "2024-03-25"
+summary: "Introducing AI-powered code reviews to help developers catch issues early and maintain high code quality."
+---
+
+# AI-Powered Code Reviews
+
+We're excited to announce the launch of AI-powered code reviews in Algora! This new feature helps developers catch potential issues early and maintain high code quality across their projects.
+
+## Key Features
+
+- **Automated Code Analysis**: Our AI analyzes your code for common issues, best practices, and potential bugs
+- **Performance Insights**: Get recommendations for improving code performance
+- **Security Scanning**: Identify potential security vulnerabilities
+- **Style Guide Enforcement**: Ensure consistent code style across your team
+
+## How It Works
+
+1. Push your code to any repository connected to Algora
+2. Our AI automatically analyzes the changes
+3. Review suggestions appear directly in your PR
+4. Accept or dismiss recommendations with one click
+
+## Getting Started
+
+Enable AI code reviews in your project settings:
+
+1. Go to Project Settings > Integrations
+2. Enable "AI Code Review"
+3. Configure your preferences
+4. Start pushing code!
+
+## What's Next
+
+We're continuously improving our AI models and adding new features. Coming soon:
+
+- Custom rule creation
+- Team-specific style guides
+- Integration with more CI/CD platforms
+
+Try it out and let us know what you think!