3
3
< head >
4
4
< meta charset ="UTF-8 ">
5
5
< meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6
- < meta name ="description " content ="Browse a list of free jQuery plugins to use in your projects. Find the latest jQuery plugins with direct links. ">
6
+ < meta name ="description " content ="Browse a list of free jQuery plugins to use in your web projects. Find the latest jQuery plugins with direct links and last update dates . ">
7
7
< title > jQuery Plugins List</ title >
8
8
< style >
9
9
body {
10
- font-family : Arial, sans-serif;
11
- background-color : # f4f4f4 ;
10
+ font-family : ' Arial' , sans-serif;
11
+ background-color : # f8f9fa ;
12
12
margin : 0 ;
13
13
padding : 20px ;
14
14
}
17
17
margin : auto;
18
18
background : # fff ;
19
19
padding : 20px ;
20
- border-radius : 8 px ;
21
- box-shadow : 0 0 10px rgba (0 , 0 , 0 , 0.1 );
20
+ border-radius : 10 px ;
21
+ box-shadow : 0 4 px 10px rgba (0 , 0 , 0 , 0.1 );
22
22
}
23
23
h1 {
24
24
text-align : center;
29
29
padding : 0 ;
30
30
}
31
31
li {
32
- background : # fff ;
33
- margin : 10 px 0 ;
34
- padding : 12 px ;
35
- border-radius : 5 px ;
36
- box-shadow : 0 2px 4 px rgba (0 , 0 , 0 , 0.1 );
32
+ background : # ffffff ;
33
+ margin : 15 px 0 ;
34
+ padding : 15 px ;
35
+ border-radius : 8 px ;
36
+ box-shadow : 0 2px 5 px rgba (0 , 0 , 0 , 0.1 );
37
37
transition : transform 0.2s ease-in-out;
38
38
}
39
39
li : hover {
40
- transform : translateY (-3 px );
40
+ transform : translateY (-4 px );
41
41
}
42
42
a {
43
43
text-decoration : none;
48
48
a : hover {
49
49
text-decoration : underline;
50
50
}
51
+ .meta-info {
52
+ display : flex;
53
+ justify-content : space-between;
54
+ font-size : 14px ;
55
+ color : # 666 ;
56
+ margin-top : 5px ;
57
+ }
58
+ .meta-info span {
59
+ background : # eef1f7 ;
60
+ padding : 5px 10px ;
61
+ border-radius : 5px ;
62
+ }
51
63
</ style >
52
64
</ head >
53
65
< body >
@@ -62,6 +74,14 @@ <h1>jQuery Plugins List</h1>
62
74
const sitemapUrl = "https://codehimblog.github.io/sitemap_jquery.xml" ;
63
75
const postsContainer = document . getElementById ( "posts" ) ;
64
76
77
+ // Function to format branding names properly
78
+ function formatTitleCase ( text ) {
79
+ const specialWords = [ "jQuery" , "HTML" , "CSS" , "Bootstrap" , "JavaScript" , "React" , "Vue" , "Angular" ] ; // Known brand names
80
+ return text . split ( "-" ) . map ( word => {
81
+ return specialWords . includes ( word ) ? word : word . charAt ( 0 ) . toUpperCase ( ) + word . slice ( 1 ) ;
82
+ } ) . join ( " " ) ;
83
+ }
84
+
65
85
fetch ( sitemapUrl )
66
86
. then ( response => response . text ( ) )
67
87
. then ( str => new window . DOMParser ( ) . parseFromString ( str , "text/xml" ) )
@@ -71,23 +91,29 @@ <h1>jQuery Plugins List</h1>
71
91
72
92
for ( let url of urls ) {
73
93
let loc = url . getElementsByTagName ( "loc" ) [ 0 ] . textContent ;
94
+ let lastmod = url . getElementsByTagName ( "lastmod" ) [ 0 ] ?. textContent || "Unknown Date" ;
74
95
75
- // Extract the title after "/jquery-plugins/" and before ".html"
96
+ // Extract the plugin title and author
76
97
let match = loc . match ( / \/ j q u e r y - p l u g i n s \/ ( .+ ?) \. h t m l / ) ;
77
98
if ( match ) {
78
- let title = match [ 1 ]
79
- . split ( "-" ) // Split by dashes
80
- . map ( word => word . charAt ( 0 ) . toUpperCase ( ) + word . slice ( 1 ) ) // Convert to title case
81
- . join ( " " ) ;
99
+ let rawTitle = match [ 1 ] ;
100
+ let title = formatTitleCase ( rawTitle . replace ( / - b y - . + $ / , "" ) ) ; // Remove author from title
101
+ let authorMatch = rawTitle . match ( / - b y - ( . + ) $ / ) ;
102
+ let author = authorMatch ? formatTitleCase ( authorMatch [ 1 ] ) : "Unknown" ;
82
103
83
104
// Create list item with link
84
105
let li = document . createElement ( "li" ) ;
85
106
let a = document . createElement ( "a" ) ;
86
107
a . href = loc ;
87
108
a . textContent = title ;
88
109
a . target = "_blank" ; // Open link in new tab
89
-
110
+
111
+ let metaDiv = document . createElement ( "div" ) ;
112
+ metaDiv . className = "meta-info" ;
113
+ metaDiv . innerHTML = `<span>🗓️ ${ lastmod } </span> <span>👤 ${ author } </span>` ;
114
+
90
115
li . appendChild ( a ) ;
116
+ li . appendChild ( metaDiv ) ;
91
117
ul . appendChild ( li ) ;
92
118
}
93
119
}
0 commit comments