Skip to content

Commit 3bba3db

Browse files
bajrangCoderbajrangCoder
authored
feat: add package updated time display on plugin page (Acode-Foundation#1494)
1 parent 5866d1f commit 3bba3db

File tree

5 files changed

+117
-22
lines changed

5 files changed

+117
-22
lines changed

‎package-lock.json‎

Lines changed: 10 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,10 +123,11 @@
123123
"markdown-it-task-lists": "^2.1.1",
124124
"mime-types": "^2.1.35",
125125
"minimatch": "^9.0.4",
126+
"moment": "^2.30.1",
126127
"mustache": "^4.2.0",
127128
"url-parse": "^1.5.10",
128129
"vanilla-picker": "^2.12.3",
129130
"yargs": "^17.7.2"
130131
},
131132
"browserslist": "cover 100%,not android < 5"
132-
}
133+
}

‎src/pages/plugin/plugin.scss‎

Lines changed: 36 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
gap: 20px;
1313
align-items: start;
1414
margin-bottom: 24px;
15+
1516
.plugin-icon {
1617
width: 80px;
1718
height: 80px;
@@ -20,17 +21,20 @@
2021
background-repeat: no-repeat;
2122
background-size: contain;
2223
}
24+
2325
.plugin-info {
2426
.title-wrapper {
2527
display: flex;
2628
align-items: center;
2729
flex-wrap: wrap;
2830
gap: 16px;
2931
margin-bottom: 8px;
32+
3033
.plugin-name {
3134
font-size: 24px;
3235
margin-bottom: 0;
3336
}
37+
3438
.source-indicator {
3539
display: flex;
3640
align-items: center;
@@ -45,36 +49,48 @@
4549
transition: all 0.3s ease;
4650
border: 1px solid rgba(255, 255, 255, 0.1);
4751
text-decoration: none;
52+
4853
&:hover {
4954
background-color: rgba(0, 0, 0, 0.5);
5055
transform: translateY(-1px);
5156
}
57+
5258
.icon {
5359
color: var(--primary-text-color);
5460
font-size: 14px;
5561
}
5662
}
5763
}
64+
5865
.plugin-meta {
5966
display: flex;
6067
gap: 16px;
6168
flex-wrap: wrap;
6269
color: color-mix(in srgb, var(--primary-text-color) 60%, transparent);
6370
font-size: 14px;
6471
margin-bottom: 12px;
72+
6573
.author-name {
6674
display: inline-flex;
6775
align-items: center;
6876
gap: 4px;
77+
6978
a {
7079
text-decoration: none;
7180
color: inherit;
7281
}
7382
}
83+
7484
.verified-tick {
7585
color: #3b82f6;
7686
font-size: 16px;
7787
}
88+
89+
.version-updated {
90+
opacity: 0.6;
91+
font-size: 0.8em;
92+
margin-left: 4px;
93+
}
7894
}
7995

8096
.metrics-row {
@@ -88,10 +104,12 @@
88104
display: flex;
89105
align-items: center;
90106
gap: 4px;
107+
91108
.metric-value {
92109
color: var(--primary-text-color);
93110
font-weight: 500;
94111
}
112+
95113
.rating-value {
96114
padding: 2px 8px;
97115
border-radius: 12px;
@@ -114,6 +132,7 @@
114132
}
115133
}
116134
}
135+
117136
.keywords {
118137
display: flex;
119138
gap: 6px;
@@ -122,21 +141,19 @@
122141
position: relative;
123142

124143
.keyword {
125-
background: color-mix(
126-
in srgb,
127-
var(--link-text-color) 10%,
128-
transparent
129-
);
144+
background: color-mix(in srgb,
145+
var(--link-text-color) 10%,
146+
transparent);
130147
color: var(--link-text-color);
131148
padding: 6px 10px;
132149
border-radius: 12px;
133150
font-size: 13px;
134151
transition: all 0.2s;
135-
border: 1px solid
136-
color-mix(in srgb, var(--link-text-color) 25%, transparent);
152+
border: 1px solid color-mix(in srgb, var(--link-text-color) 25%, transparent);
137153
}
138154
}
139155
}
156+
140157
.action-buttons {
141158
display: flex;
142159
gap: 8px;
@@ -164,10 +181,12 @@
164181
display: inline-flex;
165182
align-items: center;
166183
gap: 6px;
184+
167185
&:hover {
168186
transform: translateY(-1px);
169187
}
170188
}
189+
171190
.btn-install {
172191
background: var(--button-background-color);
173192
color: white;
@@ -182,12 +201,14 @@
182201
background-color: var(--danger-color) !important;
183202
color: white;
184203
}
204+
185205
.btn-secondary {
186206
background: var(--primary-color);
187207
color: var(--primary-text-color);
188-
shadow: 0 0 10px var(--box-shadow-color);
208+
box-shadow: 0 0 10px var(--box-shadow-color);
189209
}
190210
}
211+
191212
.more-info-small {
192213
text-align: center;
193214
font-style: italic;
@@ -231,6 +252,7 @@
231252
width: calc(100% - 10px);
232253
display: block;
233254
user-select: text;
255+
234256
div {
235257
background: var(--primary-color);
236258
}
@@ -279,17 +301,20 @@
279301
}
280302
}
281303
}
304+
282305
#changelog {
283306
.no-changelog {
284307
text-align: center;
285308
padding: 2rem;
286309
color: color-mix(in srgb, var(--primary-text-color) 60%, transparent);
310+
287311
i {
288312
font-size: 3rem;
289313
margin-bottom: 1rem;
290314
opacity: 0.7;
291315
display: block;
292316
}
317+
293318
p {
294319
margin: 0.5rem 0;
295320
}
@@ -309,6 +334,7 @@
309334
top: 20px;
310335
right: 20px;
311336
}
337+
312338
.title-wrapper,
313339
.plugin-meta,
314340
.metrics-row,
@@ -333,6 +359,7 @@
333359
}
334360
}
335361
}
362+
336363
.reviews-container {
337364
position: fixed;
338365
display: flex;
@@ -450,4 +477,4 @@
450477
}
451478
}
452479
}
453-
}
480+
}

