update examples

core/assets/css/app.css

@@ -84,3 +84,15 @@ span.line.highlighted {
   width: 100%;
   display: inline-block;
 }
+
+span.line {
+  text-wrap: pretty;
+}
+
+span.line.diff.add {
+  background-color: rgba(16, 185, 129, 0.14);
+}
+
+span.line.diff.remove {
+  background-color: rgba(244, 63, 94, 0.14);
+}

core/assets/js/app.js

@@ -33,7 +33,10 @@ import Chart from "chart.js/auto";
 import { parse } from "best-effort-json-parser";
 
 import { codeToHtml } from "shiki";
-import { transformerNotationHighlight } from "@shikijs/transformers";
+import {
+  transformerNotationHighlight,
+  transformerNotationDiff,
+} from "@shikijs/transformers";
 
 import * as Sentry from "@sentry/browser";
 import Tracker from "@openreplay/tracker";
@@ -60,6 +63,9 @@ import "@getcanary/web/components/canary-search-match-github-discussion.js";
 import "@getcanary/web/components/canary-ask.js";
 import "@getcanary/web/components/canary-ask-results.js";
 import "@getcanary/web/components/canary-tooltip.js";
+import "@getcanary/web/components/canary-footer.js";
+import "@getcanary/web/components/canary-filter-tabs-glob.js";
+import "@getcanary/web/components/canary-filter-tags.js";
 
 const csrfToken = document
   .querySelector("meta[name='csrf-token']")
@@ -80,7 +86,10 @@ const hooks = {
       codeToHtml(this.el.textContent, {
         lang: "html",
         theme: "rose-pine-dawn",
-        transformers: [transformerNotationHighlight()],
+        transformers: [
+          transformerNotationHighlight(),
+          transformerNotationDiff(),
+        ],
       }).then((html) => {
         this.el.innerHTML = html;
       });

core/assets/package.json

@@ -20,7 +20,7 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "@getcanary/web": "^1.0.10",
+    "@getcanary/web": "^1.0.11",
     "@openreplay/tracker": "^14.0.9",
     "@sentry/browser": "^8.33.1",
     "best-effort-json-parser": "^1.1.2",

core/lib/canary/accounts/project.ex

@@ -31,7 +31,24 @@ defmodule Canary.Accounts.Project do
 
     create :create do
       primary? true
-      accept [:account_id, :name]
+
+      accept [:name]
+      argument :account_id, :uuid, allow_nil?: false
+
+      change manage_relationship(:account_id, :account, type: :append)
+
+      change fn changeset, _ ->
+        account_id = Ash.Changeset.get_argument(changeset, :account_id)
+
+        with {:ok, %{billing: %{membership: %{tier: tier}}}} <-
+               Canary.Accounts.Account
+               |> Ash.get(account_id, load: [billing: [:membership]]) do
+          changeset
+          |> Ash.Changeset.force_change_attribute(:public, tier == :admin)
+        else
+          _ -> changeset
+        end
+      end
 
       change fn changeset, _ ->
         key = "cp_" <> String.slice(Ecto.UUID.generate(), 0..7)

core/lib/canary_web/components/layouts/app.html.heex

@@ -1,9 +1,9 @@
 <div class="flex flex-col h-screen">
-  <nav class="bg-white border-b border-gray-300 shadow-sm h-16 flex flex-row items-center px-4 justify-between">
+  <nav class="bg-white border-b border-gray-300 shadow-sm h-12 flex flex-row items-center px-4 justify-between">
     <div class="flex flex-row items-center gap-8">
       <.link class="text-md text-black" navigate={~p"/"}>🐤 Canary</.link>
       <%= if not is_nil(@current_account) and not is_nil(@current_project) do %>
-        <div class="flex flex-row items-center gap-2">
+        <div class="flex flex-row items-center gap-2 py-2">
           <form phx-change="account-change">
             <.input
               type="select"
@@ -81,7 +81,7 @@
   </main>
 
   <footer
-    :if={not is_nil(@current_account) and not @current_account.owner_email_confirmed}
+    :if={not is_nil(@current_account) and is_nil(@current_account.owner_email_confirmed)}
     class="bg-red-50 text-xs text-center py-2 font-semibold"
   >
     The owner of this account has not confirmed their email address.

core/lib/canary_web/live/example_live/example.ex

@@ -0,0 +1,30 @@
+defmodule CanaryWeb.ExampleLive.Example do
+  use CanaryWeb, :live_component
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div class="border border-gray-200 py-4 px-6 rounded-md">
+      <h2><%= @example.name %></h2>
+      <p :if={@example[:description]} class="italic mb-4"><%= @example.description %></p>
+
+      <div class="flex flex-col gap-0 mt-2">
+        <div class="text-md mb-2">
+          Click below to try it ↓
+        </div>
+        <%= raw(@example.code) %>
+      </div>
+
+      <div class="flex flex-col gap-0 mt-4 text-wrap">
+        <p>Actual code to render above ↓</p>
+        <code id={@id} phx-hook="Highlight"><%= @example.code %></code>
+      </div>
+    </div>
+    """
+  end
+
+  @impl true
+  def update(assigns, socket) do
+    {:ok, assign(socket, assigns)}
+  end
+end