updated readme, refactored a bit

README.md

@@ -15,11 +15,11 @@ programmed relays.
 
 
 <p>This is an installable personal website that is accessible through chrome-based and firefox browsers. The website is built with PWA Builder and Lit Web Components. It utilizes the Nostr
-protocol to fetch kinds 0, 1, and 30023 notes from a personal relay and display then (profile metadata, short text, and long form notes.) </p>
+protocol to fetch profile metadata, short text, and long form notes (event kinds 0, 1, and 30023) from a relay. </p>
 
 
 
-<p>If you're on safari browsers, try visiting the webpage then tapping on the arrow
+<p>If you're on any chrome-based, firefox or safari browser try visiting the webpage then tapping on the arrow
 pointing up in the bottom toolbar. Scroll down a bit to tap on "Add to Home Screen".
 
 If you're on a chromium-based browser you should be able to do the same.</p>
@@ -32,7 +32,7 @@ If you're on a chromium-based browser you should be able to do the same.</p>
 <li>refactor</li>
 <li>dropdown menu a la Medium</li>
 <li>long form blog view</li>
-<li></li>
+<li>include instructions as preloaded content </li>
 
 </ul>
 
@@ -41,6 +41,6 @@ If you're on a chromium-based browser you should be able to do the same.</p>
 
 ## How to try it out
 
-Visit https://miguelalmodo.com/dist to try installing to your
+Visit https://miguelalmodo.com/dist2 to try installing to your
 smartphone home screen.
 

dist2/code/app-about-BGKiJfUr.js

@@ -0,0 +1,57 @@
+import{i as l,r as p,x as h,s as m,t as c}from"./index-COc6jZBc.js";const d=l`
+  @media(min-width: 1000px) {
+    sl-card {
+      max-width: 70vw;
+    }
+  }
+`;var u=Object.defineProperty,y=Object.getOwnPropertyDescriptor,f=(n,o,a,t)=>{for(var e=t>1?void 0:t?y(o,a):o,s=n.length-1,r;s>=0;s--)(r=n[s])&&(e=(t?r(o,a,e):r(e))||e);return t&&e&&u(o,a,e),e};let i=class extends p{render(){return h`
+      <app-header ?enableBack="${!0}"></app-header>
+
+      <main><div id="welcomeBar">
+        <h2>Frequently Asked Questions</h2>
+
+<sl-card id="welcomeCard">
+          <h3>What am I looking at?</h3>
+
+          <p>
+          This is a personal micro-social media client that can be installed to
+          your desktop or smartphone home screen. You can sign in via an extension
+          to display your profile data and notes from my relay. You
+          can compose a note using a rich text editor I built with Prosemirror.
+          </p>
+
+
+
+          <h3>How do I install this on my home screen?</h3>
+          <p>Look for "Add to Home Screen" in your browser toolbar
+          to install it to your homescreen. </p>
+
+           <h3>What is Nostr?</h3>
+          <p>Notes and Other Stuff Transmitted Over Relays is a simple open source
+          social media protocol that enables anybody to implement social media functionalities
+          into their websites.</p>
+
+          <hr>
+            <h2>Technology Used</h2>
+
+            <ul>
+              <li>
+                I am using <a href="https://www.npmjs.com/package/nostr-tools?activeTab=dependencies">Nostr Tools</a> to implement an extension
+              sign in and pull notes from my personal relay.
+              </li>
+
+              <li>
+                <a href="https://lit.dev">Lit Web Components Library</a>
+              </li>
+
+              <li>
+                <a href="https://github.com/hoytech/strfry"
+                  >Strfry</a>
+              </li>
+            </ul>
+          </sl-card></div>
+      </main>
+    `}};i.styles=[m,d,l`
+
+    `];i=f([c("app-about")],i);export{i as AppAbout};
+//# sourceMappingURL=app-about-BGKiJfUr.js.map

dist2/code/app-about-BGKiJfUr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-about-BGKiJfUr.js","sources":["../../src/pages/app-about/about-styles.ts","../../src/pages/app-about/app-about.ts"],"sourcesContent":["import { css } from 'lit';\n\n// these styles can be imported from any component\n// for an example of how to use this, check /pages/about-about.ts\nexport const styles = css`\n  @media(min-width: 1000px) {\n    sl-card {\n      max-width: 70vw;\n    }\n  }\n`;","import { LitElement, html, css } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\nimport { styles } from './about-styles';\n\nimport { styles as sharedStyles } from '../../styles/shared-styles'\nimport '@shoelace-style/shoelace/dist/components/card/card.js';\n\n@customElement('app-about')\nexport class AppAbout extends LitElement {\n  static styles = [\n    sharedStyles,\n    styles,\n    css`\n\n    `\n  ]\n\n  render() {\n    return html`\n      <app-header ?enableBack=\"${true}\"></app-header>\n\n      <main><div id=\"welcomeBar\">\n        <h2>Frequently Asked Questions</h2>\n\n<sl-card id=\"welcomeCard\">\n          <h3>What am I looking at?</h3>\n\n          <p>\n          This is a personal micro-social media client that can be installed to\n          your desktop or smartphone home screen. You can sign in via an extension\n          to display your profile data and notes from my relay. You\n          can compose a note using a rich text editor I built with Prosemirror.\n          </p>\n\n\n\n          <h3>How do I install this on my home screen?</h3>\n          <p>Look for \"Add to Home Screen\" in your browser toolbar\n          to install it to your homescreen. </p>\n\n           <h3>What is Nostr?</h3>\n          <p>Notes and Other Stuff Transmitted Over Relays is a simple open source\n          social media protocol that enables anybody to implement social media functionalities\n          into their websites.</p>\n\n          <hr>\n            <h2>Technology Used</h2>\n\n            <ul>\n              <li>\n                I am using <a href=\"https://www.npmjs.com/package/nostr-tools?activeTab=dependencies\">Nostr Tools</a> to implement an extension\n              sign in and pull notes from my personal relay.\n              </li>\n\n              <li>\n                <a href=\"https://lit.dev\">Lit Web Components Library</a>\n              </li>\n\n              <li>\n                <a href=\"https://github.com/hoytech/strfry\"\n                  >Strfry</a>\n              </li>\n            </ul>\n          </sl-card></div>\n      </main>\n    `;\n  }\n}\n"],"names":["styles","css","AppAbout","LitElement","html","sharedStyles","__decorateClass","customElement"],"mappings":"oEAIO,MAAMA,EAASC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,kMCKT,IAAAC,EAAN,cAAuBC,CAAW,CASvC,QAAS,CACA,OAAAC;AAAAA,iCACsB,EAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAA,CAgDrC,EA3DaF,EACJ,OAAS,CACdG,EACAL,EACAC;AAAAA;AAAAA,KAGF,EAPWC,EAANI,EAAA,CADNC,EAAc,WAAW,CAAA,EACbL,CAAA"}

dist2/code/index-DkYRBo1e.css

