feat(v1.7.2): 3D extruded "Beep!" logo on every beep + reply

Replace the flat SVG-text wordmark with a crisp inline-SVG recreation of
the 3D brand logo (blue-violet face, navy outline, stacked blue depth).
Bump wordmark size/opacity so it reads on the dark theme. The bundled
beep-wordmark.png assets remain corrupted, hence the vector approach.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Krystie
2026-06-08 01:54:34 -07:00
parent 1703a09319
commit eb40212a79
4 changed files with 36 additions and 19 deletions
+4 -5
View File
@@ -1062,18 +1062,17 @@
gap: 8px; gap: 8px;
margin-top: 4px; margin-top: 4px;
} }
/* Brand wordmark (inline SVG, inherits colour via currentColor) */ /* Brand wordmark (inline SVG recreation of the 3D "Beep!" logo) */
.beep-embed .beep-post-wordmark { .beep-embed .beep-post-wordmark {
color: var(--beep-accent); opacity: 0.85;
opacity: 0.55;
flex: 0 0 auto; flex: 0 0 auto;
height: 16px; height: 18px;
width: auto; width: auto;
transition: opacity 0.15s ease; transition: opacity 0.15s ease;
user-select: none; user-select: none;
} }
.beep-embed .beep-bottom-bar-reply .beep-post-wordmark { .beep-embed .beep-bottom-bar-reply .beep-post-wordmark {
height: 13px; height: 15px;
} }
.beep-embed .beep-post:hover .beep-post-wordmark, .beep-embed .beep-post:hover .beep-post-wordmark,
.beep-embed .beep-reply:hover .beep-post-wordmark { .beep-embed .beep-reply:hover .beep-post-wordmark {
+2 -2
View File
@@ -2,7 +2,7 @@
/** /**
* Plugin Name: Beep * Plugin Name: Beep
* Description: A Twitter-style microblog for WordPress, with likes, replies, and Gravatars. Use the [beep_feed] shortcode on any page. * Description: A Twitter-style microblog for WordPress, with likes, replies, and Gravatars. Use the [beep_feed] shortcode on any page.
* Version: 1.7.1 * Version: 1.7.2
* Requires at least: 6.0 * Requires at least: 6.0
* Requires PHP: 7.4 * Requires PHP: 7.4
* Author: Sami Ahmed * Author: Sami Ahmed
@@ -14,7 +14,7 @@ if (!defined('ABSPATH')) {
exit; exit;
} }
define('BEEP_VERSION', '1.7.1'); define('BEEP_VERSION', '1.7.2');
define('BEEP_FILE', __FILE__); define('BEEP_FILE', __FILE__);
define('BEEP_DIR', plugin_dir_path(__FILE__)); define('BEEP_DIR', plugin_dir_path(__FILE__));
define('BEEP_URL', plugin_dir_url(__FILE__)); define('BEEP_URL', plugin_dir_url(__FILE__));
+25 -11
View File
@@ -55,21 +55,35 @@ function beep_logo_svg() {
} }
/** /**
* Small "Beep!" brand wordmark shown at the bottom-right of every beep and reply. * The "Beep!" brand wordmark shown at the bottom-right of every beep and reply.
* *
* Rendered as crisp inline SVG so it stays sharp at any size and inherits its * Rendered as a crisp inline SVG recreation of the 3D extruded brand logo —
* colour from CSS (currentColor). The bundled beep-wordmark.png assets are * a blue-violet face with a darker-blue depth and navy outline. Stays sharp at
* corrupted, so we draw the wordmark as vector text instead. To use a real * any size and ships as ~1KB of markup (no image request). The bundled
* image once you have a clean asset, hook the `beep_post_wordmark` filter: * beep-wordmark.png assets are corrupted, which is why we draw it as vector.
* To swap in a real image once you have a clean asset, hook the filter:
* add_filter('beep_post_wordmark', fn() => '<img class="beep-post-wordmark" src="...">'); * add_filter('beep_post_wordmark', fn() => '<img class="beep-post-wordmark" src="...">');
*/ */
function beep_post_wordmark() { function beep_post_wordmark() {
$svg = '<svg class="beep-post-wordmark" viewBox="0 0 62 20" width="50" height="16"' // Build the 3D extrusion: stacked copies offset down-left, deepest first.
. ' role="img" aria-label="Beep">' $depth = 7;
. '<text x="0" y="15"' $extrude = '';
. ' font-family="-apple-system,BlinkMacSystemFont,&quot;Segoe UI&quot;,Roboto,Helvetica,Arial,sans-serif"' for ( $i = $depth; $i >= 1; $i-- ) {
. ' font-size="16" font-weight="800" letter-spacing="-0.5" fill="currentColor">Beep!</text>' $x = 9 - $i;
. '</svg>'; $y = 49 + $i;
$extrude .= '<text x="' . $x . '" y="' . $y . '" fill="#2A2AAE">Beep!</text>';
}
$svg = '<svg class="beep-post-wordmark" viewBox="0 0 168 68"'
. ' role="img" aria-label="Beep!" xmlns="http://www.w3.org/2000/svg">'
. '<g font-family="&quot;Arial Black&quot;,&quot;Arial Bold&quot;,Arial,Helvetica,sans-serif"'
. ' font-weight="900" font-size="52" letter-spacing="-1">'
. $extrude
// Front face: blue-violet fill with a navy outline drawn behind it.
. '<text x="9" y="49" fill="#5238E6" stroke="#15155C" stroke-width="1.8"'
. ' stroke-linejoin="round" paint-order="stroke">Beep!</text>'
. '</g></svg>';
return apply_filters('beep_post_wordmark', $svg); return apply_filters('beep_post_wordmark', $svg);
} }
+5 -1
View File
@@ -4,7 +4,7 @@ Tags: microblog, twitter, tweets, social, comments, polls, elementor
Requires at least: 6.0 Requires at least: 6.0
Tested up to: 6.9 Tested up to: 6.9
Requires PHP: 7.4 Requires PHP: 7.4
Stable tag: 1.7.1 Stable tag: 1.7.2
License: GPLv2 or later License: GPLv2 or later
A Twitter-style microblog for WordPress. Posts, likes, replies, polls, quotes, GIFs, and Gravatars. Use [beep_feed] shortcode or Elementor widget. A Twitter-style microblog for WordPress. Posts, likes, replies, polls, quotes, GIFs, and Gravatars. Use [beep_feed] shortcode or Elementor widget.
@@ -40,6 +40,10 @@ Features:
== Changelog == == Changelog ==
= 1.7.2 =
* Beep wordmark on every beep + reply is now the 3D extruded brand logo (blue-violet face, navy outline, blue depth) instead of flat text, drawn as a sharp ~1KB inline SVG.
* Bumped the wordmark size and opacity so the logo reads clearly on the dark theme.
= 1.7.1 = = 1.7.1 =
* Beep wordmark now shown bottom-right of every beep AND reply, with the delete button furthest right. * Beep wordmark now shown bottom-right of every beep AND reply, with the delete button furthest right.
* Wordmark rendered as crisp inline SVG (readable on the dark theme); removed a duplicate wordmark. * Wordmark rendered as crisp inline SVG (readable on the dark theme); removed a duplicate wordmark.