<script lang="javascript">
  let { data } = $props();
  let { post } = data;
  import { marked } from "marked";
  $inspect("bu", data);
</script>

<svelte:head>
  <title>{post.title}</title>
  <meta name="description" content="" />
</svelte:head>

<section>
  <h1>{post.title}</h1>
  {@html marked.parse(post.body)}
  <span
    >Created @ {new Date(post.created_at).toLocaleString("en-US", {
      timeZone: "-10:00", // This is wrong for some reason the SQLite db is recording the wrong time
      hour12: false,
    })}</span
  >
</section>

<style lang="scss">
  @use "/src/app.scss" as *;
  section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 60rem;
    margin: 0 auto;
    :global(h1) {
      :global(strong) {
        font-family: "Initials";
        font-size: 1.5rem;
        font-weight: 500;
      }
      text-align: center;
    }
    :global(hr) {
      color: $green;
    }
    :global(blockquote) {
      background: $green-42;
      border-left: 1rem solid $green;
      padding: 0.5rem 1rem;
      &:before {
        color: $orange;
        content: open-quote;
        font-size: 1.5rem;
        line-height: 0.1rem;
        vertical-align: -0.9rem;
      }
      &:p {
        display: inline;
      }
    }
    span {
      align-self: center;
      font-size: 0.75rem;
    }
  }
</style>

