From 8b8b81f3d14a19c131943772a748121d426eb3ef Mon Sep 17 00:00:00 2001 From: Sveske_Juice Date: Tue, 20 Feb 2024 21:05:42 +0100 Subject: [PATCH] Made a 'pretty' news section on the main page for the latest news --- src/app.html | 5 +- src/lib/index.js | 1 - src/lib/posts/NewsCard.svelte | 68 +++++++++++++++++++ src/lib/posts/ShowcaseNewsCard.svelte | 77 ++++++++++++++++++++++ src/routes/+layout.server.ts | 6 +- src/routes/+page.svelte | 66 ++++++++++++++++--- src/routes/post/+page.svelte | 6 +- src/routes/post/{data.ts => posts_data.ts} | 6 +- static/stylesheets/global.css | 3 +- static/stylesheets/main-theme.css | 7 +- 10 files changed, 217 insertions(+), 28 deletions(-) delete mode 100644 src/lib/index.js create mode 100644 src/lib/posts/NewsCard.svelte create mode 100644 src/lib/posts/ShowcaseNewsCard.svelte rename src/routes/post/{data.ts => posts_data.ts} (72%) diff --git a/src/app.html b/src/app.html index da2ad9c..d385a62 100644 --- a/src/app.html +++ b/src/app.html @@ -12,7 +12,6 @@ %sveltekit.head% - -
%sveltekit.body%
- + +
%sveltekit.body%
diff --git a/src/lib/index.js b/src/lib/index.js deleted file mode 100644 index 856f2b6..0000000 --- a/src/lib/index.js +++ /dev/null @@ -1 +0,0 @@ -// place files you want to import through the `$lib` alias in this folder. diff --git a/src/lib/posts/NewsCard.svelte b/src/lib/posts/NewsCard.svelte new file mode 100644 index 0000000..676ec33 --- /dev/null +++ b/src/lib/posts/NewsCard.svelte @@ -0,0 +1,68 @@ + + +
+ +
+ {thumbnail_alt}/ +
+
+

{title}

+

{summary}

+

{creation_date}

+
+ +
+ + diff --git a/src/lib/posts/ShowcaseNewsCard.svelte b/src/lib/posts/ShowcaseNewsCard.svelte new file mode 100644 index 0000000..86ad77e --- /dev/null +++ b/src/lib/posts/ShowcaseNewsCard.svelte @@ -0,0 +1,77 @@ + + +
+ +
+ {thumbnail_alt}/ +
+
+

{title}

+

{summary}

+

{creation_date}

+
+ +
+ + diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts index f259a5e..5c86d4a 100644 --- a/src/routes/+layout.server.ts +++ b/src/routes/+layout.server.ts @@ -3,13 +3,13 @@ * for all posts on the website. */ -import { posts } from './post/data.js'; +import { posts } from './post/posts_data.js'; // Basically the same as Post but might contain less infomation - save storage type Summary = { url : string, title : string, - description : string, + summary : string, creation_date : number, modification_date: number, }; @@ -21,7 +21,7 @@ export function load() { let summary : Summary = { url: post.url, title : post.title, - description : post.description, + summary : post.summary, creation_date : post.creation_date, modification_date : post.modification_date }; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 08cce52..35670c5 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,28 +1,74 @@

The Deprived Devs

-

Recent posts on Deprived.dev

- + +
+

Recent News

+
+ + + +
+ {#each data.summaries as summary} + + {/each} +
+ + +
+
diff --git a/src/routes/post/+page.svelte b/src/routes/post/+page.svelte index 507ab0d..a9af215 100644 --- a/src/routes/post/+page.svelte +++ b/src/routes/post/+page.svelte @@ -1,10 +1,6 @@ - -

All posts on deprived.dev!

diff --git a/src/routes/post/data.ts b/src/routes/post/posts_data.ts similarity index 72% rename from src/routes/post/data.ts rename to src/routes/post/posts_data.ts index b5e8e23..e5f928c 100644 --- a/src/routes/post/data.ts +++ b/src/routes/post/posts_data.ts @@ -3,7 +3,7 @@ type Post = { // Required url : string, title: string, - description : string, + summary : string, creation_date : number modification_date: number, @@ -16,14 +16,14 @@ export const posts : Post[] = [ { url: 'folder-icons', title: 'Amazing Icons for Folders in Unity!', - description: 'See how you can use Zhen\'s folder icons for Unity to boost your developer experience', + summary: 'See how you can use Zhen\'s folder icons for Unity to boost your developer experience', creation_date: 1708382491, modification_date: 1708382491, }, { url: 'lorem', title: 'Lorem Ipsum !!', - description: 'This is a nice exploanation on lorem ipsum latin', + summary: 'This is a nice exploanation on lorem ipsum latin', creation_date: 1708382491, modification_date: 1708382491, }, diff --git a/static/stylesheets/global.css b/static/stylesheets/global.css index 8c0b2c9..05d8ce1 100644 --- a/static/stylesheets/global.css +++ b/static/stylesheets/global.css @@ -7,6 +7,7 @@ } body { - color: var(--text); + font-family: 'CozetteVector'; + color: var(--text2); /* Default to secondary text color. */ background-color: var(--background); } diff --git a/static/stylesheets/main-theme.css b/static/stylesheets/main-theme.css index 5eff32f..0275504 100644 --- a/static/stylesheets/main-theme.css +++ b/static/stylesheets/main-theme.css @@ -1,6 +1,9 @@ :root { - --text: #ece4ee; - --background: #120c13; + --text1: #fff; /* Primary text. */ + --text2: #cac9c6; /* Secondary text. */ + --text3: #b0afad; /* Third text color. */ + --text4: #868584; /* Fourth text color. */ + --background: #1e2122; --primary: #ff8552; --secondary: #6c6b44; --accent: #7da16a;