commit 704ecff89ee483df2b491fd91aeafacdc393848d · comet.sh/comet

+5

assets/css/app.css

···

       23
        
       [data-phx-session], [data-phx-teleported-src] { display: contents }

     

       24
        
       

     

       25
        
       /* This file is for your main application CSS */

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0

···

       23
        
       [data-phx-session], [data-phx-teleported-src] { display: contents }

     

       24
        
       

     

       25
        
       /* This file is for your main application CSS */

     

       26
       +
       @theme {

     

       27
       +
         --color-brand-light: #ffa34e;

     

       28
       +
         --color-brand-dark: #ff4400;

     

       29
       +
          --font-sans: "Work Sans Variable", ui-sans-serif, system-ui, sans-serif;

     

       30
       +
       }

+1

assets/js/app.js

···

       19
        
       

     

       20
        
       // Include phoenix_html to handle method=PUT/DELETE in forms and buttons.

     

       21
        
       import "phoenix_html"

     

       0
        
       
     

       22
        
       // Establish Phoenix Socket and LiveView configuration.

     

       23
        
       import {Socket} from "phoenix"

     

       24
        
       import {LiveSocket} from "phoenix_live_view"

···

       19
        
       

     

       20
        
       // Include phoenix_html to handle method=PUT/DELETE in forms and buttons.

     

       21
        
       import "phoenix_html"

     

       22
       +
       import "@fontsource-variable/work-sans"

     

       23
        
       // Establish Phoenix Socket and LiveView configuration.

     

       24
        
       import {Socket} from "phoenix"

     

       25
        
       import {LiveSocket} from "phoenix_live_view"

+6 -2

config/config.exs

