MarketingMax/pages/homepage.html.vue

<template>
    <div class="flex justify-center items-center w-2xl mx-auto">
        <div class="flex flex-row flex-wrap items-start w-full">
            <div class="text-box py-2 w-full">
                <input
                    type="text"
                    placeholder="Type some shit 😘🔎"
                    class="glass"
                    v-model="inputText"
                    v-on:keydown="filterKeydown"
                    v-on:keyup="filterLinks"
                    v-on:keyup.enter="webSearch"
                    ref="search"
                />
            </div>

            <div v-for="column in columns" class="w-1/2 md:w-1/4 flex flex-col">
                <h2 class="capitalize text-center text-white">{{ column }}</h2>
                <div
                    v-for="link in sortedLinks(links, column)"
                    class="p-1 flex flex-col justify-stretch"
                >
                    <a
                        :href="setupUrl(link.url)"
                        class="rounded-md bg-slate-200 py-2 md:px-4 glass text-s text-center md:text-left md:text-base"
                        target="_self"
                        v-if="link.column == column"
                    >
                        <span class="visual-aid">
                            {{ link.emoji }}
                        </span>
                        {{ link?.title }}
                    </a>
                </div>
            </div>
            <!-- <div class="lip one"></div> -->

            <span
                v-on:click="clicks++"
                class="small message"
                v-html="generateMessage(2)"
            ></span>
        </div>
    </div>
</template>

<script setup>
definePageMeta({
    layout: "homepage",
});
let seed = ref(0);
let clicks = ref(0);
let inputText = ref("");
let suggestions = ref([]);
let suggestionIndex = ref(0);
let autocomplete = ref(["google.com", "gmail.com", "graxday.com"]);
let columns = ref(["web", "apps", "local", "dumb"]);
let links = ref([
    {
        column: "local",
        url: "192.168.1.6",
        title: "Tower",
        emoji: "🖥️",
    },
    {
        column: "local",
        url: "192.168.1.242/admin",
        title: "Pi-Hole",
        emoji: "🌌",
    },
    {
        column: "local",
        url: "192.168.1.6:8112",
        title: "Deluge",
        emoji: "💦",
    },
    {
        column: "local",
        url: "192.168.1.164",
        title: "Marvin",
        emoji: "🧪",
    },
    {
        column: "local",
        url: "https://192.168.1.1",
        title: "Router",
        emoji: "📶",
    },

    {
        column: "apps",
        url: "192.168.1.164:9999/admin",
        title: "Blog Editing",
        emoji: "✏️",
    },

    {
        column: "apps",
        url: "www.solidscribe.com",
        title: "Solid Scribe",
        emoji: "🔏",
    },
    {
        column: "web",
        url: "www.wunderground.com/weather/us/az/flagstaff/KAZFLAGS335",
        title: "Weather",
        emoji: "🌦️",
    },

    {
        column: "web",
        url: "www.amazon.com",
        title: "Amazon",
        emoji: "🛒",
    },
    {
        column: "web",
        url: "www.camelcamelcamel.com",
        title: "Camel Camel Camel",
        emoji: "🐫",
    },

    {
        column: "apps",
        url: "spotify.com",
        title: "Spotify",
        emoji: "🎶",
    },
    {
        column: "web",
        url: "butcherbox.com",
        title: "Butcher Box",
        emoji: "📦",
    },
    {
        column: "apps",
        url: "schwab.com",
        title: "Schwab",
        emoji: "🤑",
    },
    {
        column: "local",
        url: "graxday.com",
        title: "Grax Day",
        emoji: "😘",
    },
    {
        column: "web",
        url: "https://drive.google.com/drive/u/0/folders/10hsNBu0o8at687PLc5mcfDtJkhjDcwk9?ths=true",
        title: "Grax Day Docs",
        emoji: "📄",
    },

    // {'column':'apps','url':'x.maxg.cc/code/?folder=/home/mab/ss', 'title':'Code Server', 'emoji':'🦿'},
    {
        column: "apps",
        url: "pix.maxg.cc/library/import",
        title: "PhotoPrism Import",
        emoji: "📷",
    },
    {
        column: "apps",
        url: "http://192.168.1.6:2342/library/login",
        title: "PhotoPrism Local",
        emoji: "📷",
    },

    {
        column: "apps",
        url: "http://git.maxg.cc",
        title: "Gitea",
        emoji: "🍵",
    },
    {
        column: "web",
        url: "https://forum.xda-developers.com/t/rom-13-op7pro-crdroid-v9-0-18-12-2022.4511589/page-12",
        title: "OnePlus7 ISO",
        emoji: "📱",
    },
    {
        column: "local",
        url: "https://localhost:47990/",
        title: "Sunshine",
        emoji: "☀️",
    },

    // dumb
    // {
    //     column: "dumb",
    //     url: "www.youtube.com",
    //     title: "Youtube",
    //     emoji: "📺",
    // },
    {
        column: "dumb",
        url: "arstechnica.com",
        title: "ArsTechnica",
        emoji: "📰",
    },
    {
        column: "dumb",
        url: "phoronix.com",
        title: "Phoronix",
        emoji: "📰",
    },

    {
        column: "dumb",
        url: "slashdot.org/",
        title: "Slashdot",
        emoji: "📃",
    },
    {
        column: "dumb",
        url: "imgur.com",
        title: "Imgur",
        emoji: "😺",
    },
    {
        column: "dumb",
        url: "hackaday.com",
        title: "Hack a Day",
        emoji: "☠",
    },
    // {
    //     column: "dumb",
    //     url: "duckduckgo.com",
    //     title: "Duck Duck Go",
    //     emoji: "🦆",
    // },
    // { column: "dumb", url: "bing.com", title: "Bing", emoji: "🦑" },
    {
        column: "web",
        url: "google.com",
        title: "Google",
        emoji: "🐚",
    },
    {
        column: "web",
        url: "https://www.etsy.com/shop/PowerfulSpell",
        title: "Powerful Spell",
        emoji: "🧚🏻",
    },
    {
        column: "dumb",
        url: "https://kbd.news/",
        title: "KBD",
        emoji: "⌨️",
    },
    {
        column: "dumb",
        url: "https://news.ycombinator.com/",
        title: "Hacker News",
        emoji: "💀",
    },
    {
        column: "dumb",
        url: "https://tildes.net/",
        title: "Tildes",
        emoji: "~",
    },

    {
        column: "apps",
        url: "https://maxg.cc",
        title: "Maxg.cc - resume",
        emoji: "M",
    },
    {
        column: "local",
        url: "http://192.168.1.164:3002/",
        title: "Maxg.cc - Dev",
        emoji: "M",
    },

    { url: "", title: "" },
    { url: "", title: "" },
    { url: "", title: "" },
    { url: "", title: "" },
    { url: "", title: "" },
    { url: "", title: "" },
    { url: "", title: "" },
    { url: "", title: "" },
    { url: "", title: "" },
    { url: "", title: "" },
    { url: "", title: "" },
    { url: "", title: "" },
    { url: "", title: "" },
    { url: "", title: "" },
    { url: "", title: "" },
    { url: "", title: "" },
    { url: "", title: "" },
]);

