Made a 'pretty' news section on the main page for the latest news
This commit is contained in:
parent
8b533b296c
commit
8b8b81f3d1
|
|
@ -12,7 +12,6 @@
|
||||||
%sveltekit.head%
|
%sveltekit.head%
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body data-sveltekit-preload-data="hover">
|
|
||||||
<div style="display: contents">%sveltekit.body%</div>
|
<div style="display: contents">%sveltekit.body%</div>
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
// place files you want to import through the `$lib` alias in this folder.
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -3,13 +3,13 @@
|
||||||
* for all posts on the website.
|
* 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
|
// Basically the same as Post but might contain less infomation - save storage
|
||||||
type Summary = {
|
type Summary = {
|
||||||
url : string,
|
url : string,
|
||||||
title : string,
|
title : string,
|
||||||
description : string,
|
summary : string,
|
||||||
creation_date : number,
|
creation_date : number,
|
||||||
modification_date: number,
|
modification_date: number,
|
||||||
};
|
};
|
||||||
|
|
@ -21,7 +21,7 @@ export function load() {
|
||||||
let summary : Summary = {
|
let summary : Summary = {
|
||||||
url: post.url,
|
url: post.url,
|
||||||
title : post.title,
|
title : post.title,
|
||||||
description : post.description,
|
summary : post.summary,
|
||||||
creation_date : post.creation_date,
|
creation_date : post.creation_date,
|
||||||
modification_date : post.modification_date
|
modification_date : post.modification_date
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,28 +1,74 @@
|
||||||
<script lang="ts">
|
<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>
|
</script>
|
||||||
|
|
||||||
<div class="main-title">
|
<div class="main-title">
|
||||||
<h1>The Deprived Devs</h1>
|
<h1>The Deprived Devs</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1>Recent posts on Deprived.dev</h1>
|
|
||||||
<ul>
|
<section id="news-section">
|
||||||
<!-- TODO: Filter by date or something -->
|
<h1 id="news-header">Recent News</h1>
|
||||||
{#each data.summaries as summary}
|
<div class="news-container">
|
||||||
<li><a href="/post/{summary.url}">{summary.title}</a></li>
|
<!-- The newest blog post being showcased -->
|
||||||
{/each}
|
<ShowcaseNewsCard post_url={data.summaries[0].url} title={data.summaries[0].title} summary={data.summaries[0].summary} creation_date={data.summaries[0].creation_date} />
|
||||||
</ul>
|
|
||||||
|
<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>
|
<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 {
|
.main-title {
|
||||||
font-family: "CozetteVector";
|
color: var(--text1);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-title > h1 {
|
.main-title > h1 {
|
||||||
font-size: 4.5vw; /* Change if title changes */
|
font-size: 9vw; /* Change if title changes */
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: var(--text1);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,6 @@
|
||||||
<script lang="ts">
|
|
||||||
export let data;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<h1>All posts on deprived.dev!</h1>
|
<h1>All posts on deprived.dev!</h1>
|
||||||
<ul>
|
<ul>
|
||||||
{#each data.summaries as summary}
|
{#each posts_data.summaries as summary}
|
||||||
<li><a href="/post/{summary.url}">{summary.title}</a></li>
|
<li><a href="/post/{summary.url}">{summary.title}</a></li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ type Post = {
|
||||||
// Required
|
// Required
|
||||||
url : string,
|
url : string,
|
||||||
title: string,
|
title: string,
|
||||||
description : string,
|
summary : string,
|
||||||
creation_date : number
|
creation_date : number
|
||||||
modification_date: number,
|
modification_date: number,
|
||||||
|
|
||||||
|
|
@ -16,14 +16,14 @@ export const posts : Post[] = [
|
||||||
{
|
{
|
||||||
url: 'folder-icons',
|
url: 'folder-icons',
|
||||||
title: 'Amazing Icons for Folders in Unity!',
|
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,
|
creation_date: 1708382491,
|
||||||
modification_date: 1708382491,
|
modification_date: 1708382491,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
url: 'lorem',
|
url: 'lorem',
|
||||||
title: 'Lorem Ipsum !!',
|
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,
|
creation_date: 1708382491,
|
||||||
modification_date: 1708382491,
|
modification_date: 1708382491,
|
||||||
},
|
},
|
||||||
|
|
@ -7,6 +7,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
color: var(--text);
|
font-family: 'CozetteVector';
|
||||||
|
color: var(--text2); /* Default to secondary text color. */
|
||||||
background-color: var(--background);
|
background-color: var(--background);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,9 @@
|
||||||
:root {
|
:root {
|
||||||
--text: #ece4ee;
|
--text1: #fff; /* Primary text. */
|
||||||
--background: #120c13;
|
--text2: #cac9c6; /* Secondary text. */
|
||||||
|
--text3: #b0afad; /* Third text color. */
|
||||||
|
--text4: #868584; /* Fourth text color. */
|
||||||
|
--background: #1e2122;
|
||||||
--primary: #ff8552;
|
--primary: #ff8552;
|
||||||
--secondary: #6c6b44;
|
--secondary: #6c6b44;
|
||||||
--accent: #7da16a;
|
--accent: #7da16a;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue