npx prettier -w .
This commit is contained in:
parent
31f60af66d
commit
1b4cb5845c
@ -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;
|
||||||
|
@ -16,4 +16,3 @@ export default function useFathom() {
|
|||||||
Fathom.trackPageview();
|
Fathom.trackPageview();
|
||||||
}, [location]);
|
}, [location]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
16
app/root.tsx
16
app/root.tsx
@ -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>
|
||||||
|
@ -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";
|
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 (
|
||||||
<>
|
<>
|
||||||
<header>
|
<header>
|
||||||
<pre>
|
<pre>
|
||||||
{` _ _ _ _
|
{` _ _ _ _
|
||||||
| | | | (_) | |
|
| | | | (_) | |
|
||||||
| | ___ ___ __ _| | _ _ __ ___| |__
|
| | ___ ___ __ _| | _ _ __ ___| |__
|
||||||
| |/ _ \\ / __/ _\` | |_____| | '_ \\ / __| '_ \\
|
| |/ _ \\ / __/ _\` | |_____| | '_ \\ / __| '_ \\
|
||||||
@ -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>
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user