@@ -0,0 +1 @@
+:root{--font-family: sans-serif}html,body{font-family:var(--font-family);padding:0;margin:0;height:100%}@media (prefers-color-scheme: dark){html,body{background-color:#181818;color:#fff}}@media (prefers-color-scheme: light){html,body{background-color:#f5f5f5;color:#000}}

dist2/index.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <title>fostr</title>
+
+  <base href="/" />
+
+  <!-- This meta viewport ensures the webpage's dimensions change according to the device it's on. This is called Responsive Web Design.-->
+  <meta name="viewport"
+    content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+  <meta name="description" content="This is a fostr app" />
+
+  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#181818" />
+  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f3f3f3" />
+
+  <!-- These meta tags are Apple-specific, and set the web application to run in full-screen mode with a black status bar. Learn more at https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html-->
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-title" content="fostr" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+
+
+  <!-- Imports an icon to represent the document. -->
+  <link rel="icon" href="/dist2/assets/icons/casto_kingdom.png" type="image/png" />
+
+  <!-- Imports the manifest to represent the web application. A web app must have a manifest to be a PWA. -->
+  <link rel="manifest" href="/dist2/manifest.json" />
+
+  <!-- light mode and dark mode CSS -->
+  <link rel="stylesheet" media="(prefers-color-scheme:light)"
+    href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.16.0/dist/themes/light.css">
+  <link rel="stylesheet" media="(prefers-color-scheme:dark)"
+    href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.16.0/dist/themes/dark.css"
+    onload="document.documentElement.classList.add('sl-theme-dark');">
+
+
+  <script type="module" crossorigin src="/dist2/code/index-COc6jZBc.js"></script>
+  <link rel="stylesheet" crossorigin href="/dist2/code/index-DkYRBo1e.css">
+</head>
+
+<body>
+  <!-- Our app-index web component. This component is defined in src/pages/app-index.ts-->
+  <app-index></app-index>
+
+  <script>
+    if ('serviceWorker' in navigator) {
+      window.onload = () => {
+        navigator.serviceWorker.register(
+          '/sw.js'
+        );
+      }
+    }
+  </script>
+</body>
+
+</html>

dist2/manifest.json

@@ -0,0 +1,86 @@
+{
+  "id": "/",
+  "scope": "/",
+  "name": "fostr",
+  "display": "standalone",
+  "start_url": "/",
+  "short_name": "starter",
+  "theme_color": "#E1477E",
+  "description": "This is a fostr app",
+  "orientation": "any",
+  "background_color": "#E1477E",
+  "related_applications": [],
+  "prefer_related_applications": false,
+  "display_override": ["window-controls-overlay"],
+  "launch_handler": {
+    "client_mode": "focus-existing"
+  },
+  "icons": [
+    {
+      "src": "assets/icons/512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/48x48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/24x24.png",
+      "sizes": "24x24",
+      "type": "image/png"
+    }
+  ],
+  "screenshots": [
+    {
+      "src": "assets/screenshots/screen.png",
+      "sizes": "1617x1012",
+      "type": "image/png"
+    }
+  ],
+  "features": [
+    "Cross Platform",
+    "fast",
+    "simple"
+  ],
+  "categories": [
+    "social"
+  ],
+  "shortcuts": [
+    {
+      "name": "Open About",
+      "short_name": "About",
+      "description": "Open the about page",
+      "url": "/about",
+      "icons": [{ "src": "assets/icons/192x192.png", "sizes": "192x192" }]
+    }
+  ],
+  "widgets": [
+    {
+      "name": "Starter Widget",
+      "tag": "starterWidget",
+      "ms_ac_template": "widget/ac.json",
+      "data": "widget/data.json",
+      "description": "A simple widget example from pwa-starter.",
+      "screenshots": [
+        {
+          "src": "assets/screenshots/widget-screen.png",
+          "sizes": "500x500",
+          "label": "Widget screenshot"
+        }
+      ],
+      "icons": [
+        {
+          "src": "assets/icons/48x48.png",
+          "sizes": "48x48"
+        }
+      ]
+    }
+  ]
+}

dist2/staticwebapp.config.json

@@ -0,0 +1,6 @@
+{
+  "navigationFallback": {
+    "rewrite": "index.html",
+    "exclude": ["*.{css,js,mjs,ts,png,gif,ico,jpg,svg,json,woff2,ttf}"]
+  }
+}

dist2/sw.js

@@ -0,0 +1,2 @@
+importScripts("https://storage.googleapis.com/workbox-cdn/releases/7.3.0/workbox-sw.js");self.addEventListener("widgetinstall",t=>{t.waitUntil(e(t))});self.addEventListener("widgetresume",t=>{t.waitUntil(e(t))});self.addEventListener("widgetclick",t=>{t.action=="updateName"&&t.waitUntil(s(t))});self.addEventListener("widgetuninstall",t=>{});const e=async t=>{const a=t.widget.definition,i={template:JSON.stringify(await(await fetch(a.msAcTemplate)).json()),data:JSON.stringify(await(await fetch(a.data)).json())};await self.widgets.updateByInstanceId(t.instanceId,i)},s=async t=>{const a=t.data.json().name,i=t.widget.definition,n={template:JSON.stringify(await(await fetch(i.msAcTemplate)).json()),data:JSON.stringify({name:a})};await self.widgets.updateByInstanceId(t.instanceId,n)};workbox.precaching.precacheAndRoute([{"revision":"fe970448513b18d0c37b4b671ca94a06","url":"assets/icons/192x192.png"},{"revision":"5b1c195400df0f16c3f6cb2aa4665622","url":"assets/icons/24x24.png"},{"revision":"c3f013b68eae92565e8337ee50472cdc","url":"assets/icons/48x48.png"},{"revision":"e2a009c0f6aaa11d03a8e0728869b583","url":"assets/icons/512x512.png"},{"revision":"d1e55c63934b5f79f366bf723605bc26","url":"assets/icons/casto_kingdom.png"},{"revision":"a80ffffb8d3a555b25a0f19a0a9878f1","url":"assets/icons/icon_192.png"},{"revision":"04fa5b0f5827d885b678f0d131406aab","url":"assets/icons/icon_24.png"},{"revision":"3dbd388868265c8498acfe676ef27811","url":"assets/icons/icon_48.png"},{"revision":"414aacb61ad294e75f267554db7e9368","url":"assets/icons/icon_512.png"},{"revision":"67906584562cfe06b57d99c15a470a8d","url":"assets/img/default_pfp.png"},{"revision":"ee332fabed8b56f4aae86902c18146a2","url":"assets/readme/build-output.png"},{"revision":"be7f5a61d03a119f2e297d15df7dfab2","url":"assets/readme/codespace-button.png"},{"revision":"969196419238157c3d673545c2daed32","url":"assets/readme/copy-starter.png"},{"revision":"65897273261e49c6c9148df875e13e4d","url":"assets/readme/git-clone.png"},{"revision":"cd10ec0be4be4b10195986d075904542","url":"assets/readme/intro.png"},{"revision":"1b40f28a11a334cc90e6802070b9eae1","url":"assets/readme/local-button.png"},{"revision":"184b8b88c43aa759948968f69251200e","url":"assets/readme/new-repo-from-starter.png"},{"revision":"a5a5ef96823c312160626df383d0925d","url":"assets/readme/pwa-running.png"},{"revision":"480b506d1a2a832131525fd4d0fd7478","url":"assets/readme/pwa-starter-overview.png"},{"revision":"865934771530a3b8f9e10aae8d0423d9","url":"assets/readme/static-web-app-slash.png"},{"revision":"2d67dfcbdc3c8c6f8b5fefcd0016021f","url":"assets/readme/use-this-template.png"},{"revision":"fc3d41a79144a5bb00a423b78ec73c1f","url":"assets/readme/vscode-in-browser.png"},{"revision":"808ac8889e4c17f3f83fd9235f1aa28d","url":"assets/screenshots/screen.png"},{"revision":"bd2d64ab3b867df1017d43ec20b73cca","url":"assets/screenshots/widget-screen.png"},{"revision":null,"url":"code/app-about-BGKiJfUr.js"},{"revision":null,"url":"code/app-write-DLE2Mxxa.js"},{"revision":null,"url":"code/index-CBloBB_n.js"},{"revision":null,"url":"code/index-COc6jZBc.js"},{"revision":null,"url":"code/index-DkYRBo1e.css"},{"revision":"f5266149bb7950e2721802c8a674af23","url":"index.html"},{"revision":"288b15a933c65f7ad15d8d4567d18212","url":"manifest.json"},{"revision":"b1a4910d7cbaa47fcc8f72ecb2028ff1","url":"staticwebapp.config.json"},{"revision":"a7591c595c4a231a1f67943e58f3d6eb","url":"widget/ac.json"},{"revision":"a70ebb50d5f5ab6a37f24795e292547d","url":"widget/data.json"}]||[]);
+//# sourceMappingURL=sw.js.map

dist2/sw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../public/sw.js"],"names":["event","updateWidget","updateName","widgetDefinition","payload","name"],"mappings":"AAAA,cACI,yEACJ,EAMA,KAAK,iBAAiB,gBAAkB,GAAU,CAC9C,EAAM,UAAU,EAAa,CAAK,CAAC,CACvC,CAAC,EAGD,KAAK,iBAAiB,eAAiB,GAAU,CAC7C,EAAM,UAAU,EAAa,CAAK,CAAC,CACvC,CAAC,EAID,KAAK,iBAAiB,cAAgB,GAAU,CAC5C,EAAM,QAAU,cAChB,EAAM,UAAU,EAAW,CAAK,CAAC,CAErC,CAAC,EAID,KAAK,iBAAiB,kBAAoB,GAAU,CAAA,CAAE,EAEtD,MAAM,EAAe,MAAO,GAAU,CAElC,MAAM,EAAmB,EAAM,OAAO,WAGhC,EAAU,CACZ,SAAU,KAAK,UAAU,MAAO,MAAM,MAAM,EAAiB,YAAY,GAAG,MAAM,EAClF,KAAM,KAAK,UAAU,MAAO,MAAM,MAAM,EAAiB,IAAI,GAAG,MAAM,CACzE,EAGD,MAAM,KAAK,QAAQ,mBAAmB,EAAM,WAAY,CAAO,CACnE,EAEM,EAAa,MAAO,GAAU,CAChC,MAAM,EAAO,EAAM,KAAK,KAAM,EAAC,KAGzB,EAAmB,EAAM,OAAO,WAGhC,EAAU,CACZ,SAAU,KAAK,UAAU,MAAO,MAAM,MAAM,EAAiB,YAAY,GAAG,MAAM,EAClF,KAAM,KAAK,UAAU,CAAC,KAAA,CAAI,CAAC,CAC9B,EAGD,MAAM,KAAK,QAAQ,mBAAmB,EAAM,WAAY,CAAO,CACnE,EAEA,QAAQ,WAAW,iBAAiB,+mFAAK,eAAiB,CAAA,CAAE","file":"sw.js","sourcesContent":["importScripts(\n    'https://storage.googleapis.com/workbox-cdn/releases/7.3.0/workbox-sw.js'\n);\n\n// This is your Service Worker, you can put any of your custom Service Worker\n// code in this file, above the `precacheAndRoute` line.\n\n// When widget is installed/pinned, push initial state.\nself.addEventListener('widgetinstall', (event) => {\n    event.waitUntil(updateWidget(event));\n});\n\n// When widget is shown, update content to ensure it is up-to-date.\nself.addEventListener('widgetresume', (event) => {\n    event.waitUntil(updateWidget(event));\n});\n\n// When the user clicks an element with an associated Action.Execute,\n// handle according to the 'verb' in event.action.\nself.addEventListener('widgetclick', (event) => {\nif (event.action == \"updateName\") {\n    event.waitUntil(updateName(event));\n}\n});\n\n// When the widget is uninstalled/unpinned, clean up any unnecessary\n// periodic sync or widget-related state.\nself.addEventListener('widgetuninstall', (event) => {});\n\nconst updateWidget = async (event) => {\n// The widget definition represents the fields specified in the manifest.\n    const widgetDefinition = event.widget.definition;\n\n    // Fetch the template and data defined in the manifest to generate the payload.\n    const payload = {\n        template: JSON.stringify(await (await fetch(widgetDefinition.msAcTemplate)).json()),\n        data: JSON.stringify(await (await fetch(widgetDefinition.data)).json()),\n    };\n\n    // Push payload to widget.\n    await self.widgets.updateByInstanceId(event.instanceId, payload);\n}\n\nconst updateName = async (event) => {\n    const name = event.data.json().name;\n\n    // The widget definition represents the fields specified in the manifest.\n    const widgetDefinition = event.widget.definition;\n\n    // Fetch the template and data defined in the manifest to generate the payload.\n    const payload = {\n        template: JSON.stringify(await (await fetch(widgetDefinition.msAcTemplate)).json()),\n        data: JSON.stringify({name}),\n    };\n\n    // Push payload to widget.\n    await self.widgets.updateByInstanceId(event.instanceId, payload);\n}\n\nworkbox.precaching.precacheAndRoute(self.__WB_MANIFEST || []);"]}

dist2/widget/ac.json

@@ -0,0 +1,24 @@
+{
+    "type": "AdaptiveCard",
+    "body": [
+        {
+            "type": "TextBlock",
+            "text": "Hello ${$root.name}!",
+            "wrap": true,
+            "horizontalAlignment": "Center",
+            "size": "ExtraLarge"
+        },
+        {
+            "type": "Input.Text",
+            "placeholder": "Name",
+            "id": "name",
+            "inlineAction": {
+                "type": "Action.Execute",
+                "verb": "updateName",
+                "title": "Submit"
+            }
+        }
+    ],
+    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
+    "version": "1.6"
+  }

dist2/widget/data.json

@@ -0,0 +1,3 @@
+{
+    "name": "Widget"
+  }

src/components/header.ts

@@ -2,7 +2,6 @@ import { LitElement, css, html } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
 import { resolveRouterPath } from '../router';
 import { Relay } from 'nostr-tools';
-import { WindowNostr } from 'nostr-tools/nip07';
 
 import '@shoelace-style/shoelace/dist/components/button/button.js';
 @customElement('app-header')

src/pages/app-about/app-about.ts

@@ -29,15 +29,15 @@ export class AppAbout extends LitElement {
           <p>
           This is a personal micro-social media client that can be installed to
           your desktop or smartphone home screen. You can sign in via an extension
-          to display your profile data and notes from preprogrammed relays. You
+          to display your profile data and notes from my relay. You
-          can compose a letter to me using a rich text editor I built with Prosemirror.
+          can compose a note using a rich text editor I built with Prosemirror.
           </p>
 
 
 
           <h3>How do I install this on my home screen?</h3>
-          <p>Look for "Add to Home Screen" in your browser toolbar and
+          <p>Look for "Add to Home Screen" in your browser toolbar
-          to save it to your homescreen. </p>
+          to install it to your homescreen. </p>
 
            <h3>What is Nostr?</h3>
           <p>Notes and Other Stuff Transmitted Over Relays is a simple open source

src/pages/app-home.ts

@@ -22,7 +22,7 @@ export class AppHome extends LitElement {
 
   // For more information on using properties and state in lit
   // check out this link https://lit.dev/docs/components/properties/
-  @property() message = 'Welcome to my nostr demo!';
+  @property() message = 'Welcome to my demo!';
   @property({ type: String }) nostrAddy = '';
   @property({ type: String }) bio = '';
   @property({ type: String }) profilePic = '';
@@ -55,7 +55,7 @@ Profile Picture Container
 */
 .profile-picture-container {
   display: grid;
-  grid-template-columns: 300px 150px;
+  grid-template-columns: 400px 200px;
   grid-template-rows: 250px;
   grid-column-gap: 15px;
   margin-bottom: 12px;
@@ -68,20 +68,21 @@ Profile Picture Container
 
 .profile-pic {
   grid-area: 1/1;
-  margin-top: 10px;
+  margin-top: 25px;
+  margin-left: 100px;
   margin-bottom: 10px;
   border-radius: 50%;
 }
 
 .personal-msg {
   grid-area: 1/2;
-  margin-top: 300px;
+  align-content: center;
+  align-items: center;
 }
 
 
 
-.pics-videos {
+.nav-button-container {
-  grid-area: 1/1;
   justify-self: center;
   align-self: end;
 }
@@ -171,9 +172,9 @@ Profile Picture Container
   share() {
     if ((navigator as any).share) {
       (navigator as any).share({
-        title: 'PWABuilder pwa-starter',
+        title: 'A MiggyMofongo Project',
-        text: 'Check out the PWABuilder pwa-starter!',
+        text: 'This is a personal progressive social web app',
-        url: 'https://github.com/pwa-builder/pwa-starter',
+        url: 'https://miguelalmodo.com/dist2',
       });
     }
   }
@@ -192,9 +193,9 @@ Profile Picture Container
               <h2>Welcome to  ${this.nostrAddy || 'Guest'}'s Profile</h2>
             </div>
             <p>
-              You can use the Nostr protocol to transform your personal website into
+              You can upgrade your website into
-              a micro blog client. You can compose a note and post it to your social
+              a micro blog client with a social protocol to do things
-              network.
+              like browse a feed, compose a note, or post to your network.
 
             </p>
 
@@ -205,18 +206,20 @@ Profile Picture Container
               <p class="personal-msg"><b>${this.bio || 'Welcome, guest! Please sign in to view your profile.'}</b></p>
 
             </div>
-
+<div class="nav-button-container">
+          <sl-button href="${resolveRouterPath('about')}" variant="primary">About this Web App</sl-button>
+          <sl-button href="${resolveRouterPath('note-wall')}" variant="primary">Feed</sl-button>
+          <sl-button href="${resolveRouterPath('write')}" variant="primary">Compose a Note</sl-button>
+</div>
             ${'share' in navigator
               ? html`<sl-button slot="footer" variant="default" @click="${this.share}">
                         <sl-icon slot="prefix" name="share"></sl-icon>
-                        Share this Starter!
+                        Share this personal website with a friend!
                       </sl-button>`
               : null}
           </sl-card>
 
-          <sl-button href="${resolveRouterPath('about')}" variant="primary">Navigate to About</sl-button>
+
-          <sl-button href="${resolveRouterPath('note-wall')}" variant="primary">Navigate to Note Wall</sl-button>
-         <sl-button href="${resolveRouterPath('write')}" variant="primary">Navigate to Note Compose</sl-button>
 
          </div>
       </main>

src/pages/app-write/app-write.ts

@@ -154,7 +154,7 @@ export class AppWrite extends LitElement {
   all: unset; /* Remove inherited or conflicting styles */
   font-weight: bold;
   text-transform: uppercase;
-  color: red; /* Add a visible color for debugging */
+  color: red;
 }
 
 		`
@@ -172,14 +172,29 @@ private initializeEditor() {
 			console.error('Editor container not here');
 			return
 		}
- 	const doc = customSchema.nodes.doc.createAndFill();
+		const initialContent = customSchema.nodes.doc.createAndFill([
-	  if (!doc) {
+			customSchema.nodes.paragraph.create(
+				null,
+				customSchema.text("Welcome to the editor! Try typing here.")
+			),
+			customSchema.nodes.paragraph.create(
+				null,
+				customSchema.text("Press Ctrl+Space to insert a ⭐.")
+			),
+			customSchema.nodes.paragraph.create(
+				null,
+				customSchema.text("Highlight text and press Ctrl+B to SHOUT it!")
+			),
+		]);
+
+
+	  if (!initialContent) {
 		console.error("failed to create initial document")
 		return;
 	}
 
 	const state = EditorState.create({
-    	doc,
+    	doc: initialContent,
     	plugins: [
 			menuPlugin,
 			history(),
@@ -243,14 +258,15 @@ private initializeEditor() {
 
 
 
-			<h3>Basic Intructions</h3>
+			<h3>Instructions</h3>
-			<p>click inside the white text area to highlight with your cursor.
+			<p>Click inside the white text area to highlight with your cursor.
-			You can type and press enter to insert a new block below.
+			You can type and press enter to insert a new block below.</p>
 			<br>
-			Highlight a piece of text, then CTRL+X to cut and CTRL+V to paste.<br>
+			<p>Try to highlight a piece of text, then CTRL+X to cut and
-			Press Ctrl+Space to add a yellow star to the document. Press
+			CTRL+V to paste.</p><br>
-			Ctrl+B over a highlighted selection to add the "shouting" mark, making
+			<p>Press Ctrl+Space to add a yellow star to the document. </p>
-			it all caps and red.</p>
+			<p>Press Ctrl+B over a highlighted selection to add a "shouting"
+			mark and format it all caps and red.</p>
 
 </sl-card>
 <sl-card>