chore: split css files

assets/css/core/app.css

@@ -1,7 +1,5 @@
-@import "./core_components.css";
+@import "./components.css";
 @import "./flash.css";
-@import "./admin.css";
-@import "./home.css";
 
 :root {
   --bg: #13151a;

assets/css/home.css

@@ -1,16 +1,16 @@
-.service {
+.home .service {
   margin-top: 28px;
 }
 
-.service h3 {
+.home .service h3 {
   margin-bottom: 8px;
 }
 
-.service .link {
+.home .service .link {
   color: var(--accent);
 }
 
-.service svg {
+.home .service svg {
   width: 16px;
   height: 16px;
 }

assets/js/app.js

@@ -21,7 +21,7 @@ import "phoenix_html"
 import {Socket} from "phoenix"
 import {LiveSocket} from "phoenix_live_view"
 import topbar from "../vendor/topbar"
-import "../css/app.css"
+import "../css/core/app.css"
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 let liveSocket = new LiveSocket("/live", Socket, {

config/config.exs

@@ -41,6 +41,11 @@ config :esbuild,
       ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
     cd: Path.expand("../assets", __DIR__),
     env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
+  ],
+  css: [
+    args: ~w(css/home.css css/admin.css --outdir=../priv/static/assets),
+    cd: Path.expand("../assets", __DIR__),
+    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
   ]
 
 # Configures Elixir's Logger

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

@@ -15,6 +15,11 @@
       }
     />
     <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
+    <%= if assigns[:stylesheets] do %>
+      <%= for stylesheet <- @stylesheets do %>
+        <link phx-track-static rel="stylesheet" href={stylesheet} />
+      <% end %>
+    <% end %>
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>
     <link

lib/comfycamp_web/controllers/admin_page_controller.ex

@@ -4,12 +4,12 @@ defmodule ComfycampWeb.AdminPageController do
   def home(conn, _params) do
     conn
     |> put_layout(html: :admin)
-    |> render(:home, page_title: "Админка")
+    |> render(:home, page_title: "Админка", stylesheets: ["/assets/admin.css"])
   end
 
   def services(conn, _params) do
     conn
     |> put_layout(html: :admin)
-    |> render(:home, page_title: "Админка")
+    |> render(:home, page_title: "Админка", stylesheets: ["/assets/admin.css"])
   end
 end

lib/comfycamp_web/controllers/home_controller.ex

@@ -2,14 +2,14 @@ defmodule ComfycampWeb.HomeController do
   use ComfycampWeb, :controller
 
   def index(conn, _params) do
-    render(conn, :index, page_title: "Главная")
+    render(conn, :index, page_title: "Главная", stylesheets: ["/assets/home.css"])
   end
 
   def mastodon(conn, _params) do
-    render(conn, :mastodon, page_title: "Mastodon")
+    render(conn, :mastodon, page_title: "Mastodon", stylesheets: ["/assets/home.css"])
   end
 
   def nextcloud(conn, _params) do
-    render(conn, :nextcloud, page_title: "Nextcloud")
+    render(conn, :nextcloud, page_title: "Nextcloud", stylesheets: ["/assets/home.css"])
   end
 end

lib/comfycamp_web/controllers/home_html.ex

@@ -7,7 +7,7 @@ defmodule ComfycampWeb.HomeHTML do
 
   def index(assigns) do
     ~H"""
-    <div>
+    <div class="home">
       <h1>Уютный домик</h1>
 
       <p>
@@ -103,27 +103,31 @@ defmodule ComfycampWeb.HomeHTML do
 
   def mastodon(assigns) do
     ~H"""
-    <h1>Mastodon</h1>
-    <a href="https://m.comfycamp.space" target="_blank">m.comfycamp.space</a>
-    <p>Удобный сервис для ведения микроблогов. Простыми словами, это альтернатива Twitter.</p>
-    <p>
-      Mastodon умеет подключаться к другим сервисам внутри сети Fediverse.
-      Так, например, вы можете общаться с пользователями Pleroma, Misskey, Friendica, Pixelfed,
-      даже если они находятся на других серверах.
-    </p>
+    <div class="home">
+      <h1>Mastodon</h1>
+      <a href="https://m.comfycamp.space" target="_blank">m.comfycamp.space</a>
+      <p>Удобный сервис для ведения микроблогов. Простыми словами, это альтернатива Twitter.</p>
+      <p>
+        Mastodon умеет подключаться к другим сервисам внутри сети Fediverse.
+        Так, например, вы можете общаться с пользователями Pleroma, Misskey, Friendica, Pixelfed,
+        даже если они находятся на других серверах.
+      </p>
+    </div>
     """
   end
 
   def nextcloud(assigns) do
     ~H"""
-    <h1>Nextcloud</h1>
-    <a href="https://nc.comfycamp.space" target="_blank">nc.comfycamp.space</a>
-    <p>
-      Облако, способное заменить десяток сервисов.
-      При помощи Nextcloud вы можете хранить файлы, вести календарь и список задач,
-      синхронизировать контакты, читать почту и новости...
-      А если этого будет мало, вам доступны десятки приложений на любой вкус и цвет.
-    </p>
+    <div class="home">
+      <h1>Nextcloud</h1>
+      <a href="https://nc.comfycamp.space" target="_blank">nc.comfycamp.space</a>
+      <p>
+        Облако, способное заменить десяток сервисов.
+        При помощи Nextcloud вы можете хранить файлы, вести календарь и список задач,
+        синхронизировать контакты, читать почту и новости...
+        А если этого будет мало, вам доступны десятки приложений на любой вкус и цвет.
+      </p>
+    </div>
     """
   end
 end

lib/comfycamp_web/controllers/notes_editor_controller.ex

@@ -9,7 +9,7 @@ defmodule ComfycampWeb.NotesEditorController do
 
     conn
     |> put_layout(html: :admin)
-    |> render(:index, page_title: "Заметки", notes: notes)
+    |> render(:index, page_title: "Заметки", notes: notes, stylesheets: ["/assets/admin.css"])
   end
 
   def new(conn, _params) do
@@ -17,7 +17,11 @@ defmodule ComfycampWeb.NotesEditorController do
 
     conn
     |> put_layout(html: :admin)
-    |> render(:new, page_title: "Новая заметка", changeset: changeset)
+    |> render(:new,
+      page_title: "Новая заметка",
+      changeset: changeset,
+      stylesheets: ["/assets/admin.css"]
+    )
   end
 
   def edit(conn, %{"id" => id}) do
@@ -27,7 +31,11 @@ defmodule ComfycampWeb.NotesEditorController do
 
     conn
     |> put_layout(html: :admin)
-    |> render(:edit, page_title: "Редактировать заметку", changeset: changeset)
+    |> render(:edit,
+      page_title: "Редактировать заметку",
+      changeset: changeset,
+      stylesheets: ["/assets/admin.css"]
+    )
   end
 
   def create(conn, %{"note" => note_params}) do
@@ -41,7 +49,11 @@ defmodule ComfycampWeb.NotesEditorController do
         conn
         |> put_flash(:error, "Ошибка при обновлении заметки.")
         |> put_layout(html: :admin)
-        |> render(:new, page_title: "Создать заметку", changeset: changeset)
+        |> render(:new,
+          page_title: "Создать заметку",
+          changeset: changeset,
+          stylesheets: ["/assets/admin.css"]
+        )
     end
   end
 
@@ -58,7 +70,11 @@ defmodule ComfycampWeb.NotesEditorController do
         conn
         |> put_flash(:error, "Ошибка при обновлении заметки.")
         |> put_layout(html: :admin)
-        |> render(:edit, page_title: "Редактировать заметку", changeset: changeset)
+        |> render(:edit,
+          page_title: "Редактировать заметку",
+          changeset: changeset,
+          stylesheets: ["/assets/admin.css"]
+        )
     end
   end
 
@@ -67,7 +83,7 @@ defmodule ComfycampWeb.NotesEditorController do
 
     conn
     |> put_layout(html: :admin)
-    |> render(:show, page_title: "Заметка", note: note)
+    |> render(:show, page_title: "Заметка", note: note, stylesheets: ["/assets/admin.css"])
   end
 
   def delete(conn, %{"id" => id}) do
@@ -83,7 +99,11 @@ defmodule ComfycampWeb.NotesEditorController do
         conn
         |> put_flash(:error, "Ошибка при удалении заметки.")
         |> put_layout(html: :admin)
-        |> render(:edit, page_title: "Редактировать заметку", changeset: changeset)
+        |> render(:edit,
+          page_title: "Редактировать заметку",
+          changeset: changeset,
+          stylesheets: ["/assets/admin.css"]
+        )
     end
   end
 end

lib/comfycamp_web/controllers/user_editor_controller.ex

@@ -7,7 +7,11 @@ defmodule ComfycampWeb.UserEditorController do
 
     conn
     |> put_layout(html: :admin)
-    |> render(:index, page_title: "Пользователи", users: users)
+    |> render(:index,
+      page_title: "Пользователи",
+      users: users,
+      stylesheets: ["/assets/admin.css"]
+    )
   end
 
   def show(conn, %{"id" => id}) do
@@ -15,6 +19,6 @@ defmodule ComfycampWeb.UserEditorController do
 
     conn
     |> put_layout(html: :admin)
-    |> render(:show, page_title: user.email, user: user)
+    |> render(:show, page_title: user.email, user: user, stylesheets: ["/assets/admin.css"])
   end
 end

mix.exs

@@ -70,9 +70,10 @@ defmodule Comfycamp.MixProject do
       "ecto.reset": ["ecto.drop", "ecto.setup"],
       test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"],
       "assets.setup": ["esbuild.install --if-missing"],
-      "assets.build": ["esbuild comfycamp"],
+      "assets.build": ["esbuild comfycamp", "esbuild css"],
       "assets.deploy": [
         "esbuild comfycamp --minify",
+        "esbuild css --minify",
         "phx.digest"
       ]
     ]