npx prettier -w .
This commit is contained in:
parent
31f60af66d
commit
1b4cb5845c
@ -16,18 +16,8 @@ export default function handleRequest(
|
||||
loadContext: AppLoadContext,
|
||||
) {
|
||||
return isbot(request.headers.get("user-agent"))
|
||||
? handleBotRequest(
|
||||
request,
|
||||
responseStatusCode,
|
||||
responseHeaders,
|
||||
remixContext,
|
||||
)
|
||||
: handleBrowserRequest(
|
||||
request,
|
||||
responseStatusCode,
|
||||
responseHeaders,
|
||||
remixContext,
|
||||
);
|
||||
? handleBotRequest(request, responseStatusCode, responseHeaders, remixContext)
|
||||
: handleBrowserRequest(request, responseStatusCode, responseHeaders, remixContext);
|
||||
}
|
||||
|
||||
function handleBotRequest(
|
||||
@ -39,11 +29,7 @@ function handleBotRequest(
|
||||
return new Promise((resolve, reject) => {
|
||||
let shellRendered = false;
|
||||
const { pipe, abort } = renderToPipeableStream(
|
||||
<RemixServer
|
||||
context={remixContext}
|
||||
url={request.url}
|
||||
abortDelay={ABORT_DELAY}
|
||||
/>,
|
||||
<RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />,
|
||||
{
|
||||
onAllReady() {
|
||||
shellRendered = true;
|
||||
@ -89,11 +75,7 @@ function handleBrowserRequest(
|
||||
return new Promise((resolve, reject) => {
|
||||
let shellRendered = false;
|
||||
const { pipe, abort } = renderToPipeableStream(
|
||||
<RemixServer
|
||||
context={remixContext}
|
||||
url={request.url}
|
||||
abortDelay={ABORT_DELAY}
|
||||
/>,
|
||||
<RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />,
|
||||
{
|
||||
onShellReady() {
|
||||
shellRendered = true;
|
||||
|
||||
@ -16,4 +16,3 @@ export default function useFathom() {
|
||||
Fathom.trackPageview();
|
||||
}, [location]);
|
||||
}
|
||||
|
||||
|
||||
16
app/root.tsx
16
app/root.tsx
@ -1,14 +1,6 @@
|
||||
import { cssBundleHref } from "@remix-run/css-bundle";
|
||||
import { json, type SerializeFrom, type LinksFunction, type MetaFunction } from "@remix-run/node";
|
||||
import {
|
||||
Links,
|
||||
LiveReload,
|
||||
Meta,
|
||||
Outlet,
|
||||
Scripts,
|
||||
ScrollRestoration,
|
||||
useLoaderData,
|
||||
} from "@remix-run/react";
|
||||
import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from "@remix-run/react";
|
||||
|
||||
import useFathom from "./hooks/use-fathom";
|
||||
|
||||
@ -41,9 +33,7 @@ export const meta: MetaFunction = () => [
|
||||
{ property: "og:image:alt", content: "og image" },
|
||||
];
|
||||
|
||||
export const links: LinksFunction = () => [
|
||||
...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
|
||||
];
|
||||
export const links: LinksFunction = () => [...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : [])];
|
||||
|
||||
export const loader = () =>
|
||||
json({
|
||||
@ -69,7 +59,7 @@ export default function App() {
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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 />
|
||||
<Links />
|
||||
</head>
|
||||
|
||||
@ -1,25 +1,15 @@
|
||||
import type { LinksFunction, MetaFunction } from "@remix-run/node";
|
||||
import type { LinksFunction } from "@remix-run/node";
|
||||
|
||||
import styles from "../styles/index.css";
|
||||
|
||||
export const links: LinksFunction = () => [
|
||||
{ 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 const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
<>
|
||||
<header>
|
||||
<pre>
|
||||
{` _ _ _ _
|
||||
{` _ _ _ _
|
||||
| | | | (_) | |
|
||||
| | ___ ___ __ _| | _ _ __ ___| |__
|
||||
| |/ _ \\ / __/ _\` | |_____| | '_ \\ / __| '_ \\
|
||||
@ -33,58 +23,69 @@ export default function Index() {
|
||||
|
||||
<main>
|
||||
<section>
|
||||
<header><strong>What is local-ip.sh?</strong></header>
|
||||
<header>
|
||||
<strong>What is local-ip.sh?</strong>
|
||||
</header>
|
||||
<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>.
|
||||
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 dangerouslySetInnerHTML={{
|
||||
Quick example, say your LAN IP address is <strong>192.168.1.10</strong>. Using local-ip.sh,
|
||||
<br />
|
||||
<br />
|
||||
<pre
|
||||
dangerouslySetInnerHTML={{
|
||||
__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
|
||||
dashes.<strong>192-168-1-10</strong>.local-ip.sh resolves to 192.168.1.10`,
|
||||
}} />
|
||||
}}
|
||||
/>
|
||||
</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!
|
||||
...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>:
|
||||
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>
|
||||
<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't match "sub-subdomains". <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 the numbers that make up the IP address.
|
||||
Be aware that wildcard certificates are not recursive, meaning they don't match
|
||||
"sub-subdomains". <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 the numbers that make up the IP
|
||||
address.
|
||||
</article>
|
||||
</main>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<header><strong>How does it work?</strong></header>
|
||||
<header>
|
||||
<strong>How does it work?</strong>
|
||||
</header>
|
||||
<main>
|
||||
<article>
|
||||
local-ip.sh runs publicly a <a href="https://git.mokhtar.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.
|
||||
local-ip.sh runs publicly a{" "}
|
||||
<a href="https://git.mokhtar.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.
|
||||
</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>
|
||||
</main>
|
||||
</section>
|
||||
|
||||
@ -10,20 +10,23 @@ body {
|
||||
padding-left: 1.5em;
|
||||
padding-right: 1.5em;
|
||||
width: min(100%, 41.5rem);
|
||||
/*margin: 50px auto;*/
|
||||
margin-top: 50px;
|
||||
margin-bottom: 50px;
|
||||
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
/*line-height: 1.5;*/
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
header {
|
||||
color: #7aa6da;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
header > pre {
|
||||
margin: 1rem auto;
|
||||
}
|
||||
|
||||
main a {
|
||||
@ -86,9 +89,19 @@ div.cursor {
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% { background: #7aa6da }
|
||||
47% { background: #728ea7 }
|
||||
50% { background: #111 }
|
||||
97% { background: #111 }
|
||||
100% { background: #728ea7 }
|
||||
0% {
|
||||
background: #7aa6da;
|
||||
}
|
||||
47% {
|
||||
background: #728ea7;
|
||||
}
|
||||
50% {
|
||||
background: #111;
|
||||
}
|
||||
97% {
|
||||
background: #111;
|
||||
}
|
||||
100% {
|
||||
background: #728ea7;
|
||||
}
|
||||
}
|
||||
|
||||
@ -31,5 +31,13 @@
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
},
|
||||
"prettier": {
|
||||
"useTabs": true,
|
||||
"tabWidth": 4,
|
||||
"singleQuote": false,
|
||||
"trailingComma": "all",
|
||||
"semi": true,
|
||||
"printWidth": 120
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
{
|
||||
"include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
"compilerOptions": {
|
||||
"module": "ES2022",
|
||||
"lib": ["DOM", "DOM.Iterable", "ES2022"],
|
||||
"isolatedModules": true,
|
||||
"esModuleInterop": true,
|
||||
@ -15,7 +16,6 @@
|
||||
"paths": {
|
||||
"~/*": ["./app/*"]
|
||||
},
|
||||
|
||||
// Remix takes care of building everything in `remix build`.
|
||||
"noEmit": true
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user