Skip to content

Commit

Permalink
Merge pull request #22 from BohdanOne/21-init-connect-cloudinary
Browse files Browse the repository at this point in the history
feat: add peak cover images
  • Loading branch information
BohdanOne authored Apr 18, 2024
2 parents 30c072a + c3b2805 commit 09fc87d
Show file tree
Hide file tree
Showing 23 changed files with 570 additions and 49 deletions.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@
"format": "prettier --write .",
"test:integration": "playwright test",
"test:unit": "vitest",
"prepare": "husky"
"prepare": "husky",
"add-covers": "node ./scripts/addCoverImages.js"
},
"devDependencies": {
"@playwright/test": "^1.28.1",
Expand Down
24 changes: 24 additions & 0 deletions scripts/addCoverImages.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import fs from 'fs';
import path from 'path';

// Read the covers.json file
const coversData = JSON.parse(fs.readFileSync('src/lib/data/covers.json', 'utf8'));

// Get all JSON files in the /data directory
const dataDir = 'src/lib/data';
const files = fs.readdirSync(dataDir);

files.forEach((file) => {
if (path.extname(file) === '.json') {
const filePath = path.join(dataDir, file);
const data = JSON.parse(fs.readFileSync(filePath, 'utf8'));

// If the data has a matching key in coversData, add the covers property
if (coversData[data.slug]) {
data.covers = coversData[data.slug];

// Write the updated data back to the file
fs.writeFileSync(filePath, JSON.stringify(data, null, 2));
}
}
});
25 changes: 25 additions & 0 deletions src/lib/components/PeakCover.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<script lang="ts">
import type { CoverBreakpoint } from '$lib/types';
export let covers: { [key in CoverBreakpoint]: [string, string] };
export let small = false;
</script>

<picture>
<source media="(max-width: 375px)" srcset="{covers.s[0]} 1x, {covers.s[1]} 2x" />
{#if small}
<source media="(max-width: 640px)" srcset="{covers.xs[0]} 1x, {covers.xs[1]} 2x" />
<source srcset="{covers.l[0]} 1x, {covers.l[1]} 2x" />
<img
class="hover:filter-[brightness(50%)] transition-all duration-200 ease-in-out w-full"
src={covers.xs[1]}
alt=""
loading="lazy"
/>
{:else}
<source media="(max-width: 640px)" srcset="{covers.l[0]} 1x, {covers.l[1]} 2x" />
<source media="(max-width: 768px)" srcset="{covers.s[0]} 1x, {covers.s[1]} 2x" />
<source srcset="{covers.m[0]} 1x, {covers.m[1]} 2x" />
<img src={covers.m[1]} alt="" loading="lazy" />
{/if}
</picture>
17 changes: 0 additions & 17 deletions src/lib/components/PeakHero.svelte

This file was deleted.

20 changes: 20 additions & 0 deletions src/lib/components/PeakInfo.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<script lang="ts">
import type { Peak } from '$lib/types';
import PeakInfoLine from './PeakInfoLine.svelte';
export let peak: Peak;
</script>

<div class="flex flex-col gap-4">
<div>
<h2 class="font-bold mb-4 border-b-4 border-red-600">
{peak.name}
</h2>
<PeakInfoLine lineTitle="Pasmo górskie" lineValue={peak.mountainRange} />
<PeakInfoLine lineTitle="Wysokość" lineValue={`${peak.elevation}m n.p.m.`} />

{#if peak.visitDate}
<PeakInfoLine lineTitle="Wejście w dniu" lineValue={peak.visitDate} />
{/if}
</div>
</div>
9 changes: 9 additions & 0 deletions src/lib/components/PeakInfoLine.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<script lang="ts">
export let lineTitle: string;
export let lineValue: string;
</script>

<p class="mb-2 flex flex-wrap gap-4 justify-between max-w-md border-b-2 border-red-300">
<span>{lineTitle}: </span>
<span class="font-bold">{lineValue}</span>
</p>
29 changes: 29 additions & 0 deletions src/lib/components/VisitedPeaks.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<script lang="ts">
import type { Peak } from '$lib/types';
import PeakCover from './PeakCover.svelte';
export let peaks: Peak[];
</script>

<section class="py-6">
<h2 class="mb-4">Odwiedzone szczyty</h2>
<div class="grid gap-4 max-w-full">
{#each peaks as peak}
{#if peak.covers}
<a
class="relative font-bold text-white [text-shadow:_0_1px_rgb(0_0_0_/_40%)]"
href={`/${peak.slug}`}
>
<PeakCover covers={peak.covers} small />
<h3 class="absolute bottom-2 left-2">{peak.name}</h3>
</a>
{/if}
{/each}
</div>
</section>

<style>
div {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
</style>
20 changes: 19 additions & 1 deletion src/lib/data/biskupia-kopa.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,23 @@
"elevation": 889,
"mountainRange": "Góry Opawskie",
"location": [50.256667, 17.428611],
"slug": "biskupia-kopa"
"slug": "biskupia-kopa",
"covers": {
"xs": [
"https://res.cloudinary.com/bohdanonedev/image/upload/c_thumb,f_auto,g_center,h_267,q_auto,w_267/v1/po-korone/biskupia-kopa/IMG_4663_cifz5q?_a=BAMABmRg0",
"https://res.cloudinary.com/bohdanonedev/image/upload/c_thumb,f_auto,g_center,h_534,q_auto,w_534/v1/po-korone/biskupia-kopa/IMG_4663_cifz5q?_a=BAMABmRg0"
],
"s": [
"https://res.cloudinary.com/bohdanonedev/image/upload/c_thumb,f_auto,g_center,h_343,q_auto,w_343/v1/po-korone/biskupia-kopa/IMG_4663_cifz5q?_a=BAMABmRg0",
"https://res.cloudinary.com/bohdanonedev/image/upload/c_thumb,f_auto,g_center,h_686,q_auto,w_686/v1/po-korone/biskupia-kopa/IMG_4663_cifz5q?_a=BAMABmRg0"
],
"m": [
"https://res.cloudinary.com/bohdanonedev/image/upload/c_thumb,f_auto,g_center,h_500,q_auto,w_500/v1/po-korone/biskupia-kopa/IMG_4663_cifz5q?_a=BAMABmRg0",
"https://res.cloudinary.com/bohdanonedev/image/upload/c_thumb,f_auto,g_center,h_1000,q_auto,w_1000/v1/po-korone/biskupia-kopa/IMG_4663_cifz5q?_a=BAMABmRg0"
],
"l": [
"https://res.cloudinary.com/bohdanonedev/image/upload/c_thumb,f_auto,g_center,h_608,q_auto,w_608/v1/po-korone/biskupia-kopa/IMG_4663_cifz5q?_a=BAMABmRg0",
"https://res.cloudinary.com/bohdanonedev/image/upload/c_thumb,f_auto,g_center,h_1216,q_auto,w_1216/v1/po-korone/biskupia-kopa/IMG_4663_cifz5q?_a=BAMABmRg0"
]
}
}
20 changes: 19 additions & 1 deletion src/lib/data/chelmiec.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,23 @@
"elevation": 850,
"mountainRange": "Góry Wałbrzyskie",
"location": [50.779167, 16.210278],
"slug": "chelmiec"
"slug": "chelmiec",
"covers": {
"xs": [
"https://res.cloudinary.com/bohdanonedev/image/upload/c_thumb,f_auto,g_center,h_267,q_auto,w_267/v1/po-korone/chelmiec/IMG_1726_y993qh?_a=BAMABmRg0",
"https://res.cloudinary.com/bohdanonedev/image/upload/c_thumb,f_auto,g_center,h_534,q_auto,w_534/v1/po-korone/chelmiec/IMG_1726_y993qh?_a=BAMABmRg0"
],
"s": [
"https://res.cloudinary.com/bohdanonedev/image/upload/c_thumb,f_auto,g_center,h_343,q_auto,w_343/v1/po-korone/chelmiec/IMG_1726_y993qh?_a=BAMABmRg0",
"https://res.cloudinary.com/bohdanonedev/image/upload/c_thumb,f_auto,g_center,h_686,q_auto,w_686/v1/po-korone/chelmiec/IMG_1726_y993qh?_a=BAMABmRg0"
],
"m": [
"https://res.cloudinary.com/bohdanonedev/image/upload/c_thumb,f_auto,g_center,h_500,q_auto,w_500/v1/po-korone/chelmiec/IMG_1726_y993qh?_a=BAMABmRg0",
"https://res.cloudinary.com/bohdanonedev/image/upload/c_thumb,f_auto,g_center,h_1000,q_auto,w_1000/v1/po-korone/chelmiec/IMG_1726_y993qh?_a=BAMABmRg0"
],
"l": [
"https://res.cloudinary.com/bohdanonedev/image/upload/c_thumb,f_auto,g_center,h_608,q_auto,w_608/v1/po-korone/chelmiec/IMG_1726_y993qh?_a=BAMABmRg0",
"https://res.cloudinary.com/bohdanonedev/image/upload/c_thumb,f_auto,g_center,h_1216,q_auto,w_1216/v1/po-korone/chelmiec/IMG_1726_y993qh?_a=BAMABmRg0"
]
}
}
Loading

0 comments on commit 09fc87d

Please sign in to comment.