maciejpedzich/maciejpedzi.ch
1
0
Fork 0
mirror of https://github.com/maciejpedzich/maciejpedzi.ch.git synced 2024-09-20 02:06:18 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Design makeover

Browse Source
This commit is contained in:
Maciej Pędzich 2023-04-26 10:23:17 +02:00
parent 74c2e8fa47
commit e13e6582ac
10 changed files with 337 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/BaseHead.astro
View File

@ -4,9 +4,9 @@
import '../styles/global.css'; import '../styles/global.css';
export interface Props { export interface Props {
title: string; title: string;
description: string; description: string;
image?: string; image?: string;
} }
const canonicalURL = new URL(Astro.url.pathname, Astro.site); const canonicalURL = new URL(Astro.url.pathname, Astro.site);
@ -14,28 +14,19 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
const { title, description, image = '/placeholder-social.jpg' } = Astro.props; const { title, description, image = '/placeholder-social.jpg' } = Astro.props;
--- ---
<!-- Global Metadata -->
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<!-- Canonical URL -->
<link rel="canonical" href={canonicalURL} /> <link rel="canonical" href={canonicalURL} />
<!-- Primary Meta Tags -->
<title>{title}</title> <title>{title}</title>
<meta name="title" content={title} /> <meta name="title" content={title} />
<meta name="description" content={description} /> <meta name="description" content={description} />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:url" content={Astro.url} /> <meta property="og:url" content={Astro.url} />
<meta property="og:title" content={title} /> <meta property="og:title" content={title} />
<meta property="og:description" content={description} /> <meta property="og:description" content={description} />
<meta property="og:image" content={new URL(image, Astro.url)} /> <meta property="og:image" content={new URL(image, Astro.url)} />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content={Astro.url} /> <meta property="twitter:url" content={Astro.url} />
<meta property="twitter:title" content={title} /> <meta property="twitter:title" content={title} />

13
src/components/Footer.astro
View File

@ -3,11 +3,14 @@ const today = new Date();
--- ---
<footer> <footer>
&copy; {today.getFullYear()} YOUR NAME HERE. All rights reserved. &copy; {today.getFullYear()} Maciej Pędzich
</footer> </footer>
<style> <style>
footer { footer {
padding: 25px; margin-top: 1.5rem;
text-align: center; padding: 1rem 0;
} border-top: 1px solid #fff;
text-align: center;
}
</style> </style>

10
src/components/FormattedDate.astro
View File

@ -1,17 +1,11 @@
--- ---
export interface Props { export interface Props {
date: Date; date: Date;
} }
const { date } = Astro.props; const { date } = Astro.props;
--- ---
<time datetime={date.toISOString()}> <time datetime={date.toISOString()}>
{ {date.toISOString().substring(0, 10)}
date.toLocaleDateString('en-us', {
year: 'numeric',
month: 'short',
day: 'numeric',
})
}
</time> </time>

58
src/components/Header.astro
View File

@ -1,25 +1,49 @@
--- ---
import HeaderLink from './HeaderLink.astro'; import HeaderLink from './HeaderLink.astro';
import { SITE_TITLE } from '../consts';
--- ---
<header> <header>
<h2> <span class="logo cmr2-text">
{SITE_TITLE} <span>Maciej</span>
</h2> <span>Pędzich</span>
<nav> </span>
<HeaderLink href="/">Home</HeaderLink> <nav class="cmr2-text" aria-label="Site navigation">
<HeaderLink href="/blog">Blog</HeaderLink> <HeaderLink href="/">Home</HeaderLink>
<HeaderLink href="/about">About</HeaderLink> <HeaderLink href="/blog">Blog</HeaderLink>
<HeaderLink href="https://twitter.com/astrodotbuild" target="_blank">Twitter</HeaderLink> <HeaderLink href="/projects">Projects</HeaderLink>
<HeaderLink href="https://github.com/withastro/astro" target="_blank">GitHub</HeaderLink> <HeaderLink href="/resume.pdf">Resume</HeaderLink>
</nav> <HeaderLink href="mailto:contact@maciejpedzi.ch">Email me</HeaderLink>
<HeaderLink href="/links">Links</HeaderLink>
</nav>
</header> </header>
<style> <style>
header { @media only screen and (max-width: 625px) {
margin: 0em 0 2em; nav.cmr2-text {
} justify-content: left;
h2 { }
margin: 0.5em 0; }
}
nav {
flex-wrap: nowrap;
overflow-x: auto;
}
nav > a {
color: rgba(255, 255, 255, 0.4);
text-decoration: none;
}
header {
margin: 0em 0 2em;
}
h2 {
margin: 0.5em 0;
}
.logo {
font-size: 2rem;
margin: 1.25rem 0;
}
</style> </style>

