Add languages dropdown

book.toml

@@ -22,6 +22,7 @@ after = ["links"]
 
 [preprocessor.hacktricks]
 command = "python3 ./hacktricks-preprocessor.py"
+env = "prod"
 
 [output.html]
 additional-css = ["theme/pagetoc.css", "theme/tabs.css"]

hacktricks-preprocessor.py

@@ -30,14 +30,16 @@ def ref(matchobj):
     href =  matchobj.groups(0)[0].strip()
     title = href
     if href.startswith("http://") or href.startswith("https://"):
-        # pass
+        if context['config']['preprocessor']['hacktricks']['env'] == 'dev':
-        try:
+            pass
-            raw_html = str(urlopen(Request(href, headers={'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:124.0) Gecko/20100101 Firefox/124.0'})).read())
+        else:
-            match = re.search('<title>(.*?)</title>', raw_html)
+            try:
-            title = match.group(1) if match else href
+                raw_html = str(urlopen(Request(href, headers={'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:124.0) Gecko/20100101 Firefox/124.0'})).read())
-        except Exception as e:
+                match = re.search('<title>(.*?)</title>', raw_html)
-            logger.debug(f'Error opening URL {href}: {e}')
+                title = match.group(1) if match else href
-            pass #nDont stop on broken link
+            except Exception as e:
+                logger.debug(f'Error opening URL {href}: {e}')
+                pass #nDont stop on broken link
     else:
         try:
             if href.endswith("/"):
@@ -90,7 +92,7 @@ if __name__ == '__main__':
     context, book = json.load(sys.stdin)
 
     logger.debug(f"Context: {context}")
-
+    logger.debug(f"Env: {context['config']['preprocessor']['hacktricks']['env']}")
 
     for chapter in iterate_chapters(book['sections']):
         logger.debug(f"Chapter: {chapter['path']}")

theme/book.js

@@ -590,6 +590,61 @@ function playground_text(playground, hidden = true) {
     });
 })();
 
+
+(function menubarLanguage() {
+    var menubarLanguageToggleButton = document.getElementById('menubar-languages-toggle');
+    var menubarLanguagePopup = document.getElementById('menubar-languages-popup');
+    var languageButtons = menubarLanguagePopup.querySelectorAll('.menu-bar-link');
+
+    function showLanguage() {
+        menubarLanguagePopup.style.display = 'flex';
+        menubarLanguageToggleButton.setAttribute('aria-expanded', true);
+    }
+
+    function hideLanguage() {
+        menubarLanguagePopup.style.display = 'none';
+        menubarLanguageToggleButton.setAttribute('aria-expanded', false);
+        menubarLanguageToggleButton.focus();
+    }
+
+    menubarLanguageToggleButton.addEventListener('click', function () {
+        if (menubarLanguagePopup.style.display === 'flex') {
+            hideLanguage();
+        } else {
+            showLanguage();
+        }
+    });
+
+    menubarLanguagePopup.addEventListener('focusout', function(e) {
+        // e.relatedTarget is null in Safari and Firefox on macOS (see workaround below)
+        if (!!e.relatedTarget && !menubarLanguageToggleButton.contains(e.relatedTarget) && !menubarLanguagePopup.contains(e.relatedTarget)) {
+            hideLanguage();
+        }
+    });
+
+    // Should not be needed, but it works around an issue on macOS & iOS: https://github.com/rust-lang/mdBook/issues/628
+    document.addEventListener('click', function(e) {
+        if (menubarLanguagePopup.style.display === 'block' && !menubarLanguageToggleButton.contains(e.target) && !menubarLanguagePopup.contains(e.target)) {
+            hideLanguage();
+        }
+    });
+    
+    languageButtons.forEach((btn) => {
+        btn.addEventListener('click', function(e) {
+            const regex = /(?:(?:\/)+(?<lang>[a-z]{2}(?=\/|$)))?(?<path>(?:\/)*.*)?/g
+            var match = regex.exec(window.location.pathname)
+          
+            var path = match.groups.path
+            console.log(`Path: ${path} ${typeof path}`)
+          
+            const lang = match.groups.lang
+            console.log(`Lang: ${lang}`)
+            
+            window.location = `/${e.target.id}${path}${window.location.hash}`
+        });
+    })
+})();
+
 (function chapterNavigation() {
     document.addEventListener('keydown', function (e) {
         if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) { return; }

theme/css/chrome.css

@@ -83,6 +83,13 @@ body.sidebar-visible #menu-bar {
     }
 }
 
+.right-buttons .icons {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    column-gap: 0.5rem;
+}
+
 .icon-button {
     border: none;
     background: var(--bg);
@@ -139,10 +146,13 @@ body.sidebar-visible #menu-bar {
 
 /* Collapse Menu Popup */
 
+#menubar-collapse-toggle {
+    position: relative;
+}
 #menubar-collapse-popup {
     position: absolute;
-    right: 30px;
+    right: 0px;
-    top: var(--menu-bar-height);
+    top: 35px;
     z-index: 105;
     border-radius: 5px;
     font-size: 14px;
@@ -172,6 +182,44 @@ body.sidebar-visible #menu-bar {
     background-color: var(--theme-hover);
 }
 
