Refactor Kodi setup guide for iOS and add Spanish translation; remove unused feature components and images; introduce referral button component

Author: uSebazz

docs/streaming/Kodi/platform/setup/_ios.mdx

@@ -14,29 +14,21 @@ This guide will walk you through the steps to install Kodi on your iOS device us
     :::
     Install Kodi via Cydia - *(Kodi releases are available on the default BigBoss repository.)*
 
-    <img src="/img/install_ios_cydia_1.png" alt="Open Cydia" style={{ width: '100%', maxWidth: '420px', height: 'auto', display: 'block', margin: '8px auto', borderRadius: '6px', boxShadow: '0 4px 12px rgba(0,0,0,0.10)' }} />
-    1. Open Cydia on your iOS device.
+    - Open Cydia on your iOS device.
 
-    <img src="/img/install_ios_cydia_2.png" alt="Open Search tab" style={{ width: '100%', maxWidth: '420px', height: 'auto', display: 'block', margin: '8px auto', borderRadius: '6px', boxShadow: '0 4px 12px rgba(0,0,0,0.10)' }} />
-    2. Open the "Search" tab
-
-    <img src="/img/install_ios_cydia_3.png" alt="Search for Kodi" style={{ width: '100%', maxWidth: '420px', height: 'auto', display: 'block', margin: '8px auto', borderRadius: '6px', boxShadow: '0 4px 12px rgba(0,0,0,0.10)' }} />
-    3. Enter "Kodi" in the search field and touch the Kodi version corresponding to your device.
-
-    <img src="/img/install_ios_cydia_4.webp" alt="Modify Kodi package" style={{ width: '100%', maxWidth: '420px', height: 'auto', display: 'block', margin: '8px auto', borderRadius: '6px', boxShadow: '0 4px 12px rgba(0,0,0,0.10)' }} />
-    4. Touch "Modify".
-
-    <img src="/img/install_ios_cydia_5.png" alt="Install Kodi" style={{ width: '100%', maxWidth: '420px', height: 'auto', display: 'block', margin: '8px auto', borderRadius: '6px', boxShadow: '0 4px 12px rgba(0,0,0,0.10)' }} />
-    5. Touch "Install".
-
-    <img src="/img/install_ios_cydia_6.png" alt="Confirm installation" style={{ width: '100%', maxWidth: '420px', height: 'auto', display: 'block', margin: '8px auto', borderRadius: '6px', boxShadow: '0 4px 12px rgba(0,0,0,0.10)' }} />
-    6. Touch "Confirm".
-
-    <img src="/img/install_ios_cydia_7.webp" alt="Return to Cydia" style={{ width: '100%', maxWidth: '420px', height: 'auto', display: 'block', margin: '8px auto', borderRadius: '6px', boxShadow: '0 4px 12px rgba(0,0,0,0.10)' }} />
-    7. Wait until the "Return to Cydia" button appears and touch it.
-
-    <img src="/img/install_ios_cydia_8.png" alt="Kodi installed" style={{ width: '100%', maxWidth: '420px', height: 'auto', display: 'block', margin: '8px auto', borderRadius: '6px', boxShadow: '0 4px 12px rgba(0,0,0,0.10)' }} />
-    And you're done! You should now be running Kodi v21.2 Omega for iOS. Enjoy!
+    - Open the "Search" tab
+    
+    - Enter "Kodi" in the search field and touch the Kodi version corresponding to your device.
+    
+    - Touch "Modify".
+    
+    - Touch "Install".
+    
+    - Touch "Confirm".
+    
+    - Wait until the "Return to Cydia" button appears and touch it.
+    
+    **And you're done! You should now be running Kodi v21.2 Omega for iOS. Enjoy!**
 
 </details>
 

docusaurus.config.js

@@ -4,7 +4,7 @@
 // There are various equivalent ways to declare your Docusaurus config.
 // See: https://docusaurus.io/docs/api/docusaurus-config
 
-import {themes as prismThemes} from 'prism-react-renderer';
+import { themes as prismThemes } from 'prism-react-renderer';
 
 // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
 
