diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
index 7113e39..88db36b 100644
--- a/src/components/BaseHead.astro
+++ b/src/components/BaseHead.astro
@@ -4,9 +4,9 @@
import '../styles/global.css';
export interface Props {
- title: string;
- description: string;
- image?: string;
+ title: string;
+ description: string;
+ image?: string;
}
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;
---
-
{title}
- © {today.getFullYear()} YOUR NAME HERE. All rights reserved.
+ © {today.getFullYear()} Maciej Pędzich
+
diff --git a/src/components/FormattedDate.astro b/src/components/FormattedDate.astro
index 1a40fbc..51f6cef 100644
--- a/src/components/FormattedDate.astro
+++ b/src/components/FormattedDate.astro
@@ -1,17 +1,11 @@
---
export interface Props {
- date: Date;
+ date: Date;
}
const { date } = Astro.props;
---
- {
- date.toLocaleDateString('en-us', {
- year: 'numeric',
- month: 'short',
- day: 'numeric',
- })
- }
+ {date.toISOString().substring(0, 10)}
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 4d3da1f..aa907b1 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,25 +1,49 @@
---
import HeaderLink from './HeaderLink.astro';
-import { SITE_TITLE } from '../consts';
---
-
- {SITE_TITLE}
-
-
- Home
- Blog
- About
- Twitter
- GitHub
-
+
+ Maciej
+ Pędzich
+
+
+ Home
+ Blog
+ Projects
+ Resume
+ Email me
+ Links
+
+
diff --git a/src/components/HeaderLink.astro b/src/components/HeaderLink.astro
index 3dd439b..77501bb 100644
--- a/src/components/HeaderLink.astro
+++ b/src/components/HeaderLink.astro
@@ -10,15 +10,17 @@ const isActive = href === pathname || href === pathname.replace(/\/$/, '');
---
-
+
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index a9526d0..0ccb988 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -1,5 +1,6 @@
---
import type { CollectionEntry } from 'astro:content';
+
import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
@@ -7,45 +8,29 @@ import FormattedDate from '../components/FormattedDate.astro';
type Props = CollectionEntry<'blog'>['data'];
-const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
+const { title, description, pubDate } = Astro.props;
---
-
-
-
- {heroImage && {title}
-
- Last updated on
- )
- }
-
-
-
-
+
+
+
+ {title}
+
+
+
+
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index 0d656a1..1af04a9 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -1,21 +1,25 @@
---
import { CollectionEntry, getCollection } from 'astro:content';
+
import BlogPost from '../../layouts/BlogPost.astro';
+import TableOfContents from '../../components/TableOfContents.astro';
export async function getStaticPaths() {
- const posts = await getCollection('blog');
- return posts.map((post) => ({
- params: { slug: post.slug },
- props: post,
- }));
+ const posts = await getCollection('blog');
+
+ return posts.map((post) => ({
+ params: { slug: post.slug },
+ props: post
+ }));
}
+
type Props = CollectionEntry<'blog'>;
const post = Astro.props;
-const { Content } = await post.render();
+const { Content, headings } = await post.render();
---
- {post.data.title}
-
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 47126e7..77cfc35 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -6,49 +6,38 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
import { getCollection } from 'astro:content';
import FormattedDate from '../../components/FormattedDate.astro';
-const posts = (await getCollection('blog')).sort(
- (a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
-);
+const posts = (
+ await getCollection('blog', (post) => import.meta.env.DEV || !post.data.draft)
+).sort((a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf());
---
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 26f070d..6df80bb 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,49 +2,81 @@
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 { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
---
-
-
- 🧑🚀 Hello, Astronaut!
-
- Welcome to the official Astro 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.
-
-
- This template comes with a few integrations already configured in your
- astro.config.mjs file. You can customize your setup with
- Astro Integrations to add tools like Tailwind,
- React, or Vue to your project.
-
- Here are a few ideas on how to get started with the template:
-
- Edit this page in src/pages/index.astro
- Edit the site header items in src/components/Header.astro
- Add your name to the footer in src/components/Footer.astro
- Check out the included blog posts in src/pages/blog/
- Customize the blog post page layout in src/layouts/BlogPost.astro
-
-
- Have fun! If you get stuck, remember to read the docs
- or join us on Discord to ask questions.
-
-
- Looking for a blog template with a bit more personality? Check out astro-blog-template
- by Maxi Ferreira .
-
-
-
-
+
+
+ Welcome to my website!
+
+ My name is Maciej , but if you don't know how to
+ pronounce it, then you can call me Mac . I'm an
+ eighteen-year-old frontend developer from Poland .
+ Although I mainly use Vue and Nuxt for
+ my projects, I'm also familiar with Alpine and Astro .
+
+ My blog
+
+ It serves as a means of documenting the development process and inner
+ workings of my applications . Check out my latest
+ posts below:
+
+
+ Enjoy my work?
+
+ If so, then make sure to follow me on GitHub , Twitter , or Mastodon .
+
+
+
+
+
diff --git a/src/styles/global.css b/src/styles/global.css
index 999782f..81a9533 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -4,64 +4,160 @@
License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md
*/
body {
- font-family: Verdana, sans-serif;
- margin: auto;
- padding: 20px;
- max-width: 65ch;
- text-align: left;
- background-color: #fff;
- word-wrap: break-word;
- overflow-wrap: break-word;
- line-height: 1.5;
- color: #444;
+ display: flex;
+ flex-direction: column;
+ max-width: min(65ch, 90%);
+ height: 100vh;
+ font-family: Arial, Helvetica, sans-serif;
+ margin: 0 auto;
+ padding: 0;
+ background-color: #485870;
+ color: #fff;
+ text-align: left;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ line-height: 1.8;
}
+
h1,
h2,
-h3,
-h4,
-h5,
-h6,
-strong,
-b {
- color: #222;
+h3 {
+ margin: 0;
+ font-weight: normal;
+ text-transform: lowercase;
}
-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 {
- width: 100%;
- font-size: 16px;
+ width: 100%;
+ font-size: 16px;
}
+
input {
- font-size: 16px;
-}
-content {
- line-height: 1.6;
+ font-size: 16px;
}
+
table {
- width: 100%;
+ width: 100%;
}
+
img {
- max-width: 100%;
- height: auto;
+ max-width: 100%;
+ height: auto;
}
+
code {
- padding: 2px 5px;
- background-color: #f2f2f2;
+ padding: 2px 5px;
+ background-color: #222;
}
+
pre {
- padding: 1rem;
+ padding: 1rem;
}
+
pre > code {
- all: unset;
+ all: unset;
}
+
blockquote {
- border: 1px solid #999;
- color: #222;
- padding: 2px 0px 2px 20px;
- margin: 0px;
- font-style: italic;
+ border: 1px solid #999;
+ padding: 2px 0px 2px 20px;
+ margin: 0px;
+ 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;
}