74 lines
1.4 KiB
Text
74 lines
1.4 KiB
Text
---
|
||
import { ArticleData } from "@extractus/article-extractor";
|
||
export interface Props {
|
||
article: ArticleData;
|
||
}
|
||
|
||
const { article } = Astro.props;
|
||
const datePublished =
|
||
article?.published && new Date(article.published).toDateString();
|
||
---
|
||
|
||
{
|
||
article && (
|
||
<div class="post">
|
||
{article.source && <span class="source">{article.source}</span>}
|
||
{article.title && <h1 class="title">{article.title}</h1>}
|
||
{(article.author || datePublished) && (
|
||
<ul class="publish-info">
|
||
{article.author && <li>️{article.author} </li>}
|
||
{datePublished && <li>️{datePublished}</li>}
|
||
</ul>
|
||
)}
|
||
<content set:html={article.content} />
|
||
</div>
|
||
)
|
||
}
|
||
|
||
<style is:inline>
|
||
div.post {
|
||
max-width: 600px;
|
||
margin: 1em auto;
|
||
padding: 1em;
|
||
}
|
||
@counter-style publish-icons {
|
||
system: cyclic;
|
||
symbols: "️✍️" "🗓️";
|
||
suffix: " ";
|
||
}
|
||
ul.publish-info {
|
||
margin: 0.3em -0.7em 1em;
|
||
list-style: publish-icons;
|
||
}
|
||
h1.title {
|
||
font-size: xx-large;
|
||
}
|
||
span.source {
|
||
font-weight: bolder;
|
||
color: #555;
|
||
}
|
||
|
||
ul.publish-info li {
|
||
color: #555;
|
||
font-size: small;
|
||
}
|
||
p,
|
||
table,
|
||
ul {
|
||
margin: 1em 0;
|
||
font-size: 20px;
|
||
}
|
||
|
||
table {
|
||
border-collapse: collapse;
|
||
}
|
||
table td,
|
||
table th {
|
||
border: 1px solid #ccc;
|
||
padding: 0.5em;
|
||
}
|
||
|
||
pre {
|
||
white-space: pre-wrap;
|
||
}
|
||
</style>
|