623 lines
16 KiB
Vue
623 lines
16 KiB
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>
|