Skip to content
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

v2.8.1 #461

Merged
merged 5 commits into from
Nov 20, 2024
Merged

v2.8.1 #461

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
38cfbd5
style: enhance link styling and icon behavior #460 #459
EvanNotFound Nov 20, 2024
84bc1a7
feat(config): disable sharp solid version of FontAwesome icons
EvanNotFound Nov 20, 2024
5ae567d
style: enhance link hover and focus styles in markdown
EvanNotFound Nov 20, 2024
03b0aa7
style(markdown): adjust link styling and dark mode text color
EvanNotFound Nov 20, 2024
9a0f579
style: adjust dark mode text color contrast
EvanNotFound Nov 20, 2024
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
2 changes: 1 addition & 1 deletion _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ fontawesome: # Pro v6.2.1
# Duotone version
duotone: false
# Sharp Solid version
sharp_solid: true
sharp_solid: false
# FONTAWESOME <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< end


Expand Down
2 changes: 1 addition & 1 deletion scripts/filters/link-handle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ hexo.extend.filter.register(
if (theme.config.articles.style.link_icon == false) {
return `<a class="link" ${attrBegin} href="${href}" ${attrEnd}>${html}</a>`;
} else {
return `<a class="link" ${attrBegin} href="${href}" ${attrEnd}>${html}<i class="fa-sharp fa-regular fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em]"></i>`;
return `<a class="link" ${attrBegin} href="${href}" ${attrEnd}>${html}<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a>`;
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Add security attributes for external links.

Consider adding security-related attributes for external links to protect users:

-          return `<a class="link" ${attrBegin} href="${href}" ${attrEnd}>${html}<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a>`;
+          return `<a class="link" ${attrBegin} href="${href}" rel="noopener noreferrer" target="_blank" ${attrEnd}>${html}<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a>`;

This change:

  • Adds rel="noopener noreferrer" to prevent security vulnerabilities
  • Adds target="_blank" to open external links in a new tab
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
return `<a class="link" ${attrBegin} href="${href}" ${attrEnd}>${html}<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a>`;
return `<a class="link" ${attrBegin} href="${href}" rel="noopener noreferrer" target="_blank" ${attrEnd}>${html}<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a>`;

}
},
);
Expand Down
2 changes: 1 addition & 1 deletion source/css/common/colors.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ $dark-invert-text-color = #373D3F
$dark-first-text-color = lighten($dark-default-text-color, 30%)
$dark-second-text-color = lighten($dark-default-text-color, 20%)
$dark-third-text-color = darken($dark-default-text-color, 20%)
$dark-fourth-text-color = darken($dark-default-text-color, 80%)
$dark-fourth-text-color = darken($dark-default-text-color, 70%)
$dark-border-color = rgba(255, 255, 255, 0.08)
$dark-selection-color = $selection-color
$dark-shadow-color-1 = rgba(255, 255, 255, 0.08)
Expand Down
18 changes: 16 additions & 2 deletions source/css/common/markdown.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,20 +33,34 @@
padding-bottom 2px
text-underline-offset 2px
text-decoration-color var(--fourth-text-color)
transition: text-decoration-color 0.2s ease

&.link
padding-right 0.1em

.fas, .far, fab
margin 0 2px 0 6px
position relative
color var(--third-text-color)
font-size 0.88rem

&:hover
text-decoration underline
.link-icon
transition transform 0.2s ease

&:hover,
&:focus
text-decoration underline !important
text-decoration-color var(--primary-color) !important

.link-icon
transform translate(0.1em, -0.1em)

&::after
background var(--primary-color)
text-decoration underline



strong
color var(--default-text-color)

Expand Down