Standardise MySQL session timezone and readd 'x time ago' things.

assets/less/mio/classes/forum/post.less

@@ -72,11 +72,6 @@
             margin: 5px;
             max-width: 170px;
 
-            // somewhat temporary?
-            // more stuff will be added eventually which this will be mixed in with
-            display: flex;
-            flex-direction: column-reverse;
-
             @media (max-width: @mio-forum-post-mobile) {
                 display: none;
             }

assets/less/mio/classes/news/preview.less

@@ -28,6 +28,10 @@
         flex-shrink: 0;
     }
 
+    &__date {
+        display: block;
+    }
+
     &__user {
         text-decoration: none;
         color: inherit;

build.sh

@@ -12,19 +12,23 @@ PUBLIC_JS="$PUBLIC_DIR/js"
 
 NODE_PATH='./node_modules'
 
-NODE_DEST_JS="$PUBLIC_JS/libs.js"
+NODE_DEST_JS="$PUBLIC_JS/libraries.js"
 NODE_IMPORT_JS=(
     #'turbolinks/dist/turbolinks.js'
     #'highlightjs/highlight.pack.min.js'
+    'timeago.js/dist/timeago.min.js'
+    'timeago.js/dist/timeago.locales.min.js'
 )
 
-NODE_DEST_CSS="$PUBLIC_CSS/libs.css"
+NODE_DEST_CSS="$PUBLIC_CSS/libraries.css"
 NODE_IMPORT_CSS=(
     #'highlightjs/styles/default.css'
 )
 
 # delete old files, using find to avoid errors
 echo "=> Cleanup"
+mkdir -p $PUBLIC_CSS
+mkdir -p $PUBLIC_JS
 find $ASSETS_TS -type f -name "*.d.ts" -delete -print
 find $PUBLIC_CSS -type f -name "*.css" -delete -print
 find $PUBLIC_JS -type f -name "*.js" -delete -print

composer.json

@@ -14,7 +14,8 @@
         "nesbot/carbon": "~1.22",
         "swiftmailer/swiftmailer": "~6.0",
         "erusev/parsedown": "~1.6",
-        "geoip2/geoip2": "~2.0"
+        "geoip2/geoip2": "~2.0",
+        "twig/extensions": "^1.5"
     },
     "require-dev": {
         "phpunit/phpunit": "~6.0"

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "f30e0f8bcfb4eb650250a7e4efb17058",
+    "content-hash": "b859e162d3882d5c8dbbfbb02b1eb0b7",
     "packages": [
         {
             "name": "composer/ca-bundle",
@@ -603,6 +603,62 @@
             "homepage": "https://symfony.com",
             "time": "2018-04-30T01:23:47+00:00"
         },
+        {
+            "name": "twig/extensions",
+            "version": "v1.5.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/twigphp/Twig-extensions.git",
+                "reference": "d188c76168b853481cc75879ea045bf93d718e9c"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/twigphp/Twig-extensions/zipball/d188c76168b853481cc75879ea045bf93d718e9c",
+                "reference": "d188c76168b853481cc75879ea045bf93d718e9c",
+                "shasum": ""
+            },
+            "require": {
+                "twig/twig": "~1.27|~2.0"
+            },
+            "require-dev": {
+                "symfony/phpunit-bridge": "~3.3@dev",
+                "symfony/translation": "~2.3|~3.0"
+            },
+            "suggest": {
+                "symfony/translation": "Allow the time_diff output to be translated"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.5-dev"
+                }
+            },
+            "autoload": {
+                "psr-0": {
+                    "Twig_Extensions_": "lib/"
+                },
+                "psr-4": {
+                    "Twig\\Extensions\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                }
+            ],
+            "description": "Common additional features for Twig that do not directly belong in core",
+            "homepage": "http://twig.sensiolabs.org/doc/extensions/index.html",
+            "keywords": [
+                "i18n",
+                "text"
+            ],
+            "time": "2017-06-08T18:19:53+00:00"
+        },
         {
             "name": "twig/twig",
             "version": "v2.4.8",

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "timeago.js": "^3.0.2"
+  }
+}

