Skip to content

Commit

Permalink
Merge pull request #11 from jeremyfelt/improve/comment-markup
Browse files Browse the repository at this point in the history
Improve overall comments markup
  • Loading branch information
jeremyfelt committed Jan 18, 2020
2 parents 8edb4ed + 1b4a94d commit 1729146
Show file tree
Hide file tree
Showing 5 changed files with 97 additions and 17 deletions.
20 changes: 14 additions & 6 deletions comments.php
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@
$url = get_comment_meta( $like_id, 'webmention_source_url', true );
$avatar = get_comment_meta( $like_id, 'avatar', true );
$author_url = get_comment_meta( $like_id, 'semantic_linkbacks_author_url', true );
$type = get_comment_meta( $comment_id, 'semantic_linkbacks_type', true );

if ( '' === $author_url ) {
$author_url = $url;
Expand All @@ -99,16 +100,23 @@
$avatar = get_template_directory_uri() . '/images/mystery-person.png';
}

$u_class = 'u-like';

// Even though favorites are classified as likes, use the correct markup.
if ( 'favorite' === $type ) {
$u_class = 'u-favorite';
}

?>

<!-- Markup inspired by https://indieweb.org/like -->
<article class="p-like h-cite">
<article class="<?php echo $u_class; ?> h-cite">
<!-- The loading attribute is only supported by Chrome right now, but I'd like to not use JavaScript for this. -->
<img src="<?php echo esc_url( $avatar ); ?>" width=40 alt="" loading="lazy" />

<!-- This span is my lazy way of enabling a vertically aligned flex display on the article element. -->
<span>
<a class="p-author h-card" href="<?php echo esc_url( $author_url ); ?>"><?php echo esc_html( $like->comment_author ); ?></a>
<a class="u-author h-card" href="<?php echo esc_url( $author_url ); ?>"><?php echo esc_html( $like->comment_author ); ?></a>
liked this on
<a class="u-url" href="<?php echo esc_url( $url ); ?>">
<time class="dt-published"><?php echo get_comment_date( 'F j, Y \a\t g:i a', $like ); ?></time>
Expand Down Expand Up @@ -144,13 +152,13 @@
?>

<!-- Markup inspired by https://indieweb.org/like -->
<article class="p-bookmark h-cite">
<article class="u-bookmark h-cite">
<!-- The loading attribute is only supported by Chrome right now, but I'd like to not use JavaScript for this. -->
<img src="<?php echo esc_url( $avatar ); ?>" width=40 alt="" loading="lazy" />

<!-- This span is my lazy way of enabling a vertically aligned flex display on the article element. -->
<span>
<a class="p-author h-card" href="<?php echo esc_url( $author_url ); ?>"><?php echo esc_html( $like->comment_author ); ?></a>
<a class="u-author h-card" href="<?php echo esc_url( $author_url ); ?>"><?php echo esc_html( $like->comment_author ); ?></a>
bookmarked this on
<a class="u-url" href="<?php echo esc_url( $url ); ?>">
<time class="dt-published"><?php echo get_comment_date( 'F j, Y \a\t g:i a', $like ); ?></time>
Expand Down Expand Up @@ -183,13 +191,13 @@
}
?>

<article class="p-mention h-cite">
<article class="u-mention h-cite">
<!-- The loading attribute is only supported by Chrome right now, but I'd like to not use JavaScript for this. -->
<img src="<?php echo esc_url( $avatar ); ?>" width=40 alt="" loading="lazy" />

<!-- This span is my lazy way of enabling a vertically aligned flex display on the article element. -->
<span>
<a class="p-author h-card" href="<?php echo esc_url( $author_url ); ?>"><?php echo esc_html( $mention->comment_author ); ?></a>
<a class="u-author h-card" href="<?php echo esc_url( $author_url ); ?>"><?php echo esc_html( $mention->comment_author ); ?></a>
mentioned this on
<a class="u-url" href="<?php echo esc_url( $url ); ?>">
<time class="dt-published"><?php echo get_comment_date( 'F j, Y \a\t g:i a', $mention ); ?></time>
Expand Down
16 changes: 8 additions & 8 deletions css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -1337,30 +1337,30 @@ pre.wp-block-code code {
}

