Merge branch 'master' of https://github.com/plebbit/plebchan

.github/workflows/release.yml

@@ -11,7 +11,7 @@ on:
 
 jobs:
   linux:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     permissions:
       contents: write
     steps:
@@ -34,7 +34,7 @@ jobs:
       - run: node scripts/release-body > release-body.txt
       - uses: ncipollo/release-action@v1
         with:
-          artifacts: 'dist/plebchan*.AppImage,dist/plebchan-html*.zip'
+          artifacts: 'dist/plebchan-linux*.AppImage,dist/plebchan-html*.zip'
           token: ${{ secrets.GITHUB_TOKEN }}
           replacesArtifacts: true
           bodyFile: "release-body.txt"
@@ -69,7 +69,7 @@ jobs:
       - run: node scripts/release-body > release-body.txt
       - uses: ncipollo/release-action@v1
         with:
-          artifacts: 'dist/plebchan*.dmg'
+          artifacts: 'dist/plebchan-mac*.dmg'
           token: ${{ secrets.GITHUB_TOKEN }}
           replacesArtifacts: true
           bodyFile: "release-body.txt"
@@ -88,7 +88,7 @@ jobs:
       - uses: actions/setup-node@v2
         with:
           node-version: 18
-      - run: yarn install --frozen-lockfile
+      - run: yarn install --frozen-lockfile --network-timeout 100000 --network-concurrency 1
       - run: yarn build
       - run: yarn electron:build:windows
       - run: dir dist
@@ -97,7 +97,7 @@ jobs:
       - run: node scripts/release-body > release-body.txt
       - uses: ncipollo/release-action@v1
         with:
-          artifacts: 'dist/plebchan*.exe'
+          artifacts: 'dist/plebchan-windows*.exe'
           token: ${{ secrets.GITHUB_TOKEN }}
           replacesArtifacts: true
           bodyFile: "release-body.txt"
@@ -142,14 +142,14 @@ jobs:
       # to create keystore: keytool -genkey -v -keystore plebbit.keystore -keyalg RSA -keysize 2048 -validity 10000 -alias release
       - run: cd android/app/build/outputs/apk/release && apksigner sign --ks ../../../../../plebbit.keystore --ks-pass pass:${{ secrets.PLEBBIT_REACT_KEYSTORE_PASSWORD }} --ks-key-alias release --out app-release-signed.apk app-release-unsigned-zip.apk
       # move apk to dist folder
-      - run: mkdir -p dist && mv android/app/build/outputs/apk/release/app-release-signed.apk dist/plebchan-$(node -e "console.log(require('./package.json').version)").apk
+      - run: mkdir -p dist && mv android/app/build/outputs/apk/release/app-release-signed.apk dist/plebchan-android-$(node -e "console.log(require('./package.json').version)").apk
       - run: ls dist
 
       # publish version release
       - run: node scripts/release-body > release-body.txt
       - uses: ncipollo/release-action@v1
         with:
-          artifacts: 'dist/plebchan*.apk'
+          artifacts: 'dist/plebchan-android*.apk'
           token: ${{ secrets.GITHUB_TOKEN }}
           replacesArtifacts: true
           bodyFile: "release-body.txt"

README.md

@@ -2,14 +2,18 @@
 
 _Telegram group for this repo https://t.me/plebchanreact_
 
-_Web client https://plebchan.eth.limo_
-
 # Plebchan
 
 Plebchan is a serverless, adminless, decentralized 4chan alternative where any pleb can create and own unlimited boards. All data comes from the Plebbit protocol, it's all text including links from which media is embedded, shared peer-to-peer. Users do not need to register an account before participating in the community.
 
