Merge pull request #52 from CodeandoMexico/feat/dates

stylized date, reading time, blog

Author: basicavisual

src/components/BlogHero.svelte

@@ -1,12 +1,15 @@
 <script>
 	import Badge from './Badge.svelte';
+  import ReadingTime from './ReadingTime.svelte';
+  import HumanDate from './HumanDate.svelte';
 	export let tag = '';
 	export let title = 'Blog';
   export let slug = '';
 	export let date = '';
 	export let image =
 		'https://images.unsplash.com/photo-1582005450386-52b25f82d9bb?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
   export let authors = '';
+  export let content = '';
 </script>
 
 <a href="/blog/{slug}">
@@ -69,13 +72,17 @@
       p-10
     "
 	>
-		<div class=" bottom-0">
-			<p class="text-left text-white font-thin">
+		<div class="bottom-0">
+			<p class="text-2xl text-left text-white font-thin">
         {#each authors as author, i}
           <span>{author.authors_id.name || ''}{#if i < (authors.length-1)}, {/if}</span>
         {/each}
       </p>
-			<p class="text-left text-gray-300 font-bold">{date}</p>
+      <p class="text-left text-gray-300 font-bold">
+        <HumanDate date={date}/>
+        <span class="mx-2">·</span>
+        <ReadingTime text={content}/>
+      </p>
 		</div>
 	</div>
 

src/components/Cards/ArticleCard.svelte

@@ -1,12 +1,12 @@
 <script>
   import Badge from "@/components/Badge.svelte";
+  import HumanDate from "../HumanDate.svelte";
   export let slug;
   export let title;
   export let date;
   export let image;
   export let tag;
   export let authors;
-
 </script>
 
 <a href="/blog/{slug}">
@@ -28,7 +28,7 @@
         {/each}
       </p>
     {/if}
-    <p class="text-sm text-gray-400">{date}</p>
+    <p class="text-sm text-gray-400"><HumanDate date={date}/></p>
   </div>
 </div>
 </a>

src/components/HumanDate.svelte

@@ -0,0 +1,13 @@
+<script>
+  export let date = '';
+  export let locale;
+  function processDate(dateString, locale) {
+    locale ??= 'es-MX'
+    let formattedDate = new Date(dateString)
+    let finalDate = formattedDate.toLocaleString(locale, { day: 'numeric', month: 'short', year: 'numeric' })
+    return finalDate
+  }
+  let finalDate = processDate(date, locale)
+</script>
+
+{finalDate}

src/components/ReadingTime.svelte

@@ -0,0 +1,12 @@
+<script>
+  export let text = '';
+  function readingTime(text) {
+    const words = text.trim().split(/\s+/).length;
+    const wpm = 255 //average adult reading speed (words per minute).
+    const time = Math.ceil(words / wpm);
+    return time;
+  }
+  let minutos = readingTime(text)
+</script>
+
+Tiempo de lectura: {minutos} minutos

src/routes/aviso-de-privacidad/+page.svelte

@@ -1,19 +1,13 @@
 <script>
   export let data
+  import HumanDate from '@/components/HumanDate.svelte';
   const { aviso } = data
-  const date_updated = processDate(aviso.date_updated)
-  function processDate(dateObject, locale) {
-    locale ??= 'es-mx'
-    let formattedDate = new Date(dateObject)
-    let finalDate = formattedDate.toLocaleString(locale, { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })
-    return finalDate
-  } 
 </script>
 
 <div id="aviso" class="container mx-auto py-20">
   <div class="w-10/12 p-5 mx-auto w-1/2 mx-auto bg-[url('/grid-bg.png')] bg-slate-200 prose" style={`box-shadow: 7px 7px 1px black;`}>
     {@html aviso.content}
-    <p>Ultima actualización: {date_updated}</p>
+    <p>Ultima actualización: <HumanDate date={aviso.date_updated}/></p>
   </div>
 </div>
 

src/routes/blog/+page.svelte

@@ -14,9 +14,10 @@
     slug={blog.highlight_post.slug}
     title={blog.highlight_post.title}
     tag={blog.highlight_post.tags[0]}
-    date={new Date(blog.highlight_post.date_created).toLocaleString('es-MX')}
+    date={blog.highlight_post.date_published || blog.highlight_post.date_created}
     image={`https://content.codeandomexico.org/assets/${blog.highlight_post.post_image}`}
     authors={blog.highlight_post.authors}
+    content={blog.highlight_post.content}
     />
   </div>
   <div class="container m-auto p-3">
@@ -27,7 +28,7 @@
       title={post.title}
       tag={post.tags[0]}
       authors={post.authors}
-      date={new Date(post.date_created).toLocaleString('es-MX')}
+      date={post.date_published || post.date_created}
       image={`https://content.codeandomexico.org/assets/${post.post_image}`}
       />
     {/each}

src/routes/blog/[slug]/+page.svelte

@@ -1,4 +1,6 @@
 <script>
+  import ReadingTime from '@/components/ReadingTime.svelte';
+  import HumanDate from '@/components/HumanDate.svelte';
   export let data
   const { post } = data
 </script>
@@ -13,20 +15,22 @@
 
 <section class="my-10">
 
-  <div class="container m-auto p-3 prose">
-    <h1 class="text-center  font-bold">{post.title}</h1>
+  <div class="container m-auto max-w-prose my-8">
+    <h1 class="text-5xl font-black my-8">{post.title}</h1>
     {#if post.authors}
-      <p class="text-center">Por 
+      <p class="text-xl my-3">Por 
         {#each post.authors as author, i }
         <span>{author.authors_id.name || ''}{#if i < (post.authors.length-1)}, {/if}</span>
         {/each}
       </p>
     {/if}
-    <p class="text-center text-sm text-gray-400">{new Date(post.date_created).toLocaleString('es-MX')}</p>
+    <p class="text-lg text-gray-500">
+      <ReadingTime text={post.content}/><span class="mx-2">·</span><HumanDate date={post.date_published || post.date_created}/>
+    </p>
   </div>
   <img src={`https://content.codeandomexico.org/assets/${post.post_image}`} alt="Imagen de blog" class="w-full max-h-[450px] object-cover" />
   <div class="container m-auto p-3 prose prose-blockquote:text-2xl prose-blockquote:border-green-400">
-  <p>{@html post.content}</p>
-</div>
+    <p class="prose text-lg">{@html post.content}</p>
+  </div>
 
 </section>