Merge pull request #204 from PRX/feat/186-previews-iframe-refactor

186: Previews iframe refactor
PRX · Apr 29, 2024 · 5976b7a · 5976b7a
2 parents 00e129d + c4aaafc
commit 5976b7a
Show file tree

Hide file tree

Showing 114 changed files with 23,823 additions and 7,268 deletions.
diff --git a/.lando.yml b/.lando.yml
@@ -16,6 +16,30 @@ services:
     build:
       - npm install
       - chmod +x scripts/*
+  appserver_nginx:
+    scanner:
+      retry: 10
+      okCodes:
+        - 302
+        - 401
+        - 402
+        - 403
+  edge:
+    scanner:
+      retry: 10
+      okCodes:
+        - 302
+        - 401
+        - 402
+        - 403
+  edge_ssl:
+    scanner:
+      retry: 10
+      okCodes:
+        - 302
+        - 401
+        - 402
+        - 403
   mailhog:
     type: mailhog
     portforward: false

diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json
diff --git a/wp-content/mu-plugins/the-world-site-config/configs/global/global-plugins.php b/wp-content/mu-plugins/the-world-site-config/configs/global/global-plugins.php
@@ -33,6 +33,7 @@
 		'tw-media/tw-media.php',
 		'tw-menus/tw-menus.php',
 		'tw-newsletters/tw-newsletters.php',
+		'tw-previews/tw-previews.php',
 		'tw-programs/tw-programs.php',
 		'tw-qa-block/tw-qa-block.php',
 		'tw-datawrapper-block/tw-datawrapper-block.php',
@@ -51,7 +52,6 @@
 		'svg-block/svg-block.php',
 		'wp-graphql/wp-graphql.php',
 		'wp-graphql-acf/wp-graphql-acf.php',
-		'wp-graphql-jwt-authentication/wp-graphql-jwt-authentication.php',
 		'add-wpgraphql-seo/wp-graphql-yoast-seo.php',
 		'custom-post-type-permalinks/custom-post-type-permalinks.php',
 		'faustwp/faustwp.php',

diff --git a/wp-content/plugins/tw-previews/preview/preview.php b/wp-content/plugins/tw-previews/preview/preview.php
@@ -0,0 +1,22 @@
+<?php
+/**
+ * Preview template.
+ *
+ * @package tw_previews
+ */
+
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Preview Window</title>
+	<?php
+	wp_print_scripts();
+	?>
+</head>
+<body>
+	<div id="<?php echo esc_attr( TW_PREVIEWS_APP_CONTAINER_ID ); ?>"></div>
+</body>
+</html>
diff --git a/wp-content/plugins/tw-previews/preview/ui.php b/wp-content/plugins/tw-previews/preview/ui.php
@@ -0,0 +1,134 @@
+<?php
+/**
+ * Setup admin page UI.
+ *
+ * @package tw_previews
+ */
+
+define( 'TW_PREVIEWS_APP_CONTAINER_ID', 'tw-episode-importer-app' );
+
+if ( ! function_exists( 'tw_previews_faust_exclude_redirect_preview_route' ) ) {
+	/**
+	 * Prevent Faust from redirecting preview route to the front-end domain.
+	 *
+	 * @param array $excluded Array of excluded paths.
+	 * @return array Array of excluded paths.
+	 *
+	 * @package tw_previews
+	 */
+	function tw_previews_faust_exclude_redirect_preview_route( $excluded ) {
+
+		$route = add_query_arg( null, null );
+
+		if ( strpos( $route, 'preview/' ) > -1 ) {
+			// Faust uses `basename` on the current URL path to compare with exclusion list.
+			// `basename` is meant for use with file paths, and will only grab the last segment of the path, including query string.
+			// Since the last segment of our preview URL is dynamic, and we have no idea if query string params have been added,
+			// we have to add our exclude route dynamically using the same URL parsing Faust uses.
+			// TODO: Keep an eye on this when Faust is updated. They may improve or alter their logic for path exlcusion.
+			$excluded = array_merge(
+				$excluded,
+				array(
+					basename( $route ),
+				)
+			);
+		}
+
+		return $excluded;
+	}
+}
+add_filter(
+	'faustwp_exclude_from_public_redirect',
+	'tw_previews_faust_exclude_redirect_preview_route',
+	20,
+	1
+);
+
+if ( ! function_exists( 'tw_previews_template_include_preview' ) ) {
+	/**
+	 * Use custom template for previews.
+	 *
+	 * @param string $template Current template path.
+	 * @return string
+	 */
+	function tw_previews_template_include_preview( $template ) {
+		$route = add_query_arg( null, null );
+
+		if ( strpos( $route, 'preview/' ) > -1 ) {
+			if ( ! is_user_logged_in() ) {
+				header( 'Status: 403 Forbidden', true, 403 );
+				exit();
+			}
+			return TW_PREVIEWS_PATH . '/preview/preview.php';
+		}
+
+		return $template;
+	}
+}
+add_action( 'template_include', 'tw_previews_template_include_preview' );
+
+if ( ! function_exists( 'tw_previews_preview_post_link' ) ) {
+	/**
+	 * Update preview post link.
+	 *
+	 * @param string  $preview_link Current preview link.
+	 * @param WP_Post $post Post object preview link is being created for.
+	 *
+	 * @return string New post preview link URL.
+	 */
+	function tw_previews_preview_post_link( $preview_link, $post ) {
+		// We will work with a global ID that WPGraphQL uses. Will make queries easier down the line.
+		$post_id      = base64_encode( "post:{$post->ID}" );
+		$preview_path = "/preview/{$post_id}";
+
+		return $preview_path;
+	}
+}
+add_filter( 'preview_post_link', 'tw_previews_preview_post_link', 100000, 2 );
+
+/**
+ * Render HTML and enqueue scripts for admin page.
+ *
+ * @return void
+ */
+function tw_previews_preview_page_html() {
+
+	global $wp;
+
+	$not_preview = ! preg_match( '~^preview/~', $wp->request );
+
+	if ( ! $wp->request || $not_preview ) {
+		return;
+	}
+
+	list(, $post_id)          = explode( '/', $wp->request );
+	list(, $post_database_id) = explode( ':', base64_decode( $post_id ) );
+	$post                     = get_post( $post_database_id );
+
+	if ( in_array( $post->post_status, array( 'draft', 'pending', 'auto-draft' ) ) ) {
+		$post->filter = 'sample';
+	}
+
+	$permalink   = get_permalink( $post, true );
+	$preview_url = preg_replace( '~(?<=/)[^/]+$~', "preview/{$post_id}", $permalink );
+
+	if ( function_exists( 'WPE\FaustWP\Replacement\equivalent_frontend_url' ) ) {
+		$preview_url = WPE\FaustWP\Replacement\equivalent_frontend_url( $preview_url );
+	}
+
+	wp_enqueue_style( 'tw-previews-preview-ui', TW_PREVIEWS_URL . 'preview/ui/ui.css', array(), wp_rand() );
+	wp_enqueue_script( 'tw-previews-preview-ui', TW_PREVIEWS_URL . 'preview/ui/dist/bundle.js', array(), wp_rand(), array( 'strategy' => 'defer' ) );
+	wp_localize_script(
+		'tw-previews-preview-ui',
+		'appLocalizer',
+		array(
+			'appContainerId' => TW_PREVIEWS_APP_CONTAINER_ID,
+			'restUrl'        => home_url( '/wp-json/wp/v2/' ),
+			'gqlUrl'         => trailingslashit( site_url() ) . 'index.php?' . \WPGraphQL\Router::$route,
+			'nonce'          => wp_create_nonce( 'wp_rest' ),
+			'id'             => $post_id,
+			'previewUrl'     => $preview_url,
+		)
+	);
+}
+add_action( 'wp_print_scripts', 'tw_previews_preview_page_html' );
diff --git a/wp-content/plugins/tw-previews/preview/ui/.eslintrc.js b/wp-content/plugins/tw-previews/preview/ui/.eslintrc.js
@@ -0,0 +1,18 @@
+module.exports = {
+  extends: [
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "eslint-config-prettier",
+  ],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: "latest",
+    sourceType: "module",
+  },
+  rules: {
+    "react/prop-types": 0,
+  },
+  plugins: ["react", "@typescript-eslint"],
+};
diff --git a/wp-content/plugins/tw-previews/preview/ui/.gitignore b/wp-content/plugins/tw-previews/preview/ui/.gitignore
@@ -0,0 +1,2 @@
+# Ignore generated graphql types
+src/types/api/graphql.ts
diff --git a/wp-content/plugins/tw-previews/preview/ui/babel.config.json b/wp-content/plugins/tw-previews/preview/ui/babel.config.json
@@ -0,0 +1,11 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": "defaults"
+      }
+    ],
+    "@babel/preset-react"
+  ]
+}
diff --git a/wp-content/plugins/tw-previews/preview/ui/codegen.ts b/wp-content/plugins/tw-previews/preview/ui/codegen.ts
@@ -0,0 +1,13 @@
+import type { CodegenConfig } from '@graphql-codegen/cli';
+
+const config: CodegenConfig = {
+  overwrite: true,
+  schema: 'http://the-world-wp.lndo.site/graphql',
+  generates: {
+    'src/types/api/graphql.ts': {
+      plugins: ['typescript']
+    }
+  }
+};
+
+export default config;
diff --git a/wp-content/plugins/tw-previews/preview/ui/components.json b/wp-content/plugins/tw-previews/preview/ui/components.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "./tailwind.config.js",
+    "css": "./src/styles/global.scss",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
diff --git a/wp-content/plugins/tw-previews/preview/ui/dist/bundle.js b/wp-content/plugins/tw-previews/preview/ui/dist/bundle.js
diff --git a/wp-content/plugins/tw-previews/preview/ui/dist/bundle.js.LICENSE.txt b/wp-content/plugins/tw-previews/preview/ui/dist/bundle.js.LICENSE.txt
@@ -0,0 +1,29 @@
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
diff --git a/wp-content/plugins/tw-previews/preview/ui/jsconfig.json b/wp-content/plugins/tw-previews/preview/ui/jsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Ignore generated graphql types
		src/types/api/graphql.ts