20
src/components/HeaderLink.astro
View File

@ -10,15 +10,17 @@ const isActive = href === pathname || href === pathname.replace(/\/$/, '');
--- ---
<a href={href} class:list={[className, { active: isActive }]} {...props}> <a href={href} class:list={[className, { active: isActive }]} {...props}>
<slot /> <slot />
</a> </a>
<style> <style>
a { a.active {
display: inline-block; color: #fff;
text-decoration: none; }
} a.active,
a.active { a.active + a,
font-weight: bolder; a:hover + a,
text-decoration: underline; a + a:hover {
} border-left-color: #fff;
}
</style> </style>

61
src/layouts/BlogPost.astro
View File

@ -1,5 +1,6 @@
--- ---
import type { CollectionEntry } from 'astro:content'; import type { CollectionEntry } from 'astro:content';
import BaseHead from '../components/BaseHead.astro'; import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro'; import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro'; import Footer from '../components/Footer.astro';
@ -7,45 +8,29 @@ 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 } = Astro.props;
--- ---
<html lang="en"> <html lang="en">
<head> <head>
<BaseHead title={title} description={description} /> <BaseHead title={title + ' - Maciej Pędzich'} description={description} />
<style> <style>
.title { .title {
font-size: 2em; font-size: 2em;
margin: 0.25em 0 0; margin: 0;
} text-align: center;
hr { }
border-top: 1px solid #ddd; </style>
margin: 1rem 0; </head>
} <body>
.last-updated-on { <Header />
font-style: italic; <main>
} <article>
</style> <h1 class="title">{title}</h1>
</head> <FormattedDate date={pubDate} />
<slot />
<body> </article>
<Header /> </main>
<main> <Footer />
<article> </body>
{heroImage && <img width={720} height={360} src={heroImage} alt="" />}
<h1 class="title">{title}</h1>
<FormattedDate date={pubDate} />
{
updatedDate && (
<div class="last-updated-on">
Last updated on <FormattedDate date={updatedDate} />
</div>
)
}
<hr />
<slot />
</article>
</main>
<Footer />
</body>
</html> </html>

20
src/pages/blog/[...slug].astro
View File

@ -1,21 +1,25 @@
--- ---
import { CollectionEntry, getCollection } from 'astro:content'; import { CollectionEntry, getCollection } from 'astro:content';
import BlogPost from '../../layouts/BlogPost.astro'; import BlogPost from '../../layouts/BlogPost.astro';
import TableOfContents from '../../components/TableOfContents.astro';
export async function getStaticPaths() { export async function getStaticPaths() {
const posts = await getCollection('blog'); const posts = await getCollection('blog');
return posts.map((post) => ({
params: { slug: post.slug }, return posts.map((post) => ({
props: post, params: { slug: post.slug },
})); props: post
}));
} }
type Props = CollectionEntry<'blog'>; type Props = CollectionEntry<'blog'>;
const post = Astro.props; const post = Astro.props;
const { Content } = await post.render(); const { Content, headings } = await post.render();
--- ---
<BlogPost {...post.data}> <BlogPost {...post.data}>
<h1>{post.data.title}</h1> {headings.length > 0 && <TableOfContents headings={headings} />}
<Content /> <Content />
</BlogPost> </BlogPost>

71
src/pages/blog/index.astro
View File

@ -6,49 +6,38 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
import { getCollection } from 'astro:content'; import { getCollection } from 'astro:content';
import FormattedDate from '../../components/FormattedDate.astro'; import FormattedDate from '../../components/FormattedDate.astro';
const posts = (await getCollection('blog')).sort( const posts = (
(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf() await getCollection('blog', (post) => import.meta.env.DEV || !post.data.draft)
); ).sort((a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf());
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
<style> <style>
ul { section {
list-style-type: none; text-align: center;
padding: unset; }
} </style>
ul li { </head>
display: flex; <body>
} <Header />
ul li :global(time) { <main>
flex: 0 0 130px; <section>
font-style: italic; <h2>My blog</h2>
color: #595959; <ul>
} {
ul li a:visited { posts.map((post) => (
color: #8e32dc; <li>
} <FormattedDate date={post.data.pubDate} />
</style> <a href={`/blog/${post.slug}/`}>{post.data.title}</a>
</head> </li>
<body> ))
<Header /> }
<main> </ul>
<section> </section>
<ul> </main>
{ <Footer />
posts.map((post) => ( </body>
<li>
<FormattedDate date={post.data.pubDate} />
<a href={`/blog/${post.slug}/`}>{post.data.title}</a>
</li>
))
}
</ul>
</section>
</main>
<Footer />
</body>
</html> </html>

112
src/pages/index.astro
View File

@ -2,49 +2,81 @@
import BaseHead from '../components/BaseHead.astro'; import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro'; import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro'; import Footer from '../components/Footer.astro';
import FormattedDate from '../components/FormattedDate.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts'; import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head> </head>
<body> <body>
<Header title={SITE_TITLE} /> <Header title={SITE_TITLE} />
<main> <main>
<h1>🧑‍🚀 Hello, Astronaut!</h1> <h2>Welcome to my website!</h2>
<p> <p>
Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This My name is <strong>Maciej</strong>, but if you don't know how to
template serves as a lightweight, minimally-styled starting point for anyone looking to build pronounce it, then you can call me <strong>Mac</strong>. I'm an
a personal website, blog, or portfolio with Astro. eighteen-year-old frontend developer from <strong>Poland</strong>.
</p> Although I mainly use <strong>Vue</strong> and <strong>Nuxt</strong> for
<p> my projects, I'm also familiar with <strong>Alpine</strong> and <strong
This template comes with a few integrations already configured in your >Astro</strong
<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, </p>
React, or Vue to your project. <h3>My blog</h3>
</p> <p>
<p>Here are a few ideas on how to get started with the template:</p> It serves as a means of documenting the development process and inner
<ul> workings of <a href="/projects">my applications</a>. Check out my latest
<li>Edit this page in <code>src/pages/index.astro</code></li> posts below:
<li>Edit the site header items in <code>src/components/Header.astro</code></li> </p>
<li>Add your name to the footer in <code>src/components/Footer.astro</code></li> <ul>
<li>Check out the included blog posts in <code>src/pages/blog/</code></li> <li>
<li>Customize the blog post page layout in <code>src/layouts/BlogPost.astro</code></li> <FormattedDate date={new Date()} />
</ul> <a href="#">Lorem Ipsum</a>
<p> </li>
Have fun! If you get stuck, remember to <a href="https://docs.astro.build/" <li>
>read the docs <FormattedDate date={new Date()} />
</a> or <a href="https://astro.build/chat">join us on Discord</a> to ask questions. <a href="#">Lorem Ipsum</a>
</p> </li>
<p> <li>
Looking for a blog template with a bit more personality? Check out <a <FormattedDate date={new Date()} />
href="https://github.com/Charca/astro-blog-template" <a href="#">Lorem Ipsum</a>
>astro-blog-template </li>
</a> by <a href="https://twitter.com/Charca">Maxi Ferreira</a>. </ul>
</p> <h3>Enjoy my work?</h3>
</main> <p>
<Footer /> If so, then make sure to follow me on <a
</body> href="https://github.com/maciejpedzich"
target="_blank"
rel="noopener noreferrer">GitHub</a
>, <a
href="https://twitter.com/MaciejPedzich"
target="_blank"
rel="noopener noreferrer">Twitter</a
>, or <a rel="me" href="https://notacult.social/@macindahaus"
>Mastodon</a
>.
</p>
</main>
<Footer />
<style>
main {
text-align: center;
}
h2,
h3 {
text-transform: none;
}
h3 {
font-size: 1.25rem;
}
p {
margin: 0.5rem 0 1rem 0;
}
</style>
</body>
</html> </html>

174
src/styles/global.css
View File

@ -4,64 +4,160 @@
License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md
*/ */
body { body {
font-family: Verdana, sans-serif; display: flex;
margin: auto; flex-direction: column;
padding: 20px; max-width: min(65ch, 90%);
max-width: 65ch; height: 100vh;
text-align: left; font-family: Arial, Helvetica, sans-serif;
background-color: #fff; margin: 0 auto;
word-wrap: break-word; padding: 0;
overflow-wrap: break-word; background-color: #485870;
line-height: 1.5; color: #fff;
color: #444; text-align: left;
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.8;
} }
h1, h1,
h2, h2,
h3, h3 {
h4, margin: 0;
h5, font-weight: normal;
h6, text-transform: lowercase;
strong,
b {
color: #222;
} }
a {
color: #3273dc; a,
a:visited {
color: #fff;
} }
nav a {
margin-right: 10px; a:hover,
a:active {
color: rgba(255, 255, 255, 0.4);
} }
a:focus {
outline: 2px solid #ccc;
outline-offset: 3px;
}
p {
text-align: left;
}
main {
flex: 1 1 auto;
}
a:visited {
color: unset;
}
ul {
list-style-type: none;
padding: unset;
}
ul li {
display: flex;
justify-content: center;
}
ul li::before {
content: '-';
}
ul li time {
flex: 0 0 112px;
}
textarea { textarea {
width: 100%; width: 100%;
font-size: 16px; font-size: 16px;
} }
input { input {
font-size: 16px; font-size: 16px;
}
content {
line-height: 1.6;
} }
table { table {
width: 100%; width: 100%;
} }
img { img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }
code { code {
padding: 2px 5px; padding: 2px 5px;
background-color: #f2f2f2; background-color: #222;
} }
pre { pre {
padding: 1rem; padding: 1rem;
} }
pre > code { pre > code {
all: unset; all: unset;
} }
blockquote { blockquote {
border: 1px solid #999; border: 1px solid #999;
color: #222; padding: 2px 0px 2px 20px;
padding: 2px 0px 2px 20px; margin: 0px;
margin: 0px; font-style: italic;
font-style: italic; }
article > time {
display: block;
width: 100%;
text-align: center;
}
.cmr2-text {
display: flex;
justify-content: center;
font-weight: normal;
text-transform: lowercase;
text-align: center;
white-space: nowrap;
}
h1.cmr2-text {
margin: 22px 0;
}
.cmr2-text > span,
.cmr2-text > a {
border-left-width: 0.05em;
border-left-style: solid;
text-align: center;
}
.cmr2-text > span {
border-left-color: #fff;
}
.cmr2-text > a {
border-left-color: rgba(255, 255, 255, 0.4);
}
.cmr2-text > span {
padding: 0 0.5em;
}
.cmr2-text > a {
padding: 0.05em 0.7em;
}
.cmr2-text > span:first-of-type,
.cmr2-text > a:first-of-type {
border-left: none;
}
.cmr2-text > a:hover,
.cmr2-text > a:focus {
color: #fff;
} }