-### How to create a board
+- web version: https://plebchan.app, also available using Brave/IPFS Companion on https://plebchan.eth
-In the plebbit protocol, a plebchan board is called a _subplebbit_. To run a subplebbit, you can currently choose between two options:
+
+### Downloads
+- desktop version (full p2p plebbit node, seeds automatically): available for Mac/Windows/Linux, [download link in the release page](https://github.com/plebbit/plebchan/releases/latest)
+- mobile version: available for Android, [download link in the release page](https://github.com/plebbit/plebchan/releases/latest)
+
+## How to create a board
+In the plebbit protocol, a plebchan board is called a _subplebbit_. To run a subplebbit, you can choose between two options:
 
 1. If you prefer to use a **GUI**, download the desktop version of the Seedit client, available for Windows, MacOS and Linux: [latest release](https://github.com/plebbit/seedit/releases/latest). Create a subplebbit using using the familiar old.reddit-like UI, and modify its settings to your liking. The app runs an IPFS node, meaning you have to keep it running to have your board online.
 2. If you prefer to use a **command line interface**, install plebbit-cli, available for Windows, MacOS and Linux: [latest release](https://github.com/plebbit/plebbit-cli/releases/latest). Follow the instructions in the readme of the repo. When running the daemon for the first time, it will output WebUI links you can use to manage your subplebbit with the ease of the GUI.

electron/main.js

@@ -8,7 +8,7 @@ import startIpfs from './start-ipfs.js';
 import './start-plebbit-rpc.js';
 import { URL, fileURLToPath } from 'node:url';
 import contextMenu from 'electron-context-menu';
-import packageJson from '../package.json' assert { type: 'json' };
+import packageJson from '../package.json' with { type: 'json' };
 const dirname = path.join(path.dirname(fileURLToPath(import.meta.url)));
 
 let startIpfsError;

electron/start-plebbit-rpc.js

@@ -2,7 +2,7 @@ import tcpPortUsed from 'tcp-port-used';
 import EnvPaths from 'env-paths';
 import { randomBytes } from 'crypto';
 import fs from 'fs-extra';
-import PlebbitRpc from '@plebbit/plebbit-js/dist/node/rpc/src/index.js';
+import PlebbitRpc from '@plebbit/plebbit-js/rpc';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import isDev from 'electron-is-dev';
@@ -14,7 +14,7 @@ const port = 9138;
 const defaultPlebbitOptions = {
   // find the user's OS data path
   dataPath: !isDev ? envPaths.data : path.join(dirname, '..', '.plebbit'),
-  ipfsHttpClientsOptions: ['http://localhost:50019/api/v0'],
+  kuboRpcClientsOptions: [{ url: 'http://localhost:50019/api/v0' }],
   httpRoutersOptions: ['https://routing.lol', 'https://peers.pleb.bot', 'https://peers.plebpubsub.xyz', 'https://peers.forumindex.com'],
 };
 

index.html

@@ -8,36 +8,12 @@
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="serverless, adminless, decentralized 4chan alternative" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
     <link rel="manifest" href="/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-
     <title>plebchan</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <script type="module" src="/src/index.tsx"></script>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>

package.json

@@ -8,7 +8,7 @@
   "dependencies": {
     "@capacitor/app": "6.0.1",
     "@floating-ui/react": "0.26.1",
-    "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#54cf36c50dd31f5641a9475f5566b7b29b3873c7",
+    "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#f760ce2f5961307c93517fed0257b425bbf38c30",
     "@react-spring/web": "9.7.5",
     "@testing-library/jest-dom": "5.14.1",
     "@testing-library/react": "13.0.0",
@@ -31,18 +31,19 @@
     "lodash": "4.17.21",
     "memoizee": "0.4.15",
     "prettier": "3.0.3",
-    "react": "19.0.0",
+    "react": "19.1.0",
-    "react-dom": "19.0.0",
+    "react-dom": "19.1.0",
     "react-i18next": "13.2.2",
     "react-markdown": "8.0.6",
     "react-router-dom": "6.16.0",
     "react-router-hash-link": "2.4.3",
     "react-virtuoso": "4.12.3",
+    "rehype-raw": "7.0.0",
     "rehype-sanitize": "5.0.1",
     "remark-gfm": "3.0.1",
     "remark-supersub": "1.0.0",
     "tcp-port-used": "1.0.2",
-    "typescript": "5.2.2",
+    "typescript": "5.1.6",
     "zustand": "4.4.3"
   },
   "scripts": {
@@ -56,16 +57,16 @@
     "electron:no-delete-data": "yarn electron:before:download-ipfs && electron .",
     "electron:start": "concurrently \"cross-env BROWSER=none yarn start\" \"wait-on http://localhost:3000 && yarn electron\"",
     "electron:start:no-delete-data": "concurrently \"cross-env BROWSER=none yarn start\" \"wait-on http://localhost:3000 && yarn electron:no-delete-data\"",
-    "electron:build:linux": "electron-builder build --publish never -l",
+    "electron:build:linux": "yarn build && electron-rebuild && electron-builder build --publish never -l",
-    "electron:build:windows": "electron-builder build --publish never -w",
+    "electron:build:windows": "yarn build && yarn electron-rebuild && electron-builder build --publish never -w",
-    "electron:build:mac": "electron-builder build --publish never -m",
+    "electron:build:mac": "yarn build && yarn electron-rebuild && electron-builder build --publish never -m",
-    "electron:before": "yarn electron:before:download-ipfs && yarn electron:before:delete-data",
+    "electron:before": "yarn electron-rebuild && yarn electron:before:download-ipfs && yarn electron:before:delete-data",
     "electron:before:download-ipfs": "node electron/download-ipfs",
     "electron:before:delete-data": "rimraf .plebbit",
     "android:build:icons": "cordova-res android --skip-config --copy --resources /tmp/plebbit-react-android-icons --icon-source ./android/icons/icon.png --splash-source ./android/icons/splash.png --icon-foreground-source ./android/icons/icon-foreground.png --icon-background-source '#ffffee'",
     "prettier": "prettier {src,electron}/**/*.{js,ts,tsx} --write",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
-    "android:build": "yarn build && npx cap sync android && npx cap open android"
+    "android:build": "yarn build && npx cap sync android && npx cap run android"
   },
   "browserslist": {
     "production": [
@@ -85,9 +86,10 @@
     "@capacitor/android": "5.0.0",
     "@capacitor/cli": "5.0.0",
     "@capacitor/core": "5.0.0",
+    "@electron/rebuild": "4.0.0",
     "@types/memoizee": "0.4.9",
-    "@typescript-eslint/eslint-plugin": "8.26.0",
+    "@typescript-eslint/eslint-plugin": "8.29.0",
-    "@typescript-eslint/parser": "8.26.0",
+    "@typescript-eslint/parser": "8.29.0",
     "@vitejs/plugin-react": "4.3.4",
     "assert": "2.1.0",
     "babel-plugin-react-compiler": "19.0.0-beta-40c6c23-20250301",
@@ -99,9 +101,8 @@
     "crypto-browserify": "3.12.1",
     "cz-conventional-changelog": "3.3.0",
     "decompress": "4.2.1",
-    "electron": "28.2.3",
+    "electron": "36.0.0",
     "electron-builder": "24.13.2",
-    "electron-rebuild": "3.2.9",
     "eslint": "8.56.0",
     "eslint-config-react-app": "7.0.1",
     "eslint-plugin-react": "7.37.4",

scripts/release-body.js

@@ -12,13 +12,10 @@ let releaseChangelog =
 // format
 releaseChangelog = releaseChangelog.trim().replace(/\n\n+/g, '\n\n')
 
-const releaseBody = `Progressive web app mirrors:
+const releaseBody = `- Web app: https://plebchan.app
-- https://plebchan.eth.limo
+- Mobile app: available for Android. Download link under "Assets" ⬇️
-- https://plebchan.eth.link
+- Desktop app (full P2P node, run your own community): available for Mac/Windows/Linux. Download links under "Assets" ⬇️
-- https://cloudflare-ipfs.com/ipns/plebchan.eth (insecure, no subdomain isolation)
+- Command Line Interface (full P2P node, run your own community): https://github.com/plebbit/plebbit-cli/releases/latest
-
-CLI client:
-- https://github.com/plebbit/plebbit-cli/releases/latest
 
 ${releaseChangelog}`
 

src/components/catalog-row/catalog-row.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Link, useLocation, useParams } from 'react-router-dom';
 import { useFloating, offset, size, autoUpdate, Placement } from '@floating-ui/react';
 import { Comment } from '@plebbit/plebbit-react-hooks';
-import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
+import Plebbit from '@plebbit/plebbit-js';
 import { shouldShowSnow } from '../../lib/snow';
 import { getHasThumbnail } from '../../lib/utils/media-utils';
 import { getFormattedTimeAgo } from '../../lib/utils/time-utils';

src/components/markdown/markdown.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import ReactMarkdown from 'react-markdown';
+import ReactMarkdown, { Components } from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import supersub from 'remark-supersub';
 import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
+import rehypeRaw from 'rehype-raw';
 import { useDismiss, useFloating, useFocus, useHover, useInteractions, offset, shift, size, autoUpdate, Placement, FloatingPortal } from '@floating-ui/react';
 import { getLinkMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
 import { isCatalogView } from '../../lib/utils/view-utils';
@@ -19,6 +20,10 @@ interface ContentLinkEmbedProps {
   linkMediaInfo: any;
 }
 
+interface ExtendedComponents extends Components {
+  spoiler: React.ComponentType<{ children: React.ReactNode }>;
+}
+
 const ContentLinkEmbed = ({ children, href, linkMediaInfo }: ContentLinkEmbedProps) => {
   const { t } = useTranslation();
   const isMobile = useIsMobile();
@@ -125,50 +130,22 @@ const blockquoteToGreentext = () => (tree: any) => {
   });
 };
 
-const spoilerToDiv = () => (tree: any) => {
+const spoilerTransform = () => (tree: any) => {
-  tree.children.forEach((node: any) => {
+  const visit = (node: any) => {
-    if (node.type === 'paragraph') {
+    if (node.tagName === 'spoiler') {
-      const text = node.children.map((child: any) => child.value).join('');
+      node.tagName = 'span';
-      if (text.includes('§§SPOILER_START§§')) {
+      node.properties = node.properties || {};
-        node.type = 'span';
+      node.properties.className = 'spoilertext';
-        node.data = {
-          hName: 'span',
-        };
-        node.children.forEach((child: any) => {
-          if (child.type === 'text') {
-            const parts = child.value.split(/(§§SPOILER_START§§.*?§§SPOILER_END§§)/);
-            if (parts.length > 1) {
-              const newChildren = parts.map((part: string) => {
-                const spoilerMatch = part.match(/§§SPOILER_START§§(.*?)§§SPOILER_END§§/);
-                if (spoilerMatch) {
-                  return {
-                    type: 'span',
-                    data: {
-                      hName: 'span',
-                      hProperties: {
-                        className: 'spoilertext',
-                      },
-                    },
-                    children: [
-                      {
-                        type: 'text',
-                        value: spoilerMatch[1],
-                      },
-                    ],
-                  };
-                }
-                return {
-                  type: 'text',
-                  value: part,
-                };
-              });
-              node.children = newChildren;
-            }
-          }
-        });
-      }
     }
-  });
+
+    if (node.children) {
+      node.children.forEach(visit);
+    }
+  };
+
+  if (tree.children) {
+    tree.children.forEach(visit);
+  }
 };
 
 interface MarkdownProps {
@@ -177,33 +154,29 @@ interface MarkdownProps {
 }
 
 const Markdown = ({ content, title }: MarkdownProps) => {
-  const preprocessedContent = useMemo(() => {
-    if (!content) return '';
-    return content.replace(/<spoiler>([^<]*)<\/spoiler>/g, '§§SPOILER_START§§$1§§SPOILER_END§§').replace(/<img[^>]*src=['"]([^'"]+)['"][^>]*>/gi, '$1');
-  }, [content]);
-
   const remarkPlugins: any[] = [[supersub]];
 
-  if (preprocessedContent && preprocessedContent.length <= MAX_LENGTH_FOR_GFM) {
+  if (content && content.length <= MAX_LENGTH_FOR_GFM) {
     remarkPlugins.push([remarkGfm, { singleTilde: false }]);
   }
 
+  remarkPlugins.push([blockquoteToGreentext]);
+  remarkPlugins.push([spoilerTransform]);
+
   const customSchema = useMemo(
     () => ({
       ...defaultSchema,
-      tagNames: [...(defaultSchema.tagNames || []), 'div', 'span'],
+      tagNames: [...(defaultSchema.tagNames || []), 'div', 'span', 'spoiler'],
       attributes: {
         ...defaultSchema.attributes,
         div: ['className'],
         span: ['className'],
+        spoiler: [],
       },
     }),
     [],
   );
 
-  remarkPlugins.push([blockquoteToGreentext]);
-  remarkPlugins.push([spoilerToDiv]);
-
   const isInCatalogView = isCatalogView(useLocation().pathname, useParams());
 
   return (
@@ -215,44 +188,47 @@ const Markdown = ({ content, title }: MarkdownProps) => {
         </span>
       )}
       <ReactMarkdown
-        children={preprocessedContent}
+        children={content}
         remarkPlugins={remarkPlugins}
-        rehypePlugins={[[rehypeSanitize, customSchema]]}
+        rehypePlugins={[[rehypeRaw as any], [rehypeSanitize, customSchema]]}
-        components={{
+        components={
-          p: ({ children }) => <p className={isInCatalogView ? styles.inline : ''}>{children}</p>,
+          {
-          h1: ({ children }) => <p className={styles.header}>{children}</p>,
+            p: ({ children }) => <p className={isInCatalogView ? styles.inline : ''}>{children}</p>,
-          h2: ({ children }) => <p className={styles.header}>{children}</p>,
+            h1: ({ children }) => <p className={styles.header}>{children}</p>,
-          h3: ({ children }) => <p className={styles.header}>{children}</p>,
+            h2: ({ children }) => <p className={styles.header}>{children}</p>,
-          h4: ({ children }) => <p className={styles.header}>{children}</p>,
+            h3: ({ children }) => <p className={styles.header}>{children}</p>,
-          h5: ({ children }) => <p className={styles.header}>{children}</p>,
+            h4: ({ children }) => <p className={styles.header}>{children}</p>,
-          h6: ({ children }) => <p className={styles.header}>{children}</p>,
+            h5: ({ children }) => <p className={styles.header}>{children}</p>,
-          img: ({ src, alt }) => {
+            h6: ({ children }) => <p className={styles.header}>{children}</p>,
-            const displayText = src || alt || 'image';
+            img: ({ src, alt }) => {
-            return <span>{displayText}</span>;
+              const displayText = src || alt || 'image';
-          },
+              return <span>{displayText}</span>;
-          video: ({ src }) => <span>{src}</span>,
+            },
-          iframe: ({ src }) => <span>{src}</span>,
+            video: ({ src }) => <span>{src}</span>,
-          source: ({ src }) => <span>{src}</span>,
+            iframe: ({ src }) => <span>{src}</span>,
-          a: ({ href, children }) => {
+            source: ({ src }) => <span>{src}</span>,
-            if (href && !isInCatalogView) {
+            spoiler: ({ children }) => <span className='spoilertext'>{children}</span>,
-              try {
+            a: ({ href, children }) => {
-                const linkMediaInfo = getLinkMediaInfo(href);
+              if (href && !isInCatalogView) {
-                const embedUrl = href.startsWith('http') ? new URL(href) : null;
+                try {
-                if ((embedUrl && canEmbed(embedUrl)) || getHasThumbnail(linkMediaInfo, href)) {
+                  const linkMediaInfo = getLinkMediaInfo(href);
-                  return <ContentLinkEmbed children={children} href={href} linkMediaInfo={linkMediaInfo} />;
+                  const embedUrl = href.startsWith('http') ? new URL(href) : null;
+                  if ((embedUrl && canEmbed(embedUrl)) || getHasThumbnail(linkMediaInfo, href)) {
+                    return <ContentLinkEmbed children={children} href={href} linkMediaInfo={linkMediaInfo} />;
+                  }
+                } catch (e) {
+                  console.debug('Invalid URL:', href);
                 }
-              } catch (e) {
-                console.debug('Invalid URL:', href);
-              }
 
-              return (
+                return (
-                <a href={href} target='_blank' rel='noopener noreferrer'>
+                  <a href={href} target='_blank' rel='noopener noreferrer'>
-                  {children}
+                    {children}
-                </a>
+                  </a>
-              );
+                );
-            }
+              }
-          },
+            },
-        }}
+          } as ExtendedComponents
+        }
       />
     </span>
   );

src/components/post-desktop/post-desktop.tsx

@@ -3,7 +3,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { Link, useLocation, useParams } from 'react-router-dom';
 import { Comment, useAuthorAvatar, useEditedComment } from '@plebbit/plebbit-react-hooks';
 import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits';
-import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
+import Plebbit from '@plebbit/plebbit-js';
 import styles from '../../views/post/post.module.css';
 import { CommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail, getMediaDimensions } from '../../lib/utils/media-utils';
 import { hashStringToColor, getTextColorForBackground } from '../../lib/utils/post-utils';

src/components/post-mobile/post-mobile.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Link, useLocation, useParams } from 'react-router-dom';
 import { Comment, useAuthorAvatar, useEditedComment } from '@plebbit/plebbit-react-hooks';
 import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits';
-import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
+import Plebbit from '@plebbit/plebbit-js';
 import styles from '../../views/post/post.module.css';
 import { shouldShowSnow } from '../../lib/snow';
 import { getHasThumbnail } from '../../lib/utils/media-utils';

src/components/reply-modal/reply-modal.tsx

@@ -4,7 +4,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { setAccount, useAccount } from '@plebbit/plebbit-react-hooks';
 import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits';
 import useSubplebbitsPagesStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits-pages';
-import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
+import Plebbit from '@plebbit/plebbit-js';
 import { formatMarkdown } from '../../lib/utils/post-utils';
 import { getFormattedTimeAgo } from '../../lib/utils/time-utils';
 import { isValidURL } from '../../lib/utils/url-utils';

src/components/settings-modal/blocked-addresses-setting/blocked-addresses-setting.tsx

@@ -1,5 +1,5 @@
 import { setAccount, useAccount, useBlock } from '@plebbit/plebbit-react-hooks';
-import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
+import Plebbit from '@plebbit/plebbit-js';
 import styles from './blocked-addresses-setting.module.css';
 import { useTranslation } from 'react-i18next';
 

src/components/settings-modal/subscriptions-setting/subscriptions-setting.tsx

@@ -1,5 +1,5 @@
 import { setAccount, useAccount, useSubscribe } from '@plebbit/plebbit-react-hooks';
-import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
+import Plebbit from '@plebbit/plebbit-js';
 import styles from './subscriptions-setting.module.css';
 import { useTranslation } from 'react-i18next';
 import { useState } from 'react';

src/components/topbar/topbar.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
+import Plebbit from '@plebbit/plebbit-js';
 import { useAccount, useAccountComment, useAccountSubplebbits } from '@plebbit/plebbit-react-hooks';
 import { isAllView, isCatalogView, isSubscriptionsView } from '../../lib/utils/view-utils';
 import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';

src/index.tsx

@@ -7,7 +7,6 @@ import './lib/init-translations';
 import './index.css';
 import './themes.css';
 import { App as CapacitorApp } from '@capacitor/app';
-import * as serviceWorkerRegistration from './service-worker-registration';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
@@ -18,9 +17,6 @@ root.render(
   </React.StrictMode>,
 );
 
-// set up PWA https://cra.link/PWA
-serviceWorkerRegistration.register();
-
 // add back button in android app
 CapacitorApp.addListener('backButton', ({ canGoBack }) => {
   if (canGoBack) {

src/service-worker-registration.js

@@ -1,128 +0,0 @@
-// This optional code is used to register a service worker.
-// register() is not called by default.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on subsequent visits to a page, after all the
-// existing tabs open on the page have been closed, since previously cached
-// resources are updated in the background.
-
-// To learn more about the benefits of this model and instructions on how to
-// opt-in, read https://cra.link/PWA
-
-const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
-    // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
-    // 127.0.0.0/8 are considered localhost for IPv4.
-    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/),
-);
-
-export function register(config) {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-    // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
-    if (publicUrl.origin !== window.location.origin) {
-      // Our service worker won't work if PUBLIC_URL is on a different origin
-      // from what our page is served on. This might happen if a CDN is used to
-      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
-      return;
-    }
-
-    window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
-
-      if (isLocalhost) {
-        // This is running on localhost. Let's check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl, config);
-
-        // Add some additional logging to localhost, pointing developers to the
-        // service worker/PWA documentation.
-        navigator.serviceWorker.ready.then(() => {
-          console.log('This web app is being served cache-first by a service worker. To learn more, visit https://cra.link/PWA');
-        });
-      } else {
-        // Is not localhost. Just register service worker
-        registerValidSW(swUrl, config);
-      }
-    });
-  }
-}
-
-function registerValidSW(swUrl, config) {
-  navigator.serviceWorker
-    .register(swUrl)
-    .then((registration) => {
-      registration.onupdatefound = () => {
-        const installingWorker = registration.installing;
-        if (installingWorker == null) {
-          return;
-        }
-        installingWorker.onstatechange = () => {
-          if (installingWorker.state === 'installed') {
-            if (navigator.serviceWorker.controller) {
-              // At this point, the updated precached content has been fetched,
-              // but the previous service worker will still serve the older
-              // content until all client tabs are closed.
-              console.log('New content is available and will be used when all tabs for this page are closed. See https://cra.link/PWA.');
-
-              // Execute callback
-              if (config && config.onUpdate) {
-                config.onUpdate(registration);
-              }
-            } else {
-              // At this point, everything has been precached.
-              // It's the perfect time to display a
-              // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.');
-
-              // Execute callback
-              if (config && config.onSuccess) {
-                config.onSuccess(registration);
-              }
-            }
-          }
-        };
-      };
-    })
-    .catch((error) => {
-      console.error('Error during service worker registration:', error);
-    });
-}
-
-function checkValidServiceWorker(swUrl, config) {
-  // Check if the service worker can be found. If it can't reload the page.
-  fetch(swUrl, {
-    headers: { 'Service-Worker': 'script' },
-  })
-    .then((response) => {
-      // Ensure service worker exists, and that we really are getting a JS file.
-      const contentType = response.headers.get('content-type');
-      if (response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1)) {
-        // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then((registration) => {
-          registration.unregister().then(() => {
-            window.location.reload();
-          });
-        });
-      } else {
-        // Service worker found. Proceed as normal.
-        registerValidSW(swUrl, config);
-      }
-    })
-    .catch(() => {
-      console.log('No internet connection found. App is running in offline mode.');
-    });
-}
-
-export function unregister() {
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready
-      .then((registration) => {
-        registration.unregister();
-      })
-      .catch((error) => {
-        console.error(error.message);
-      });
-  }
-}

src/service-worker.js

@@ -1,80 +0,0 @@
-/* eslint-disable no-restricted-globals */
-
-// This service worker can be customized!
-// See https://developers.google.com/web/tools/workbox/modules
-// for the list of available Workbox modules, or add any other
-// code you'd like.
-// You can also remove this file if you'd prefer not to use a
-// service worker, and the Workbox build step will be skipped.
-
-import { clientsClaim } from 'workbox-core';
-import { ExpirationPlugin } from 'workbox-expiration';
-import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
-import { registerRoute } from 'workbox-routing';
-import { StaleWhileRevalidate } from 'workbox-strategies';
-
-clientsClaim();
-
-// fix index.html not refreshing on new plebbit-react versions
-registerRoute(
-  // match index.html
-  ({ url }) => url.pathname === '/',
-  // serve cached index.html first but revalidate in background
-  new StaleWhileRevalidate(),
-);
-
-// Precache all of the assets generated by your build process.
-// Their URLs are injected into the manifest variable below.
-// This variable must be present somewhere in your service worker file,
-// even if you decide not to use precaching. See https://cra.link/PWA
-precacheAndRoute(self.__WB_MANIFEST);
-
-// Set up App Shell-style routing, so that all navigation requests
-// are fulfilled with your index.html shell. Learn more at
-// https://developers.google.com/web/fundamentals/architecture/app-shell
-const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$');
-registerRoute(
-  // Return false to exempt requests from being fulfilled by index.html.
-  ({ request, url }) => {
-    // If this isn't a navigation, skip.
-    if (request.mode !== 'navigate') {
-      return false;
-    } // If this is a URL that starts with /_, skip.
-
-    if (url.pathname.startsWith('/_')) {
-      return false;
-    } // If this looks like a URL for a resource, because it contains // a file extension, skip.
-
-    if (url.pathname.match(fileExtensionRegexp)) {
-      return false;
-    } // Return true to signal that we want to use the handler.
-
-    return true;
-  },
-  createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html'),
-);
-
-// An example runtime caching route for requests that aren't handled by the
-// precache, in this case same-origin .png requests like those from in public/
-registerRoute(
-  // Add in any other file extensions or routing criteria as needed.
-  ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'), // Customize this strategy as needed, e.g., by changing to CacheFirst.
-  new StaleWhileRevalidate({
-    cacheName: 'images',
-    plugins: [
-      // Ensure that once this runtime cache reaches a maximum size the
-      // least-recently used images are removed.
-      new ExpirationPlugin({ maxEntries: 50 }),
-    ],
-  }),
-);
-
-// This allows the web app to trigger skipWaiting via
-// registration.waiting.postMessage({type: 'SKIP_WAITING'})
-self.addEventListener('message', (event) => {
-  if (event.data && event.data.type === 'SKIP_WAITING') {
-    self.skipWaiting();
-  }
-});
-
-// Any other custom service worker logic can go here.

src/views/home/boards-list/boards-list.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
+import Plebbit from '@plebbit/plebbit-js';
 import { Subplebbit, useSubplebbitStats } from '@plebbit/plebbit-react-hooks';
 import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits';
 import { useDefaultSubplebbitsState, useDefaultSubplebbitTags } from '../../../hooks/use-default-subplebbits';

src/views/pending-post/pending-post.tsx

@@ -14,10 +14,13 @@ const PendingPost = () => {
 
   const isValidAccountCommentIndex =
     !accountCommentIndex ||
+    // Check if it's a valid positive integer
     (!isNaN(parseInt(accountCommentIndex)) &&
       parseInt(accountCommentIndex) >= 0 &&
-      accountComments?.length > 0 &&
+      Number.isInteger(parseFloat(accountCommentIndex)) &&
-      parseInt(accountCommentIndex) < accountComments.length);
+      // Allow index to be at most 1 position beyond the current length
+      // This handles the case where a new post is being created
+      (accountComments?.length === 0 || parseInt(accountCommentIndex) <= accountComments.length));
 
   useEffect(() => {
     if (!isValidAccountCommentIndex) {

vite.config.js

@@ -3,6 +3,7 @@ import react from '@vitejs/plugin-react';
 import { resolve } from 'path';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
 import eslint from 'vite-plugin-eslint';
+import { VitePWA } from 'vite-plugin-pwa';
 
 const isProduction = process.env.NODE_ENV === 'production';
 
@@ -33,6 +34,107 @@ export default defineConfig({
       protocolImports: true,
       include: ['crypto', 'stream', 'util', 'buffer', 'events'],
     }),
+    VitePWA({
+      registerType: 'autoUpdate',
+      includeAssets: ['favicon.ico', 'robots.txt', 'apple-touch-icon.png'],
+      manifest: {
+        name: 'Seedit',
+        short_name: 'Seedit',
+        description: 'A GUI for plebbit similar to old.reddit',
+        theme_color: '#ffffff',
+        background_color: '#ffffee',
+        display: 'standalone',
+        icons: [
+          {
+            src: '/android-chrome-192x192.png',
+            sizes: '192x192',
+            type: 'image/png'
+          },
+          {
+            src: '/android-chrome-512x512.png',
+            sizes: '512x512',
+            type: 'image/png'
+          },
+          {
+            src: '/android-chrome-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'any maskable'
+          }
+        ]
+      },
+      workbox: {
+        clientsClaim: true,
+        skipWaiting: true,
+        cleanupOutdatedCaches: true,
+        
+        navigateFallback: 'index.html',
+        navigateFallbackDenylist: [/^\/api/, /^\/_(.*)/],
+        
+        runtimeCaching: [
+          // Fix index.html not refreshing on new versions
+          {
+            urlPattern: ({ url }) => url.pathname === '/' || url.pathname === '/index.html',
+            handler: 'StaleWhileRevalidate',
+            options: {
+              cacheName: 'html-cache'
+            }
+          },
+          // PNG caching
+          {
+            urlPattern: ({ url }) => url.pathname.endsWith('.png'),
+            handler: 'StaleWhileRevalidate',
+            options: {
+              cacheName: 'images',
+              expiration: {
+                maxEntries: 50
+              }
+            }
+          },
+          // Add additional asset caching
+          {
+            urlPattern: /\.(?:js|css|woff2?|svg|gif|jpg|jpeg)$/,
+            handler: 'StaleWhileRevalidate',
+            options: {
+              cacheName: 'assets-cache',
+              expiration: {
+                maxEntries: 100,
+                maxAgeSeconds: 60 * 60 * 24 * 30 // 30 days
+              }
+            }
+          },
+          // Google Fonts caching
+          {
+            urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'google-fonts-cache',
+              expiration: {
+                maxEntries: 10,
+                maxAgeSeconds: 60 * 60 * 24 * 365 // 365 days
+              },
+              cacheableResponse: {
+                statuses: [0, 200]
+              }
+            }
+          },
+          {
+            urlPattern: /^https:\/\/fonts\.gstatic\.com\/.*/i,
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'google-fonts-webfonts',
+              expiration: {
+                maxEntries: 30,
+                maxAgeSeconds: 60 * 60 * 24 * 365 // 365 days
+              },
+              cacheableResponse: {
+                statuses: [0, 200]
+              }
+            }
+          }
+        ]
+      }
+    }),
   ],
   resolve: {
     alias: {