feat: custom header links #8

readme.md

@@ -56,6 +56,18 @@ Every hour `ghstats` loads the list of public repositories and their statistics,
 
 All public repositories that can be accessed are saved. If you need more detailed configuration – open PR please.
 
+## Configuration
+
+### Custom links
+
+If you plan to display your stats publicly, there is an option to add custom links to the header via environment variables, e.g.:
+
+```sh
+GHS_CUSTOM_LINKS="Blog|https://medium.com/@vladkens,Github|https://github.com/vladkens,Buy me a coffee|https://buymeacoffee.com/vladkens"
+```
+
+See example [here](https://github.com/vladkens/ghstats/issues/8).
+
 ## 🤝 Contributing
 
 All contributions are welcome! Feel free to open an issue or submit a pull request.

src/app.css

@@ -1,9 +1,3 @@
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
 .table-popular {
   border: 2px solid var(--pico-card-background-color);
 }
@@ -12,9 +6,11 @@
   background-color: var(--pico-card-background-color);
 }
 
-.flex { display: flex; }
+.flex-row { display: flex; flex-direction: row; }
 .flex-col { display: flex; flex-direction: column; }
 .justify-center { justify-content: center; }
+.justify-end { justify-content: flex-end; }
+.justify-between { justify-content: space-between; }
 .items-center { align-items: center; }
 .grow { flex-grow: 1; }
 .grow-0 { flex-grow: 0; }
@@ -34,6 +30,8 @@
 .p-0 { padding: 0; }
 .pt-0 { padding-top: 0; }
 .pr-0 { padding-right: 0; }
+.pr-2 { padding-right: 0.5rem; }
+.pr-4 { padding-right: 1rem; }
 .pb-0 { padding-bottom: 0; }
 .pl-0 { padding-left: 0; }
 .m-0 { margin: 0; }

src/pages.rs

@@ -33,6 +33,31 @@ fn maybe_url(item: &(String, Option<String>)) -> Markup {
   }
 }
 
+fn get_custom_links() -> Vec<(String, String)> {
+  let links = std::env::var("GHS_CUSTOM_LINKS").unwrap_or_default();
+  let links: Vec<(String, String)> = links
+    .split(",")
+    .map(|x| {
+      let parts: Vec<&str> = x.split("|").collect();
+      if parts.len() != 2 {
+        return None;
+      }
+
+      if parts[0].is_empty() || parts[1].is_empty() {
+        return None;
+      }
+
+      Some((parts[0].to_string(), parts[1].to_string()))
+    })
+    .filter(|x| x.is_some())
+    .map(|x| x.unwrap())
+    .collect();
+
+  // println!("GHS_LINKS: {:?}", std::env::var("GHS_LINKS").unwrap_or_default());
+  // println!("links: {:?}", links);
+  links
+}
+
 fn base(state: &Arc<AppState>, navs: Vec<(String, Option<String>)>, inner: Markup) -> Markup {
   let (app_name, app_version) = (env!("CARGO_PKG_NAME"), env!("CARGO_PKG_VERSION"));
 
@@ -56,8 +81,8 @@ fn base(state: &Arc<AppState>, navs: Vec<(String, Option<String>)>, inner: Marku
         style { (PreEscaped(include_str!("app.css"))) }
       }
       body {
-        main class="container pt-0" {
-          div class="header" {
+        main class="container-fluid pt-0" style="max-width: 1450px;" {
+          div class="flex-row items-center gap-2 justify-between" {
             nav aria-label="breadcrumb" {
               ul {
                 li { a href="/" { "Repos" } }
@@ -67,15 +92,21 @@ fn base(state: &Arc<AppState>, navs: Vec<(String, Option<String>)>, inner: Marku
               }
             }
 
-            div class="flex items-center gap-2" {
+            div class="flex-row items-center gap-2" {
+              div class="flex-row items-center gap-4 pr-4" style="font-size: 18px;" {
+                @for (name, url) in &get_custom_links() {
+                  a href=(url) target="_blank" { (name) }
+                }
+              }
+
               @if is_new_release {
                 a href=(format!("https://github.com/vladkens/ghstats/releases/tag/v{last_release}"))
                   target="_blank" class="no-underline"
                   data-tooltip="New release available!" data-placement="bottom" { "🚨" }
               }
 
               a href="https://github.com/vladkens/ghstats"
-                class="secondary flex items-center gap-2 no-underline font-mono"
+                class="secondary flex-row items-center gap-2 no-underline font-mono"
                 style="font-size: 18px;"
                 target="_blank"
               {
@@ -234,7 +265,7 @@ pub async fn repo_page(
     div class="grid" style="grid-template-columns: 1fr 2fr;" {
       div class="grid" style="grid-template-rows: 2fr 1fr; grid-template-columns: 1fr;" {
         article class="mb-0" {
-          hgroup class="flex flex-col gap-2" {
+          hgroup class="flex-row flex-col gap-2" {
             h3 {
               a href=(format!("https://github.com/{}", repo)) class="contrast" { (totals.name) }
             }
@@ -245,15 +276,15 @@ pub async fn repo_page(
         div class="grid" {
           article class="flex-col" {
             h6 class="mb-0" { "Total Clones" }
-            h4 class="mb-0 grow flex items-center" {
+            h4 class="mb-0 grow flex-row items-center" {
               (totals.clones_uniques.separate_with_commas())
               " / "
               (totals.clones_count.separate_with_commas())
             }
           }
           article class="flex-col" {
             h6 class="mb-0" { "Total Views" }
-            h4 class="mb-0 grow flex items-center" {
+            h4 class="mb-0 grow flex-row items-center" {
               (totals.views_uniques.separate_with_commas())
               " / "
               (totals.views_count.separate_with_commas())