Working clientside stuff
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
closes #3
This commit is contained in:
parent
11bd1b4f1f
commit
eb96408d33
312
src/server.js
312
src/server.js
|
@ -113,33 +113,13 @@ fastify.get('/:shortcode', async (req, res) => {
|
|||
}
|
||||
|
||||
if (isBot(req.headers['user-agent']) && target[0].no_preview) {
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta property="og:title" content="LinkyLinky">
|
||||
<meta property="og:site_name" content="LinkyLinky by Kauft.es">
|
||||
<meta property="og:url" content="https://kauft.es/">
|
||||
<meta property="og:description" content="LinkyLinky by Kauft.es is a custom url shortener. You're reading this, b/c someone doesn't want their shorturl to be indexed by bots/crawlers/spiders.">
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:image" content="https://kauft.es/dashboard/icon_128.png">
|
||||
res.type("text/html");
|
||||
return bot_html;
|
||||
}
|
||||
|
||||
<title>LinkyLinky</title>
|
||||
</head>
|
||||
<body>
|
||||
<p align="center">
|
||||
<img height="150" src="https://kauft.es/dashboard/icon_128.png">
|
||||
<h1 align="center">LinkyLinky 🔗</h1>
|
||||
<h3 align="center">A small url shortener, originaly developed for kauft.es</h3>
|
||||
<p>LinkyLinky by Kauft.es is a custom url shortener.<br>
|
||||
You're reading this, b/c someone doesn't want their shorturl to be indexed by bots/crawlers/spiders.</p>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
if (target[0].clientside) {
|
||||
res.type("text/html");
|
||||
return clientside_html.replace("{{targeturl}}", target[0].target)
|
||||
}
|
||||
|
||||
res.redirect(302, target[0].target);
|
||||
|
@ -479,6 +459,286 @@ async function validate(username, password, req, reply) {
|
|||
req.user = username;
|
||||
}
|
||||
|
||||
const bot_html = `<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta property="og:title" content="LinkyLinky">
|
||||
<meta property="og:site_name" content="LinkyLinky by Kauft.es">
|
||||
<meta property="og:url" content="https://kauft.es/">
|
||||
<meta property="og:description" content="LinkyLinky by Kauft.es is a custom url shortener. You're reading this, b/c someone doesn't want their shorturl to be indexed by bots/crawlers/spiders.">
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:image" content="https://kauft.es/dashboard/icon_128.png">
|
||||
|
||||
<title>LinkyLinky</title>
|
||||
</head>
|
||||
<body>
|
||||
<p align="center">
|
||||
<img height="150" src="https://kauft.es/dashboard/icon_128.png">
|
||||
<h1 align="center">LinkyLinky 🔗</h1>
|
||||
<h3 align="center">A small url shortener, originaly developed for kauft.es</h3>
|
||||
<p>LinkyLinky by Kauft.es is a custom url shortener.<br>
|
||||
You're reading this, b/c someone doesn't want their shorturl to be indexed by bots/crawlers/spiders.</p>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
|
||||
const clientside_html = `<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="robot" content="no-index">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<style>
|
||||
body {
|
||||
background: black;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.containCube {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
perspective: 800px;
|
||||
}
|
||||
|
||||
.containCube .cube {
|
||||
position: absolute;
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
box-sizing: border-box;
|
||||
transform-style: preserve-3d;
|
||||
transform-origin: 50% 50%;
|
||||
-webkit-animation: rotate 20s ease-in-out infinite alternate;
|
||||
animation: rotate 20s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.containCube .cubeGroup {
|
||||
position: absolute;
|
||||
display: grid;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
color: white;
|
||||
text-shadow: 0 0 1px black;
|
||||
border: 3px dashed white;
|
||||
}
|
||||
|
||||
.containCube .cubeGroup h1 {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.containCube .cube-front {
|
||||
transform: translatez(150px);
|
||||
}
|
||||
|
||||
.containCube .cube-rear {
|
||||
transform: translatez(-150px) rotatey(180deg);
|
||||
}
|
||||
|
||||
.containCube .cube-right {
|
||||
transform-origin: 100%;
|
||||
transform: rotatey(90deg) translatex(150px);
|
||||
}
|
||||
|
||||
.containCube .cube-left {
|
||||
transform-origin: 0%;
|
||||
transform: rotatey(-90deg) translatex(-150px);
|
||||
}
|
||||
|
||||
.containCube .cube-bottom {
|
||||
transform-origin: 50% 100%;
|
||||
transform: rotatex(-90deg) translatey(150px);
|
||||
}
|
||||
|
||||
.containCube .cube-top {
|
||||
transform-origin: 50% 0%;
|
||||
transform: rotatex(90deg) translatey(-150px);
|
||||
}
|
||||
|
||||
.containCube .cube-1 {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.containCube .cube-2 {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.containCube .cube-3 {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.containCube .cube-4 {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.containCube .cube-5 {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.containCube .cube-6 {
|
||||
background: red;
|
||||
}
|
||||
|
||||
@-webkit-keyframes rotate {
|
||||
10% {
|
||||
transform: rotate3d(1, 1, 0, 320deg);
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: rotate3d(1, 0, 0, -90deg);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: rotate3d(1, 1, 0, 440deg);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: rotate3d(1, 0, 0, -180deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate3d(1, 1, 0, 460deg);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: rotate3d(0, 1, 0, -195deg);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: rotate3d(1, 1, 0, 172deg);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: rotate3d(0, 1, 0, -360deg);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: rotate3d(1, 1, 0, 280deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
10% {
|
||||
transform: rotate3d(1, 1, 0, 320deg);
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: rotate3d(1, 0, 0, -90deg);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: rotate3d(1, 1, 0, 440deg);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: rotate3d(1, 0, 0, -180deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate3d(1, 1, 0, 460deg);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: rotate3d(0, 1, 0, -195deg);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: rotate3d(1, 1, 0, 172deg);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: rotate3d(0, 1, 0, -360deg);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: rotate3d(1, 1, 0, 280deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes rotateZed {
|
||||
20% {
|
||||
transform: translatez(100px);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: translatez(-100px);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translatez(100px);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translatez(-100px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotateZed {
|
||||
20% {
|
||||
transform: translatez(100px);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: translatez(-100px);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translatez(100px);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translatez(-100px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="containCube">
|
||||
<div class="cube">
|
||||
<div class="cubeGroup cube-front cube-1">
|
||||
<h1>kauft.es</h1>
|
||||
</div>
|
||||
<div class="cubeGroup cube-top cube-2">
|
||||
<h1>kauft.es</h1>
|
||||
</div>
|
||||
<div class="cubeGroup cube-left cube-3">
|
||||
<h1>kauft.es</h1>
|
||||
</div>
|
||||
<div class="cubeGroup cube-right cube-4">
|
||||
<h1>kauft.es</h1>
|
||||
</div>
|
||||
<div class="cubeGroup cube-rear cube-5">
|
||||
<h1>kauft.es</h1>
|
||||
</div>
|
||||
<div class="cubeGroup cube-bottom cube-6">
|
||||
<h1>kauft.es</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
setTimeout(function () {
|
||||
location.replace("{{targeturl}}");
|
||||
}, 3000);//Delay 3 seconds
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
`;
|
||||
|
||||
// Run the server!
|
||||
const start = async () => {
|
||||
try {
|
||||
|
|
Loading…
Reference in New Issue