Merge pull request #2791 from omnivore-app/feat/web-pwa-share-debugging

Make a test page for debuging the PWA share extension

apple/OmnivoreKit/Sources/Views/Colors/ThemeColors.xcassets/_lightGray.colorset/Contents.json

@@ -5,9 +5,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0x68",
-          "green" : "0x69",
-          "red" : "0x69"
+          "blue" : "0x89",
+          "green" : "0x89",
+          "red" : "0x89"
         }
       },
       "idiom" : "universal"
@@ -23,9 +23,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0x68",
-          "green" : "0x69",
-          "red" : "0x69"
+          "blue" : "0x89",
+          "green" : "0x89",
+          "red" : "0x89"
         }
       },
       "idiom" : "universal"

packages/api/src/utils/usernamePolicy.ts

@@ -42,6 +42,7 @@ const RESERVED_NAMES = new Set([
   'contact',
   'create',
   'delete',
+  '_debug',
   'discover',
   'direct_messages',
   'documentation',

packages/web/pages/_debug/pwa-share.tsx

@@ -0,0 +1,51 @@
+import { Button } from '../../components/elements/Button'
+import {
+  BorderedFormInput,
+  FormLabel,
+} from '../../components/elements/FormElements'
+import { SpanBox, VStack } from '../../components/elements/LayoutPrimitives'
+import { StyledText } from '../../components/elements/StyledText'
+import { webBaseURL } from '../../lib/appConfig'
+
+export default function DebugShareTarget(): JSX.Element {
+  return (
+    <form action={`${webBaseURL}/share-target`} method="POST">
+      <VStack
+        alignment="center"
+        css={{
+          padding: '16px',
+          background: 'white',
+          minWidth: '340px',
+          width: '70vw',
+          maxWidth: '576px',
+          borderRadius: '8px',
+          border: '1px solid #3D3D3D',
+          boxShadow: '#B1B1B1 9px 9px 9px -9px',
+        }}
+      >
+        <StyledText style="subHeadline" css={{ color: '$omnivoreGray' }}>
+          Debug the share-target PWA feature
+        </StyledText>
+        <VStack
+          css={{ width: '100%', minWidth: '320px', gap: '16px', pb: '16px' }}
+        >
+          <SpanBox css={{ width: '100%' }}>
+            <FormLabel>URL</FormLabel>
+            <BorderedFormInput
+              key="url"
+              type="url"
+              name="url"
+              placeholder="URL"
+              autoFocus={true}
+              css={{ bg: 'white', color: 'black' }}
+            />
+          </SpanBox>
+        </VStack>
+
+        <Button type="submit" style="ctaDarkYellow" css={{ my: '$2' }}>
+          Submit
+        </Button>
+      </VStack>
+    </form>
+  )
+}

packages/web/pages/debug.tsx

@@ -1,4 +0,0 @@
-// TODO: implement page
-export default function DebugPage(): JSX.Element {
-  return <p>unimplemented</p>
-}

packages/web/public/sw.js

@@ -99,7 +99,6 @@
       .then(function (response) {
         if (response.status === 200) {
           return response.json().then((responseJson) => {
-            const url = encodeURIComponent(responseJson.url)
             return currentOrigin + '/article?url=' + url
           })
         }
@@ -132,12 +131,11 @@
 
   function handleFetchRequest(ev) {
     const request = ev.request
-
     if (request.method === 'POST') {
       const requestUrl = new URL(request.url)
       if (requestUrl.pathname === '/share-target') {
         const shareRequest = handleShareTarget(request)
-        ev.respondWith(shareRequest)
+        return shareRequest
       }
     }