npx prettier -w .
This commit is contained in:
parent
31f60af66d
commit
1b4cb5845c
@ -1,4 +1,4 @@
|
||||
/** @type {import('eslint').Linter.Config} */
|
||||
module.exports = {
|
||||
extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
|
||||
extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
|
||||
};
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -3,17 +3,16 @@ import { useLocation } from "@remix-run/react";
|
||||
import * as Fathom from "fathom-client";
|
||||
|
||||
export default function useFathom() {
|
||||
const location = useLocation();
|
||||
const location = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
Fathom.load(window.siteConfig.fathom.siteId, {
|
||||
spa: "history",
|
||||
includedDomains: ["local-ip.sh"],
|
||||
});
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
Fathom.load(window.siteConfig.fathom.siteId, {
|
||||
spa: "history",
|
||||
includedDomains: ["local-ip.sh"],
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
Fathom.trackPageview();
|
||||
}, [location]);
|
||||
useEffect(() => {
|
||||
Fathom.trackPageview();
|
||||
}, [location]);
|
||||
}
|
||||
|
||||
|
||||
136
app/root.tsx
136
app/root.tsx
@ -1,90 +1,80 @@
|
||||
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";
|
||||
|
||||
export const meta: MetaFunction = () => [
|
||||
{ name: "title", content: "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" },
|
||||
{ name: "robots", content: "index,follow" },
|
||||
{ name: "googlebot", content: "index,follow" },
|
||||
{ property: "twitter:title", content: "local-ip.sh" },
|
||||
{
|
||||
property: "twitter:description",
|
||||
content: "local-ip.sh is a magic domain name that provides wildcard DNS for any IP address.",
|
||||
},
|
||||
{ property: "twitter:card", content: "summary_large_image" },
|
||||
{ property: "twitter:site", content: "https://local-ip.sh/" },
|
||||
{ property: "twitter:image", content: "https://local-ip.sh/og.png" },
|
||||
{ property: "twitter:image:alt", content: "og image" },
|
||||
{ property: "og:title", content: "local-ip.sh" },
|
||||
{
|
||||
property: "og:description",
|
||||
content: "local-ip.sh is a magic domain name that provides wildcard DNS for any IP address.",
|
||||
},
|
||||
{ property: "og:url", content: "https://local-ip.sh/" },
|
||||
{ property: "og:type", content: "website" },
|
||||
{ property: "og:image", content: "https://local-ip.sh/og.png" },
|
||||
{ property: "og:image:alt", content: "og image" },
|
||||
{ name: "title", content: "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" },
|
||||
{ name: "robots", content: "index,follow" },
|
||||
{ name: "googlebot", content: "index,follow" },
|
||||
{ property: "twitter:title", content: "local-ip.sh" },
|
||||
{
|
||||
property: "twitter:description",
|
||||
content: "local-ip.sh is a magic domain name that provides wildcard DNS for any IP address.",
|
||||
},
|
||||
{ property: "twitter:card", content: "summary_large_image" },
|
||||
{ property: "twitter:site", content: "https://local-ip.sh/" },
|
||||
{ property: "twitter:image", content: "https://local-ip.sh/og.png" },
|
||||
{ property: "twitter:image:alt", content: "og image" },
|
||||
{ property: "og:title", content: "local-ip.sh" },
|
||||
{
|
||||
property: "og:description",
|
||||
content: "local-ip.sh is a magic domain name that provides wildcard DNS for any IP address.",
|
||||
},
|
||||
{ property: "og:url", content: "https://local-ip.sh/" },
|
||||
{ property: "og:type", content: "website" },
|
||||
{ property: "og:image", content: "https://local-ip.sh/og.png" },
|
||||
{ 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({
|
||||
siteConfig: {
|
||||
fathom: {
|
||||
siteId: process.env.FATHOM_SITE_ID!,
|
||||
domain: process.env.FATHOM_CUSTOM_DOMAIN!,
|
||||
},
|
||||
},
|
||||
});
|
||||
json({
|
||||
siteConfig: {
|
||||
fathom: {
|
||||
siteId: process.env.FATHOM_SITE_ID!,
|
||||
domain: process.env.FATHOM_CUSTOM_DOMAIN!,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
siteConfig: SerializeFrom<typeof loader>["siteConfig"];
|
||||
}
|
||||
interface Window {
|
||||
siteConfig: SerializeFrom<typeof loader>["siteConfig"];
|
||||
}
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
const { siteConfig } = useLoaderData<typeof loader>();
|
||||
useFathom();
|
||||
const { siteConfig } = useLoaderData<typeof loader>();
|
||||
useFathom();
|
||||
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<Meta />
|
||||
<Links />
|
||||
</head>
|
||||
<body>
|
||||
<Outlet />
|
||||
<script
|
||||
suppressHydrationWarning
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `window.siteConfig=${JSON.stringify(siteConfig)};`,
|
||||
}}
|
||||
/>
|
||||
<ScrollRestoration />
|
||||
<Scripts />
|
||||
<LiveReload />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1" />
|
||||
<Meta />
|
||||
<Links />
|
||||
</head>
|
||||
<body>
|
||||
<Outlet />
|
||||
<script
|
||||
suppressHydrationWarning
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `window.siteConfig=${JSON.stringify(siteConfig)};`,
|
||||
}}
|
||||
/>
|
||||
<ScrollRestoration />
|
||||
<Scripts />
|
||||
<LiveReload />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,90 +1,91 @@
|
||||
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>
|
||||
{` _ _ _ _
|
||||
| | | | (_) | |
|
||||
| | ___ ___ __ _| | _ _ __ ___| |__
|
||||
| |/ _ \\ / __/ _\` | |_____| | '_ \\ / __| '_ \\
|
||||
| | (_) | (_| (_| | |_____| | |_) |\\__ \\ | | |
|
||||
|_|\\___/ \\___\\__,_|_| |_| .__(_)___/_| |_|
|
||||
| |
|
||||
|_|
|
||||
{` _ _ _ _
|
||||
| | | | (_) | |
|
||||
| | ___ ___ __ _| | _ _ __ ___| |__
|
||||
| |/ _ \\ / __/ _\` | |_____| | '_ \\ / __| '_ \\
|
||||
| | (_) | (_| (_| | |_____| | |_) |\\__ \\ | | |
|
||||
|_|\\___/ \\___\\__,_|_| |_| .__(_)___/_| |_|
|
||||
| |
|
||||
|_|
|
||||
`}
|
||||
</pre>
|
||||
</header>
|
||||
|
||||
<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={{
|
||||
__html: ` <strong>192.168.1.10</strong>.local-ip.sh resolves to 192.168.1.10
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
22822
package-lock.json
generated
22822
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
74
package.json
74
package.json
@ -1,35 +1,43 @@
|
||||
{
|
||||
"name": "www.local-ip.sh",
|
||||
"private": true,
|
||||
"sideEffects": false,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "remix build",
|
||||
"deploy": "fly deploy --remote-only",
|
||||
"dev": "remix dev",
|
||||
"start": "remix-serve ./build/index.js",
|
||||
"typecheck": "tsc"
|
||||
},
|
||||
"dependencies": {
|
||||
"@remix-run/css-bundle": "^2.3.1",
|
||||
"@remix-run/node": "^2.3.1",
|
||||
"@remix-run/react": "^2.3.1",
|
||||
"@remix-run/serve": "^2.3.1",
|
||||
"fathom-client": "^3.6.0",
|
||||
"isbot": "^3.6.8",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@flydotio/dockerfile": "^0.4.11",
|
||||
"@remix-run/dev": "^2.3.1",
|
||||
"@remix-run/eslint-config": "^2.3.1",
|
||||
"@types/react": "^18.2.20",
|
||||
"@types/react-dom": "^18.2.7",
|
||||
"eslint": "^8.38.0",
|
||||
"typescript": "^5.1.6"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
}
|
||||
"name": "www.local-ip.sh",
|
||||
"private": true,
|
||||
"sideEffects": false,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "remix build",
|
||||
"deploy": "fly deploy --remote-only",
|
||||
"dev": "remix dev",
|
||||
"start": "remix-serve ./build/index.js",
|
||||
"typecheck": "tsc"
|
||||
},
|
||||
"dependencies": {
|
||||
"@remix-run/css-bundle": "^2.3.1",
|
||||
"@remix-run/node": "^2.3.1",
|
||||
"@remix-run/react": "^2.3.1",
|
||||
"@remix-run/serve": "^2.3.1",
|
||||
"fathom-client": "^3.6.0",
|
||||
"isbot": "^3.6.8",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@flydotio/dockerfile": "^0.4.11",
|
||||
"@remix-run/dev": "^2.3.1",
|
||||
"@remix-run/eslint-config": "^2.3.1",
|
||||
"@types/react": "^18.2.20",
|
||||
"@types/react-dom": "^18.2.7",
|
||||
"eslint": "^8.38.0",
|
||||
"typescript": "^5.1.6"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
},
|
||||
"prettier": {
|
||||
"useTabs": true,
|
||||
"tabWidth": 4,
|
||||
"singleQuote": false,
|
||||
"trailingComma": "all",
|
||||
"semi": true,
|
||||
"printWidth": 120
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
/** @type {import('@remix-run/dev').AppConfig} */
|
||||
export default {
|
||||
ignoredRouteFiles: ["**/.*"],
|
||||
// appDirectory: "app",
|
||||
// assetsBuildDirectory: "public/build",
|
||||
// publicPath: "/build/",
|
||||
// serverBuildPath: "build/index.js",
|
||||
ignoredRouteFiles: ["**/.*"],
|
||||
// appDirectory: "app",
|
||||
// assetsBuildDirectory: "public/build",
|
||||
// publicPath: "/build/",
|
||||
// serverBuildPath: "build/index.js",
|
||||
};
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
{
|
||||
"include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
"compilerOptions": {
|
||||
"lib": ["DOM", "DOM.Iterable", "ES2022"],
|
||||
"isolatedModules": true,
|
||||
"esModuleInterop": true,
|
||||
"jsx": "react-jsx",
|
||||
"moduleResolution": "Bundler",
|
||||
"resolveJsonModule": true,
|
||||
"target": "ES2022",
|
||||
"strict": true,
|
||||
"allowJs": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"~/*": ["./app/*"]
|
||||
},
|
||||
|
||||
// Remix takes care of building everything in `remix build`.
|
||||
"noEmit": true
|
||||
}
|
||||
"include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
"compilerOptions": {
|
||||
"module": "ES2022",
|
||||
"lib": ["DOM", "DOM.Iterable", "ES2022"],
|
||||
"isolatedModules": true,
|
||||
"esModuleInterop": true,
|
||||
"jsx": "react-jsx",
|
||||
"moduleResolution": "Bundler",
|
||||
"resolveJsonModule": true,
|
||||
"target": "ES2022",
|
||||
"strict": true,
|
||||
"allowJs": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"~/*": ["./app/*"]
|
||||
},
|
||||
// Remix takes care of building everything in `remix build`.
|
||||
"noEmit": true
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user