Some further improvements

pepicrft · Jun 22, 2024 · 79f7896 · 79f7896
1 parent e47850c
commit 79f7896
Show file tree

Hide file tree

Showing 20 changed files with 266 additions and 130 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,7 @@
 {
-  "editor.defaultFormatter": "saratravi.elixir-formatter",
+  "files.associations": {
+    "*.heex": "phoenix-heex",
+  },
   "emmet.includeLanguages": {
     "phoenix-heex": "html"
   },
@@ -10,7 +12,8 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[phoenix-heex]": {
-    "editor.defaultFormatter": "elixir-lsp.elixir-ls"
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "JakeBecker.elixir-ls"
   },
   "grammarly.selectors": [
     {

diff --git a/lib/pepicrft_web/components/core_components.ex b/lib/pepicrft_web/components/core_components.ex
@@ -21,23 +21,22 @@ defmodule PepicrftWeb.CoreComponents do
       end
 
     ~H"""
-    <div class="pp-Posts">
+    <ul class="pp-Posts">
       <%= for post <- assigns.posts() do %>
-        <% {:ok, time_ago_date} =
-          Elixir.Timex.Format.DateTime.Formatters.Relative.format(post.date, "{relative}") %>
+        <% date_as_string =
+          Timex.format!(post.date, "%Y.%m.%d", :strftime) %>
         <% post_attributes = %{href: post.slug} %>
 
-        <a {post_attributes} class="pp-PostItem_Link">
-          <div class="pp-PostItem">
-            <div class="pp-PostItem_Date"><%= time_ago_date %></div>
-            <h2 class="pp-PostItem_Title">
+        <li class="pp-PostItem">
+          <a class="pp-PostItem__Link" {post_attributes}>
+            <span class="pp-PostItem_Date"><%= date_as_string %></span>
+            <span class="pp-PostItem_Title">
               <%= post.title %>
-            </h2>
-            <p class="pp-PostItem_Description"><%= post.description %></p>
-          </div>
-        </a>
+            </span>
+          </a>
+        </li>
       <% end %>
-    </div>
+    </ul>
     """
   end
 

diff --git a/lib/pepicrft_web/components/layouts/root.html.heex b/lib/pepicrft_web/components/layouts/root.html.heex
@@ -27,29 +27,29 @@
 
   <body class="pp-Body">
     <nav class="pp-Navigation">
-      <a class="pp-Navigation_Title" href={~p"/"}>Pedro Piñera</a><div><%= raw "&nbsp;" %></div>
-      <a class="pp-Navigation_Link" href={~p"/about"}>About</a><div><%= raw if @request_path == ~p"/about", do: "⇢", else: "&nbsp;" %></div>
-      <a class="pp-Navigation_Link" href={~p"/projects"}>Projects</a><div><%= raw if @request_path == ~p"/projects", do: "⇢", else: "&nbsp;" %></div>
-      <a class="pp-Navigation_Link" href={~p"/mastodon"}>Mastodon</a><div><%= raw if @request_path == ~p"/mastodon", do: "⇢", else: "&nbsp;" %></div>
-      <a class="pp-Navigation_Link" href={~p"/camera"}>Camera</a><div><%= raw if @request_path == ~p"/camera", do: "⇢", else: "&nbsp;" %></div>
-      <a class="pp-Navigation_Link" href={~p"/now"}>Now</a><div><%= raw if @request_path == ~p"/now", do: "⇢", else: "&nbsp;" %></div>
+      <ul class="pp-Navigation_List">
+        <a class="pp-Navigation_List_Title" href={~p"/"}>Pedro Piñera</a><div><%= raw "&nbsp;" %></div>
+        <a class="pp-Navigation_List_Link" href={~p"/about"}>About</a><div><%= raw if @request_path == ~p"/about", do: "⇢", else: "&nbsp;" %></div>
+        <a class="pp-Navigation_List_Link" href={~p"/projects"}>Projects</a><div><%= raw if @request_path == ~p"/projects", do: "⇢", else: "&nbsp;" %></div>
+        <a class="pp-Navigation_List_Link" href={~p"/feed"}>Feed</a><div><%= raw if @request_path == ~p"/feed", do: "⇢", else: "&nbsp;" %></div>
+        <a class="pp-Navigation_List_Link" href={~p"/photos"}>Photos</a><div><%= raw if @request_path == ~p"/photos", do: "⇢", else: "&nbsp;" %></div>
+        <a class="pp-Navigation_List_Link" href={~p"/now"}>Now</a><div><%= raw if @request_path == ~p"/now", do: "⇢", else: "&nbsp;" %></div>
+        <a class="pp-Navigation_List_Link" href={~p"/blog/feed.xml"}>RSS</a><div>&nbsp;</div>
+      </ul>
+
+      <ul class="pp-Navigation_List">
+        <a class="pp-Navigation_List_Title" href={~p"/"}>On the internet</a><div><%= raw "&nbsp;" %></div>
+        <a class="pp-Navigation_List_Link" href={~p"/pdfs/CV.pdf"}>CV</a><div><%= raw "&nbsp;" %></div>
+        <a class="pp-Navigation_List_Link" href="https://mastodon.social/@pepicrft">Mastodon</a><div><%= raw "&nbsp;" %></div>
+        <a class="pp-Navigation_List_Link" href="https://x.com/pepicrft">X</a><div><%= raw "&nbsp;" %></div>
+        <a class="pp-Navigation_List_Link" href="https://github.com/pepicrft">GitHub</a><div><%= raw "&nbsp;" %></div>
+        <a class="pp-Navigation_List_Link" href="https://www.linkedin.com/in/pedro-piñera-buendia-9765a9125/">LinkedIn</a><div><%= raw "&nbsp;" %></div>
+        <a class="pp-Navigation_List_Link" href="https://codeberg.org/pepicrft/">Codeberg</a><div><%= raw "&nbsp;" %></div>
+      </ul>
     </nav>
 
     <main class="pp-Main">
       <%= @inner_content %>
-
-      <footer>
-        <nav class="pp-Footer_Navigation">
-          <a class="pp-Footer_Navigation-Item" href="https://x.com/pepicrft" target="_blank">X</a>
-          <a class="pp-Footer_Navigation-Item" href="https://mastodon.social/@pepicrft" target="_blank">Mastodon</a>
-          <a class="pp-Footer_Navigation-Item" href="https://codeberg.org/pepicrft" target="_blank">Codeberg</a>
-          <a class="pp-Footer_Navigation-Item" href="https://www.linkedin.com/in/pedro-piñera-buendia-9765a9125/" target="_blank">LinkedIn</a>
-          <a class="pp-Footer_Navigation-Item" href="https://github.com/pepicrft" target="_blank">GitHub</a>
-          <a class="pp-Footer_Navigation-Item" href={~p"/blog/feed.xml"} target="_blank">Feed</a>
-        </nav>
-      </footer>
     </main>
-
-
   </body>
 </html>
diff --git a/lib/pepicrft_web/controllers/blog_html/show.html.heex b/lib/pepicrft_web/controllers/blog_html/show.html.heex
@@ -1,12 +1,8 @@
-<% {:ok, time_ago_date} = Elixir.Timex.Format.DateTime.Formatters.Relative.format(@post.date, "{relative}") %>
-<p class="pp-Post_TimeAgo"><%= time_ago_date %></p>
+
+<% date_as_string = Timex.format!(@post.date, "%Y.%m.%d", :strftime) %>
 <h1 class="pp-Post_Title"><%= @post.title %></h1>
+<p class="pp-Post_TimeAgo"><%= date_as_string %></p>
 
 <div class="pp-Post_Body">
   <%= raw @post.body %>
 </div>
-
-
-<div>
-  <a class="pp-Blog_About-Title" href={~p"/about"}>About Pedro Piñera</a>
-</div>
diff --git a/lib/pepicrft_web/controllers/home_controller.ex b/lib/pepicrft_web/controllers/home_controller.ex
@@ -13,12 +13,17 @@ defmodule PepicrftWeb.HomeController do
     render(conn, :projects)
   end
 
-  def mastodon(conn, _params) do
+  def feed(conn, _params) do
     %{body: statuses} = Req.get!("https://masto.pepicrft.me/api/v1/accounts/112545800553693985/statuses")
-    render(conn, :mastodon, statuses: statuses)
+    render(conn, :feed, statuses: statuses)
   end
 
   def photos(conn, _params) do
-    render(conn, :photos)
+    %{body: statuses} = Req.get!("https://camera.pepicrft.me/api/pixelfed/v1/accounts/702760890334240769/statuses?only_media=true&min_id=1")
+    render(conn, :photos, statuses: statuses)
+  end
+
+  def now(conn, _params) do
+    render(conn, :now)
   end
 end
diff --git a/lib/pepicrft_web/controllers/home_html/about.html.heex b/lib/pepicrft_web/controllers/home_html/about.html.heex
@@ -1,5 +1,5 @@
 <h1 id="about">
-  <a href="#about">About</a>
+  <a href="#about">About 🧑🏻‍💻</a>
 </h1>
 
 <p>

diff --git a/lib/pepicrft_web/controllers/home_html/feed.html.heex b/lib/pepicrft_web/controllers/home_html/feed.html.heex
@@ -0,0 +1,17 @@
+<h1 id="feed">
+  <a href="#feed">Feed 📋</a>
+</h1>
+
+<section class="pp-Feed-List">
+  <%= for status <- @statuses do %>
+    <% content = status["content"] %>
+    <% url = status["url"] %>
+    <%= if String.trim(content) != "" do %>
+      <article class="pp-Feed-List_Post">
+        <a class="pp-Feed-List_Post_Link" href={url}>Link</a>
+        <%= raw content %>
+      </article>
+      <hr>
+    <% end %>
+  <% end  %>
+</section>
diff --git a/lib/pepicrft_web/controllers/home_html/index.html.heex b/lib/pepicrft_web/controllers/home_html/index.html.heex
@@ -1 +1,4 @@
+<h1 id="writing">
+  <a href="#writing">Writing ✏️</a>
+</h1>
 <.posts_component posts={Pepicrft.Blog.all_posts()}/>
diff --git a/lib/pepicrft_web/controllers/home_html/mastodon.html.heex b/lib/pepicrft_web/controllers/home_html/mastodon.html.heex
diff --git a/lib/pepicrft_web/controllers/home_html/now.html.heex b/lib/pepicrft_web/controllers/home_html/now.html.heex
@@ -0,0 +1,37 @@
+<h1 id="now">
+  <a href="#now">Now</a>
+</h1>
+
+<p>
+The following is a list of things that I'm doing, thinking about, or working on right now.
+</p>
+
+<h2 id="mental-health">
+  <a href="#mental-health">Mental health</a>
+</h2>
+
+<p>I'm working on better understanding my emotions and reverting some anxiety-inducing habits that I've developed over the years.</p>
+
+
+<h2 id="work">
+  <a href="#work">Work</a>
+</h2>
+<p>
+I'm learning a lot about business while trying to build a company upon the open-source work that I've been doing for the past few years. It's a whole new world of ideas of concepts for me, but I'm quite liking it. It reminds me of my childhood working at my family cafe, but at a different scale.
+</p>
+
+
+<h2 id="the-web-platform">
+  <a href="#the-web-platform">The web platform</a>
+</h2>
+<p>
+I haven't worked much with the web in the past, and whenever I did, it was mostly to build my personal website by using a template, a static site generator, and working with many abstractions (e.g. TailwindCSS). This time, I'm playing with the web in its most raw form–writing HTML, CSS, and JavaScript from scratch. I'm getting familiar with the semantics of HTML elements, as well as the common CSS properties.
+</p>
+
+<h2 id="elixir">
+  <a href="#elixir">Elixir</a>
+</h2>
+
+<p>
+As part of my work on Tuist, I'm learning a lot about Elixir, and the more I learn, the more I like it. I'm fascinated by the language's simplicity and the way it leverages the Erlang VM to build robust and fault-tolerant systems. I'm also learning about OTP, the framework that Elixir provides to build distributed systems.
+</p>
diff --git a/lib/pepicrft_web/controllers/home_html/photos.html.heex b/lib/pepicrft_web/controllers/home_html/photos.html.heex
@@ -1 +1,15 @@
-<h1>Photos</h1>
+<h1 id="photos">
+  <a href="#photos">Photos 📸</a>
+</h1>
+
+<section>
+  <%= for status <- @statuses do %>
+    <% %{"url" => url, "content" => content, "media_attachments" => [ %{"url" => image_url, "description" => image_alt} | _]} = status %>
+    <article>
+      <h2>
+        <a href={url}><%= content %></a>
+      </h2>
+      <img class="pp-Photos_Image" src={image_url} alt={image_alt}/>
+    </article>
+  <% end %>
+</section>
diff --git a/lib/pepicrft_web/controllers/home_html/projects.html.heex b/lib/pepicrft_web/controllers/home_html/projects.html.heex
@@ -1,3 +1,32 @@
 <h1 id="projects">
-  <a href="#projects">Projects</a>
+  <a href="#projects">Projects 📦</a>
 </h1>
+
+<p>
+The following sections describe the projects that I created and/or that I contribute/d to.
+</p>
+
+<h2 id="tuist">
+  <a href="#tuist">Tuist</a>
+</h2>
+
+<p>
+<a href="https://tuist.io">Tuist</a> is a Swifty toolchain to build better Apple apps faster. I created it in 2017, and we are currently working on building a long-term business around it by
+</p>
+
+<h2 id="xcodeproj">
+  <a href="#xcodeproj">XcodeProj</a>
+</h2>
+
+<p>
+<a href="https://github.com/tuist/xcodeproj">XcodeProj</a> is an open-source Swift package to read, update, and write Xcode projects. I created it in 2017 as part of Tuist, and it has become a popular library in the Swift community.
+</p>
+
+
+<h2 id="shopify-cli">
+  <a href="#shopify-cli">Shopify CLI</a>
+</h2>
+
+<p>
+<a href="https://github.com/shopify/cli">Shopify CLI</a> I overhauled the tech stack of the Shopify CLI, which developers use to build for the platform, to align it with the platform's technologies.
+</p>
diff --git a/lib/pepicrft_web/router.ex b/lib/pepicrft_web/router.ex
@@ -24,8 +24,9 @@ defmodule PepicrftWeb.Router do
     get "/", HomeController, :index
     get "/about", HomeController, :about
     get "/projects", HomeController, :projects
-    get "/mastodon", HomeController, :mastodon
+    get "/feed", HomeController, :feed
     get "/photos", HomeController, :photos
+    get "/now", HomeController, :now
     get "/blog/:year/:month/:day/:title", BlogController, :show
 
     for page <- Pepicrft.Pages.all_pages() do

diff --git a/priv/static/styles/app.css b/priv/static/styles/app.css
@@ -2,4 +2,5 @@
 @import "./base.css";
 @import "./layout.css";
 @import "./blog.css";
-@import "./mastodon.css";
+@import "./feed.css";
+@import "./photos.css"
diff --git a/priv/static/styles/base.css b/priv/static/styles/base.css
@@ -23,24 +23,45 @@ a {
 }
 
 h1 {
-  margin-top: var(--size-2);
+  margin-top: 0px;
   margin-bottom: var(--size-2);
   font-size: var(--font-size-1);
-  font-weight: var(--font-weight-7);
+  font-weight: var(--font-weight-6);
+
+  & a {
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }
 
 h2 {
   margin-top: var(--size-8);
-  margin-bottom: var(--size-6);
+  margin-bottom: var(--size-3);
   font-size: var(--font-size-1);
-  font-weight: var(--font-weight-6)
+  font-weight: var(--font-weight-6);
+
+  & a {
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }
 
 h3 {
-  margin-top: var(--size-6);
-  margin-bottom: var(--size-6);
+  margin-top: var(--size-3);
+  margin-bottom: var(--size-3);
   font-size: var(--font-size-1);
-  font-weight: var(--font-weight-5)
+  font-weight: var(--font-weight-5);
+
+  & a {
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }
 
 h4 {