docs updates

adjust styles move development starting guide switch to webp for images add sponsors page
gethomepage · Jun 17, 2024 · a4ee308 · a4ee308
1 parent 2343230
commit a4ee308
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 13 deletions.
diff --git a/docs/index.md b/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>
diff --git a/docs/more/sponsors.md b/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>
diff --git a/docs/stylesheets/extra.css b/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);
- -webkit-backdrop-filter: blur(64px);
+ backdrop-filter: blur(128px);
+ -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%);
+}
diff --git a/docs/widgets/authoring/component.md b/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>`**
 

diff --git a/docs/more/development.md → docs/widgets/authoring/getting-started.md b/docs/more/development.md → docs/widgets/authoring/getting-started.md
@@ -1,8 +1,12 @@
 ---
-title: Development
-description: Homepage Development
+title: Getting Started
+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!):

diff --git a/mkdocs.yml b/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"