mokhtar/local-ip.sh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

valid, more proper markup

Browse Source
This commit is contained in:
m5r 2024-07-19 01:46:18 +02:00
parent e031244f2b
commit c202885684
Signed by: mokhtar
GPG Key ID: 1509B54946D08A95
2 changed files with 172 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
http/static/index.html
View File

@ -1,89 +1,88 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
<title>local-ip.sh</title>
<meta name="description" content="local-ip.sh is a magic domain name that provides wildcard DNS for any IP address.">
<meta name="author" content="Mokhtar Mial">
<meta name="robots" content="index,follow">
<meta name="googlebot" content="index,follow">
<meta property="twitter:title" content="local-ip.sh">
<meta property="twitter:description" content="local-ip.sh is a magic domain name that provides wildcard DNS for any IP address.">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:site" content="https://local-ip.sh/">
<meta property="twitter:image" content="https://local-ip.sh/og.png">
<meta property="twitter:image:alt" content="og image">
<meta property="og:title" content="local-ip.sh">
<meta property="og:description" content="local-ip.sh is a magic domain name that provides wildcard DNS for any IP address.">
<meta property="og:url" content="https://local-ip.sh/">
<meta property="og:type" content="website">
<meta property="og:image" content="https://local-ip.sh/og.png">
<meta property="og:image:alt" content="og image">
<link rel="stylesheet" href="/styles.css">
</head>
<head> <body>
<meta charSet="utf-8" /> <header>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1" /> <h1 class="sr-only">local-ip.sh</h1>
<title>local-ip.sh</title> <pre>
<meta name="description" content="local-ip.sh is a magic domain name that provides wildcard DNS for any IP address." /> _ _ _ _
<meta name="author" content="Mokhtar Mial" /> | | | | (_) | |
<meta name="robots" content="index,follow" /> | | ___ ___ __ _| | _ _ __ ___| |__
<meta name="googlebot" content="index,follow" /> | |/ _ \ / __/ _` | |_____| | &#x27;_ \ / __| &#x27;_ \
<meta property="twitter:title" content="local-ip.sh" /> | | (_) | (_| (_| | |_____| | |_) |\__ \ | | |
<meta property="twitter:description" content="local-ip.sh is a magic domain name that provides wildcard DNS for any IP address." /> |_|\___/ \___\__,_|_| |_| .__(_)___/_| |_|
<meta property="twitter:card" content="summary_large_image" /> | |
<meta property="twitter:site" content="https://local-ip.sh/" /> |_|
<meta property="twitter:image" content="https://local-ip.sh/og.png" /> </pre>
<meta property="twitter:image:alt" content="og image" /> </header>
<meta property="og:title" content="local-ip.sh" /> <main>
<meta property="og:description" content="local-ip.sh is a magic domain name that provides wildcard DNS for any IP address." /> <article>
<meta property="og:url" content="https://local-ip.sh/" /> <h3>What is local-ip.sh?</h3>
<meta property="og:type" content="website" /> <p>
<meta property="og:image" content="https://local-ip.sh/og.png" /> local-ip.sh is a magic domain name that provides wildcard DNS for any IP address. It is heavily inspired by
<meta property="og:image:alt" content="og image" /> <a href="http://local-ip.co">local-ip.co</a>, <a href="https://sslip.io">sslip.io</a>, and <a href="https://xip.io">xip.io</a>.
<link rel="stylesheet" href="/styles.css" /> </p>
</head> <p>Quick example, say your LAN IP address is <strong>192.168.1.10</strong>. Using local-ip.sh,</p>
<aside>
<body> <p><strong>192-168-1-10</strong>.local-ip.sh resolves to 192.168.1.10</p>
<header> <p>dots.<strong>192.168.1.10</strong>.local-ip.sh resolves to 192.168.1.10</p>
<pre> <p>dashes.<strong>192-168-1-10</strong>.local-ip.sh resolves to 192.168.1.10</p>
_ _ _ _ </aside>
| | | | (_) | | <p>
| | ___ ___ __ _| | _ _ __ ___| |__ ...and so on. You can use these domains to access virtual hosts on your development web server
| |/ _ \ / __/ _` | |_____| | &#x27;_ \ / __| &#x27;_ \ from devices on your local network. No configuration required!
| | (_) | (_| (_| | |_____| | |_) |\__ \ | | | </p>
|_|\___/ \___\__,_|_| |_| .__(_)___/_| |_| <p>The best part is, you can serve your content over HTTPS with our TLS certificate for <code>*.local-ip.sh</code>:</p>
| | <ul>
|_| <li><a href="/server.pem">server.pem</a></li>
</pre> <li><a href="/server.key">server.key</a></li>
</header> </ul>
<main> <p>
<section> Be aware that wildcard certificates are not recursive, meaning they don&#x27;t match
<header><strong>What is local-ip.sh?</strong></header> &quot;sub-subdomains&quot;. <br>In our case, this certificate will only match subdomains of
<main>
<article>local-ip.sh is a magic domain name that provides wildcard DNS for any IP address. It is heavily
inspired by <a href="http://local-ip.co">local-ip.co</a>, <a
href="https://sslip.io">sslip.io</a>, and <a href="https://xip.io">xip.io</a>.</article>
<article>Quick example, say your LAN IP address is <strong>192.168.1.10</strong>. Using
local-ip.sh,<br /><br />
<pre> <strong>192.168.1.10</strong>.local-ip.sh resolves to 192.168.1.10
dots.<strong>192.168.1.10</strong>.local-ip.sh resolves to 192.168.1.10
dashes.<strong>192-168-1-10</strong>.local-ip.sh resolves to 192.168.1.10</pre>
</article>
<article>...and so on. You can use these domains to access virtual hosts on your development web server
from devices on your local network. No configuration required!</article>
<article>The best part is, you can serve your content over HTTPS with our TLS certificate for
<code>*.local-ip.sh</code>:<ul>
<li><a href="/server.pem">server.pem</a></li>
<li><a href="/server.key">server.key</a></li>
</ul>Be aware that wildcard certificates are not recursive, meaning they don&#x27;t match
&quot;sub-subdomains&quot;. <br />In our case, this certificate will only match subdomains of
<code>local-ip.sh</code> such as <code>192-168-1-10.local-ip.sh</code> where dashes separate <code>local-ip.sh</code> such as <code>192-168-1-10.local-ip.sh</code> where dashes separate
the numbers that make up the IP address.</article> the numbers that make up the IP address.
</main> </p>
</section> </article>
<section> <article>
<header><strong>How does it work?</strong></header> <h3>How does it work?</h3>
<main> <p>
<article> local-ip.sh runs publicly a <a href="https://github.com/m5r/local-ip.sh">custom DNS server</a>.
local-ip.sh runs publicly a <a href="https://git.capsulecorp.dev/mokhtar/local-ip.sh">custom DNS server</a>.
When your computer looks up a local-ip.sh domain, the local-ip.sh DNS server resolves to the IP address it extracts from the domain. When your computer looks up a local-ip.sh domain, the local-ip.sh DNS server resolves to the IP address it extracts from the domain.
</article> </p>
<article> <p>The TLS certificate is obtained from Let&#x27;s Encrypt and renewed up to a month before it expires.</p>
The TLS certificate is obtained from Let&#x27;s Encrypt and renewed up to a month before it expires. </article>
</article> </main>
</main> <footer class="copyright">© 2024 <a href="https://www.mokhtar.dev">Mokhtar Mial</a></footer>
</section> <script>
</main> (function () {
<footer class="copyright">© 2024 <a href="https://www.mokhtar.dev">Mokhtar Mial</a></footer> window.counterscale = {
<script> q: [["set", "siteId", "local-ip"], ["trackPageview"]],
(function () { };
window.counterscale = { })();
q: [["set", "siteId", "local-ip"], ["trackPageview"]], </script>
}; <script id="counterscale-script" src="https://counterscale.m5r.workers.dev/tracker.js" defer=""></script>
})(); </body>
</script> </html>
<script id="counterscale-script" src="https://counterscale.m5r.workers.dev/tracker.js" defer=""></script>
</body>
</html>

151
http/static/styles.css
View File

@ -1,107 +1,134 @@
html { html {
background: #111; background: #111;
} }
body { body {
color: #728ea7; color: #728ea7;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-inline: auto; margin-inline: auto;
padding-left: 1.5em; padding-left: 1.5em;
padding-right: 1.5em; padding-right: 1.5em;
width: min(100%, 41.5rem); width: min(100%, 41.5rem);
margin-top: 50px; margin-top: 50px;
margin-bottom: 50px; margin-bottom: 50px;
font-family: ui-monospace, monospace; font-family: ui-monospace, monospace;
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
header { header {
color: #7aa6da; color: #7aa6da;
display: flex; display: flex;
}
h3 {
margin: 0;
font-weight: bold;
} }
header > pre { header > pre {
margin: 1rem auto; margin: 1rem auto;
} }
main a { main a {
color: #728ea7; color: #728ea7;
} }
main a:hover { main a:hover {
background: #7aa6da; background: #7aa6da;
color: #111; color: #111;
text-decoration: none; text-decoration: none;
} }
section:nth-child(n + 2) { article:nth-child(n + 2) {
margin-top: 3rem; margin-top: 3rem;
} }
section > main { article > main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
row-gap: 2rem; row-gap: 2rem;
} }
code { code {
padding: 0.2em 0.4em; padding: 0.2em 0.4em;
margin: 0; margin: 0;
font-size: 85%; font-size: 85%;
background-color: rgba(27, 31, 35, 0.95); background-color: rgba(27, 31, 35, 0.95);
border-radius: 3px; border-radius: 3px;
white-space: nowrap; white-space: nowrap;
} }
header span.dim { header span.dim {
color: #728ea7; color: #728ea7;
} }
section strong { article h3,
color: #7aa6da; article strong {
color: #7aa6da;
}
aside {
display: flex;
flex-direction: column;
}
aside > p {
margin: 0 5ch 0 auto;
} }
footer { footer {
margin: 5rem auto 0; margin: 5rem auto 0;
color: #556a7d; color: #556a7d;
} }
footer a { footer a {
color: inherit; color: inherit;
} }
footer a:hover { footer a:hover {
color: #728ea7; color: #728ea7;
} }
div.cursor { .sr-only {
display: inline-block; position: absolute;
background: #111; width: 1px;
margin-left: 1px; height: 1px;
margin-right: -1px; padding: 0;
animation: blink 2s linear 0s infinite; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.cursor {
display: inline-block;
background: #111;
margin-left: 1px;
margin-right: -1px;
animation: blink 2s linear 0s infinite;
} }
@keyframes blink { @keyframes blink {
0% { 0% {
background: #7aa6da; background: #7aa6da;
} }
47% { 47% {
background: #728ea7; background: #728ea7;
} }
50% { 50% {
background: #111; background: #111;
} }
97% { 97% {
background: #111; background: #111;
} }
100% { 100% {
background: #728ea7; background: #728ea7;
} }
} }