Skip to content

jquery: Update Twitter to x ,add mastodon and replace FontAwesome font with SVG icons #489

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
HermitShamiko wants to merge 17 commits into
base: main
Choose a base branch
from
+93 −52
Open

jquery: Update Twitter to x ,add mastodon and replace FontAwesome font with SVG icons #489

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
d2201b8
Add Fontawesome SVG file
HermitShamiko Feb 23, 2026
7d2aba2
Update sites.php
HermitShamiko Feb 23, 2026
a74a271
Update footer-bottom.php
HermitShamiko Feb 23, 2026
210e459
Update content-page.php
HermitShamiko Feb 23, 2026
0a85e8f
Update base.css
HermitShamiko Feb 23, 2026
ea0488e
Update style.css
HermitShamiko Feb 23, 2026
7323017
Fixed some bugs
HermitShamiko Feb 23, 2026
c6daba6
Fix SVG ViewBox issue
HermitShamiko Feb 23, 2026
03a035e
Fixed some bugs
HermitShamiko Feb 24, 2026
bd3ef84
Optimize GitHub icon display
HermitShamiko Feb 24, 2026
77e0463
Fix viewBox issue
HermitShamiko Feb 24, 2026
bf1bc3f
Fixed the position issue of the article link icon.
HermitShamiko Feb 25, 2026
97f17e8
Update footer-bottom.php
HermitShamiko Mar 4, 2026
406f15e
Update base.css
HermitShamiko Mar 4, 2026
81dff4f
Fix™ issue causing garbled text
HermitShamiko Mar 4, 2026
9b59107
Add Fontawesome SVG file
HermitShamiko Mar 7, 2026
ee9bb13
Update base.css
HermitShamiko Mar 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions sites.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ function jquery_sites() {
'jquery_body_class' => 'jquery-ui',
'jquery_typesense_key' => 'Zh8mMgohXECel9wjPwqT7lekLSG3OCgz',
'jquery_typesense_collection' => 'jqueryui_com',
'jquery_twitter_link' => 'https://twitter.com/jqueryui',
'jquery_x_link' => 'https://x.com/jqueryui',
),
),
'blog.jqueryui.com' => array(
Expand All @@ -95,7 +95,7 @@ function jquery_sites() {
'jquery_is_blog' => true,
'jquery_author' => 'jQuery Team',
'jquery_description' => 'jQuery: The Write Less, Do More, JavaScript Library',
'jquery_twitter_link' => 'https://twitter.com/jqueryui',
'jquery_x_link' => 'https://x.com/jqueryui',
),
),
'api.jqueryui.com' => array(
Expand All @@ -111,7 +111,7 @@ function jquery_sites() {
'jquery_logo_link'=> 'https://jqueryui.com/',
'jquery_typesense_key' => 'Zh8mMgohXECel9wjPwqT7lekLSG3OCgz',
'jquery_typesense_collection' => 'jqueryui_com',
'jquery_twitter_link' => 'https://twitter.com/jqueryui',
'jquery_x_link' => 'https://x.com/jqueryui',
),
),
'api.jqueryui.com/1.8' => array(
Expand All @@ -127,7 +127,7 @@ function jquery_sites() {
'jquery_logo_link'=> 'https://jqueryui.com/',
'jquery_typesense_key' => 'Zh8mMgohXECel9wjPwqT7lekLSG3OCgz',
'jquery_typesense_collection' => 'jqueryui_com',
'jquery_twitter_link' => 'https://twitter.com/jqueryui',
'jquery_x_link' => 'https://x.com/jqueryui',
),
),
'api.jqueryui.com/1.9' => array(
Expand All @@ -143,7 +143,7 @@ function jquery_sites() {
'jquery_logo_link'=> 'https://jqueryui.com/',
'jquery_typesense_key' => 'Zh8mMgohXECel9wjPwqT7lekLSG3OCgz',
'jquery_typesense_collection' => 'jqueryui_com',
'jquery_twitter_link' => 'https://twitter.com/jqueryui',
'jquery_x_link' => 'https://x.com/jqueryui',
),
),
'jquery.org' => array(
Expand All @@ -168,7 +168,7 @@ function jquery_sites() {
'jquery_body_class' => 'jquery-mobile',
'jquery_typesense_key' => 'Zh8mMgohXECel9wjPwqT7lekLSG3OCgz',
'jquery_typesense_collection' => 'jquerymobile_com',
'jquery_twitter_link' => 'https://twitter.com/jquerymobile',
'jquery_x_link' => 'https://x.com/jquerymobile',
),
),
'api.jquerymobile.com' => array(
Expand All @@ -184,7 +184,7 @@ function jquery_sites() {
'jquery_logo_link'=> 'https://jquerymobile.com/',
'jquery_typesense_key' => 'Zh8mMgohXECel9wjPwqT7lekLSG3OCgz',
'jquery_typesense_collection' => 'jquerymobile_com',
'jquery_twitter_link' => 'https://twitter.com/jquerymobile',
'jquery_x_link' => 'https://x.com/jquerymobile',
),
),
'blog.jquerymobile.com' => array(
Expand All @@ -197,7 +197,7 @@ function jquery_sites() {
'jquery_is_blog' => true,
'jquery_author' => 'jQuery Team',
'jquery_description' => 'jQuery: The Write Less, Do More, JavaScript Library',
'jquery_twitter_link' => 'https://twitter.com/jquerymobile',
'jquery_x_link' => 'https://x.com/jquerymobile',
),
),
'brand.jquery.org' => array(
Expand Down Expand Up @@ -246,7 +246,7 @@ function jquery_sites() {
'jquery_logo_link'=> 'https://jquerymobile.com/',
'jquery_typesense_key' => 'Zh8mMgohXECel9wjPwqT7lekLSG3OCgz',
'jquery_typesense_collection' => 'jquerymobile_com',
'jquery_twitter_link' => 'https://twitter.com/jquerymobile',
'jquery_x_link' => 'https://x.com/jquerymobile',
),
),
'api.jqueryui.com/1.10' => array(
Expand All @@ -262,7 +262,7 @@ function jquery_sites() {
'jquery_logo_link'=> 'https://jqueryui.com/',
'jquery_typesense_key' => 'Zh8mMgohXECel9wjPwqT7lekLSG3OCgz',
'jquery_typesense_collection' => 'jqueryui_com',
'jquery_twitter_link' => 'https://twitter.com/jqueryui',
'jquery_x_link' => 'https://x.com/jqueryui',
),
),
'api.jqueryui.com/1.12' => array(
Expand All @@ -278,7 +278,7 @@ function jquery_sites() {
'jquery_logo_link'=> 'https://jqueryui.com/',
'jquery_typesense_key' => 'Zh8mMgohXECel9wjPwqT7lekLSG3OCgz',
'jquery_typesense_collection' => 'jqueryui_com',
'jquery_twitter_link' => 'https://twitter.com/jqueryui',
'jquery_x_link' => 'https://x.com/jqueryui',
),
),
'api.jqueryui.com/1.11' => array(
Expand All @@ -294,7 +294,7 @@ function jquery_sites() {
'jquery_logo_link'=> 'https://jqueryui.com/',
'jquery_typesense_key' => 'Zh8mMgohXECel9wjPwqT7lekLSG3OCgz',
'jquery_typesense_collection' => 'jqueryui_com',
'jquery_twitter_link' => 'https://twitter.com/jqueryui',
'jquery_x_link' => 'https://x.com/jqueryui',
),
),
'api.jquerymobile.com/1.4' => array(
Expand All @@ -310,7 +310,7 @@ function jquery_sites() {
'jquery_logo_link'=> 'https://jquerymobile.com/',
'jquery_typesense_key' => 'Zh8mMgohXECel9wjPwqT7lekLSG3OCgz',
'jquery_typesense_collection' => 'jquerymobile_com',
'jquery_twitter_link' => 'https://twitter.com/jquerymobile',
'jquery_x_link' => 'https://x.com/jquerymobile',
),
),
'releases.jquery.com' => array(
Expand Down Expand Up @@ -338,7 +338,7 @@ function jquery_sites() {
'jquery_logo_link'=> 'https://jqueryui.com/',
'jquery_typesense_key' => 'Zh8mMgohXECel9wjPwqT7lekLSG3OCgz',
'jquery_typesense_collection' => 'jqueryui_com',
'jquery_twitter_link' => 'https://twitter.com/jqueryui',
'jquery_x_link' => 'https://x.com/jqueryui',
),
),
'api.jqueryui.com/1.14' => array(
Expand All @@ -354,7 +354,7 @@ function jquery_sites() {
'jquery_logo_link'=> 'https://jqueryui.com/',
'jquery_typesense_key' => 'Zh8mMgohXECel9wjPwqT7lekLSG3OCgz',
'jquery_typesense_collection' => 'jqueryui_com',
'jquery_twitter_link' => 'https://twitter.com/jqueryui',
'jquery_x_link' => 'https://x.com/jqueryui',
),
),
);
Expand Down
65 changes: 35 additions & 30 deletions themes/jquery/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,10 +105,11 @@ body {
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-size: 1.2em;
text-decoration: inherit;
display: inline-block;
speak: none;
display: inline-block;
width: 1.2em;
height: 1.2em;
vertical-align: sub;
filter: invert(0.4);
}
.icon-info-sign:before { content: "\f05a"; }

