docs updates

adjust styles
move development starting guide
switch to webp for images
add sponsors page

docs/index.md

@@ -14,9 +14,9 @@ hide:
 
 <div style="max-width: 70%; margin: 0 auto; display: block;">
 
-<img src="assets/banner_light@2x.png" alt="homepage" style="max-width: 100%; max-height: 175px; margin: 0 auto; display: block;" />
+<img src="assets/banner_light@2x.webp" alt="homepage" style="max-width: 100%; max-height: 175px; margin: 0 auto; display: block;" />
 
-<img src="assets/homepage_demo_clip.png" alt="homepage" style="max-width: 100%; margin: 0 auto; display: block;" />
+<img src="assets/homepage_demo_clip.webp" alt="homepage" style="max-width: 100%; margin: 0 auto; display: block;" />
 
 <p style="margin: 0 0 30px;">A modern, <em>fully static, fast</em>, secure <em>fully proxied</em>, highly customizable application dashboard with integrations for over 100 services and translations into multiple languages. Easily configured via YAML files or through docker label discovery.</p>
 
@@ -26,4 +26,7 @@ hide:
   .md-header__source {
     display: none;
   }
+  .md-typeset img, .md-typeset svg, .md-typeset video {
+    box-shadow: none;
+  }
 </style>

docs/more/sponsors.md

