From f3b429926b619eba62272a0840ddf5ffb0f0169f Mon Sep 17 00:00:00 2001
From: CrabeDeFrance <crabe.france@gmail.com>
Date: Sun, 3 Dec 2023 17:42:40 +0100
Subject: [PATCH 1/2] Issue #183 : Add keyword pages

Add new pages to list all keywords and search for a given keyword
It is possible to go here using the "Keyword" button or using links in
each crate's view
---
 crates/alexandrie/src/frontend/keywords.rs    | 146 ++++++++
 .../alexandrie/src/frontend/keywords_index.rs |  82 +++++
 .../src/frontend/keywords_search.rs           | 123 +++++++
 crates/alexandrie/src/frontend/mod.rs         |   9 +
 crates/alexandrie/src/main.rs                 |   3 +
 templates/crate.hbs                           |   2 +-
 templates/keywords.hbs                        | 313 ++++++++++++++++++
 templates/keywords_index.hbs                  | 290 ++++++++++++++++
 templates/keywords_search.hbs                 | 303 +++++++++++++++++
 templates/partials/navbar.hbs                 |   6 +
 10 files changed, 1276 insertions(+), 1 deletion(-)
 create mode 100644 crates/alexandrie/src/frontend/keywords.rs
 create mode 100644 crates/alexandrie/src/frontend/keywords_index.rs
 create mode 100644 crates/alexandrie/src/frontend/keywords_search.rs
 create mode 100644 templates/keywords.hbs
 create mode 100644 templates/keywords_index.hbs
 create mode 100644 templates/keywords_search.hbs

