wrbapp/frontend/pages/news/index.vue

<template>
  <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
    <div v-if="newsStore.loaded && newsStore.news" class="flex flex-col gap-3">
      <NuxtLink to="/news/newmessage" v-if="userStore.userData.sendNews" class="item-hover border-dashed border-2 container text-center font-bold text-xl border-neutral-500 mb-3">
        Nieuw Bericht
      </NuxtLink>
      <div v-if="newsStore.news[0]" v-for="(item, index) in newsStore.news" :key="index">
        <div class="item container flex flex-col relative">
          <h3 class="text-sm">{{ longEventDate(item.date.toDate()) }}</h3>
          <h2 class="text-2xl font-bold">{{ item.title }}</h2>
          <p class="description" v-html="convertLinks(item.description)"></p>
          <Icon v-if="userStore.userData.sendNews" @click="newsStore.deleteNews(item, index)" size="1.5em" name="ion:trash-sharp" class="absolute top-3 right-3 hover:cursor-pointer text-red-500" />
        </div>
      </div>
      <h2 v-else class="font-bold text-center text-xl mt-3">
        Er is geen nieuws
      </h2>
    </div>
    <div class="w-full flex flex-col justify-center items-center" v-else>
        <Icon size="2em" name="ion:load-c" class="animate-spin" />
        <h2 class="mt-2 font-bold">Loading...</h2>
    </div>
  </div>
</template>

<script setup>
definePageMeta({
  title: 'Nieuws'
})

const userStore = useUserStore()
const newsStore = useNewsStore()

onMounted(() => {
  newsStore.getNews()
})

const convertLinks = ( input ) => {

  let text = input;
  const linksFound = text.match( /(?:www|https?)[^\s]+/g );
  const aLink = [];

  if ( linksFound != null ) {

    for ( let i=0; i<linksFound.length; i++ ) {
      let replace = linksFound[i];
      if ( !( linksFound[i].match( /(http(s?)):\/\// ) ) ) { replace = 'http://' + linksFound[i] }
      let linkText = replace.split( '/' )[2];
      if ( linkText.substring( 0, 3 ) == 'www' ) { linkText = linkText.replace( 'www.', '' ) }
      if ( linkText.match( /youtu/ ) ) {

        let youtubeID = replace.split( '/' ).slice(-1)[0];
        aLink.push( '<div class="video-wrapper"><iframe src="https://www.youtube.com/embed/' + youtubeID + '" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>' )
      }
      else if ( linkText.match( /vimeo/ ) ) {
        let vimeoID = replace.split( '/' ).slice(-1)[0];
        aLink.push( '<div class="video-wrapper"><iframe src="https://player.vimeo.com/video/' + vimeoID + '" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>' )
      }
      else {
        aLink.push( '<a class="text-primary hover:underline underline-offset-2" href="' + replace + '" target="_blank">' + linkText + '</a>' );
      }
      text = text.split( linksFound[i] ).map(item => { return aLink[i].includes('iframe') ? item.trim() : item } ).join( aLink[i] );
    }
    return text;

  }
  else {
    return input;
  }
}

const longEventDate = (eventDate) => {
	const date = new Date(eventDate)

	return date.toLocaleString('nl-NL', {
    weekday: 'short',
    day: 'numeric',
    year: 'numeric',
    month: 'long',
    hour: 'numeric',
    minute: 'numeric'
  }
)}

</script>