diff --git a/docs/assets/BlossomValley.jpg b/docs/assets/BlossomValley.jpg deleted file mode 100644 index 8c6a6321f..000000000 Binary files a/docs/assets/BlossomValley.jpg and /dev/null differ diff --git a/docs/assets/blossom_valley.jpg b/docs/assets/blossom_valley.jpg new file mode 100644 index 000000000..394459027 Binary files /dev/null and b/docs/assets/blossom_valley.jpg differ diff --git a/docs/assets/blossom_valley_blur.jpg b/docs/assets/blossom_valley_blur.jpg new file mode 100644 index 000000000..54bb9bae2 Binary files /dev/null and b/docs/assets/blossom_valley_blur.jpg differ diff --git a/docs/assets/homepage_demo_clip.png b/docs/assets/homepage_demo_clip.png new file mode 100644 index 000000000..8ac16f355 Binary files /dev/null and b/docs/assets/homepage_demo_clip.png differ diff --git a/docs/index.md b/docs/index.md index 676086dbb..2f5b602e9 100644 --- a/docs/index.md +++ b/docs/index.md @@ -12,17 +12,18 @@ hide:
-

-![Alt text](assets/banner_dark@2x.png#only-light) -![Alt text](assets/banner_light@2x.png#only-dark) +

-A modern, fully static, fast, secure fully proxied, 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. +homepage -![Alt text](assets/homepage_demo.png) +homepage -

- DigitalOcean Referral Badge -

-

-Homepage builds are kindly powered by DigitalOcean. -

+

A modern, fully static, fast, secure fully proxied, 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.

+ +
+ + diff --git a/docs/more/coverage.md b/docs/more/coverage.md new file mode 100644 index 000000000..65a1a8665 --- /dev/null +++ b/docs/more/coverage.md @@ -0,0 +1,57 @@ +--- +title: Community Coverage +description: Homepage has been covered by quite a few YouTube channels, here are some of them. +--- + +Homepage has been covered by quite a few YouTube channels, here are some of them. If you have a video you'd like to add, please open a PR! + +## English + +
+ +[![Youtube Video](https://img.youtube.com/vi/mC3tjysJ01E/maxresdefault.jpg)](https://www.youtube.com/watch?v=mC3tjysJ01E) + +[![Youtube Video](https://img.youtube.com/vi/o9SLve4wBPY/maxresdefault.jpg)](https://www.youtube.com/watch?v=o9SLve4wBPY) + +[![Youtube Video](https://img.youtube.com/vi/j9kbQucNwlc/maxresdefault.jpg)](https://www.youtube.com/watch?v=j9kbQucNwlc) + +[![Youtube Video](https://img.youtube.com/vi/3Ux7zfCCM1A/maxresdefault.jpg)](https://www.youtube.com/watch?v=3Ux7zfCCM1A) + +[![Youtube Video](https://img.youtube.com/vi/4AwUNy2eztA/maxresdefault.jpg)](https://www.youtube.com/watch?v=4AwUNy2eztA) + +[![Youtube Video](https://img.youtube.com/vi/7mUUCB3kP0E/maxresdefault.jpg)](https://www.youtube.com/watch?v=7mUUCB3kP0E) + +[![Youtube Video](https://img.youtube.com/vi/a5-4u0qFKaE/maxresdefault.jpg)](https://www.youtube.com/watch?v=a5-4u0qFKaE) + +[![Youtube Video](https://img.youtube.com/vi/tV7-06FU4gQ/maxresdefault.jpg)](https://www.youtube.com/watch?v=tV7-06FU4gQ) + +[![Youtube Video](https://img.youtube.com/vi/X2ycbT7rPu4/maxresdefault.jpg)](https://www.youtube.com/watch?v=X2ycbT7rPu4) + +[![Youtube Video](https://img.youtube.com/vi/1jEWUJqL-eo/maxresdefault.jpg)](https://www.youtube.com/watch?v=1jEWUJqL-eo) + +
+ +
+ +
+## French +[![Youtube Video](https://img.youtube.com/vi/aGztk8you6o/maxresdefault.jpg)](https://www.youtube.com/watch?v=aGztk8you6o) +[![Youtube Video](https://img.youtube.com/vi/pQfhWqZh7YE/maxresdefault.jpg)](https://www.youtube.com/watch?v=pQfhWqZh7YE) +
+ +
+## German +[![Youtube Video](https://img.youtube.com/vi/DrDgg-WRA2g/maxresdefault.jpg)](https://www.youtube.com/watch?v=DrDgg-WRA2g) +
+ +
+## Chinese +[![Youtube Video](https://img.youtube.com/vi/DAW15ckt4n4/mqdefault.jpg){: style="width: 100%"}](https://www.youtube.com/watch?v=DAW15ckt4n4) +
+ +
+## Russian +[![Youtube Video](https://img.youtube.com/vi/dk3Cp5ck8mY/maxresdefault.jpg)](https://www.youtube.com/watch?v=dk3Cp5ck8mY) +
+ +
diff --git a/docs/more/development.md b/docs/more/development.md index ec580cff4..377238a60 100644 --- a/docs/more/development.md +++ b/docs/more/development.md @@ -3,8 +3,6 @@ title: Development description: Homepage Development --- -## Development Overview - First, clone the homepage repository. For installing NPM packages, this project uses [pnpm](https://pnpm.io/) (and so should you!): diff --git a/docs/overrides/main.html b/docs/overrides/main.html index 0a5f2bc50..7150c1b78 100644 --- a/docs/overrides/main.html +++ b/docs/overrides/main.html @@ -1,5 +1,10 @@ {% extends "base.html" %} +{% block header %} +
+ {% include "partials/header.html" %} +{% endblock %} + {% block site_nav %} {% if nav %} diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index f9281da26..d856cef14 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -1,3 +1,17 @@ +[data-md-color-scheme="slate"] { + --md-hue: 220; + --md-default-bg-color: hsla(0, 0%, 14%, 0.6); + --md-code-bg-color: hsla(0, 0%, 0%, 0.2); +} + +[data-md-color-scheme="default"] { + --md-hue: 220; + --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); +} + [data-md-toggle="search"]:not(:checked) ~ .md-header .md-search__form::after { position: absolute; top: 0.3rem; @@ -42,3 +56,153 @@ .md-typeset table:not([class]) { display: table; } + +/* less than 1440px wide */ +@media (max-width: 1440px) { + .md-footer-meta__inner { + justify-content: center; + } +} + +/* less than 740px wide */ +@media (max-width: 740px) { + .md-footer-meta__inner { + justify-content: left; + flex-direction: column; + } + .md-social { + padding-top: 0; + } +} + +.md-header__button.md-logo { + padding: 0; + margin: 0; +} + +.md-header__button.md-logo img, +.md-header__button.md-logo svg { + height: 2rem; +} + +.md-header__topic { + display: none; +} + +body { + background-image: url("/assets/blossom_valley.jpg"); + background-size: cover; + background-attachment: fixed; + background-position: center; + background-color: transparent; + color: #fff; +} + +.blur-overlay { + z-index: -1; + position: fixed; + width: 100%; + height: 100%; + background: hsla(0, 0%, 0%, 0); + backdrop-filter: blur(64px); + -webkit-backdrop-filter: blur(64px); +} + +.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link, +.md-nav--secondary .md-nav__title { + background: none; + box-shadow: none; +} + +[data-md-color-scheme="slate"] .md-main, +[data-md-color-scheme="slate"] .md-tabs, +[data-md-color-scheme="slate"] .md-footer { + background-color: hsla(0, 0%, 0%, 0.3); +} + +[data-md-color-scheme="default"] .md-main, +[data-md-color-scheme="default"] .md-tabs, +[data-md-color-scheme="default"] .md-footer { + background-color: hsla(0, 0%, 100%, 0.1); +} + +[data-md-color-scheme="slate"] .md-header { + background-color: hsla(0, 0%, 0%, 0.3); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); +} + +[data-md-color-scheme="default"] .md-header { + background-color: hsla(0, 0%, 100%, 0.1); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); +} + +.md-footer-meta { + background-color: transparent; +} + +[data-md-color-scheme="slate"][data-md-color-primary="black"], +[data-md-color-scheme="default"][data-md-color-primary="black"] { + --md-typeset-a-color: #ffffff; +} + +.md-content__inner a { + text-decoration: underline; + font-weight: bolder; +} + +[data-md-color-scheme="default"] .highlight .p, +[data-md-color-scheme="default"] .highlight .o, +[data-md-color-scheme="default"] .highlight .ow, +[data-md-color-scheme="default"] .highlight .c, +[data-md-color-scheme="default"] .highlight .c1, +[data-md-color-scheme="default"] .highlight .ch, +[data-md-color-scheme="default"] .highlight .cm, +[data-md-color-scheme="default"] .highlight .cs, +[data-md-color-scheme="default"] .highlight .sd { + color: #36464eaa; +} + +[data-md-color-scheme="default"] .md-annotation__index:after { + background-color: #36464ecc; +} + +/* I know this is a farce, but I want it to look nice. */ +.css-9if7bc { + background-color: hsla(0, 0%, 0%, 0.3); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); +} + +@media screen and (max-width: 76.234375em) { + .md-nav--primary, + .md-nav--primary .md-nav { + background-color: hsla(0, 0%, 0%, 0.8); + } +} + +@media screen and (max-width: 76.234375em) { + .md-nav--primary .md-nav__title ~ .md-nav__list { + background-color: hsla(0, 0%, 0%, 0.8); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + } +} + +@media screen and (max-width: 76.234375em) { + .md-nav--primary .md-nav__title { + background-color: hsla(0, 0%, 0%, 0.8); + backdrop-filter: blur(16px); + } +} + +.md-search__scrollwrap { + background-color: hsla(0, 0%, 0%, 0.3); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); +} + +.md-search-result .md-typeset h1 { + color: #fff; +} diff --git a/mkdocs.yml b/mkdocs.yml index e5ea55fc9..a6f1cd873 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -177,6 +177,7 @@ nav: - more/index.md - more/development.md - more/translations.md + - more/coverage.md - more/homepage-move.md theme: @@ -202,7 +203,8 @@ theme: toggle: icon: material/brightness-4 name: Switch to system preference - logo: assets/light_squircle@2x.png + logo: assets/banner_light@2x.png + favicon: assets/favicon.ico features: - navigation.instant @@ -228,10 +230,12 @@ extra: social: - icon: fontawesome/brands/discord link: https://discord.gg/k4ruYNrudu - - icon: fontawesome/regular/message - link: https://github.com/gethomepage/homepage/discussions - icon: fontawesome/brands/github link: https://github.com/gethomepage/homepage + - icon: simple/opencollective + link: https://opencollective.com/homepage + - icon: simple/patreon + link: https://www.patreon.com/gethomepage markdown_extensions: - pymdownx.highlight: @@ -262,12 +266,12 @@ plugins: plugins: - typeset - social: - cards_layout_dir: docs/layouts - cards_layout: custom + cards_layout: default cards_layout_options: - background_image: docs/assets/BlossomValley.jpg + background_image: docs/assets/blossom_valley_blur.jpg background_color: "rgba(13, 29, 41, 128)" color: "#ffffff" + logo: docs/assets/light_squircle@2x.png - tags - search: pipeline: