Merge pull request #1803 from hydephp/fix-heading-permalinks-button-t…

…ext-showing-in-google-search-previews Improve the documentation heading permalinks
hydephp · Jul 8, 2024 · d626904 · d626904
2 parents 222d1da + 5a8aff4
commit d626904
Show file tree

Hide file tree

Showing 15 changed files with 32 additions and 27 deletions.
diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md
@@ -16,6 +16,8 @@ This serves two purposes:
 - Updated the `Serializable` trait to provide a default automatic `toArray` method in https://github.com/hydephp/develop/pull/1791
 - Updated the `PostAuthor` class's `name` property to fall back to the `username` property if the `name` property is not set in https://github.com/hydephp/develop/pull/1794
 - Removed the nullable type hint from the `PostAuthor` class's `name` property as it is now always set in https://github.com/hydephp/develop/pull/1794
+- Improved the accessibility of the heading permalinks feature in https://github.com/hydephp/develop/pull/1803
+- Updated to HydeFront v3.4 in https://github.com/hydephp/develop/pull/1803
 
 ### Deprecated
 - The `PostAuthor::getName()` method is now deprecated and will be removed in v2. (use `$author->name` instead) in https://github.com/hydephp/develop/pull/1794
@@ -25,6 +27,7 @@ This serves two purposes:
 
 ### Fixed
 - Added missing collection key types in Hyde facade method annotations in https://github.com/hydephp/develop/pull/1784
+- Fixed heading permalinks button text showing in Google Search previews https://github.com/hydephp/develop/issues/1801 in https://github.com/hydephp/develop/pull/1803
 
 ### Security
 - in case of vulnerabilities.
diff --git a/_media/app.css b/_media/app.css
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/framework/src/Framework/Services/AssetService.php b/packages/framework/src/Framework/Services/AssetService.php
@@ -31,7 +31,7 @@
 class AssetService
 {
     /** @var string The default HydeFront SemVer tag to load. This constant is set to match the styles used for the installed framework version. */
-    final public const HYDEFRONT_VERSION = 'v3.3';
+    final public const HYDEFRONT_VERSION = 'v3.4';
 
     /** @var string The default HydeFront CDN path pattern. The Blade-style placeholders are replaced with the proper values. */
     final public const HYDEFRONT_CDN_URL = 'https://cdn.jsdelivr.net/npm/hydefront@{{ $version }}/dist/{{ $file }}';

diff --git a/packages/framework/src/Framework/Services/MarkdownService.php b/packages/framework/src/Framework/Services/MarkdownService.php
@@ -206,9 +206,10 @@ protected function configurePermalinksExtension(): void
             'heading_permalink' => [
                 'id_prefix' => '',
                 'fragment_prefix' => '',
-                'symbol' => '#',
+                'symbol' => '',
                 'insert' => 'after',
                 'min_heading_level' => 2,
+                'aria_hidden' => false,
             ],
         ], $this->config);
     }

diff --git a/packages/framework/tests/Feature/MarkdownServiceTest.php b/packages/framework/tests/Feature/MarkdownServiceTest.php
@@ -33,8 +33,8 @@ public function testServiceCanParseMarkdownToHtmlWithPermalinks()
 
         $this->assertIsString($html);
         $this->assertSame(
-            '<h2>Hello World!<a id="hello-world" href="#hello-world" class="heading-permalink" aria-hidden="true" '.
-            'title="Permalink">#</a></h2>'."\n",
+            '<h2>Hello World!<a id="hello-world" href="#hello-world" class="heading-permalink" '.
+            'title="Permalink"></a></h2>'."\n",
             $html
         );
     }

diff --git a/packages/framework/tests/Feature/StaticSiteBuilderDocumentationModuleTest.php b/packages/framework/tests/Feature/StaticSiteBuilderDocumentationModuleTest.php
@@ -44,7 +44,7 @@ public function testPageContainsExpectedContent()
     {
         $this->inspectHtml([
             'Adventures in Wonderland',
-            '<h2>CHAPTER I. DOWN THE RABBIT-HOLE.<a id="chapter-i-down-the-rabbit-hole" href="#chapter-i-down-the-rabbit-hole" class="heading-permalink" aria-hidden="true" title="Permalink">#</a></h2>',
+            '<h2>CHAPTER I. DOWN THE RABBIT-HOLE.<a id="chapter-i-down-the-rabbit-hole" href="#chapter-i-down-the-rabbit-hole" class="heading-permalink" title="Permalink"></a></h2>',
             '<p>So she was considering in her own mind, as well as she could',
         ]);
     }
