mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-28 03:01:10 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: quote images and long license text

Browse Source
This commit is contained in:
Isaac
2024-05-19 18:06:47 +01:00
parent b88451311a
commit d0966dd3af
2 changed files with 15 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/features/quote/Quote.jsx
View File

@@ -136,27 +136,25 @@ class Quote extends PureComponent {
).json(); ).json();
let authorimg, authorimglicense; let authorimg, authorimglicense;
const authorPage = authorimgdata.query.pages[Object.keys(authorimgdata.query.pages)[0]];
try { try {
authorimg = authorimg = authorPage?.thumbnail?.source;
authorimgdata.query.pages[Object.keys(authorimgdata.query.pages)[0]].thumbnail.source;
const authorimglicensedata = await ( const authorimglicensedata = await (
await fetch( await fetch(
`https://${ `https://${
variables.languagecode.split('_')[0] variables.languagecode.split('_')[0]
}.wikipedia.org/w/api.php?action=query&prop=imageinfo&iiprop=extmetadata&titles=File:${ }.wikipedia.org/w/api.php?action=query&prop=imageinfo&iiprop=extmetadata&titles=File:${
authorimgdata.query.pages[Object.keys(authorimgdata.query.pages)[0]].pageimage authorPage.pageimage
}&origin=*&format=json`, }&origin=*&format=json`,
) )
).json(); ).json();
const metadata = const authorImagePage = authorimglicensedata.query.pages[Object.keys(authorimglicensedata.query.pages)[0]];
authorimglicensedata.query.pages[Object.keys(authorimglicensedata.query.pages)[0]] const metadata = authorImagePage?.imageinfo[0]?.extmetadata;
.imageinfo[0].extmetadata; const license = metadata?.LicenseShortName;
const license = metadata.LicenseShortName;
const photographer = const photographer =
metadata.Attribution.value || this.stripHTML(metadata.Attribution?.value || metadata.Artist?.value || '').replace(/ \(talk\)/, '') || // talk page link (if applicable) is only removed for English
this.stripHTML(metadata.Artist?.value || '').replace(/ \(talk\)/, '') || // talk page link (if applicable) is only removed for English
'Unknown'; 'Unknown';
authorimglicense = `© ${photographer}. ${license.value}`; authorimglicense = `© ${photographer}. ${license.value}`;
authorimglicense = authorimglicense.replace(/copyright\s/i, '').replace(/©\s©\s/, '© '); authorimglicense = authorimglicense.replace(/copyright\s/i, '').replace(/©\s©\s/, '© ');
@@ -168,6 +166,7 @@ class Quote extends PureComponent {
authorimg = null; authorimg = null;
} }
} catch (e) { } catch (e) {
console.error(e);
authorimg = null; authorimg = null;
authorimglicense = null; authorimglicense = null;
} }
@@ -282,7 +281,7 @@ class Quote extends PureComponent {
author: data.author, author: data.author,
authorlink: this.getAuthorLink(data.author), authorlink: this.getAuthorLink(data.author),
authorimg: authorimgdata.authorimg, authorimg: authorimgdata.authorimg,
authorimglicense: authorimgdata.authorimglicense, authorimglicense: authorimgdata.authorimglicense && authorimgdata.authorimglicense.replace(' undefined. ', ' '),
quoteLanguage: quoteLanguage, quoteLanguage: quoteLanguage,
authorOccupation: data.author_occupation, authorOccupation: data.author_occupation,
}; };
@@ -456,9 +455,8 @@ class Quote extends PureComponent {
{this.state.authorOccupation !== 'Unknown' && ( {this.state.authorOccupation !== 'Unknown' && (
<span className="subtitle">{this.state.authorOccupation}</span> <span className="subtitle">{this.state.authorOccupation}</span>
)} )}
<span className="author-license"> <span className="author-license" title={this.state.authorimglicense}>
{this.state.authorimglicense && {this.state.authorimglicense && (this.state.authorimglicense.substring(0, 40) + (this.state.authorimglicense.length > 40 ? '…' : ''))}
this.state.authorimglicense.replace(' undefined. ', ' ')}
</span> </span>
</div> </div>
) : ( ) : (

4
src/features/quote/quote.scss
View File

@@ -64,6 +64,10 @@ h1.quoteauthor {
.author-license { .author-license {
font-size: clamp(8px, 2.5vw, 0.1em); font-size: clamp(8px, 2.5vw, 0.1em);
// max-width: 150px;
// white-space: nowrap;
// overflow-x: hidden;
// text-overflow: ellipsis;
@include themed { @include themed {
color: t($subColor); color: t($subColor);