Merge pull request #112 from soup-bowl/beta

Ionic verison
soup-bowl · Oct 19, 2024 · a614ac8 · a614ac8
2 parents a5e3125 + b4fd305
commit a614ac8
Show file tree

Hide file tree

Showing 71 changed files with 7,063 additions and 3,477 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,14 @@
+module.exports = {
+	root: true,
+	env: {
+		node: true,
+	},
+	extends: ["plugin:react/recommended", "eslint:recommended"],
+	parserOptions: {
+		ecmaVersion: 2020,
+	},
+	rules: {
+		"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+		"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+	},
+}
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -5,11 +5,11 @@
 
 version: 2
 updates:
-  - package-ecosystem: "npm"
-    directory: "/"
-    schedule:
-      interval: "monthly"
-    groups:
-      dev-dependencies:
-        patterns:
-          - "*"
+    - package-ecosystem: "npm"
+      directory: "/"
+      schedule:
+          interval: "monthly"
+      groups:
+          dev-dependencies:
+              patterns:
+                  - "*"
diff --git a/.github/docker-compose.yml b/.github/docker-compose.yml
@@ -1,28 +1,28 @@
 version: "3.6"
 services:
-  db:
-    image: docker.io/library/mariadb:10.5.15
-    volumes:
-      - db_persist:/var/lib/mysql
-    environment:
-      MYSQL_ROOT_PASSWORD: password
-      MYSQL_DATABASE: wordpress
-  wp:
-    depends_on:
-      - db
-    build:
-      context: .
-    volumes:
-      - "wp_persist:/var/www/html"
-    ports:
-      - 8080:80
-    environment:
-      WORDPRESS_DB_HOST: db
-      WORDPRESS_DB_USER: root
-      WORDPRESS_DB_PASSWORD: password
-      WORDPRESS_DEBUG: 1
-      WORDPRESS_CONFIG_EXTRA: |
-        define( 'WP_ALLOW_MULTISITE', true );
+    db:
+        image: docker.io/library/mariadb:10.5.15
+        volumes:
+            - db_persist:/var/lib/mysql
+        environment:
+            MYSQL_ROOT_PASSWORD: password
+            MYSQL_DATABASE: wordpress
+    wp:
+        depends_on:
+            - db
+        build:
+            context: .
+        volumes:
+            - "wp_persist:/var/www/html"
+        ports:
+            - 8080:80
+        environment:
+            WORDPRESS_DB_HOST: db
+            WORDPRESS_DB_USER: root
+            WORDPRESS_DB_PASSWORD: password
+            WORDPRESS_DEBUG: 1
+            WORDPRESS_CONFIG_EXTRA: |
+                define( 'WP_ALLOW_MULTISITE', true );
 volumes:
-  wp_persist:
-  db_persist:
+    wp_persist:
+    db_persist:
diff --git a/.gitignore b/.gitignore
@@ -9,18 +9,23 @@
 /coverage
 
 # production
-/build
 /dist
-/dev-dist
 
 # misc
 .DS_Store
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
-*.local
+/.nx
+/.nx/cache
+/.vscode/*
+!/.vscode/extensions.json
+.idea
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# Optional eslint cache
+.eslintcache
diff --git a/.gitpod.yml b/.gitpod.yml
@@ -1,32 +1,34 @@
 tasks:
-  - name: WordPress Mock Site
-    before: |
-      docker-compose -f .github/docker-compose.yml build
-    command: |
-      docker-compose -f .github/docker-compose.yml up -d
-      echo "Pausing for MySQL to complete..." && sleep 30
-      docker-compose -f .github/docker-compose.yml exec wp wp core install --url="$(gp url 8080)" --title="Dummy Site" \
-        --admin_user="admin" --admin_password="password" --admin_email="[email protected]" --allow-root
-      docker-compose -f .github/docker-compose.yml exec wp wp rewrite structure '/%year%/%monthnum%/%postname%' \
-        --allow-root
-      docker-compose -f .github/docker-compose.yml logs -f
-  - name: WordPress App
-    before: |
-      npm install
-    command: |
-      echo "PUBLIC_URL=$(gp url 3000)" > .env.development.local
-      echo "REACT_APP_VERSION=\$npm_package_version" >> .env.development.local
-      cp .env.development.local .env.production.local
-      npm start
+    - name: WordPress Mock Site
+      before: |
+          docker-compose -f .github/docker-compose.yml build
+      command: |
+          docker-compose -f .github/docker-compose.yml up -d
+          echo "Pausing for MySQL to complete..." && sleep 30
+          docker-compose -f .github/docker-compose.yml exec wp wp core install --url="$(gp url 8080)" --title="Dummy Site" \
+            --admin_user="admin" --admin_password="password" --admin_email="[email protected]" --allow-root
+          docker-compose -f .github/docker-compose.yml exec wp wp rewrite structure '/%year%/%monthnum%/%postname%' \
+            --allow-root
+          docker-compose -f .github/docker-compose.yml logs -f
+    - name: WordPress App
+      before: |
+          npm i -g @ionic/cli
+          npm ci
+      command: |
+          npm i -g @ionic/cli
+          echo "PUBLIC_URL=$(gp url 3000)" > .env.development.local
+          echo "REACT_APP_VERSION=\$npm_package_version" >> .env.development.local
+          cp .env.development.local .env.production.local
+          ionic serve --no-open
 
 ports:
-  - name: Frontend
-    port: 3000
-    description: React PWA app
-    visibility: public
-    onOpen: open-browser
-  - name: Mock WordPress
-    port: 8080
-    description: To run tests against.
-    visibility: public
-    onOpen: ignore
+    - name: Frontend
+      port: 8100
+      description: Ionic app
+      visibility: public
+      onOpen: open-browser
+    - name: Mock WordPress
+      port: 8080
+      description: To run tests against.
+      visibility: public
+      onOpen: ignore
diff --git a/.prettierrc b/.prettierrc
@@ -2,5 +2,6 @@
 	"trailingComma": "es5",
 	"printWidth": 120,
 	"useTabs": true,
+	"tabWidth": 4,
 	"semi": false
 }
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+	"recommendations": ["ionic.ionic"]
+}
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@
 </p>
 
 <p align="center">
-  <img src="https://f.subo.dev/i/pressify-app-image.webp" />
+  <img src="https://f.subo.dev/i/pressify2-app-image.webp" />
 </p>
 
 Uses the power of the **[WordPress REST API][wapi]** and **[Progressive Web Apps][pwa]** to form a portable app viewer for WordPress-based sites.
@@ -14,12 +14,12 @@ Uses the power of the **[WordPress REST API][wapi]** and **[Progressive Web Apps
 
 For a site to work, it has to meet the following criteria:
 
-- A **WordPress site** with the **WP-JSON API endpoint** visible.
-  - This is 'on' by default, but some security plugins suggest disabling it for 'security' reasons.
-- The API is **not** behind a **strict CORS policy**.
-- The WordPress site hasn't customised the default access policies.
-  - A typical custom config will be to require authentication for viewing endpoints, which this tool will not handle.
-  - The tool is built to handle these scenarios, but will degrade the experience.
+-   A **WordPress site** with the **WP-JSON API endpoint** visible.
+    -   This is 'on' by default, but some security plugins suggest disabling it for 'security' reasons.
+-   The API is **not** behind a **strict CORS policy**.
+-   The WordPress site hasn't customised the default access policies.
+    -   A typical custom config will be to require authentication for viewing endpoints, which this tool will not handle.
+    -   The tool is built to handle these scenarios, but will degrade the experience.
 
 > [!WARNING]  
 > While we will [sanitise the HTML response](https://www.npmjs.com/package/dompurify) from the source API, this tool will obtain and display HTML from the specified site. Please only **use this tool with websites you trust**!
@@ -40,8 +40,8 @@ For a site to work, it has to meet the following criteria:
 This project requires NodeJS to develop, test and compile the code. The following will quickstart you.
 
 ```bash
-npm install
-npm start
+npm ci
+npm run serve
 ```
 
 The API the system will communicate with is defined in the appropriate `.env`.
@@ -54,12 +54,6 @@ If you want to test the PWA functionality locally, you can add the following to
 devOptions: { enabled: true },
 ```
 
-## react-hooks/exhaustive-deps
-
-This has been ignored on the UseEffect commands where the WP API is called. This is because once wp is added to the
-dependency array, an infinite loop is triggered. I welcome thoughts and suggestions to fix this, but until then (and it
-causing no foreseeable bugs), it has been disabled.
-
 [live]: https://pressify.app
 [wapi]: https://developer.wordpress.org/rest-api/
 [wapj]: https://github.com/WP-API/node-wpapi

diff --git a/capacitor.config.ts b/capacitor.config.ts
@@ -0,0 +1,9 @@
+import type { CapacitorConfig } from "@capacitor/cli"
+
+const config: CapacitorConfig = {
+	appId: "io.ionic.starter",
+	appName: "pressify2",
+	webDir: "dist",
+}
+
+export default config
diff --git a/eslint.config.js b/eslint.config.js
diff --git a/index.html b/index.html
@@ -3,13 +3,28 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="/logo.svg" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<meta name="apple-mobile-web-app-title" content="Pressify" />
-		<meta name="theme-color" content="#121212" />
-		<link rel="apple-touch-icon" href="/logo-mask-512.png" />
 		<title>Pressify</title>
 
-		<meta name="robots" content="noindex" />
+		<base href="/" />
+
+		<meta name="color-scheme" content="dark" />
+		<meta name="theme-color" content="#0d0d0d" />
+		<meta
+			name="viewport"
+			content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+		/>
+		<meta name="format-detection" content="telephone=no" />
+		<meta name="msapplication-tap-highlight" content="no" />
+
+		<link rel="manifest" href="/manifest.json" />
+
+		<link rel="shortcut icon" type="image/png" href="/favicon.png" />
+
+		<!-- add to homescreen for ios -->
+		<meta name="apple-mobile-web-app-capable" content="yes" />
+		<meta name="apple-mobile-web-app-title" content="Pressify" />
+		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
+		<link rel="apple-touch-icon" href="/logo-mask-512.png" />
 
 		<meta property="og:type" content="website" />
 		<meta property="og:title" content="Pressify." />
@@ -31,6 +46,6 @@
 	<body>
 		<noscript>You need to enable JavaScript to run this app.</noscript>
 		<div id="root"></div>
-		<script type="module" src="/src/index.tsx"></script>
+		<script type="module" src="/src/main.tsx"></script>
 	</body>
 </html>
diff --git a/ionic.config.json b/ionic.config.json
@@ -0,0 +1,7 @@
+{
+	"name": "pressify2",
+	"integrations": {
+		"capacitor": {}
+	},
+	"type": "react-vite"
+}