docs updates

adjust styles
move development starting guide
switch to webp for images
add sponsors page
pull/3667/head
Ben Phelps 5 months ago
parent 23432300c7
commit a4ee3089bc

@ -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>

@ -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>

@ -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%);
}

@ -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>`**

@ -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!):

@ -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"

Loading…
Cancel
Save