Skip to content

Commit 8c7764a

Browse files
tomkonidastomkonidas
authored
Redesign landing page (#381)
* Redesign header/footer * Homepage redesign * Fix app search page
1 parent ab21f14 commit 8c7764a

File tree

14 files changed

+665
-39
lines changed

14 files changed

+665
-39
lines changed

‎assets/css/app.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,44 @@
11
@import "tailwindcss";
22
/* This file is for your main application CSS */
3+
4+
@theme {
5+
--color-gold-100: #fff8e1;
6+
--color-gold-200: #ffecb3;
7+
--color-gold-300: #ffe082;
8+
--color-gold-400: #ffd54f;
9+
--color-gold-500: #ffca28;
10+
--color-gold-600: #ffc107;
11+
--color-gold-700: #ffb300;
12+
--color-gold-800: #ffa000;
13+
--color-gold-900: #ff8f00;
14+
15+
--color-silver-100: #f4f4f5;
16+
--color-silver-200: #e4e4e7;
17+
--color-silver-300: #d4d4d8;
18+
--color-silver-400: #a1a1aa;
19+
--color-silver-500: #9ca3af;
20+
--color-silver-600: #71717a;
21+
--color-silver-700: #52525b;
22+
--color-silver-800: #3f3f46;
23+
--color-silver-900: #27272a;
24+
25+
--color-bronze-100: #fef1e8;
26+
--color-bronze-200: #f9dbc5;
27+
--color-bronze-300: #f4c4a2;
28+
--color-bronze-400: #efae80;
29+
--color-bronze-500: #cd7f32;
30+
--color-bronze-600: #b87333;
31+
--color-bronze-700: #a65e2e;
32+
--color-bronze-800: #8c4c25;
33+
--color-bronze-900: #703b1c;
34+
35+
--color-broken-100: #fee2e2;
36+
--color-broken-200: #fecaca;
37+
--color-broken-300: #fca5a5;
38+
--color-broken-400: #f87171;
39+
--color-broken-500: #ef4444;
40+
--color-broken-600: #dc2626;
41+
--color-broken-700: #b91c1c;
42+
--color-broken-800: #991b1b;
43+
--color-broken-900: #7f1d1d;
44+
}

‎lib/plexus/apps.ex‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,18 @@ defmodule Plexus.Apps do
165165
end)
166166
end
167167

168+
@spec apps_available_count :: pos_integer()
169+
def apps_available_count do
170+
Repo.aggregate(App, :count)
171+
end
172+
173+
@spec apps_count_since(DateTime.t()) :: pos_integer()
174+
def apps_count_since(datetime) do
175+
App
176+
|> where([app], app.inserted_at >= ^datetime)
177+
|> Repo.aggregate(:count)
178+
end
179+
168180
@spec subscribe :: :ok
169181
def subscribe do
170182
Phoenix.PubSub.subscribe(Plexus.PubSub, "apps")

‎lib/plexus/ratings.ex‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,74 @@ defmodule Plexus.Ratings do
7474
|> broadcast(:rating_deleted)
7575
end
7676

77+
@spec ratings_submitted_count :: pos_integer()
78+
def ratings_submitted_count do
79+
Repo.aggregate(Rating, :count)
80+
end
81+
82+
@spec ratings_count_since(DateTime.t()) :: pos_integer()
83+
def ratings_count_since(datetime) do
84+
Rating
85+
|> where([rating], rating.inserted_at >= ^datetime)
86+
|> Repo.aggregate(:count)
87+
end
88+
89+
def gold_de_googled_count do
90+
Rating
91+
|> where([rating], rating.score >= 4)
92+
|> where([rating], rating.rating_type == :native)
93+
|> Repo.aggregate(:count)
94+
end
95+
96+
def gold_micro_g_count do
97+
Rating
98+
|> where([rating], rating.score >= 4)
99+
|> where([rating], rating.rating_type == :micro_g)
100+
|> Repo.aggregate(:count)
101+
end
102+
103+
def silver_de_googled_count do
104+
Rating
105+
|> where([rating], rating.score >= 3 and rating.score < 4)
106+
|> where([rating], rating.rating_type == :native)
107+
|> Repo.aggregate(:count)
108+
end
109+
110+
def silver_micro_g_count do
111+
Rating
112+
|> where([rating], rating.score >= 3 and rating.score < 4)
113+
|> where([rating], rating.rating_type == :micro_g)
114+
|> Repo.aggregate(:count)
115+
end
116+
117+
def bronze_de_googled_count do
118+
Rating
119+
|> where([rating], rating.score >= 2 and rating.score < 3)
120+
|> where([rating], rating.rating_type == :native)
121+
|> Repo.aggregate(:count)
122+
end
123+
124+
def bronze_micro_g_count do
125+
Rating
126+
|> where([rating], rating.score >= 2 and rating.score < 3)
127+
|> where([rating], rating.rating_type == :micro_g)
128+
|> Repo.aggregate(:count)
129+
end
130+
131+
def broken_de_googled_count do
132+
Rating
133+
|> where([rating], rating.score < 2)
134+
|> where([rating], rating.rating_type == :native)
135+
|> Repo.aggregate(:count)
136+
end
137+
138+
def broken_micro_g_count do
139+
Rating
140+
|> where([rating], rating.score < 2)
141+
|> where([rating], rating.rating_type == :micro_g)
142+
|> Repo.aggregate(:count)
143+
end
144+
77145
defp broadcast({:error, _reason} = error, _event), do: error
78146