@@ -0,0 +1,57 @@
+---
+title: Sponsors
+description: Homepage is supported by these awesome people and companies.
+---
+
+If you would like to support the Homepage project, you can do so by becoming a sponsor. Your sponsorship helps to keep the project running and growing.
+
+<div class="grid" markdown>
+
+[:simple-github: GitHub Sponsors](https://github.com/sponsors/gethomepage){ .md-button }
+
+[:simple-opencollective: OpenCollective](https://opencollective.com/homepage){ .md-button }
+
+[:simple-patreon: Patreon](https://www.patreon.com/gethomepage){ .md-button .w-full }
+
+</div>
+
+<hr style="margin-top: 48px;" />
+
+These companies help the Homepage project by providing services, tools, and resources.
+
+<div class="grid" markdown>
+  <div style="margin-bottom: 16px;">
+    <a href="https://www.digitalocean.com/?refcode=df14bcb7c016&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge"><img src="https://web-platforms.sfo2.cdn.digitaloceanspaces.com/WWW/Badge%202.svg" alt="DigitalOcean" style="max-width: 100%; height: 64px; display: block;" /></a>
+    <p>
+      DigitalOcean provides the GitHub Actions runner for the project.  Dramatically speeding up the CI/CD process.
+    </p>
+  </div>
+
+  <div style="margin-bottom: 16px;">
+    <a href="https://crowdin.com/project/homepage"><img src="https://support.crowdin.com/assets/logos/core-logo/png/crowdin-core-logo-cWhite.png" alt="Crowdin" style="max-width: 100%; height: 64px; display: block;" /></a>
+    <p>
+      Crowdin provides the translation platform for the project.  Making it easy to translate the project into multiple languages.
+    </p>
+  </div>
+
+  <div style="margin-bottom: 16px;">
+    <a href="https://glimelab.ai/"><img src="https://framerusercontent.com/images/28KxmT1G06GrFM8TKeNAC03QIms.svg" alt="Crowdin" style="max-width: 100%; height: 64px; display: block;" /></a>
+    <p>
+      GlimeLab provides the project with the awesome AI chatbot here and on GitHub and Discord.
+    </p>
+  </div>
+
+  <div style="margin-bottom: 16px;">
+    <a href="https://www.jetbrains.com/"><img src="https://resources.jetbrains.com/storage/products/company/brand/logos/jetbrains.png" alt="JetBrains" style="max-width: 100%; height: 64px; display: block;" /></a>
+    <p>
+      JetBrains provides the project with free licenses for their awesome tools.
+    </p>
+  </div>
+
+  <div style="margin-bottom: 16px;">
+    <a href="https://www.buysellads.com/"><img src="https://www.buysellads.com/hubfs/raw_assets/public/BSA-2023/images/logo.svg" alt="BuySellAds" style="max-width: 100%; height: 64px; display: block; filter: invert();" /></a>
+    <p>
+      BuySellAds provides the project with the ability to monetize the website, with high quality ads from the CarbonAds network.  All earnings are sent directly to the projects OpenCollective.
+    </p>
+  </div>
+</div>

docs/stylesheets/extra.css

@@ -9,7 +9,9 @@
   --md-default-fg-color--light: white;
   --md-default-fg-color--lighter: hsla(0, 0%, 100%, 0.6);
   --md-default-bg-color: hsla(0, 0%, 100%, 0.8);
-  --md-code-bg-color: hsla(0, 0%, 100%, 0.8);
+  --md-code-bg-color: hsla(0, 0%, 100%, 0.6);
+  --md-code-bg-color--lighter: hsla(0, 0%, 100%, 0.6);
+  --md-default-fg-color: white;
 }
 
 [data-md-toggle="search"]:not(:checked) ~ .md-header .md-search__form::after {
@@ -90,12 +92,12 @@
 }
 
 body {
-  background-image: url("https://github.com/gethomepage/homepage/blob/main/docs/assets/blossom_valley.jpg?raw=true");
+  background-image: url("/assets/blossom_valley.jpg");
   background-size: cover;
   background-attachment: fixed;
   background-position: center;
   background-color: transparent;
-  color: #fff;
+  color: #ffffffee;
 }
 
 .blur-overlay {
@@ -104,8 +106,8 @@ body {
   width: 100%;
   height: 100%;
   background: hsla(0, 0%, 0%, 0);
-  backdrop-filter: blur(64px);
+  backdrop-filter: blur(128px);
-  -webkit-backdrop-filter: blur(64px);
+  -webkit-backdrop-filter: blur(128px);
 }
 
 .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link,
@@ -206,3 +208,48 @@ body {
 .md-search-result .md-typeset h1 {
   color: #fff;
 }
+
+[data-md-color-scheme="default"] .highlight span.filename,
+[data-md-color-scheme="default"] .linenodiv a {
+  color: #36464e;
+  font-weight: light;
+}
+
+.linenodiv a {
+  text-decoration: none;
+}
+
+.md-typeset .admonition,
+.md-typeset details {
+  background-color: transparent;
+}
+
+.md-typeset img,
+.md-typeset svg,
+.md-typeset video {
+  box-shadow: 0 0 1rem 0.25rem hsla(0, 0%, 0%, 0.1);
+}
+
+.highlight {
+  box-shadow: 0 0 1rem 0.25rem hsla(0, 0%, 0%, 0.1);
+}
+
+.md-typeset .admonition.tip,
+.md-typeset details.tip {
+  box-shadow: 0 0 1rem 0.25rem hsl(171.83deg 100% 37.45% / 20%);
+}
+
+.md-typeset .admonition.note,
+.md-typeset details.note {
+  box-shadow: 0 0 1rem 0.25rem hsl(214.29deg 100% 37.45% / 20%);
+}
+
+.md-typeset .admonition.warning,
+.md-typeset details.warning {
+  box-shadow: 0 0 1rem 0.25rem hsl(40.91deg 100% 37.45% / 20%);
+}
+
+.md-typeset .admonition.danger,
+.md-typeset details.danger {
+  box-shadow: 0 0 1rem 0.25rem hsl(0deg 100% 37.45% / 20%);
+}

docs/widgets/authoring/component.md

@@ -63,7 +63,7 @@ This hook is used to fetch data from the API. We cover this hook in more detail
 
 Homepage provides a set of components to help you build your widget UI. These components are designed to provide a consistent layout, and all widgets are expected to use these components.
 
-![Component Sections](../../assets/sections.png)
+![Component Sections](../../assets/sections.webp)
 
 **`<Container>`**
 

docs/widgets/authoring/getting-started.md

@@ -1,8 +1,12 @@
 ---
-title: Development
+title: Getting Started
-description: Homepage Development
+description: Get started developing for Homepage.
 ---
 
+We'll cover getting homepage up and running on your local machine for development, as well as some guidelines for developing new features and widgets.
+
+## Development
+
 First, clone the homepage repository.
 
 For installing NPM packages, this project uses [pnpm](https://pnpm.io/) (and so should you!):

mkdocs.yml

@@ -163,6 +163,7 @@ nav:
           - widgets/info/weather.md
   - "Learn":
       - widgets/authoring/index.md
+      - "Getting Started": widgets/authoring/getting-started.md
       - "Tutorials":
           - widgets/authoring/tutorial.md
       - "Guides":
@@ -175,9 +176,9 @@ nav:
       - troubleshooting/index.md
   - "More":
       - more/index.md
-      - more/development.md
       - more/translations.md
       - more/coverage.md
+      - more/sponsors.md
       - more/homepage-move.md
 
 theme:
@@ -203,7 +204,7 @@ theme:
       toggle:
         icon: material/brightness-4
         name: Switch to system preference
-  logo: assets/banner_light@2x.png
+  logo: assets/banner_light@2x.webp
 
   favicon: assets/favicon.ico
   features:
@@ -271,7 +272,7 @@ plugins:
               background_image: docs/assets/blossom_valley_blur.jpg
               background_color: "rgba(13, 29, 41, 128)"
               color: "#ffffff"
-              logo: docs/assets/light_squircle@2x.png
+              logo: docs/assets/light_squircle@2x.webp
   - tags
   - search:
       pipeline:
@@ -281,3 +282,4 @@ plugins:
   - redirects:
       redirect_maps:
         "more/troubleshooting.md": "troubleshooting/index.md"
+        "more/development.md": "widgets/authoring/getting-started.md"