···

       36
        
         version: "0.25.4",

     

       37
        
         comet: [

     

       38
        
           args:

     

       39
       -
             ~w(js/app.js --bundle --target=es2022 --outdir=../priv/static/assets/js --external:/fonts/* --external:/images/* --alias:@=.),

     

       40
        
           cd: Path.expand("../assets", __DIR__),

     

       41
        
           env: %{"NODE_PATH" => [Path.expand("../deps", __DIR__), Mix.Project.build_path()]}

     

       42
        
         ]

     
···

       52
        
           cd: Path.expand("..", __DIR__)

     

       53
        
         ],

     

       54
        
         version_check: false,

     

       55
       -
         path: System.get_env("TAILWINDCSS_PATH", Path.expand("../assets/node_modules/.bin/tailwindcss", __DIR__))

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       56
        
       

     

       57
        
       # Configure Elixir's Logger

     

       58
        
       config :logger, :default_formatter,

···

       36
        
         version: "0.25.4",

     

       37
        
         comet: [

     

       38
        
           args:

     

       39
       +
             ~w(js/app.js --bundle --target=es2022 --outdir=../priv/static/assets/js --external:/fonts/* --external:/images/* --loader:.woff2=file --alias:@=.),

     

       40
        
           cd: Path.expand("../assets", __DIR__),

     

       41
        
           env: %{"NODE_PATH" => [Path.expand("../deps", __DIR__), Mix.Project.build_path()]}

     

       42
        
         ]

     
···

       52
        
           cd: Path.expand("..", __DIR__)

     

       53
        
         ],

     

       54
        
         version_check: false,

     

       55
       +
         path:

     

       56
       +
           System.get_env(

     

       57
       +
             "TAILWINDCSS_PATH",

     

       58
       +
             Path.expand("../assets/node_modules/.bin/tailwindcss", __DIR__)

     

       59
       +
           )

     

       60
        
       

     

       61
        
       # Configure Elixir's Logger

     

       62
        
       config :logger, :default_formatter,

-16

lib/comet_app/components/post_preview.ex

···

       1
       -
       defmodule CometApp.Components.PostPreview do

     

       2
       -
         use Hologram.Component

     

       3
       -
         alias Hologram.UI.Link

     

       4
       -
       

     

       5
       -
         prop :post, :map

     

       6
       -
       

     

       7
       -
         def template do

     

       8
       -
           ~HOLO"""

     

       9
       -
           <article class="post-preview">

     

       10
       -
             <h2>{@post.title}</h2>

     

       11
       -
             <p>{@post.excerpt}</p>

     

       12
       -
             <Link to={CometApp.PostPage, id: @post.id}>Read more</Link>

     

       13
       -
           </article>

     

       14
       -
           """

     

       15
       -
         end

     

       16
       -
       end

+11

lib/comet_app/components/title.ex

···

       1
       +
       defmodule CometApp.Components.Title do

     

       2
       +
         use Hologram.Component

     

       3
       +
       

     

       4
       +
         prop :text, :string, default: nil

     

       5
       +
       

     

       6
       +
         def template do

     

       7
       +
           ~HOLO"""

     

       8
       +
           <title>{if @text do "#{@text} - Comet" else "Comet" end}</title>

     

       9
       +
           """

     

       10
       +
         end

     

       11
       +
       end

+22 -1

lib/comet_app/layouts/main.ex

···

       1
        
       defmodule CometApp.MainLayout do

     

       2
        
         use Hologram.Component

     

       3
        
       

     

       4
       -
         alias Hologram.UI.Link

     

       5
        
         alias Hologram.UI.Runtime

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       6
        
       end

···

       1
        
       defmodule CometApp.MainLayout do

     

       2
        
         use Hologram.Component

     

       3
        
       

     

       4
       +
         alias CometApp.Components.Title

     

       5
        
         alias Hologram.UI.Runtime

     

       6
       +
       

     

       7
       +
         prop :page_title, :string, default: nil

     

       8
       +
       

     

       9
       +
         def template do

     

       10
       +
           ~HOLO"""

     

       11
       +
           <!DOCTYPE html>

     

       12
       +
           <html lang="en">

     

       13
       +
             <head>

     

       14
       +
               <meta charset="utf-8" />

     

       15
       +
               <meta name="viewport" content="width=device-width, initial-scale=1" />

     

       16
       +
               <link rel="stylesheet" href="/assets/js/app.css" />

     

       17
       +
               <link rel="stylesheet" href="/assets/css/app.css" />

     

       18
       +
               <Title text={@page_title} />

     

       19
       +
               <Runtime />

     

       20
       +
             </head>

     

       21
       +
             <body class="from-amber-900 bg-linear-to-tl to-stone-950 to-80% bg-fixed text-white p-10 w-screen h-screen flex justify-center flex-col">

     

       22
       +
               <slot/>

     

       23
       +
             </body>

     

       24
       +
           </html>

     

       25
       +
           """

     

       26
       +
         end

     

       27
        
       end

-18

lib/comet_app/layouts/main.holo

···

       1
       -
       <!DOCTYPE html>

     

       2
       -
       <html lang="en">

     

       3
       -
         <head>

     

       4
       -
           <meta charset="utf-8" />

     

       5
       -
           <meta name="viewport" content="width=device-width, initial-scale=1" />

     

       6
       -
           <title>Comet App</title>

     

       7
       -
           <link phx-track-static rel="stylesheet" href="/assets/css/app.css" />

     

       8
       -
           <Runtime />

     

       9
       -
         </head>

     

       10
       -
         <body>

     

       11
       -
           <nav class="bg-red-500 text-2xl">

     

       12
       -
             <Link to={CometApp.HomePage}>Home</Link>

     

       13
       -
           </nav>

     

       14
       -
           <main>

     

       15
       -
             <slot />

     

       16
       -
           </main>

     

       17
       -
         </body>

     

       18
       -
       </html>

+15 -17

lib/comet_app/pages/home.ex

···

       1
        
       defmodule CometApp.HomePage do

     

       2
        
         use Hologram.Page

     

       3
       -
         alias CometApp.Components.PostPreview

     

       4
        
       

     

       5
        
         route "/"

     

       6
        
       

     

       7
       -
         layout CometApp.MainLayout

     

       8
        
       

     

       9
       -
         def init(_params, component, _server) do

     

       10
       -
           # In real app, fetch from database

     

       11
       -
           posts = [

     

       12
       -
             %{id: 1, title: "First Post", excerpt: "This is my first post"},

     

       13
       -
             %{id: 2, title: "Second Post", excerpt: nil}

     

       14
       -
           ]

     

       15
        
       

     

       16
       -
           put_state(component, :posts, posts)

     

       17
       -
         end

     

       18
        
       

     

       19
        
         def template do

     

       20
        
           ~HOLO"""

     

       21
       -
           <h1>Welcome to my Blog</h1>

     

       22
       -
       

     

       23
       -
           <div class="posts">

     

       24
       -
             {%for post <- @posts}

     

       25
       -
               <PostPreview post={post} />

     

       26
       -
             {/for}

     

       27
       -
           </div>

     

       28
        
           """

     

       29
        
         end

     

       30
        
       end

···

       1
        
       defmodule CometApp.HomePage do

     

       2
        
         use Hologram.Page

     

       0
        
       
     

       3
        
       

     

       4
        
         route "/"

     

       5
        
       

     

       6
       +
         layout CometApp.MainLayout, page_title: "Home"

     

       7
        
       

     

       8
       +
         # def init(_params, component, _server) do

     

       9
       +
         #   # In real app, fetch from database

     

       10
       +
         #   posts = [

     

       11
       +
         #     %{id: 1, title: "First Post", excerpt: "This is my first post"},

     

       12
       +
         #     %{id: 2, title: "Second Post", excerpt: nil}

     

       13
       +
         #   ]

     

       14
        
       

     

       15
       +
         #   put_state(component, :posts, posts)

     

       16
       +
         # end

     

       17
        
       

     

       18
        
         def template do

     

       19
        
           ~HOLO"""

     

       20
       +
           <h1 class="italic text-9xl tracking-tighter leading-30 mb-10 font-thin">

     

       21
       +
             <span class="font-medium">Comet</span> is the next-generation of music streaming.

     

       22
       +
           </h1>

     

       23
       +
           <p class="text-2xl font-light">

     

       24
       +
             Powered by the AT Protocol, we're putting the power back in the hands of musicians.

     

       25
       +
           </p>

     

       0
        
       
     

       26
        
           """

     

       27
        
         end

     

       28
        
       end

-48

lib/comet_app/pages/post_view.ex

···

       1
       -
       defmodule CometApp.PostPage do

     

       2
       -
         use Hologram.Page

     

       3
       -
       

     

       4
       -
         route "/posts/:id"

     

       5
       -
       

     

       6
       -
         param :id, :integer

     

       7
       -
       

     

       8
       -
         layout CometApp.MainLayout

     

       9
       -
       

     

       10
       -
         def init(params, component, _server) do

     

       11
       -
           # In real app, fetch from database

     

       12
       -
           post = %{

     

       13
       -
             id: params.id,

     

       14
       -
             title: "Example Post",

     

       15
       -
             content: "This is the full content...",

     

       16
       -
             likes: 0

     

       17
       -
           }

     

       18
       -
       

     

       19
       -
           put_state(component, :post, post)

     

       20
       -
         end

     

       21
       -
       

     

       22
       -
         def template do

     

       23
       -
           ~HOLO"""

     

       24
       -
           <article>

     

       25
       -
             <h1>{@post.title}</h1>

     

       26
       -
             <p>{@post.content}</p>

     

       27
       -
       

     

       28
       -
             <div class="likes">

     

       29
       -
               Likes: {@post.likes}

     

       30
       -
               <button $click="like_post">Like</button>

     

       31
       -
             </div>

     

       32
       -
           </article>

     

       33
       -
           """

     

       34
       -
         end

     

       35
       -
       

     

       36
       -
         def action(:like_post, _params, component) do

     

       37
       -
           # Update likes locally first for instant feedback

     

       38
       -
           component

     

       39
       -
           |> put_state([:post, :likes], component.state.post.likes + 1)

     

       40
       -
           |> put_command(:save_like, post_id: component.state.post.id)

     

       41
       -
         end

     

       42
       -
       

     

       43
       -
         def command(:save_like, params, server) do

     

       44
       -
           # In real app, save to database

     

       45
       -
           IO.puts("Liked post #{params.post_id}")

     

       46
       -
           server

     

       47
       -
         end

     

       48
       -
       end

+1

lib/comet_web/components/layouts/root.html.heex

···

       7
        
           <.live_title default="Comet" suffix=" · Phoenix Framework">

     

       8
        
             {assigns[:page_title]}

     

       9
        
           </.live_title>

     

       0
        
       
     

       10
        
           <link phx-track-static rel="stylesheet" href={~p"/assets/css/app.css"} />

     

       11
        
           <script defer phx-track-static type="text/javascript" src={~p"/assets/js/app.js"}>

     

       12
        
           </script>

···

       7
        
           <.live_title default="Comet" suffix=" · Phoenix Framework">

     

       8
        
             {assigns[:page_title]}

     

       9
        
           </.live_title>

     

       10
       +
           <link phx-track-static rel="stylesheet" href={~p"/assets/js/app.css"} />

     

       11
        
           <link phx-track-static rel="stylesheet" href={~p"/assets/css/app.css"} />

     

       12
        
           <script defer phx-track-static type="text/javascript" src={~p"/assets/js/app.js"}>

     

       13
        
           </script>

+4 -1

package.json

···

       13
        
           "format": "prettier --write ."

     

       14
        
         },

     

       15
        
         "type": "commonjs",

     

       16
       -
         "workspaces": []

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       17
        
       }

···

       13
        
           "format": "prettier --write ."

     

       14
        
         },

     

       15
        
         "type": "commonjs",

     

       16
       +
         "workspaces": [],

     

       17
       +
         "dependencies": {

     

       18
       +
           "@fontsource-variable/work-sans": "^5.2.8"

     

       19
       +
         }

     

       20
        
       }

+9

pnpm-lock.yaml

···

       7
        
       importers:

     

       8
        
       

     

       9
        
         .:

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       10
        
           devDependencies:

     

       11
        
             '@tailwindcss/cli':

     

       12
        
               specifier: ^4.1.17

     
···

       25
        
               version: 5.9.3

     

       26
        
       

     

       27
        
       packages:

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       28
        
       

     

       29
        
         '@jridgewell/gen-mapping@0.3.13':

     

       30
        
           resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}

     
···

       431
        
           hasBin: true

     

       432
        
       

     

       433
        
       snapshots:

     

       0
        
       
     

       0
        
       
     

       434
        
       

     

       435
        
         '@jridgewell/gen-mapping@0.3.13':

     

       436
        
           dependencies:

···

       7
        
       importers:

     

       8
        
       

     

       9
        
         .:

     

       10
       +
           dependencies:

     

       11
       +
             '@fontsource-variable/work-sans':

     

       12
       +
               specifier: ^5.2.8

     

       13
       +
               version: 5.2.8

     

       14
        
           devDependencies:

     

       15
        
             '@tailwindcss/cli':

     

       16
        
               specifier: ^4.1.17

     
···

       29
        
               version: 5.9.3

     

       30
        
       

     

       31
        
       packages:

     

       32
       +
       

     

       33
       +
         '@fontsource-variable/work-sans@5.2.8':

     

       34
       +
           resolution: {integrity: sha512-8uWtTt0/B5NxGie9xUVD5y5Ch4Q+Hy7kFYKtUpwYbzSAgJEoaMxT8rMnfnK7zfAYSLC8GnGO1/tXrFtKIYYQVQ==}

     

       35
        
       

     

       36
        
         '@jridgewell/gen-mapping@0.3.13':

     

       37
        
           resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}

     
···

       438
        
           hasBin: true

     

       439
        
       

     

       440
        
       snapshots:

     

       441
       +
       

     

       442
       +
         '@fontsource-variable/work-sans@5.2.8': {}

     

       443
        
       

     

       444
        
         '@jridgewell/gen-mapping@0.3.13':

     

       445
        
           dependencies: