Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve Webpages #36

Merged
merged 1 commit into from
Jun 24, 2023
Merged

Improve Webpages #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions docs/faq.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta id="pagename" content="faq">
<title>Polonium | FAQ</title>
<script src="main.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<header>
<div id="header"></div>
</header>

<div id="navbar" class="navbar"></div>

<div id="content" class="content md">

</div>

<script>
fetch("faq.md").then(function(response) {
response.text().then(function(text) {
document.getElementById("content").innerHTML = marked.parse(text);
});
});
</script>

<footer>
<div id="footer"></div>
</footer>

</body>
</html>
8 changes: 1 addition & 7 deletions docs/faq.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,4 @@ KWin, by default, remembers the location of windows. It will try to put them bac

### I want to move windows using my mouse while keeping them tiled

When moving a window, KWin untiles it. I could circumvent this issue by constantly forcing the window back into the nearest available tile, but it would be unoptimized, messy, and would not integrate well with the KWin tiling system. This script tries to work instead of against the builtin tiling system whenever possible, and therefore supports moving floated windows into tiles when using the shift key (just as our founding fathers intended). This being said, if KWin ever adds an option to keep windows tiled while moving them, you bet I would jump onto supporting that engine-side in a heartbeat.

---

<div align="center"><sub>
Polonium and its documentation are licensed under the MIT License as shown <a href="https://github.com/zeroxoneafour/polonium/blob/master/license.txt">here</a>
</sub></div>
When moving a window, KWin untiles it. I could circumvent this issue by constantly forcing the window back into the nearest available tile, but it would be unoptimized, messy, and would not integrate well with the KWin tiling system. This script tries to work instead of against the builtin tiling system whenever possible, and therefore supports moving floated windows into tiles when using the shift key (just as our founding fathers intended). This being said, if KWin ever adds an option to keep windows tiled while moving them, you bet I would jump onto supporting that engine-side in a heartbeat.
8 changes: 8 additions & 0 deletions docs/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<div>
<br/>
<sub>
Polonium and its documentation are licensed under the MIT License as shown <a href="https://github.com/zeroxoneafour/polonium/blob/master/license.txt">here</a>
</sub>
<br/>
<br/>
</div>
13 changes: 13 additions & 0 deletions docs/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<div>
<img alt=logo width=30% src=logo.svg />
<h2>Polonium</h2>
<h3>A tiling window manager for KWin 5.27 and up</h3>
</br>
<a href=https://store.kde.org/p/2042756>
<img alt="KDE Store" src="https://img.shields.io/badge/KDE%20Store-Install-blue?style=for-the-badge&logo=KDE&logoColor=white&labelColor=blue" />
</a>
<a href="https://github.com/zeroxoneafour/polonium">
<img alt="GitHub" src="https://img.shields.io/badge/GitHub-Source%20Code-grey?style=for-the-badge&logo=GitHub&logoColor=white&labelColor=grey" />
</a>
</br>
</div>
34 changes: 34 additions & 0 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta id="pagename" content="home">
<title>Polonium | Home</title>
<script src="main.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<header>
<div id="header"></div>
</header>

<div id="navbar" class="navbar"></div>

<div id="content" class="content">
</div>

<script>
fetch("https://raw.githubusercontent.com/zeroxoneafour/polonium/master/readme.md").then(function(response) {
response.text().then(function(text) {
document.getElementById("content").innerHTML = marked.parse(text);
});
});
</script>

<footer>
<div id="footer"></div>
</footer>

</body>
</html>
17 changes: 0 additions & 17 deletions docs/index.md
View file
Open in desktop

This file was deleted.

14 changes: 14 additions & 0 deletions docs/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
function include(file) {
var script = document.createElement('script');
script.src = file;
script.type = 'text/javascript';
script.defer = true;
document.getElementsByTagName('head').item(0).appendChild(script);
}

include("./scripts/themeToggle.js");
include("./scripts/header.js");
include("./scripts/footer.js");
include("./scripts/navbar.js");
include("https://cdn.jsdelivr.net/npm/marked/marked.min.js");
include("https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js");
69 changes: 69 additions & 0 deletions docs/navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<div id="nav" class="nav">
<div class="navmenu" onclick="Menu()">
<div class="hamicon" id="menu">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>

<div class="navitem activenav" id="activenav">
</div>

