Skip to content

Commit

Permalink
Merge pull request #131 from HackTricks-wiki/add-language-selector
Browse files Browse the repository at this point in the history 
Add language selector
  • Loading branch information
@carlospolop
carlospolop authored Jan 2, 2025
2 parents f7079c0 + 2b9a051 commit 2b182c5
Show file tree
Hide file tree
Showing 6 changed files with 169 additions and 39 deletions.
1 change: 1 addition & 0 deletions book.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"]
Expand Down
18 changes: 10 additions & 8 deletions hacktricks-preprocessor.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,16 @@ def ref(matchobj):
href = matchobj.groups(0)[0].strip()
title = href
if href.startswith("http://") or href.startswith("https://"):
# pass
try:
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())
match = re.search('<title>(.*?)</title>', raw_html)
title = match.group(1) if match else href
except Exception as e:
logger.debug(f'Error opening URL {href}: {e}')
pass #nDont stop on broken link
if context['config']['preprocessor']['hacktricks']['env'] == 'dev':
pass
else:
try:
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())
match = re.search('<title>(.*?)</title>', raw_html)
title = match.group(1) if match else href
except Exception as e:
logger.debug(f'Error opening URL {href}: {e}')
pass #nDont stop on broken link
else:
try:
if href.endswith("/"):
Expand Down
56 changes: 56 additions & 0 deletions theme/book.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -590,6 +590,62 @@ 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; }
Expand Down
53 changes: 50 additions & 3 deletions theme/css/chrome.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -138,11 +145,13 @@ body.sidebar-visible #menu-bar {
}

/* Collapse Menu Popup */

#menubar-collapse-toggle {
position: relative;
}
#menubar-collapse-popup {
position: absolute;
right: 30px;
top: var(--menu-bar-height);
right: 0px;
top: 35px;
z-index: 105;
border-radius: 5px;
font-size: 14px;
Expand Down Expand Up @@ -172,6 +181,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;
Expand Down
78 changes: 52 additions & 26 deletions theme/index.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,34 +144,60 @@

<div class="right-buttons">
<div id="menubar-collapse">
<a class="menu-bar-link" href="https://training.hacktricks.xyz" target="_blank">
Hacktricks Training
</a>
<a class="menu-bar-link" href="https://twitter.com/hacktricks_live" target="_blank">
Twitter
</a>
<a class="menu-bar-link" href="https://www.linkedin.com/company/hacktricks" target="_blank">
Linkedin
</a>
<a class="menu-bar-link" href="https://github.com/sponsors/carlospolop" target="_blank">
Sponsor
</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>
<a class="menu-bar-link" href="https://training.hacktricks.xyz" target="_blank">
Hacktricks Training
</a>
<a class="menu-bar-link" href="https://twitter.com/hacktricks_live" target="_blank">
Twitter
</a>
<a class="menu-bar-link" href="https://www.linkedin.com/company/hacktricks" target="_blank">
Linkedin
</a>
<a class="menu-bar-link" href="https://github.com/sponsors/carlospolop" target="_blank">
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}}
<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>
</button>
{{/if}}
{{#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">
<i class="fa fa-search"></i>
</button>
{{/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">
Expand Down
2 changes: 0 additions & 2 deletions theme/sponsor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 2b182c5

Please sign in to comment.