55 lines
2.6 KiB
Plaintext
55 lines
2.6 KiB
Plaintext
extends ../_TemplatePublic
|
|
block pageHeader
|
|
- const article = relevantArticle
|
|
- const author = relevantArticle.author
|
|
- const category = relevantArticle.category
|
|
link(rel='stylesheet' href='file://styles/browser-blog.css')
|
|
link(rel='stylesheet' href='file://styles/template-article.css')
|
|
meta(property='og:title' content=article.info.title)
|
|
meta(property='og:description' content=`By ${author.name} on ${formatDate(article.info.created)}\n---\n${article.info.snippet}`)
|
|
meta(name='description' content=`By ${author.name} on ${formatDate(article.info.created)}\n---\n${article.info.snippet}`)
|
|
meta(property='og:image' content=`${article.info.banner}?direct=true`)
|
|
meta(property='twitter:card' content='summary_large_image')
|
|
title blog | #{article.info.title} (#{category.name})
|
|
|
|
block pageContent
|
|
div(class='main-wrapper')
|
|
|
|
//- Layout: Sidebar
|
|
div(class='main-aside article-chapters')
|
|
p(class='text-headline') Chapters
|
|
each element in article.elements
|
|
if (element.type === 'header')
|
|
a(href=`#${formatString(element.value)}` class='text-tip') • #{element.value}
|
|
a(class='text-tip text-muted' href='#') ▲ Back to Top
|
|
|
|
//- Mobile Users get a small triangle in the bottom right instead
|
|
a(class='default mobile-home' href='#home') ▲
|
|
|
|
//- Layout: Article
|
|
div(class='main-content' role='main' id='home')
|
|
//- Article Headeer
|
|
img(
|
|
class='article-banner special-dropshadow'
|
|
alt=`Banner for ${article.info.title}`
|
|
src=article.info.banner
|
|
)
|
|
p(class='text-hero article-header') #{article.info.title}
|
|
div(class='article-header')
|
|
div(class='item-info')
|
|
img(class='filter-icon' alt=`Icon for Category ${category.name}` src=category.icon)
|
|
a(class='text-tip' href=`/blog/${category.id}`) #{category.name}
|
|
p(class='text-tip')
|
|
| #{formatDate(article.info.created)}
|
|
p(class='text-tip')
|
|
| #{calcReadTime(article.elements)} minute read
|
|
div(class='item-info')
|
|
img(class='filter-icon' alt=`Avatar for Author ${author.name}` src=author.icon)
|
|
p(class='text-tip') #{author.name}
|
|
div(class='divider-line')
|
|
|
|
//- Article Content
|
|
include ../_TemplateArticle
|
|
|
|
div(style='height: 64px;')
|
|
script(src='file://scripts/shared-article.ts') |