Reorganise functions, Use custom Format Date/Relative Time over dayjs

This commit is contained in:
2020-03-06 14:14:17 +01:00
parent 46488146d0
commit adf2563eb8
11 changed files with 128 additions and 72 deletions

View File

@@ -22,17 +22,11 @@
<script>
import { onMount } from 'svelte'
import * as fn from '../../../utils/functions'
import { formatDate, relativeTime, getThumbnail } from '../../../utils/functions'
const { page } = stores()
// Dependencies
import AOS from 'aos'
import 'lazysizes'
import dayjs from 'dayjs'
import advancedFormat from 'dayjs/plugin/advancedFormat'
import relativeTime from 'dayjs/plugin/relativeTime'
dayjs.extend(advancedFormat)
dayjs.extend(relativeTime)
// Components
import IconGlobe from '../../../atoms/IconGlobe'
@@ -56,10 +50,9 @@
// Define dates
$: latestPhoto = photos[0]
$: dateUpdatedFull = latestPhoto ? dayjs(latestPhoto.modified_on).format('MMM Do, YYYY') : ''
$: dateUpdatedDatetime = latestPhoto ?dayjs(latestPhoto.modified_on).format('YYYY-MM-DDThh:mm:ss') : ''
$: dateUpdatedRelative = latestPhoto ?dayjs().to(dayjs(latestPhoto.modified_on)) : ''
$: lastUpdated = latestPhoto ? (dayjs(latestPhoto.modified_on).isBefore(dayjs().subtract(1, 'M'))) ? dateUpdatedFull : dateUpdatedRelatives : ''
$: dateUpdatedFull = latestPhoto ? formatDate(latestPhoto.modified_on, 'FULL') : ''
$: dateUpdatedDatetime = latestPhoto ? formatDate(latestPhoto.modified_on, 'DATETIME') : ''
$: dateUpdatedRelative = latestPhoto ? relativeTime(latestPhoto.modified_on, 2592000000) : ''
/*
@@ -98,7 +91,7 @@
url="https://housesof.world/location/{location.country.slug}/{location.slug}"
title="{$site.seo_name} Beautiful houses of {location.name}, {location.country.name}"
description="{$site.seo_name} {location.name} {location.description}"
image={latestPhoto ? fn.getThumbnail(latestPhoto.image.private_hash, 1200, 630) : null}
image={latestPhoto ? getThumbnail(latestPhoto.image.private_hash, 1200, 630) : null}
/>
</svelte:head>
@@ -129,6 +122,7 @@
<div class="place__description">
<div class="wrapper">
<p>{$site.description}</p>
{#if location.description}
<p>
Houses Of
@@ -142,7 +136,7 @@
{#if photos.length}
<p class="updated style-caps">
<strong>Updated</strong>
<time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{lastUpdated}</time>
<time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{dateUpdatedRelative}</time>
</p>
<ToggleLayout />
@@ -166,7 +160,7 @@
{#if photos.length}
<p class="updated style-caps">
<strong>Updated</strong>
<time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{lastUpdated}</time>
<time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{dateUpdatedRelative}</time>
</p>
{/if}
</aside>