+/* Languages Menu Popup */
+#menubar-languages-toggle {
+    position: relative;
+}
+
+#menubar-languages-popup {
+    position: absolute;
+    right: 0px;
+    top: 35px;
+    z-index: 105;
+    border-radius: 5px;
+    font-size: 14px;
+    color: var(--fg);
+    background: var(--bg);
+    border: 1px solid var(--table-border-color);
+    margin: 0;
+    padding: 0px;
+    display: none;
+    flex-direction: column;
+    max-height: 300px;
+    width: 150px;
+    overflow: scroll;
+}
+#menubar-languages-popup .menu-bar-link {
+    border: 0;
+    margin: 0;
+    padding: 8px 20px;
+    line-height: 25px;
+    white-space: nowrap;
+    text-align: start;
+    cursor: pointer;
+    color: inherit;
+    background: inherit;
+    font-size: inherit;
+}
+#menubar-languages-popup .menu-bar-link:hover {
+    background-color: var(--theme-hover);
+}
 
 .left-buttons {
     display: flex;

theme/index.hbs

@@ -144,34 +144,60 @@
 
                         <div class="right-buttons">
                             <div id="menubar-collapse">
-                            <a class="menu-bar-link" href="https://training.hacktricks.xyz" target="_blank">
+                                <a class="menu-bar-link" href="https://training.hacktricks.xyz" target="_blank">
-                                Hacktricks Training
+                                    Hacktricks Training
-                            </a>
+                                </a>
-                            <a class="menu-bar-link" href="https://twitter.com/hacktricks_live" target="_blank">
+                                <a class="menu-bar-link" href="https://twitter.com/hacktricks_live" target="_blank">
-                                Twitter
+                                    Twitter
-                            </a>
+                                </a>
-                            <a class="menu-bar-link" href="https://www.linkedin.com/company/hacktricks" target="_blank">
+                                <a class="menu-bar-link" href="https://www.linkedin.com/company/hacktricks" target="_blank">
-                                Linkedin
+                                    Linkedin
-                            </a>
+                                </a>
-                            <a class="menu-bar-link" href="https://github.com/sponsors/carlospolop" target="_blank">
+                                <a class="menu-bar-link" href="https://github.com/sponsors/carlospolop" target="_blank">
-                                Sponsor
+                                    Sponsor
-                            </a>
+                                </a>
-                            </div>
-                            <button id="menubar-collapse-toggle" class="icon-button" type="button" title="Toggle menu bar" aria-label="Toggle Menu bar" aria-expanded="false" aria-controls="collapse">
-                                <i class="fa fa-ellipsis-h"></i>
-                            </button>
-                            <div id="menubar-collapse-popup" class="menubar-collapse-popup" aria-label="Menu" role="menu">
-                                <a href="https://training.hacktricks.xyz" target="_blank" role="menuitem" class="menu-bar-link">Hacktricks Training</a>
-                                <a href="https://twitter.com/hacktricks_live" target="_blank" role="menuitem" class="menu-bar-link">Twitter</a>
-                                <a href="https://www.linkedin.com/company/hacktricks" target="_blank" role="menuitem" class="menu-bar-link">Linkedin</a>
-                                <a href="https://github.com/sponsors/carlospolop" target="_blank" role="menuitem" class="menu-bar-link">Sponsor</a>
                             </div>
+                            <div class="icons">
+                                <div id="menubar-collapse-toggle" class="icon-button" type="button" title="Toggle menu bar" aria-label="Toggle Menu bar" aria-expanded="false" aria-controls="collapse">
+                                    <i class="fa fa-ellipsis-h"></i>
+                                    <div id="menubar-collapse-popup" class="menubar-collapse-popup" aria-label="Menu" role="menu">
+                                        <a href="https://training.hacktricks.xyz" target="_blank" role="menuitem" class="menu-bar-link">Hacktricks Training</a>
+                                        <a href="https://twitter.com/hacktricks_live" target="_blank" role="menuitem" class="menu-bar-link">Twitter</a>
+                                        <a href="https://www.linkedin.com/company/hacktricks" target="_blank" role="menuitem" class="menu-bar-link">Linkedin</a>
+                                        <a href="https://github.com/sponsors/carlospolop" target="_blank" role="menuitem" class="menu-bar-link">Sponsor</a>
+                                    </div>
+                                </div>
 
-                            {{#if search_enabled}}
+                                {{#if search_enabled}}
-                            <button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
+                                <button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
-                                <i class="fa fa-search"></i>
+                                    <i class="fa fa-search"></i>
-                            </button>
+                                </button>
-                            {{/if}}
+                                {{/if}}
+
+                                <div id="menubar-languages-toggle" class="icon-button" type="button" title="Translations" aria-label="Toggle Tanslations" aria-expanded="false" aria-controls="translations">
+                                    <i class="fa fa-globe"></i>
+                                    
+                                    <div id="menubar-languages-popup" class="menubar-languages-popup" aria-label="Language menu" role="language menu">
+                                        <button id="en" role="menuitem" class="menu-bar-link">English</button>
+                                        <button id="es" role="menuitem" class="menu-bar-link">Spanish</button>
+                                        <button id="fr" role="menuitem" class="menu-bar-link">French</button>
+                                        <button id="de" role="menuitem" class="menu-bar-link">German</button>
+                                        <button id="el" role="menuitem" class="menu-bar-link">Greek</button>
+                                        <button id="hi" role="menuitem" class="menu-bar-link">Hindi</button>
+                                        <button id="it" role="menuitem" class="menu-bar-link">Italian</button>
+                                        <button id="ja" role="menuitem" class="menu-bar-link">Japanese</button>
+                                        <button id="ko" role="menuitem" class="menu-bar-link">Korean</button>
+                                        <button id="pl" role="menuitem" class="menu-bar-link">Polish</button>
+                                        <button id="pt" role="menuitem" class="menu-bar-link">Portuguese</button>
+                                        <button id="sr" role="menuitem" class="menu-bar-link">Serbian</button>
+                                        <button id="sw" role="menuitem" class="menu-bar-link">Swahili</button>
+                                        <button id="tr" role="menuitem" class="menu-bar-link">Turkish</button>
+                                        <button id="uk" role="menuitem" class="menu-bar-link">Ukrainian</button>
+                                        <button id="af" role="menuitem" class="menu-bar-link">Afrikaans</button>
+                                        <button id="zh" role="menuitem" class="menu-bar-link">Chinese</button>
+                                    </div>
+                                </div>
+                            </div>
 
                             {{#if print_enable}}
                             <a href="{{ path_to_root }}print.html" title="Print this book" aria-label="Print this book">

theme/sponsor.js

@@ -19,13 +19,11 @@
     try {
       const response = await fetch(url, { method: "GET" })
       if (!response.ok) {
-        console.log(response)
         throw new Error(`Response status: ${response.status}`)
       }
 
       const json = await response.json()
       var sponsor = json.sponsor
-      console.log("boop", sponsor)
       sponsorImg.src = sponsor.image_url
       sponsorTitle.textContent = sponsor.name
       sponsorDescription.innerHTML = sponsor.description