feat(plugin package update, schema update)

Author: Ajit Kumar

client/components/adsense.js

@@ -28,7 +28,7 @@ export default function AdSense({ className = '', name = 'plugin', style = {}, r
   }, 0);
 
   return (
-    <div className={className} style={{ zIndex: '1', ...style }} ref={ref}>
+    <div className={className} style={{ zIndex: '1', ...style, minHeight: '100px' }} ref={ref}>
       <ins
         className='adsbygoogle'
         style={{ display: 'block', zIndex: 1, position: 'relative' }}

client/components/plugins/index.js

@@ -4,7 +4,7 @@ import alert from 'components/dialogs/alert';
 import confirm from 'components/dialogs/confirm';
 import prompt from 'components/dialogs/prompt';
 import select from 'components/dialogs/select';
-import { calcRating, capitalize, getLoggedInUser, hideLoading, showLoading } from 'lib/helpers';
+import { calcRating, capitalize, getLoggedInUser, hideLoading, showLoading, since } from 'lib/helpers';
 import Router from 'lib/Router';
 
 export default function Plugins({ user, orderBy, status, name }) {
@@ -53,23 +53,24 @@ export default function Plugins({ user, orderBy, status, name }) {
 }
 
 function Plugin({
-  name,
   id,
-  version,
-  downloads,
+  name,
   status,
-  isAdmin,
   userId,
-  user_id: pluginUser,
+  version,
+  isAdmin,
+  downloads,
   votes_up: upVotes,
+  user_id: pluginUser,
+  package_updated_at: updatedAt,
   votes_down: downVotes,
   comment_count: comments,
 }) {
   return (
     <a href={`/plugin/${id}`} className='plugin'>
       <div className='plugin-icon' style={{ backgroundImage: `url(/plugin-icon/${id})` }} />
       <div className='plugin-info'>
-        <h2>{name}</h2>
+        <h2 style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{name}</h2>
         <div className='info'>
           <div title='Downloads counter'>
             {downloads.toLocaleString()} <span className='icon download' />
@@ -92,6 +93,7 @@ function Plugin({
             <strong>{version}</strong>
           </small>
         </p>
+        <small>Updated {updatedAt ? since(updatedAt) : 'never'}</small>
         <Actions id={id} isAdmin={isAdmin} user={userId} pluginsUser={pluginUser} />
       </div>
     </a>

client/lib/helpers.js

@@ -1,3 +1,5 @@
+import moment from 'moment';
+
 const on = {
   showloading: [],
   hideloading: [],
@@ -114,3 +116,8 @@ export function gravatar(github) {
 export function calcRating(votesUp, votesDown) {
   return !votesUp && !votesDown ? 'Unrated' : `${Math.round((votesUp / (votesDown + votesUp)) * 100)}%`;
 }
+
+export function since(date) {
+  const now = moment().add(new Date().getTimezoneOffset(), 'minutes');
+  return moment(date).from(now);
+}

client/pages/plugin/index.js

@@ -1,4 +1,5 @@
 import './style.scss';
+import 'highlight.js/styles/github-dark.css';
 import AdSense from 'components/adsense';
 import AjaxForm from 'components/ajaxForm';
 import alert from 'components/dialogs/alert';
@@ -7,8 +8,9 @@ import prompt from 'components/dialogs/prompt';
 import Input from 'components/input';
 import MonthSelect from 'components/MonthSelect';
 import YearSelect from 'components/YearSelect';
+import hilightjs from 'highlight.js';
 import Ref from 'html-tag-js/ref';
-import { calcRating, getLoggedInUser, gravatar } from 'lib/helpers';
+import { calcRating, getLoggedInUser, gravatar, since } from 'lib/helpers';
 import Router from 'lib/Router';
 import { marked } from 'marked';
 import moment from 'moment/moment';
@@ -33,6 +35,7 @@ export default async function Plugin({ id: pluginId, section = 'description' })
     votes_up: votesUp,
     votes_down: votesDown,
     comment_count: commentCount,
+    package_updated_at: updatedAt,
     author_verified: authorVerified,
   } = plugin;
 
@@ -69,6 +72,10 @@ export default async function Plugin({ id: pluginId, section = 'description' })
   /** @type {Ref} */
   let currentSection;
 
+  for (const code of $description.getAll('pre code')) {
+    hilightjs.highlightElement(code);
+  }
+
   changeSection(section, false);
   renderComments(commentListRef, userId, user, pluginId, author);
 
@@ -94,6 +101,7 @@ export default async function Plugin({ id: pluginId, section = 'description' })
         <div className='info-container'>
           <div className='info'>
             <strong>{name}</strong>
+            <small>Updated {updatedAt ? since(updatedAt) : 'never'}</small>
           </div>
           <div className='info'>
             <span className='chip'>v {version}</span>
@@ -298,12 +306,11 @@ function Comment({
   const meta = Ref();
   const flagRef = Ref();
   const reply = Ref();
-  const now = moment().add(new Date().getTimezoneOffset(), 'minutes');
   const createTime = moment(updatedAt);
   const args = [id, pluginAuthor, pluginUserId, user];
   const userIsPluginAuthor = user && pluginUserId === user?.id;
 
-  const createDuration = moment.duration(now.diff(createTime)).humanize();
+  const createDuration = since(createTime);
 
   if (vote === 1) {
     dp.append(<div className='icon thumb_up primary' />);

client/pages/plugin/style.scss

@@ -223,4 +223,14 @@
       color: red;
     }
   }
+
+  article {
+    font-size: 14px;
+
+    input {
+      height: unset;
+      padding: unset;
+      margin: unset;
+    }
+  }
 }

client/pages/publishPlugin/index.js

@@ -176,7 +176,7 @@ export default async function PublishPlugin({ mode = 'publish', id }) {
           throw new Error('Version should be greater than previous version.');
         }
 
-        const changelogs = await zip.file('changelogs.md')?.async('string');
+        const changelogs = (await zip.file('changelogs.md')?.async('string')) || (await zip.file('changelog.md')?.async('string'));
 
         if (changelogs) {
           changelogsInput.el.value = changelogs;