Skip to content

Commit 91e2edc

Browse files
josecelanojosecelano
committed
Merge #102: change path segments
d01a9a3 fix story errors (Graeme Byrne) 3f20ff1 change path segments (Graeme Byrne) Pull request description: * [Add a path segment in the URL for sections #73](#73) Change blog route so instead of `https://torrust.com/released-v3-0-0`, the url will appear as `https://torrust.com/blog/released-v3-0-0`. Changing from the route group of `(article)` to the `named route` which will appear `/blog` required numerous changes on the site as data passes differently as grouped routes share layouts without affecting the URL, while named routes directly define URL structure and load data individually at each level. This was done by accessing the data in the `dynamic route`, which was named `[slug]`. Also, the previously separate route of `/blog` which displayed all blog posts as well as `SearchBar.svelte` was also brought into the same route. * [Ask the designer about the blog post card #60](#60) Replaced the gradients which covered each blog post card with the cover image which that particular blog post uses. * [Top Left Torrust Logo-Home-Button Visual Feedback #93](#93) Add `Home` to `Header.svelte` to make clear how to return to home page besides clicking the Nautilus logo. * [Bottom Nautilus Logo is not a link, and has no visual feedback it it should be link. #95](#95) Link Nautilus logo in `Footer.svelte` to the Nautilus website. ACKs for top commit: josecelano: ACK d01a9a3 Tree-SHA512: f14465569d0888545d2b71e259aada23ccd7cfd9b18829053bdf558d8e7cb65f60178f0885d1c435f30d409192723bfe83b9731e6aca3785638294cd2888d358
2 parents 8f0c789 + d01a9a3 commit 91e2edc

File tree

59 files changed

+600
-540
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+600
-540
lines changed

‎src/lib/components/atoms/RelatedCard.svelte‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,9 +58,7 @@
5858
&[onclick] {
5959
cursor: pointer;
6060
&:hover {
61-
box-shadow: var(--card-shadow-hover);
62-
transform: scale(1.01);
63-
border: 3px solid rgba(255, 49, 0, 1);
61+
border: 1px solid rgba(255, 49, 0, 1);
6462
}
6563
}
6664
}

