diff --git a/.gitignore b/.gitignore index dc9e0de..067740d 100644 --- a/.gitignore +++ b/.gitignore @@ -36,3 +36,5 @@ npm-debug.log /assets/node_modules/ config/dev.secret.exs + +rel diff --git a/assets/app.css b/assets/app.css new file mode 100644 index 0000000..dcc6d00 --- /dev/null +++ b/assets/app.css @@ -0,0 +1,89 @@ +:root { + --color: #fff; + --bgcolor: #201; + --box-padding: 12px; +} + +html { + color: var(--color); + background-color: var(--bgcolor); + background-image: linear-gradient(#000, #201 50%); + font: + normal small/1.5 apple-system, + system-ui, + BlinkMacSystemFont, + Segoe UI, + Roboto, + Helvetica Neue, + Arial, + sans-serif; +} + +body { + margin: 0; +} + +h1, +h2, +h3 { + line-height: 1.1; + font-family: serif; +} + +.skiplink { + position: absolute; + top: -5em; + transition: top 0.4s ease-out; + padding: 0.25em 0.5em; + + &:focus { + top: 1em; + } +} + +main { + margin: 0 auto; + max-width: 33em; +} + +.flx { + display: flex; + justify-content: space-between; + align-items: center; +} + +.tree { + color: crimson; + align-items: center; + justify-content: center; + margin: 1em auto; + display: flex; + flex-direction: column; + gap: 0.75em; + + > * { + padding: 1em 2em; + border-radius: 5px; + background-color: rgba(128, 128, 128, 0.1); + } + + > :nth-child(even) { + text-align: right; + } +} + +.landing { + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #000; + padding: 3em; + box-sizing: border-box; +} + +a { + color: #fff; + text-decoration: none; +} diff --git a/assets/js/app.js b/assets/js/app.js index ced0434..8fc7e57 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -16,7 +16,7 @@ // // Include phoenix_html to handle method=PUT/DELETE in forms and buttons. -import "phoenix_html" +// import "phoenix_html" // Establish Phoenix Socket and LiveView configuration. // import {Socket} from "phoenix" // import {LiveSocket} from "phoenix_live_view" @@ -42,3 +42,8 @@ import "phoenix_html" // >> liveSocket.disableLatencySim() // window.liveSocket = liveSocket +import "../app.css"; + +import copyToClipboard from "./copy-to-clipboard.js"; + +copyToClipboard(); diff --git a/assets/js/copy-to-clipboard.js b/assets/js/copy-to-clipboard.js new file mode 100644 index 0000000..fa5d2db --- /dev/null +++ b/assets/js/copy-to-clipboard.js @@ -0,0 +1,14 @@ +export default () => { + const codeblocks = document.querySelectorAll("pre>code"); + + for (const b of codeblocks) { + const button = document.createElement("button"); + button.innerHTML = "Kopiera"; + button.addEventListener("click", function ({target}) { + const text = target.previousSibling.innerHTML; + navigator.clipboard.writeText(text); + }) + b.parentNode.appendChild(button); + } +} + diff --git a/config/config.exs b/config/config.exs index f99df9f..35d4086 100644 --- a/config/config.exs +++ b/config/config.exs @@ -26,7 +26,7 @@ config :esbuild, version: "0.17.11", mse25: [ args: - ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*), + ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/* --external:/css/*), cd: Path.expand("../assets", __DIR__), env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)} ] diff --git a/lib/mse25/directus.ex b/lib/mse25/directus.ex index c5c1bbd..b62c4e8 100644 --- a/lib/mse25/directus.ex +++ b/lib/mse25/directus.ex @@ -3,7 +3,7 @@ defmodule Mse25.Directus do get_item(:articles, slug) end - def get_articles(options \\ []) do + def get_articles!(options \\ []) do params = [ "sort=-pubDate", @@ -18,7 +18,7 @@ defmodule Mse25.Directus do "," ) ] - |> query_params_string(options) + |> query_params_string(options, :articles) get("/articles?" <> params) end @@ -41,18 +41,16 @@ defmodule Mse25.Directus do ) end - def get_events(options \\ []) do + def get_events!(options \\ []) do params = [ "sort=-started_at", - # "filter={\"upcoming\":{\"_eq\":true}}", "fields=" <> Enum.join( [ - "started_at", - "ended_at", "title", "lead", + "slug", "poster.filename_download", "poster.width", "poster.height", @@ -62,7 +60,7 @@ defmodule Mse25.Directus do "," ) ] - |> query_params_string(options) + |> query_params_string(options, :events) get("/events?" <> params) end @@ -71,7 +69,7 @@ defmodule Mse25.Directus do get_item(:links, slug) end - def get_links(options \\ []) do + def get_links!(options \\ []) do params = [ "sort=-pubDate", @@ -89,7 +87,7 @@ defmodule Mse25.Directus do "," ) ] - |> query_params_string(options) + |> query_params_string(options, :links) get("/links?" <> params) end @@ -122,7 +120,15 @@ defmodule Mse25.Directus do defp payload(%Req.Response{status: 401}), do: {:forbidden, "Invalid Directus credentials"} - defp query_params_string(params, options), + defp query_params_string(params, options, :events), + do: + params + |> upcoming?(options) + |> limit?(options) + |> page?(options) + |> Enum.join("&") + + defp query_params_string(params, options, _), do: params |> limit?(options) @@ -139,7 +145,14 @@ defmodule Mse25.Directus do defp page?(params, opts) do case opts[:page] do nil -> params - pg = _ -> ["page=" <> to_string(pg) | params] + pg -> ["page=" <> to_string(pg) | params] + end + end + + defp upcoming?(params, opts) do + case opts[:upcoming] do + true -> ["filter[upcoming][_eq]=1" | params] + _ -> ["filter[upcoming][_eq]=0" | params] end end end diff --git a/lib/mse25_web/components/layouts/root.html.heex b/lib/mse25_web/components/layouts/root.html.heex index 4ef074f..6614630 100644 --- a/lib/mse25_web/components/layouts/root.html.heex +++ b/lib/mse25_web/components/layouts/root.html.heex @@ -1,15 +1,17 @@ - - - + + + <.live_title suffix=" · Phoenix Framework"> <%= assigns[:page_title] || "Mse25" %> - + <%= @inner_content %> + diff --git a/lib/mse25_web/controllers/item_controller.ex b/lib/mse25_web/controllers/item_controller.ex index 26532c6..19773e3 100644 --- a/lib/mse25_web/controllers/item_controller.ex +++ b/lib/mse25_web/controllers/item_controller.ex @@ -54,19 +54,23 @@ defmodule Mse25Web.ItemController do heading: heading, contents: Earmark.as_html!(contents), published_at: published_at, - updated_at: updated_at + updated_at: updated_at, + year: 2024 ] end defp assigns(:event, %{ "title" => heading, "contents" => contents, - "started_at" => published_at + "started_at" => published_at, + "lead" => lead }) do [ heading: heading, contents: Earmark.as_html!(contents), - published_at: published_at + published_at: published_at, + lead: lead, + year: 2024 ] end diff --git a/lib/mse25_web/controllers/page_controller.ex b/lib/mse25_web/controllers/page_controller.ex index 7f4bba2..5456de5 100644 --- a/lib/mse25_web/controllers/page_controller.ex +++ b/lib/mse25_web/controllers/page_controller.ex @@ -1,9 +1,20 @@ defmodule Mse25Web.PageController do use Mse25Web, :controller + alias Logger.Backends.Console + alias Mse25.Directus + def home(conn, _params) do - # The home page is often custom made, - # so skip the default app layout. - render(conn, :home, layout: false) + [most_recent_article, older_article] = Directus.get_articles!(limit: 2) + recent_event = Directus.get_events!(limit: 1) + upcoming_events = Directus.get_events!(limit: 1, upcoming: true) + + render(conn, :home, + layout: false, + recent_article: most_recent_article, + older_article: older_article, + recent_event: recent_event, + upcoming: upcoming_events + ) end end diff --git a/lib/mse25_web/controllers/page_html/home.html.heex b/lib/mse25_web/controllers/page_html/home.html.heex index 107bfd3..28cc2af 100644 --- a/lib/mse25_web/controllers/page_html/home.html.heex +++ b/lib/mse25_web/controllers/page_html/home.html.heex @@ -1,223 +1,55 @@ - -<.flash_group flash={@flash} /> - -
-
- -

- Phoenix Framework - - v<%= Application.spec(:phoenix, :vsn) %> - -

-

- Peace of mind from prototype to production. -

-

- Build rich, interactive web applications quickly, with less code and fewer moving parts. Join our growing community of developers using Phoenix to craft APIs, HTML5 apps and more, for fun or at scale. -

-
-
-
- - - - - - Guides & Docs - - - - - - - - Source Code - - - - - - - - Changelog - - -
-
- - - - - -
+
+ Anders Englöf Ytterström +
+
+ Senast skrivet (<%= @recent_article["pubDate"] %>):
+ @recent_article["slug"]}> + <%= @recent_article["title"] %> + +
+
+ Dessförinnan (<%= @older_article["pubDate"] %>):
+ @older_article["slug"]}> + <%= @older_article["title"] %> + +
+ + <%= for event <- @recent_event do %> + + <% end %> + <%= for event <- @upcoming do %> + + <% end %> +
+ Tidslinjen: Evenemang +
+
+ Värt att uppmärksamma: + + Delningar + +
+ + +
-
+ diff --git a/priv/static/images/aey.svg b/priv/static/images/aey.svg new file mode 100644 index 0000000..d3eb132 --- /dev/null +++ b/priv/static/images/aey.svg @@ -0,0 +1 @@ +