Expand Down Expand Up @@ -727,27 +728,28 @@ ul.icons li [class*=" icon-"] {
}
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.icon-bolt:before { content: "\f0e7"; } /* Used: learn */
.icon-calendar:before { content: "\f073"; } /* Used: learn */
.icon-certificate:before { content: "\f0a3"; } /* Used: learn */
.icon-chevron-left:before { content: "\f053"; } /* Used: learn */
.icon-chevron-right:before { content: "\f054"; } /* Used: learn */
.icon-comments:before { content: "\f086"; } /* Used: footer */
.icon-copy:before { content: "\f0c5"; } /* Used: releases */
.icon-dashboard:before { content: "\f0e4"; } /* Used: learn */
.icon-eye-open:before { content: "\f06e"; } /* Used: jqueryui.com */
.icon-github:before { content: "\f09b"; } /* Used: footer */
.icon-link:before { content: "\f0c1"; } /* Used: toc-link, grunt-jquery-content */
.icon-magnet:before { content: "\f076"; } /* Used: learn */
.icon-pencil:before { content: "\f040"; } /* Used: footer */
.icon-picture:before { content: "\f03e"; } /* Used: learn */
.icon-question-sign:before { content: "\f059"; } /* Used: learn */
.icon-refresh:before { content: "\f021"; } /* Used: learn */
.icon-sitemap:before { content: "\f0e8"; } /* Used: learn */
.icon-star-empty:before { content: "\f006"; } /* Used: learn */
.icon-tasks:before { content: "\f0ae"; } /* Used: learn */
.icon-th-large:before { content: "\f009"; } /* Used: learn */
.icon-twitter:before { content: "\f099"; } /* Used: footer */
.icon-bolt:before { content: ""; background: url(../lib/FontAwesome/bolt.svg) no-repeat; } /* Used: learn */
.icon-calendar:before { content: ""; background: url(../lib/FontAwesome/calendar-days.svg) no-repeat; } /* Used: learn */
.icon-certificate:before { content: ""; background: url(../lib/FontAwesome/certificate.svg) no-repeat; } /* Used: learn */
.icon-chevron-left:before { content: ""; background: url(../lib/FontAwesome/chevron-left.svg) no-repeat; } /* Used: learn */
.icon-chevron-right:before { content: ""; background: url(../lib/FontAwesome/chevron-right.svg) no-repeat; } /* Used: learn */
.icon-comments:before { content: ""; background: url(../lib/FontAwesome/comments.svg) no-repeat; } /* Used: footer */
.icon-copy:before { content: ""; background: url(../lib/FontAwesome/copy.svg) no-repeat; } /* Used: releases */
.icon-dashboard:before { content: ""; background: url(../lib/FontAwesome/gauge.svg) no-repeat; } /* Used: learn */
.icon-eye-open:before { content: ""; background: url(../lib/FontAwesome/eye.svg) no-repeat; } /* Used: jqueryui.com */
.icon-github:before { content: ""; background: url(../lib/FontAwesome/github.svg) no-repeat; } /* Used: footer */
.icon-link:before { content: ""; background: url(../lib/FontAwesome/link.svg) no-repeat; } /* Used: toc-link, grunt-jquery-content */
.icon-magnet:before { content: ""; background: url(../lib/FontAwesome/magnet.svg) no-repeat; } /* Used: learn */
.icon-mastodon:before { content: ""; background: url(../lib/FontAwesome/mastodon.svg) no-repeat; } /* Used: footer */
.icon-pencil:before { content: ""; background: url(../lib/FontAwesome/pencil.svg) no-repeat; } /* Used: footer */
.icon-picture:before { content: ""; background: url(../lib/FontAwesome/image.svg) no-repeat; } /* Used: learn */
.icon-question-sign:before { content: ""; background: url(../lib/FontAwesome/circle-question.svg) no-repeat; } /* Used: learn */
.icon-refresh:before { content: ""; background: url(../lib/FontAwesome/arrows-rotate.svg) no-repeat; } /* Used: learn */
.icon-sitemap:before { content: ""; background: url(../lib/FontAwesome/sitemap.svg) no-repeat; } /* Used: learn */
.icon-star-empty:before { content: ""; background: url(../lib/FontAwesome/star.svg) no-repeat; } /* Used: learn */
.icon-tasks:before { content: ""; background: url(../lib/FontAwesome/bars-progress.svg) no-repeat; } /* Used: learn */
.icon-th-large:before { content: ""; background: url(../lib/FontAwesome/table-cells-large.svg) no-repeat; } /* Used: learn */
.icon-twitter:before { content: ""; background: url(../lib/FontAwesome/x-twitter.svg) no-repeat; } /* Used: footer */
Copy link
Member