‎src/lib/components/atoms/Slider.svelte‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,8 @@
5555
5656
a {
5757
color: rgba(245, 245, 245, 0.96);
58+
text-decoration: none;
59+
word-break: keep-all;
5860
}
5961
6062
div.has-link:hover {

‎src/lib/components/atoms/Tag.story.svelte‎

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎src/lib/components/atoms/Tag.svelte‎

Lines changed: 7 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,13 @@
1+
<!-- src/lib/components/atoms/Tag.svelte -->
12
<script lang="ts">
2-
import { HttpRegex } from '$lib/utils/regex';
3-
import ExternalLinkIcon from '$lib/icons/external-link.svelte';
4-
5-
export let color: 'primary' | 'secondary' = 'primary';
6-
7-
export let href: string | undefined = undefined;
83
export let tag: string;
9-
10-
const isExternalLink = !!href && HttpRegex.test(href);
11-
export let target: '_self' | '_blank' = isExternalLink ? '_blank' : '_self';
12-
export let rel = isExternalLink ? 'noopener noreferrer' : undefined;
13-
14-
$: tagElement = href ? 'a' : 'div';
15-
$: linkProps = {
16-
href,
17-
target,
18-
rel
19-
};
204
</script>
215

22-
<svelte:element this={tagElement} class="tag {color}" {...linkProps}>
23-
{#if isExternalLink}
24-
<div class="icon">
25-
{tag}
26-
<ExternalLinkIcon />
27-
</div>
28-
{:else}
29-
<a data-sveltekit-reload href="/tags/{tag}">
30-
<slot />
31-
</a>
32-
{/if}
33-
</svelte:element>
6+
<div class="tag">
7+
<a href={`/tags/${tag}`}>
8+
<slot>{tag}</slot>
9+
</a>
10+
</div>
3411

3512
<style lang="scss">
3613
.tag {
@@ -44,13 +21,7 @@
4421
font-size: 0.85rem;
4522
width: fit-content;
4623
white-space: nowrap;
47-
}
48-
49-
.icon {
50-
display: flex;
51-
gap: 15px;
52-
width: 100%;
53-
height: 20px;
24+
color: rgba(245, 245, 245, 0.64);
5425
}
5526
5627
a {

‎src/lib/components/atoms/TagCard.story.svelte‎

Lines changed: 0 additions & 52 deletions
This file was deleted.

‎src/lib/components/atoms/TagCard.svelte‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,6 @@
7171
display: flex;
7272
flex-direction: column;
7373
justify-content: space-between;
74-
gap: 10px;
7574
padding: 20px 20px;
7675
flex: 1 0 50%;
7776

‎src/lib/components/molecules/BlogPostCard.story.svelte‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@
2222
slug="exploring-javascript-ecosystem"
2323
date="2024-09-30"
2424
contributor="Jane Smith"
25-
showImage={false}
2625
/>
2726
</svelte:component>
2827

@@ -32,7 +31,6 @@
3231
slug="css-tricks-modern-web-dev"
3332
date="2024-09-30"
3433
contributor="Alice Johnson"
35-
showImage={true}
3634
/>
3735
</svelte:component>
3836
</svelte:component>

‎src/lib/components/molecules/BlogPostCard.svelte‎

Lines changed: 81 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<script lang="ts">
2-
import Cards from '$lib/components/atoms/Cards.svelte';
32
import { formatDate } from '$lib/utils/date';
43
54
export let title: string;
@@ -8,33 +7,95 @@
87
export let date: string;
98
export let contributor: string;
109
11-
export let showImage = true;
12-
1310
const formattedDate = formatDate(date);
1411
</script>
1512

16-
<Cards
17-
href={`/${slug}`}
18-
target="_self"
19-
additionalClass="blog-post-card {!showImage || !coverImage ? 'no-image' : ''}"
20-
>
21-
<div class="content" slot="content">
22-
<h3 class="title">
23-
{title}
24-
</h3>
25-
{#if date}
26-
<p class="date">{contributor ? contributor + ' - ' : ''}{formattedDate}</p>
27-
{/if}
13+
<a href="/blog/{slug}" class="container">
14+
<div class="grid">
15+
<div class="image-container">
16+
<img src={coverImage} alt={title} />
17+
</div>
18+
<div class="text-container">
19+
<h2>{title}</h2>
20+
{#if contributor}
21+
<p>{contributor} - {formattedDate}</p>
22+
{:else}
23+
<p>{formattedDate}</p>
24+
{/if}
25+
</div>
2826
</div>
29-
</Cards>
27+
</a>
3028

3129
<style lang="scss">
32-
.title {
30+
@import '$lib/scss/breakpoints.scss';
31+
32+
a {
33+
position: relative;
34+
display: block;
35+
width: 100%;
36+
overflow: hidden;
37+
color: rgba(245, 245, 245, 0.96);
38+
text-decoration: none;
39+
cursor: pointer;
40+
}
41+
42+
a:hover {
43+
color: rgba(255, 49, 0, 1);
44+
}
45+
46+
.grid {
47+
position: relative;
48+
width: 100%;
49+
height: 300px;
50+
}
51+
52+
.image-container {
53+
width: 100%;
54+
height: 100%;
55+
overflow: hidden;
56+
border-radius: 10px;
57+
}
58+
59+
.image-container img {
60+
width: 100%;
61+
height: 100%;
62+
object-fit: cover;
63+
}
64+
65+
.text-container {
66+
position: absolute;
67+
top: 0;
68+
left: 0;
69+
width: 100%;
70+
height: 100%;
71+
display: flex;
72+
flex-direction: column;
73+
justify-content: flex-end;
74+
align-items: flex-start;
75+
text-align: left;
76+
color: white;
77+
background: rgba(0, 0, 0, 0.5); /* Dark overlay for better readability */
78+
padding: 1rem;
79+
transition: background 0.3s ease;
80+
}
81+
82+
.text-container:hover {
83+
color: rgba(255, 49, 0, 1);
84+
}
85+
86+
.text-container h2 {
87+
margin: 0;
3388
font-size: 1.5rem;
89+
word-break: keep-all;
90+
}
91+
92+
.text-container p {
93+
margin: 0.5rem 0 0;
94+
font-size: 0.875rem;
95+
color: #f5f5f5;
3496
}
3597
36-
.date {
37-
padding-top: 0.5rem;
38-
font-size: 14px;
98+
a:hover .text-container {
99+
background: rgba(0, 0, 0, 0.7); /* Darken overlay on hover */
39100
}
40101
</style>

‎src/lib/components/molecules/BlogPreview.svelte‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<script lang="ts">
2+
import { formatDate } from '$lib/utils/date';
3+
4+
export let post_data;
5+
6+
const formattedDate = formatDate(post_data.date);
7+
</script>
8+
9+
<div class="container">
10+
<div class="grid">
11+
<div class="image-container">
12+
<img src={post_data.coverImage} alt={post_data.title} />
13+
</div>
14+
<div class="text-container">
15+
<h2>{post_data.title}</h2>
16+
{#if post_data.contributor}
17+
<p>{post_data.contributor} - {formattedDate}</p>
18+
{:else}
19+
<p>{formattedDate}</p>
20+
{/if}
21+
</div>
22+
</div>
23+
</div>
24+
25+
<style lang="scss">
26+
@import '$lib/scss/breakpoints.scss';
27+
28+
.container {
29+
height: 312px;
30+
margin: 0 auto;
31+
overflow: hidden;
32+
color: rgba(245, 245, 245, 0.96);
33+
text-decoration: none;
34+
cursor: pointer;
35+
padding: 0;
36+
}
37+
38+
.grid {
39+
position: relative;
40+
height: 300px;
41+
}
42+
43+
.image-container {
44+
width: 100%;
45+
height: 100%;
46+
overflow: hidden;
47+
border-radius: 10px;
48+
margin: 0;
49+
padding: 0;
50+
}
51+
52+
.image-container img {
53+
width: 100%;
54+
height: 100%;
55+
object-fit: cover;
56+
}
57+
58+
.text-container {
59+
position: absolute;
60+
top: 0;
61+
left: 0;
62+
width: 100%;
63+
height: 100%;
64+
display: flex;
65+
flex-direction: column;
66+
justify-content: flex-end;
67+
align-items: flex-start;
68+
text-align: left;
69+
color: white;
70+
background: rgba(0, 0, 0, 0.5);
71+
border-radius: 10px;
72+
padding: 1rem;
73+
transition: background 0.3s ease;
74+
}
75+
76+
.text-container:hover {
77+
color: rgba(255, 49, 0, 1);
78+
}
79+
80+
.text-container h2 {
81+
margin: 0;
82+
font-size: 1.5rem;
83+
word-break: keep-all;
84+
}
85+
86+
.text-container p {
87+
margin: 0.5rem 0 0;
88+
font-size: 0.875rem;
89+
color: #f5f5f5;
90+
}
91+
</style>

0 commit comments

Comments
 (0)