From b2c1cfc4c1865b06f348bb2f5a6152cb01c680a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dani=C3=ABl=20Klabbers?= <daniel@klabbers.email>
Date: Sun, 22 Jan 2023 14:24:06 +0100
Subject: [PATCH 1/4] feat(seo): shift h1 tag from logo to discussion title

Many times have we seen opponents of using h2 as the discussion title. Although
my own SEO knowledge is limited, I have seen the importance of structuring pages
according to the content you wish to prioritize. If we only take that into consideration
there is zero reason for the app-wide identical logo to take precedence over any
other heading.

This change makes the logo a standard (visually identical) element, and
makes the discussion hero title a h1.

Reviewers should focus on:

- [ ] Do we want to do this (for 1.x)?
- [ ] Do we need to make the logo element a different one?
---
 framework/core/js/src/forum/components/DiscussionHero.js | 2 +-
 framework/core/less/forum/Hero.less                      | 4 ++--
 framework/core/views/frontend/admin.blade.php            | 4 ++--
 framework/core/views/frontend/forum.blade.php            | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/framework/core/js/src/forum/components/DiscussionHero.js b/framework/core/js/src/forum/components/DiscussionHero.js
index 659cf1a718..5e5f2534a6 100644
--- a/framework/core/js/src/forum/components/DiscussionHero.js
+++ b/framework/core/js/src/forum/components/DiscussionHero.js
@@ -34,7 +34,7 @@ export default class DiscussionHero extends Component {
       items.add('badges', <ul className="DiscussionHero-badges badges">{listItems(badges)}</ul>, 10);
     }
 
-    items.add('title', <h2 className="DiscussionHero-title">{discussion.title()}</h2>);
+    items.add('title', <h1 className="DiscussionHero-title">{discussion.title()}</h1>);
 
     return items;
   }
diff --git a/framework/core/less/forum/Hero.less b/framework/core/less/forum/Hero.less
index d335f019df..55980cf251 100644
--- a/framework/core/less/forum/Hero.less
+++ b/framework/core/less/forum/Hero.less
@@ -4,7 +4,7 @@
   text-align: center;
   color: var(--contrast-color, var(--hero-color));
 
