<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[BuddyPress][13305] trunk: Improve the `new_blog_post` activity type layout</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="http://buddypress.trac.wordpress.org/changeset/13305">13305</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"http://buddypress.trac.wordpress.org/changeset/13305","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>imath</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2022-07-26 14:08:37 +0000 (Tue, 26 Jul 2022)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Improve the `new_blog_post` activity type layout
These type of activities are generated when a blog post is published. If <a href="http://buddypress.trac.wordpress.org/changeset/13298">[13298]</a> already brought some improvements making the included post featured image clickable, this changeset complement the first one:
- by adding the post title into the activity content and linking it as well as the "read more" ellipsis to the post permalink. This "read more" link is generated using the WordPress `the_content_more_link` filter which means if your theme is using this filter to adapt the "read more" link, these adaptations will also be applied to the activity "read more" link.
- by changing the markup used into these activities and by adding some CSS rules to make them looks more like WordPress embeds.
Props teeboy4real
Fixes <a href="http://buddypress.trac.wordpress.org/ticket/8052">#8052</a></pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcbpactivitybpactivityfunctionsphp">trunk/src/bp-activity/bp-activity-functions.php</a></li>
<li><a href="#trunksrcbptemplatesbplegacycssbuddypressrtlcss">trunk/src/bp-templates/bp-legacy/css/buddypress-rtl.css</a></li>
<li><a href="#trunksrcbptemplatesbplegacycssbuddypresscss">trunk/src/bp-templates/bp-legacy/css/buddypress.css</a></li>
<li><a href="#trunksrcbptemplatesbpnouveaucommonstyles_bp_activity_entriesscss">trunk/src/bp-templates/bp-nouveau/common-styles/_bp_activity_entries.scss</a></li>
<li><a href="#trunksrcbptemplatesbpnouveaucssbuddypressrtlcss">trunk/src/bp-templates/bp-nouveau/css/buddypress-rtl.css</a></li>
<li><a href="#trunksrcbptemplatesbpnouveaucssbuddypresscss">trunk/src/bp-templates/bp-nouveau/css/buddypress.css</a></li>
<li><a href="#trunktestsphpunittestcasesactivityactionsphp">trunk/tests/phpunit/testcases/activity/actions.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcbpactivitybpactivityfunctionsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/bp-activity/bp-activity-functions.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/bp-activity/bp-activity-functions.php 2022-07-26 13:31:07 UTC (rev 13304)
+++ trunk/src/bp-activity/bp-activity-functions.php 2022-07-26 14:08:37 UTC (rev 13305)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3460,11 +3460,39 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'width' => isset( $GLOBALS['content_width'] ) ? (int) $GLOBALS['content_width'] : 'medium',
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $post_url = '';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $post_url = '';
+ $post_title = '';
+ $bp_excerpt_args = array(
+ 'html' => false,
+ 'filter_shortcodes' => true,
+ 'strip_tags' => true,
+ 'remove_links' => true,
+ );
</ins><span class="cx" style="display: block; padding: 0 10px"> // Get the WP_Post object if this activity type is a blog post.
</span><span class="cx" style="display: block; padding: 0 10px"> if ( $activity['type'] === 'new_blog_post' ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $content = get_post( $activity['secondary_item_id'] );
- $post_url = $content->guid;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $content = get_post( $activity['secondary_item_id'] );
+ $post_url = $content->guid;
+ $post_title = sprintf(
+ '<strong><a href="%1$s">%2$s</a></strong>',
+ esc_url( $post_url ),
+ esc_html( $content->post_title )
+ );
+
+ $more_text = sprintf(
+ '<span>%s</span>',
+ trim( __( ' […]', 'buddypress' ) )
+ );
+
+ /** This filter is documented in wp-admin/includes/post-template.php */
+ $bp_excerpt_args['ending'] = apply_filters(
+ 'the_content_more_link',
+ sprintf(
+ ' <a href="%1$s">%2$s</a>',
+ esc_url( $post_url ),
+ $more_text
+ ),
+ $more_text
+ );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3579,27 +3607,35 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Generate a text excerpt for this activity item (and remove any oEmbeds URLs).
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $summary = bp_create_excerpt( html_entity_decode( $content ), 225, array(
- 'html' => false,
- 'filter_shortcodes' => true,
- 'strip_tags' => true,
- 'remove_links' => true
- ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $summary_parts = array(
+ str_replace(
+ array( "\n", "\r" ),
+ ' ',
+ trim( bp_create_excerpt( html_entity_decode( $content ), 225, $bp_excerpt_args ) )
+ ),
+ );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( $use_media_type === 'embeds' ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $summary .= PHP_EOL . PHP_EOL . $extracted_media['url'];
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $summary_parts[] = PHP_EOL . PHP_EOL . $extracted_media['url'];
</ins><span class="cx" style="display: block; padding: 0 10px"> } elseif ( $use_media_type === 'images' ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $extracted_media_url = isset( $extracted_media['url'] ) ? $extracted_media['url'] : '';
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $image_tag = sprintf( '<img src="%s"> ', esc_url( $extracted_media_url ) );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( $post_url ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $summary .= sprintf( '<a href="%1$s" class="activity-post-featured-image"><img src="%2$s"></a>', esc_url( $post_url ), esc_url( $extracted_media_url ) );
- } else {
- $summary .= sprintf( ' <img src="%s">', esc_url( $extracted_media_url ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $image_tag = sprintf( '<a href="%1$s" class="activity-post-featured-image">%2$s</a> ', esc_url( $post_url ), trim( $image_tag ) );
+ array_unshift( $summary_parts, $image_tag );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> } elseif ( in_array( $use_media_type, array( 'audio', 'videos' ), true ) ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $summary .= PHP_EOL . PHP_EOL . $extracted_media['original']; // Full shortcode.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $summary_parts[] = PHP_EOL . PHP_EOL . $extracted_media['original']; // Full shortcode.
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( $post_title ) {
+ array_unshift( $summary_parts, $post_title );
+ }
+
+ // Join summary parts.
+ $summary = implode( '', $summary_parts );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Filters the newly-generated summary for the activity item.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span></span></pre></div>
<a id="trunksrcbptemplatesbplegacycssbuddypressrtlcss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/bp-templates/bp-legacy/css/buddypress-rtl.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/bp-templates/bp-legacy/css/buddypress-rtl.css 2022-07-26 13:31:07 UTC (rev 13304)
+++ trunk/src/bp-templates/bp-legacy/css/buddypress-rtl.css 2022-07-26 14:08:37 UTC (rev 13305)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -326,6 +326,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> padding-right: 10px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#buddypress .activity-list li.new_blog_post .activity-content .activity-inner strong {
+ display: block;
+ margin-bottom: 0.8em;
+}
+
+#buddypress .activity-list li.new_blog_post .activity-content .activity-inner img {
+ float: right;
+ margin-left: 0.8em;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> body.activity-permalink #buddypress .activity-content .activity-inner,
</span><span class="cx" style="display: block; padding: 0 10px"> body.activity-permalink #buddypress .activity-content blockquote {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-right: 0;
</span></span></pre></div>
<a id="trunksrcbptemplatesbplegacycssbuddypresscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/bp-templates/bp-legacy/css/buddypress.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/bp-templates/bp-legacy/css/buddypress.css 2022-07-26 13:31:07 UTC (rev 13304)
+++ trunk/src/bp-templates/bp-legacy/css/buddypress.css 2022-07-26 14:08:37 UTC (rev 13305)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -326,6 +326,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> padding-left: 10px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#buddypress .activity-list li.new_blog_post .activity-content .activity-inner strong {
+ display: block;
+ margin-bottom: 0.8em;
+}
+
+#buddypress .activity-list li.new_blog_post .activity-content .activity-inner img {
+ float: left;
+ margin-right: 0.8em;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> body.activity-permalink #buddypress .activity-content .activity-inner,
</span><span class="cx" style="display: block; padding: 0 10px"> body.activity-permalink #buddypress .activity-content blockquote {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-left: 0;
</span></span></pre></div>
<a id="trunksrcbptemplatesbpnouveaucommonstyles_bp_activity_entriesscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/bp-templates/bp-nouveau/common-styles/_bp_activity_entries.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/bp-templates/bp-nouveau/common-styles/_bp_activity_entries.scss 2022-07-26 13:31:07 UTC (rev 13304)
+++ trunk/src/bp-templates/bp-nouveau/common-styles/_bp_activity_entries.scss 2022-07-26 14:08:37 UTC (rev 13305)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -90,7 +90,23 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> } // close li forum elements
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ &.new_blog_post {
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .activity-inner {
+
+ strong {
+ display: block;
+ margin-bottom: 0.8em;
+ }
+
+ img {
+ float: left;
+ margin-right: 0.8em;
+ }
+ }
+ } // close li blog post elements
+
+
</ins><span class="cx" style="display: block; padding: 0 10px"> &.newest_mentions_activity,
</span><span class="cx" style="display: block; padding: 0 10px"> &.newest_friends_activity,
</span><span class="cx" style="display: block; padding: 0 10px"> &.newest_groups_activity,
</span></span></pre></div>
<a id="trunksrcbptemplatesbpnouveaucssbuddypressrtlcss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/bp-templates/bp-nouveau/css/buddypress-rtl.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/bp-templates/bp-nouveau/css/buddypress-rtl.css 2022-07-26 13:31:07 UTC (rev 13304)
+++ trunk/src/bp-templates/bp-nouveau/css/buddypress-rtl.css 2022-07-26 14:08:37 UTC (rev 13305)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1306,6 +1306,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> padding-right: 1em;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.activity-list .activity-item.new_blog_post .activity-inner strong {
+ display: block;
+ margin-bottom: 0.8em;
+}
+
+.activity-list .activity-item.new_blog_post .activity-inner img {
+ float: right;
+ margin-left: 0.8em;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .activity-list .activity-item.newest_mentions_activity, .activity-list .activity-item.newest_friends_activity, .activity-list .activity-item.newest_groups_activity, .activity-list .activity-item.newest_blogs_activity {
</span><span class="cx" style="display: block; padding: 0 10px"> background: rgba(31, 179, 221, 0.1);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcbptemplatesbpnouveaucssbuddypresscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/bp-templates/bp-nouveau/css/buddypress.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/bp-templates/bp-nouveau/css/buddypress.css 2022-07-26 13:31:07 UTC (rev 13304)
+++ trunk/src/bp-templates/bp-nouveau/css/buddypress.css 2022-07-26 14:08:37 UTC (rev 13305)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1306,6 +1306,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> padding-left: 1em;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.activity-list .activity-item.new_blog_post .activity-inner strong {
+ display: block;
+ margin-bottom: 0.8em;
+}
+
+.activity-list .activity-item.new_blog_post .activity-inner img {
+ float: left;
+ margin-right: 0.8em;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .activity-list .activity-item.newest_mentions_activity, .activity-list .activity-item.newest_friends_activity, .activity-list .activity-item.newest_groups_activity, .activity-list .activity-item.newest_blogs_activity {
</span><span class="cx" style="display: block; padding: 0 10px"> background: rgba(31, 179, 221, 0.1);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunktestsphpunittestcasesactivityactionsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/phpunit/testcases/activity/actions.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/testcases/activity/actions.php 2022-07-26 13:31:07 UTC (rev 13304)
+++ trunk/tests/phpunit/testcases/activity/actions.php 2022-07-26 14:08:37 UTC (rev 13305)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -241,7 +241,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $a = $this->activity_exists_for_post( $post_id, 'new_post', true );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $this->assertSame( $post->post_content, $a->content, 'The Activity about a published post type should be updated when the post content has changed.' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $this->assertSame( bp_activity_create_summary( $post->post_content, (array) $a ), $a->content, 'The Activity about a published post type should be updated when the post content has changed.' );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> protected function activity_exists_for_post( $post_id, $action, $get_object = false ) {
</span></span></pre>
</div>
</div>
</body>
</html>