Add tutorial first draft

routes/api/feeds/_feed/get-feed.js

@@ -103,7 +103,7 @@ export async function getFeed (fastify, opts) {
             }
           })
           : [{ // Placeholder show so people can subscribe to empty feeds.
-              id: 'breadcrum.net:episode:placeholder',
+              id: `breadcrum.net:episode:placeholder:${feedId}:${userId}`,
               url: `${transport}://${host}/bookmarks`,
               title: 'Breadcum.net placeholder episode',
               content_text: 'This episode will disapear when you create your first breadcrum episode. Its added so that you can subscribe to your podcast feed URL before you add any episodes.',

web/docs/README.md

@@ -0,0 +1,29 @@
+---
+title: '📚 Docs'
+---
+
+# Docs
+
+Learn about more about Breadcrum:
+
+- 🔰 [Tutorial](./tutorial)
+- 📑 [Bookmarklets](./bookmarklets)
+
+## 👷‍♂️ Early access
+
+Breadcrum is still early in development by a one man team.
+Please be patient!
+
+
+## 🏳️ Private and Neutral
+
+Breadcrum is for private fair-use by individuals and is committed to content neutrality and user privacy.
+That said, do not store any content that is illegal under US law or security sensitive secrets the service.
+
+## 🦜 Warrant Canary
+
+As of 2023-01-02 no warrants have ever been served to [Breadcrum.net](https://Breadcrum.net), its owners or its employees. No searches or seizures of any kind have ever been performed on [Breadcrum.net](https://Breadcrum.net) assets. [Breadcrum.net](https://Breadcrum.net) has no direct or indirect knowledge of any backdoors, or potential backdoors in our servers or network and [Breadcrum.net](https://Breadcrum.net) has not received any requests to implement a backdoor. [Breadcrum.net](https://Breadcrum.net) has never disclosed any user communications to any third party. All git commits to Breadcrum's source code are signed with the following GPG key.
+
+- Our PGP public key info is as follows: https://github.com/bcomnes.gpg
+- KeyID: 3705F4634DC3A1AC
+- Fingerprint: FDA5 889C 6500 AC85 C604  86F5 3705 F463 4DC3 A1AC

web/docs/bookmarklets/bookmarklet.css

@@ -0,0 +1,10 @@
+.bc-bookmarklet {
+	font-weight: bold;
+	font-family: var(--system-round);
+	border: 2px dotted;
+	border-radius: 30px;
+	border-color: var(--accent-midground);
+	color: var(--text) !important;
+	padding: 5px;
+	text-decoration: none !important;
+}

web/docs/bookmarklets/client.js

@@ -0,0 +1,31 @@
+/* eslint-env browser */
+import { Component, html, render } from 'uland-isomorphic'
+import { bookmarklet } from '../bookmarklets/bookmarklet.js'
+
+export const page = Component(() => {
+  return html`
+    <h1>📑 Bookmarklets</h1>
+
+  <p>
+    Drag this bookmarklet to your bookmark bar or menu.
+    When you visit a page you want to bookmark, click the the bookmarklet in your bookmark bar or menu and it will open a new bookmark window. Existing URLs will open an edit window.
+  </p>
+
+  <p><a class="bc-bookmarklet" href="${bookmarklet}">🥖 bookmark</a></p>
+
+  <h2>Apple Shortcut</h2>
+
+  <p>This apple shortcut will let you save safari web pages to breadcrum from the share sheet. Eventually this will be provided by a native app.</p>
+
+  <ul>
+    <li>
+      <a href="https://www.icloud.com/shortcuts/7026e513f3d749b8b4f40f61c6d88cd5">Breadcrum iOS shortcut</a>
+    </li>
+    </ul>
+
+`
+})
+
+if (typeof window !== 'undefined') {
+  render(document.querySelector('.bc-main'), page)
+}

web/docs/bookmarklets/page.vars.js

@@ -0,0 +1,3 @@
+export default {
+  title: '📑️ Docs > Bookmarklets'
+}

web/docs/bookmarklets/style.css

@@ -0,0 +1 @@
+@import './bookmarklet.css';

web/docs/tutorial/client.js

@@ -0,0 +1,104 @@
+/* eslint-env browser */
+import { Component, html, render } from 'uland-isomorphic'
+import { bookmarklet } from '../bookmarklets/bookmarklet.js'
+
+export const page = Component(() => {
+  return html`
+  <h1>
+    Tutorial
+  </h1>
+  
+  <p>Welcome to 🥖 Breadcrum! Many things are still WIP but the following quick tutorial should get you up to speed.</p>
+  
+  <h2>Step 1: Get the Bookmarklet</h2>
+  
+  <p>
+    Everything you do on Breadcrum starts by adding a 🔖 Bookmark to your account.
+    Creating bookmarks should be quick and painless.
+    Until native app share sheets and WebExtensions are available for Breadcrum, the Bookmarklet is the best way to do this.
+  </p>
+  
+  <p>
+    Drag the following link to your browsers bookmark toolbar or sidebar.
+    You can keep the bookmarklet wherever you like, but you should keep it somewhere handy for quick access.
+  </p>
+  
+  <p><a class="bc-bookmarklet" href="${bookmarklet}">🥖 bookmark</a></p>
+  
+  <p>This can be done in a number of different ways. Here are some examples</p>
+  
+  <figure>
+    <img src="./img/sidebar-safari.png" alt="Dragging bookmarklet to the safari sidebar">
+    <figcaption>Use <kbd>cmd</kbd><kbd>shift</kbd><kbd>L</kbd> to show the Safari sidebar and drag the bookmarklet to the bookmark menu or favorite bar folder.</figcaption>
+  </figure>
+  
+  <figure>
+    <img src="./img/bookmark-bar-safari.png" alt="Dragging bookmarklet to the safari bookmark bar">
+    <figcaption>Use <kbd>cmd</kbd><kbd>shift</kbd><kbd>B</kbd> to show the bookmark bar and drag the bookmarklet to the bookmark bar in safari. Use a similar procedure in other browsers.</figcaption>
+  </figure>
+  
+  <figure>
+    <img src="./img/ios-safari.jpg" alt="Dragging bookmarklet to the iOS safari bookmark button">
+    <figcaption>On iOS, drag the bookmarklet to the bookmark button until the bookmark menu opens up. Place it anywhere you like.</figcaption>
+  </figure>
+  
+  <p>Add the bookmarklet to all browsers you plan on using Breadcrum with. Using a cloud sync between devices can save you some extra work of adding it on more than one device.</p>
+  
+  <h2>Step 2: Bookmark a Website</h2>
+  
+  <p>When on a website, click on the bookmarklet that you added to your browser bookmarks. This will open the add bookmark window.</p>
+  
+  <figure class="borderless"  >
+    <img src="./img/add-bookmark.png" alt="Create bookmark window">
+    <figcaption>This window lets you create a new bookmark. You can add tags, a note, related archival links and even create podcast episodes from media found in the page.</figcaption>
+  </figure>
+  
+  <p>Fill in the details and click <code>Submit</code>.</p>
+  
+  <h2>Step 2: View your 🔖 Bookmarks</h2>
+  
+  <p>Visit <a href="/bookmarks/">🔖 Bookmarks</a> to view your bookmarks.
+  
+  <figure class="borderless"  >
+    <picture>
+      <source srcset="/static/screenshots/bookmark-window-dark.png" media="(prefers-color-scheme: dark)">
+      <img src="/static/screenshots/bookmark-window-light.png" alt="Screenshot of Breadcrum.net">
+    </picture>
+    <figcaption>This window lets you create a new bookmark. You can add tags, a note, related archival links and even create podcast episodes from media found in the page.</figcaption>
+  </figure>
+  
+  <h2>Step 3: Subscribe to your 📡 Feed</h2>
+  
+  <p>Visit <a href="/feeds/">📡 Feeds</a> to get your private Breadcrum podcast feed URL.</p>
+  
+  <figure class="borderless"  >
+    <picture>
+      <source srcset="./img/feed-dark.png" media="(prefers-color-scheme: dark)">
+      <img src="./img/feed-light.png" alt="Screenshot of Breadcrum.net feed page">
+    </picture>
+    <figcaption>On the feed page, get your private podcast feed URL to subscribe to in a podcast app. Don't share this URL! It has a private token that makes it so only you can see the feed.</figcaption>
+  </figure>
+  
+  <p>Paste the feed URL into your favorite podcast app (that preferably supports video podcasts).</p>
+  
+  <figure>
+    <img src="./img/follow-show-by-url-apple-podcasts.png" alt="Use Follow show by URL in apple podcasts">
+    <figcaption>Follow the show in Apple Podcasts by going to the file Menu and selecting "Follow a Show by URL...".</figcaption>
+  </figure>
+  
+  <p>After a moment, your feed will refresh and download any content that you capture when creating bookmarks!</p>
+  
+  <figure class="borderless">
+    <img src="./img/apple-podcasts.png" alt="View your content in a podcast app">
+    <figcaption>All media from around the web, ready for you as a podcast.</figcaption>
+  </figure>
+  
+  <h2>Step 4: Play around!</h2>
+  
+  <p>Breadcrum has many features that will be documented soon! Follow <a href="https://twitter.com/breadcrum_">@_breadcrum</a> for updates as they are available.</p>
+`
+})
+
+if (typeof window !== 'undefined') {
+  render(document.querySelector('.bc-main'), page)
+}

web/docs/tutorial/page.js

@@ -0,0 +1,6 @@
+import { html } from 'uland-isomorphic'
+import { page } from './client.js'
+
+export default () => {
+  return html`${page()}`
+}

web/docs/tutorial/page.vars.js

@@ -0,0 +1,3 @@
+export default {
+  title: '🔰 Docs > Tutorial'
+}

web/docs/tutorial/style.css

@@ -0,0 +1 @@
+@import '../bookmarklets/bookmarklet.css';

web/document.css

@@ -47,9 +47,7 @@
   }
 }
 
-.bc-header {
-
-}
+.bc-header {}
 
 .bc-main {
   flex-grow: 1;

web/register/client.js

@@ -13,7 +13,7 @@ export const page = Component(() => {
 
   useEffect(() => {
     if ((user && !loading)) {
-      window.location.replace('/docs')
+      window.location.replace('/docs/tutorial')
     }
   }, [user])