From 926d972faaed6c45688ea7131a5291fc621926cb Mon Sep 17 00:00:00 2001
From: Jakub Nowicki <kuba@appsilon.com>
Date: Thu, 30 Nov 2023 15:40:21 +0100
Subject: [PATCH] chore: Update pkgdown site setup.

---
 pkgdown/_pkgdown.yml | 16 ++++++++++++++--
 pkgdown/extra.css    | 39 ++++++++++++++++++++++-----------------
 2 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/pkgdown/_pkgdown.yml b/pkgdown/_pkgdown.yml
index 75119d25..774ac90a 100644
--- a/pkgdown/_pkgdown.yml
+++ b/pkgdown/_pkgdown.yml
@@ -22,6 +22,9 @@ template:
         gtag('js', new Date());
         gtag('config', 'G-FQQZL5V93G');
       </script>
+      <script async defer src="https://buttons.github.io/buttons.js"></script>
+    before_navbar: |
+      <a href="https://rhinoverse.dev" class="home"><i class="fa fa-lg fa-chevron-left"></i></a>
 
 url: https://appsilon.github.io/shiny.semantic/
 
@@ -38,8 +41,8 @@ navbar:
       text: "Reference"
       href: reference/index.html
     - icon: fa-newspaper-o
-      text: "Changes"
-      href: CHANGELOG.html
+      text: "Changelog"
+      href: news/index.html
     - icon: fa-user-o
       text: "CoC"
       href: CODE_OF_CONDUCT.html
@@ -49,6 +52,15 @@ navbar:
     - icon: fa-twitter fa-lg
       href: https://twitter.com/Appsilon
 
+home:
+  sidebar:
+    structure: [star, links, license, community, citation, authors, dev]
+    components:
+      star:
+        title: GitHub
+        text: |
+          <a class="github-button" href="https://github.com/appsilon/shiny.semantic" data-size="large" data-show-count="true" aria-label="Star Appsilon/shiny.semantic on GitHub">Star</a>
+
 articles:
 - title: All tutorials
   desc: ~
diff --git a/pkgdown/extra.css b/pkgdown/extra.css
index 250e54d2..fc4795db 100644
--- a/pkgdown/extra.css
+++ b/pkgdown/extra.css
@@ -1,13 +1,17 @@
+:root {
+  --primary-color: #F0873B;
+}
+
 .navbar {
-  background-color: #F0873B !important;
+  background-color: var(--primary-color) !important;
 }
 
 #navbar > ul.navbar-nav > li.nav-item a:hover {
-  background-color: #F0873B !important;
+  background-color: var(--primary-color) !important;
 }
 
 .navbar-dark .navbar-nav .active>.nav-link {
-  background-color: #F0873B !important;
+  background-color: var(--primary-color) !important;
   color: #fff;
 }
 
@@ -21,24 +25,25 @@ nav .text-muted {
 }
 
 a {
-  color: #F0873B;
+  color: var(--primary-color);
 }
 
 a:hover {
-  color: #b6652b;
+  color: #2c2b2b;
 }
 
 button.btn.btn-primary.btn-copy-ex {
-  background-color: #F0873B;
-  border-color: #F0873B;
-}
-
-.app-preview {
-  margin: 1.5em 0.75em;
-  padding: 0.25em;
-  box-shadow:
-    0 3.9px 4.6px rgba(0, 0, 0, 0.08),
-    0 12.3px 8.4px rgba(0, 0, 0, 0.056),
-    0 18.8px 19.2px rgba(0, 0, 0, 0.037),
-    0 22px 40px rgba(0, 0, 0, 0.019);
+  background-color: var(--primary-color);
+  border-color: var(--primary-color);
+}
+
+.home {
+  left: 0px;
+  position: absolute;
+  padding: 8px 30px;
+  color: rgba(255,255,255,0.55);
+}
+
+.home:hover {
+  color: rgba(255,255,255,0.9);
 }