zoey/zoeys.computer
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

svg preview renderer

Browse source
This commit is contained in:
zack 2024-10-26 21:41:22 -04:00
parent 43a8412f06
commit faa9599849
No known key found for this signature in database
GPG key ID: 5F873416BCF59F35
29 changed files with 1027 additions and 254 deletions
Download patch file Download diff file Expand all files Collapse all files

70
lib/zoeyscomputer_web/components/code_block.ex
View file

@ -1,6 +1,7 @@
defmodule ZoeyscomputerWeb.CodeBlock do
use Phoenix.Component
alias Phoenix.LiveView.JS
import ZoeyscomputerWeb.CoreComponents
@moduledoc """
A code block component with syntax highlighting using Shiki.
@ -37,6 +38,7 @@ defmodule ZoeyscomputerWeb.CodeBlock do
attr :code, :string, required: true
attr :language, :string, required: true
attr :title, :string, default: nil
attr :class, :string, default: ""
attr :line_numbers, :boolean, default: false
attr :highlighted_lines, :list, default: []
@ -44,48 +46,46 @@ defmodule ZoeyscomputerWeb.CodeBlock do
# Calculate the number of lines for line numbers
assigns = assign(assigns, :num_lines, String.split(assigns.code, "\n") |> length())
id = System.unique_integer()
~H"""
<div class="relative ctp-bg-base rounded-lg overflow-hidden">
<div class={"relative rounded-lg overflow-hidden w-full bg-ctp-mantle border border-ctp-surface0 #{@class} "}>
<%= if @title do %>
<div class="ctp-bg-mantle px-4 py-2 border-b ctp-border-surface0">
<h3 class="ctp-text-text text-sm font-medium"><%= @title %></h3>
<div class="bg-ctp-crust px-4 py-2 border-b border-ctp-surface0">
<h3 class="ctp-text-text text-[0.75rem] font-medium"><%= @title %></h3>
</div>
<% end %>
<div class="relative">
<%= if @line_numbers do %>
<div class="absolute left-0 top-0 bottom-0 ctp-bg-crust w-12 flex flex-col items-end pr-2 py-4 ctp-text-surface2 select-none">
<%= for line_num <- 1..@num_lines do %>
<span class={[
"text-sm leading-6",
line_num in @highlighted_lines && "ctp-text-mauve font-medium"
]}>
<%= line_num %>
</span>
<% end %>
</div>
<% end %>
<div class="overflow-x-scroll bg-ctp-mantle">
<div class="relative bg-ctp-crust">
<%= if @line_numbers do %>
<div class="absolute bg-ctp-crust left-0 top-0 bottom-0 ctp-bg-crust min-w-12 flex flex-col items-end py-4 ctp-text-surface2 select-none">
<%= for line_num <- 1..@num_lines do %>
<span class={[
"text-sm leading-6 pr-2",
line_num in @highlighted_lines &&
"text-ctp-mauve bg-ctp-mauve/15 w-full text-right font-bold"
]}>
<%= line_num %>
</span>
<% end %>
</div>
<% end %>
<div class={["overflow-x-auto", @line_numbers && "pl-12"]}>
<pre
class="p-4"
id={"code-block-#{System.unique_integer()}"}
phx-hook="CodeBlockHook"
data-code={@code}
data-language={@language}
data-highlighted-lines={Jason.encode!(@highlighted_lines)}
><code class="text-sm"><%= @code %></code></pre>
<div class={["bg-ctp-mantle overflow-x-scroll pb-0.5", @line_numbers && "pl-12"]}>
<pre
class="p-4 leading-6 text-sm mb-4"
id={"code-block-#{id}"}
phx-hook="CodeBlockHook"
data-code={@code}
data-language={@language}
data-highlighted-lines={Jason.encode!(@highlighted_lines)}
><code class="text-sm"><%= @code %></code></pre>
</div>
</div>
</div>
<div class="ctp-bg-mantle px-4 py-2 border-t ctp-border-surface0 flex justify-end">
<button
type="button"
class="ctp-text-subtext0 hover:ctp-text-text text-sm"
phx-click={JS.dispatch("clipcopy", detail: %{text: @code})}
>
Copy code
</button>
<div class="bg-ctp-mantle px-4 py-2 border-t border-ctp-surface0 flex justify-end">
<.copy_button id="code-copy-btn" content={"code-block-#{id}"} />
</div>
</div>
"""