diff --git a/docs/assets/BlossomValley.jpg b/docs/assets/BlossomValley.jpg deleted file mode 100644 index 8c6a6321..00000000 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 00000000..39445902 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 00000000..54bb9bae 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 00000000..8ac16f35 Binary files /dev/null and b/docs/assets/homepage_demo_clip.png differ diff --git a/docs/index.md b/docs/index.md index 676086db..2f5b602e 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 00000000..65a1a866 --- /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 ec580cff..377238a6 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 0a5f2bc5..7150c1b7 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 f9281da2..d856cef1 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 e5ea55fc..a6f1cd87 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: