Massive Update!

frontend/assets/sass/styles.scss

@@ -0,0 +1,35 @@
+// Font Imports
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Open+Sans&display=swap');
+
+$open-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$montserrat: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+// Bootstrap Overrides
+$enable-negative-margins: true;
+$font-family-sans-serif: $open-sans;
+$input-btn-font-family: $montserrat;
+$headings-font-family: $montserrat;
+$input-bg: #ebebeb;
+$input-font-weight: 700;
+$btn-font-weight: 700;
+$input-border-width: 0;
+$border-radius: 6px;
+
+// Bootstrap Imports
+@import '../../node_modules/bootstrap/scss/bootstrap.scss';
+
+// Custom Styles
+.bold-link {
+    font-family: $montserrat;
+    font-weight: 700;
+    text-transform: uppercase;
+}
+
+@include media-breakpoint-down(md) {
+    .input-group-block {
+        input, button {
+            width: 100%;
+            border-radius: $border-radius !important;
+        }
+    }
+}

frontend/assets/svg/custom-url.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#757575"><path clip-rule="evenodd" fill="none" d="M0 0h24v24H0z"/><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></svg>

frontend/config.php

@@ -0,0 +1,65 @@
+<?php 
+// CONFIG - These control the look and details on your site. Consult documentation for more details.
+
+// GENERAL
+
+// Page title for your site
+define('title', 'DarkSleeky theme for YOURLS'); 
+
+// The short title of your site, used in the footer and in some sub pages
+define('shortTitle', 'DarkSleeky');
+
+// A description of your site, shown on the homepage.
+define('description', 'A quick description on why your site is so fantastic, what it does and why people should definitely start using it. Oh, and how it’s free.'); 
+
+// The favicon for your site
+define('favicon', '/frontend/assets/img/favicon-16.webp');
+
+// Keywords for site
+define('keywords', 'Test, 123, Example');
+
+// OG Image for site
+define('ogimg', 'YOUR_OGIMG_COVER');
+
+// Wordmark for homepage
+define('wordmark', 'WORDMARK_FOR_HOMEPAGE');
+
+// Enable reCAPTCHA V3
+// It is highly recommended you use reCAPTCHA V3. It will stop spam. You can get a site and secret key from here: https://www.google.com/recaptcha/admin/create
+define("enableRecaptcha", false);
+
+// reCAPTCHA V3 Site Key
+define("recaptchaV3SiteKey", 'YOUR_SITE_KEY_HERE');
+
+// reCAPTCHA V3 Secret Key
+define("recaptchaV3SecretKey", 'YOUR_SECRET_KEY_HERE');
+
+// Enables the custom URL field
+// true or false
+define('enableCustomURL', true);
+
+// Optional
+// Set a primary colour to be used. Default: #007bff
+// Here are some other colours you could try:
+// #f44336: red, #9c27b0: purple, #00bcd4: teal, #ff5722: orange
+// Firewatch BG define('backgroundImage', 'https://sop.wtf/frontend/bgs/hyju.webp');
+define('color', '#7289DA');
+// Optional
+// Set a background image to be used.
+// default: unsplash.com random daily photo of the day
+// More possibilities of photo embedding from unsplash could be found at: https://source.unsplash.com
+// define('backgroundImage', 'https://source.unsplash.com/daily');
+
+// FOOTER
+
+// These are the links in the footer. Add a new link for each new link.
+// The array follows a title link structure:
+// "TITLE" => "LINK",
+$footerLinks = [
+    "About"   =>  "https://sleeky.flynntes.com/",
+    "Contact" =>  "https://yourls.org/",
+    "Legal"   =>  "https://yourls.org/",
+    "Admin"   =>  "/admin"
+];
+
+?>

frontend/footer.php

