Skip to content

Commit

Permalink
Merge branch 'main' into firebase-auth-storage
Browse files Browse the repository at this point in the history
  • Loading branch information
hetd54 committed Apr 22, 2024
2 parents bfac2e0 + fb2765b commit 417014c
Show file tree
Hide file tree
Showing 9 changed files with 1,299 additions and 305 deletions.
Binary file removed public/fonts/atkinson-bold.woff
Binary file not shown.
Binary file removed public/fonts/atkinson-regular.woff
Binary file not shown.
14 changes: 6 additions & 8 deletions src/components/BaseHead.astro
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
---
// Import the global.css file here so that it is included on
// all pages through the use of the <BaseHead /> component.
import '../styles/global.css';
import "../styles/global.css"
interface Props {
title: string;
description: string;
image?: string;
title: string
description: string
image?: string
}
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
const canonicalURL = new URL(Astro.url.pathname, Astro.site)
const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props;
const { title, description, image = "/blog-placeholder-1.jpg" } = Astro.props
---

<!-- Global Metadata -->
Expand All @@ -21,8 +21,6 @@ const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props;
<meta name="generator" content={Astro.generator} />

<!-- Font preloads -->
<link rel="preload" href="/fonts/atkinson-regular.woff" as="font" type="font/woff" crossorigin />
<link rel="preload" href="/fonts/atkinson-bold.woff" as="font" type="font/woff" crossorigin />

<!-- Canonical URL -->
<link rel="canonical" href={canonicalURL} />
Expand Down
9 changes: 5 additions & 4 deletions src/components/Header.astro
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,15 @@ const { isHidden = true } = Astro.props

</script>

<header class="m-0 p-3 bg-white shadow">
<nav class="flex items-center justify-between">
<h2 class="m-0 text-lg"><a class="text-black hover:text-gray-600 decoration-0" href="/">{SITE_TITLE}</a></h2>
<header>
<h2><a class="hover:text-gray-600 decoration-0" href="/">{SITE_TITLE}</a></h2>
<nav>

<div class="hidden lg:flex">
{
LINKS.map((data) =>
<HeaderLink href=`/${data}`
class="text-lg py-2.5 px-4 text-black decoration-0 hover:text-gray-600"
class="text-lg py-2.5 px-4 text-black no-underline hover:text-gray-600"
>{data.toUpperCase()}</HeaderLink>)
}
</div>
Expand Down
116 changes: 39 additions & 77 deletions src/layouts/BlogPost.astro
Original file line number Diff line number Diff line change
@@ -1,85 +1,47 @@
---
import type { CollectionEntry } from 'astro:content';
import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import FormattedDate from '../components/FormattedDate.astro';
import type { CollectionEntry } from "astro:content"
import BaseHead from "../components/BaseHead.astro"
import Header from "../components/Header.astro"
import Footer from "../components/Footer.astro"
import FormattedDate from "../components/FormattedDate.astro"
type Props = CollectionEntry<'blog'>['data'];
type Props = CollectionEntry<"blog">["data"]
const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
const { title, description, pubDate, updatedDate, heroImage } = Astro.props
---

<html lang="en">
<head>
<BaseHead title={title} description={description} />
<style>
main {
width: calc(100% - 2em);
max-width: 100%;
margin: 0;
}
.hero-image {
width: 100%;
}
.hero-image img {
display: block;
margin: 0 auto;
border-radius: 12px;
box-shadow: var(--box-shadow);
}
.prose {
width: 720px;
max-width: calc(100% - 2em);
margin: auto;
padding: 1em;
color: rgb(var(--gray-dark));
}
.title {
margin-bottom: 1em;
padding: 1em 0;
text-align: center;
line-height: 1;
}
.title h1 {
margin: 0 0 0.5em 0;
}
.date {
margin-bottom: 0.5em;
color: rgb(var(--gray));
}
.last-updated-on {
font-style: italic;
}
</style>
</head>
<head>
<BaseHead title={title} description={description} />
</head>

