docs: adjust support button and README (#147)

- make crow icon background match README
- Use liberapay link
- add liberapay badges
- add link to own Crow instance
- remove unneeded javascript

Reviewed-on: https://codeberg.org/crowci/crow/pulls/147
Co-authored-by: pat-s <patrick.schratz@gmail.com>
Co-committed-by: pat-s <patrick.schratz@gmail.com>

README.md

@@ -2,7 +2,7 @@
 
 <p align="center">
   <a href="https://squidfunk.github.io/mkdocs-material/">
-    <img src="https://codeberg.org/crowci/crow/raw/branch/main/assets/crow-logo-white-bg-round.png" width="350" alt="Material for MkDocs">
+    <img src="https://codeberg.org/crowci/crow/raw/branch/main/assets/crow-logo-gray-bg-round.png" width="350" alt="Material for MkDocs">
   </a>
 </p>
 
@@ -40,7 +40,21 @@ A slim and self-hostable CI/CD engine with great extensibility.
   </a>
 </p>
 
-## Docs
+<p align="center">
+  <img src="https://img.shields.io/liberapay/receives/crowci.svg?logo=liberapay">
+</p>
+
+<p align="center">
+  <a href="https://liberapay.com/pat-s/donate">
+    <img alt="Donate using Liberapay" src="https://liberapay.com/assets/widgets/donate.svg">
+  </a>
+</p>
+
+<p align="center">
+👉️ <strong>See it in action at <a href="https://ci.crowci.dev">ci.crowci.dev</a></strong>
+</p>
+
+## Docs (Developer)
 
 Built with [mkdocs-material](https://squidfunk.github.io/mkdocs-material/).
 
@@ -53,4 +67,4 @@ The following is a list of notes to keep an overview:
 - Custom primary color
 - Custom dark background color
 - `.explicit-col-width` classes to be able to have tables with fixed column widths.
-- Custom "donation" button in `header.html` from "buymeacoffee.com" (including custom css classes `.bmc-btn-container ` and `.bmc-btn`)
+- Custom "support" button in `header.html` (including custom css classes `.support-btn`)

docs/overrides/partials/header.html

@@ -58,21 +58,9 @@ endif %}
       </div>
     </div>
 
-    <div class="md-header__actions" id="header-actions">
-      <script
-        type="text/javascript"
-        src="javascripts/buymeacoffee.js"
-        data-name="bmc-button"
-        data-slug="patrickschratz"
-        data-color="#ff9b00"
-        data-emoji="💌"
-        data-font="Inter"
-        data-text="Support"
-        data-outline-color="#000000"
-        data-font-color="#000000"
-        data-coffee-color="#FFDD00"
-      ></script>
-    </div>
+    <a href="https://liberapay.com/crowci/donate" class="support-btn" target="_blank" rel="noopener">
+      💌 &nbsp;Support
+    </a>
 
     <!-- Color palette toggle -->
     {% if config.theme.palette %} {% if not config.theme.palette is mapping %} {% include "partials/palette.html" %} {%

docs/stylesheets/extra.css

@@ -57,16 +57,14 @@
   width: 15%;
 }
 
-.bmc-btn-container {
-  height: auto !important;
-  width: auto !important;
-  /* margin: 20px; */
-}
-
-.bmc-btn {
-  font-size: 0.7rem !important;
-  min-width: 5px !important;
-  padding: 0px 10px !important;
-  height: auto !important;
-  width: auto !important;
+.support-btn {
+  font-size: 0.7rem;
+  color: black;
+  min-width: 5px;
+  padding: 3px 10px;
+  height: auto;
+  width: auto;
+  /* static light theme link color  */
+  background-color: #ff9b00;
+  border-radius: 12px;
 }

mkdocs.yaml

@@ -99,7 +99,6 @@ extra_css:
   - stylesheets/extra.css
 extra_javascript:
   - javascripts/extra.js
-  - javascripts/buymeacoffee.js
 
 markdown_extensions:
   - pymdownx.highlight: