Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add changes to v2 #1

Merged
merged 6 commits into from
Sep 19, 2024
Merged

add changes to v2 #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c37e9f0
add changes to v2
grmbyrn Sep 18, 2024
56defe0
fix lint errors
grmbyrn Sep 18, 2024
016232c
fix run check error
grmbyrn Sep 18, 2024
777f926
fix lint error
grmbyrn Sep 18, 2024
44eba55
Update CNAME
josecelano Sep 19, 2024
50ceb4b
Delete CNAME
josecelano Sep 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion CNAME
View file
Open in desktop

This file was deleted.

14 changes: 4 additions & 10 deletions src/lib/v2/components/atoms/Cards.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,6 @@
overflow: hidden;
text-decoration: none;
color: inherit;
width: 100%;
transition: box-shadow 0.3s ease;

&:hover {
Expand All @@ -75,23 +74,18 @@
flex-direction: column;
justify-content: flex-end;
padding: 1.5rem;
background: rgba(
0,
0,
0,
0.8
); /* Optional: Add a semi-transparent background to ensure text readability */
color: #fff; /* Ensure text is readable over the background */
background: rgba(0, 0, 0, 0.5);
color: #fff;
height: 100%;
z-index: 1;

&:hover {
/* Optional hover effect for cards */
background: rgba(0, 0, 0, 0.5);
background: rgba(0, 0, 0, 0.1);
}
}

.content {
padding: 1rem;
background: rgba(0, 0, 0, 0.5);
}
</style>
83 changes: 83 additions & 0 deletions src/lib/v2/components/atoms/RelatedCard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<script lang="ts">
import { HttpRegex } from '$lib/utils/regex';

export let additionalClass: string | undefined = undefined;

export let href: string | undefined = undefined;
const isExternalLink = !!href && HttpRegex.test(href);
export let target: '_self' | '_blank' = isExternalLink ? '_blank' : '_self';
export let rel = isExternalLink ? 'noopener noreferrer' : undefined;

$: tag = href ? 'a' : 'article';
$: linkProps = {
href,
target,
rel
};
</script>

<svelte:element
this={tag}
class="card {additionalClass}"
{...linkProps}
data-sveltekit-preload-data
{...$$restProps}
>
<div class="body">
<div class="content">
<slot name="content" />
</div>
{#if $$slots.footer}
<div class="footer">
<slot name="footer" />
</div>
{/if}
</div>
</svelte:element>

<style lang="scss">
.card {
background: rgba(0, 0, 0, 0.5);
box-shadow: var(--card-shadow);
color: var(--color--text);
border-radius: 10px;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
width: 100%;
color: rgba(245, 245, 245, 0.96);
border: 1px solid rgba(245, 245, 245, 0.08);

display: flex;
flex-direction: row;
flex-wrap: wrap;

text-decoration: none;

&[href],
&[onclick] {
cursor: pointer;
&:hover {
box-shadow: var(--card-shadow-hover);
transform: scale(1.01);
}
}
}

.body {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 10px;
padding: 20px 20px;
flex: 1 0 50%;
color: rgba(245, 245, 245, 0.96);

.content {
display: flex;
flex-direction: column;
flex: 1;
color: rgba(245, 245, 245, 0.96);
}
}
</style>
99 changes: 99 additions & 0 deletions src/lib/v2/components/atoms/TagCard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
<script lang="ts">
import { HttpRegex } from '$lib/utils/regex';

export let additionalClass: string | undefined = undefined;

export let href: string | undefined = undefined;
const isExternalLink = !!href && HttpRegex.test(href);
export let target: '_self' | '_blank' = isExternalLink ? '_blank' : '_self';
export let rel = isExternalLink ? 'noopener noreferrer' : undefined;

$: tag = href ? 'a' : 'article';
$: linkProps = {
href,
target,
rel
};
</script>

<svelte:element
this={tag}
class="card {additionalClass}"
{...linkProps}
data-sveltekit-preload-data
{...$$restProps}
>
{#if $$slots.image}
<div class="image">
<slot name="image" />
</div>
{/if}
<div class="body">
<div class="content">
<slot name="content" />
</div>
{#if $$slots.footer}
<div class="footer">
<slot name="footer" />
</div>
{/if}
</div>
</svelte:element>

<style lang="scss">
.card {
background: var(--color--card-background);
box-shadow: var(--card-shadow);
color: var(--color--text);
border-radius: 10px;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
width: 100%;

display: flex;
flex-direction: row;
flex-wrap: wrap;

text-decoration: none;

&[href],
&[onclick] {
cursor: pointer;
&:hover {
box-shadow: var(--card-shadow-hover);
transform: scale(1.01);
}
}
}

.body {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 10px;
padding: 20px 20px;
flex: 1 0 50%;

.content {
display: flex;
flex-direction: column;
flex: 1;
}
}

.image {
position: relative;
flex: 1 0 max(50%, 330px);
// height: min(100%, 300px);
min-height: 280px;
max-height: 350px;
}

:global(.card [slot='image']) {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
}
</style>
10 changes: 10 additions & 0 deletions src/lib/v2/components/molecules/PostBody copy.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<div>
<slot />
</div>

<style>
div {
grid-area: 1 / 3 / 6 / 7;
padding-inline: 2rem;
}
</style>
2 changes: 1 addition & 1 deletion src/lib/v2/components/molecules/PostBody.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,6 @@

div {
grid-area: 1 / 3 / 6 / 7;
padding-inline: 1.5rem;
margin-inline: 2rem;
}
</style>
96 changes: 96 additions & 0 deletions src/lib/v2/components/molecules/RelatedPostCard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
<script lang="ts">
import RelatedCard from '$lib/v2/components/atoms/RelatedCard.svelte';
import Tag from '$lib/components/atoms/Tag.svelte';
import { formatDate } from '$lib/utils/date';

export let title: string;
export let excerpt: string;
export let slug: string;
export let tags: string[] | undefined;
export let readingTime: string | undefined = undefined;
export let date: string;

const formattedDate = formatDate(date);
</script>

<RelatedCard href="/v2/{slug}" target="_self">
<div class="content" slot="content">
<p class="title">
{title}
</p>
{#if date}
<div class="date">Published on {formattedDate}</div>
{/if}
{#if readingTime}
<div class="note">{readingTime}</div>
{/if}
{#if excerpt}
<p class="text">
{excerpt}
</p>
{/if}
</div>
<div class="footer" slot="footer">
{#if tags?.length}
<div class="tags">
{#each tags.slice(0, 2) as tag}
<Tag {tag}><a href="/v2/tags/{tag}">{tag}</a></Tag>
{/each}
</div>
{/if}
</div>
</RelatedCard>

<style lang="scss">
.content {
display: flex;
flex-direction: column;
gap: 0px;
align-items: flex-start;
}

.title {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
font-size: 1.2rem;
font-family: var(--font--title);
font-weight: 700;
}

.tags {
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
}

.date,
.note {
font-size: 0.8rem;
color: rgba(var(--color--text-rgb), 0.8);
}

.date {
padding-top: 0.25rem;
}

.text {
margin-top: 5px;
font-size: 0.9rem;
text-align: justify;
}

.footer {
margin-top: 20px;
}

:global(.blog-post-card .image img) {
object-fit: cover;
}

:global(.blog-post-card.no-image > .image) {
display: none;
}
</style>
Loading