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

npx prettier -w .

Browse Source
This commit is contained in:
m5r 2023-12-22 23:59:14 +01:00
parent 31f60af66d
commit 1b4cb5845c
No known key found for this signature in database
GPG Key ID: 5BC847276DD5DDEA
10 changed files with 11623 additions and 11630 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/entry.server.tsx
View File

@ -16,18 +16,8 @@ export default function handleRequest(
loadContext: AppLoadContext, loadContext: AppLoadContext,
) { ) {
return isbot(request.headers.get("user-agent")) return isbot(request.headers.get("user-agent"))
? handleBotRequest( ? handleBotRequest(request, responseStatusCode, responseHeaders, remixContext)
request, : handleBrowserRequest(request, responseStatusCode, responseHeaders, remixContext);
responseStatusCode,
responseHeaders,
remixContext,
)
: handleBrowserRequest(
request,
responseStatusCode,
responseHeaders,
remixContext,
);
} }
function handleBotRequest( function handleBotRequest(
@ -39,11 +29,7 @@ function handleBotRequest(
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let shellRendered = false; let shellRendered = false;
const { pipe, abort } = renderToPipeableStream( const { pipe, abort } = renderToPipeableStream(
<RemixServer <RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />,
context={remixContext}
url={request.url}
abortDelay={ABORT_DELAY}
/>,
{ {
onAllReady() { onAllReady() {
shellRendered = true; shellRendered = true;
@ -89,11 +75,7 @@ function handleBrowserRequest(
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let shellRendered = false; let shellRendered = false;
const { pipe, abort } = renderToPipeableStream( const { pipe, abort } = renderToPipeableStream(
<RemixServer <RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />,
context={remixContext}
url={request.url}
abortDelay={ABORT_DELAY}
/>,
{ {
onShellReady() { onShellReady() {
shellRendered = true; shellRendered = true;

1
app/hooks/use-fathom.ts
View File

@ -16,4 +16,3 @@ export default function useFathom() {
Fathom.trackPageview(); Fathom.trackPageview();
}, [location]); }, [location]);
} }

16
app/root.tsx
View File

@ -1,14 +1,6 @@
import { cssBundleHref } from "@remix-run/css-bundle"; import { cssBundleHref } from "@remix-run/css-bundle";
import { json, type SerializeFrom, type LinksFunction, type MetaFunction } from "@remix-run/node"; import { json, type SerializeFrom, type LinksFunction, type MetaFunction } from "@remix-run/node";
import { import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from "@remix-run/react";
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
useLoaderData,
} from "@remix-run/react";
import useFathom from "./hooks/use-fathom"; import useFathom from "./hooks/use-fathom";
@ -41,9 +33,7 @@ export const meta: MetaFunction = () => [
{ property: "og:image:alt", content: "og image" }, { property: "og:image:alt", content: "og image" },
]; ];
export const links: LinksFunction = () => [ export const links: LinksFunction = () => [...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : [])];
...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
];
export const loader = () => export const loader = () =>
json({ json({
@ -69,7 +59,7 @@ export default function App() {
<html lang="en"> <html lang="en">
<head> <head>
<meta charSet="utf-8" /> <meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1" />
<Meta /> <Meta />
<Links /> <Links />
</head> </head>

77
app/routes/_index.tsx
View File

@ -1,18 +1,8 @@
import type { LinksFunction, MetaFunction } from "@remix-run/node"; import type { LinksFunction } from "@remix-run/node";
import styles from "../styles/index.css"; import styles from "../styles/index.css";
export const links: LinksFunction = () => [ export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
{ rel: "stylesheet", href: styles },
];
export const meta: MetaFunction = () => {
return [
{ title: "local-ip.sh" },
{ name: "description", content: "local-ip.sh is a magic domain name that provides wildcard DNS for any IP address." },
{ name: "author", content: "Mokhtar Mial" },
];
};
export default function Index() { export default function Index() {
return ( return (
@ -33,58 +23,69 @@ export default function Index() {
<main> <main>
<section> <section>
<header><strong>What is local-ip.sh?</strong></header> <header>
<strong>What is local-ip.sh?</strong>
</header>
<main> <main>
<article> <article>
local-ip.sh is a magic domain name that provides wildcard DNS local-ip.sh is a magic domain name that provides wildcard DNS for any IP address. It is
for any IP address. It is heavily inspired by <a href="http://local-ip.co">local-ip.co</a>, 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>. <a href="https://sslip.io">sslip.io</a>, and <a href="https://xip.io">xip.io</a>.
</article> </article>
<article> <article>
Quick example, say your LAN IP address is <strong>192.168.1.10</strong>. Quick example, say your LAN IP address is <strong>192.168.1.10</strong>. Using local-ip.sh,
Using local-ip.sh, <br />
<br />
<br /><br /> <pre
dangerouslySetInnerHTML={{
<pre dangerouslySetInnerHTML={{
__html: ` <strong>192.168.1.10</strong>.local-ip.sh resolves to 192.168.1.10 __html: ` <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 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`, dashes.<strong>192-168-1-10</strong>.local-ip.sh resolves to 192.168.1.10`,
}} /> }}
/>
</article> </article>
<article> <article>
...and so on. You can use these domains to access virtual ...and so on. You can use these domains to access virtual hosts on your development web
hosts on your development web server from devices on your server from devices on your local network. No configuration required!
local network. No configuration required!
</article> </article>
<article> <article>
The best part is, you can serve your content over HTTPS with our TLS certificate The best part is, you can serve your content over HTTPS with our TLS certificate for{" "}
for <code>*.local-ip.sh</code>: <code>*.local-ip.sh</code>:
<ul> <ul>
<li><a href="/server.pem">server.pem</a></li> <li>
<li><a href="/server.key">server.key</a></li> <a href="/server.pem">server.pem</a>
</li>
<li>
<a href="/server.key">server.key</a>
</li>
</ul> </ul>
Be aware that wildcard certificates are not recursive, meaning they don't match "sub-subdomains". <br /> Be aware that wildcard certificates are not recursive, meaning they don't match
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> "sub-subdomains". <br />
{" "}where dashes separate the numbers that make up the IP address. 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 the numbers that make up the IP
address.
</article> </article>
</main> </main>
</section> </section>
<section> <section>
<header><strong>How does it work?</strong></header> <header>
<strong>How does it work?</strong>
</header>
<main> <main>
<article> <article>
local-ip.sh runs publicly a <a href="https://git.mokhtar.dev/mokhtar/local-ip.sh">custom DNS server</a>. local-ip.sh runs publicly a{" "}
When your computer looks up a local-ip.sh domain, the local-ip.sh <a href="https://git.mokhtar.dev/mokhtar/local-ip.sh">custom DNS server</a>. When your
DNS server resolves to the IP address it extracts from the domain. 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> </article>
<article> <article>
The TLS certificate is obtained from Let's Encrypt and renewed up to a month before it expires. The TLS certificate is obtained from Let's Encrypt and renewed up to a month before it
expires.
</article> </article>
</main> </main>
</section> </section>

27
app/styles/index.css
View File

@ -10,20 +10,23 @@ body {
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: 50px auto;*/
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;
/*line-height: 1.5;*/
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
header { header {
color: #7aa6da; color: #7aa6da;
display: flex;
}
header > pre {
margin: 1rem auto;
} }
main a { main a {
@ -86,9 +89,19 @@ div.cursor {
} }
@keyframes blink { @keyframes blink {
0% { background: #7aa6da } 0% {
47% { background: #728ea7 } background: #7aa6da;
50% { background: #111 } }
97% { background: #111 } 47% {
100% { background: #728ea7 } background: #728ea7;
}
50% {
background: #111;
}
97% {
background: #111;
}
100% {
background: #728ea7;
}
} }

8
package.json
View File

@ -31,5 +31,13 @@
}, },
"engines": { "engines": {
"node": ">=18.0.0" "node": ">=18.0.0"
},
"prettier": {
"useTabs": true,
"tabWidth": 4,
"singleQuote": false,
"trailingComma": "all",
"semi": true,
"printWidth": 120
} }
} }

2
tsconfig.json
View File

@ -1,6 +1,7 @@
{ {
"include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"], "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
"compilerOptions": { "compilerOptions": {
"module": "ES2022",
"lib": ["DOM", "DOM.Iterable", "ES2022"], "lib": ["DOM", "DOM.Iterable", "ES2022"],
"isolatedModules": true, "isolatedModules": true,
"esModuleInterop": true, "esModuleInterop": true,
@ -15,7 +16,6 @@
"paths": { "paths": {
"~/*": ["./app/*"] "~/*": ["./app/*"]
}, },
// Remix takes care of building everything in `remix build`. // Remix takes care of building everything in `remix build`.
"noEmit": true "noEmit": true
} }