This commit is contained in:
Leandro Facchinetti
parent
56936d209b
commit
9e6cc02ef6
|
|
@ -7,122 +7,113 @@ export type Inbox = {
|
||||||
token: string;
|
token: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
export class Layout extends React.Component {
|
export function Layout({ children }: { children: React.ReactNode }) {
|
||||||
render() {
|
return (
|
||||||
return (
|
<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" />
|
<meta name="author" content="Leandro Facchinetti" />
|
||||||
<meta name="author" content="Leandro Facchinetti" />
|
<meta
|
||||||
<meta
|
name="description"
|
||||||
name="description"
|
content="Convert email newsletters into Atom feeds."
|
||||||
content="Convert email newsletters into Atom feeds."
|
/>
|
||||||
/>
|
<link
|
||||||
<link
|
rel="icon"
|
||||||
rel="icon"
|
type="image/png"
|
||||||
type="image/png"
|
href="/favicon-32x32.png"
|
||||||
href="/favicon-32x32.png"
|
sizes="32x32"
|
||||||
sizes="32x32"
|
/>
|
||||||
/>
|
<link
|
||||||
<link
|
rel="icon"
|
||||||
rel="icon"
|
type="image/png"
|
||||||
type="image/png"
|
href="/favicon-16x16.png"
|
||||||
href="/favicon-16x16.png"
|
sizes="16x16"
|
||||||
sizes="16x16"
|
/>
|
||||||
/>
|
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
<title>Kill the Newsletter!</title>
|
||||||
<title>Kill the Newsletter!</title>
|
</head>
|
||||||
</head>
|
<body style={{ textAlign: "center" }}>
|
||||||
<body style={{ textAlign: "center" }}>
|
<header>
|
||||||
<header>
|
<h1>
|
||||||
<h1>
|
<a href="/">Kill the Newsletter!</a>
|
||||||
<a href="/">Kill the Newsletter!</a>
|
</h1>
|
||||||
</h1>
|
<p>Convert email newsletters into Atom feeds</p>
|
||||||
<p>Convert email newsletters into Atom feeds</p>
|
<p>
|
||||||
<p>
|
<img
|
||||||
<img
|
alt="Convert email newsletters into Atom feeds"
|
||||||
alt="Convert email newsletters into Atom feeds"
|
src="/logo.png"
|
||||||
src="/logo.png"
|
width="150"
|
||||||
width="150"
|
/>
|
||||||
/>
|
</p>
|
||||||
</p>
|
</header>
|
||||||
</header>
|
<main>{children}</main>
|
||||||
<main>{this.props.children}</main>
|
<footer>
|
||||||
<footer>
|
<p>
|
||||||
<p>
|
By <a href="https://www.leafac.com">Leandro Facchinetti</a> ·{" "}
|
||||||
By <a href="https://www.leafac.com">Leandro Facchinetti</a> ·{" "}
|
<a href="https://github.com/leafac/www.kill-the-newsletter.com">
|
||||||
<a href="https://github.com/leafac/www.kill-the-newsletter.com">
|
Source
|
||||||
Source
|
</a>{" "}
|
||||||
</a>{" "}
|
·{" "}
|
||||||
·{" "}
|
<a href="mailto:kill-the-newsletter@leafac.com">Report an Issue</a>
|
||||||
<a href="mailto:kill-the-newsletter@leafac.com">
|
</p>
|
||||||
Report an Issue
|
</footer>
|
||||||
</a>
|
</body>
|
||||||
</p>
|
</html>
|
||||||
</footer>
|
);
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Form extends React.Component {
|
export function Form() {
|
||||||
render() {
|
return (
|
||||||
return (
|
<form method="POST" action="/">
|
||||||
<form method="POST" action="/">
|
<p>
|
||||||
<p>
|
<input
|
||||||
<input
|
type="text"
|
||||||
type="text"
|
name="name"
|
||||||
name="name"
|
placeholder="Newsletter Name…"
|
||||||
placeholder="Newsletter Name…"
|
maxLength={500}
|
||||||
maxLength={500}
|
size={30}
|
||||||
size={30}
|
required
|
||||||
required
|
/>
|
||||||
/>
|
<button>Create Inbox</button>
|
||||||
<button>Create Inbox</button>
|
</p>
|
||||||
</p>
|
</form>
|
||||||
</form>
|
);
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Created extends React.Component<{ inbox: Inbox }> {
|
export function Created({ inbox: { name, token } }: { inbox: Inbox }) {
|
||||||
render() {
|
return (
|
||||||
const { name, token } = this.props.inbox;
|
<>
|
||||||
return (
|
<h1>“{name}” Inbox Created</h1>
|
||||||
<>
|
<p>
|
||||||
<h1>“{name}” Inbox Created</h1>
|
Sign up for the newsletter with
|
||||||
<p>
|
<br />
|
||||||
Sign up for the newsletter with
|
<code>{token}@kill-the-newsletter.com</code>
|
||||||
<br />
|
</p>
|
||||||
<code>{token}@kill-the-newsletter.com</code>
|
<p>
|
||||||
</p>
|
Subscribe to the Atom feed at
|
||||||
<p>
|
<br />
|
||||||
Subscribe to the Atom feed at
|
<code>
|
||||||
<br />
|
https://www.kill-the-newsletter.com/feeds/{token}
|
||||||
<code>
|
.xml
|
||||||
https://www.kill-the-newsletter.com/feeds/{token}
|
</code>
|
||||||
.xml
|
</p>
|
||||||
</code>
|
<p>
|
||||||
</p>
|
Don’t share these addresses.
|
||||||
<p>
|
<br />
|
||||||
Don’t share these addresses.
|
They contain a security token that other people could use
|
||||||
<br />
|
<br />
|
||||||
They contain a security token that other people could use
|
to send you spam and to control your newsletter subscriptions.
|
||||||
<br />
|
</p>
|
||||||
to send you spam and to control your newsletter subscriptions.
|
<p>Enjoy your readings!</p>
|
||||||
</p>
|
<p>
|
||||||
<p>Enjoy your readings!</p>
|
<a href="https://www.kill-the-newsletter.com">
|
||||||
<p>
|
<strong>Create Another Inbox</strong>
|
||||||
<a href="https://www.kill-the-newsletter.com">
|
</a>
|
||||||
<strong>Create Another Inbox</strong>
|
</p>
|
||||||
</a>
|
</>
|
||||||
</p>
|
);
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// https://validator.w3.org/feed/docs/atom.html
|
// https://validator.w3.org/feed/docs/atom.html
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue