parent
8c38442b5d
commit
4708db42cc
@ -0,0 +1,4 @@
|
|||||||
|
import BlogPosts from './components/blog-posts.riot'
|
||||||
|
|
||||||
|
riot.register('blog-posts', BlogPosts)
|
||||||
|
riot.mount('blog-posts')
|
||||||
@ -0,0 +1,87 @@
|
|||||||
|
<blog-posts>
|
||||||
|
<article class="post m-bottom-6" each={ post in props.posts } if={ isVisible(post) }>
|
||||||
|
<header class="post__header m-bottom-3">
|
||||||
|
<h2 class="h4 m-bottom-3 highlight">
|
||||||
|
<a href="{ post.path }">
|
||||||
|
{ post.title }
|
||||||
|
</a>
|
||||||
|
</h2>
|
||||||
|
<span>
|
||||||
|
<time time="{ post.date_published }">
|
||||||
|
{ formatDate(post.date_published) }
|
||||||
|
</time>
|
||||||
|
</span>
|
||||||
|
<span each={ tag in post.tags } class="m-left-3">
|
||||||
|
/ <a class="underline" onclick={ () => { addTag(tag) } }>{ tag }</a>
|
||||||
|
</span>
|
||||||
|
</header>
|
||||||
|
<div if={ post.excerpt } class="post__excerpt">
|
||||||
|
<div class="content">
|
||||||
|
{ post.excerpt }
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
|
||||||
|
state: {
|
||||||
|
tag: undefined,
|
||||||
|
limit: 1,
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @return {[type]}
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
onBeforeMount() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {[type]} date
|
||||||
|
* @return {[type]}
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
formatDate(date) {
|
||||||
|
return dayjs(date).format('DD.MM.YYYY')
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {[type]} post
|
||||||
|
* @return {Boolean}
|
||||||
|
*/
|
||||||
|
isVisible(post) {
|
||||||
|
|
||||||
|
let result = false
|
||||||
|
|
||||||
|
// if tag is set, check for tags in post.tags, if not valid not showing
|
||||||
|
if (this.tag) {
|
||||||
|
if (post.tags && post.tags.indexOf(this.tag) !== -1) {
|
||||||
|
result = true
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
result = true
|
||||||
|
}
|
||||||
|
|
||||||
|
return result
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {[type]} tag
|
||||||
|
*/
|
||||||
|
addTag(tag) {
|
||||||
|
this.tag = tag
|
||||||
|
this.update()
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</blog-posts>npm
|
||||||
@ -0,0 +1 @@
|
|||||||
|
window.riot = require('riot')
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
@import
|
||||||
|
'config',
|
||||||
|
'~@tiny-components/plain-ui/src/scss/plain-ui';
|
||||||
|
|
||||||
|
.inner {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 770px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post__header {
|
||||||
|
h2 {
|
||||||
|
a {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,4 +1,4 @@
|
|||||||
title: "test"
|
title: "A blog"
|
||||||
language: "en"
|
language: "en"
|
||||||
domain: "test.lan"
|
domain: "a-blog.lan"
|
||||||
https: true
|
https: true
|
||||||
@ -1,17 +1,20 @@
|
|||||||
{
|
{
|
||||||
"private": true,
|
"private": true,
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@helpers/siteomat-webpack-plugin": "^0.2.0",
|
"@helpers/siteomat-webpack-plugin": "^0.5.0",
|
||||||
|
"@riotjs/compiler": "^6.4.2",
|
||||||
"@riotjs/webpack-loader": "^6.0.0",
|
"@riotjs/webpack-loader": "^6.0.0",
|
||||||
"cross-env": "^7.0.3",
|
"cross-env": "^7.0.3",
|
||||||
"laravel-mix": "^6.0.34",
|
"laravel-mix": "^6.0.34",
|
||||||
"laravel-mix-purgecss": "^6.0.0",
|
"laravel-mix-purgecss": "^6.0.0",
|
||||||
|
"resolve-url-loader": "^5.0.0",
|
||||||
"sass": "^1.42.1",
|
"sass": "^1.42.1",
|
||||||
"sass-loader": "^12.2.0",
|
"sass-loader": "^12.2.0",
|
||||||
"svg-spritemap-webpack-plugin": "^4.3.3"
|
"svg-spritemap-webpack-plugin": "^4.3.3"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@tiny-components/plain-ui": "^0.5.0",
|
"@tiny-components/plain-ui": "^0.5.0",
|
||||||
|
"dayjs": "^1.11.7",
|
||||||
"riot": "^7.1.0"
|
"riot": "^7.1.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,3 @@
|
|||||||
|
/* Riot WIP, @license MIT */
|
||||||
|
|
||||||
|
/* Riot v7.1.0, @license MIT */
|
||||||
@ -1 +1,5 @@
|
|||||||
{}
|
{
|
||||||
|
"/js/critical.js": "/js/critical.js",
|
||||||
|
"/js/blog.js": "/js/blog.js",
|
||||||
|
"/css/styles.css": "/css/styles.css"
|
||||||
|
}
|
||||||
|
|||||||
@ -1,18 +1,18 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||||
<url>
|
<url>
|
||||||
<loc>https://test.lan/faridn-frin.html</loc>
|
<loc>https://a-blog.lan/faridn-frin.html</loc>
|
||||||
<lastmod>2023-01-02T12:18:38+01:00</lastmod>
|
<lastmod>2023-01-15T22:55:05+01:00</lastmod>
|
||||||
</url>
|
</url>
|
||||||
<url>
|
<url>
|
||||||
<loc>https://test.lan/hipaa-mofa-cold.html</loc>
|
<loc>https://a-blog.lan/hipaa-mofa-cold.html</loc>
|
||||||
<lastmod>2023-01-02T12:18:38+01:00</lastmod>
|
<lastmod>2023-01-15T22:55:05+01:00</lastmod>
|
||||||
</url>
|
</url>
|
||||||
<url>
|
<url>
|
||||||
<loc>https://test.lan/imprint.html</loc>
|
<loc>https://a-blog.lan/imprint.html</loc>
|
||||||
<lastmod>2023-01-02T12:18:38+01:00</lastmod>
|
<lastmod>2023-01-15T22:55:05+01:00</lastmod>
|
||||||
</url>
|
</url>
|
||||||
<url>
|
<url>
|
||||||
<loc>https://test.lan/index.html</loc>
|
<loc>https://a-blog.lan/index.html</loc>
|
||||||
<lastmod>2023-01-02T12:18:38+01:00</lastmod>
|
<lastmod>2023-01-15T22:55:05+01:00</lastmod>
|
||||||
</url>
|
</url>
|
||||||
</urlset>
|
</urlset>
|
||||||
|
|||||||
@ -1,46 +1,46 @@
|
|||||||
{% extends('layout.njk') %}
|
{% extends('layout.njk') %}
|
||||||
|
|
||||||
{% block main %}
|
|
||||||
|
|
||||||
{% set posts = pageQuery.find({ parent: '/', deep: 0, orderBy: [ '-date_published' ], limit: 50, filter: { view: { _eq: 'post.njk' } } }) %}
|
{% set posts = pageQuery.find({ parent: '/', deep: 0, orderBy: [ '-date_published' ], limit: 50, filter: { view: { _eq: 'post.njk' } } }) %}
|
||||||
|
|
||||||
<div class="">
|
{% block main %}
|
||||||
<blog-posts></blog-posts>
|
<div class="grid justify-center">
|
||||||
</div>
|
<div class="inner">
|
||||||
|
<div class="m-top-6">
|
||||||
<noscript>
|
|
||||||
{% for post in posts %}
|
{% for post in posts %}
|
||||||
<a class="post" href="{{ post.path }}">
|
<article class="post m-bottom-6">
|
||||||
<h2 class="post__title">
|
<header class="post__header m-bottom-3">
|
||||||
{{ post.title }}
|
<h2 class="h4 m-bottom-3 highlight">
|
||||||
</h2>
|
<a href="{{ post.path }}">
|
||||||
|
{{ post.title }}
|
||||||
<time>
|
</a>
|
||||||
{{ post.date_published }}
|
</h2>
|
||||||
</time>
|
<span>
|
||||||
|
<time time="{{ post.date_published }}">
|
||||||
|
{{ post.date_published }}
|
||||||
|
</time>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{% for tag in post.tags %}
|
||||||
|
<span class="m-left-3">
|
||||||
|
/ {{ tag }}
|
||||||
|
</span>
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{% if post.excerpt %}
|
||||||
|
<div class="post__excerpt">
|
||||||
|
<div class="content">
|
||||||
|
{{ post.excerpt }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
</article>
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
{% if post.excerpt %}
|
|
||||||
<div class="post__excerpt">
|
|
||||||
{{ post.excerpt }}
|
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
</div>
|
||||||
</a>
|
</div>
|
||||||
{% endfor %}
|
|
||||||
</noscript>
|
|
||||||
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block addFooter %}
|
|
||||||
<script defer src="{{ asset('/js/blog.js') }}"></script>
|
|
||||||
<script defer>
|
|
||||||
$(function() {
|
|
||||||
riot.register('blog-posts', blogPosts)
|
|
||||||
|
|
||||||
// mount component
|
|
||||||
riot.mount('blog-posts', {
|
|
||||||
'jobs': {{ posts | raw }},
|
|
||||||
})
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
</script>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
@ -1,5 +1,28 @@
|
|||||||
{% extends('layout.njk') %}
|
{% extends('layout.njk') %}
|
||||||
|
|
||||||
{% block main %}
|
{% block main %}
|
||||||
{{ page.content | safe }}
|
<div class="grid justify-center">
|
||||||
|
<div class="inner">
|
||||||
|
<div class="m-top-6">
|
||||||
|
<header>
|
||||||
|
<h1 class="highlight">
|
||||||
|
{{ page.title }}
|
||||||
|
</h1>
|
||||||
|
<span>
|
||||||
|
<time time="{ page.date_published }">
|
||||||
|
{{ page.date_published }}
|
||||||
|
</time>
|
||||||
|
</span>
|
||||||
|
{% for tag in page.tags %}
|
||||||
|
<span class="m-left-3">
|
||||||
|
/ <a href="/index.html?tag={{ tag }}" class="underline">{{ tag }}</a>
|
||||||
|
</span>
|
||||||
|
{% endfor %}
|
||||||
|
</header>
|
||||||
|
<div class="content">
|
||||||
|
{{ page.content | safe }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
Loading…
Reference in new issue