Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix issue when a invalid url is entered in shortcut link #266

Merged
merged 5 commits into from
Dec 5, 2024
Merged

Fix issue when a invalid url is entered in shortcut link #266

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
04e4fc8
Update script.js
prem-k-r Dec 4, 2024
27dd9c4
Add files via upload
prem-k-r Dec 4, 2024
2b8b303
Delete shortcuts_icons/offline.svg
prem-k-r Dec 4, 2024
56af2e0
Delete shortcuts_icons/invalid-url.svg
prem-k-r Dec 4, 2024
d6647f2
Add files via upload
prem-k-r Dec 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 20 additions & 3 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1920,7 +1920,7 @@ document.addEventListener("DOMContentLoaded", function () {
const GOOGLE_FAVICON_API_FALLBACK = (hostname) =>
`https://s2.googleusercontent.com/s2/favicons?domain_url=https://${hostname}&sz=256`;

const FAVICON_REQUEST_TIMEOUT = 5000;
// const FAVICON_REQUEST_TIMEOUT = 5000;

const ADAPTIVE_ICON_CSS = `.shortcutsContainer .shortcuts .shortcutLogoContainer img {
height: calc(100% / sqrt(2)) !important;
Expand Down Expand Up @@ -2201,7 +2201,21 @@ document.addEventListener("DOMContentLoaded", function () {
*/
function applyShortcut(shortcut) {
const shortcutName = shortcut.querySelector("input.shortcutName").value;
let url = shortcut.querySelector("input.URL").value;
let url = shortcut.querySelector("input.URL").value.trim();

// URL validation function
function isValidUrl(url) {
const pattern = /^(https:\/\/|http:\/\/)?(([a-zA-Z\d-]+\.)+[a-zA-Z]{2,}|(\d{1,3}\.){3}\d{1,3})(\/[^\s]*)?$/i;
return pattern.test(url);
}

// Validate URL before normalizing
if (!isValidUrl(url)) {
// alert("Invalid URL. Please enter a valid URL with http or https protocol.");
url = "https://xengshi.github.io/materialYouNewTab/shortcuts_icons/PageNotFound.html";
}

// Normalize URL if valid
const normalizedUrl = url.startsWith('https://') || url.startsWith('http://') ? url : 'https://' + url;

const i = shortcut._index;
Expand Down Expand Up @@ -2366,10 +2380,13 @@ document.addEventListener("DOMContentLoaded", function () {
*/
function getFallbackFavicon(urlString) {
const logo = document.createElement("img");

const hostname = new URL(urlString).hostname;

if (hostname === "github.com") {
logo.src = "./shortcuts_icons/github-shortcut.svg";
} else if (urlString === "https://xengshi.github.io/materialYouNewTab/shortcuts_icons/PageNotFound.html") {
// Special case for invalid URLs
logo.src = "./shortcuts_icons/invalid-url.svg";
} else {
logo.src = GOOGLE_FAVICON_API_FALLBACK(hostname);

Expand Down
100 changes: 100 additions & 0 deletions shortcuts_icons/PageNotFound.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page not found</title>
<style>
/* Base styles */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #f4f4f9;
color: #333;
text-align: center;
transition: background-color 0.3s, color 0.3s;
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
body {
background-color: #1e1e2f;
color: #e4e4eb;
}
}

.container {
padding: 20px;
max-width: 600px;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: dark) {
.container {
background-color: #2a2a3d;
border-color: #444;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
}

h1 {
font-size: 24px;
margin-bottom: 16px;
}

p {
font-size: 16px;
line-height: 1.6;
}

.poem {
font-style: italic;
margin: 16px 0;
}

.note {
margin-top: 20px;
font-weight: bold;
font-size: 14px;
}

code {
background-color: #eaeaea;
padding: 2px 4px;
border-radius: 4px;
}

@media (prefers-color-scheme: dark) {
code {
background-color: #444;
}
}
</style>
</head>

<body>
<div class="container">
<h1>This site can't be reached</h1>
<p class="poem">
Paths cross empty void<br>
Seeking what once existed<br>
Silence answers all.
</p>
<p>Check if there is a typo in the URL.</p>
<p class="note">
Note: Only <code>http://</code> or <code>https://</code> protocols are supported for now.<br>
The following are NOT supported: <code>ftp://</code>, <code>data:</code>, <code>chrome://</code>, and more.
</p>
</div>
</body>

</html>
4 changes: 4 additions & 0 deletions shortcuts_icons/invalid-url.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions shortcuts_icons/offline.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.