Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #362 from omnivore-app/docs/improve-newsletter-docs

Browse Source 
Update the newsletter documentation
This commit is contained in:
Jackson Harper
2022-03-31 13:24:40 -07:00
committed by GitHub
parent 5d6108707f e61d030e32
commit 91b007fc37
3 changed files with 158 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
packages/web/pages/help/emails.tsx Normal file
View File

@ -0,0 +1,67 @@
/* eslint-disable @next/next/no-img-element */
import { Box, HStack } from '../../components/elements/LayoutPrimitives'
import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
import { Button } from '../../components/elements/Button'
import Link from 'next/link'
export default function Emails(): JSX.Element {
return (
<PrimaryLayout
pageMetaDataProps={{
title: 'Reading Newsletters in Omnivore',
path: '/help/newsletters',
}}
pageTestId="help-newsletters-tag"
>
<Box
css={{
m: '42px',
maxWidth: '640px',
color: '$grayText',
img: {
maxWidth: '85%',
},
'@smDown': {
m: '16px',
maxWidth: '85%',
alignSelf: 'center',
},
}}
>
<h1>Omnivore Email Addresses</h1>
<hr />
<p>
An Omnivore email address will receive email, detect whether the email is a PDF document or newsletter,
and add the content to your library.
</p>
<p>
If Omnivore doesn&apos;t think the item should be added to your library,
it will be forwarded to the email address you used when you registered
for Omnivore (from <code>msgs@omnivore.app</code>).
</p>
<h2>Sending PDFs to your Omnivore Email Address</h2>
<p>
Add PDFs to your Omnivore library by sending them to your Omnivore email address. If there is a subject
line in the email, it will be used as the title of the PDF. If there is no subject line, the filename will
be used as the title.
</p>
<h2>Read all your newsletters in Omnivore</h2>
<p>
Subscribe to newsletters with your Omnivore email address and they
will be added to your library when we receive them.
</p>
<p><Link href="/help/newsletters">Learn more about setting up newsletters</Link></p>
<HStack alignment="center" css={{ mb: '32px', width: '100%' }}>
<Link passHref href="/settings/emails">
<Button style="ctaDarkYellow">Get Started</Button>
</Link>
</HStack>
</Box>
<Box css={{ height: '120px' }} />
</PrimaryLayout>
)
}

135
packages/web/pages/help/newsletters.tsx
View File