@@ -0,0 +1,86 @@
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+
+<script>
+	// From https://stackoverflow.com/a/30810322
+	function fallbackCopyTextToClipboard(text) {
+		var textArea = document.createElement("textarea");
+		textArea.value = text;
+		
+		// Avoid scrolling to bottom
+		textArea.style.top = "0";
+		textArea.style.left = "0";
+		textArea.style.position = "fixed";
+
+		document.body.appendChild(textArea);
+		textArea.focus();
+		textArea.select();
+
+		try {
+			var successful = document.execCommand('copy');
+			var msg = successful ? 'successful' : 'unsuccessful';
+			console.log('Fallback: Copying text command was ' + msg);
+		} catch (err) {
+			console.error('Fallback: Oops, unable to copy', err);
+		}
+
+		document.body.removeChild(textArea);
+	}
+
+	function copyTextToClipboard(text) {
+		if (!navigator.clipboard) {
+			fallbackCopyTextToClipboard(text);
+			return;
+		}
+		navigator.clipboard.writeText(text).then(function() {
+			console.log('Async: Copying to clipboard was successful!');
+		}, function(err) {
+			console.error('Async: Could not copy text: ', err);
+		});
+	}
+
+	const copyBtn = document.querySelector('button#copy-button');
+
+	if (copyBtn) {
+		copyBtn.addEventListener('click', function(event) {
+			copyTextToClipboard(event.target.dataset.shorturl);
+		});
+	}
+
+	const closeShortenedLinkScreenButton = document.querySelector('button#close-shortened-screen');
+
+	if (closeShortenedLinkScreenButton) {
+		closeShortenedLinkScreenButton.addEventListener('click', function(event) {
+			window.location.href=window.location.href;
+		});
+	}
+</script>
+
+<?php if (enableRecaptcha) : ?>
+	<script src="https://www.google.com/recaptcha/api.js?render=<?php echo recaptchaV3SiteKey ?>"></script>
+	<script>
+		const shortenForm = document.querySelector("form#shortenlink");
+
+		if (shortenForm) {
+			shortenForm.addEventListener("submit", function(e){
+				e.preventDefault();
+				grecaptcha.ready(function() {
+					grecaptcha.execute('<?php echo recaptchaV3SiteKey ?>', {action: 'shorten_link'}).then(function(token) {
+						const tokenInput = document.createElement("input");
+						tokenInput.setAttribute("type", "hidden");
+						tokenInput.setAttribute("name", "token");
+						tokenInput.setAttribute("value", token);
+						
+						const actionInput = document.createElement("input");
+						actionInput.setAttribute("type", "hidden");
+						actionInput.setAttribute("name", "action");
+						actionInput.setAttribute("value", "shorten_link");
+						
+						shortenForm.prepend(tokenInput);
+						shortenForm.prepend(actionInput);
+						shortenForm.submit();
+					});
+				});
+			});
+		}
+	</script>
+<?php endif; ?>

frontend/functions.php

@@ -0,0 +1,26 @@
+<?php 
+  // Darken or lighten a hex code
+  // Full credit goes to: https://stackoverflow.com/a/11951022
+  function adjustBrightness($hex, $steps) {
+    // Steps should be between -255 and 255. Negative = darker, positive = lighter
+    $steps = max(-255, min(255, $steps));
+
+    // Normalize into a six character long hex string
+    $hex = str_replace('#', '', $hex);
+    if (strlen($hex) == 3) {
+        $hex = str_repeat(substr($hex,0,1), 2).str_repeat(substr($hex,1,1), 2).str_repeat(substr($hex,2,1), 2);
+    }
+
+    // Split into three parts: R, G and B
+    $color_parts = str_split($hex, 2);
+    $return = '#';
+
+    foreach ($color_parts as $color) {
+        $color   = hexdec($color); // Convert to decimal
+        $color   = max(0,min(255,$color + $steps)); // Adjust color
+        $return .= str_pad(dechex($color), 2, '0', STR_PAD_LEFT); // Make two char hex code
+    }
+
+    return $return;
+  }
+?>

frontend/gulpfile.js

@@ -0,0 +1,14 @@
+var gulp = require('gulp');
+var sass = require('gulp-sass')(require('sass'));
+
+gulp.task('sass', () => {
+    return gulp.src("./assets/sass/*.scss")
+        .pipe(sass())
+        .pipe(gulp.dest("dist/"))
+});
+
+gulp.task('start', gulp.series('sass', function () {
+    gulp.watch("sass/*.scss", gulp.series('sass'));
+}));
+
+gulp.task('default', gulp.series('start'));

frontend/header.php

@@ -0,0 +1,35 @@
+<?php
+    include 'config.php';
+    include 'functions.php';
+?>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="description" content="<?php echo description ?>">
+        <link rel="icon" href="<?php echo favicon ?>">
+        <meta name="keywords" content="<?php echo keywords ?>">
+        <meta property="og:url" content="<?php $YOURLS_SITE ?>">
+        <meta property="og:type" content="website">
+        <meta property="og:title" content="<?php echo title?>">
+        <meta property="og:description" content="<?php echo description ?>">
+        <meta property="og:image" content="<?php echo ogimg ?>">
+        <title><?php echo title ?></title>
+        <link rel="stylesheet" href="<?php $YOURLS_SITE ?>/frontend/dist/styles.css">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">
+
+        <?php if (defined('backgroundImage')) : ?>
+            <style>
+                body {
+                    background: url(<?php echo backgroundImage ?>) no-repeat center center fixed !important; 
+                    background-size: cover !important;
+                }
+            </style>
+        <?php else : ?>
+            <style>
+                body {
+                    background-color: <?php echo color ?>;
+                }
+            </style>
+        <?php endif; ?>
+    </head>

frontend/index.php

@@ -0,0 +1,148 @@
+<?php include 'frontend/header.php'; ?>
+
+<body>
+
+    <?php
+	// Start YOURLS engine
+	require_once( dirname(__FILE__).'/includes/load-yourls.php' );
+
+	// URL of the public interface
+	$page = YOURLS_SITE . '/index.php' ;
+
+	// Make variables visible to function & UI
+	$shorturl = $message = $title = $status = '';
+
+	// Part to be executed if FORM has been submitted
+	if ( isset( $_REQUEST['url'] ) && $_REQUEST['url'] != 'http://' ) {
+		if (enableRecaptcha) {
+			// Use reCAPTCHA
+			$token = $_POST['token'];
+			$action = $_POST['action'];
+			
+			// call curl to POST request
+			$ch = curl_init();
+			curl_setopt($ch, CURLOPT_URL,"https://www.google.com/recaptcha/api/siteverify");
+			curl_setopt($ch, CURLOPT_POST, 1);
+			curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query(array('secret' => recaptchaV3SecretKey, 'response' => $token)));
+			curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+			$response = curl_exec($ch);
+			curl_close($ch);
+			$arrResponse = json_decode($response, true);
+			
+			// verify the response
+			if($arrResponse["success"] == '1' && $arrResponse["action"] == $action && $arrResponse["score"] >= 0.5) {
+				// reCAPTCHA succeeded
+				shorten();
+			} else {
+				// reCAPTCHA failed
+				$message = "reCAPTCHA failed";
+			}
+		} else {
+			// Don't use reCAPTCHA
+			shorten();
+		}
+	}
+
+	function shorten() {
+		// Get parameters -- they will all be sanitized in yourls_add_new_link()
+		$url     = $_REQUEST['url'];
+		$keyword = isset( $_REQUEST['keyword'] ) ? $_REQUEST['keyword'] : '' ;
+		$title   = isset( $_REQUEST['title'] ) ?  $_REQUEST['title'] : '' ;
+		$text    = isset( $_REQUEST['text'] ) ?  $_REQUEST['text'] : '' ;
+
+		// Create short URL, receive array $return with various information
+		$return  = yourls_add_new_link( $url, $keyword, $title );
+		
+		// Make visible to UI
+		global $shorturl, $message, $status, $title;
+
+		$shorturl = isset( $return['shorturl'] ) ? $return['shorturl'] : '';
+		$message  = isset( $return['message'] ) ? $return['message'] : '';
+		$title    = isset( $return['title'] ) ? $return['title'] : '';
+		$status   = isset( $return['status'] ) ? $return['status'] : '';
+		
+		// Stop here if bookmarklet with a JSON callback function ("instant" bookmarklets)
+		if( isset( $_GET['jsonp'] ) && $_GET['jsonp'] == 'yourls' ) {
+			$short = $return['shorturl'] ? $return['shorturl'] : '';
+			$message = "Short URL (Ctrl+C to copy)";
+			header('Content-type: application/json');
+			echo yourls_apply_filter( 'bookmarklet_jsonp', "yourls_callback({'short_url':'$short','message':'$message'});" );
+			die();
+		}
+	}
+?>
+
+        <div class="container-fluid h-100">
+            <div class="row justify-content-center align-items-center h-100">
+                <div class="col-12 col-lg-10 col-xl-8 col-xxl-5 mt-5">
+                    <div class="card border-0 mt-5">
+                        <?php if( isset($status) && $status == 'success' ):  ?>
+                        <?php $url = preg_replace("(^https?://)", "", $shorturl );  ?>
+
+                        <div class="close-container text-end mt-3 me-3">
+                            <button type="button" class="btn-close" id="close-shortened-screen" aria-label="Close"></button>
+                        </div>
+
+                        <div class="card-body px-5 pb-5">
+                            <h2 class="text-uppercase text-center">Your shortened link</h2>
+
+                            <div class="row justify-content-center">
+                                <div class="col-10">
+                                    <div class="input-group input-group-block mt-4 mb-3">
+                                        <input type="text" autocomplete="off" class="form-control text-uppercase" value="<?php echo $shorturl; ?>" required>
+                                        <button class="btn btn-primary text-uppercase py-2 px-5 mt-2 mt-md-0" type="submit" id="copy-button" data-shorturl="<?php echo $shorturl; ?>">Copy</button>
+                                    </div>
+                                    <span class="info">QR Code &amp; See Link Preview <a href="<?php echo $shorturl; ?>~"><?php echo $url; ?>~</a></span>
+                                </div>
+                            </div>
+                        </div>
+                        <?php else: ?>
+                        <div class="text-center">
+                        </div>
+                        <div class="card-body px-md-5">
+                            <img class="wordmark" src="<?php echo wordmark ?>" alt="Wordmark">
+                            <?php if ( isset( $_REQUEST['url'] ) && $_REQUEST['url'] != 'http://' ): ?>
+                            <?php if (strpos($message,'added') === false): ?>
+                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
+                                <span>Oh no, <?php echo $message; ?>!</span>
+                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                            </div>
+                            <?php endif; ?>
+                            <?php endif; ?>
+
+                            <form id="shortenlink" method="post" action="">
+                                <div class="input-group input-group-block mt-4 mb-3">
+                                    <input type="url" autocomplete="off" name="url" id="url" class="form-control text-uppercase" placeholder="PASTE URL, SHORTEN &amp; SHARE" aria-label="PASTE URL, SHORTEN &amp; SHARE" aria-describedby="shorten-button" required>
+                                    <input class="btn btn-primary text-uppercase py-2 px-4 mt-2 mt-md-0" type="submit" id="shorten-button" value="Shorten" />
+                                </div>
+                                <?php if (enableCustomURL): ?>
+                                <a class="btn btn-sm btn-white text-white-50 text-uppercase" data-bs-toggle="collapse" href="#customise-link" role="button" aria-expanded="false" aria-controls="customise-link">
+                                    <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSIjZmZmIj48cGF0aCBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiLz48cGF0aCBkPSJNMjIuNyAxOWwtOS4xLTkuMWMuOS0yLjMuNC01LTEuNS02LjktMi0yLTUtMi40LTcuNC0xLjNMOSA2IDYgOSAxLjYgNC43Qy40IDcuMS45IDEwLjEgMi45IDEyLjFjMS45IDEuOSA0LjYgMi40IDYuOSAxLjVsOS4xIDkuMWMuNC40IDEgLjQgMS40IDBsMi4zLTIuM2MuNS0uNC41LTEuMS4xLTEuNHoiLz48L3N2Zz4=" alt="Options"> Customise Link
+                                </a>
+                                <div class="collapse" id="customise-link">
+                                    <div class="mt-2 card card-body">
+                                        <div class="d-flex  align-items-center">
+                                            <span class="me-2"><?php echo preg_replace("(^https?://)", "", YOURLS_SITE ); ?>/</span>
+                                            <input type="text" name="keyword" class="form-control form-control-sm text-uppercase" placeholder="CUSTOM URL" autocomplete="off" aria-label="CUSTOM URL">
+                                        </div>
+                                    </div>
+                                </div>
+                                <?php endif; ?>
+                            </form>
+                        </div>
+                        <?php endif; ?>
+                    </div>
+                    <div class="d-flex flex-column flex-md-row align-items-center my-3">
+                        <span class="text-white fw-light"><i class="fa fa-cc-cc" aria-hidden="true"></i><?php echo date("Y"); ?> <?php echo shortTitle ?></span>
+                        <div class="ms-3">
+                            <?php foreach ($footerLinks as $key => $val): ?>
+                            <a class="bold-link me-3 text-white text-decoration-none" href="<?php echo $val ?>"><span><?php echo $key ?></span></a>
+                            <?php endforeach ?>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <?php include 'frontend/footer.php'; ?>
+</body>
+</html>

frontend/package-lock.json

@@ -0,0 +1,18 @@
+{
+  "name": "sleeky-frontend",
+  "version": "2.5.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "bootstrap": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
+      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ=="
+    },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    }
+  }
+}

frontend/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "sleeky-frontend",
+  "version": "2.5.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "gulp",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "gulp": "^4.0.2",
+    "gulp-sass": "^5.0.0",
+    "sass": "^1.35.1"
+  },
+  "dependencies": {
+    "bootstrap": "^5.0.2",
+    "popper.js": "^1.16.1"
+  }
+}