Merge pull request #1 from geoffreycrofte/dev

Adds Shortcode Usage instructions

assets/css/bluesky-social.css

@@ -3,6 +3,38 @@
     width: 100%;
 }
 
+.bluesky-social-integration-admin .container {
+    --gap: 16px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap);
+}
+
+.bluesky-social-integration-admin .postbox {
+    box-sizing: content-box;
+    padding: 0 var(--gap);
+    flex-basis: calc(40% - (var(--gap) * 3));
+}
+
+.bluesky-social-integration-admin .postbox:first-child {
+    flex-basis: calc(60% - (var(--gap) * 3));
+}
+
+.bluesky-social-integration-admin .postbox .submit {
+    margin-bottom: 0;
+}
+
+@media screen and (max-width: 720px) {
+    .bluesky-social-integration-admin .postbox.postbox {
+        flex-basis: 100%;
+    }   
+}
+
+.bluesky-social-integration-admin h1 {
+    font-weight: bold;
+    margin: 1em 0;
+}
+
 .bluesky-social-integration-admin .cache-duration-fields label {
     margin-right: 15px;
 }
@@ -33,3 +65,25 @@
 .bluesky-social-integration-admin .bluesky-connection-check.notice-error {
     border-left-color: darkred;
 }
+
+.bluesky-social-integration-admin p {
+    margin: 1em 0;
+}
+
+.bluesky-social-integration-admin ul {
+    list-style: disc;
+    margin: 1em 0 1em 1em;
+}
+
+.bluesky-social-integration-admin ul ul {
+    list-style: circle;
+}
+
+.bluesky-social-integration-admin .postbox hr {
+    margin: 2.5em auto 1.5em;
+}
+
+.bluesky-social-integration-admin .button {
+    font-size: 14px;
+    padding: 4px 16px;
+}

classes/BlueSky_Plugin_Setup.php

