chore: update to latest astro ink version

2024-07-06 14:41:28 -06:00
parent 97aa45c32e
commit e4620874f9
84 changed files with 13949 additions and 4620 deletions
--- a/src/layouts/default.astro
+++ b/src/layouts/default.astro
@@ -8,7 +8,7 @@ const { content, showPageHeader = true } = Astro.props
 <!doctype html>
 <html lang="en">
    <head>
-        <BaseHead title={ content.title ? `${ SITE.title } | ${content.title}` : SITE.title } description={ content.description }/>
+        <BaseHead title={ content.title ? `${ SITE.title } | ${content.title}` : SITE.title } description={ content.description } image={SITE.image}/>
    </head>
    <MainLayout>
        {showPageHeader &&
--- a/src/layouts/post-draft.astro
+++ b/src/layouts/post-draft.astro
@@ -9,7 +9,7 @@ const { content } = Astro.props
 <!doctype html>
 <html lang="en">
    <head>
-        <BaseHead title={ content.title ? `${ SITE.title } | ${content.title}` : SITE.title } description={ content.description }/>
+        <BaseHead {...content} title={ content.title ? `${ SITE.title } | ${content.title}` : SITE.title }/>
    </head>
    <MainLayout>
        <div class="post__header">
@@ -18,7 +18,7 @@ const { content } = Astro.props
            </div>
            <h1 class="post__title">{ content.title }</h1>
            <h5 class="post__desc">
-                <a class="post__author" href={`https://github.com/${content.authorGitHub}`} title={`${content.author + "'s"} GitHub`} target="_blank" rel="external">{ content.author }</a> |
+                <a class="post__author" href={`https://twitter.com/${content.authorTwitter}`} title={`${content.author + "'s"} twitter`} target="_blank" rel="external">{ content.author }</a> |
                <span class="post__date">{ new Intl.DateTimeFormat('en-US', { dateStyle: 'full' }).format(new Date(content.date))}</span>
            </h5>
        </div>
--- a/src/layouts/post.astro
+++ b/src/layouts/post.astro
@@ -1,15 +1,35 @@
 ---
-import { SITE } from '$/config'
+import type { CollectionEntry } from 'astro:content';
+import Icon from 'astro-icon';
+import { SITE, USE_POST_IMG_OVERLAY, USE_AUTHOR_CARD, USE_SUBSCRIPTION, USE_VIEW_STATS } from '$/config'
 import MainLayout from '$/components/MainLayout.astro'
 import BaseHead from '$/components/BaseHead.astro'
 import Prose from '$/components/Prose.astro'
+import PostStats from '$/components/PostStats.svelte'
+import EditUrl from '$/components/EditLink.astro'

-const { content } = Astro.props
+
+interface Props {
+    meta?: {
+        id: string,
+        slug: string,
+        collection: string
+    },
+    content: CollectionEntry<'blog'>['data'],
+    stats?: {
+        views: number
+    }
+}
+const { content, meta } = Astro.props
+
+const AUTHOR_NAME = content.author ? content.author : SITE?.author ? SITE?.author : "Author"
+const AUTHOR_TWITTER = content.authorTwitter ? content.authorTwitter : SITE?.authorTwitter ? SITE?.authorTwitter : ""
+const AUTHOR_AVATAR = content.authorImage ? content.authorImage : SITE?.authorImage ? SITE?.authorImage : ""
 ---
 <!doctype html>
 <html lang="en">
    <head>
-        <BaseHead title={ content.title ? `${ SITE.title } | ${content.title}` : SITE.title } description={ content.description }/>
+        <BaseHead {...content} title={ content.title ? `${ SITE.title } | ${content.title}` : SITE.title }/>
    </head>
    <MainLayout>
        <div class="post__header">
@@ -17,31 +37,93 @@ const { content } = Astro.props
                { content.tags.length > 0 && content.tags.map(tag => <a class="post__tag" href={`/tags/${tag}`} title={tag}>{tag}</a>) }
            </div>
            <h1 class="post__title">{ content.title }</h1>
-            <h5 class="post__desc">
-                <a class="post__author" href={`https://github.com/${content.authorGithub}`} title={`${content.author + "'s"} GitHub`} target="_blank" rel="external">{ content.author }</a> |
-                <span class="post__date">{ new Intl.DateTimeFormat('en-US', { dateStyle: 'full' }).format(new Date(content.date))}</span>
+            <h5 class={`post__desc ${AUTHOR_AVATAR ? 'flex flex-row gap-2' : ''}`}>
+                { AUTHOR_AVATAR ? <img class="avatar" src={AUTHOR_AVATAR} alt={`${ AUTHOR_NAME }'s avatar`} /> : ''}
+                <div class={AUTHOR_AVATAR ? 'flex flex-col border-l-2 pl-2' : ''}>
+                    {
+                        AUTHOR_TWITTER ?
+                            <a class="post__author" href={`https://twitter.com/${AUTHOR_TWITTER}`} title={`${AUTHOR_NAME}'s twitter`} target="_blank" rel="external">{ AUTHOR_NAME }</a>
+                            :
+                            <span class="post__author">{ AUTHOR_NAME }</span>
+                    }
+                    {!AUTHOR_AVATAR ? ' | ' : ''}
+                    <span class="post__date">
+                        <!-- post creation/updation data -->
+                        { new Intl.DateTimeFormat('en-US', { dateStyle: 'full' }).format(new Date(content.date))}
+                    </span>
+                    <span class="post__stats">
+                        { USE_VIEW_STATS && ` | `}
+                        { USE_VIEW_STATS && 
+                            <Icon class="w-5 h-5 inline-block" pack="mdi" name="eye" />
+                            <PostStats slug={meta?.slug} client:load /> 
+                        }
+                        <!-- | <Icon class="w-5 h-5 inline-block" pack="mdi" name="clock" /> 2 mins -->
+                    </span>
+                </div>
            </h5>
        </div>
-        <!--<img src={content.image} alt={content.title} />-->
+        {
+            content.image ?
+            USE_POST_IMG_OVERLAY ?
+                <div class="img__outer">
+                    <img src={content.image} alt={content.title} />
+                    <div class="img_gradient"></div>
+                </div><br/>
+                :
+                <img class="img__outer" src={content.image} alt={content.title} /><br/>
+                : ""
+        }
        <Prose>
            <slot />
        </Prose>
+        <div class="post__footer">
+            { USE_AUTHOR_CARD &&
+                <br/>
+                <div class="author-card">
+                    { AUTHOR_AVATAR ? <img class="author-card__img avatar avatar--lg" src={AUTHOR_AVATAR} alt={`${ AUTHOR_NAME }'s avatar`} /> : ''}
+                    <div class="author-card__meta">
+                        {
+                            AUTHOR_TWITTER ?
+                                <a class="author-card__author" href={`https://twitter.com/${AUTHOR_TWITTER}`} title={`${AUTHOR_NAME}'s twitter`} target="_blank" rel="external">{ AUTHOR_NAME }</a>
+                                :
+                                <span class="author-card__author">{ AUTHOR_NAME }</span>
+                        }
+                        <p class="author-card__bio">{ SITE.authorBio }</p>
+                        <br/>
+                        {
+                            USE_SUBSCRIPTION ?
+                            <form action="" class="subscription-form">
+                                <label for="email"></label>
+                                <input type="email" name="email" class="flex-grow border-0 text-theme-accent-gray-dark" required="true">
+                                <button type="submit">Subscribe</button>
+                            </form> :
+                            <a class="author-card__follow-btn button" target="_blank" href={`https://twitter.com/intent/follow?screen_name=${AUTHOR_TWITTER}`}><Icon class="w-5 h-5 inline-block" pack="mdi" name="twitter" /> Follow on Twitter</a>
+                        }
+                    </div>
+                </div>
+                <br/>
+            }
+            {
+                meta?.collection && meta?.id && 
+                    <EditUrl label=" Suggest changes on GitHub" editUrl={`${SITE.githubUrl}/tree/main/src/content/${meta?.collection}/${meta?.id}`}/>
+            }
+        </div>
    </MainLayout>
 </html>
 <style>
    .post__header {
-        @apply py-4 mb-1
+        @apply py-4 mb-1 text-center md:text-left
    }
    .post__title {
        @apply text-5xl font-extrabold text-theme-primary dark:text-theme-dark-primary
    }
    .post__desc {
-        @apply text-gray-500 dark:text-gray-100
+        @apply text-gray-500 dark:text-gray-100 flex justify-center text-left md:flex-none md:justify-start
    }
    .post__author {
        @apply no-underline dark:text-white hover:text-theme-primary
    }
-    .post__date {
+    .post__date,.post__stats {
        @apply text-gray-400
    }
    .post__tags {
@@ -50,4 +132,44 @@ const { content } = Astro.props
    .post__tag {
        @apply text-gray-400 hover:text-theme-primary dark:hover:text-theme-dark-primary
    }
+
+    .avatar {
+        @apply w-12 h-12 rounded-full object-cover p-1 border-2 border-solid border-theme-dark-primary dark:border-theme-primary
+    }
+    .avatar--lg {
+        @apply w-32 h-32
+    }
+
+    .img__outer {
+        @apply relative rounded-lg shadow-xl overflow-hidden
+    }
+    .img_gradient {
+        @apply absolute z-10 w-full bottom-0 left-0 h-full bg-gradient-to-tr from-theme-primary dark:from-theme-dark-primary
+    }
+
+    .author-card {
+        @apply text-gray-500 dark:text-gray-100 flex flex-row gap-4 justify-start text-left
+    }
+    .author-card__meta {
+        @apply border-l pl-4
+    }
+    .author-card__author {
+        @apply text-2xl mb-1
+    }
+    .author-card__bio {
+        @apply text-gray-400
+    }
+
+    .subscription-form {
+        @apply w-4/6 mt-2 flex flex-row rounded-lg overflow-hidden shadow-lg
+    }
+    .subscription-form input {
+        @apply flex-grow border-0 text-theme-accent-gray-dark
+    }
+    .subscription-form button, .button {
+        @apply px-4 py-2 uppercase font-bold text-white bg-gradient-to-tr from-theme-primary to-theme-dark-secondary dark:from-theme-dark-secondary dark:to-theme-primary
+    }
+    .author-card__follow-btn {
+        @apply rounded-md shadow-md shadow-theme-dark-secondary dark:shadow-theme-primary hover:shadow-theme-secondary hover:dark:shadow-theme-secondary hover:shadow-lg transition-all
+    }
 </style>