Add "How to Check if It's Working" section in admin

activitypub-event-bridge.php

@@ -3,7 +3,7 @@
  * Plugin Name:  ActivityPub Event Bridge
  * Description:  Integrating popular event plugins with the ActivityPub plugin.
  * Plugin URI:   https://event-federation.eu/
- * Version:      0.1.0
+ * Version:      0.1.1
  * Author:       André Menrath
  * Author URI:   https://graz.social/@linos
  * Text Domain:  activitypub-event-bridge

assets/css/activitypub-event-bridge-admin.css

@@ -68,3 +68,90 @@
 #activitypub_event_bridge_initially_activated {
 	display: hidden;
 }
+
+/* Accordions for admin pages */
+.activitypub-event-bridge-settings-accordion {
+	border: 1px solid #c3c4c7;
+}
+
+.activitypub-event-bridge-settings-accordion-heading {
+	margin: 0;
+	border-top: 1px solid #c3c4c7;
+	font-size: inherit;
+	line-height: inherit;
+	font-weight: 600;
+	color: inherit;
+}
+
+.activitypub-event-bridge-settings-accordion-heading:first-child {
+	border-top: none;
+}
+
+.activitypub-event-bridge-settings-accordion-panel {
+	margin: 0;
+	padding: 1em 1.5em;
+	background: #fff;
+}
+
+.activitypub-event-bridge-settings-accordion-trigger {
+	background: #fff;
+	border: 0;
+	color: #2c3338;
+	cursor: pointer;
+	display: flex;
+	font-weight: 400;
+	margin: 0;
+	padding: 1em 3.5em 1em 1.5em;
+	min-height: 46px;
+	position: relative;
+	text-align: left;
+	width: 100%;
+	align-items: center;
+	justify-content: space-between;
+	-webkit-user-select: auto;
+	user-select: auto;
+}
+
+.activitypub-event-bridge-settings-accordion-trigger {
+	color: #2c3338;
+	cursor: pointer;
+	font-weight: 400;
+	text-align: left;
+}
+
+.activitypub-event-bridge-settings-accordion-trigger .title {
+	pointer-events: none;
+	font-weight: 600;
+	flex-grow: 1;
+}
+
+.activitypub-event-bridge-settings-accordion-trigger .icon,
+.activitypub-event-bridge-settings-accordion-viewed .icon {
+	border: solid #50575e medium;
+	border-width: 0 2px 2px 0;
+	height: .5rem;
+	pointer-events: none;
+	position: absolute;
+	right: 1.5em;
+	top: 50%;
+	transform: translateY(-70%) rotate(45deg);
+	width: .5rem;
+}
+
+.activitypub-event-bridge-settings-accordion-trigger[aria-expanded="true"] .icon {
+	transform: translateY(-30%) rotate(-135deg);
+}
+
+.activitypub-event-bridge-settings-accordion-trigger:active,
+.activitypub-event-bridge-settings-accordion-trigger:hover {
+	background: #f6f7f7;
+}
+
+.activitypub-event-bridge-settings-accordion-trigger:focus {
+	color: #1d2327;
+	border: none;
+	box-shadow: none;
+	outline-offset: -1px;
+	outline: 2px solid #2271b1;
+	background-color: #f6f7f7;
+}

assets/js/activitypub-event-bridge-admin.js

@@ -0,0 +1,14 @@
+jQuery( function( $ ) {
+	// Accordion handling in various areas.
+	$( '.activitypub-event-bridge-settings-accordion' ).on( 'click', '.activitypub-event-bridge-settings-accordion-trigger', function() {
+		var isExpanded = ( 'true' === $( this ).attr( 'aria-expanded' ) );
+
+		if ( isExpanded ) {
+			$( this ).attr( 'aria-expanded', 'false' );
+			$( '#' + $( this ).attr( 'aria-controls' ) ).attr( 'hidden', true );
+		} else {
+			$( this ).attr( 'aria-expanded', 'true' );
+			$( '#' + $( this ).attr( 'aria-controls' ) ).attr( 'hidden', false );
+		}
+	} );
+} );

includes/class-setup.php

@@ -208,6 +208,16 @@ class Setup {
 				array(),
 				ACTIVITYPUB_EVENT_BRIDGE_PLUGIN_VERSION
 			);
+			wp_enqueue_script(
+				'activitypub-event-bridge-admin-script',
+				plugins_url(
+					'assets/js/activitypub-event-bridge-admin.js',
+					ACTIVITYPUB_EVENT_BRIDGE_PLUGIN_FILE
+				),
+				array( 'jquery' ),
+				ACTIVITYPUB_EVENT_BRIDGE_PLUGIN_VERSION,
+				false
+			);
 		}
 	}
 

templates/welcome.php

@@ -57,6 +57,26 @@ WP_Filesystem();
 
 	<?php else : ?>
 
+	<div class="box">
+		<h2><?php \esc_html_e( 'How to Check if It\'s Working', 'activitypub-event-bridge' ); ?></h2>
+		<p><?php esc_html_e( 'Most of the magic happens behind the scenes, but here’s how you can verify that your events are ready to be discovered:', 'activitypub-event-bridge' ); ?></p>
+		<div class="activitypub-event-bridge-settings-accordion">
+				<h4 class="activitypub-event-bridge-settings-accordion-heading">
+				<button aria-expanded="false" class="activitypub-event-bridge-settings-accordion-trigger" aria-controls="activitypub-event-bridge-help-accordion-mastodon" type="button">
+					<span class="title"><?php \esc_html_e( '1. Using Your Mastodon Account', 'activitypub-event-bridge' ); ?></span>
+					<span class="icon"></span>
+				</button>
+			</h4>
+			<div id="activitypub-event-bridge-help-accordion-mastodon" class="activitypub-event-bridge-settings-accordion-panel" hidden="hidden">
+				<ol class="activitypub-event-bridge-settings-numbered-list">
+					<li><?php \esc_html_e( 'Log into your Mastodon account.', 'activitypub-event-bridge' ); ?></li>
+					<li><?php \esc_html_e( 'In the search bar, type or copy the full URL of one of your event pages (e.g., https://yoursite.com/events/event-name).', 'activitypub-event-bridge' ); ?></li>
+					<li><?php \esc_html_e( 'If everything is set up correctly, you\'ll see a post representing your event. It should include the event\'s image, title, and a brief description.', 'activitypub-event-bridge' ); ?></li>
+				</ol>
+			</div>
+		</div>
+	</div>
+
 	<div class="box">
 		<h2><?php \esc_html_e( 'Changelog', 'activitypub-event-bridge' ); ?></h2>
 		<pre>