diff --git a/crates/alexandrie/src/frontend/keywords.rs b/crates/alexandrie/src/frontend/keywords.rs
new file mode 100644
index 00000000..fa1c2c1c
--- /dev/null
+++ b/crates/alexandrie/src/frontend/keywords.rs
@@ -0,0 +1,146 @@
+use std::num::NonZeroU32;
+use std::sync::Arc;
+
+use axum::extract::{Path, Query, State};
+use axum::response::Redirect;
+use axum_extra::either::Either;
+use axum_extra::response::Html;
+use diesel::dsl as sql;
+use diesel::prelude::*;
+
+use json::json;
+use serde::{Deserialize, Serialize};
+
+use alexandrie_index::Indexer;
+
+use crate::config::AppState;
+use crate::db::models::Crate;
+use crate::db::schema::*;
+use crate::db::DATETIME_FORMAT;
+use crate::error::{Error, FrontendError};
+use crate::frontend::helpers;
+use crate::utils::auth::frontend::Auth;
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub(crate) struct QueryParams {
+    pub page: Option<NonZeroU32>,
+}
+
+fn paginated_url(keyword: &str, page_number: u32, page_count: u32) -> Option<String> {
+    if page_number >= 1 && page_number <= page_count {
+        Some(format!("/keywords/{0}?page={1}", keyword, page_number))
+    } else {
+        None
+    }
+}
+
+pub(crate) async fn get(
+    State(state): State<Arc<AppState>>,
+    Query(params): Query<QueryParams>,
+    Path(keyword): Path<String>,
+    user: Option<Auth>,
+) -> Result<Either<Html<String>, Redirect>, FrontendError> {
+    let page_number = params.page.map_or_else(|| 1, |page| page.get());
+
+    if state.is_login_required() && user.is_none() {
+        return Ok(Either::E2(Redirect::to("/account/login")));
+    }
+
+    let db = &state.db;
+    let state = Arc::clone(&state);
+
+    let transaction = db.transaction(move |conn| {
+
+        //? Get the total count of search results.
+        let total_results = crate_keywords::table
+            .inner_join(keywords::table)
+            .inner_join(crates::table)
+            .filter(keywords::name.eq(&keyword))
+            .select(sql::count(crates::id))
+            .first::<i64>(conn)?;
+
+        //? Get the search results for the given page number.
+        //? First get all ids of crates with given keywords
+        let results = crate_keywords::table
+            .inner_join(keywords::table)
+            .inner_join(crates::table)
+            .filter(keywords::name.eq(&keyword))
+            .select(crates::id)
+            .order_by(crates::downloads.desc())
+            .limit(15)
+            .offset(15 * i64::from(page_number - 1))
+            .load::<i64>(conn)?;
+
+        let results = results
+            .into_iter()
+            .map(|crate_ids| {
+                let keywords = crate_keywords::table
+                    .inner_join(keywords::table)
+                    .select(keywords::name)
+                    .filter(crate_keywords::crate_id.eq(crate_ids))
+                    .load::<String>(conn)?;
+
+                let keyword_crate: Crate = crates::table
+                    .filter(crates::id.eq(crate_ids))
+                    .first(conn)?;
+
+                Ok((keyword_crate, keywords))
+            })
+            .collect::<Result<Vec<(Crate, Vec<String>)>, Error>>()?;
+
+        //? Make page number starts counting from 1 (instead of 0).
+        let page_count = (total_results / 15
+            + if total_results > 0 && total_results % 15 == 0 {
+                0
+            } else {
+                1
+            }) as u32;
+
+        let next_page = paginated_url(&keyword, page_number + 1, page_count);
+        let prev_page = paginated_url(&keyword, page_number - 1, page_count);
+
+        let auth = &state.frontend.config.auth;
+        let engine = &state.frontend.handlebars;
+        let context = json!({
+            "auth_disabled": !auth.enabled(),
+            "registration_disabled": !auth.allow_registration(),
+            "name": keyword,
+            "user": user.map(|it| it.into_inner()),
+            "instance": &state.frontend.config,
+            "total_results": total_results,
+            "pagination": {
+                "current": page_number,
+                "total_count": page_count,
+                "next": next_page,
+                "prev": prev_page,
+            },
+            "results": results.into_iter().map(|(krate, keywords)| {
+                let record = state.index.latest_record(&krate.name)?;
+                let created_at =
+                    chrono::NaiveDateTime::parse_from_str(krate.created_at.as_str(), DATETIME_FORMAT)
+                        .unwrap();
+                let updated_at =
+                    chrono::NaiveDateTime::parse_from_str(krate.updated_at.as_str(), DATETIME_FORMAT)
+                        .unwrap();
+                Ok(json!({
+                    "id": krate.id,
+                    "name": krate.name,
+                    "version": record.vers,
+                    "description": krate.description,
+                    "created_at": helpers::humanize_datetime(created_at),
+                    "updated_at": helpers::humanize_datetime(updated_at),
+                    "downloads": helpers::humanize_number(krate.downloads),
+                    "documentation": krate.documentation,
+                    "repository": krate.repository,
+                    "keywords": keywords,
+                    "yanked": record.yanked,
+                }))
+            }).collect::<Result<Vec<_>, Error>>()?,
+        });
+        Ok(Either::E1(Html(
+            engine.render("keywords", &context).unwrap(),
+        )))
+    });
+
+    transaction.await
+}
diff --git a/crates/alexandrie/src/frontend/keywords_index.rs b/crates/alexandrie/src/frontend/keywords_index.rs
new file mode 100644
index 00000000..a72d9ebf
--- /dev/null
+++ b/crates/alexandrie/src/frontend/keywords_index.rs
@@ -0,0 +1,82 @@
+use std::sync::Arc;
+
+use axum::extract::State;
+use axum::response::Redirect;
+use axum_extra::either::Either;
+use axum_extra::response::Html;
+use diesel::dsl as sql;
+use diesel::prelude::*;
+
+use json::json;
+
+use crate::config::AppState;
+use crate::db::models::Crate;
+use crate::db::schema::*;
+use crate::error::{Error, FrontendError};
+use crate::utils::auth::frontend::Auth;
+
+pub(crate) async fn get(
+    State(state): State<Arc<AppState>>,
+    user: Option<Auth>,
+) -> Result<Either<Html<String>, Redirect>, FrontendError> {
+    if state.is_login_required() && user.is_none() {
+        return Ok(Either::E2(Redirect::to("/account/login")));
+    }
+
+    let db = &state.db;
+    let state = Arc::clone(&state);
+
+    let transaction = db.transaction(move |conn| {
+        //? Get the total count of search results.
+        let total_results = keywords::table
+            .select(sql::count(keywords::id))
+            .first::<i64>(conn)?;
+
+        let keywords = keywords::table
+            .select(keywords::name)
+            .load::<String>(conn)?;
+
+        let auth = &state.frontend.config.auth;
+        let engine = &state.frontend.handlebars;
+        let context = json!({
+            "auth_disabled": !auth.enabled(),
+            "registration_disabled": !auth.allow_registration(),
+            "user": user.map(|it| it.into_inner()),
+            "instance": &state.frontend.config,
+            "total_results": total_results,
+            "keywords": keywords.into_iter().map(|keyword| {
+                let crates = crate_keywords::table
+                .inner_join(keywords::table)
+                .inner_join(crates::table)
+                .filter(keywords::name.eq(&keyword))
+                .order_by(crates::downloads.desc())
+                .select(crates::id)
+                .limit(10)
+                .load::<i64>(conn)?
+                .into_iter()
+                .map(|crate_ids| {
+                    let keyword_crate: Crate = crates::table
+                        .filter(crates::id.eq(crate_ids))
+                        .first(conn)?;
+                    Ok(keyword_crate)
+                })
+                .collect::<Result<Vec<_>, Error>>()?;
+            let count = crate_keywords::table
+                .inner_join(keywords::table)
+                .inner_join(crates::table)
+                .filter(keywords::name.eq(&keyword))
+                .select(sql::count(crates::id))
+                .first::<i64>(conn)?;
+            Ok(json!({
+                "name":&keyword,
+                "crates": crates,
+                "count": count
+            }))}).collect::<Result<Vec<_>, Error>>()?,
+        });
+        Ok(Either::E1(Html(
+            engine.render("keywords_index", &context).unwrap(),
+        )))
+    });
+
+    transaction.await
+}
diff --git a/crates/alexandrie/src/frontend/keywords_search.rs b/crates/alexandrie/src/frontend/keywords_search.rs
new file mode 100644
index 00000000..c7e64f24
--- /dev/null
+++ b/crates/alexandrie/src/frontend/keywords_search.rs
@@ -0,0 +1,123 @@
+use std::num::NonZeroU32;
+use std::sync::Arc;
+
+use axum::extract::{Query, State};
+use axum::response::Redirect;
+use axum_extra::either::Either;
+use axum_extra::response::Html;
+use diesel::dsl as sql;
+use diesel::prelude::*;
+
+use json::json;
+use serde::{Deserialize, Serialize};
+
+use crate::config::AppState;
+use crate::db::models::Keyword;
+use crate::db::schema::*;
+use crate::error::{Error, FrontendError};
+use crate::utils::auth::frontend::Auth;
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub(crate) struct QueryParams {
+    pub q: String,
+    pub page: Option<NonZeroU32>,
+}
+
+fn paginated_url(query: &str, page_number: u32, page_count: u32) -> Option<String> {
+    let query = query.as_bytes();
+    let encoded_q = percent_encoding::percent_encode(query, percent_encoding::NON_ALPHANUMERIC);
+    if page_number >= 1 && page_number <= page_count {
+        Some(format!(
+            "/keywords_search?q={0}&page={1}",
+            encoded_q, page_number
+        ))
+    } else {
+        None
+    }
+}
+
+pub(crate) async fn get(
+    State(state): State<Arc<AppState>>,
+    Query(params): Query<QueryParams>,
+    user: Option<Auth>,
+) -> Result<Either<Html<String>, Redirect>, FrontendError> {
+    let page_number = params.page.map_or_else(|| 1, |page| page.get());
+    let searched_text = params.q.clone();
+
+    if state.is_login_required() && user.is_none() {
+        return Ok(Either::E2(Redirect::to("/account/login")));
+    }
+
+    let db = &state.db;
+    let state = Arc::clone(&state);
+
+    let transaction = db.transaction(move |conn| {
+        let escaped_like_query = params.q.replace('\\', "\\\\").replace('%', "\\%");
+        let escaped_like_query = format!("%{escaped_like_query}%");
+
+        //? Get the total count of search results.
+        let total_results = keywords::table
+            .select(sql::count(keywords::id))
+            .filter(keywords::name.like(escaped_like_query.as_str()))
+            .first::<i64>(conn)?;
+
+        //? Get the search results for the given page number.
+        let results: Vec<Keyword> = keywords::table
+            .filter(keywords::name.like(escaped_like_query.as_str()))
+            .limit(15)
+            .offset(15 * i64::from(page_number - 1))
+            .load(conn)?;
+
+        let results = results
+            .into_iter()
+            .map(|result| {
+                let crates = crate_keywords::table
+                    .inner_join(crates::table)
+                    .select(crates::name)
+                    .filter(crate_keywords::keyword_id.eq(result.id))
+                    .limit(5)
+                    .load::<String>(conn)?;
+                Ok((result.name, crates))
+            })
+            .collect::<Result<Vec<(String, Vec<String>)>, Error>>()?;
+
+        //? Make page number starts counting from 1 (instead of 0).
+        let page_count = (total_results / 15
+            + if total_results > 0 && total_results % 15 == 0 {
+                0
+            } else {
+                1
+            }) as u32;
+
+        let next_page = paginated_url(&params.q, page_number + 1, page_count);
+        let prev_page = paginated_url(&params.q, page_number - 1, page_count);
+
+        let auth = &state.frontend.config.auth;
+        let engine = &state.frontend.handlebars;
+        let context = json!({
+            "auth_disabled": !auth.enabled(),
+            "registration_disabled": !auth.allow_registration(),
+            "user": user.map(|it| it.into_inner()),
+            "instance": &state.frontend.config,
+            "searched_text": searched_text,
+            "total_results": total_results,
+            "pagination": {
+                "current": page_number,
+                "total_count": page_count,
+                "next": next_page,
+                "prev": prev_page,
+            },
+            "results": results.into_iter().map(|(keyword, crates)| {
+                Ok(json!({
+                    "name": keyword,
+                    "crates": crates,
+                }))
+            }).collect::<Result<Vec<_>, Error>>()?,
+        });
+        Ok(Either::E1(Html(
+            engine.render("keywords_search", &context).unwrap(),
+        )))
+    });
+
+    transaction.await
+}
diff --git a/crates/alexandrie/src/frontend/mod.rs b/crates/alexandrie/src/frontend/mod.rs
index 78f4f0c2..a67998e0 100644
--- a/crates/alexandrie/src/frontend/mod.rs
+++ b/crates/alexandrie/src/frontend/mod.rs
@@ -14,3 +14,12 @@ pub mod me;
 pub mod most_downloaded;
 /// Search pages (eg. "/search?q=\<term\>").
 pub mod search;
+
+/// Keywords index page (eq. "/keywords").
+pub mod keywords_index;
+
+/// Keywords page (eq. "/keywords/\<name\>").
+pub mod keywords;
+
+/// Keywords search page (eq. "/keywords_search?q=\<term\>").
+pub mod keywords_search;
diff --git a/crates/alexandrie/src/main.rs b/crates/alexandrie/src/main.rs
index 45310609..64c2e205 100644
--- a/crates/alexandrie/src/main.rs
+++ b/crates/alexandrie/src/main.rs
@@ -96,6 +96,9 @@ fn frontend_routes(state: Arc<AppState>, frontend_config: FrontendConfig) -> Rou
         .route("/most-downloaded", get(frontend::most_downloaded::get))
         .route("/last-updated", get(frontend::last_updated::get))
         .route("/crates/:crate", get(frontend::krate::get))