.comment-author,
.p-bookmark,
.p-mention,
.p-like {
.u-bookmark,
.u-mention,
.u-like {
display: flex;
align-items: center;
margin-bottom: .5em;
}

.comment-author img,
.p-bookmark img,
.p-mention img,
.p-like img {
.u-bookmark img,
.u-mention img,
.u-like img {
margin-right: .5em;
min-width: 40px;
}

.comment {
.u-comment {
border-left: 2px solid #eee;
padding-left: 1em;
padding-bottom: 1em;
margin-top: 2em;
}

.comment > .comment {
.u-comment > .u-comment {
margin-left: 0;
margin-top: 2em;
border-left: 1px solid #ccc;
Expand Down
1 change: 1 addition & 0 deletions functions.php
Original file line number Diff line number Diff line change
Expand Up @@ -162,3 +162,4 @@ function writemore_post_nav_link_text( $output, $format, $link, $post, $adjacent
require get_template_directory() . '/inc/customizer.php';

require get_template_directory() . '/inc/class-writemore-comment-walker.php';
require get_template_directory() . '/inc/comments.php';
6 changes: 3 additions & 3 deletions inc/class-writemore-comment-walker.php
Original file line number Diff line number Diff line change
Expand Up @@ -123,15 +123,15 @@ protected function html5_comment( $comment, $depth, $args ) {
}

?>
<div id="comment-153393" <?php comment_class( $this->has_children ? 'parent' : '', $comment ); ?>>
<div id="comment-<?php comment_ID(); ?>" <?php comment_class( '', $comment ); ?>>
<article id="div-comment-<?php comment_ID(); ?>" >
<footer class="comment-meta">
<!-- This span is my lazy way of enabling a vertically aligned flex display on the article element. -->
<div class="comment-author vcard">
<img src="<?php echo esc_url( $avatar ); ?>" width=40 alt="" loading="lazy" />

<span>
<a class="p-author h-card" href="<?php echo esc_url( $author_url ); ?>"><?php echo esc_html( $comment->comment_author ); ?></a>
<a class="u-author h-card" href="<?php echo esc_url( $author_url ); ?>"><?php echo esc_html( $comment->comment_author ); ?></a>
replied on
<a class="u-url" href="<?php echo esc_url( $url ); ?>">
<time datetime="<?php comment_time( 'c' ); ?>" class="dt-published"><?php echo get_comment_date( 'F j, Y', $comment ); ?> at <?php echo get_comment_time(); ?></time>
Expand All @@ -146,7 +146,7 @@ protected function html5_comment( $comment, $depth, $args ) {

</footer><!-- .comment-meta -->

<div class="comment-content">
<div class="e-content">
<?php
// This is hilarious, but I'm feeling lazy. Replace all single line breaks in a
// comment with a double linke break so that wpautop() uses paragraph tags instead
Expand Down
71 changes: 71 additions & 0 deletions inc/comments.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<?php

namespace Writemore\Comments;

add_filter( 'comment_class', __NAMESPACE__ . '\remove_comment_classes', 999, 5 );

function remove_comment_classes( $classes, $class, $comment_id, $comment, $post_id ) {
global $comment_depth;

// Remove a handful of classes that are not being used by this theme to apply
// styles or provide any kind of semantics or functionality.
$remove_classes = array(
'alt',
'even',
'odd',
'thread-alt',
'thread-even',
'thread-odd',
'parent',
'depth-' . $comment_depth,
);

// Remove these classes, which are added by the Semantic Linkbacks plugin, because
// I want to ensure they survive even if the plugin is disabled in the future and
// if I filter them myself, I'll end up with a double output.
$remove_classes[] = 'u-comment';
$remove_classes[] = 'h-cite';

// Remove the comment type, for now. I may come up with a way to highlight which
// comments were received as webmentions at some point.
$remove_classes[] = ( empty( $comment->comment_type ) ) ? 'comment' : $comment->comment_type;

// Remove classes added by WordPress (using this exact code) to indicate authorship
// of a comment. If I decide to highlight my comments as different, I'll add something in
// this section at a later time.
$user = $comment->user_id ? get_userdata( $comment->user_id ) : false;
if ( $user ) {
$remove_classes[] = 'byuser';
$remove_classes[] = 'comment-author-' . sanitize_html_class( $user->user_nicename, $comment->user_id );

// For comment authors who are the author of the post
$post = get_post( $post_id );
if ( $post ) {
if ( $comment->user_id === $post->post_author ) {
$remove_classes[] = 'bypostauthor';
}
}
}

foreach ( $remove_classes as $class ) {
$key = array_search( $class, $classes );
if ( false !== $key ) {
unset( $classes[ $key ] );
}
}

// Re-add the classes that should always be there.
$classes[] = 'u-comment';

$protocol = get_comment_meta( $comment_id, 'protocol', true );

// If the comment originated somewhere else, mark it as a citation. If it originated
// on this site, mark it as an entry.
if ( '' === $comment->comment_type && 'webmention' !== $protocol ) {
$classes[] = 'h-entry';
} else {
$classes[] = 'h-cite';
}

return $classes;
}

0 comments on commit 1729146

Please sign in to comment.