---
import { ArticleData } from "@extractus/article-extractor";
export interface Props {
  article: ArticleData;
}

const { article } = Astro.props;
const datePublished =
  article?.published && new Date(article.published).toDateString();
---
<div id="post">
  {
    article && article.url !== '/'  &&
      <>
        {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:global lang="scss">

  @counter-style publish-icons {
    system: cyclic;
    symbols: "️✍️" "🗓️";
    suffix: " ";
  }

    h1.title {
      font-size: xx-large;
    }

    span.source {
      font-weight: bolder;
      color: #555;
    }

    ul.publish-info {
      margin: 0.3em -0.7em 1em;
      list-style: publish-icons;

      li {
        color: #555;
        font-size: small;
      }
    }



  content {
    p, table, ul, img {
      margin: 1em 0 !important;
      font-size: 20px;
    }

    table {
      border-collapse: collapse;
      
      td, th {
        border: 1px solid #ccc;
        padding: 0.5em;
      }
    }

    pre {
      white-space: pre-wrap;
    }
  }
</style>