-  h2 {
+  h1 {
     margin: 0;
     font-size: 16px;
     font-weight: normal;
@@ -34,7 +34,7 @@
 
 @media @tablet-up {
   .Hero {
-    h2 {
+    h1 {
       font-size: 22px;
     }
     .container {
diff --git a/framework/core/views/frontend/admin.blade.php b/framework/core/views/frontend/admin.blade.php
index 351acd8cfa..d4bd210849 100644
--- a/framework/core/views/frontend/admin.blade.php
+++ b/framework/core/views/frontend/admin.blade.php
@@ -7,7 +7,7 @@
         <header id="header" class="App-header">
             <div id="header-navigation" class="Header-navigation"></div>
             <div class="container">
-                <h1 class="Header-title">
+                <div class="Header-title">
                     <a href="{{ $forum['baseUrl'] }}">
                         @if ($forum['logoUrl'])
                             <img src="{{ $forum['logoUrl'] }}" alt="{{ $forum['title'] }}" class="Header-logo">
@@ -15,7 +15,7 @@
                             {{ $forum['title'] }}
                         @endif
                     </a>
-                </h1>
+                </div>
                 <div id="header-primary" class="Header-primary"></div>
                 <div id="header-secondary" class="Header-secondary"></div>
             </div>
diff --git a/framework/core/views/frontend/forum.blade.php b/framework/core/views/frontend/forum.blade.php
index 595345ab34..c0b0c1d17a 100644
--- a/framework/core/views/frontend/forum.blade.php
+++ b/framework/core/views/frontend/forum.blade.php
@@ -9,7 +9,7 @@
         <header id="header" class="App-header">
             <div id="header-navigation" class="Header-navigation"></div>
             <div class="container">
-                <h1 class="Header-title">
+                <div class="Header-title">
                     <a href="{{ $forum['baseUrl'] }}" id="home-link">
                         @if ($forum['logoUrl'])
                             <img src="{{ $forum['logoUrl'] }}" alt="{{ $forum['title'] }}" class="Header-logo">
@@ -17,7 +17,7 @@
                             {{ $forum['title'] }}
                         @endif
                     </a>
-                </h1>
+                </div>
                 <div id="header-primary" class="Header-primary"></div>
                 <div id="header-secondary" class="Header-secondary"></div>
             </div>

From 4382657ee79cebe08567d94855fe2fcd4a1111f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dani=C3=ABl=20Klabbers?= <daniel@klabbers.email>
Date: Sun, 22 Jan 2023 15:33:04 +0100
Subject: [PATCH 2/4] feat(seo): rewrite remainder of hero titles and subtitles

---
 .../js/src/admin/components/ControlSection.tsx                | 2 +-
 .../package-manager/js/src/admin/components/QueueSection.tsx  | 2 +-
 extensions/tags/js/src/forum/components/TagHero.js            | 4 ++--
 extensions/tags/views/frontend/content/tag.blade.php          | 4 ++--
 extensions/tags/views/frontend/content/tags.blade.php         | 2 +-
 framework/core/js/src/admin/components/AdminHeader.js         | 4 ++--
 framework/core/js/src/admin/components/ExtensionPage.tsx      | 4 ++--
 framework/core/js/src/forum/components/UserCard.js            | 4 ++--
 framework/core/js/src/forum/components/WelcomeHero.tsx        | 4 ++--
 9 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/extensions/package-manager/js/src/admin/components/ControlSection.tsx b/extensions/package-manager/js/src/admin/components/ControlSection.tsx
index 946ba1b273..ad5557aabc 100644
--- a/extensions/package-manager/js/src/admin/components/ControlSection.tsx
+++ b/extensions/package-manager/js/src/admin/components/ControlSection.tsx
@@ -17,7 +17,7 @@ export default class ControlSection extends Component<ComponentAttrs> {
       <div className="ExtensionPage-permissions PackageManager-controlSection">
         <div className="ExtensionPage-permissions-header">
           <div className="container">
-            <h2 className="ExtensionTitle">{app.translator.trans('flarum-package-manager.admin.sections.control.title')}</h2>
+            <h1 className="ExtensionTitle">{app.translator.trans('flarum-package-manager.admin.sections.control.title')}</h1>
           </div>
         </div>
         <div className="container">
diff --git a/extensions/package-manager/js/src/admin/components/QueueSection.tsx b/extensions/package-manager/js/src/admin/components/QueueSection.tsx
index 69f8830d9f..d3247c7868 100644
--- a/extensions/package-manager/js/src/admin/components/QueueSection.tsx
+++ b/extensions/package-manager/js/src/admin/components/QueueSection.tsx
@@ -32,7 +32,7 @@ export default class QueueSection extends Component<{}> {
       <section id="PackageManager-queueSection" className="ExtensionPage-permissions PackageManager-queueSection">
         <div className="ExtensionPage-permissions-header PackageManager-queueSection-header">
           <div className="container">
-            <h2 className="ExtensionTitle">{app.translator.trans('flarum-package-manager.admin.sections.queue.title')}</h2>
+            <h1 className="ExtensionTitle">{app.translator.trans('flarum-package-manager.admin.sections.queue.title')}</h1>
             <Button
               className="Button Button--icon"
               icon="fas fa-sync-alt"
diff --git a/extensions/tags/js/src/forum/components/TagHero.js b/extensions/tags/js/src/forum/components/TagHero.js
index 77b0721d5b..e1ff645f23 100644
--- a/extensions/tags/js/src/forum/components/TagHero.js
+++ b/extensions/tags/js/src/forum/components/TagHero.js
@@ -15,9 +15,9 @@ export default class TagHero extends Component {
       >
         <div className="container">
           <div className="containerNarrow">
-            <h2 className="Hero-title">
+            <h1 className="Hero-title">
               {tag.icon() && tagIcon(tag, {}, { useColor: false })} {tag.name()}
-            </h2>
+            </h1>
             <div className="Hero-subtitle">{tag.description()}</div>
           </div>
         </div>
diff --git a/extensions/tags/views/frontend/content/tag.blade.php b/extensions/tags/views/frontend/content/tag.blade.php
index ea137afe9d..fa7628e688 100644
--- a/extensions/tags/views/frontend/content/tag.blade.php
+++ b/extensions/tags/views/frontend/content/tag.blade.php
@@ -1,8 +1,8 @@
 @inject('url', 'Flarum\Http\UrlGenerator')
 
 <div class="container">
-    <h2>{{ $tag->name }}</h2>
-    <p>{{ $tag->description }}</p>
+    <h1>{{ $tag->name }}</h1>
+    <h2>{{ $tag->description }}</h2>
 
     <ul>
         @foreach ($apiDocument->data as $discussion)
diff --git a/extensions/tags/views/frontend/content/tags.blade.php b/extensions/tags/views/frontend/content/tags.blade.php
index 5d4c0c2d3c..4b1f9f7f8b 100644
--- a/extensions/tags/views/frontend/content/tags.blade.php
+++ b/extensions/tags/views/frontend/content/tags.blade.php
@@ -1,7 +1,7 @@
 @inject('url', 'Flarum\Http\UrlGenerator')
 
 <div class="container">
-    <h2>{{ $translator->trans('flarum-tags.forum.index.tags_link') }}</h2>
+    <h1>{{ $translator->trans('flarum-tags.forum.index.tags_link') }}</h1>
 
     @foreach ([$primaryTags, $secondaryTags] as $category)
         <ul>
diff --git a/framework/core/js/src/admin/components/AdminHeader.js b/framework/core/js/src/admin/components/AdminHeader.js
index 5472a8064e..9207212464 100644
--- a/framework/core/js/src/admin/components/AdminHeader.js
+++ b/framework/core/js/src/admin/components/AdminHeader.js
@@ -7,10 +7,10 @@ export default class AdminHeader extends Component {
     return [
       <div className={classList(['AdminHeader', this.attrs.className])}>
         <div className="container">
-          <h2>
+          <h1>
             {icon(this.attrs.icon)}
             {vnode.children}
-          </h2>
+          </h1>
           <div className="AdminHeader-description">{this.attrs.description}</div>
         </div>
       </div>,
diff --git a/framework/core/js/src/admin/components/ExtensionPage.tsx b/framework/core/js/src/admin/components/ExtensionPage.tsx
index 43657d29de..772fc63462 100644
--- a/framework/core/js/src/admin/components/ExtensionPage.tsx
+++ b/framework/core/js/src/admin/components/ExtensionPage.tsx
@@ -82,7 +82,7 @@ export default class ExtensionPage<Attrs extends ExtensionPageAttrs = ExtensionP
               {this.extension.icon ? icon(this.extension.icon.name) : ''}
             </span>
             <div className="ExtensionName">
-              <h2>{this.extension.extra['flarum-extension'].title}</h2>
+              <h1>{this.extension.extra['flarum-extension'].title}</h1>
             </div>
             <div className="ExtensionPage-headerTopItems">
               <ul>{listItems(this.topItems().toArray())}</ul>
@@ -115,7 +115,7 @@ export default class ExtensionPage<Attrs extends ExtensionPageAttrs = ExtensionP
       <div className="ExtensionPage-permissions">
         <div className="ExtensionPage-permissions-header">
           <div className="container">
-            <h2 className="ExtensionTitle">{app.translator.trans('core.admin.extension.permissions_title')}</h2>
+            <h1 className="ExtensionTitle">{app.translator.trans('core.admin.extension.permissions_title')}</h1>
           </div>
         </div>
         <div className="container">
diff --git a/framework/core/js/src/forum/components/UserCard.js b/framework/core/js/src/forum/components/UserCard.js
index 3f3100edc9..6a43666b95 100644
--- a/framework/core/js/src/forum/components/UserCard.js
+++ b/framework/core/js/src/forum/components/UserCard.js
@@ -49,7 +49,7 @@ export default class UserCard extends Component {
               : ''}
 
             <div className="UserCard-profile">
-              <h2 className="UserCard-identity">
+              <h1 className="UserCard-identity">
                 {this.attrs.editable ? (
                   [AvatarEditor.component({ user, className: 'UserCard-avatar' }), username(user)]
                 ) : (
@@ -58,7 +58,7 @@ export default class UserCard extends Component {
                     {username(user)}
                   </Link>
                 )}
-              </h2>
+              </h1>
 
               {badges.length ? <ul className="UserCard-badges badges">{listItems(badges)}</ul> : ''}
 
diff --git a/framework/core/js/src/forum/components/WelcomeHero.tsx b/framework/core/js/src/forum/components/WelcomeHero.tsx
index 55ec04682a..1910129ecb 100644
--- a/framework/core/js/src/forum/components/WelcomeHero.tsx
+++ b/framework/core/js/src/forum/components/WelcomeHero.tsx
@@ -39,8 +39,8 @@ export default class WelcomeHero extends Component<IWelcomeHeroAttrs> {
           />
 
           <div class="containerNarrow">
-            <h2 class="Hero-title">{app.forum.attribute('welcomeTitle')}</h2>
-            <div class="Hero-subtitle">{m.trust(app.forum.attribute('welcomeMessage'))}</div>
+            <h1 class="Hero-title">{app.forum.attribute('welcomeTitle')}</h1>
+            <h2 class="Hero-subtitle">{m.trust(app.forum.attribute('welcomeMessage'))}</h2>
           </div>
         </div>
       </header>

From ea1717aef4ed44de893189d72383f468faa9888b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dani=C3=ABl=20Klabbers?= <luceos@users.noreply.github.com>
Date: Sun, 22 Jan 2023 18:42:17 +0100
Subject: [PATCH 3/4] Update
 extensions/tags/views/frontend/content/tag.blade.php

Co-authored-by: Sami Mazouz <sychocouldy@gmail.com>
---
 extensions/tags/views/frontend/content/tag.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/extensions/tags/views/frontend/content/tag.blade.php b/extensions/tags/views/frontend/content/tag.blade.php
index fa7628e688..fb3a62225a 100644
--- a/extensions/tags/views/frontend/content/tag.blade.php
+++ b/extensions/tags/views/frontend/content/tag.blade.php
@@ -2,7 +2,7 @@
 
 <div class="container">
     <h1>{{ $tag->name }}</h1>
-    <h2>{{ $tag->description }}</h2>
+    <p>{{ $tag->description }}</p>
 
     <ul>
         @foreach ($apiDocument->data as $discussion)

From c0482ac0f1e4731b8d43fe11079a0b6e06222047 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dani=C3=ABl=20Klabbers?= <luceos@users.noreply.github.com>
Date: Mon, 30 Jan 2023 23:36:43 +0100
Subject: [PATCH 4/4] Update
 framework/core/js/src/forum/components/WelcomeHero.tsx

Co-authored-by: Sami Mazouz <sychocouldy@gmail.com>
---
 framework/core/js/src/forum/components/WelcomeHero.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/framework/core/js/src/forum/components/WelcomeHero.tsx b/framework/core/js/src/forum/components/WelcomeHero.tsx
index 1910129ecb..1ab9ec0f81 100644
--- a/framework/core/js/src/forum/components/WelcomeHero.tsx
+++ b/framework/core/js/src/forum/components/WelcomeHero.tsx
@@ -40,7 +40,7 @@ export default class WelcomeHero extends Component<IWelcomeHeroAttrs> {
 
           <div class="containerNarrow">
             <h1 class="Hero-title">{app.forum.attribute('welcomeTitle')}</h1>
-            <h2 class="Hero-subtitle">{m.trust(app.forum.attribute('welcomeMessage'))}</h2>
+            <div class="Hero-subtitle">{m.trust(app.forum.attribute('welcomeMessage'))}</div>
           </div>
         </div>
       </header>