‎src/pages/plugin/plugin.view.js‎

Lines changed: 64 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import DOMPurify from "dompurify";
66
import Ref from "html-tag-js/ref";
77
import actionStack from "lib/actionStack";
88
import constants from "lib/constants";
9+
import moment from "moment";
910
import helpers from "utils/helpers";
1011
import Url from "utils/Url";
1112

@@ -27,6 +28,7 @@ export default (props) => {
2728
author_verified: authorVerified,
2829
author_github: authorGithub,
2930
comment_count: commentCount,
31+
package_updated_at: packageUpdatedAt,
3032
} = props;
3133

3234
let rating = "unrated";
@@ -42,6 +44,40 @@ export default (props) => {
4244
rating = `${Math.round((votesUp / (votesUp + votesDown)) * 100)}%`;
4345
}
4446

47+
const formatUpdatedDate = (dateString) => {
48+
if (!dateString) return null;
49+
50+
try {
51+
// Configure moment for shorter relative time format
52+
moment.updateLocale("en", {
53+
relativeTime: {
54+
future: "in %s",
55+
past: "%s ago",
56+
s: "now",
57+
ss: "now",
58+
m: "1m",
59+
mm: "%dm",
60+
h: "1h",
61+
hh: "%dh",
62+
d: "1d",
63+
dd: "%dd",
64+
M: "1mo",
65+
MM: "%dmo",
66+
y: "1y",
67+
yy: "%dy",
68+
},
69+
});
70+
71+
const updateTime = moment.utc(dateString);
72+
if (!updateTime.isValid()) return null;
73+
74+
return updateTime.fromNow();
75+
} catch (error) {
76+
console.warn("Error parsing date with moment:", dateString, error);
77+
return null;
78+
}
79+
};
80+
4581
return (
4682
<div className="main" id="plugin">
4783
<div className="plugin-header">
@@ -62,7 +98,11 @@ export default (props) => {
6298
<div className="plugin-meta">
6399
<span className="meta-item">
64100
<i className="licons tag" style={{ fontSize: "12px" }}></i>
65-
<Version {...props} />
101+
<Version
102+
{...props}
103+
packageUpdatedAt={packageUpdatedAt}
104+
formatUpdatedDate={formatUpdatedDate}
105+
/>
66106
</span>
67107
<span className="meta-item author-name">
68108
<i className="icon person"></i>
@@ -307,11 +347,32 @@ function Buttons({
307347
);
308348
}
309349

310-
function Version({ currentVersion, version }) {
311-
if (!currentVersion) return <span>v{version}</span>;
350+
function Version({
351+
currentVersion,
352+
version,
353+
packageUpdatedAt,
354+
formatUpdatedDate,
355+
}) {
356+
const updatedText =
357+
formatUpdatedDate && packageUpdatedAt
358+
? formatUpdatedDate(packageUpdatedAt)
359+
: null;
360+
361+
if (!currentVersion) {
362+
return (
363+
<span>
364+
v{version}
365+
{updatedText && (
366+
<span className="version-updated">({updatedText})</span>
367+
)}
368+
</span>
369+
);
370+
}
371+
312372
return (
313373
<span>
314374
v{currentVersion}&nbsp;&#8594;&nbsp;v{version}
375+
{updatedText && <span className="version-updated">({updatedText})</span>}
315376
</span>
316377
);
317378
}

‎www/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -165,11 +165,11 @@
165165

166166
<title>Acode</title>
167167
<!--styles-->
168-
<link rel="stylesheet" href="./css/build/218.css">
169-
<link rel="stylesheet" href="./css/build/32.css">
170-
<link rel="stylesheet" href="./css/build/383.css">
171-
<link rel="stylesheet" href="./css/build/53.css">
172-
<link rel="stylesheet" href="./css/build/609.css">
168+
<link rel="stylesheet" href="./css/build/3383.css">
169+
<link rel="stylesheet" href="./css/build/6053.css">
170+
<link rel="stylesheet" href="./css/build/9032.css">
171+
<link rel="stylesheet" href="./css/build/9218.css">
172+
<link rel="stylesheet" href="./css/build/9609.css">
173173
<link rel="stylesheet" href="./css/build/about.css">
174174
<link rel="stylesheet" href="./css/build/customTheme.css">
175175
<link rel="stylesheet" href="./css/build/donate.css">

0 commit comments

Comments
 (0)