Verified Commit bf13fa83 authored by Chocobozzz's avatar Chocobozzz
Browse files

Fix images

parent 6cfdc7f4
Pipeline #408307 passed with stage
in 1 minute and 44 seconds
......@@ -7,7 +7,7 @@
"build:client": "vue-cli-service build",
"build": "npm run build:news-meta && npm run build:client && npm run build:rss",
"build:rss": "NODE_ENV=production node src/news/news.feed.js",
"build:news-meta": "NODE_ENV=production node src/news/news.ùeta.js",
"build:news-meta": "NODE_ENV=production node src/news/news.meta.js",
"lint": "vue-cli-service lint",
"analyze-bundle": "npm run build:client -- --report-json && webpack-bundle-analyzer ./dist/report.json",
"i18n:update": "git fetch weblate && git merge weblate/master && rm -f src/locale/en_US/LC_MESSAGES/app.po && make clean && make makemessages && make translations"
......
......@@ -78,9 +78,9 @@
}
img {
cursor: pointer;
max-width: 100%;
height: auto;
border: 10px solid #fff3ea;
}
figure {
......@@ -88,12 +88,6 @@
border: 10px solid #fff3ea;
border-bottom: 0;
img {
cursor: pointer;
max-width: 100%;
height: auto;
}
figcaption {
font-size: 14px;
background: #fff3ea;
......@@ -101,11 +95,6 @@
padding: 10px 0;
margin-top: -10px;
}
img {
max-width: 100%;
height: auto;
}
}
@media screen and (max-width: $small-screen) {
......
......@@ -3,27 +3,29 @@ const iterator = require('markdown-it-for-inline')
const replaceLink = require('markdown-it-replace-link')
function lazyLoadingPlugin(md, options) {
const defaultImageRenderer = md.renderer.rules.image
md.renderer.rules.image = function (tokens, idx, options, env, self) {
const token = tokens[idx]
token.attrSet('loading', 'lazy')
return defaultImageRenderer(tokens, idx, options, env, self)
const src = token.attrs[token.attrIndex('src')][1]
const title = token.attrIndex('title') >= 0
? token.attrs[token.attrIndex('title')][1]
: ''
const titleElem = title
? `<figcaption>${title}</figcaption>`
: ''
return '<figure>\n' +
` <img loading="lazy" src="${src}" title="${title}" />` +
` ${titleElem}` +
'</figure>\n'
}
}
module.exports = markdownIt({
html: true,
linkify: true,
breaks: true,
replaceLink: function (link, env) {
const base = process.env.NODE_ENV === 'production'
? 'https://joinpeertube.org'
: 'http://localhost:8080'
return link.startsWith('/img/news/') ? base + link : link
}
breaks: true
})
.use(iterator, 'url_new_win', 'link_open', function (tokens, idx) {
// adding target="_blank"
......
......@@ -93,6 +93,7 @@ article li > a,
font-weight: $font-semibold;
border-bottom: 3px solid $orange;
transition: border-bottom-width 0.2s ease;
min-height: 27px;
&:hover {
text-decoration: none;
......
......@@ -3,8 +3,10 @@
<div class="blocks">
<div class="title-block">
<h1 v-translate>PeerTube news archive</h1>
</div>
<div class="separator"></div>
<div class="go-back">
<router-link to="/news" class="jpt-router-link">Go back to the latest news</router-link>
</div>
<NewsArticles :articles="articles"></NewsArticles>
......@@ -33,6 +35,12 @@
display: block;
}
}
.go-back {
display: flex;
justify-content: center;
margin-bottom: 30px;
}
}
</style>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment