waylon/linker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

init linker

Browse source
This commit is contained in:
Waylon Walker 2025-08-27 19:44:33 -05:00
commit bf3419a7f0
11 changed files with 4268 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

78
templates/error.html Normal file
View file

@ -0,0 +1,78 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Linker - Create Markdown Links</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/htmx.org@1.9.5"></script>
<script>
function goToLink(event) {
event.preventDefault();
const url = document.getElementById('url').value;
if (!url) return;
window.location.href = `/link?url=${encodeURIComponent(url)}`;
}
</script>
<style>
body {
font-family: sans-serif;
background: #1e1e2f;
color: #ddd;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
body p {
max-width: 450px;
color: #aaa;
}
form {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
max-width: 500px;
margin-top: 4rem;
margin-bottom: 16rem;
}
input[type="url"] {
padding: 1rem;
font-size: 1rem;
border-radius: 0.5rem;
border: none;
}
button {
padding: 1rem;
font-size: 1rem;
background-color: #4f46e5;
color: white;
border: none;
border-radius: 0.5rem;
cursor: pointer;
}
button:hover {
background-color: #4338ca;
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #1e1e2f;
padding: 1rem;
text-align: center;
}
</style>
</head>
<body>
{{ error }}
</body>
</html>

95
templates/index.html Normal file
View file

@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Linker - Create Markdown Links</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/htmx.org@1.9.5"></script>
<script>
function goToLink(event) {
event.preventDefault();
const url = document.getElementById('url').value;
if (!url) return;
window.location.href = `/link?url=${encodeURIComponent(url)}`;
}
</script>
<style>
body {
font-family: sans-serif;
background: #1e1e2f;
color: #ddd;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
body p {
max-width: 450px;
color: #aaa;
}
form {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
max-width: 500px;
margin-top: 4rem;
margin-bottom: 16rem;
}
input[type="url"] {
padding: 1rem;
font-size: 1rem;
border-radius: 0.5rem;
border: none;
}
button {
padding: 1rem;
font-size: 1rem;
background-color: #4f46e5;
color: white;
border: none;
border-radius: 0.5rem;
cursor: pointer;
}
button:hover {
background-color: #4338ca;
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #1e1e2f;
padding: 1rem;
text-align: center;
}
</style>
</head>
<body>
<h1>Linker - Create Markdown Links</h1>
<p>
This is vibe coded AI slop, you probably don't want to to use it. I told
gpt-4o what I wanted and what came out was good enough for me.
</p>
<p>
It generates markdown links that you can copy and paste into your markdown
files. It attempts to include the title and author of the page, and wraps
it with their og image and falls back to a screenshot of the page.
</p>
<form onsubmit="goToLink(event)">
<input type="url" id="url" placeholder="Enter a URL to link" required autofocus/>
<button type="submit">Generate Markdown Link</button>
</form>
<footer>
<p>version: {{ version }}</p>
</footer>
</body>
</html>

96
templates/link.html Normal file
View file

@ -0,0 +1,96 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Markdown Link Preview</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: sans-serif;
background-color: #1e1e2f;
color: #ddd;
padding: 2rem;
display: flex;
flex-direction: column;
align-items: center;
}
img {
max-width: 100%;
border-radius: 0.5rem;
margin-bottom: 1rem;
}
.card {
background-color: #2c2c3a;
border-radius: 1rem;
padding: 2rem;
max-width: 800px;
text-align: center;
}
button {
background-color: #4f46e5;
color: white;
border: none;
padding: 0.75rem 1.5rem;
font-size: 1rem;
border-radius: 0.5rem;
cursor: pointer;
margin-top: 1rem;
}
button:hover {
background-color: #4338ca;
}
textarea {
width: 100%;
height: 6rem;
margin-top: 1rem;
padding: 1rem;
font-family: monospace;
font-size: 0.9rem;
border-radius: 0.5rem;
border: none;
background-color: #1f1f2f;
color: #ccc;
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #1e1e2f;
padding: 1rem;
text-align: center;
}
</style>
</head>
<body>
<div class="card">
<h2>Markdown Link Preview</h2>
<a href="{{ url }}" target="_blank">
<img src="{{ preview_image }}" alt="{{ title_author }}">
</a>
<p><strong>{{ title_author }}</strong></p>
<textarea id="markdown" readonly>{{ markdown_link }}</textarea>
<button onclick="copyMarkdown()">Click to Copy Markdown</button>
</div>
<script>
function copyMarkdown() {
const markdown = document.getElementById('markdown');
markdown.select();
markdown.setSelectionRange(0, 99999);
document.execCommand('copy');
alert('Markdown copied to clipboard!');
}
</script>
<footer>
<p>version: {{ version }}</p>
</footer>
</body>
</html>