@ -3,15 +3,37 @@ import { Box, HStack, SpanBox } from '../../components/elements/LayoutPrimitives
import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
import { Button } from '../../components/elements/Button'
import Link from 'next/link'
import { StyledText } from '../../components/elements/StyledText'
import { styled } from '@stitches/react'
import { Copy, Plus } from 'phosphor-react'
import { theme } from '../../components/tokens/stitches.config'
const AddEmailButton = () => {
return (<Button
style="ctaDarkYellow"
css={{
cursor: 'default',
display: 'inline-flex',
alignItems: 'center',
}}
>
<Plus size={18} style={{ marginRight: '6.5px' }} />
<SpanBox>Add Email</SpanBox>
</Button>)
}
const CopyButton = () => {
return (
<Button style="plainIcon" css={{
pl: '2px',
pr: '4px',
cursor: 'default',
display: 'inline-flex',
}}
>
<Copy color={theme.colors.grayTextContrast.toString()} />
</Button>)
}
export default function Newsletters(): JSX.Element {
const HighlightText = styled(SpanBox, {
padding: '2px',
background: '$highlightBackground',
})
return (
<PrimaryLayout
pageMetaDataProps={{
@ -37,41 +59,48 @@ export default function Newsletters(): JSX.Element {
>
<h1>Read Newsletters in Omnivore</h1>
<hr />
<p>
Currently Omnivore supports newsletters from the following providers.
<ul>
<li>Newsletters hosted on <a href="https://substack.com" target="_blank" rel="noreferrer">substack.com</a></li>
<li>The <a href="https://www.axios.com/newsletters" target="_blank" rel="noreferrer">Axios Daily</a> newsletters</li>
<li><a href="https://golangweekly.com/" target="_blank" rel="noreferrer">Golang Weekly</a></li>
</ul>
If there is a newsletter you would like to read in Omnivore, please let us know.
</p>
<p>Omnivore supports newsletters from the following providers:</p>
<ul>
<li>Newsletters hosted on <a href="https://substack.com" target="_blank" rel="noreferrer">substack.com</a></li>
<li>Newsletters hosted on <a href="https://www.beehiiv.com/" target="_blank" rel="noreferrer">beehiiv.com</a></li>
<li>The <a href="https://www.axios.com/newsletters" target="_blank" rel="noreferrer">Axios Daily</a> newsletters</li>
<li><a href="https://golangweekly.com/" target="_blank" rel="noreferrer">Golang Weekly</a></li>
<li><a href="https://www.bloomberg.com/account/newsletters" target="_blank" rel="noreferrer">Bloomberg Newsletters</a></li>
</ul>
<p>If there is a newsletter you would like to read in Omnivore, please let us know.</p>
<h2>Omnivore Email Addresses</h2>
<p>
Omnivore allows you to create unique email addresses for subscribing to newsletters.
You can reuse one address for all your newsletters, or you can create a unique address
for each.
Omnivore allows you to create unique email addresses for subscribing to newsletters.
You can reuse one address for all your newsletters, or you can create a unique address
for each.
</p>
<p>
An Omnivore email address will receive email, detect whether the email is a newsletter,
and add the newsletter content to your library. If the email does not appear to be a newsletter,
it will be forwarded to the email address you used when you registered for Omnivore.</p>
An Omnivore email address will receive email, detect whether the email is a newsletter,
and add the newsletter content to your library. If the email does not appear to be a newsletter,
it will be forwarded to the email address you used when you registered for Omnivore.
</p>
<p>There are multiple ways to have newsletters added directly to your Omnivore library:</p>
<p>There are multiple ways to add newsletters to your Omnivore library:</p>
<ul>
<li><Link href="#directly">Subscribe to the newsletter with an Omnivore email address</Link></li>
<li><Link href="#forwarding">Create a forwarding rule from your email account</Link></li>
<li><a href="#updating">Updating your account email to an Omnivore email address</a></li>
<li><a href="#directly">Subscribe to the newsletter with an Omnivore email address</a></li>
<li><a href="#forwarding">Create a forwarding rule from your email account</a></li>
</ul>
{/* <h2>Notifications</h2>
<p>If you are a registered iOS user and have granted push notification permission to Omnivore, you will be sent a notification when a newsletter is added to your library. Otherwise, you will be notified via your registered email address.</p> */}
<h2 id="updating">Updating your account email</h2>
<p>
If you want all your substack newsletters sent to Omnivore, you can login and change the
address on <a href="https://substack.com/account/settings">your account page</a> in Substack.
</p>
<h2 id="directly">Subscribing Directly</h2>
<p>Create your first email address by clicking the <HighlightText>Create New Email</HighlightText> button on
the <Link href='/settings/emails'>emails page</Link>. Copy the email address to your clipboard using the
copy button, and enter that email address into an email subscription box. If you are already logged into
Substack you might need to logout to use your new email address.</p>
<p>
Create your first email address by clicking the <AddEmailButton /> button on
the <Link href='/settings/emails'>emails page</Link>. Copy the email address
to your clipboard using the <CopyButton />
copy button, and enter that email address into an email subscription box.
</p>
<HStack distribution="center" css={{ width: '100%', my: '32px' }}>
<img
@ -81,37 +110,53 @@ export default function Newsletters(): JSX.Element {
</HStack>
<p>
If you want all your substack newsletters sent to Omnivore, you can login and change the
address on <a href="https://substack.com/account/settings">your account page</a> in Substack.
If you are already logged into Substack you might need to logout to use your new email address.
</p>
<h2 id="forwarding">Create a Forwarding Rule</h2>
<p>If you are a Gmail user you can create a forwarding rule to send email from your regular account to your Omnivore email address. This is useful if you have an existing paid newsletter subscription. For free newsletters we recommend subscribing directly to the newsletter with your Omnivore email address.</p>
<p>
If you are a Gmail user you can create a forwarding rule to send email from your regular account
to your Omnivore email address. This is useful if you have an existing paid newsletter subscription and
don&apos;t want to update your account email address.
</p>
<p>
For free newsletters we recommend subscribing directly to the newsletter with your Omnivore email address
instead of setting up forwarding rules.
</p>
<p>Before you start:</p>
<ul>
<li>Create an Omnivore Email Address by clicking the <HighlightText>Create New Email</HighlightText> button on the <Link href='/settings/emails'>emails page</Link>.</li>
<li>Create an Omnivore Email Address by clicking the <AddEmailButton /> button on the <Link href='/settings/emails'>emails page</Link>.</li>
<li>Make a note of the Newsletter&apos;s sender email address. For example <code>omnivore@substack.com</code>.</li>
</ul>
<p>Create a forwarding rule:</p>
<ul>
<li>On a computer open your <Link href="https://mail.google.com/mail/u/0/#settings/fwdandpop">Gmail Forwarding Rules</Link>. <code>If clicking the Gmail Forwarding Rules link does not work: click on the Gear icon in the upper right corner of Gmail and select All Settings, then click the Forwarding and POP/IMAP tab</code></li>
<li>In the <HighlightText>Forwarding</HighlightText> section click <HighlightText>Add a forwarding address</HighlightText>.</li>
<li>
On a computer open your <Link href="https://mail.google.com/mail/u/0/#settings/fwdandpop">Gmail Forwarding Rules</Link>.
If this link does not work: click on the Gear icon in the upper right corner of Gmail
and select All Settings, then click the Forwarding and POP/IMAP tab.
</li>
<li>In the <b>Forwarding</b> section click <b>Add a forwarding address</b>.</li>
<li>Enter your Omnivore Email Address (eg <code>username-sdfsd@inbox.omnivore.app</code>) and click Next.</li>
<li>Click Proceed</li>
<li>Click OK</li>
<li><HighlightText>Refresh the Omnivore Newsletter Emails page and you should see a code appear beside your address</HighlightText> (eg 663421251). Copy this code to your clipboard.</li>
<li>Return to your forwarding rules section and look for the confirm code text box. Enter the confirmation code you copied and click <code>Verify</code>.</li>
<li>In the forwarding section of Gmail, Click on <HighlightText>Creating a Filter</HighlightText></li>
<li>Click Proceed and OK</li>
<li>Refresh the Omnivore Newsletter Emails page and you should see a code appear beside your address (eg 663421251).
Copy this code to your clipboard (click the <CopyButton /> button).
</li>
<li>
Return to your forwarding rules section and look for the confirm code text box.
Enter the confirmation code you copied and click <b>Verify</b>.
</li>
<li>In the forwarding section of Gmail, Click on <b>Creating a Filter</b></li>
<li>Add the email address of your newsletter (eg omnivore@substack.app) in the <code>From</code> section.</li>
<li>Click <code>Create Filter</code></li>
<li>Choose <HighlightText>Forward it to</HighlightText> and enter your Omnivore Email Address (eg <code>username-sdfsd@inbox.omnivore.app</code>)</li>
<li>Choose <b>Forward it to</b> and enter your Omnivore Email Address (eg <code>username-sdfsd@inbox.omnivore.app</code>)</li>
<li>Click <code>Create Filter</code> at the bottom of the dialog.</li>
</ul>
</Box>
<Box css={{ height: '120px' }} />
</PrimaryLayout>
)
}

1
packages/web/pages/help/saving-links.tsx
View File

@ -162,6 +162,7 @@ export default function Colors(): JSX.Element {
</Link>
</HStack>
</Box>
<Box css={{ height: '120px' }} />
</PrimaryLayout>
)
}