<div class="navitem" id="homenav">
<a class="navbutton" href='/polonium/'>
<svg width="20" height="20" viewBox="0 0 24 24">
<path clip-rule="evenodd" d="M11.3103 1.77586C11.6966 1.40805 12.3034 1.40805 12.6897 1.77586L20.6897 9.39491L23.1897 11.7759C23.5896 12.1567 23.605 12.7897 23.2241 13.1897C22.8433 13.5896 22.2103 13.605 21.8103 13.2241L21 12.4524V20C21 21.1046 20.1046 22 19 22H14H10H5C3.89543 22 3 21.1046 3 20V12.4524L2.18966 13.2241C1.78972 13.605 1.15675 13.5896 0.775862 13.1897C0.394976 12.7897 0.410414 12.1567 0.810345 11.7759L3.31034 9.39491L11.3103 1.77586ZM5 10.5476V20H9V15C9 13.3431 10.3431 12 12 12C13.6569 12 15 13.3431 15 15V20H19V10.5476L12 3.88095L5 10.5476ZM13 20V15C13 14.4477 12.5523 14 12 14C11.4477 14 11 14.4477 11 15V20H13Z"/>
</svg>
Home
</a>
</div>

<div class="navitem" id="usagenav">
<a class="navbutton" href='usage.html'>
<svg width="20" height="20" viewBox="0 -0.5 21 21">
<g id="Page-1">
<g id="Dribbble-Light-Preview" transform="translate(-339.000000, -480.000000)">
<g id="icons" transform="translate(56.000000, 160.000000)">
<path d="M297.92575,332.227 L294.9427,334.913 C294.13315,335.641 292.86685,335.641 292.0573,334.913 L289.07425,332.227 C288.65215,331.848 288.6343,331.215 289.03225,330.813 L289.03225,330.813 C289.4302,330.412 290.09485,330.394 290.51695,330.773 L291.5638,331.716 C291.89875,332.018 292.45,331.792 292.45,331.353 L292.45,326 C292.45,325.448 292.9204,325 293.5,325 C294.0796,325 294.55,325.448 294.55,326 L294.55,331.353 C294.55,331.792 295.10125,332.018 295.43515,331.716 L296.48305,330.773 C296.9041,330.394 297.56875,330.412 297.96775,330.813 L297.96775,330.813 C298.3657,331.215 298.3468,331.848 297.92575,332.227 M300.85,338 L286.15,338 C285.5704,338 285.1,337.553 285.1,337 L285.1,323 C285.1,322.448 285.5704,322 286.15,322 L300.85,322 C301.4296,322 301.9,322.448 301.9,323 L301.9,337 C301.9,337.553 301.4296,338 300.85,338 M283,322 L283,338 C283,339.105 283.93975,340 285.1,340 L301.9,340 C303.0592,340 304,339.105 304,338 L304,322 C304,320.896 303.0592,320 301.9,320 L285.1,320 C283.93975,320 283,320.896 283,322"></path>
</g>
</g>
</g>
</svg>
Usage
</a>
</div>

<div class="navitem" id="faqnav">
<a class="navbutton" href='faq.html'>
<svg width="20" height="20" viewBox="0 -0.5 21 21">
<g id="Page-1">
<g id="Dribbble-Light-Preview" transform="translate(-259.000000, -520.000000)">
<g id="icons" transform="translate(56.000000, 160.000000)">
<path d="M213.2669,374.512 C213.2669,375.064 212.7965,375.512 212.2169,375.512 C211.6373,375.512 211.1669,375.064 211.1669,374.512 C211.1669,373.96 211.6373,373.512 212.2169,373.512 C212.7965,373.512 213.2669,373.96 213.2669,374.512 M209.0669,365 C209.0669,364.448 209.5373,364 210.1169,364 L216.1124,364 C216.98915,364 217.7,364.677 217.7,365.512 L217.7,368 C217.7,369.1 216.755,370 215.6,370 L214.03445,370 C213.7394,370 213.5,370.228 213.5,370.509 L213.5,371.512 C213.5,372.064 213.03065,372.512 212.45,372.512 C211.8704,372.512 211.4,372.064 211.4,371.512 L211.4,369.778 C211.4,368.796 212.2358,368 213.2669,368 L214.3169,368 C214.8965,368 215.3669,367.552 215.3669,367 C215.3669,366.448 214.8965,366 214.3169,366 L210.1169,366 C209.5373,366 209.0669,365.552 209.0669,365 M220.85,378 L206.15,378 C205.5704,378 205.1,377.552 205.1,377 L205.1,363 C205.1,362.448 205.5704,362 206.15,362 L220.85,362 C221.43065,362 221.9,362.448 221.9,363 L221.9,377 C221.9,377.552 221.43065,378 220.85,378 M203,362 L203,378 C203,379.105 203.9408,380 205.1,380 L221.9,380 C223.06025,380 224,379.105 224,378 L224,362 C224,360.896 223.06025,360 221.9,360 L205.1,360 C203.9408,360 203,360.896 203,362"></path>
</g>
</g>
</g>
</svg>
FAQ
</a>
</div>

