Initial commit
This commit is contained in:
Timothy DeHerrera
33
src/layouts/default.astro
Normal file
33
src/layouts/default.astro
Normal file
@@ -0,0 +1,33 @@
|
||||
---
|
||||
import { SITE } from '$/config'
|
||||
import BaseHead from '$/components/BaseHead.astro';
|
||||
import MainLayout from '$/components/MainLayout.astro';
|
||||
|
||||
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 }/>
|
||||
</head>
|
||||
<MainLayout>
|
||||
{showPageHeader &&
|
||||
<div class="page__header">
|
||||
<h1 class="page__title">{content.title}</h1>
|
||||
<h5 class="page__desc">{content.description}</h5>
|
||||
</div>
|
||||
}
|
||||
<slot />
|
||||
</MainLayout>
|
||||
</html>
|
||||
<style>
|
||||
.page__header {
|
||||
@apply py-4 mb-1
|
||||
}
|
||||
.page__title {
|
||||
@apply text-5xl font-extrabold text-theme-primary dark:text-theme-dark-primary
|
||||
}
|
||||
.page__desc {
|
||||
@apply text-gray-400
|
||||
}
|
||||
</style>
|
||||
60
src/layouts/post-draft.astro
Normal file
60
src/layouts/post-draft.astro
Normal file
@@ -0,0 +1,60 @@
|
||||
---
|
||||
import { SITE } from '$/config'
|
||||
import MainLayout from '$/components/MainLayout.astro'
|
||||
import BaseHead from '$/components/BaseHead.astro'
|
||||
import Prose from '$/components/Prose.astro'
|
||||
|
||||
const { content } = Astro.props
|
||||
---
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<BaseHead title={ content.title ? `${ SITE.title } | ${content.title}` : SITE.title } description={ content.description }/>
|
||||
</head>
|
||||
<MainLayout>
|
||||
<div class="post__header">
|
||||
<div class="post__tags">
|
||||
{ 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://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>
|
||||
<div class="draft-message">
|
||||
You're viewing a <strong>preview</strong> of <code>/blog/{content.slug}</code> which isn't published yet!
|
||||
</div>
|
||||
<!--<img src={content.image} alt={content.title} />-->
|
||||
<Prose>
|
||||
<slot />
|
||||
</Prose>
|
||||
</MainLayout>
|
||||
</html>
|
||||
<style>
|
||||
.post__header {
|
||||
@apply py-4 mb-1
|
||||
}
|
||||
.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
|
||||
}
|
||||
.post__author {
|
||||
@apply no-underline dark:text-white hover:text-theme-primary
|
||||
}
|
||||
.post__date {
|
||||
@apply text-gray-400
|
||||
}
|
||||
.post__tags {
|
||||
@apply inline-flex gap-2
|
||||
}
|
||||
.post__tag {
|
||||
@apply text-gray-400 hover:text-theme-primary dark:hover:text-theme-dark-primary
|
||||
}
|
||||
|
||||
.draft-message {
|
||||
@apply bg-yellow-300 dark:bg-yellow-700 text-gray-700 dark:text-white px-2 py-1 my-2
|
||||
}
|
||||
</style>
|
||||
53
src/layouts/post.astro
Normal file
53
src/layouts/post.astro
Normal file
@@ -0,0 +1,53 @@
|
||||
---
|
||||
import { SITE } from '$/config'
|
||||
import MainLayout from '$/components/MainLayout.astro'
|
||||
import BaseHead from '$/components/BaseHead.astro'
|
||||
import Prose from '$/components/Prose.astro'
|
||||
|
||||
const { content } = Astro.props
|
||||
---
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<BaseHead title={ content.title ? `${ SITE.title } | ${content.title}` : SITE.title } description={ content.description }/>
|
||||
</head>
|
||||
<MainLayout>
|
||||
<div class="post__header">
|
||||
<div class="post__tags">
|
||||
{ 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://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>
|
||||
<!--<img src={content.image} alt={content.title} />-->
|
||||
<Prose>
|
||||
<slot />
|
||||
</Prose>
|
||||
</MainLayout>
|
||||
</html>
|
||||
<style>
|
||||
.post__header {
|
||||
@apply py-4 mb-1
|
||||
}
|
||||
.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
|
||||
}
|
||||
.post__author {
|
||||
@apply no-underline dark:text-white hover:text-theme-primary
|
||||
}
|
||||
.post__date {
|
||||
@apply text-gray-400
|
||||
}
|
||||
.post__tags {
|
||||
@apply inline-flex gap-2
|
||||
}
|
||||
.post__tag {
|
||||
@apply text-gray-400 hover:text-theme-primary dark:hover:text-theme-dark-primary
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user