@@ -55,7 +55,7 @@ public function testCanCompilePageToRootOutputDirectory()
 
         $this->inspectHtml([
             'Adventures in Wonderland',
-            '<h2>CHAPTER I. DOWN THE RABBIT-HOLE.<a id="chapter-i-down-the-rabbit-hole" href="#chapter-i-down-the-rabbit-hole" class="heading-permalink" aria-hidden="true" title="Permalink">#</a></h2>',
+            '<h2>CHAPTER I. DOWN THE RABBIT-HOLE.<a id="chapter-i-down-the-rabbit-hole" href="#chapter-i-down-the-rabbit-hole" class="heading-permalink" title="Permalink"></a></h2>',
             '<p>So she was considering in her own mind, as well as she could',
         ], '_site/test-page.html');
     }

diff --git a/packages/framework/tests/Unit/AssetServiceUnitTest.php b/packages/framework/tests/Unit/AssetServiceUnitTest.php
@@ -23,7 +23,7 @@ protected function setUp(): void
 
     public function testVersionStringConstant()
     {
-        $this->assertSame('v3.3', AssetService::HYDEFRONT_VERSION);
+        $this->assertSame('v3.4', AssetService::HYDEFRONT_VERSION);
     }
 
     public function testServiceHasVersionString()
@@ -56,7 +56,7 @@ public function testCanSetCustomCdnUrlInConfig()
     public function testCanUseCustomCdnUrlWithVersion()
     {
         self::mockConfig(['hyde.hydefront_url' => '{{ $version }}']);
-        $this->assertSame('v3.3', (new AssetService())->cdnLink(''));
+        $this->assertSame('v3.4', (new AssetService())->cdnLink(''));
     }
 
     public function testCanUseCustomCdnUrlWithFile()
@@ -68,7 +68,7 @@ public function testCanUseCustomCdnUrlWithFile()
     public function testCanUseCustomCdnUrlWithVersionAndFile()
     {
         self::mockConfig(['hyde.hydefront_url' => '{{ $version }}/{{ $file }}']);
-        $this->assertSame('v3.3/styles.css', (new AssetService())->cdnLink('styles.css'));
+        $this->assertSame('v3.4/styles.css', (new AssetService())->cdnLink('styles.css'));
     }
 
     public function testCanUseCustomCdnUrlWithCustomVersion()
@@ -83,7 +83,7 @@ public function testCanUseCustomCdnUrlWithCustomVersion()
     public function testCdnLinkHelper()
     {
         $this->assertSame(
-            'https://cdn.jsdelivr.net/npm/hydefront@v3.3/dist/styles.css',
+            'https://cdn.jsdelivr.net/npm/hydefront@v3.4/dist/styles.css',
             (new AssetService())->cdnLink('styles.css')
         );
     }

diff --git a/packages/hyde/package.json b/packages/hyde/package.json
@@ -8,7 +8,7 @@
     "devDependencies": {
         "@tailwindcss/typography": "^0.5.2",
         "autoprefixer": "^10.4.5",
-        "hydefront": "^3.3.0",
+        "hydefront": "^3.4.0",
         "laravel-mix": "^6.0.49",
         "postcss": "^8.4.31",
         "prettier": "3.3.2",

diff --git a/packages/hydefront/dist/app.css b/packages/hydefront/dist/app.css
diff --git a/packages/hydefront/dist/hyde.css b/packages/hydefront/dist/hyde.css
diff --git a/packages/hydefront/dist/hyde.css.map b/packages/hydefront/dist/hyde.css.map
diff --git a/packages/hydefront/package-lock.json b/packages/hydefront/package-lock.json
diff --git a/packages/hydefront/package.json b/packages/hydefront/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hydefront",
-  "version": "3.3.6",
+  "version": "3.4.0",
   "description": "Frontend assets for HydePHP",
   "scripts": {
     "prod": "sass hyde.scss dist/hyde.css --style=compressed && php .github/scripts/post-build.php --inject-version",

diff --git a/packages/hydefront/sass/docs/heading-permalinks.scss b/packages/hydefront/sass/docs/heading-permalinks.scss
@@ -13,14 +13,15 @@
 
 			.heading-permalink {
 				opacity: 0;
-				visibility: hidden;
 				margin-left: 0.25rem;
 				transition: opacity 0.3s ease;
 				padding: 0 0.25rem;
 				scroll-margin: 1rem;
+				&::before {
+					content: '#';
+				}
 				&:hover, &:focus {
 					opacity: 1;
-					visibility: visible;
 					filter: unset;
 				}
 			}