@@ -414,15 +414,72 @@ private function format_time_remaining( $seconds ) {
      */
     public function render_settings_page() {
         ?>
-        <div class="wrap bluesky-social-integration-admin">
+        <div class="wrap bluesky-social-integration-admin">    
             <h1><?php echo esc_html__('Social Integration for BlueSky', 'social-integration-for-bluesky' ); ?></h1>
-            <form method="post" action="options.php">
-                <?php
-                settings_fields('bluesky_settings_group');
-                do_settings_sections( BLUESKY_PLUGIN_SETTING_PAGENAME );
-                submit_button();
-                ?>
-            </form>
+
+            <div class="container">
+                <div class="bluesky-social-integration-options postbox">
+                    <div class="inside">
+                        <div class="main">
+                            <form method="post" action="options.php">
+                                <?php
+                                settings_fields('bluesky_settings_group');
+                                do_settings_sections( BLUESKY_PLUGIN_SETTING_PAGENAME );
+                                submit_button();
+                                ?>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="bluesky-social-integration-shortcodes postbox">
+                    <div class="inside">
+                        <div class="main">
+                            <h2><?php echo esc_html__('About the shortcodes', 'social-integration-for-bluesky'); ?></h2>
+                            <?php // translators: %1$s is the the bluesky profile shortcode, %2$s is the bluesky last posts shortcode. ?>
+                            <p><?php echo sprintf( esc_html__('You can use the following shortcodes to display your BlueSky profile and posts: %1$s and %2$s.', 'social-integration-for-bluesky'), '<code>[bluesky_profile]</code>', '<code>[bluesky_last_posts]</code>'); ?></p>
+                            <ul>
+                                <li>
+                                    <?php echo esc_html__('The profile shortcode will display your BlueSky profile card. It uses the following attributes:', 'social-integration-for-bluesky'); ?>
+                                    <br>
+                                    <ul>
+                                        <li><code>displayBanner</code> - <?php echo esc_html__('Whether to display the profile banner. Default is true.', 'social-integration-for-bluesky'); ?></li>
+                                        <li><code>displayAvatar</code> - <?php echo esc_html__('Whether to display the profile avatar. Default is true.', 'social-integration-for-bluesky'); ?></li>
+                                        <li><code>displayCounters</code> - <?php echo esc_html__('Whether to display follower/following counts. Default is true.', 'social-integration-for-bluesky'); ?></li>
+                                        <li><code>displayBio</code> - <?php echo esc_html__('Whether to display the profile bio. Default is true.', 'social-integration-for-bluesky'); ?></li>
+                                        <li><code>theme</code> - <?php echo esc_html__('The theme to use for displaying the profile. Options are "light", "dark", and "system". Default is "system".', 'social-integration-for-bluesky'); ?></li>
+                                        <li><code>className</code> - <?php echo esc_html__('Additional CSS class to apply to the profile card.', 'social-integration-for-bluesky'); ?></li>
+                                    </ul>
+                                </li>
+                                <li>
+                                    <?php echo esc_html__('The last posts shortcode will display your last posts feed. It uses the following attributes:', 'social-integration-for-bluesky'); ?>
+                                    <br>
+                                    <ul>
+                                        <li><code>number</code> - <?php echo esc_html__('The number of posts to display. Default is 5.', 'social-integration-for-bluesky'); ?></li>
+                                        <li><code>theme</code> - <?php echo esc_html__('The theme to use for displaying the posts. Options are "light", "dark", and "system". Default is "system".', 'social-integration-for-bluesky'); ?></li>
+                                        <li><code>displayEmbeds</code> - <?php echo esc_html__('Whether to display embedded media in the posts. Default is true.', 'social-integration-for-bluesky'); ?></li>
+                                    </ul>
+                                </li>
+                            </ul>
+                            <p><?php echo esc_html__('You can also use the Gutenberg blocks to display the profile card and posts feed.', 'social-integration-for-bluesky'); ?></p>
+
+                            <hr>
+
+                            <h2><?php echo esc_html__('About this plugin', 'social-integration-for-bluesky'); ?></h2>
+                            <?php // translators: %s is the name of the developer. ?>
+                            <p><?php echo sprintf( esc_html__( 'This plugin is written by %s.', 'social-integration-for-bluesky'), '<a href="https://geoffreycrofte.com" target="_blank"><strong>Geoffrey Crofte</strong></a>' ); ?><br><?php echo esc_html__( 'This extension is not an official BlueSky plugin.', 'social-integration-for-bluesky')  ?></p>
+
+                            <?php // translators: %1$s is the link opening tag, %2$s closing link tag. ?>
+                            <p><?php echo sprintf( esc_html__( 'Need help with something? Have a suggestion? %1$sAsk away%2$s.', 'social-integration-for-bluesky'), '<a href="https://wordpress.org/support/plugin/social-integration-for-bluesky/#new-topic-0" target="_blank">', '</a>' ); ?></p>
+
+                            <?php $title = __('Rate this plugin on WordPress.org', 'social-integration-for-bluesky') ?>
+
+                            <?php // translators: %1$s is the link opening tag, %2$s closing link tag. ?>
+                            <p><?php echo sprintf( esc_html__( 'Want to support the plugin? %1$sGive a review%2$s', 'social-integration-for-bluesky'), '<a href="https://wordpress.org/support/plugin/social-integration-for-bluesky/reviews/" target="_blank" title="' . esc_attr( $title ) . '">', ' ⭐️⭐️⭐️⭐️⭐️</a>' ); ?></p>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
         <?php
     }

readme.txt

@@ -5,7 +5,7 @@ Tags: BlueSky, Syndicate, Profile, Feed
 Requires at least: 5.0
 Tested up to: 6.7
 Requires PHP: 7.4
-Stable tag: 1.0.0
+Stable tag: 1.0.1
 License: GPLv2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 
@@ -14,7 +14,7 @@ Provides auto syndication (optional), a profile banner, and a last posts Gutenbe
 == Description ==
 
 This plugin provides your website with Gutenberg blocks including a configurable profile banner (followers, posts and followings counts, banner, avatar, and name) and a list of your latest posts on BlueSky.
-A Shortcodes and Widgets are given as well for older sites.
+A Shortcodes (`[bluesky_profile]` and `[bluesky_last_posts]`) and Widgets are given as well for older sites.
 
 An option is available for syndication of posts for BlueSky Social.
 
@@ -31,6 +31,29 @@ Some other included features:
 * Lots of options in the display of your profile banner
 * Gallery of images
 
+=== Shortcode usage ===
+
+In the shortcodes below, the complete list of attributes is displayed. You can omit them if you want, as the default values or the global values will be used if you omit them.
+
+==== Display the last posts ====
+
+`[bluesky_profile theme="system" styleClass="" displayBanner="true" displayAvatar="true" displayCounters="true" displayBio="true"]`
+
+- `theme`: displays a different set of colors supporting dark and light modes (values: `system`, `light`, `dark`)
+- `styleClass`: accept any string class-valid to customise the class attribute
+- `displayBanner`: either you want to display your profile banner image or not (values: `true`, `false`)
+- `displayAvatar`: either you want to display your profile avatar or not (values: `true`, `false`)
+- `displayCounters`: either you want to display your followers, following and posts, or not (values: `true`, `false`)
+- `displayBio`: either you want to display your profile description or not (values: `true`, `false`)
+
+==== Display your profile banne ====
+
+`[bluesky_last_posts displayEmbeds="true" theme="system" numberOfPosts="5"]`
+
+- `displaysEmbeds`: either you want to display only your posts, or include the embeds too (values: `true`, `false`)
+- `theme`: displays a different set of colors supporting dark and light modes (values: `system`, `light`, `dark`)
+- `numberOfPosts`: any number of posts to display. (advice, don't set a too high value)
+
 == Installation ==
 
 1. Install the plugin through the WordPress plugins screen directly.
@@ -79,6 +102,9 @@ No it is not, but it is under evaluation of BlueSky's Team to take part of the d
 
 == Changelog ==
 
+= 1.0.1 =
+Adds the proper information about the shortcodes in the setting page, the plugin description and the mini-description.
+
 = 1.0.0 =
 * Initial release.
 

social-integration-for-bluesky.php

@@ -1,8 +1,8 @@
 <?php
 /*
 Plugin Name: Social Integration for BlueSky
-Description: Integrates BlueSky social features into WordPress including: Post New Articles on BlueSky for you, Shortcode for Profile Card, and Widget to display your last posts.
-Version: 1.0.0
+Description: Integrates BlueSky social features into WordPress including: Post New Articles on BlueSky for you, Shortcode for Profile Card, and Widget to display your last posts. You can also use shortcodes <code>[bluesky_profile]</code> and <code>[bluesky_last_posts]</code>.
+Version: 1.0.1
 Requires at least: 5.0
 Requires PHP: 7.4
 Author: Geoffrey Crofte
@@ -18,7 +18,7 @@
     exit;
 }
 
-define( 'BLUESKY_PLUGIN_VERSION', '1.0.0' );
+define( 'BLUESKY_PLUGIN_VERSION', '1.0.1' );
 define( 'BLUESKY_PLUGIN_BASENAME', plugin_basename( __FILE__ ) );
 define( 'BLUESKY_PLUGIN_FOLDER', plugin_dir_url( __FILE__ ) );
 define( 'BLUESKY_PLUGIN_DIRECTORY_NAME', dirname( plugin_basename( __FILE__ ) ) );