diff --git a/.prettierrc b/.prettierrc
index 9573023..4f8ae3c 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,7 +1,7 @@
{
"useTabs": true,
"singleQuote": true,
- "trailingComma": "none",
+ "trailingComma": "all",
"printWidth": 100,
"plugins": ["prettier-plugin-svelte"],
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
diff --git a/src/app.css b/src/app.css
index def1c25..4081124 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,9 +1,9 @@
html {
- --color-primary-h: 49;
- --color-primary-s: 79%;
- --color-primary-l: 53%;
+ --color-primary-h: 218;
+ --color-primary-s: 81%;
+ --color-primary-l: 24%;
--color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
- --color-secondary-h: 218;
+ --color-secondary-h: 100;
--color-secondary-s: 81%;
--color-secondary-l: 24%;
--color-secondary: hsl(
@@ -59,6 +59,9 @@ html {
--z-index-modal: 100;
+ --clip-path: polygon(0% 0%, 75% 0%, 100% 100%, 25% 100%);
+ --clip-path-button: polygon(0px 0px, calc(100% - 10px) 0px, 100% 40px, 10px 40px);
+
background-color: var(--color-bg);
color: var(--color-text);
}
@@ -104,6 +107,11 @@ svg {
max-width: 100%;
height: auto;
}
+button {
+ background: none;
+ border: none;
+ cursor: pointer;
+}
input,
button,
textarea,
diff --git a/src/lib/Button.svelte b/src/lib/Button.svelte
new file mode 100644
index 0000000..719e783
--- /dev/null
+++ b/src/lib/Button.svelte
@@ -0,0 +1,37 @@
+
+
+{#if disabled}
+
+{:else}
+
+{/if}
+
+
diff --git a/src/params/integer.ts b/src/params/integer.ts
new file mode 100644
index 0000000..acba385
--- /dev/null
+++ b/src/params/integer.ts
@@ -0,0 +1,5 @@
+import type { ParamMatcher } from '@sveltejs/kit';
+
+export const match: ParamMatcher = (param) => {
+ return /^\d+$/.test(param);
+};
diff --git a/src/routes/+page.md b/src/routes/+page.md
index 496bec6..9c066c4 100644
--- a/src/routes/+page.md
+++ b/src/routes/+page.md
@@ -24,16 +24,25 @@ React, SvelteKit, TailwindCSS, Rust, Docker, SQL, and AWS technologies
I'm an active contributor to the open-source world: check out
my [Github profile](https://github.com/SeriousBug)! For a closer look at my work,
-visit my [portfolio](/portfolio) where I
+visit my [portfolio](/portfolio/) where I
highlight my favorite projects. I sometimes write about the tools
-I use or challenges I've solved on my [blog](/posts). I'm always open to feedback, reach out to me through my socials linked below.
+I use or challenges I've solved on my [blog](/posts/). I'm always open to feedback, reach out to me through my socials linked below.
+
+
diff --git a/src/routes/posts/[[page=integer]]/+page.svelte b/src/routes/posts/[[page=integer]]/+page.svelte
new file mode 100644
index 0000000..e23ca00
--- /dev/null
+++ b/src/routes/posts/[[page=integer]]/+page.svelte
@@ -0,0 +1,115 @@
+
+
+
+
+
+
+
diff --git a/src/routes/posts/+page.ts b/src/routes/posts/[[page=integer]]/+page.ts
similarity index 50%
rename from src/routes/posts/+page.ts
rename to src/routes/posts/[[page=integer]]/+page.ts
index 04ee721..8ca2550 100644
--- a/src/routes/posts/+page.ts
+++ b/src/routes/posts/[[page=integer]]/+page.ts
@@ -1,6 +1,8 @@
import _ from 'lodash';
-export async function load() {
+const PAGE_SIZE = 10;
+
+export async function load({ params }) {
const allPostFiles = import.meta.glob('/src/routes/posts/*.md');
const iterablePostFiles = Object.entries(allPostFiles);
@@ -13,10 +15,21 @@ export async function load() {
return {
meta: metadata,
- path: slug
+ path: slug,
};
- })
+ }),
);
- return { posts: _.reverse(_.sortBy(posts, ({ meta }) => meta.date)) };
+ // Get the page number, converting it to a 0-based index
+ const page = (params.page ? parseInt(params.page, 10) : 1) - 1;
+
+ return {
+ posts: _.reverse(_.sortBy(posts, ({ meta }) => meta.date)).slice(
+ page * PAGE_SIZE,
+ (page + 1) * PAGE_SIZE,
+ ),
+ hasMore: posts.length > (page + 1) * PAGE_SIZE,
+ page: page + 1,
+ pageCount: Math.ceil(posts.length / PAGE_SIZE),
+ };
}
diff --git a/src/typography.css b/src/typography.css
index 5ea242a..cd8adea 100644
--- a/src/typography.css
+++ b/src/typography.css
@@ -17,7 +17,7 @@ h6 {
font-size: 1.125rem;
}
a {
- color: var(--color-secondary);
+ color: var(--color-primary);
font-weight: 600;
text-decoration-color: transparent;
opacity: 0.8;
diff --git a/static/android-chrome-192x192.png b/static/android-chrome-192x192.png
index c41f4d4..9ffba49 100644
--- a/static/android-chrome-192x192.png
+++ b/static/android-chrome-192x192.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:0abdac4abf33d383c66826e21e03193896b66656c5188c45f3fdb78b0b7f1758
-size 18318
+oid sha256:17ec088f965c173e59b20f5f74f6e2be6b5c3dd68d84bfefb3aececa66eae5b1
+size 28198
diff --git a/static/android-chrome-512x512.png b/static/android-chrome-512x512.png
index 6c59064..28402e5 100644
--- a/static/android-chrome-512x512.png
+++ b/static/android-chrome-512x512.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:73eaabbfb54beb3db0df0be319b0fed7afb8b8bef4bb59185c555308fbaa8a06
-size 81704
+oid sha256:489cb6a38f7a2f1fb982876369f7c7a309337740d351ababdc8b5705ca562a02
+size 153562
diff --git a/static/apple-touch-icon.png b/static/apple-touch-icon.png
index 889e87e..3a95b03 100644
--- a/static/apple-touch-icon.png
+++ b/static/apple-touch-icon.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:878a6f0fc9d6c50a852c93fe0830d74017e242dabd11d0ed3a9be8c504340f7d
-size 16418
+oid sha256:6af985cddd7deac96c549e9fabfa3932b2a1a4ff44761144b215fea3b6cc4b18
+size 25206
diff --git a/static/favicon-16x16.png b/static/favicon-16x16.png
index 6683510..f359ff8 100644
--- a/static/favicon-16x16.png
+++ b/static/favicon-16x16.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:9c49e89b2b99478daaec80a42e6b9e257300c51085017851b74c3924ae170ea5
-size 540
+oid sha256:10fe39579ba0452f51b658ae2d0f83b27384c0ce01e800f5baaa5aba999bb3d8
+size 693
diff --git a/static/favicon-32x32.png b/static/favicon-32x32.png
index a97ecfd..56c15fa 100644
--- a/static/favicon-32x32.png
+++ b/static/favicon-32x32.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:92f5b6f8b4ff978ad0ab911695b555d27fe3fa931a683dc28a8ff7f5c8a25872
-size 1343
+oid sha256:31996829c64d911eac0c3029b8c4c10bd23213a7d61d0e83656dbec4427a623d
+size 1779
diff --git a/static/favicon.ico b/static/favicon.ico
index 4d0ff66..2aacd9c 100644
Binary files a/static/favicon.ico and b/static/favicon.ico differ
diff --git a/static/favicon.png b/static/favicon.png
index ae01b21..28402e5 100644
--- a/static/favicon.png
+++ b/static/favicon.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:b18d6b80413e8e2b75fb64f45ef1f13503210f378c6d7c6ec3c9966133d41221
-size 12376
+oid sha256:489cb6a38f7a2f1fb982876369f7c7a309337740d351ababdc8b5705ca562a02
+size 153562