79147
defp broadcast({:ok, rating}, event) do

‎lib/plexus_web/components/core_components.ex‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,12 @@ defmodule PlexusWeb.CoreComponents do
1515
Icons are provided by [heroicons](https://heroicons.com). See `icon/1` for usage.
1616
"""
1717
use Phoenix.Component
18+
19+
use Phoenix.VerifiedRoutes,
20+
endpoint: PlexusWeb.Endpoint,
21+
router: PlexusWeb.Router,
22+
statics: PlexusWeb.static_paths()
23+
1824
use Gettext, backend: PlexusWeb.Gettext
1925

2026
alias Phoenix.LiveView.JS
@@ -642,15 +648,16 @@ defmodule PlexusWeb.CoreComponents do
642648
)
643649

644650
~H"""
645-
<div class="flex">
646-
<div class="aspect-h-1 aspect-w-1 w-24 h-24 bg-white overflow-hidden">
651+
<div class="flex bg-gray-100">
652+
<div class="aspect-h-1 aspect-w-1 w-24 h-24 overflow-hidden">
647653
<img
648654
src={icon_url(@app)}
649655
alt={@app.name <> " Icon"}
656+
loading="lazy"
650657
class="h-full w-full object-cover object-center"
651658
/>
652659
</div>
653-
<div class="flex-1 flex items-center justify-between bg-white truncate">
660+
<div class="flex-1 flex items-center justify-between truncate">
654661
<div class="flex-1 px-4 py-2 text-md leading-5 truncate">
655662
<div class="truncate text-gray-900 font-semibold transition ease-in-out duration-150">
656663
{@app.name}
@@ -663,32 +670,32 @@ defmodule PlexusWeb.CoreComponents do
663670
</p>
664671
</div>
665672
</div>
666-
<div class="flex flex-col justify-between bg-white">
673+
<div class="flex flex-col justify-between bg-gray-900">
667674
<div
668675
title="DeGoogled Score"
669676
class={[
670677
"flex flex-1 items-center justify-center w-24 text-white text-sm leading-5 font-medium",
671-
@native_level == :unrated && "bg-gray-700",
672-
@native_level == :borked && "bg-red-800",
673-
@native_level == :bronze && "bg-amber-800",
674-
@native_level == :silver && "bg-slate-300 text-black",
675-
@native_level == :gold && "bg-amber-200 black"
678+
@native_level == :unrated && "bg-linear-45 from-indigo-500 to-indigo-900",
679+
@native_level == :borked && "bg-linear-45 from-broken-500 to-broken-900",
680+
@native_level == :bronze && "bg-linear-45 from-bronze-400 to-bronze-800",
681+
@native_level == :silver && "bg-linear-45 from-silver-300 to-silver-700",
682+
@native_level == :gold && "bg-linear-45 from-gold-500 to-gold-900"
676683
]}
677684
>
678-
{@app.scores.native.numerator}
685+
<img src={~p"/images/de_googled.svg"} width="24" />
679686
</div>
680687
<div
681688
title="MicroG Score"
682689
class={[
683690
"flex flex-1 items-center justify-center w-24 text-white text-sm leading-5 font-medium",
684-
@micro_g_level == :unrated && "bg-gray-700",
685-
@micro_g_level == :borked && "bg-red-800",
686-
@micro_g_level == :bronze && "bg-amber-800",
687-
@micro_g_level == :silver && "bg-slate-300 text-black",
688-
@micro_g_level == :gold && "bg-amber-200 text-black"
691+
@micro_g_level == :unrated && "bg-linear-45 from-indigo-500 to-indigo-900",
692+
@micro_g_level == :borked && "bg-linear-45 from-broken-500 to-broken-900",
693+
@micro_g_level == :bronze && "bg-linear-45 from-bronze-400 to-bronze-800",
694+
@micro_g_level == :silver && "bg-linear-45 from-silver-300 to-silver-700",
695+
@micro_g_level == :gold && "bg-linear-45 from-gold-500 to-gold-900"
689696
]}
690697
>
691-
&mu;{@app.scores.micro_g.numerator}
698+
<img src={~p"/images/micro_g.svg"} width="24" />
692699
</div>
693700
</div>
694701
</div>

‎lib/plexus_web/components/layouts/app.html.heex‎

Lines changed: 60 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,80 @@
1-
<header class="bg-white px-4 sm:px-6 lg:px-8">
2-
<div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm">
1+
<header class="bg-white py-2 px-4 sm:px-6 lg:px-8">
2+
<div class="flex items-center justify-between py-4 text-sm">
33
<div class="flex items-center gap-4">
44
<a href="/" class="flex items-center">
5-
<img src={~p"/images/logo.svg"} class="bg-zinc-900 p-2" width="48" />
6-
<p class="text-zink-900 px-2 font-semibold leading-10 text-xl">
5+
<img src={~p"/images/logo.svg"} class="bg-gray-900 p-2" width="48" />
6+
<p class="text-gray-900 px-2 font-semibold leading-10 text-xl">
77
Plexus
88
</p>
99
</a>
1010
</div>
11-
<div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">
12-
<a href="https://github.com/techlore/plexus" class="hover:text-zinc-700">
11+
<div class="flex items-center gap-4 font-semibold leading-6 text-gray-900">
12+
<a href="https://github.com/techlore/plexus" class="hover:text-gray-700">
1313
GitHub
1414
</a>
1515
<a
1616
href="https://github.com/techlore/Plexus-app?tab=readme-ov-file#download"
17-
class="rounded-lg bg-zinc-100 px-2 py-1 hover:bg-zinc-200/80"
17+
class="text-gray-100 bg-gray-900 rounded-md p-2 hover:bg-gray-900/90"
1818
>
19-
Download App
19+
Download
2020
</a>
2121
</div>
2222
</div>
2323
</header>
24-
<main class="bg-slate-100 px-4 py-20 sm:px-6 lg:px-8">
24+
<main class="bg-white px-4 py-20 sm:px-6 lg:px-8">
2525
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
2626
<.flash_group flash={@flash} />
2727
{@inner_content}
2828
</div>
2929
</main>
30+
<footer class="bg-gray-900">
31+
<div class="mx-auto max-w-7xl overflow-hidden px-6 py-20 sm:py-24 lg:px-8">
32+
<nav
33+
class="-mb-6 flex flex-wrap justify-center gap-x-12 gap-y-3 text-sm/6"
34+
aria-label="Footer"
35+
>
36+
<a href={~p"/apps"} class="text-gray-400 hover:text-white">Apps</a>
37+
<a
38+
href="https://github.com/techlore/Plexus-app?tab=readme-ov-file#download"
39+
class="text-gray-400 hover:text-white"
40+
>
41+
Download
42+
</a>
43+
<a href="https://plexus.techlore.tech/swaggerui" class="text-gray-400 hover:text-white">
44+
API
45+
</a>
46+
<a href="https://techlore.tech/" class="text-gray-400 hover:text-white">Techlore</a>
47+
</nav>
48+
<div class="mt-16 flex justify-center gap-x-10">
49+
<a href="https://twitter.com/TechloreInc" class="text-gray-400 hover:text-gray-300">
50+
<span class="sr-only">X</span>
51+
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
52+
<path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
53+
</svg>
54+
</a>
55+
<a href="https://github.com/techlore/plexus" class="text-gray-400 hover:text-gray-300">
56+
<span class="sr-only">GitHub</span>
57+
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
58+
<path
59+
fill-rule="evenodd"
60+
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
61+
clip-rule="evenodd"
62+
/>
63+
</svg>
64+
</a>
65+
<a href="https://www.youtube.com/@techlore" class="text-gray-400 hover:text-gray-300">
66+
<span class="sr-only">YouTube</span>
67+
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
68+
<path
69+
fill-rule="evenodd"
70+
d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z"
71+
clip-rule="evenodd"
72+
/>
73+
</svg>
74+
</a>
75+
</div>
76+
<p class="mt-10 text-center text-sm/6 text-gray-400">
77+
{Date.utc_today().year} &copy; Techlore
78+
</p>
79+
</div>
80+
</footer>

‎lib/plexus_web/components/layouts/root.html.heex‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
66
<meta name="csrf-token" content={get_csrf_token()} />
7-
<.live_title suffix=" · Plexus">
7+
<.live_title suffix=" | Plexus">
88
{assigns[:page_title] || "Plexus"}
99
</.live_title>
1010

@@ -43,7 +43,7 @@
4343
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
4444
</script>
4545
</head>
46-
<body class="bg-slate-100 antialiased">
46+
<body class="bg-white antialiased">
4747
{@inner_content}
4848
</body>
4949
</html>

‎lib/plexus_web/controllers/sitemap_controller.ex‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ defmodule PlexusWeb.SitemapController do
5757
defp change_freq("/swaggerui"), do: "yearly"
5858
defp change_freq(_), do: "weekly"
5959

60-
defp last_mod("/") do
60+
defp last_mod(path) when path in ["/", "/apps"] do
6161
Plexus.Apps.fetch_most_recently_added_app!()
6262
|> Map.fetch!(:inserted_at)
6363
|> DateTime.to_date()

‎lib/plexus_web/live/app_live/index.ex‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ defmodule PlexusWeb.AppLive.Index do
7373
term -> %{q: term}
7474
end
7575

76-
{:noreply, push_patch(socket, to: ~p"/?#{params}")}
76+
{:noreply, push_patch(socket, to: ~p"/apps?#{params}")}
7777
end
7878

7979
def handle_event("next-page", _, socket) do

0 commit comments

Comments
 (0)