theme.park site updates

CSS/theme-options/organizr-dark.css

@@ -1 +0,0 @@
-@import url("https://develop.theme-park.dev/CSS/variables/organizr.css");

Resources/landing-page/css/custom.css

@@ -348,7 +348,7 @@ p {
     background: radial-gradient(ellipse at center, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%);
 }
 
-#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.organizr-dark-hover {
+#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.organizr-hover {
     background: #1f1f1f;
 }
 
@@ -364,7 +364,7 @@ p {
     background: #282a36;
 }
 
-#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.overseer-hover {
+#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.overseerr-hover {
     background: linear-gradient(360deg, hsl(221, 39%, 11%) 65%, hsl(215, 28%, 17%) 100%);
 }
 

Resources/landing-page/js/scripts.js

@@ -6,29 +6,6 @@
 (function ($) {
     "use strict"; // Start of use strict
 
-    // Smooth scrolling using anime.js
-    $('a.js-scroll-trigger[href*="#"]:not([href="#"])').on('click', function () {
-        if (
-            location.pathname.replace(/^\//, "") ==
-            this.pathname.replace(/^\//, "") &&
-            location.hostname == this.hostname
-        ) {
-            var target = $(this.hash);
-            target = target.length ?
-                target :
-                $("[name=" + this.hash.slice(1) + "]");
-            if (target.length) {
-                anime({
-                    targets: 'html, body',
-                    scrollTop: target.offset().top - 72,
-                    duration: 1000,
-                    easing: 'easeInOutExpo'
-                });
-                return false;
-            }
-        }
-    });
-
     // Closes responsive menu when a scroll trigger link is clicked
     $('.js-scroll-trigger').click(function () {
         $('.navbar-collapse').collapse('hide');
@@ -71,17 +48,14 @@
 
 })(jQuery); // End of use strict
 
-const themes = ["aquamarine","hotline","dark","organizr-dark","dracula","overseerr",
-"plex","space-gray","hotpink","onedark","nord"];
-var random = themes[~~(Math.random() * themes.length)];
-// load a random css stylesheet
+
 function injectTheme(theme,container="head") {
     if (container === "head") {
         html_element = document.head;
     } else html_element = document.body;
     let themeOption = document.getElementById("theme-option")
     let link = themeOption ? themeOption : document.createElement("link");
-    url = "/CSS/variables/"
+    url = "/CSS/theme-options/"
     link.type = "text/css";
     link.rel = "stylesheet";
     link.href = `${url}/${theme.toLowerCase()}.css`;
@@ -92,6 +66,7 @@ function injectTheme(theme,container="head") {
   // Add theme data and set theme vars
   var apps;
   var themeOptions;
+
   function addThemeData() {
   let themeJsonUrl = "/themes.json"
   fetch(themeJsonUrl)
@@ -105,27 +80,45 @@ function injectTheme(theme,container="head") {
     document.getElementById("app-count").innerHTML = `
     theme.park contains ${appCount} themed applications, with css <a
     href="https://docs.theme-park.dev/themes/addons/">addons</a> on certain themes.`
-    document.getElementById("theme-count").innerHTML = `Choose between <a class="js-scroll-trigger" href="#themes">${Object.keys(json.themes).length} different
-    styles!</a> With the possibility to easily create your own themes using the defined <a
+    document.getElementById("theme-count").innerHTML = `Choose between <a class="js-scroll-trigger" href="#themes">${Object.keys(json.themes).length} official
+    styles</a>, and <a href="https://docs.theme-park.dev/community-themes/">${Object.keys(json["community-themes"]).length} community styles!</a> With the possibility to easily create your own themes using the defined <a
     href="https://docs.theme-park.dev/custom/">variables</a>.`
-    createApps(apps)
+    createApps(apps,themeOptions)
+    smoothScroll()
+    let randomTheme = Object.keys(themeOptions)[~~(Math.random() * Object.keys(themeOptions).length)]
+    injectTheme(randomTheme)
     })
 }
 
-function createApps(apps) {
+function createApps(apps,themeOptions) {
     let allAppsDiv = document.getElementById("all-apps")
-    sorted = Object.keys(apps).sort()
-    for (let app in sorted) {
+    let allThemesDiv = document.getElementById("all-themes")
+    sortedApps = Object.keys(apps).sort()
+    sortedThemes = Object.keys(themeOptions).sort()
+    for (let app in sortedApps) {
     let newApp = `
-        <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/${sorted[app]}/">
-            <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/${sorted[app]}/logo.png"/></p>
-            <p>${sorted[app][0].toUpperCase() + sorted[app].slice(1)}</p>
+        <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/${sortedApps[app]}/">
+            <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/${sortedApps[app]}/logo.png"/></p>
+            <p>${sortedApps[app][0].toUpperCase() + sortedApps[app].slice(1)}</p>
         </a>`
     allAppsDiv.innerHTML += newApp
     }
+    for (let option in sortedThemes) {
+        let newApp = `
+        <div class="col-lg-4 col-sm-6 p-1">
+            <a class="portfolio-box" href="Resources/landing-page/assets/img/${sortedThemes[option].toLowerCase()}.png">
+                <img class="img-fluid" src="Resources/landing-page/assets/img/${sortedThemes[option].toLowerCase()}-small.jpg" alt="..." />
+                <div class="portfolio-box-caption p-3 ${sortedThemes[option].toLowerCase()}-hover">
+                    <div class="project-category text-white-50">Theme</div>
+                    <div class="project-name">${sortedThemes[option][0].toUpperCase() + sortedThemes[option].slice(1)}</div>
+                </div>
+            </a>
+        </div>`
+        allThemesDiv.innerHTML += newApp
+        }   
 }
 
-function fadeOutIn(speed ) {
+function fadeOutIn(speed) {
     let theme = Object.keys(themeOptions)[~~(Math.random() * Object.keys(themeOptions).length)]
     if (!document.body.style.opacity) {
         document.body.style.opacity = 1;
@@ -146,7 +139,29 @@ function fadeOutIn(speed ) {
 
 }
 
-injectTheme(random);
+// Smooth scrolling using anime.js
+function smoothScroll() {$('a.js-scroll-trigger[href*="#"]:not([href="#"])').on('click', function () {
+    if (
+        location.pathname.replace(/^\//, "") ==
+        this.pathname.replace(/^\//, "") &&
+        location.hostname == this.hostname
+    ) {
+        var target = $(this.hash);
+        target = target.length ?
+            target :
+            $("[name=" + this.hash.slice(1) + "]");
+        if (target.length) {
+            anime({
+                targets: 'html, body',
+                scrollTop: target.offset().top - 120,
+                duration: 1000,
+                easing: 'easeInOutExpo'
+            });
+            return false;
+        }
+    }
+})};
+
 addThemeData();
 document.getElementById("switch-theme").addEventListener("click", () =>  {
     fadeOutIn(350);

docker-mods/bazarr/root/etc/cont-init.d/98-themepark

@@ -8,6 +8,7 @@ echo '---------------------------'
 echo -e "Variables set:\\n\
 'TP_DOMAIN'=${TP_DOMAIN}\\n\
 'TP_ADDON'=${TP_ADDON}\\n\
+'TP_COMMUNITY_THEME'=${TP_COMMUNITY_THEME}\\n\
 'TP_THEME'=${TP_THEME}\\n"
 
 APP_FILEPATH='/app/bazarr/bin/frontend/build/index.html'
@@ -16,6 +17,11 @@ if [ "${TP_HOTIO}" = true ]; then
     APP_FILEPATH='/app/bin/frontend/build/index.html'
 fi
 
+THEME_TYPE='theme-options'
+if [ "${TP_COMMUNITY_THEME}" = true ]; then
+    THEME_TYPE='community-theme-options'
+fi
+
 # Set default
 if [[ -z ${TP_DOMAIN} ]]; then
     echo 'No domain set, defaulting to theme-park.dev'
@@ -39,8 +45,8 @@ if ! grep -q "${TP_DOMAIN}" "${APP_FILEPATH}"; then
     echo '---------------------------'
     echo '|  Adding the stylesheet  |'
     echo '---------------------------'
-    sed -i "s/<\/head>/<link rel='stylesheet' href='https:\/\/${TP_DOMAIN}\/CSS\/themes\/bazarr\/bazarr-base.css'><\/head> /g" "${APP_FILEPATH}"
-    sed -i "s/<\/head>/<link rel='stylesheet' href='https:\/\/${TP_DOMAIN}\/CSS\/variables\/${TP_THEME}.css'><\/head> /g" "${APP_FILEPATH}"
+    sed -i "s/<\/head>/<link rel='stylesheet' href='https:\/\/${TP_DOMAIN}\/CSS\/base\/bazarr\/bazarr-base.css'><\/head> /g" "${APP_FILEPATH}"
+    sed -i "s/<\/head>/<link rel='stylesheet' href='https:\/\/${TP_DOMAIN}\/CSS\/${THEME_TYPE}\/${TP_THEME}.css'><\/head> /g" "${APP_FILEPATH}"
     printf 'Stylesheet set to %s\n' "${TP_THEME}"
     if [[ -n ${TP_ADDON} ]]; then
         for addon in $(echo "$TP_ADDON" | tr "|" " "); do

index.html

@@ -21,7 +21,7 @@
     <!-- Core theme CSS (includes Bootstrap)-->
     <link href="Resources/landing-page/css/styles.css?v=1.1" rel="stylesheet" />
     <link rel="stylesheet" href="Resources/landing-page/css/jquery-bg-slideshow.css">
-    <link rel="stylesheet" href="Resources/landing-page/css/custom.css?v=2.2">
+    <link rel="stylesheet" href="Resources/landing-page/css/custom.css?v=2.3">
 </head>
 
 <body id="page-top">
@@ -99,7 +99,6 @@
         </div>
         <div class="col justify-content-center pt-5 all-apps container">
             <div id="all-apps" class="row justify-content-center">
-                ...
             </div>
         </div>
     </section>
@@ -174,98 +173,7 @@
     </section>
     <div id="portfolio" class="theme-overview">
         <div class="container-fluid p-0">
-            <div class="row no-gutters d-flex justify-content-center">
-                <div class="col-lg-4 col-sm-6 p-1">
-                    <a class="portfolio-box" href="Resources/landing-page/assets/img/hotpink.png">
-                        <img class="img-fluid" src="Resources/landing-page/assets/img/hotpink-small.jpg" alt="..." />
-                        <div class="portfolio-box-caption p-3 hotpink-hover">
-                            <div class="project-category text-white-50">Theme</div>
-                            <div class="project-name">Hotpink</div>
-                        </div>
-                    </a>
-                </div>
-                <div class="col-lg-4 col-sm-6 p-1">
-                    <a class="portfolio-box" href="Resources/landing-page/assets/img/dracula.png">
-                        <img class="img-fluid" src="Resources/landing-page/assets/img/dracula-small.jpg" alt="..." />
-                        <div class="portfolio-box-caption p-3 dracula-hover">
-                            <div class="project-category text-white-50">Theme</div>
-                            <div class="project-name">Dracula</div>
-                        </div>
-                    </a>
-                </div>
-                <div class="col-lg-4 col-sm-6 p-1">
-                    <a class="portfolio-box" href="Resources/landing-page/assets/img/overseer.png">
-                        <img class="img-fluid" src="Resources/landing-page/assets/img/overseer-small.jpg" alt="..." />
-                        <div class="portfolio-box-caption p-3 overseer-hover">
-                            <div class="project-category text-white-50">Theme</div>
-                            <div class="project-name">Overseer</div>
-                        </div>
-                    </a>
-                </div>
-                <div class="col-lg-4 col-sm-6 p-1">
-                    <a class="portfolio-box" href="Resources/landing-page/assets/img/nord.png">
-                        <img class="img-fluid" src="Resources/landing-page/assets/img/nord-small.jpg" alt="..." />
-                        <div class="portfolio-box-caption p-3 nord-hover">
-                            <div class="project-category text-white-50">Theme</div>
-                            <div class="project-name">Nord</div>
-                        </div>
-                    </a>
-                </div>
-                <div class="col-lg-4 col-sm-6 p-1">
-                    <a class="portfolio-box" href="Resources/landing-page/assets/img/aquamarine.png">
-                        <img class="img-fluid" src="Resources/landing-page/assets/img/aquamarine-small.jpg" alt="..." />
-                        <div class="portfolio-box-caption aquamarine-hover">
-                            <div class="project-category text-white-50">Theme</div>
-                            <div class="project-name">Aquamarine</div>
-                        </div>
-                    </a>
-                </div>
-                <div class="col-lg-4 col-sm-6 p-1">
-                    <a class="portfolio-box" href="Resources/landing-page/assets/img/hotline.png">
-                        <img class="img-fluid" src="Resources/landing-page/assets/img/hotline-small.jpg" alt="..." />
-                        <div class="portfolio-box-caption hotline-hover">
-                            <div class="project-category text-white-50">Theme</div>
-                            <div class="project-name">Hotline</div>
-                        </div>
-                    </a>
-                </div>
-                <div class="col-lg-4 col-sm-6 p-1">
-                    <a class="portfolio-box" href="Resources/landing-page/assets/img/space-gray.png">
-                        <img class="img-fluid" src="Resources/landing-page/assets/img/space-gray-small.jpg" alt="..." />
-                        <div class="portfolio-box-caption space-gray-hover">
-                            <div class="project-category text-white-50">Theme</div>
-                            <div class="project-name">Space Gray</div>
-                        </div>
-                    </a>
-                </div>
-                <div class="col-lg-4 col-sm-6 p-1">
-                    <a class="portfolio-box" href="Resources/landing-page/assets/img/organizr-dark.png">
-                        <img class="img-fluid" src="Resources/landing-page/assets/img/organizr-dark-small.jpg"
-                            alt="..." />
-                        <div class="portfolio-box-caption organizr-dark-hover">
-                            <div class="project-category text-white-50">Theme</div>
-                            <div class="project-name">Organizr Dark</div>
-                        </div>
-                    </a>
-                </div>
-                <div class="col-lg-4 col-sm-6 p-1">
-                    <a class="portfolio-box" href="Resources/landing-page/assets/img/dark.png">
-                        <img class="img-fluid" src="Resources/landing-page/assets/img/dark-small.jpg" alt="..." />
-                        <div class="portfolio-box-caption dark-hover">
-                            <div class="project-category text-white-50">Theme</div>
-                            <div class="project-name">Dark</div>
-                        </div>
-                    </a>
-                </div>
-                <div class="col-lg-4 col-sm-6 p-1">
-                    <a class="portfolio-box" href="Resources/landing-page/assets/img/plex.png">
-                        <img class="img-fluid" src="Resources/landing-page/assets/img/plex-small.jpg" alt="..." />
-                        <div class="portfolio-box-caption p-3 plex-hover">
-                            <div class="project-category text-white-50">Theme</div>
-                            <div class="project-name">Plex</div>
-                        </div>
-                    </a>
-                </div>
+            <div class="row no-gutters d-flex justify-content-center" id="all-themes">
             </div>
         </div>
     </div>
@@ -290,7 +198,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
     <!-- Core theme JS-->
-    <script src="Resources/landing-page/js/scripts.js?v=1.4"></script>
+    <script src="Resources/landing-page/js/scripts.js?v=1.5"></script>
     <script src="Resources/landing-page/js/jquery-bg-slideshow.js?v=1"></script>
     <script type="text/javascript">
         $(function () {