@@ -30,7 +30,7 @@ const config = {
   organizationName: 'usebazz', // Usually your GitHub org/user name.
   projectName: 'guide', // Usually your repo name.
   trailingSlash: false,
-  
+
   onBrokenLinks: 'throw',
 
   // Even if you don't use internationalization, you can use this field to set
@@ -74,6 +74,10 @@ const config = {
           {
             type: 'localeDropdown',
           },
+          {
+            type: "custom-torbox",
+            position: "right",
+          },
         ],
       },
       footer: {

i18n/es/docusaurus-plugin-content-docs/current/streaming/kodi/intro.mdx

@@ -2,6 +2,7 @@
 title: Introduction | Kodi
 sidebar_label: Introduction
 sidebar_position: 1
+
 ---
 
 title: Introducción | Kodi

i18n/es/docusaurus-plugin-content-docs/current/streaming/kodi/setup.mdx

@@ -0,0 +1,2 @@
+# setup en español
+Voy a comenzar la guía para configurar Kodi y sus addons. Recomiendo que la **configuración                                                                                                                         inicial se realice en tu portátil o escritorio**. Una vez configurado, puedes hacer una copia de seguridad para exportarlo a otro dispositivo.      

src/components/features/index.js

@@ -0,0 +1,31 @@
+export default function ReferralButton({
+    color = "#0c360fff",
+    ref = "https://torbox.app/subscription?referral=74c57ae2-94eb-48fd-9812-856332b87169",
+    label = "Support me",
+    size = "w-10 h-10",
+    radius = "12px"
+}) {
+    return (
+        <div className="flex  justify-start">
+            <div class="btn-container">
+                <a
+                    title={label}
+                    className={`${label ? 'tb-button ' : `rounded-full ${size ? size : 'w-10 h-10'} block flex justify-center`} rounded-full`}
+                    style={{ backgroundColor: color, borderRadius: radius }}
+                    href={ref}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    <span class="tbtext">
+                        <img
+                            src="https://torbox.app/assets/logo-57adbf99.svg"
+                            class="tbimg"
+                            alt="Torbox referral"
+                        />
+                        {label ? label : null}
+                    </span>
+                </a>
+            </div>
+        </div>
+    )
+}

src/components/features/styles.module.css

@@ -27,4 +27,157 @@
   --ifm-color-primary-lighter: #32d8b4;
   --ifm-color-primary-lightest: #4fddbf;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+}
+
+
+
+img.tbimg {
+  display: initial;
+  vertical-align: middle;
+  height: 13px;
+  width: 20px;
+  padding-top: 0;
+  padding-bottom: 0;
+  border: none;
+  margin-top: 0;
+  margin-right: 2px;
+  margin-left: 0;
+  margin-bottom: 0px;
+  content: url("https://torbox.app/assets/logo-57adbf99.svg");
+}
+
+.tbimg:after {
+  vertical-align: middle;
+  height: 25px;
+  padding-top: 0;
+  padding-bottom: 0;
+  border: none;
+  margin-top: 0;
+  margin-right: 6px;
+  margin-left: 0;
+  margin-bottom: 4px;
+  content: url("https://ko-fi.com/img/whitelogo.svg");
+}
+
+.btn-container {
+  position: fixed !important;
+  bottom: 60px;
+  /* higher */
+  left: 20px;
+  /* opposite side */
+  z-index: 9999;
+  margin: 0 !important;
+}
+
+span.tbtext {
+  color: #fff;
+  letter-spacing: -0.15px;
+  /* Resetting line-height to fit inside the button's height */
+  line-height: 1;
+  padding: 0;
+  text-align: center;
+  text-decoration: none;
+  text-shadow: 0 1px 1px rgba(34, 34, 34, 0.05);
+}
+
+.tbtext a {
+  color: #fff;
+  text-decoration: none;
+}
+
+.tbtext a:hover {
+  color: #fff;
+  text-decoration: none;
+}
+
+a.tb-button {
+  box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
+  line-height: unset;
+  display: inline-flex;
+  /* Use flex to align icon and text */
+  align-items: center;
+  /* Vertically center icon and text */
+  background-color: #29abe0;
+  /* Reduced padding and increased border-radius for a pill-shaped button */
+  padding: 4px 14px;
+  border-radius: 30px;
+  /* Highly rounded, pill-like shape */
+
+  color: #fff;
+  cursor: pointer;
+  overflow-wrap: break-word;
+  vertical-align: middle;
+  border: 0 none #fff;
+  font-family: "Quicksand", Helvetica, Century Gothic, sans-serif;
+  text-decoration: none;
+  text-shadow: none;
+  font-weight: 700;
+  font-size: 14px;
+  height: 36px;
+  /* Set a fixed height for consistent size */
+}
+
+a.tb-button:visited {
+  color: #fff;
+  text-decoration: none;
+}
+
+a.tb-button:hover {
+  opacity: 0.85;
+  color: #f5f5f5;
+  text-decoration: none;
+}
+
+a.tb-button:active {
+  color: #f5f5f5;
+  text-decoration: none;
+}
+
+.tbtext img.tbimg {
+  height: 20px;
+  /* Slightly smaller icon */
+  width: auto;
+  margin-right: 6px;
+  margin-bottom: 0px;
+  /* Remove margin-bottom */
+  display: initial;
+  animation: tb-wiggle 3s infinite;
+}
+
+@keyframes tb-wiggle {
+  0% {
+    transform: rotate(0) scale(1);
+  }
+
+  60% {
+    transform: rotate(0) scale(1);
+  }
+
+  75% {
+    transform: rotate(0) scale(1.12);
+  }
+
+  80% {
+    transform: rotate(0) scale(1.1);
+  }
+
+  84% {
+    transform: rotate(-10deg) scale(1.1);
+  }
+
+  88% {
+    transform: rotate(10deg) scale(1.1);
+  }
+
+  92% {
+    transform: rotate(-10deg) scale(1.1);
+  }
+
+  96% {
+    transform: rotate(10deg) scale(1.1);
+  }
+
+  100% {
+    transform: rotate(0) scale(1);
+  }
 }

src/components/referralButton/index.jsx

@@ -0,0 +1,7 @@
+import ComponentTypes from "@theme-original/NavbarItem/ComponentTypes";
+import ReferralButton from "@site/src/components/referralButton";
+
+export default {
+    ...ComponentTypes,
+    "custom-torbox": ReferralButton,
+};