+        .route("/keywords", get(frontend::keywords_index::get))
+        .route("/keywords/:keyword", get(frontend::keywords::get))
+        .route("/keywords_search", get(frontend::keywords_search::get))
         .route(
             "/account/login",
             get(frontend::account::login::get).post(frontend::account::login::post),
diff --git a/templates/crate.hbs b/templates/crate.hbs
index f644e9ed..26594ac6 100644
--- a/templates/crate.hbs
+++ b/templates/crate.hbs
@@ -248,7 +248,7 @@
     {{#if keywords}}
     <div class="keywords-container">
         {{#each keywords}}
-        <div class="keyword">#{{ this.name }}</div>
+        <div class="keyword"><a href="/keywords/{{ this.name }}">#{{ this.name }}</a></div>
         {{/each}}
     </div>
     {{/if}}
diff --git a/templates/keywords.hbs b/templates/keywords.hbs
new file mode 100644
index 00000000..28585985
--- /dev/null
+++ b/templates/keywords.hbs
@@ -0,0 +1,313 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    {{> partials/head}}
+    <style>
+        .hero {
+            width: 100%;
+        }
+
+        .hero-content-container {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            width: 100%;
+            padding: 40px 10px 10px;
+        }
+
+        .hero-title {
+            font-size: 30px;
+            font-weight: bolder;
+            text-align: center;
+        }
+
+        .hero-subtitle {
+            font-size: 24px;
+            text-align: center;
+        }
+
+        .stats-container {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            padding-top: 10px;
+        }
+
+        .stats {
+            align-items: center;
+            justify-content: center;
+            white-space: normal;
+            padding: 10px 0;
+            display: flex;
+            flex-direction: column;
+            width: 1400px;
+            border-top: 2px solid var(--fg-color);
+            border-bottom: 2px solid var(--fg-color);
+        }
+
+        .stat {
+            font-size: 17px;
+        }
+
+        .search-results-container {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            margin: 10px 0;
+        }
+
+        .search-results {
+            width: 1400px;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            flex-direction: column;
+            padding: 10px;
+        }
+
+        @media (max-width: 1400px) {
+            .search-results {
+                width: 100%;
+            }
+
+            .stats {
+                width: 90%;
+            }
+        }
+
+        .search-result {
+            width: 100%;
+            display: grid;
+            grid-template-rows: 1fr;
+            grid-template-columns: 1fr min-content;
+            background-color: var(--lighter-bg-color);
+            color: var(--fg-color);
+            padding: 20px;
+            border-radius: 10px;
+            cursor: pointer;
+            transition: transform 0.15s;
+            margin-top: 10px;
+        }
+
+        .search-result:first-child {
+            margin-top: 0;
+        }
+
+        .search-result:hover {
+            transform: scale(1.03);
+        }
+
+        .search-result-infos {
+            padding: 10px;
+            display: flex;
+            align-items: flex-start;
+            justify-content: center;
+            flex-direction: column;
+        }
+
+        .search-result-title {
+            font-size: 24px;
+            font-weight: bold;
+        }
+
+        .search-result-yank {
+            display: inline;
+            font-size: 11px;
+            vertical-align: 30%;
+            border: 3px solid #F52;
+            padding: 1px 6px;
+            border-radius: 7px;
+            color: #F52;
+        }
+
+        .search-result-desc {
+            font-size: 18px;
+        }
+
+        .search-result-keywords {
+            display: flex;
+            margin-top: 2px;
+        }
+
+        .search-result-keyword {
+            margin-left: 7px;
+            font-weight: bold;
+        }
+
+        .search-result-keyword:first-child {
+            margin-left: 0;
+        }
+
+        .search-result-stats {
+            border-left: solid 2px var(--fg-color);
+            padding: 10px;
+            display: flex;
+            align-items: flex-start;
+            justify-content: center;
+            flex-direction: column;
+        }
+
+        .search-result-stats-entry {
+            white-space: nowrap;
+        }
+
+        .search-results-empty {
+            font-weight: bold;
+            font-size: 20px;
+            height: 50px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .pagination-container {
+        }
+
+        .pagination {
+            display: grid;
+            grid-template-columns: repeat(3, min-content);
+            grid-template-rows: min-content;
+        }
+
+        .pagination-button {
+            width: 100%;
+            height: 100%;
+        }
+
+        .pagination-prev,
+        .pagination-current,
+        .pagination-next {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            white-space: nowrap;
+            background-color: var(--bg-color);
+        }
+
+        .pagination-prev,
+        .pagination-next {
+            width: 100%;
+            background: transparent;
+            cursor: pointer;
+            font: inherit;
+            font-weight: bold;
+            text-align: center;
+            color: inherit;
+            background-color: inherit;
+            padding: 5px 10px;
+            border: 2px solid var(--darker-fg-color);
+            transition: background-color 0.15s, border-color 0.15s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .pagination-prev:hover,
+        .pagination-next:hover,
+        .pagination-prev:focus,
+        .pagination-next:focus {
+            border: 2px solid var(--fg-color);
+            background-color: var(--dark-bg-color);
+        }
+
+        .pagination-prev.pagination-disabled,
+        .pagination-next.pagination-disabled {
+            color: var(--dark-fg-color);
+            background-color: var(--dark-bg-color);
+            cursor: default;
+            pointer-events: none;
+        }
+
+        .pagination-prev {
+            border-radius: 5px 0 0 5px;
+        }
+
+        .pagination-current {
+            border-top: 2px solid var(--darker-fg-color);
+            border-bottom: 2px solid var(--darker-fg-color);
+            padding: 5px 10px;
+        }
+
+        .pagination-next {
+            border-radius: 0 5px 5px 0;
+        }
+
+        @media (max-width: 600px) {
+            .search-result-stats {
+                display: none;
+            }
+        }
+
+        @media (prefers-color-scheme: dark) {
+            .pagination-prev.pagination-disabled,
+            .pagination-next.pagination-disabled {
+                color: var(--fg-color);
+                background-color: var(--lighter-bg-color);
+            }
+        }
+    </style>
+</head>
+
+<body>
+    {{> partials/navbar}}
+    <div class="hero">
+        <div style="height: 50px"></div>
+        <div class="hero-content-container">
+            <div class="hero-title"># {{name}}</div>
+            <div class="hero-subtitle">Crates with keyword {{name}}</div>
+        </div>
+    </div>
+    <div class="stats-container">
+        <div class="stats">
+            <div class="stats-block">
+                <div class="stat"><b>{{ total_results }}</b>&nbsp;total results</div>
+            </div>
+        </div>
+    </div>
+    <div class="search-results-container">
+        {{> partials/pagination pagination}}
+        <div class="search-results">
+            {{#if results}}
+            {{#each results}}
+            <a class="search-result elevated" href="/crates/{{ this.name }}">
+                <div class="search-result-infos">
+                    <div class="search-result-title">
+                        {{ this.name }} #{{ this.version }}
+                        {{#if this.yanked}}
+                        <div class="search-result-yank">YANKED</div>
+                        {{/if}}
+                    </div>
+                    <div class="search-result-desc">{{ this.description }}</div>
+                    {{#if this.keywords}}
+                    <div class="search-result-keywords">
+                        {{#each this.keywords}}
+                        <div class="search-result-keyword">#{{ this }}</div>
+                        {{/each}}
+                    </div>
+                    {{/if}}
+                </div>
+                <div class="search-result-stats">
+                    <div class="search-result-stats-entry"><b>{{ this.downloads }}</b> downloads</div>
+                    <div class="search-result-stats-entry">Created on <b>{{ this.updated_at }}</b></div>
+                    <div class="search-result-stats-entry">Last updated on <b>{{ this.updated_at }}</b></div>
+                </div>
+            </a>
+            {{/each}}
+            {{else}}
+            <div class="search-results-empty">No crates...</div>
+            {{/if}}
+        </div>
+        {{> partials/pagination pagination}}
+    </div>
+</body>
+
+</html>
diff --git a/templates/keywords_index.hbs b/templates/keywords_index.hbs
new file mode 100644
index 00000000..4c008ddb
--- /dev/null
+++ b/templates/keywords_index.hbs
@@ -0,0 +1,290 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    {{> partials/head}}
+    <style>
+        .hero {
+            width: 100%;
+        }
+
+        .hero-content-container {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            width: 100%;
+            padding: 40px 10px 10px;
+        }
+
+        .hero-title {
+            font-size: 30px;
+            font-weight: bolder;
+            text-align: center;
+        }
+
+        .hero-subtitle {
+            font-size: 24px;
+            text-align: center;
+        }
+
+        .hero-links {
+            margin-top: 7px;
+            display: flex;
+        }
+
+        .hero-link {
+            display: block;
+            border-radius: 5px;
+            border: solid 1.5px var(--fg-color);
+            margin-left: 5px;
+            padding: 2px 8px;
+        }
+
+        .hero-link:first-child {
+            margin-left: 0;
+        }
+
+        .hero-link:hover,
+        .hero-link:focus {
+            background-color: var(--fg-color);
+            color: var(--bg-color);
+        }
+
+        .stats-container {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            padding-top: 10px;
+        }
+
+        .stats {
+            align-items: center;
+            justify-content: center;
+            white-space: normal;
+            padding: 10px 0;
+            display: flex;
+            flex-direction: column;
+            width: 1400px;
+            border-top: 2px solid var(--fg-color);
+            border-bottom: 2px solid var(--fg-color);
+        }
+
+        .stat {
+            font-size: 17px;
+        }
+
+        .page-search-container {
+        }
+
+        .page-search-container form {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .page-search-overall {
+            align-self: center;
+        }
+
+        .page-search {
+        appearance: none;
+        -moz-appearance: none;
+        -webkit-appearance: none;
+        border: 2px solid var(--darker-bg-color);
+        border-radius: 5px;
+        color: var(--fg-color);
+        background-color: var(--bg-color);
+        padding: 5px 10px;
+        font-size: 24px;
+        font-weight: 600;
+        text-align: left;
+        width: 300px;
+        height: 100%;
+        transition: width 0.15s;
+        font-family: "Fira Sans", sans-serif;
+        outline: none;
+    }
+
+        .content-grid {
+            padding: 10px;
+            display: grid;
+            grid-template-columns: repeat(3, 33%);
+            grid-auto-rows: 1fr
+            align-items: start;
+            justify-content: center;
+        }
+
+        @media (max-width: 1400px) {
+            .content-grid {
+                width: 100%;
+            }
+
+            .stats {
+                width: 90%;
+            }
+        }
+
+        .card-content {
+            flex-grow: 1;
+        }
+
+        .content-grid-element {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            padding: 1.5em;
+        }
+
+
+        .content-grid-title {
+            width: 100%;
+            text-align: center;
+            font-size: 21px;
+            font-weight: bold;
+            padding: 5px 0;
+            align-self: flex-start;
+        }
+
+        .content-grid-desc {
+            width: 100%;
+            text-align: center;
+            font-size: 16px;
+            padding: 5px 0;
+            height: 5em;
+        }
+
+        .content-grid-list {
+            font-size: 18px;
+            font-weight: bold;
+        }
+
+        .content-grid-entries {
+            width: 100%;
+            counter-reset: rank;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            padding: 10px;
+        }
+
+        .content-grid-entry::before {
+            counter-increment: rank;
+        }
+
+        .content-grid-entry {
+            width: 100%;
+            color: var(--fg-color);
+            background-color: var(--lighter-bg-color);
+            padding: 10px 20px;
+            border-radius: 10px;
+            margin-top: 10px;
+        }
+
+        .content-grid-entry:first-child {
+            margin-top: 0;
+        }
+        .content-grid-empty,
+        .last-updated-empty {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+        }
+
+        .card-footer {
+            align-self: flex-end;
+            width: 100%;
+            padding: 5px;
+        }
+
+        .card-footer-button {
+            width: 100%;
+            text-decoration: none;
+            text-align: center;
+            padding: 7px 10px;
+            font-weight: bold;
+            font-size: 20px;
+            display: block;
+            border-radius: 30px;
+            color: var(--fg-color);
+            background-color: var(--light-bg-color);
+            transition: transform 0.15s;
+        }
+
+        .card-footer-button:hover,
+        .card-footer-button:focus {
+            transform: scale(1.03);
+        }
+
+        @media (max-width: 1000px) {
+            .content-grid {
+                grid-template-rows: repeat(2, 1fr);
+                grid-template-columns: 1fr;
+            }
+
+            .content-grid-entries,
+            .last-updated-entries,
+            .card-footer {
+                padding-left: 0;
+                padding-right: 0;
+            }
+
+            .content-grid,
+            .last-updated {
+                border-right: none;
+                border-left: none;
+            }
+
+            .last-updated {
+                padding-top: 5px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    {{> partials/navbar}}
+    <div class="hero">
+        <div style="height: 50px"></div>
+        <div class="hero-content-container">
+            <div class="hero-title">Keywords</div>
+            <div class="hero-subtitle">Keywords and their most downloaded crates</div>
+        </div>
+    </div>
+    <div class="page-search-container">
+        <form method="GET" action="/keywords_search">
+            <div class="page-search-overall">
+                <input type="text" class="page-search" name="q" placeholder="Search keywords..." autocomplete="off">
+            </div>
+        </form>
+    </div>
+    <div class="content-grid">
+        {{#if keywords}}
+        {{#each keywords}}
+        <div class="content-grid-element">
+            <div class="content-grid-title"><a href="/keywords/{{this.name}}">{{this.name}}</a></div>
+            <div class="content-grid-desc"><a href="/keywords/{{this.name}}">{{this.description}}</a></div>
+            {{#if this.crates}}
+                <div class="content-grid-entries">
+                    {{#each this.crates}}{{#if @index}},&nbsp;{{/if}}<a href="/crates/{{this.name}}">{{ this.name }}</a>{{/each}}
+                </div>
+            {{else}}
+                <div class="content-grid-empty">Empty list.</div>
+            {{/if}}
+            <div class="card-footer">
+		    <a class="card-footer-button elevated" href="/keywords/{{this.name}}">See {{this.count}} keywords</a>
+            </div>
+        </div>
+        {{/each}}
+        {{else}}
+        <div class="search-results">
+            <div class="search-results-empty">No crates...</div>
+        </div>
+        {{/if}}
+    </div>
+</body>
+
+</html>
diff --git a/templates/keywords_search.hbs b/templates/keywords_search.hbs
new file mode 100644
index 00000000..31a7202c
--- /dev/null
+++ b/templates/keywords_search.hbs
@@ -0,0 +1,303 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    {{> partials/head}}
+    <style>
+        .hero {
+            width: 100%;
+        }
+
+        .hero-content-container {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            width: 100%;
+            padding: 40px 10px 10px;
+        }
+
+        .hero-title {
+            font-size: 30px;
+            font-weight: bolder;
+            text-align: center;
+        }
+
+        .hero-subtitle {
+            font-size: 24px;
+            text-align: center;
+        }
+
+        .stats-container {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            padding-top: 10px;
+        }
+
+        .stats {
+            align-items: center;
+            justify-content: center;
+            white-space: normal;
+            padding: 10px 0;
+            display: flex;
+            flex-direction: column;
+            width: 1400px;
+            border-top: 2px solid var(--fg-color);
+            border-bottom: 2px solid var(--fg-color);
+        }
+
+        .stat {
+            font-size: 17px;
+        }
+
+        .search-results-container {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            margin: 10px 0;
+        }
+
+        .search-results {
+            width: 1400px;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            flex-direction: column;
+            padding: 10px;
+        }
+
+        @media (max-width: 1400px) {
+            .search-results {
+                width: 100%;
+            }
+
+            .stats {
+                width: 90%;
+            }
+        }
+
+        .search-result {
+            width: 100%;
+            display: grid;
+            grid-template-rows: 1fr;
+            grid-template-columns: 1fr min-content;
+            background-color: var(--lighter-bg-color);
+            color: var(--fg-color);
+            padding: 20px;
+            border-radius: 10px;
+            cursor: pointer;
+            transition: transform 0.15s;
+            margin-top: 10px;
+        }
+
+        .search-result:first-child {
+            margin-top: 0;
+        }
+
+        .search-result:hover {
+            transform: scale(1.03);
+        }
+
+        .search-result-infos {
+            padding: 10px;
+            display: flex;
+            align-items: flex-start;
+            justify-content: center;
+            flex-direction: column;
+        }
+
+        .search-result-title {
+            font-size: 24px;
+            font-weight: bold;
+        }
+
+        .search-result-yank {
+            display: inline;
+            font-size: 11px;
+            vertical-align: 30%;
+            border: 3px solid #F52;
+            padding: 1px 6px;
+            border-radius: 7px;
+            color: #F52;
+        }
+
+        .search-result-desc {
+            font-size: 18px;
+        }
+
+        .search-result-crates {
+            display: flex;
+            margin-top: 2px;
+        }
+
+        .search-result-crate {
+            margin-left: 7px;
+            font-weight: bold;
+        }
+
+        .search-result-crate:first-child {
+            margin-left: 0;
+        }
+
+        .search-result-stats {
+            border-left: solid 2px var(--fg-color);
+            padding: 10px;
+            display: flex;
+            align-items: flex-start;
+            justify-content: center;
+            flex-direction: column;
+        }
+
+        .search-result-stats-entry {
+            white-space: nowrap;
+        }
+
+        .search-results-empty {
+            font-weight: bold;
+            font-size: 20px;
+            height: 50px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .pagination-container {
+        }
+
+        .pagination {
+            display: grid;
+            grid-template-columns: repeat(3, min-content);
+            grid-template-rows: min-content;
+        }
+
+        .pagination-button {
+            width: 100%;
+            height: 100%;
+        }
+
+        .pagination-prev,
+        .pagination-current,
+        .pagination-next {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            white-space: nowrap;
+            background-color: var(--bg-color);
+        }
+
+        .pagination-prev,
+        .pagination-next {
+            width: 100%;
+            background: transparent;
+            cursor: pointer;
+            font: inherit;
+            font-weight: bold;
+            text-align: center;
+            color: inherit;
+            background-color: inherit;
+            padding: 5px 10px;
+            border: 2px solid var(--darker-fg-color);
+            transition: background-color 0.15s, border-color 0.15s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .pagination-prev:hover,
+        .pagination-next:hover,
+        .pagination-prev:focus,
+        .pagination-next:focus {
+            border: 2px solid var(--fg-color);
+            background-color: var(--dark-bg-color);
+        }
+
+        .pagination-prev.pagination-disabled,
+        .pagination-next.pagination-disabled {
+            color: var(--dark-fg-color);
+            background-color: var(--dark-bg-color);
+            cursor: default;
+            pointer-events: none;
+        }
+
+        .pagination-prev {
+            border-radius: 5px 0 0 5px;
+        }
+
+        .pagination-current {
+            border-top: 2px solid var(--darker-fg-color);
+            border-bottom: 2px solid var(--darker-fg-color);
+            padding: 5px 10px;
+        }
+
+        .pagination-next {
+            border-radius: 0 5px 5px 0;
+        }
+
+        @media (max-width: 600px) {
+            .search-result-stats {
+                display: none;
+            }
+        }
+
+        @media (prefers-color-scheme: dark) {
+            .pagination-prev.pagination-disabled,
+            .pagination-next.pagination-disabled {
+                color: var(--fg-color);
+                background-color: var(--lighter-bg-color);
+            }
+        }
+    </style>
+</head>
+
+<body>
+    {{> partials/navbar}}
+    <div class="hero">
+        <div style="height: 50px"></div>
+        <div class="hero-content-container">
+            <div class="hero-title">Keywords search results</div>
+            <div class="hero-subtitle">Searched for: {{ searched_text }}</div>
+        </div>
+    </div>
+    <div class="stats-container">
+        <div class="stats">
+            <div class="stats-block">
+                <div class="stat"><b>{{ total_results }}</b>&nbsp;total results</div>
+            </div>
+        </div>
+    </div>
+    <div class="search-results-container">
+        {{> partials/pagination pagination}}
+        <div class="search-results">
+            {{#if results}}
+            {{#each results}}
+            <a class="search-result elevated" href="/keywords/{{ this.name }}">
+                <div class="search-result-infos">
+                    <div class="search-result-title">
+                        #{{ this.name }} 
+                    </div>
+                    <div class="search-result-desc">{{ this.description }}</div>
+                    {{#if this.crates}}
+                    <div class="search-result-crates">
+                        <div class="search-result-crate">{{#each this.crates}}{{#if @index}},&nbsp;{{/if}}{{ this }}{{/each}}</div>
+                    </div>
+                    {{/if}}
+                </div>
+            </a>
+            {{/each}}
+            {{else}}
+            <div class="search-results-empty">No search results...</div>
+            {{/if}}
+        </div>
+        {{> partials/pagination pagination}}
+    </div>
+</body>
+
+</html>
diff --git a/templates/partials/navbar.hbs b/templates/partials/navbar.hbs
index 1cee87b2..660cce9a 100644
--- a/templates/partials/navbar.hbs
+++ b/templates/partials/navbar.hbs
@@ -294,6 +294,9 @@
         <a class="navbar-brand navbar-tag" href="/">
             {{ instance.title }}
         </a>
+        <a class="navbar-brand navbar-tag" href="/keywords">
+            Keywords
+        </a>
     </div>
     <div class="navbar-search-container">
         <form method="GET" action="/search">
@@ -330,6 +333,9 @@
         <a class="navbar-brand navbar-tag" href="/">
             {{ instance.title }}
         </a>
+        <a class="navbar-brand navbar-tag" href="/keywords">
+            Keywords
+        </a>
     </div>
     <div class="navbar-login-container-mobile">
         {{#if user}}

From 9733a90f52aa7a7951e2dcff930a7479560ca134 Mon Sep 17 00:00:00 2001
From: CrabeDeFrance <crabe.france@gmail.com>
Date: Mon, 4 Dec 2023 15:38:47 +0100
Subject: [PATCH 2/2] Issue #183 : add categorie pages

Add new pages to list all categores.
It is possible to go here using the "Categorie" button or using links in
each crate's view
---
 crates/alexandrie/src/frontend/categories.rs  | 156 +++++++++
 .../src/frontend/categories_index.rs          |  83 +++++
 crates/alexandrie/src/frontend/mod.rs         |   6 +
 crates/alexandrie/src/main.rs                 |   2 +
 templates/categories.hbs                      | 313 ++++++++++++++++++
 templates/categories_index.hbs                | 252 ++++++++++++++
 templates/crate.hbs                           |   2 +-
 templates/partials/navbar.hbs                 |   6 +
 8 files changed, 819 insertions(+), 1 deletion(-)
 create mode 100644 crates/alexandrie/src/frontend/categories.rs
 create mode 100644 crates/alexandrie/src/frontend/categories_index.rs
 create mode 100644 templates/categories.hbs
 create mode 100644 templates/categories_index.hbs

diff --git a/crates/alexandrie/src/frontend/categories.rs b/crates/alexandrie/src/frontend/categories.rs
new file mode 100644
index 00000000..c6750c16
--- /dev/null
+++ b/crates/alexandrie/src/frontend/categories.rs
@@ -0,0 +1,156 @@
+use std::num::NonZeroU32;
+use std::sync::Arc;
+
+use axum::extract::{Path, Query, State};
+use axum::response::Redirect;
+use axum_extra::either::Either;
+use axum_extra::response::Html;
+use diesel::dsl as sql;
+use diesel::prelude::*;
+
+use json::json;
+use serde::{Deserialize, Serialize};
+
+use alexandrie_index::Indexer;
+
+use crate::config::AppState;
+use crate::db::models::Crate;
+use crate::db::schema::*;
+use crate::db::DATETIME_FORMAT;
+use crate::error::{Error, FrontendError};
+use crate::frontend::helpers;
+use crate::utils::auth::frontend::Auth;
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub(crate) struct QueryParams {
+    pub page: Option<NonZeroU32>,
+}
+
+fn paginated_url(categorie: &str, page_number: u32, page_count: u32) -> Option<String> {
+    if page_number >= 1 && page_number <= page_count {
+        Some(format!("/categories/{0}?page={1}", categorie, page_number))
+    } else {
+        None
+    }
+}
+
+pub(crate) async fn get(
+    State(state): State<Arc<AppState>>,
+    Query(params): Query<QueryParams>,
+    Path(categorie): Path<String>,
+    user: Option<Auth>,
+) -> Result<Either<Html<String>, Redirect>, FrontendError> {
+    let page_number = params.page.map_or_else(|| 1, |page| page.get());
+
+    if state.is_login_required() && user.is_none() {
+        return Ok(Either::E2(Redirect::to("/account/login")));
+    }
+
+    let db = &state.db;
+    let state = Arc::clone(&state);
+
+    let transaction = db.transaction(move |conn| {
+
+        //? Get the total count of search results.
+        let total_results = crate_categories::table
+            .inner_join(categories::table)
+            .inner_join(crates::table)
+            .filter(categories::name.eq(&categorie))
+            .select(sql::count(crates::id))
+            .first::<i64>(conn)?;
+
+        //? Get the search results for the given page number.
+        //? First get all ids of crates with given categories
+        let results = crate_categories::table
+            .inner_join(categories::table)
+            .inner_join(crates::table)
+            .filter(categories::name.eq(&categorie))
+            .select(crates::id)
+            .order_by(crates::downloads.desc())
+            .limit(15)
+            .offset(15 * i64::from(page_number - 1))
+            .load::<i64>(conn)?;
+
+        let results = results
+            .into_iter()
+            .map(|crate_ids| {
+                let categories = crate_categories::table
+                    .inner_join(categories::table)
+                    .select(categories::name)
+                    .filter(crate_categories::crate_id.eq(crate_ids))
+                    .load::<String>(conn)?;
+
+                let categorie_crate: Crate = crates::table
+                    .filter(crates::id.eq(crate_ids))
+                    .first(conn)?;
+
+                Ok((categorie_crate, categories))
+            })
+            .collect::<Result<Vec<(Crate, Vec<String>)>, Error>>()?;
+
+        let description = categories::table
+            .filter(categories::name.eq(&categorie))
+            .select(categories::description)
+            .first(conn);
+
+        let description : String = match description {
+            Err(_e) => "".to_string(),
+            Ok(s) => s,
+        };
+
+        //? Make page number starts counting from 1 (instead of 0).
+        let page_count = (total_results / 15
+            + if total_results > 0 && total_results % 15 == 0 {
+                0
+            } else {
+                1
+            }) as u32;
+
+        let next_page = paginated_url(&categorie, page_number + 1, page_count);
+        let prev_page = paginated_url(&categorie, page_number - 1, page_count);
+
+        let auth = &state.frontend.config.auth;
+        let engine = &state.frontend.handlebars;
+        let context = json!({
+            "auth_disabled": !auth.enabled(),
+            "registration_disabled": !auth.allow_registration(),
+            "name": &categorie,
+            "description": description,
+            "user": user.map(|it| it.into_inner()),
+            "instance": &state.frontend.config,
+            "total_results": total_results,
+            "pagination": {
+                "current": page_number,
+                "total_count": page_count,
+                "next": next_page,
+                "prev": prev_page,
+            },
+            "results": results.into_iter().map(|(krate, categories)| {
+                let record = state.index.latest_record(&krate.name)?;
+                let created_at =
+                    chrono::NaiveDateTime::parse_from_str(krate.created_at.as_str(), DATETIME_FORMAT)
+                        .unwrap();
+                let updated_at =
+                    chrono::NaiveDateTime::parse_from_str(krate.updated_at.as_str(), DATETIME_FORMAT)
+                        .unwrap();
+                Ok(json!({
+                    "id": krate.id,
+                    "name": krate.name,
+                    "version": record.vers,
+                    "description": krate.description,
+                    "created_at": helpers::humanize_datetime(created_at),
+                    "updated_at": helpers::humanize_datetime(updated_at),
+                    "downloads": helpers::humanize_number(krate.downloads),
+                    "documentation": krate.documentation,
+                    "repository": krate.repository,
+                    "categories": categories,
+                    "yanked": record.yanked,
+                }))
+            }).collect::<Result<Vec<_>, Error>>()?,
+        });
+        Ok(Either::E1(Html(
+            engine.render("categories", &context).unwrap(),
+        )))
+    });
+
+    transaction.await
+}
diff --git a/crates/alexandrie/src/frontend/categories_index.rs b/crates/alexandrie/src/frontend/categories_index.rs
new file mode 100644
index 00000000..a069f245
--- /dev/null
+++ b/crates/alexandrie/src/frontend/categories_index.rs
@@ -0,0 +1,83 @@
+use std::sync::Arc;
+
+use axum::extract::State;
+use axum::response::Redirect;
+use axum_extra::either::Either;
+use axum_extra::response::Html;
+use diesel::dsl as sql;
+use diesel::prelude::*;
+
+use json::json;
+
+use crate::config::AppState;
+use crate::db::models::Crate;
+use crate::db::schema::*;
+use crate::error::{Error, FrontendError};
+use crate::utils::auth::frontend::Auth;
+
+pub(crate) async fn get(
+    State(state): State<Arc<AppState>>,
+    user: Option<Auth>,
+) -> Result<Either<Html<String>, Redirect>, FrontendError> {
+    if state.is_login_required() && user.is_none() {
+        return Ok(Either::E2(Redirect::to("/account/login")));
+    }
+
+    let db = &state.db;
+    let state = Arc::clone(&state);
+
+    let transaction = db.transaction(move |conn| {
+        //? Get the total count of search results.
+        let total_results = categories::table
+            .select(sql::count(categories::id))
+            .first::<i64>(conn)?;
+
+        let categories = categories::table
+            .select((categories::name, categories::description))
+            .load::<(String, String)>(conn)?;
+
+        let auth = &state.frontend.config.auth;
+        let engine = &state.frontend.handlebars;
+        let context = json!({
+            "auth_disabled": !auth.enabled(),
+            "registration_disabled": !auth.allow_registration(),
+            "user": user.map(|it| it.into_inner()),
+            "instance": &state.frontend.config,
+            "total_results": total_results,
+            "categories": categories.into_iter().map(|categorie| {
+                let crates = crate_categories::table
+                    .inner_join(categories::table)
+                    .inner_join(crates::table)
+                    .filter(categories::name.eq(&categorie.0))
+                    .order_by(crates::downloads.desc())
+                    .select(crates::id)
+                    .limit(10)
+                    .load::<i64>(conn)?
+                    .into_iter()
+                    .map(|crate_ids| {
+                        let categorie_crate: Crate = crates::table
+                            .filter(crates::id.eq(crate_ids))
+                            .first(conn)?;
+                        Ok(categorie_crate)
+                    })
+                    .collect::<Result<Vec<Crate>, Error>>()?;
+                let count = crate_categories::table
+                    .inner_join(categories::table)
+                    .inner_join(crates::table)
+                    .filter(categories::name.eq(&categorie.0))
+                    .select(sql::count(crates::id))
+                    .first::<i64>(conn)?;
+                Ok(json!({
+                    "name":&categorie.0,
+                    "description":&categorie.1,
+                    "crates": crates,
+                    "count": count
+                }))}).collect::<Result<Vec<_>, Error>>()?,
+        });
+        Ok(Either::E1(Html(
+            engine.render("categories_index", &context).unwrap(),
+        )))
+    });
+
+    transaction.await
+}
diff --git a/crates/alexandrie/src/frontend/mod.rs b/crates/alexandrie/src/frontend/mod.rs
index a67998e0..91589d6c 100644
--- a/crates/alexandrie/src/frontend/mod.rs
+++ b/crates/alexandrie/src/frontend/mod.rs
@@ -15,6 +15,12 @@ pub mod most_downloaded;
 /// Search pages (eg. "/search?q=\<term\>").
 pub mod search;
 
+/// Categories page (eq. "/categories").
+pub mod categories_index;
+
+/// Categories page (eq. "/categories/\<name\>").
+pub mod categories;
+
 /// Keywords index page (eq. "/keywords").
 pub mod keywords_index;
 
diff --git a/crates/alexandrie/src/main.rs b/crates/alexandrie/src/main.rs
index 64c2e205..7c6e9841 100644
--- a/crates/alexandrie/src/main.rs
+++ b/crates/alexandrie/src/main.rs
@@ -96,6 +96,8 @@ fn frontend_routes(state: Arc<AppState>, frontend_config: FrontendConfig) -> Rou
         .route("/most-downloaded", get(frontend::most_downloaded::get))
         .route("/last-updated", get(frontend::last_updated::get))
         .route("/crates/:crate", get(frontend::krate::get))
+        .route("/categories", get(frontend::categories_index::get))
+        .route("/categories/:categorie", get(frontend::categories::get))
         .route("/keywords", get(frontend::keywords_index::get))
         .route("/keywords/:keyword", get(frontend::keywords::get))
         .route("/keywords_search", get(frontend::keywords_search::get))
diff --git a/templates/categories.hbs b/templates/categories.hbs
new file mode 100644
index 00000000..09f8c721
--- /dev/null
+++ b/templates/categories.hbs
@@ -0,0 +1,313 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    {{> partials/head}}
+    <style>
+        .hero {
+            width: 100%;
+        }
+
+        .hero-content-container {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            width: 100%;
+            padding: 40px 10px 10px;
+        }
+
+        .hero-title {
+            font-size: 30px;
+            font-weight: bolder;
+            text-align: center;
+        }
+
+        .hero-subtitle {
+            font-size: 24px;
+            text-align: center;
+        }
+
+        .stats-container {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            padding-top: 10px;
+        }
+
+        .stats {
+            align-items: center;
+            justify-content: center;
+            white-space: normal;
+            padding: 10px 0;
+            display: flex;
+            flex-direction: column;
+            width: 1400px;
+            border-top: 2px solid var(--fg-color);
+            border-bottom: 2px solid var(--fg-color);
+        }
+
+        .stat {
+            font-size: 17px;
+        }
+
+        .search-results-container {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            margin: 10px 0;
+        }
+
+        .search-results {
+            width: 1400px;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            flex-direction: column;
+            padding: 10px;
+        }
+
+        @media (max-width: 1400px) {
+            .search-results {
+                width: 100%;
+            }
+
+            .stats {
+                width: 90%;
+            }
+        }
+
+        .search-result {
+            width: 100%;
+            display: grid;
+            grid-template-rows: 1fr;
+            grid-template-columns: 1fr min-content;
+            background-color: var(--lighter-bg-color);
+            color: var(--fg-color);
+            padding: 20px;
+            border-radius: 10px;
+            cursor: pointer;
+            transition: transform 0.15s;
+            margin-top: 10px;
+        }
+
+        .search-result:first-child {
+            margin-top: 0;
+        }
+
+        .search-result:hover {
+            transform: scale(1.03);
+        }
+
+        .search-result-infos {
+            padding: 10px;
+            display: flex;
+            align-items: flex-start;
+            justify-content: center;
+            flex-direction: column;
+        }
+
+        .search-result-title {
+            font-size: 24px;
+            font-weight: bold;
+        }
+
+        .search-result-yank {
+            display: inline;
+            font-size: 11px;
+            vertical-align: 30%;
+            border: 3px solid #F52;
+            padding: 1px 6px;
+            border-radius: 7px;
+            color: #F52;
+        }
+
+        .search-result-desc {
+            font-size: 18px;
+        }
+
+        .search-result-keywords {
+            display: flex;
+            margin-top: 2px;
+        }
+
+        .search-result-keyword {
+            margin-left: 7px;
+            font-weight: bold;
+        }
+
+        .search-result-keyword:first-child {
+            margin-left: 0;
+        }
+
+        .search-result-stats {
+            border-left: solid 2px var(--fg-color);
+            padding: 10px;
+            display: flex;
+            align-items: flex-start;
+            justify-content: center;
+            flex-direction: column;
+        }
+
+        .search-result-stats-entry {
+            white-space: nowrap;
+        }
+
+        .search-results-empty {
+            font-weight: bold;
+            font-size: 20px;
+            height: 50px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .pagination-container {
+        }
+
+        .pagination {
+            display: grid;
+            grid-template-columns: repeat(3, min-content);
+            grid-template-rows: min-content;
+        }
+
+        .pagination-button {
+            width: 100%;
+            height: 100%;
+        }
+
+        .pagination-prev,
+        .pagination-current,
+        .pagination-next {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            white-space: nowrap;
+            background-color: var(--bg-color);
+        }
+
+        .pagination-prev,
+        .pagination-next {
+            width: 100%;
+            background: transparent;
+            cursor: pointer;
+            font: inherit;
+            font-weight: bold;
+            text-align: center;
+            color: inherit;
+            background-color: inherit;
+            padding: 5px 10px;
+            border: 2px solid var(--darker-fg-color);
+            transition: background-color 0.15s, border-color 0.15s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .pagination-prev:hover,
+        .pagination-next:hover,
+        .pagination-prev:focus,
+        .pagination-next:focus {
+            border: 2px solid var(--fg-color);
+            background-color: var(--dark-bg-color);
+        }
+
+        .pagination-prev.pagination-disabled,
+        .pagination-next.pagination-disabled {
+            color: var(--dark-fg-color);
+            background-color: var(--dark-bg-color);
+            cursor: default;
+            pointer-events: none;
+        }
+
+        .pagination-prev {
+            border-radius: 5px 0 0 5px;
+        }
+
+        .pagination-current {
+            border-top: 2px solid var(--darker-fg-color);
+            border-bottom: 2px solid var(--darker-fg-color);
+            padding: 5px 10px;
+        }
+
+        .pagination-next {
+            border-radius: 0 5px 5px 0;
+        }
+
+        @media (max-width: 600px) {
+            .search-result-stats {
+                display: none;
+            }
+        }
+
+        @media (prefers-color-scheme: dark) {
+            .pagination-prev.pagination-disabled,
+            .pagination-next.pagination-disabled {
+                color: var(--fg-color);
+                background-color: var(--lighter-bg-color);
+            }
+        }
+    </style>
+</head>
+
+<body>
+    {{> partials/navbar}}
+    <div class="hero">
+        <div style="height: 50px"></div>
+        <div class="hero-content-container">
+            <div class="hero-title">{{name}} category</div>
+            <div class="hero-subtitle">{{description}}</div>
+        </div>
+    </div>
+    <div class="stats-container">
+        <div class="stats">
+            <div class="stats-block">
+                <div class="stat"><b>{{ total_results }}</b>&nbsp;total results</div>
+            </div>
+        </div>
+    </div>
+    <div class="search-results-container">
+        {{> partials/pagination pagination}}
+        <div class="search-results">
+            {{#if results}}
+            {{#each results}}
+            <a class="search-result elevated" href="/crates/{{ this.name }}">
+                <div class="search-result-infos">
+                    <div class="search-result-title">
+                        {{ this.name }} #{{ this.version }}
+                        {{#if this.yanked}}
+                        <div class="search-result-yank">YANKED</div>
+                        {{/if}}
+                    </div>
+                    <div class="search-result-desc">{{ this.description }}</div>
+                    {{#if this.categories}}
+                    <div class="search-result-categories">
+                        {{#each this.categories}}
+                        <div class="search-result-categorie">#{{ this }}</div>
+                        {{/each}}
+                    </div>
+                    {{/if}}
+                </div>
+                <div class="search-result-stats">
+                    <div class="search-result-stats-entry"><b>{{ this.downloads }}</b> downloads</div>
+                    <div class="search-result-stats-entry">Created on <b>{{ this.updated_at }}</b></div>
+                    <div class="search-result-stats-entry">Last updated on <b>{{ this.updated_at }}</b></div>
+                </div>
+            </a>
+            {{/each}}
+            {{else}}
+            <div class="search-results-empty">No crates...</div>
+            {{/if}}
+        </div>
+        {{> partials/pagination pagination}}
+    </div>
+</body>
+
+</html>
diff --git a/templates/categories_index.hbs b/templates/categories_index.hbs
new file mode 100644
index 00000000..6fa42267
--- /dev/null
+++ b/templates/categories_index.hbs
@@ -0,0 +1,252 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    {{> partials/head}}
+    <style>
+        .hero {
+            width: 100%;
+        }
+
+        .hero-content-container {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            width: 100%;
+            padding: 40px 10px 10px;
+        }
+
+        .hero-title {
+            font-size: 30px;
+            font-weight: bolder;
+            text-align: center;
+        }
+
+        .hero-subtitle {
+            font-size: 24px;
+            text-align: center;
+        }
+
+        .hero-links {
+            margin-top: 7px;
+            display: flex;
+        }
+
+        .hero-link {
+            display: block;
+            border-radius: 5px;
+            border: solid 1.5px var(--fg-color);
+            margin-left: 5px;
+            padding: 2px 8px;
+        }
+
+        .hero-link:first-child {
+            margin-left: 0;
+        }
+
+        .hero-link:hover,
+        .hero-link:focus {
+            background-color: var(--fg-color);
+            color: var(--bg-color);
+        }
+
+        .stats-container {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            padding-top: 10px;
+        }
+
+        .stats {
+            align-items: center;
+            justify-content: center;
+            white-space: normal;
+            padding: 10px 0;
+            display: flex;
+            flex-direction: column;
+            width: 1400px;
+            border-top: 2px solid var(--fg-color);
+            border-bottom: 2px solid var(--fg-color);
+        }
+
+        .stat {
+            font-size: 17px;
+        }
+
+
+        .content-grid {
+            padding: 10px;
+            display: grid;
+            grid-template-columns: repeat(3, 33%);
+            grid-auto-rows: 1fr
+            align-items: start;
+            justify-content: center;
+        }
+
+        @media (max-width: 1400px) {
+            .content-grid {
+                width: 100%;
+            }
+
+            .stats {
+                width: 90%;
+            }
+        }
+
+        .card-content {
+            flex-grow: 1;
+        }
+
+        .content-grid-element {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            padding: 1.5em;
+        }
+
+
+        .content-grid-title {
+            width: 100%;
+            text-align: center;
+            font-size: 21px;
+            font-weight: bold;
+            padding: 5px 0;
+            align-self: flex-start;
+        }
+
+        .content-grid-desc {
+            width: 100%;
+            text-align: center;
+            font-size: 16px;
+            padding: 5px 0;
+            height: 5em;
+        }
+
+        .content-grid-list {
+            font-size: 18px;
+            font-weight: bold;
+        }
+
+        .content-grid-entries {
+            width: 100%;
+            counter-reset: rank;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            padding: 10px;
+        }
+
+        .content-grid-entry::before {
+            counter-increment: rank;
+        }
+
+        .content-grid-entry {
+            width: 100%;
+            color: var(--fg-color);
+            background-color: var(--lighter-bg-color);
+            padding: 10px 20px;
+            border-radius: 10px;
+            margin-top: 10px;
+        }
+
+        .content-grid-entry:first-child {
+            margin-top: 0;
+        }
+        .content-grid-empty,
+        .last-updated-empty {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+        }
+
+        .card-footer {
+            align-self: flex-end;
+            width: 100%;
+            padding: 5px;
+        }
+
+        .card-footer-button {
+            width: 100%;
+            text-decoration: none;
+            text-align: center;
+            padding: 7px 10px;
+            font-weight: bold;
+            font-size: 20px;
+            display: block;
+            border-radius: 30px;
+            color: var(--fg-color);
+            background-color: var(--light-bg-color);
+            transition: transform 0.15s;
+        }
+
+        .card-footer-button:hover,
+        .card-footer-button:focus {
+            transform: scale(1.03);
+        }
+
+        @media (max-width: 1000px) {
+            .content-grid {
+                grid-template-rows: repeat(2, 1fr);
+                grid-template-columns: 1fr;
+            }
+
+            .content-grid-entries,
+            .last-updated-entries,
+            .card-footer {
+                padding-left: 0;
+                padding-right: 0;
+            }
+
+            .content-grid,
+            .last-updated {
+                border-right: none;
+                border-left: none;
+            }
+
+            .last-updated {
+                padding-top: 5px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    {{> partials/navbar}}
+    <div class="hero">
+        <div style="height: 50px"></div>
+        <div class="hero-content-container">
+            <div class="hero-title">Categories</div>
+            <div class="hero-subtitle">Categories and their most downloaded crates</div>
+        </div>
+    </div>
+    <div class="content-grid">
+        {{#if categories}}
+        {{#each categories}}
+        <div class="content-grid-element">
+            <div class="content-grid-title"><a href="/categories/{{this.name}}">{{this.name}}</a></div>
+            <div class="content-grid-desc"><a href="/categories/{{this.name}}">{{this.description}}</a></div>
+                {{#if this.crates}}
+		<div class="content-grid-entries">
+                {{#each this.crates}}{{#if @index}},&nbsp;{{/if}}<a href="/crates/{{this.name}}">{{ this.name }}</a>{{/each}}
+                </div>
+                {{else}}
+                <div class="content-grid-empty">Empty list.</div>
+                {{/if}}
+            <div class="card-footer">
+		    <a class="card-footer-button elevated" href="/categories/{{this.name}}">See {{this.count}} crates</a>
+            </div>
+        </div>
+        {{/each}}
+        {{else}}
+        <div class="search-results">
+            <div class="search-results-empty">No crates...</div>
+        </div>
+        {{/if}}
+    </div>
+</body>
+
+</html>
diff --git a/templates/crate.hbs b/templates/crate.hbs
index 26594ac6..e6f6fb42 100644
--- a/templates/crate.hbs
+++ b/templates/crate.hbs
@@ -298,7 +298,7 @@
                     <div class="stat-list-label">
                         {{#if @first}}Part of{{else}}and{{/if}}&nbsp;
                     </div>
-                    <div class="stat-list-value">{{ this }}</div>
+		            <div class="stat-list-value"><a href="/categories/{{ this }}">{{ this }}</div>
                     {{/each}}
                 </div>
                 {{/if}}
diff --git a/templates/partials/navbar.hbs b/templates/partials/navbar.hbs
index 660cce9a..ac0c21dd 100644
--- a/templates/partials/navbar.hbs
+++ b/templates/partials/navbar.hbs
@@ -294,6 +294,9 @@
         <a class="navbar-brand navbar-tag" href="/">
             {{ instance.title }}
         </a>
+        <a class="navbar-brand navbar-tag" href="/categories">
+            Categories
+        </a>
         <a class="navbar-brand navbar-tag" href="/keywords">
             Keywords
         </a>
@@ -333,6 +336,9 @@
         <a class="navbar-brand navbar-tag" href="/">
             {{ instance.title }}
         </a>
+        <a class="navbar-brand navbar-tag" href="/categories">
+            Categories
+        </a>
         <a class="navbar-brand navbar-tag" href="/keywords">
             Keywords
         </a>