From 8b8b81f3d14a19c131943772a748121d426eb3ef Mon Sep 17 00:00:00 2001
From: Sveske_Juice <carl.benjamin.dreyer@gmail.com>
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%
</head>
- <body data-sveltekit-preload-data="hover">
- <div style="display: contents">%sveltekit.body%</div>
- </body>
+
+ <div style="display: contents">%sveltekit.body%</div>
</html>
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 @@
+<script>
+ export let post_url = '404';
+ export let thumbnail_url = '/favicon.png';
+ export let thumbnail_alt = 'Picture describting the deprived devs logo';
+ export let title = '<title>';
+ export let summary = '<summary>';
+ export let creation_date = '<date>';
+</script>
+
+<div class="news-card">
+ <a href=/post/{post_url}>
+ <div class="thumbnail">
+ <img src={thumbnail_url} alt={thumbnail_alt}/>
+ </div>
+ <div class="content">
+ <h3 id="title">{title}</h3>
+ <p id="summary-text">{summary}</p>
+ <p id="date">{creation_date}</p>
+ </div>
+ </a>
+</div>
+
+<style>
+ a {
+ text-decoration: none;
+
+ display: flex;
+ flex-direction: row;
+ gap: 15px;
+ }
+
+ .thumbnail > img {
+ object-fit: cover;
+
+ box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
+ border-radius: 8px;
+
+ width: 150px;
+ height: auto;
+ }
+
+ .content {
+ flex-shrink: 2;
+
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ }
+
+ #title {
+ margin: 0;
+ text-decoration: none;
+ color: var(--text2);
+ }
+
+ #summary-text {
+ margin: 0;
+ text-decoration: none;
+ color: var(--text3);
+ }
+
+ #date {
+ margin: 0;
+ text-decoration: none;
+ color: var(--text4);
+ }
+
+</style>
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 @@
+<script>
+ export let post_url = '404';
+ export let thumbnail_url = '/favicon.png';
+ export let thumbnail_alt = 'Picture describting the deprived devs logo';
+ export let title = '<title>';
+ export let summary = '<summary>';
+ export let creation_date = '<date>';
+</script>
+
+<div class="news-card">
+ <a href=/post/{post_url} >
+ <div class="thumbnail">
+ <img src={thumbnail_url} alt={thumbnail_alt}/>
+ </div>
+ <div class="content">
+ <h3 id="title">{title}</h3>
+ <p id="summary-text">{summary}</p>
+ <p id="date">{creation_date}</p>
+ </div>
+ </a>
+</div>
+
+<style>
+ a {
+ text-decoration: none;
+ }
+
+ .news-card {
+ display: inline-flex;
+ flex-direction: column;
+ gap: 15px;
+ }
+
+ .news-card h3 {
+ color: var(--text1);
+ margin: 0px;
+ font-size: 22px;
+ }
+
+ .thumbnail img {
+ background-size: cover;
+ aspect-ratio: 16 / 9;
+ background-position: center;
+
+ box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
+ border-radius: 8px;
+
+ flex-shrink: 0;
+ min-width: 100%;
+ min-height: 100%;
+ }
+
+ .content {
+ display: flex;
+ flex-direction: column;
+
+ gap: 10px;
+ }
+
+ #title {
+ margin: 0;
+ text-decoration: none;
+ color: var(--text1);
+ }
+
+ #summary-text {
+ margin: 0;
+ text-decoration: none;
+ color: var(--text2);
+ }
+
+ #date {
+ margin: 0;
+ text-decoration: none;
+ color: var(--text4);
+ }
+</style>
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 @@
<script lang="ts">
- export let data;
+ import NewsCard from '$lib/posts/NewsCard.svelte';
+import ShowcaseNewsCard from '$lib/posts/ShowcaseNewsCard.svelte';
+
+ export let data; // <- contains post data
</script>
<div class="main-title">
<h1>The Deprived Devs</h1>
</div>
-<h1>Recent posts on Deprived.dev</h1>
-<ul>
- <!-- TODO: Filter by date or something -->
- {#each data.summaries as summary}
- <li><a href="/post/{summary.url}">{summary.title}</a></li>
- {/each}
-</ul>
+
+<section id="news-section">
+ <h1 id="news-header">Recent News</h1>
+ <div class="news-container">
+ <!-- The newest blog post being showcased -->
+ <ShowcaseNewsCard post_url={data.summaries[0].url} title={data.summaries[0].title} summary={data.summaries[0].summary} creation_date={data.summaries[0].creation_date} />
+
+ <div class="news-list">
+ {#each data.summaries as summary}
+ <NewsCard post_url={summary.url} title={summary.title} summary={summary.summary} creation_date={summary.creation_date} />
+ {/each}
+ </div>
+ <!-- TODO: Filter by date or something -->
+
+ </div>
+</section>
<style>
+ #news-section {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ width: 60%;
+ margin: auto;
+ }
+
+ #news-header {
+ font-size: 48px;
+ margin-right: auto;
+ }
+
+ .news-container {
+ display: flex;
+ flex-direction: row;
+ gap: 25px;
+
+ width: 100%;
+ align-items: left;
+ }
+
+ .news-list {
+ display: flex;
+ flex-direction: column;
+
+ gap: 20px;
+ }
+
.main-title {
- font-family: "CozetteVector";
+ color: var(--text1);
margin: 0 auto;
width: 80%;
text-align: center;
}
.main-title > h1 {
- font-size: 4.5vw; /* Change if title changes */
+ font-size: 9vw; /* Change if title changes */
+ }
+
+ h1 {
+ color: var(--text1);
}
</style>
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 @@
-<script lang="ts">
- export let data;
-</script>
-
<h1>All posts on deprived.dev!</h1>
<ul>
- {#each data.summaries as summary}
+ {#each posts_data.summaries as summary}
<li><a href="/post/{summary.url}">{summary.title}</a></li>
{/each}
</ul>
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;