From 08f021afadd4dbd802cd911a4f1187d2afa7c693 Mon Sep 17 00:00:00 2001 From: syeopite Date: Mon, 24 Jul 2023 15:11:45 -0700 Subject: [PATCH 01/11] Extract and implement footer overhaul from #2215 --- assets/css/default.css | 85 ++++++++++--- config/config.example.yml | 9 ++ locales/en-US.json | 24 +++- src/invidious/config.cr | 3 + src/invidious/helpers/macros.cr | 3 +- src/invidious/routes/channels.cr | 2 +- src/invidious/routes/preferences.cr | 2 +- src/invidious/views/template.ecr | 181 +++++++++++++++++++++------- 8 files changed, 242 insertions(+), 67 deletions(-) diff --git a/assets/css/default.css b/assets/css/default.css index a47762ec..602ea897 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -442,32 +442,44 @@ p.video-data { margin: 0; font-weight: bold; font-size: 80%; } * Footer */ -footer { - margin-top: auto; + footer { + color: #919191; + margin-top: 2.5em; padding: 1.5em 0; - text-align: center; - max-height: 30vh; } -.light-theme footer { - color: #7c7c7c; +.footer-content { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + margin-top: -10px; } -.dark-theme footer { - color: #adadad; +footer .footer-content a { + color: #919191; } -.light-theme footer a { - color: #7c7c7c !important; +.footer-content #about-invidious-description > b { + font-size: 30px; } -.dark-theme footer a { - color: #adadad !important; +.footer-section { + margin-right: 20px; + margin-top: 20px; } -footer span { - margin: 4px 0; - display: block; +.footer-section-list { + margin-top: 8px; +} + +.footer-section-item { + margin-bottom: 4px; +} + +@media screen and (max-width: 929px) { + #about-invidious-description { + display: none; + } } /* keyframes */ @@ -533,6 +545,14 @@ span > select { color: #565d64; } +.light-theme footer { + background: #f2f2f2; +} + +.light-theme footer #about-invidious-description > b { + color: #7a7a7a; +} + @media (prefers-color-scheme: light) { .no-theme a:hover, .no-theme a:active, @@ -579,6 +599,14 @@ span > select { .light-theme .pure-menu-heading { color: #565d64; } + + .no-theme footer { + background: #f2f2f2; + } + + .no-theme footer #about-invidious-description > b { + color: #7a7a7a; + } } @@ -641,6 +669,16 @@ body.dark-theme { color: inherit; } + +.dark-theme footer { + background: #16191a; +} + +.dark-theme .footer-content #about-invidious-description > b { + color: #e5e5e5; +} + + @media (prefers-color-scheme: dark) { .no-theme a:hover, .no-theme a:active, @@ -696,11 +734,11 @@ body.dark-theme { } .no-theme footer { - color: #adadad; + background: #16191a; } - .no-theme footer a { - color: #adadad !important; + .no-theme footer #about-invidious-description > b { + color: #e5e5e5; } } @@ -786,6 +824,17 @@ h1, h2, h3, h4, h5, p, /* Center the "invidious" logo on the search page */ #logo > h1 { text-align: center; } +#footer_buffer { + margin-top: 50vh; +} + +@media screen and (max-width: 450px) { + #footer_buffer { + display: none; + } +} + + /* IE11 fixes */ :-ms-input-placeholder { color: #888; } diff --git a/config/config.example.yml b/config/config.example.yml index 38085a20..a626e872 100644 --- a/config/config.example.yml +++ b/config/config.example.yml @@ -475,6 +475,15 @@ hmac_key: "CHANGE_ME!!" ## #playlist_length_limit: 500 + +## +## Email to contact the instance maintainer; used in a mailto: link within the footer. +## +## Accepted values: Email +## Default: +## +# instance_maintainer_email: + ######################################### # # Default user preferences diff --git a/locales/en-US.json b/locales/en-US.json index 10887612..f2594c8c 100644 --- a/locales/en-US.json +++ b/locales/en-US.json @@ -461,11 +461,25 @@ "next_steps_error_message": "After which you should try to: ", "next_steps_error_message_refresh": "Refresh", "next_steps_error_message_go_to_youtube": "Go to YouTube", - "footer_donate_page": "Donate", - "footer_documentation": "Documentation", - "footer_source_code": "Source code", - "footer_original_source_code": "Original source code", - "footer_modfied_source_code": "Modified source code", + + "footer_invidious_project_description": "A free and open source frontend for Youtube that that respects your privacy! Now you can watch videos (ad-free), subscribe to channels, create playlist and much more all without the prying eyes of Google!", + "footer_navigation_section_header": "Navigation", + "footer_home_link": "Home", + "footer_project_information_section_header": "Invidious", + "footer_project_homepage_link": "Project Homepage", + "footer_source_code_link": "Source Code", + "footer_issue_tracker_link": "Issue tracker", + "footer_public_instances_link": "Public instances", + "footer_donate_link": "Donate", + "footer_matrix_link": "Matrix", + "footer_support_section_header": "Support", + "footer_contact_link": "Contact instance maintainer", + "footer_report_bug_link": "Report a bug", + "footer_faq_link": "FAQs", + "footer_legal_section_header": "Legal", + "footer_licences_link": "Licences", + "footer_privacy_policy_link": "Privacy", + "adminprefs_modified_source_code_url_label": "URL to modified source code repository", "none": "none", "videoinfo_started_streaming_x_ago": "Started streaming `x` ago", diff --git a/src/invidious/config.cr b/src/invidious/config.cr index 09c2168b..ba403647 100644 --- a/src/invidious/config.cr +++ b/src/invidious/config.cr @@ -137,6 +137,9 @@ class Config # Playlist length limit property playlist_length_limit : Int32 = 500 + # Email to contact the instance maintainer. This is used within the footer as an mailto link. + property instance_maintainer_email : String? = nil + def disabled?(option) case disabled = CONFIG.disable_proxy when Bool diff --git a/src/invidious/helpers/macros.cr b/src/invidious/helpers/macros.cr index 43e7171b..d55fa6fc 100644 --- a/src/invidious/helpers/macros.cr +++ b/src/invidious/helpers/macros.cr @@ -48,8 +48,9 @@ module JSON::Serializable end end -macro templated(_filename, template = "template", navbar_search = true) +macro templated(_filename, template = "template", navbar_search = true, buffer_footer = false) navbar_search = {{navbar_search}} + buffer_footer = {{buffer_footer}} {{ filename = "src/invidious/views/" + _filename + ".ecr" }} {{ layout = "src/invidious/views/" + template + ".ecr" }} diff --git a/src/invidious/routes/channels.cr b/src/invidious/routes/channels.cr index d4d8b1c1..29af1dab 100644 --- a/src/invidious/routes/channels.cr +++ b/src/invidious/routes/channels.cr @@ -115,7 +115,7 @@ module Invidious::Routes::Channels items.each(&.author = "") selected_tab = Frontend::ChannelPage::TabsAvailable::Playlists - templated "channel" + templated "channel", buffer_footer: true end def self.podcasts(env) diff --git a/src/invidious/routes/preferences.cr b/src/invidious/routes/preferences.cr index 112535bd..9f00f1b2 100644 --- a/src/invidious/routes/preferences.cr +++ b/src/invidious/routes/preferences.cr @@ -8,7 +8,7 @@ module Invidious::Routes::PreferencesRoute preferences = env.get("preferences").as(Preferences) - templated "user/preferences" + templated "user/preferences", buffer_footer: true end def self.update(env) diff --git a/src/invidious/views/template.ecr b/src/invidious/views/template.ecr index 9904b4fc..5d105d6c 100644 --- a/src/invidious/views/template.ecr +++ b/src/invidious/views/template.ecr @@ -112,47 +112,9 @@ <%= content %> - + <% if buffer_footer %> + + <% end %> @@ -172,6 +134,143 @@ <% end %> <% end %> + + From 1a1ac3aee53884a8877e4707dcf2d440dfd57fd7 Mon Sep 17 00:00:00 2001 From: syeopite <70992037+syeopite@users.noreply.github.com> Date: Sun, 30 Jul 2023 06:10:18 +0000 Subject: [PATCH 02/11] Update locales/en-US.json Co-authored-by: Samantaz Fox --- locales/en-US.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/locales/en-US.json b/locales/en-US.json index f2594c8c..ba6c59c3 100644 --- a/locales/en-US.json +++ b/locales/en-US.json @@ -475,7 +475,7 @@ "footer_support_section_header": "Support", "footer_contact_link": "Contact instance maintainer", "footer_report_bug_link": "Report a bug", - "footer_faq_link": "FAQs", + "footer_faq_link": "FAQ", "footer_legal_section_header": "Legal", "footer_licences_link": "Licences", "footer_privacy_policy_link": "Privacy", From f4c49c3b155346a9de1b53755b2f70c4fb823e14 Mon Sep 17 00:00:00 2001 From: syeopite <70992037+syeopite@users.noreply.github.com> Date: Sat, 16 Sep 2023 23:05:38 +0000 Subject: [PATCH 03/11] Use instances.invidious.io instead of redirect Co-authored-by: TheFrenchGhosty <47571719+TheFrenchGhosty@users.noreply.github.com> --- src/invidious/views/template.ecr | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/invidious/views/template.ecr b/src/invidious/views/template.ecr index 5d105d6c..71e6298c 100644 --- a/src/invidious/views/template.ecr +++ b/src/invidious/views/template.ecr @@ -211,7 +211,7 @@
  • - "> + "> <%= translate(locale, "footer_public_instances_link") %>
    • From 6b579aeca7d0271a3ab87e50f0b04ba18e58f86b Mon Sep 17 00:00:00 2001 From: syeopite Date: Wed, 13 Mar 2024 13:35:39 -0700 Subject: [PATCH 04/11] Add Invidious version to footer --- assets/css/default.css | 64 +++++++++++++++++++++++++------- src/invidious/views/template.ecr | 26 +++++-------- 2 files changed, 59 insertions(+), 31 deletions(-) diff --git a/assets/css/default.css b/assets/css/default.css index 602ea897..e4f2c746 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -442,12 +442,23 @@ p.video-data { margin: 0; font-weight: bold; font-size: 80%; } * Footer */ - footer { +footer { color: #919191; margin-top: 2.5em; padding: 1.5em 0; } +#footer-content-container { + display: flex; + flex-direction: column; + gap: 20px; +} + +#footer-content-container > hr { + margin: 0; + color: rgb(241, 241, 241); +} + .footer-content { display: flex; justify-content: space-between; @@ -455,7 +466,7 @@ p.video-data { margin: 0; font-weight: bold; font-size: 80%; } margin-top: -10px; } -footer .footer-content a { +footer a { color: #919191; } @@ -476,6 +487,20 @@ footer .footer-content a { margin-bottom: 4px; } +.footer-footer .left { + float: left +} + +.footer-footer .right { + float: right; + display: flex; + gap: 5px;; +} + +.footer-right .right a { + color: #919191 +} + @media screen and (max-width: 929px) { #about-invidious-description { display: none; @@ -546,11 +571,20 @@ span > select { } .light-theme footer { + color: #7a7a7a; background: #f2f2f2; } +.light-theme #footer-content-container > hr { + color: rgb(241, 241, 241); +} + +.light-theme footer a { + color: #7c7c7c !important; +} + .light-theme footer #about-invidious-description > b { - color: #7a7a7a; + color: #565D64; } @media (prefers-color-scheme: light) { @@ -588,24 +622,21 @@ span > select { color: #303030; } - .no-theme footer { - color: #7c7c7c; - } - - .no-theme footer a { - color: #7c7c7c !important; - } - .light-theme .pure-menu-heading { color: #565d64; } .no-theme footer { background: #f2f2f2; + color: #7c7c7c; } .no-theme footer #about-invidious-description > b { - color: #7a7a7a; + color: #565D64; + } + + .no-theme footer a { + color: #7c7c7c !important; } } @@ -674,8 +705,12 @@ body.dark-theme { background: #16191a; } +.dark-theme #footer-content-container > hr { + color: #313131; +} + .dark-theme .footer-content #about-invidious-description > b { - color: #e5e5e5; + color: #ccc; } @@ -735,10 +770,11 @@ body.dark-theme { .no-theme footer { background: #16191a; + color: #313131; } .no-theme footer #about-invidious-description > b { - color: #e5e5e5; + color: #ccc; } } diff --git a/src/invidious/views/template.ecr b/src/invidious/views/template.ecr index 71e6298c..c3f021e0 100644 --- a/src/invidious/views/template.ecr +++ b/src/invidious/views/template.ecr @@ -137,7 +137,7 @@ From 3b46760df54ca3c847688e96d29d9323b15ed72e Mon Sep 17 00:00:00 2001 From: syeopite Date: Wed, 13 Mar 2024 13:55:49 -0700 Subject: [PATCH 05/11] Add new instance customization section in config --- config/config.example.yml | 41 +++++++++++++++++++++------------------ 1 file changed, 22 insertions(+), 19 deletions(-) diff --git a/config/config.example.yml b/config/config.example.yml index a626e872..2d3f03f7 100644 --- a/config/config.example.yml +++ b/config/config.example.yml @@ -391,9 +391,8 @@ jobs: ## enable: true - # ----------------------------- -# Miscellaneous +# Instance customization # ----------------------------- ## @@ -405,6 +404,27 @@ jobs: ## #banner: +## +## Source code URL. If your instance is running a modified source +## code, you MUST publish it somewhere and set this option. +## +## Accepted values: a string +## Default: +## +#modified_source_code_url: "" + +## +## Email to contact the instance maintainer; used in a mailto: link within the footer. +## +## Accepted values: Email +## Default: +## +# instance_maintainer_email: + +# ----------------------------- +# Miscellaneous +# ----------------------------- + ## ## Subscribe to channels using PubSubHub (Google PubSubHubbub service). ## PubSubHub allows Invidious to be instantly notified when a new video @@ -458,15 +478,6 @@ hmac_key: "CHANGE_ME!!" ## #cache_annotations: false -## -## Source code URL. If your instance is running a modified source -## code, you MUST publish it somewhere and set this option. -## -## Accepted values: a string -## Default: -## -#modified_source_code_url: "" - ## ## Maximum custom playlist length limit. ## @@ -476,14 +487,6 @@ hmac_key: "CHANGE_ME!!" #playlist_length_limit: 500 -## -## Email to contact the instance maintainer; used in a mailto: link within the footer. -## -## Accepted values: Email -## Default: -## -# instance_maintainer_email: - ######################################### # # Default user preferences From 76c2bab6c026c2a332207bccfeba2177463cd4d7 Mon Sep 17 00:00:00 2001 From: syeopite Date: Wed, 13 Mar 2024 14:01:20 -0700 Subject: [PATCH 06/11] Add config to add custom text in the footer Co-authored-by: Aural Glow <125497673+auralglow@users.noreply.github.com> --- assets/css/default.css | 12 ++++++------ config/config.example.yml | 15 ++++++++++++++- locales/en-US.json | 2 +- src/invidious/config.cr | 2 ++ src/invidious/views/template.ecr | 9 +++++++-- 5 files changed, 30 insertions(+), 10 deletions(-) diff --git a/assets/css/default.css b/assets/css/default.css index e4f2c746..1422686c 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -470,7 +470,7 @@ footer a { color: #919191; } -.footer-content #about-invidious-description > b { +.footer-content #footer-custom-text > b { font-size: 30px; } @@ -502,7 +502,7 @@ footer a { } @media screen and (max-width: 929px) { - #about-invidious-description { + #footer-custom-text { display: none; } } @@ -583,7 +583,7 @@ span > select { color: #7c7c7c !important; } -.light-theme footer #about-invidious-description > b { +.light-theme footer #footer-custom-text > b { color: #565D64; } @@ -631,7 +631,7 @@ span > select { color: #7c7c7c; } - .no-theme footer #about-invidious-description > b { + .no-theme footer #footer-custom-text > b { color: #565D64; } @@ -709,7 +709,7 @@ body.dark-theme { color: #313131; } -.dark-theme .footer-content #about-invidious-description > b { +.dark-theme .footer-content #footer-custom-text > b { color: #ccc; } @@ -773,7 +773,7 @@ body.dark-theme { color: #313131; } - .no-theme footer #about-invidious-description > b { + .no-theme footer #footer-custom-text > b { color: #ccc; } } diff --git a/config/config.example.yml b/config/config.example.yml index 2d3f03f7..118ac0c0 100644 --- a/config/config.example.yml +++ b/config/config.example.yml @@ -404,6 +404,18 @@ jobs: ## #banner: +## +## custom text displayed at the bottom of every page within Invidious' footer. This can +## used for instance announcements, e.g +## +## When unset Invidious defaults to some text that describes what Invidious is. See +## localization key default_invidious_footer_text +## +## Accepted values: any string. HTML is accepted. +## Default: +## +#footer: + ## ## Source code URL. If your instance is running a modified source ## code, you MUST publish it somewhere and set this option. @@ -419,7 +431,8 @@ jobs: ## Accepted values: Email ## Default: ## -# instance_maintainer_email: +# instance_maintainer_email: + # ----------------------------- # Miscellaneous diff --git a/locales/en-US.json b/locales/en-US.json index ba6c59c3..48a0eece 100644 --- a/locales/en-US.json +++ b/locales/en-US.json @@ -462,7 +462,7 @@ "next_steps_error_message_refresh": "Refresh", "next_steps_error_message_go_to_youtube": "Go to YouTube", - "footer_invidious_project_description": "A free and open source frontend for Youtube that that respects your privacy! Now you can watch videos (ad-free), subscribe to channels, create playlist and much more all without the prying eyes of Google!", + "default_invidious_footer_text": "A free and open source frontend for Youtube that that respects your privacy! Now you can watch videos (ad-free), subscribe to channels, create playlist and much more all without the prying eyes of Google!", "footer_navigation_section_header": "Navigation", "footer_home_link": "Home", "footer_project_information_section_header": "Invidious", diff --git a/src/invidious/config.cr b/src/invidious/config.cr index ba403647..7f820018 100644 --- a/src/invidious/config.cr +++ b/src/invidious/config.cr @@ -106,6 +106,8 @@ class Config property cache_annotations : Bool = false # Optional banner to be displayed along top of page for announcements, etc. property banner : String? = nil + # Optional footer text to be displayed within Invidious' footer. Can be used for maintainer contact info, etc. + property footer : String? = nil # Enables 'Strict-Transport-Security'. Ensure that `domain` and all subdomains are served securely property hsts : Bool? = true # Disable proxying server-wide: options: 'dash', 'livestreams', 'downloads', 'local' diff --git a/src/invidious/views/template.ecr b/src/invidious/views/template.ecr index c3f021e0..b55f7040 100644 --- a/src/invidious/views/template.ecr +++ b/src/invidious/views/template.ecr @@ -139,9 +139,14 @@
    -