<body>
<Header />
<main>
<article>
<div class="hero-image">
{heroImage && <img width={1020} height={510} src={heroImage} alt="" />}
</div>
<div class="prose">
<div class="title">
<div class="date">
<FormattedDate date={pubDate} />
{
updatedDate && (
<div class="last-updated-on">
Last updated on <FormattedDate date={updatedDate} />
</div>
)
}
</div>
<h1>{title}</h1>
<hr />
</div>
<slot />
</div>
</article>
</main>
<Footer />
</body>
<body class="single-column">
<Header />
<main>
<article>
<div>
{heroImage && <img width={1020} height={510} src={heroImage} alt="" />}
</div>
<div>
<div>
<div>
<FormattedDate date={pubDate} />
{
updatedDate && (
<div class="last-updated-on">
Last updated on
<FormattedDate date={updatedDate} />
</div>
)
}
</div>
<h1>{title}</h1>
<hr />
</div>
<slot />
</div>
</article>
</main>
<Footer />
</body>
</html>
88 changes: 44 additions & 44 deletions src/pages/index.astro
Original file line number Diff line number Diff line change
@@ -1,50 +1,50 @@
---
import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
import BaseHead from "../components/BaseHead.astro"
import Header from "../components/Header.astro"
import Footer from "../components/Footer.astro"
import { SITE_TITLE, SITE_DESCRIPTION } from "../consts"
---

<!doctype html>
<html lang="en">
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head>
<body>
<Header />
<main>
<h1>🧑‍🚀 Hello, Astronaut!</h1>
<p>
Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This
template serves as a lightweight, minimally-styled starting point for anyone looking to build
a personal website, blog, or portfolio with Astro.
</p>
<p>
This template comes with a few integrations already configured in your
<code>astro.config.mjs</code> file. You can customize your setup with
<a href="https://astro.build/integrations">Astro Integrations</a> to add tools like Tailwind,
React, or Vue to your project.
</p>
<p>Here are a few ideas on how to get started with the template:</p>
<ul>
<li>Edit this page in <code>src/pages/index.astro</code></li>
<li>Edit the site header items in <code>src/components/Header.astro</code></li>
<li>Add your name to the footer in <code>src/components/Footer.astro</code></li>
<li>Check out the included blog posts in <code>src/pages/blog/</code></li>
<li>Customize the blog post page layout in <code>src/layouts/BlogPost.astro</code></li>
</ul>
<p>
Have fun! If you get stuck, remember to <a href="https://docs.astro.build/"
>read the docs
</a> or <a href="https://astro.build/chat">join us on Discord</a> to ask questions.
</p>
<p>
Looking for a blog template with a bit more personality? Check out <a
href="https://github.com/Charca/astro-blog-template"
>astro-blog-template
</a> by <a href="https://twitter.com/Charca">Maxi Ferreira</a>.
</p>
</main>
<Footer />
</body>
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head>
<body class="single-column">
<Header />
<main>
<h1>🧑‍🚀 Hello, Astronaut!</h1>
<p>
Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This
template serves as a lightweight, minimally-styled starting point for anyone looking to build
a personal website, blog, or portfolio with Astro.
</p>
<p>
This template comes with a few integrations already configured in your
<code>astro.config.mjs</code> file. You can customize your setup with
<a href="https://astro.build/integrations">Astro Integrations</a> to add tools like Tailwind,
React, or Vue to your project.
</p>
<p>Here are a few ideas on how to get started with the template:</p>
<ul>
<li>Edit this page in <code>src/pages/index.astro</code></li>
<li>Edit the site header items in <code>src/components/Header.astro</code></li>
<li>Add your name to the footer in <code>src/components/Footer.astro</code></li>
<li>Check out the included blog posts in <code>src/pages/blog/</code></li>
<li>Customize the blog post page layout in <code>src/layouts/BlogPost.astro</code></li>
</ul>
<p>
Have fun! If you get stuck, remember to <a href="https://docs.astro.build/"
>read the docs
</a> or <a href="https://astro.build/chat">join us on Discord</a> to ask questions.
</p>
<p>
Looking for a blog template with a bit more personality? Check out <a
href="https://github.com/Charca/astro-blog-template"
>astro-blog-template
</a> by <a href="https://twitter.com/Charca">Maxi Ferreira</a>.
</p>
</main>
<Footer />
</body>
</html>
Loading

0 comments on commit 417014c

Please sign in to comment.