onMounted(() => {
    // setup autocomplete
    Object.keys(links).forEach((key) => {
        const link = links[key].url;
        if (link) {
            autocomplete.push(link);
        }
    });
    // remove duplicates
    // autocomplete = [...new Set(autocomplete)]

    // $nextTick(() => {
    //     $refs.search.focus();
    // });

    document.title = "Home Page";
});

function sortedLinks(inLinks, category) {
    let sortList = [];
    inLinks.forEach((link) => {
        const lowText = String(inputText.value).toLowerCase();
        const searchTitle = link.title.toLowerCase().includes(lowText);
        const searchUrl = link.url.toLowerCase().includes(lowText);
        const searchFilter = inputText == "" || searchTitle || searchUrl;

        if (link.column == category && searchFilter) {
            sortList.push(link);
        }
    });

    console.log(sortList);
    return sortList.sort((a, b) => {
        return a.title.localeCompare(b.title);
    });
}
function setupIcon(title) {
    title = title.toLowerCase().trim();

    return icons[finalRandomIndex];
}
function setupUrl(inUrl) {
    if (inUrl.indexOf("http") === -1) {
        inUrl = "http://" + inUrl;
    }

    return inUrl.trim();
}
function filterKeydown(e) {
    if (e.code != "Tab") {
        return;
    }
    if (e.code == "Tab") {
        e.preventDefault();
        suggestionIndex++;
        if (suggestionIndex > suggestions.length - 1) {
            suggestionIndex = 0;
        }
    }
    return;
}
function filterLinks(e) {
    // if(e.code == 'Escape'){
    // 	e.preventDefault()
    // 	suggestions = []
    // 	inputText = ''
    // 	return
    // }
    // if(e.code == 'ArrowUp'){
    // 	e.preventDefault()
    // 	suggestionIndex--
    // 	if(suggestionIndex <= -1){
    // 		suggestionIndex = suggestions.length -1
    // 	}
    // 	return
    // }
    // if(e.code == 'ArrowDown'){
    // 	e.preventDefault()
    // 	suggestionIndex++
    // 	if(suggestionIndex > suggestions.length-1){
    // 		suggestionIndex = 0
    // 	}
    // 	return
    // }
    if (e.code == "Tab" || e.code == "Enter") {
        e.preventDefault();
        return;
    }

    suggestionIndex = -1;
    suggestions = [];

    const searchString = String(e.target.value)
        .trim()
        .toLowerCase()
        .replace("www.", "");

    if (searchString.length < 2) {
        return;
    }

    autocomplete.forEach((entry) => {
        const test = entry.toLowerCase().indexOf(searchString);
        if (test >= 0) {
            suggestions.push(entry);
        }
    });

    suggestions = suggestions.splice(0, 2);
}
function webSearch(e) {
    // go to suggestion
    if (suggestions.length >= 1) {
        window.location.href = `https://${suggestions[0]}`;
        return;
    }

    // go straight to URLs
    const urlCheck = String(e.target.value).trim();
    if (urlCheck.indexOf(".") > -1 && urlCheck.indexOf(" ") == -1) {
        let goodUrl = urlCheck.replace("http://", "").replace("www.", "");
        window.location.href = `https://www.${goodUrl}`;
        return;
    }

    // Skip empty strings
    if (e.target.value == "") {
        return;
    }

    // duck duck go search
    let webString = String(e.target.value).replaceAll(" ", "+");
    window.location.href = `https://duckduckgo.com/?hps=1&q=${webString}`;
    return;
}
function generateMessage(index) {
    let message = "";
    let m = [];

    var now = new Date();
    var days = [
        "Sunday",
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday",
    ];
    var months = [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December",
    ];

    var day = days[now.getDay()];
    var month = months[now.getMonth()];

    seed =
        parseInt(`${now.getMonth()}${now.getHours()}${now.getDay()}`) + clicks;

    let weekday = day + ", " + month + " " + now.getDate() + "<sup>th</sup>";

    if (index == 1) {
        m = [
            [
                "Continue",
                "Keep on",
                "Don't stop",
                "Persist",
                "Never stop",
                "Without falter keep",
            ],
            [
                "Slaying",
                "Rocking",
                "Fighting",
                "murdering",
                "betraying",
                "stabbing",
                "killing",
                "dancing",
            ],
            [weekday],
        ];
    }
    if (index == 2 && seed % 2 == 0) {
        m = [
            ["You", "The world", "The universe", "Your life"],
            [
                "really",
                "could be",
                "might be",
                "certainly",
                "will turn out to be",
                "will be",
            ],
            [
                "tough",
                "strong",
                "a champ",
                "a bitch",
                "stronger than a bull",
                "another day",
                "a fine one",
                "sick nasty",
            ],
            ["."],
            ["\nAll your"],
            [
                "exploits",
                "missions",
                "endeavors",
                "journeys",
                "limbs",
                "friendships",
                "meetings",
                "destinations",
                "plants",
                "thoughts",
                "dreams",
                "projects",
            ],
            [
                "will",
                "could",
                "may",
                "certainly will",
                "are going to",
                "are about to",
                "will",
                "will",
            ],
            [
                "succeed",
                "avail",
                "pass",
                "make good",
                "grow famous",
                "work",
                "profit",
                "reap success",
                "conquer",
                "avail",
                "thrive",
                "flourish",
                "triumph",
            ],
            ["."],
        ];
    }
    if (index == 2 && seed % 2 == 1) {
        m = [
            ["Things", "Stuff", "Its", "Everything"],
            ["are not", "ain't", "is not"],
            ["so", "that"],
            ["bad", "grim", "brutal", "hard", "stuffy", "saddening"],
            [".", ".", ".", ".", ".", ".", ".", "?"],
            ["\nGet", "\nRun", "\nSprint", "\nShamble"],
            ["out there", "in there", "on over", "along now", "on over"],
            ["and"],
            ["seize", "grab", "embrace", "hug", "curb stomp", "smash"],
            ["the", "those", "thine"],
            ["tasty", "special", "spicy", "magical", "wicked", "powerful"],
            [
                "day",
                "goals",
                "missions",
                "pants",
                "trees",
                "dreams",
                "pants",
                "goats",
                "grundus",
            ],
            ["."],
        ];
    }

    m.forEach((part) => {
        // const p = part[Math.floor(Math.random() * part.length)]
        const p = part[seed % part.length];
        let space = " ";
        if (p == "." || p == "?") {
            space = "";
        }
        message += space + p;
    });

    return "<span>" + message + "</span>";
}
</script>

<style scoped>
a.glass {
    transition: all 0.4s ease-out;
}
a.glass:hover {
    transition: all 0.4s ease-out;
    /*		background-color: #35004d;*/
    backdrop-filter: blur(7px);
}
.glass {
    background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(3px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    color: white;
}
input {
    width: calc(100% - 20px);
    margin: 0 10px 15px;
    font-size: 1.4em;
    border-radius: 4px;
    outline: none;
    padding: 10px 15px;
    border: none;
    box-sizing: border-box;
}
</style>