src/Database.php

@@ -141,7 +141,11 @@ final class Database
 
                 $dsn .= 'dbname=' . $this->configManager->get($section, 'database', 'string', 'misuzu') . ';';
 
-                $options[PDO::MYSQL_ATTR_INIT_COMMAND] = "SET SESSION sql_mode='ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_ENGINE_SUBSTITUTION'";
+                $options[PDO::MYSQL_ATTR_INIT_COMMAND] = "
+                    SET SESSION
+                        sql_mode='ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_ENGINE_SUBSTITUTION',
+                        time_zone = '+00:00';
+                ";
                 break;
         }
 

src/TemplateEngine.php

@@ -2,6 +2,7 @@
 namespace Misuzu;
 
 use Twig_Environment;
+use Twig_Extensions_Extension_Date;
 use Twig_Loader_Filesystem;
 use Twig_SimpleFilter;
 use Twig_SimpleFunction;
@@ -56,6 +57,7 @@ class TemplateEngine
             'auto_reload' => $autoReload,
             'debug' => $debug,
         ]);
+        $this->twig->addExtension(new Twig_Extensions_Extension_Date);
     }
 
     /**

views/mio/forum/macros.twig

@@ -101,7 +101,9 @@
                                         style="color:{{ forum.recent_post_user_colour|colour_get_css }}"
                                         class="forum__listing__entry__activity__user">{{ forum.recent_post_username }}</a>,
                                 {% endif %}
-                                {{ forum.recent_post_created }}
+                                <time
+                                    datetime="{{ forum.recent_post_created|date('c') }}"
+                                    title="{{ forum.recent_post_created|date('r') }}">{{ forum.recent_post_created|time_diff }}</time>
                             </div>
                         </div>
 
@@ -135,7 +137,10 @@
                 {% if archived %}
                     This topic has been <span class="forum__topic__locked__time">archived</span>.
                 {% else %}
-                    This topic was locked on <time class="forum__topic__locked__time">{{ locked }}</time>.
+                    This topic was locked <time
+                        class="forum__topic__locked__time"
+                        datetime="{{ locked|date('c') }}"
+                        title="{{ locked|date('r') }}">{{ locked|time_diff }}</time>.
                 {% endif %}
             </div>
         </div>
@@ -197,7 +202,7 @@
                         style="color:{{ topic.author_colour|colour_get_css }}">{{ topic.author_name }}</a>,
 
                 {% endif %}
-                {{ topic.topic_created }}
+                <time datetime="{{ topic.topic_created|date('c') }}" title="{{ topic.topic_created|date('r') }}">{{ topic.topic_created|time_diff }}</time>
             </div>
         </div>
 
@@ -214,7 +219,9 @@
             <div class="forum__topics__entry__activity__info">
                 <div class="forum__topics__entry__activity__datetime">
                     <a href="/forum/topic.php?p={{ topic.response_id }}#p{{ topic.response_id }}" class="forum__topics__entry__activity__datetime__link">
-                        {{ topic.response_created }}
+                        <time
+                            datetime="{{ topic.response_created|date('c') }}"
+                            title="{{ topic.response_created|date('r') }}">{{ topic.response_created|time_diff }}</time>
                     </a>
                 </div>
                 {% if topic.respondent_id is not null %}
@@ -262,7 +269,7 @@
                         style="color:{{ post.poster_colour|colour_get_css }}">{{ post.poster_name }}</div>
                 </a>
                 <div class="forum__post__author__joined">
-                    joined {{ post.poster_joined }}
+                    joined <time datetime="{{ post.poster_joined|date('c') }}" title="{{ post.poster_joined|date('r') }}">{{ post.poster_joined|time_diff }}</time>
                 </div>
             </div>
         {% else %}
@@ -276,7 +283,7 @@
         <div class="forum__post__content">
             <div class="forum__post__content__info">
                 <a class="forum__post__content__info__link" href="/forum/topic.php?t={{ post.topic_id }}#p{{ post.post_id }}">
-                    {{ post.post_created }}
+                    <time datetime="{{ post.post_created|date('c') }}" title="{{ post.post_created|date('r') }}">{{ post.post_created|time_diff }}</time>
                 </a>
                 <a class="forum__post__content__info__link" href="/forum/topic.php?p={{ post.post_id }}#p{{ post.post_id }}">
                     #{{ post.post_id }}

views/mio/forum/topic.twig

@@ -36,12 +36,12 @@
     {% if can_reply %}
         {{ forum_posting_form('Reply', topic_info.topic_id, true, 'reply', true) }}
 
-        <!--script>
+        <script>
             window.addEventListener('load', () => {
                 closeContainer('reply');
                 document.getElementById('reply').children[0].addEventListener('mouseover', () => openContainer('reply'));
             });
-        </script-->
+        </script>
     {% endif %}
 
     {{ navigation(mio_navigation, '/forum/') }}

views/mio/master.twig

@@ -77,7 +77,12 @@
                 </div>
             </footer>
         </div>
+        <script src="/js/libraries.js" charset="utf-8"></script>
         <script>
+            window.addEventListener('load', () => {
+                timeago().render(document.querySelectorAll('time'));
+            });
+
             // move this to an external JS/TS file eventually.
             const containerClass = 'container',
                 containerHiddenClass = 'container--hidden';

views/mio/news/macros.twig

@@ -9,9 +9,9 @@
                 <p><b><i><a href="/news.php?p={{ post.post_id }}">View full post</a></i></b></p>
             </div>
             <div class="news__preview__info">
-                <div class="news__preview__date">
+                <time class="news__preview__date" datetime="{{ post.created_at|date('c') }}" title="{{ post.created_at|date('r') }}">
-                    {{ post.created_at }}
+                    {{ post.created_at|time_diff }}
-                </div>
+                </time>
                 <a class="news__preview__user" href="/profile.php?u={{ post.user_id }}">
                     <div class="news__preview__user__name" style="color:{{ post.display_colour|colour_get_css }}">
                         {{ post.username }}

views/mio/news/post.twig

@@ -34,9 +34,9 @@
                     <div class="news__post__info__name">
                         Posted
                     </div>
-                    <div class="news__post__info__value">
+                    <time class="news__post__info__value" datetime="{{ post.created_at|date('c') }}" title="{{ post.created_at|date('r') }}">
-                        {{ post.created_at }}
+                        {{ post.created_at|time_diff }}
-                    </div>
+                    </time>
                 </div>
 
                 {# TODO: make this work

views/mio/settings/login-history.twig

@@ -20,6 +20,7 @@
                         {% endif %}
                     </div>
                 </div>
+
                 <div class="settings__login-history__column settings__login-history__column--success">
                     <div class="settings__login-history__column__name">
                         Was Successful?
@@ -28,14 +29,16 @@
                         {{ attempt.was_successful ? 'Yes' : 'No' }}
                     </div>
                 </div>
-                <div class="settings__login-history__column settings__login-history__column--created" onmouseenter="this.children[1].textContent = '{{ attempt.created_at }}';" onmouseleave="this.children[1].textContent = '{{ attempt.created_at }}';"> {#.diffForHumans #}
+
+                <div class="settings__login-history__column settings__login-history__column--created" title="{{ attempt.created_at|date('r') }}">
                     <div class="settings__login-history__column__name">
                         Attempted
                     </div>
-                    <div class="settings__login-history__column__value">
+                    <time class="settings__login-history__column__value" datetime="{{ attempt.created_at|date('c') }}">
-                        {{ attempt.created_at }} {#.diffForHumans #}
+                        {{ attempt.created_at|time_diff }}
-                    </div>
+                    </time>
                 </div>
+
                 {% if attempt.user_agent|length > 0 %}
                     <div class="settings__login-history__column settings__login-history__column--user_agent">
                         <div class="settings__login-history__column__name">

views/mio/settings/sessions.twig

@@ -21,22 +21,22 @@
                     </div>
                 </div>
 
-                <div class="settings__sessions__column settings__sessions__column--created" onmouseenter="this.children[1].textContent = '{{ session.created_at }}';" onmouseleave="this.children[1].textContent = '{{ session.created_at }}';"> {# .diffForHumans #}
+                <div class="settings__sessions__column settings__sessions__column--created" title="{{ session.created_at|date('r') }}">
                     <div class="settings__sessions__column__name">
                         Created
                     </div>
-                    <div class="settings__sessions__column__value">
+                    <time class="settings__sessions__column__value" datetime="{{ session.created_at|date('c') }}">
-                        {{ session.created_at }} {# .diffForHumans #}
+                        {{ session.created_at|time_diff }}
-                    </div>
+                    </time>
                 </div>
 
-                <div class="settings__sessions__column settings__sessions__column--expires" onmouseenter="this.children[1].textContent = '{{ session.expires_on }}';" onmouseleave="this.children[1].textContent = '{{ session.expires_on }}';"> {# .diffForHumans #}
+                <div class="settings__sessions__column settings__sessions__column--expires" title="{{ session.expires_on|date('r') }}">
                     <div class="settings__sessions__column__name">
                         Expires
                     </div>
-                    <div class="settings__sessions__column__value">
+                    <time class="settings__sessions__column__value" datetime="{{ session.expires_on|date('c') }}">
-                        {{ session.expires_on }} {# .diffForHumans #}
+                        {{ session.expires_on|time_diff }}
-                    </div>
+                    </time>
                 </div>
 
                 {% if session.user_agent|length > 0 %}

views/mio/user/view.twig

@@ -91,28 +91,27 @@
                         </div>
 
                         <div class="profile__info__block">
-                            <div class="profile__info__row" title="{{ profile.created_at }}">{# .format('r') #}
+                            <div class="profile__info__row" title="{{ profile.created_at|date('r') }}">
                                 <div class="profile__info__column profile__info__column--heading">
                                     Joined
                                 </div>
-                                <div class="profile__info__column">
+                                <time class="profile__info__column" datetime="{{ profile.created_at|date('c') }}">
-                                    {{ profile.created_at }}{# .diffForHumans #}
+                                    {{ profile.created_at|time_diff }}
-                                </div>
+                                </time>
                             </div>
 
                             {% if profile.last_seen is not null %}
-                                <div class="profile__info__row" title="{{ profile.last_seen }}">
+                                <div class="profile__info__row" title="{{ profile.last_seen|date('r') }}">
                                     <div class="profile__info__column profile__info__column--heading">
                                         Last Seen
                                     </div>
-                                    <div class="profile__info__column">
+                                    <time class="profile__info__column" datetime="{{ profile.last_seen|date('c') }}">
-                                        {#{% if profile.last_seen.addMinute.timestamp >= ''|date('U') %}
+                                        {% if profile.last_seen|date('U') + 10 >= ''|date('U') %}
-                                            Online now
+                                            just now
                                         {% else %}
-                                            {{ profile.last_seen }}{# .diffForHumans #\}
+                                            {{ profile.last_seen|time_diff }}
-                                        {% endif %}#}
+                                        {% endif %}
-                                        {{ profile.last_seen }}
+                                    </time>
-                                    </div>
                                 </div>
                             {% endif %}
                         </div>

views/nova/user/view.twig

@@ -45,7 +45,7 @@
             <div class="profile__username">{{ profile.username }}</div>
         </div>
         <div class="profile__header-sub profile__dates">
-            <div class="profile__date--joined">Joined {{ profile.created_at.format('r') }}</div>
+            <div class="profile__date--joined">Joined {{ profile.created_at|date('r') }}</div>
         </div>
     </div>
     {% endspaceless %}

yarn.lock

@@ -0,0 +1,13 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@types/jquery@^2.0.40":
+  version "2.0.49"
+  resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-2.0.49.tgz#95bd7064caebf65bde10429dff491a1aea05b67d"
+
+timeago.js@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/timeago.js/-/timeago.js-3.0.2.tgz#32a67e7c0d887ea42ca588d3aae26f77de5e76cc"
+  dependencies:
+    "@types/jquery" "^2.0.40"