@mgol mgol Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you also add a duplicate .icon-x class and mark this one as deprecated?

Copy link
Contributor Author

@HermitShamiko HermitShamiko Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, I've added the icon-x attribute and declared the old icon-twitter as Deprecated, while also switching it to the old Font Awesome to prevent other pages from referencing this icon, since we haven't removed the old version of the Font Awesome file.


/* Manual Font Awesome Styles */
[class^="icon-"]::before, [class^="icon-"]::after,
Expand Down Expand Up @@ -1898,16 +1900,19 @@ footer a.do-link:before {

.footer-site-links li a:before {
position: absolute;
font-size: 1.5em;
color: #4d4d4d;
text-shadow: 0 -1px 0 #000000;
width: 1.5em;
height: 1.5em;
left: 2px;
text-shadow: 0 -1px 0 #000000;
filter: invert(0.4);
}

.footer-site-links li:hover a,
.footer-site-links li:hover a:before {
.footer-site-links li:hover a {
color: #e6e6e6;
}
.footer-site-links li:hover a:before {
filter: invert(0.9);
}

.footer-site-links li {
display: inline-block;
Expand Down
8 changes: 6 additions & 2 deletions themes/jquery/footer-bottom.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,13 @@
'class' => 'icon-comments',
'url' => 'https://jquery.com/support/'
),
'Twitter' => array(
'X' => array(
'class' => 'icon-twitter',
'url' => get_option( 'jquery_twitter_link' ) ?: 'https://twitter.com/jquery'
'url' => get_option( 'jquery_x_link' ) ?: 'https://x.com/jquery'
),
'Mastodon' => array(
'class' => 'icon-mastodon',
'url' => 'https://social.lfx.dev/@jquery'
),
'GitHub' => array(
'class' => 'icon-github',
Expand Down
1 change: 1 addition & 0 deletions themes/jquery/lib/FontAwesome/arrows-rotate.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions themes/jquery/lib/FontAwesome/bars-progress.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions themes/jquery/lib/FontAwesome/bolt.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions themes/jquery/lib/FontAwesome/calendar-days.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions themes/jquery/lib/FontAwesome/certificate.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions themes/jquery/lib/FontAwesome/chevron-left.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions themes/jquery/lib/FontAwesome/chevron-right.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions themes/jquery/lib/FontAwesome/circle-question.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions themes/jquery/lib/FontAwesome/comments.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions themes/jquery/lib/FontAwesome/copy.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions themes/jquery/lib/FontAwesome/eye.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading