refactor(home): create service component, embed html template

assets/css/app.css

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

assets/css/home.css

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

lib/comfycamp_web.ex

@@ -89,6 +89,7 @@ defmodule ComfycampWeb do
       import ComfycampWeb.Flash
       import ComfycampWeb.Gettext
       import ComfycampWeb.NavBar
+      import ComfycampWeb.Home
 
       # Shortcut for generating JS commands
       alias Phoenix.LiveView.JS

lib/comfycamp_web/components/home.ex

@@ -0,0 +1,31 @@
+defmodule ComfycampWeb.Home do
+  @moduledoc """
+  Components for the home page.
+  """
+  use Phoenix.Component
+  import ComfycampWeb.Icons
+
+  @doc """
+  A component representing one service, like mastodon or nextcloud.
+  """
+  attr :name, :string, required: true
+  attr :domain, :string, required: true
+  attr :description, :string, required: true
+  attr :enable_link, :boolean, required: false, default: true
+
+  def service(assigns) do
+    ~H"""
+    <div class="service">
+      <h3><%= @name %></h3>
+      <%= if @enable_link do %>
+        <a class="link" href={"https://" <> @domain} target="_blank">
+          <%= @domain %> <.arrow_top_right_on_square_icon />
+        </a>
+      <% else %>
+        <span class="link"><%= @domain %></span>
+      <% end %>
+      <p><%= @description %></p>
+    </div>
+    """
+  end
+end

lib/comfycamp_web/components/icons/arrow_top_right_on_square_icon.svg.heex

@@ -0,0 +1,13 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke-width="1.5"
+  stroke="currentColor"
+>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
+  />
+</svg>

lib/comfycamp_web/controllers/home_controller.ex

@@ -1,4 +1,4 @@
-defmodule ComfycampWeb.MainController do
+defmodule ComfycampWeb.HomeController do
   use ComfycampWeb, :controller
 
   def index(conn, _params) do

lib/comfycamp_web/controllers/home_html.ex

@@ -0,0 +1,70 @@
+defmodule ComfycampWeb.HomeHTML do
+  @moduledoc """
+  This module contains pages rendered by HomeController.
+  """
+  use ComfycampWeb, :html
+
+  def index(assigns) do
+    ~H"""
+    <div>
+      <h1>Уютный домик</h1>
+
+      <p>
+        У меня есть несколько проектов, запущенных на домашнем сервере.
+        Я буду рад, если они будут полезны другим людям.
+      </p>
+
+      <p>
+        Создайте аккаунт на этом сайте, чтобы получить доступ к остальным сервисам.
+      </p>
+
+      <p>
+        Не стоит ожидать большой надёжности, однако я прикладываю все усилия,
+        чтобы сервисы были доступны 24/7.
+      </p>
+
+      <p><i>- Иван, администратор comfycamp.space</i></p>
+
+      <h2>Доступные сервисы</h2>
+
+      <.service
+        name="Mastodon"
+        domain="m.comfycamp.space"
+        description="Микроблоги с поддержкой fediverse."
+      />
+
+      <.service
+        name="Nextcloud"
+        domain="nc.comfycamp.space"
+        description="Облако, календарь, задачи."
+      />
+
+      <.service
+        name="Forgejo"
+        domain="git.comfycamp.space"
+        description="Хостинг для git-проектов."
+      />
+
+      <.service
+        name="XMPP"
+        domain="xmpp.comfycamp.space"
+        description="Проверенный временем протокол для обмена сообщениями."
+        enable_link={false}
+      />
+
+      <.service
+        name="Matrix"
+        domain="matrix.comfycamp.space"
+        description="Современный протокол для общения."
+        enable_link={false}
+      />
+
+      <.service
+        name="Fresh RSS"
+        domain="freshrss.comfycamp.space"
+        description="Сервис для чтения RSS лент."
+      />
+    </div>
+    """
+  end
+end

lib/comfycamp_web/controllers/main_html.ex

@@ -1,8 +0,0 @@
-defmodule ComfycampWeb.MainHTML do
-  @moduledoc """
-  This module contains pages rendered by ServicesController.
-  """
-  use ComfycampWeb, :html
-
-  embed_templates "main_html/*"
-end

lib/comfycamp_web/controllers/main_html/index.html.heex

@@ -1,58 +0,0 @@
-<div>
-  <h1>Уютный домик</h1>
-
-  <p>
-    У меня есть несколько проектов, запущенных на домашнем сервере.
-    Я буду рад, если они будут полезны другим людям.
-  </p>
-
-  <p>
-    Создайте аккаунт на этом сайте, чтобы получить доступ к остальным сервисам.
-  </p>
-
-  <p>
-    Не стоит ожидать большой надёжности, однако я прикладываю все усилия,
-    чтобы сервисы были доступны 24/7.
-  </p>
-
-  <p><i>- Иван, администратор comfycamp.space</i></p>
-
-  <h2>Доступные сервисы</h2>
-
-  <h3>Mastodon</h3>
-  <a href="https://m.comfycamp.space" target="_blank">m.comfycamp.space</a>
-  <p>Микроблоги с поддержкой fediverse.</p>
-
-  <h3>Nextcloud</h3>
-  <a href="https://nc.comfycamp.space" target="_blank">nc.comfycamp.space</a>
-  <p>Облако, календарь, задачи.</p>
-
-  <h3>Forgejo</h3>
-  <a href="https://git.comfycamp.space" target="_blank">git.comfycamp.space</a>
-  <p>Хостинг для git-проектов.</p>
-
-  <h3>XMPP</h3>
-  <a>xmpp.comfycamp.space</a>
-  <p>
-    Проверенный временем протокол для обмена сообщениями.
-  </p>
-  <p>
-    Для входа можете использовать dino (linux) или conversations (android).
-  </p>
-
-  <h3>Matrix</h3>
-  <a>matrix.comfycamp.space</a>
-  <p>
-    Современный протокол для общения.
-  </p>
-  <p>
-    Для входа можете использовать element (android, linux) или nheko (linux).
-  </p>
-
-  <h3>Fresh RSS</h3>
-  <a href="https://freshrss.comfycamp.space" target="_blank">freshrss.comfycamp.space</a>
-  <p>Сервис для чтения RSS лент.</p>
-
-  <h2>Список задач</h2>
-  <p><input type="checkbox" disabled />Вход через один аккаунт на все сервисы.</p>
-</div>

lib/comfycamp_web/router.ex

@@ -20,7 +20,7 @@ defmodule ComfycampWeb.Router do
   scope "/", ComfycampWeb do
     pipe_through :browser
 
-    get "/", MainController, :index
+    get "/", HomeController, :index
     resources "/notes", NotesController, only: [:index, :show]
     get "/cinema", CinemaController, :index
   end