<div class="navitem dropdown" id="morenav">
<a class="navbutton">
<svg width="20" height="20" viewBox="0 0 24 24">
<path d="M4 5C3.44772 5 3 5.44772 3 6C3 6.55228 3.44772 7 4 7H20C20.5523 7 21 6.55228 21 6C21 5.44772 20.5523 5 20 5H4ZM3 12C3 11.4477 3.44772 11 4 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H4C3.44772 13 3 12.5523 3 12ZM3 18C3 17.4477 3.44772 17 4 17H20C20.5523 17 21 17.4477 21 18C21 18.5523 20.5523 19 20 19H4C3.44772 19 3 18.5523 3 18Z"/>
</svg>
More
</a>
<div class="dropdown-content">
<div class="dropdown-bg">
<a class="navbutton dropitem" href="https://github.com/zeroxoneafour/polonium/blob/master/changelog.md">Changelog</a>
<a class="navbutton dropitem" href="https://github.com/zeroxoneafour/polonium/blob/master/contributing.md">Contribute</a>
</div>
</div>
</div>

</div>

<div id="navright" class="navright"></div>
5 changes: 5 additions & 0 deletions docs/scripts/footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
fetch("footer.html").then(function(response) {
response.text().then(function(text) {
document.getElementById("footer").innerHTML = text;
});
});
5 changes: 5 additions & 0 deletions docs/scripts/header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
fetch("header.html").then(function(response) {
response.text().then(function(text) {
document.getElementById("header").innerHTML = text;
});
});
16 changes: 16 additions & 0 deletions docs/scripts/navbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
fetch("navbar.html").then(function(response) {
response.text().then(function(text) {
document.getElementById("navbar").innerHTML = text + document.getElementById("navbar").innerHTML;
document.getElementById('activenav').innerHTML=document.getElementById(document.getElementById("pagename").getAttribute("content") + "nav").innerHTML;
document.getElementById(document.getElementById("pagename").getAttribute("content") + "nav").classList.add("active");
});
});

function Menu(icon) {
var x = document.getElementById("navbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
81 changes: 81 additions & 0 deletions docs/scripts/themeToggle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
themeitem = document.createElement("div");
themebutton = document.createElement("button");
themeIcon = document.createElement("div");

themeitem.classList.add("navitem");
themebutton.classList.add("navbutton");
themebutton.classList.add("change-theme");
themeIcon.classList.add("material-symbols-rounded");

themebutton.setAttribute("onclick", "themeToggle()");
themebutton.setAttribute("onkeydown", "if(event.key === 'Enter'){themeToggle()}");

themeIcon.setAttribute("id", "theme-icon")
themeIcon.innerHTML = "dark_mode";

themebutton.appendChild(themeIcon);
themeitem.appendChild(themebutton)
inject();

function inject() {
try {
document.getElementById("navright").appendChild(themeitem);
}
catch (err) {
setTimeout(()=> {inject()}, 200);
}

}

function lightTheme() {
try {
document.documentElement.setAttribute('theme', 'light');
document.getElementById("theme-icon").textContent = "dark_mode";
}
catch (err) {
setTimeout(()=> {lightTheme()}, 200);
}
}

function darkTheme() {
try {
document.documentElement.setAttribute('theme', 'dark');
document.getElementById("theme-icon").textContent = "light_mode";
}
catch (err) {
setTimeout(()=> {darkTheme()}, 200);
}
}

(function () {
let onPageLoad = localStorage.getItem("theme") || "";
if (onPageLoad === "") {
if (window.matchMedia('(prefers-color-scheme: light)').matches) {
localStorage.setItem("theme", "light_mode");
lightTheme()
}
else {
localStorage.setItem("theme", "dark_mode");
darkTheme()
}
}

if (onPageLoad === "light_mode") {
lightTheme()
}
if (onPageLoad === "dark_mode") {
darkTheme()
}
})();

function themeToggle() {
let theme = localStorage.getItem("theme");
if (theme && theme === "dark_mode") {
localStorage.setItem("theme", "light_mode");
lightTheme()
}
else if (theme && theme === "light_mode") {
localStorage.setItem("theme", "dark_mode");
darkTheme()
}
}
Loading