Thread Discussion

<!--
  templateType: blog_post
  isAvailableForNewContent: true
  label: Blog post
-->
{% extends "./../layouts/base.html" %}
{% block body %}

<div class="max-w-5xl mx-auto px-md-2 mt-2xl lg:mt-4xl">
  {% module "hero"
  path="@projects/react-project/react-app/components/modules/HeaderArticle"
  %}
  {{ content.post_body }}
</div>

{% endblock body %}

interface Props {
  fieldValues: {
    title: string;
    image?: {
      alt?: string;
      src: string;
    };
    imageCaption?: string;
    publishDate?: string;
  };
  hublData?: {
    publishDate?: string;
    featuredImageAltText?: string;
    featuredImage?: string;
  };
}

export function Component({ fieldValues, hublData }: Props) {
  const publishDate = hublData?.publishDate || fieldValues.publishDate;
  const publishDateText = new Date(publishDate).toLocaleDateString('en-GB', {
    day: '2-digit',
    month: 'long',
    year: 'numeric',
  });
  return (
    <div>
      {publishDate ? (
        <span className="text-grey-500 text-mobile-micro lg:text-body mb-xl">
          {publishDateText}
        </span>
      ) : null}
    </div>
  );
}

export { default as hublDataTemplate } from './hubl_data.hubl.html?raw';

{% set hublData = [] %}
  {% set blogPost = {
      "featuredImage": content.featured_image,
      "featuredImageAltText": content.featured_image_alt_text,
      "publishDate": content.publish_date,
    }
  %}
{% do hublData.append(blogPost) %}