feat(seo): Do not use h3 header for poster author in posts stream (#3732)

* Do not use h3 header for poster author in posts stream.

* Change back `.PostUser-name` tag to h3.
This commit is contained in:
Robert Korulczyk 2023-02-15 18:44:58 +01:00 committed by GitHub
parent 7a60a529da
commit fee6ffe396
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 28 additions and 11 deletions

View File

@ -22,7 +22,7 @@ export default class PostUser extends Component {
if (!user) { if (!user) {
return ( return (
<div className="PostUser"> <div className="PostUser">
<h3> <h3 class="PostUser-name">
{avatar(user, { className: 'PostUser-avatar' })} {username(user)} {avatar(user, { className: 'PostUser-avatar' })} {username(user)}
</h3> </h3>
</div> </div>
@ -41,7 +41,7 @@ export default class PostUser extends Component {
return ( return (
<div className="PostUser"> <div className="PostUser">
<h3> <h3 class="PostUser-name">
<Link href={app.route.user(user)}> <Link href={app.route.user(user)}>
{avatar(user, { className: 'PostUser-avatar' })} {avatar(user, { className: 'PostUser-avatar' })}
{userOnline(user)} {userOnline(user)}
@ -60,11 +60,11 @@ export default class PostUser extends Component {
let timeout; let timeout;
this.$() this.$()
.on('mouseover', 'h3 a, .UserCard', () => { .on('mouseover', '.PostUser-name a, .UserCard', () => {
clearTimeout(timeout); clearTimeout(timeout);
timeout = setTimeout(this.showCard.bind(this), 500); timeout = setTimeout(this.showCard.bind(this), 500);
}) })
.on('mouseout', 'h3 a, .UserCard', () => { .on('mouseout', '.PostUser-name a, .UserCard', () => {
clearTimeout(timeout); clearTimeout(timeout);
timeout = setTimeout(this.hideCard.bind(this), 250); timeout = setTimeout(this.hideCard.bind(this), 250);
}); });

View File

@ -21,7 +21,7 @@ export default class ReplyPlaceholder extends Component {
<article className="Post CommentPost editing" aria-busy="true"> <article className="Post CommentPost editing" aria-busy="true">
<header className="Post-header"> <header className="Post-header">
<div className="PostUser"> <div className="PostUser">
<h3> <h3 class="PostUser-name">
{avatar(app.session.user, { className: 'PostUser-avatar' })} {avatar(app.session.user, { className: 'PostUser-avatar' })}
{username(app.session.user)} {username(app.session.user)}
</h3> </h3>

View File

@ -40,10 +40,14 @@
font-weight: normal; font-weight: normal;
position: relative; position: relative;
h3 { // TODO: remove styles for h3 on Flarum 2.0 cleanup - they may be used by extensions, but they should target `.PostUser-name` class instead
h3,
.PostUser-name {
display: inline; display: inline;
} }
h3, h3 a { // TODO: remove styles for h3 on Flarum 2.0 cleanup - they may be used by extensions, but they should target `.PostUser-name` class instead
h3, h3 a,
.PostUser-name, .PostUser-name a {
color: var(--heading-color); color: var(--heading-color);
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
@ -190,18 +194,31 @@
} }
.Post--hidden { .Post--hidden {
.Post-header, .Post-header a, .PostUser h3, .PostUser h3 a { .Post-header, .Post-header a,
// TODO: remove styles for h3 on Flarum 2.0 cleanup - they may be used by extensions, but they should target `.PostUser-name` class instead
.PostUser h3, .PostUser h3 a,
.PostUser .PostUser-name, .PostUser .PostUser-name a {
color: var(--muted-more-color); color: var(--muted-more-color);
} }
&:not(.revealContent) { &:not(.revealContent) {
.Post-header { .Post-header {
margin-bottom: 0; margin-bottom: 0;
} }
.Post-body, .Post-footer, h3 .Avatar, .PostUser-badges { .Post-body,
.Post-footer,
// TODO: remove styles for h3 on Flarum 2.0 cleanup - they may be used by extensions, but they should target `.PostUser-name` class instead
h3 .Avatar,
.PostUser-name .Avatar,
.PostUser-badges {
display: none; display: none;
} }
} }
.Post-body, .Post-footer, h3 .Avatar, .PostUser-badges { .Post-body,
.Post-footer,
// TODO: remove styles for h3 on Flarum 2.0 cleanup - they may be used by extensions, but they should target `.PostUser-name` class instead
h3 .Avatar,
.PostUser-name .Avatar,
.PostUser-badges {
opacity: 0.5; opacity: 0.5;
} }
.Post-header .Button--more { .Post-header .Button--more {

View File

@ -5,7 +5,7 @@
@foreach ($posts as $post) @foreach ($posts as $post)
<article> <article>
@php $user = ! empty($post->relationships->user->data) ? $getResource($post->relationships->user->data) : null; @endphp @php $user = ! empty($post->relationships->user->data) ? $getResource($post->relationships->user->data) : null; @endphp
<h3>{{ $user ? $user->attributes->displayName : $translator->trans('core.lib.username.deleted_text') }}</h3> <div class="PostUser"><h3 class="PostUser-name">{{ $user ? $user->attributes->displayName : $translator->trans('core.lib.username.deleted_text') }}</h3></div>
<div class="Post-body"> <div class="Post-body">
{!! $post->attributes->contentHtml !!} {!! $post->attributes->contentHtml !!}
</div> </div>