Customize the homepage

dotfiles/.homepage/README.md

@@ -1,16 +0,0 @@
-# Customizable browser homepage
-
-This is a simple browser homepage with focus on customization.
-Try is out [here](https://jcionx.github.io/homepage).
-
-![](assets/screenshots/1.jpeg)
-
-The search bar is hidden until you start typing.
-
-![](assets/screenshots/2.jpeg)
-
-The `config.json` file stores all your configs. There you can show/hide elements, change the colors, the background, the default search engine, and add aliases to more engines.
-
-![](assets/screenshots/3.png)
-
-If you want to use this as your homepage directly from GitHub Pages, you can add `?config=url_to_your_config.json` to use a custom config.

dotfiles/.homepage/assets/css/style.css

@@ -1,106 +0,0 @@
-@font-face {
-    font-family: 'Roboto';
-    src: url('../fonts/Roboto-Regular.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Roboto';
-    src: url('../fonts/Roboto-LightItalic.ttf') format('truetype');
-    font-weight: normal;
-    font-style: italic;
-}
-
-body {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-    color: var(--primary-color);
-    text-align: center;
-    overflow: hidden;
-    margin: 0;
-    height: 100vh;
-    width: 100vw;
-    background-size: cover;
-    background-position: center center;
-}
-
-.clock {
-    display: none;
-    font-size: 10rem;
-    margin-top: 1.3rem;
-}
-
-.date {
-    display: none;
-    font-size: 2.5rem;
-}
-
-.quote {
-    display: none;
-    font-size: 1.6rem;
-    flex-direction: column;
-    align-items: center;
-    position: absolute;
-    bottom: 1.3rem;
-    width: 100vw;
-}
-
-#quote-text {
-    width: 50vw;
-}
-
-.quote-author {
-    font-style: italic;
-    font-weight: 200;
-    font-size: 1.2rem;
-}
-
-.search-box {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 80%;
-    height: 50px;
-    display: flex;
-    flex-direction: row;
-}
-
-
-.search-bar {   
-    width: 100%;
-    height: 100%;
-    outline: none;
-    border: solid 2px var(--primary-color);
-    border-radius: var(--border-radius);
-    color: var(--primary-color);
-    background-color: var(--secondary-color);
-    font-size: 1.5rem;
-}
-
-.search-icon {
-    height: 40px;
-    width: 40px;
-    position: relative;
-    left: -55px;
-    margin: 8px;
-}
-
-.search-bar:placeholder-shown {
-    opacity: 0;
-    transform: scale(0.95) translateY(1rem);
-}
-
-.search-bar:placeholder-shown ~ .search-icon {
-    opacity: 0;
-    transform: scale(0.95) translateY(1rem) translateX(-1.6rem);
-}
-
-.fade-in {
-    animation: fadeIn 1.5s;
-}
-
-@keyframes fadeIn {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
-}  

dotfiles/.homepage/assets/js/script.js

@@ -1,189 +0,0 @@
-// Load the config.json file (using JavaScript vanilla)
-
-config_file = 'config.json';
-
-const urlParams = new URLSearchParams(window.location.search);
-if (urlParams.has('json')) {
-    config_file = urlParams.get('json');
-}
-
-fetch(config_file)
-    .then(response => response.json())
-    .then(data => {
-        // Load the config.json file
-        console.log(data);
-
-        // Load the clock if the config.json file says so
-        if (data["show_clock"] == true) {
-            displayTime(data);
-            clock.style.display = "block";
-            setInterval(displayTime, 1000, data);
-        }
-
-        if (data["show_date"] == true) {
-            displayDate();
-            date.style.display = "block";
-            setInterval(displayDate, 60000);
-        }
-
-        if (data["random_quote"] == true) {
-            displayQuote();
-            quote.style.display = "flex";
-        }
-        
-        search_engine = data["search_engine"];
-        alt_engines = data["alt_engines"];
-        console.log(alt_engines)
-        document.documentElement.style.setProperty('--primary-color', data["primary_color"]);
-        document.documentElement.style.setProperty('--secondary-color', data["secondary_color"]);
-        document.documentElement.style.setProperty('--border-radius', data["border_radius"]);
-        document.getElementById('search-icon').setAttribute('fill', data["primary_color"]);
-        document.body.style.backgroundImage = "url('" + data["wallpaper"] + "')";
-
-        if (data["animations"] == true) {
-            clock.classList.add('fade-in');
-            date.classList.add('fade-in');
-            quote.classList.add('fade-in');
-            document.getElementById('search-bar').style.transition = "0.1s";
-            document.getElementById('search-icon').style.transition = "0.1s";
-        }
-
-        if (data["enable_rickroll_at_2am"] == true) {
-            rickroll_at_2am = true;
-        }
-        if (data["hourly_buawawa"] == true) {
-            hourly_buawawa = true;
-        }
-        if (data["ctrl_o_woooaaauuuuu"] == true) {
-            document.addEventListener('keydown', function(e) {
-                if ((e.ctrlKey || e.metaKey) && e.key === 'o') {
-                    let audio = new Audio('assets/audio/woooaaauuuuu.mp3');
-                    audio.play();
-                    e.preventDefault(); // Prevent the default action
-                }
-            });
-        }
-    }
-);
-
-rickroll_at_2am = false;
-hourly_buawawa = false;
-last_hour_buawawa = 0;
-
-search_engine = "";
-alt_engines = {}
-
-clock = document.getElementById('clock');
-clock_text = document.getElementById('clock-text');
-
-date = document.getElementById('date');
-date_text = document.getElementById('date-text');
-
-quote = document.getElementById('quote');
-quote_text = document.getElementById('quote-text');
-quote_author = document.getElementById('quote-author');
-
-function displayTime(config) {
-    if (config["24_hour"] == true) {
-        let date = new Date();
-        let hours = date.getHours();
-        let minutes = date.getMinutes();
-        minutes = minutes < 10 ? '0'+minutes : minutes;
-        let time = hours + ":" + minutes;
-        clock_text.innerHTML = time;
-    } else {
-        let date = new Date();
-        let hours = date.getHours();
-        let minutes = date.getMinutes();
-        let ampm = hours >= 12 ? 'PM' : 'AM';
-        hours = hours % 12;
-        hours = hours ? hours : 12;
-        minutes = minutes < 10 ? '0'+minutes : minutes;
-        let time = hours + ":" + minutes + " " + ampm;
-        clock_text.innerHTML = time;
-    }
-    if (rickroll_at_2am) {
-        let date = new Date();
-        let hours = date.getHours();
-        let minutes = date.getMinutes();
-        if (hours == 2 && minutes == 0) {
-            window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
-        }
-    }
-    if (hourly_buawawa) {
-        let date = new Date();
-        let minutes = date.getMinutes();
-        if (minutes == 0 && last_hour_buawawa != date.getHours()) {
-            last_hour_buawawa = date.getHours();
-            let audio = new Audio('assets/audio/buawawa.mp3');
-            audio.play();
-        }
-    }
-}
-
-function displayDate() {
-    let date = new Date();
-    let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
-    let day = days[date.getDay()];
-    let dayNumber = date.getDate();
-    let month = date.toLocaleString('default', { month: 'long' });
-    let year = date.getFullYear();
-
-    if (dayNumber == 1 || dayNumber == 21 || dayNumber == 31) {
-        dayNumber += "st";
-    } else if (dayNumber == 2 || dayNumber == 22) {
-        dayNumber += "nd";
-    } else if (dayNumber == 3 || dayNumber == 23) {
-        dayNumber += "rd";
-    } else {
-        dayNumber += "th";
-    }
-
-    let dateText = day + ", " + dayNumber + " " + month + " " + year;
-    date_text.innerHTML = dateText;
-}
-
-function displayQuote() {
-    fetch('https://api.quotable.io/random')
-        .then(response => response.json())
-        .then(data => {
-            quote_text.innerHTML = data["content"];
-            quote_author.innerHTML = "- " + data["author"];
-        }
-    );
-}
-
-// body on any keypress focus on search bar
-document.body.onkeypress = function() {
-    document.getElementById("search-bar").focus();
-}
-
-function isValidUrl(url) {
-    const regex = /(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/;
-    return regex.test(url);
-}
-
-// Check if search bar pressed enter
-document.getElementById("search-bar").addEventListener("keypress", function(e) {
-    if (e.key === 'Enter') {
-        let url = document.getElementById("search-bar").value;
-        // Check if starts with any of the alt engines
-        for (const [key, value] of Object.entries(alt_engines)) {
-            console.log(key, value)
-            if (url.startsWith(key)) {
-                window.location.href = value + url.replace(key, '');
-                return;
-            }
-        }
-
-        if (isValidUrl(url)) {
-            // Check if the url has http or https
-            if (!url.startsWith('http://') && !url.startsWith('https://')) {
-                url = 'http://' + url;
-            }
-            window.location.href = url;
-        } else {
-            window.location.href = search_engine + url;
-        }
-    }
-});

dotfiles/.homepage/config.json

@@ -1,34 +0,0 @@
-{
-    "show_clock": true,
-    "24_hour": true,
-    "show_date": true,
-    "primary_color": "#FFFFFF",
-    "secondary_color": "#4A4A4A",
-    "border_radius": "10px",
-    "wallpaper": "assets/images/wallpapers/1.jpg",
-    "random_quote": true,
-    "search_engine": "https://www.google.com/search?q=",
-    "animations": true,
-    "enable_rickroll_at_2am": true,
-    "hourly_buawawa": true,
-    "ctrl_o_woooaaauuuuu": true,
-    "alt_engines": {
-        "yt ": "https://www.youtube.com/results?search_query=",
-        "gh ": "https://github.com/search?q=",
-        "wiki ": "https://en.wikipedia.org/wiki/Special:Search?search=",
-        "aw ": "https://wiki.archlinux.org/index.php?search=",
-        "r/": "https://www.reddit.com/r/",
-        "u/": "https://www.reddit.com/u/",
-        "mc": "https://namemc.com/search?q=",
-        "pl": "https://www.planetminecraft.com/resources/?q=",
-        "ao3": "https://archiveofourown.org/works/search?utf8=%E2%9C%93&work_search%5Bquery%5D=",
-        "sof": "https://stackoverflow.com/search?q=",
-        "gl": "https://gitlab.com/search?search=",
-        "bb": "https://bitbucket.org/repo/all?name=",
-        "sf": "https://sourceforge.net/directory/?q=",
-        "npm": "https://www.npmjs.com/search?q=",
-        "yarn": "https://yarnpkg.com/packages?q=",
-        "pypi": "https://pypi.org/search/?q=",
-        "dh": "https://hub.docker.com/search?q="
-    }
-}

dotfiles/.homepage/index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="assets/css/style.css">
+  <link rel="stylesheet" href="style.css">
   <title>Homepage</title>
 </head>
 <body>
@@ -13,14 +13,6 @@
   <div class="date" id="date">
     <span id="date-text"></span>
   </div>
-    <div class="quote" id="quote">
+  <script src="script.js"></script>
-        <span id="quote-text"></span>
-        <span id="quote-author" class="quote-author"></span>
-    </div>
-    <div class="search-box">
-        <input type="text" class="search-bar" id="search-bar" placeholder=" " autocomplete="off" autofocus>
-        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed" class="search-icon" id="search-icon"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"></svg>
-    </div>
-    <script src="assets/js/script.js"></script>
 </body>
 </html>

dotfiles/.homepage/script.js

@@ -0,0 +1,44 @@
+// Load the config.json file (using JavaScript vanilla)
+
+let clock_text = document.getElementById('clock-text');
+let date_text = document.getElementById('date-text');
+
+displayTime();
+setInterval(displayTime, 1000);
+displayDate();
+setInterval(displayDate, 60000);
+
+function displayTime() {
+  let date = new Date();
+  let hours = date.getHours();
+  let minutes = date.getMinutes();
+  let ampm = hours >= 12 ? 'PM' : 'AM';
+  hours = hours % 12;
+  hours = hours ? hours : 12;
+  minutes = minutes < 10 ? '0'+minutes : minutes;
+  let time = hours + ":" + minutes + " " + ampm;
+  clock_text.innerHTML = time;
+}
+
+function displayDate() {
+  let date = new Date();
+  let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+  let day = days[date.getDay()];
+  let dayNumber = date.getDate();
+  let month = date.toLocaleString('default', { month: 'long' });
+  let year = date.getFullYear();
+
+  if (dayNumber == 1 || dayNumber == 21 || dayNumber == 31) {
+    dayNumber += "st";
+  } else if (dayNumber == 2 || dayNumber == 22) {
+    dayNumber += "nd";
+  } else if (dayNumber == 3 || dayNumber == 23) {
+    dayNumber += "rd";
+  } else {
+    dayNumber += "th";
+  }
+
+  let dateText = day + ", " + dayNumber + " " + month + " " + year;
+  date_text.innerHTML = dateText;
+}
+

dotfiles/.homepage/style.css

@@ -0,0 +1,19 @@
+body {
+    font-family: "JetBrainsMono NF", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    color: #ebdbb2;
+    text-align: center;
+    background: #282828;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.clock {
+    font-size: 8rem;
+}
+
+.date {
+    font-size: 2rem;
+}
+