From c5eb6e61208a51206219b6deaf29eb5161b0238e Mon Sep 17 00:00:00 2001 From: Annika Date: Mon, 7 Apr 2025 10:06:08 +0200 Subject: [PATCH 01/21] Volaria --- .DS_Store | Bin 0 -> 6148 bytes .env.example | 1 - README.md | 112 ++------------------------------ package-lock.json | 61 +++++++++++++++++ package.json | 1 + server/components/card/card.css | 13 +--- server/images/.DS_Store | Bin 0 -> 6148 bytes server/images/VISora.svg | 26 ++++++++ server/images/logo.svg | 19 ++++++ server/layouts/base.liquid | 3 +- server/server.js | 55 +++++++--------- server/views/index.css | 67 ++++++++++++++++++- server/views/index.liquid | 23 ++++++- 13 files changed, 228 insertions(+), 153 deletions(-) create mode 100644 .DS_Store delete mode 100644 .env.example create mode 100644 server/images/.DS_Store create mode 100644 server/images/VISora.svg create mode 100644 server/images/logo.svg diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..82e0de9734422452398fceb82c72d9b4550e832e GIT binary patch literal 6148 zcmeHK%}xR_7@Q(Oh{WK{i^;x#oA?F`!hu9R$OE9jN>F5tfaksY4!(lV=Sk;l8?sv@ z-i$Hdm$cJ%XZkbUY_|YRXFWLsS^(-yf|UldZ$h3++KP&A5uLGpEU@a&v+-!2jkeg@ z@E0ABy{lo2Ic7*v-amOM+D!4M4LkiRCS)#4`z*ZofVYne^l^?Jt}sBa@K%s*P6Bq5 zBWLV6#So9SwC0RbECbzZpgY17ZaMo0=2P-dsmg3U#yw}5VG;E35%kaudf1_>Oaom5 z*IZj0U0f1l&U#WF$vXE|aIVJrqFXnqfs|%++uexMO|F8dp`;8u6s4 zWmQ8RPzTh39~|JBEm1#ksJS|z4yXeg2ju$@F$pFfbBFfR!OUI(h*dV*U|D_#MH6{U zJmwDhgkhYN=%mJ9F^rS5J@UN7WA4z&Vf^L8_>qmjp%^t{lb3Og7ja XNr9Mn%pJ0Yp+5rF2F=ugUv=OMw=6.0.0" + }, + "peerDependencies": { + "encoding": "^0.1.0" + }, + "peerDependenciesMeta": { + "encoding": { + "optional": true + } + } + }, "node_modules/nodemon": { "version": "3.1.9", "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.9.tgz", @@ -2441,6 +2470,14 @@ "node": ">=4" } }, + "node_modules/pexels": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/pexels/-/pexels-1.4.0.tgz", + "integrity": "sha512-akpLySokCtw9JHGx7yMavOIAHGVP5721rLUONR/cFKjWkLjUXsHrJ5jndMKss9mx7AEMZRXs7loxEb+vLJf6kA==", + "dependencies": { + "isomorphic-fetch": "^3.0.0" + } + }, "node_modules/picocolors": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", @@ -3046,6 +3083,11 @@ "nodetouch": "bin/nodetouch.js" } }, + "node_modules/tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==" + }, "node_modules/typed-array-buffer": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz", @@ -3213,6 +3255,25 @@ } } }, + "node_modules/webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==" + }, + "node_modules/whatwg-fetch": { + "version": "3.6.20", + "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz", + "integrity": "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==" + }, + "node_modules/whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", + "dependencies": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/package.json b/package.json index c7be870..a8935d8 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "liquidjs": "^10.21.0", "nodemon": "^3.1.9", "npm-run-all": "^4.1.5", + "pexels": "^1.4.0", "sirv": "^3.0.1", "vite": "^6.2.3" }, diff --git a/server/components/card/card.css b/server/components/card/card.css index 5be8712..dfbab29 100644 --- a/server/components/card/card.css +++ b/server/components/card/card.css @@ -1,10 +1,3 @@ -.card { - width: 100%; - max-width: 300px; -} - -.card__image { - width: 100%; - height: auto; - margin-top: 1rem; -} +aside{ + background-color: yellow; +} \ No newline at end of file diff --git a/server/images/.DS_Store b/server/images/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..d1aebdce9d5d2b2142952c754d22ec68df39bda4 GIT binary patch literal 6148 zcmeHKu};H441EV3B3L>y-pqi+A4F9cI#*(bg488aBoNHm_@Dk@dCxYeA#`Oxwq(CM zpI}Th?4UW=sWAfmGmI z0sS8;UDyVWj`r(d(D7aC3!#i-yGsyj%-g`xkt?*~RH9Q$TrrB%nXggT29AzSN3osx zoY=X<4W-!b%vUQ%X&p1B0;#}MfpecO)&KA4C+`1KQqEF=RN!AJP!`>$Tk(^kx6VFJ ty|&UH=wHTKD`%J-0yt4CzB;O_8ndnq9373$ywQny5RfiuslZ<-@CmhMD02V+ literal 0 HcmV?d00001 diff --git a/server/images/VISora.svg b/server/images/VISora.svg new file mode 100644 index 0000000..0f4ae7f --- /dev/null +++ b/server/images/VISora.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/server/images/logo.svg b/server/images/logo.svg new file mode 100644 index 0000000..92bb895 --- /dev/null +++ b/server/images/logo.svg @@ -0,0 +1,19 @@ + + + + + + + + + \ No newline at end of file diff --git a/server/layouts/base.liquid b/server/layouts/base.liquid index ed429ff..cb95d04 100644 --- a/server/layouts/base.liquid +++ b/server/layouts/base.liquid @@ -10,6 +10,7 @@ {% else %} + {% endif %} {% block styles %}{% endblock %} @@ -18,7 +19,7 @@
- Deze header staat op elke pagina +
{% block content %}{% endblock %} diff --git a/server/server.js b/server/server.js index f44f6bd..ade3aa5 100644 --- a/server/server.js +++ b/server/server.js @@ -4,28 +4,14 @@ import { logger } from '@tinyhttp/logger'; import { Liquid } from 'liquidjs'; import sirv from 'sirv'; -const data = { - 'beemdkroon': { - id: 'beemdkroon', - name: 'Beemdkroon', - image: { - src: 'https://i.pinimg.com/736x/09/0a/9c/090a9c238e1c290bb580a4ebe265134d.jpg', - alt: 'Beemdkroon', - width: 695, - height: 1080, - } - }, - 'wilde-peen': { - id: 'wilde-peen', - name: 'Wilde Peen', - image: { - src: 'https://mens-en-gezondheid.infonu.nl/artikel-fotos/tom008/4251914036.jpg', - alt: 'Wilde Peen', - width: 418, - height: 600, - } - } -} +// import { createClient } from 'pexels'; + +const apiKey = process.env.API_KEY +// const client = createClient(apiKey); + +const apiUrl='https://api.unsplash.com/photos/?client_id='+apiKey + +console.log(apiUrl) const engine = new Liquid({ extname: '.liquid', @@ -34,21 +20,30 @@ const engine = new Liquid({ const app = new App(); app - .use(logger()) - .use('/', sirv('dist')) - .listen(3000, () => console.log('Server available on http://localhost:3000')); +.use(logger()) +.use('/', sirv('dist')) +.listen(3000, () => console.log('Server available on http://localhost:3000')); app.get('/', async (req, res) => { - return res.send(renderTemplate('server/views/index.liquid', { title: 'Home', items: Object.values(data) })); + const data = await fetch(apiUrl) + const jsonData = await data.json() + console.log(jsonData) + return res.send(renderTemplate('server/views/index.liquid', { title: 'Home', photos: jsonData })); }); -app.get('/plant/:id/', async (req, res) => { +app.get('/users/:id/', async (req, res) => { const id = req.params.id; - const item = data[id]; - if (!item) { + const usersAPIEndpoint = 'https://api.unsplash.com/users/' + id +'?client_id='+apiKey + console.log(usersAPIEndpoint) + const profile = data[id]; + + const data = await fetch(usersAPIEndpoint) + const jsonDataId = await data.json() + console.log(jsonDataId) + if (!profile) { return res.status(404).send('Not found'); } - return res.send(renderTemplate('server/views/detail.liquid', { title: `Detail page for ${id}`, item })); + return res.send(renderTemplate('server/views/index.liquid', { title: 'UserProfile', profile: jsonDataId })); }); const renderTemplate = (template, data) => { diff --git a/server/views/index.css b/server/views/index.css index 055029e..9f1ece8 100644 --- a/server/views/index.css +++ b/server/views/index.css @@ -1,5 +1,70 @@ +body{ + font-family: 'Poppins',Arial, Helvetica, sans-serif; +} + .grid { display: grid; + gap: 7rem; + grid-template-columns: repeat(auto-fit, minmax(70%,1fr)); + width: 70%; + margin: auto; + +} + +p{ + hyphens: manual; +} +.grid > li{ + display: flex; gap: 1rem; - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + background-color: antiquewhite; + padding:0 2em; +} + +.card__image { + margin: 0 -2em 0 -2em; + background-size: contain; + background-position:center center ; + width:100% ; /* Of een andere vaste breedte */ + height: 100%; /* Houdt de verhouding goed */ + flex-shrink: 0; +} + +.grid > li a{ + width: 100%; +} +.grid li div{ + width: 70%; + padding: 1em 0; +} +.grid li div div:nth-of-type(1){ + display: flex; + align-items: center; + gap: 1em; +} + +.grid li div div p{ + font-weight: 600; + font-size: 1.5em; + +} +.grid li div a{ + text-decoration: none; + color: black; +} + +.grid li div a:visited{ + color: black; +} + +.grid li div img{ + border-radius: 50%; + width: 5em; + height:5em; + +} + +.grid li p{ + margin:.5em 0; } + diff --git a/server/views/index.liquid b/server/views/index.liquid index 0dc52f4..19962f1 100644 --- a/server/views/index.liquid +++ b/server/views/index.liquid @@ -5,10 +5,27 @@

{{ title }}

    - {% for item in items %} + {% for photo in photos %}
  • - - {% render 'server/components/card/card.liquid', item: item %} + + {{ photo.alt_description }} +
    + +

    {{ photo.user.bio }}

    +

    📍{{ photo.user.location }}

    +

    Meer:

    +
      +
    • +
    • +
    +
    • {% endfor %} From 296d4887ed3c67366f01eae1c215f86ab2f23476 Mon Sep 17 00:00:00 2001 From: Annika Date: Wed, 9 Apr 2025 09:35:16 +0200 Subject: [PATCH 02/21] visora update --- {server/images => client}/.DS_Store | Bin 6148 -> 6148 bytes client/images/.DS_Store | Bin 0 -> 6148 bytes {server => client}/images/logo.svg | 0 .../VISora.svg => client/images/visora.svg | 4 +- client/index.css | 1 - client/index.js | 22 ++ server/layouts/base.css | 10 +- server/layouts/base.liquid | 4 +- server/server.js | 70 +++--- server/views/detail.liquid | 31 ++- server/views/index.css | 216 ++++++++++++++---- server/views/index.liquid | 62 +++-- vite.config.js | 1 + 13 files changed, 316 insertions(+), 105 deletions(-) rename {server/images => client}/.DS_Store (90%) create mode 100644 client/images/.DS_Store rename {server => client}/images/logo.svg (100%) rename server/images/VISora.svg => client/images/visora.svg (98%) diff --git a/server/images/.DS_Store b/client/.DS_Store similarity index 90% rename from server/images/.DS_Store rename to client/.DS_Store index d1aebdce9d5d2b2142952c754d22ec68df39bda4..cd3a2cf86a516c8064df523e3cb54a7528c4c45a 100644 GIT binary patch delta 102 zcmZoMXfc=|&e%4wP;8=}q9`K+0|O8XFfgPt6qf}T<>ln(rBD2*E(?-iW5{I4Wk_U5 pN0tO>*!WS5eG;SRW_At%4#u{PAHOqC<`>ar1?f4k*;eE*GXNu28jk<~ delta 168 zcmZoMXfc=|&e%S&P;8=}q9_vs0|O%ig8&1A9z!uh8AG~fPJZ&ljp~yPL|EcE7;+f$ z8Pb6mNir!XKMAM_sDr@;h_(KM0g%POz{L>8;K>jSRA0o9h(pgNgr1EXCD}K#a|m!S Ywr||{oq009h%O_;W=E03%o7_}0MTSF1ONa4 diff --git a/client/images/.DS_Store b/client/images/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..ddc4ff8b617162abd5fcc1d183b07693f0bf1023 GIT binary patch literal 6148 zcmeHKyGjH>5Ukb<7ECTQoY+9{4~An6jQs&Qg-aGT5REtTyYA1l`hj??Mq(n>P+c=U z-8;7xY+nPg-OJMrumvy>&UkaTHa~Z)?5rY2CiskNJmVFIyJ>!0Wq%*=+5r=09EdOV z`)S_u%zxNOT)l^JC6fYDKnh3!DIf)Yqk#8b+HjF9F9oE46!=uYzYmRY?!`-Td^+f2 z1R!r14&ypz33BrQxfd_VjL + + + + + + + + + + + + \ No newline at end of file diff --git a/server/layouts/base.liquid b/server/layouts/base.liquid index 16c3629..41b9b93 100644 --- a/server/layouts/base.liquid +++ b/server/layouts/base.liquid @@ -15,7 +15,7 @@
    - visora titel + visora titel Date: Wed, 23 Apr 2025 17:00:41 +0200 Subject: [PATCH 09/21] yolo --- SVG/visoraName.svg | 27 --------------------------- server/layouts/base.css | 33 ++++++++++++++++++++++++++++----- server/views/detail.liquid | 1 + server/views/index.css | 9 +++++++++ 4 files changed, 38 insertions(+), 32 deletions(-) delete mode 100644 SVG/visoraName.svg diff --git a/SVG/visoraName.svg b/SVG/visoraName.svg deleted file mode 100644 index 010f0bd..0000000 --- a/SVG/visoraName.svg +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/server/layouts/base.css b/server/layouts/base.css index 864a34b..7df3ee6 100644 --- a/server/layouts/base.css +++ b/server/layouts/base.css @@ -1,13 +1,36 @@ header { - height: 5em; - padding: 1em; -display: flex; -justify-content: space-between; + height: 5em; + padding: 1em; + display: flex; + justify-content: space-between; } -header a img{ +header a img { height: 5em; +} +header a:nth-of-type(1) { + position: fixed; + top: .5em; + left: 50%; + transform: translateX(-50%); + backdrop-filter: blur(10px); + border-radius: 1em; + display: flex; + align-items: center; + justify-content: center; + /* width: 10%; */ + height: 3em; + padding: .2em .5em; +} + +header a:nth-of-type(1) img { + height: 100%; +} +header a:nth-of-type(2){ + position: absolute; + right: 2em; + /* top: 3em; */ } header a{ place-self: center; diff --git a/server/views/detail.liquid b/server/views/detail.liquid index 295e87d..6147b93 100644 --- a/server/views/detail.liquid +++ b/server/views/detail.liquid @@ -18,6 +18,7 @@ {{ profile.portfolio_url }}

    {% endif %} +

    Total likes: {{ profile.total_likes }}

      {% for tag in profile.tags.custom %}
    • {{ tag.title }}
      • diff --git a/server/views/index.css b/server/views/index.css index 1c97732..7da380f 100644 --- a/server/views/index.css +++ b/server/views/index.css @@ -264,6 +264,15 @@ dialog[open] { margin-bottom: .5em; } +.detailMain section:nth-of-type(1)> div> p:nth-of-type(3){ + font-weight:100; + margin-bottom: .5em; +} +.detailMain section:nth-of-type(1)> div> p:nth-of-type(3) span { + font-weight: 500; + +} + .detailMain section:nth-of-type(1) ul{ display: flex; list-style: none; From b2af5380b34f7849b479ea321cb26fb0ae958f5a Mon Sep 17 00:00:00 2001 From: Annika Date: Wed, 23 Apr 2025 17:16:10 +0200 Subject: [PATCH 10/21] lsr --- server/layouts/base.css | 3 +-- server/server.js | 6 ++++-- server/views/detail.liquid | 1 - 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/server/layouts/base.css b/server/layouts/base.css index 7df3ee6..101dee3 100644 --- a/server/layouts/base.css +++ b/server/layouts/base.css @@ -12,8 +12,7 @@ header a img { header a:nth-of-type(1) { position: fixed; top: .5em; - left: 50%; - transform: translateX(-50%); + left: 2em; backdrop-filter: blur(10px); border-radius: 1em; display: flex; diff --git a/server/server.js b/server/server.js index 0146793..54cca60 100644 --- a/server/server.js +++ b/server/server.js @@ -7,7 +7,8 @@ import sirv from 'sirv'; // Haal de API-sleutel op uit .env const apiKey = process.env.API_KEY; -const apiUrl = 'https://api.unsplash.com/photos?client_id=' + apiKey + '&per_page=30&order_by=latest'; +const apiUrl = `https://api.unsplash.com/photos?client_id=${apiKey}&per_page=30&order_by=latest&page=2`; + // Maak een Liquid Engine voor rendering van templates const engine = new Liquid({ @@ -43,7 +44,8 @@ app.get('/', async (req, res) => { app.get('/users/:username', async (req, res) => { const username = req.params.username; const usersAPIEndpoint = `https://api.unsplash.com/users/${username}?client_id=${apiKey}`; - const userPhotosAPIEndpoint = `https://api.unsplash.com/users/${username}/photos?client_id=${apiKey}`; + const userPhotosAPIEndpoint = `https://api.unsplash.com/users/${username}/photos?client_id=${apiKey}&per_page=30`; + const userResponse = await fetch(usersAPIEndpoint); const userData = await userResponse.json(); diff --git a/server/views/detail.liquid b/server/views/detail.liquid index 6147b93..295e87d 100644 --- a/server/views/detail.liquid +++ b/server/views/detail.liquid @@ -18,7 +18,6 @@       {{ profile.portfolio_url }}

      {% endif %} -

      Total likes: {{ profile.total_likes }}

        {% for tag in profile.tags.custom %}
      • {{ tag.title }}
        • From e5ff1b8d45a556456eca3d15271dcb8de31dce32 Mon Sep 17 00:00:00 2001 From: Annika Date: Wed, 23 Apr 2025 17:22:27 +0200 Subject: [PATCH 11/21] like --- server/layouts/base.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/layouts/base.css b/server/layouts/base.css index 101dee3..8ba0d4a 100644 --- a/server/layouts/base.css +++ b/server/layouts/base.css @@ -29,7 +29,7 @@ header a:nth-of-type(1) img { header a:nth-of-type(2){ position: absolute; right: 2em; - /* top: 3em; */ + top: 1em; } header a{ place-self: center; From c47ccb9e4d131380d122523332a9394fcd4bbfad Mon Sep 17 00:00:00 2001 From: Annika Date: Wed, 23 Apr 2025 17:22:41 +0200 Subject: [PATCH 12/21] beter --- server/layouts/base.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/layouts/base.css b/server/layouts/base.css index 8ba0d4a..46ba8b7 100644 --- a/server/layouts/base.css +++ b/server/layouts/base.css @@ -29,7 +29,7 @@ header a:nth-of-type(1) img { header a:nth-of-type(2){ position: absolute; right: 2em; - top: 1em; + top: 2em; } header a{ place-self: center; From 5c71279ca37355ebe1be90e9667cefecf8ef54bf Mon Sep 17 00:00:00 2001 From: Annika Date: Wed, 23 Apr 2025 17:28:23 +0200 Subject: [PATCH 13/21] width --- server/views/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/views/index.css b/server/views/index.css index 7da380f..4fa1007 100644 --- a/server/views/index.css +++ b/server/views/index.css @@ -37,7 +37,7 @@ main { /* max-height:100vh; */ &.landscape { - width: max(17em, 40%); + width: max(17em, 30%); } } From 41cadda56c40f0df0f8dc829afb8d7db6ce70c2b Mon Sep 17 00:00:00 2001 From: Annika Date: Wed, 23 Apr 2025 17:33:43 +0200 Subject: [PATCH 14/21] uhhh --- server/views/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/views/index.css b/server/views/index.css index 4fa1007..6f87226 100644 --- a/server/views/index.css +++ b/server/views/index.css @@ -37,7 +37,7 @@ main { /* max-height:100vh; */ &.landscape { - width: max(17em, 30%); + width: max(17em, 35%); } } From e409fde3031bbef50217148ae9003900a8faeb2f Mon Sep 17 00:00:00 2001 From: Annika Date: Thu, 24 Apr 2025 12:29:07 +0200 Subject: [PATCH 15/21] read me --- README.md | 133 ++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 125 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 29ef703..070c9c3 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,135 @@ +# 📸 visora Website -## feedback -dialog +## 🧠 Over dit project -pop over - een overzichts pagina met veel fotos, als je er op klikt meer info. +Voor deze opdracht heb ik een webapplicatie gebouwd die gebruikmaakt van de [Unsplash API](https://unsplash.com/developers) om afbeeldingen op te halen. +De applicatie is geïnspireerd op Pinterest, waarbij gebruikers door afbeeldingen kunnen bladeren, deze kunnen liken en opslaan op een persoonlijke pagina. -tags toevoegen op de info van de foto. -animation. +## WEEK 1 +[x] orienteren welke content API te gebruiken is (gratis) +[x] wat voor soort website wil ik maken? +[ ] welke Web APIs wil ik gebruiken? +### ideeen: +hi ik wil voor dit vak een eigen social media app gaan maken en ik zit te kijken naar: -## feedback w3 +- Pinterest API +- Instagram API +- Fake user API + PEXELS API -je kan het lokaal op gaan slaan. met animeren, dus twee web apis +ik wilde met de PEXELS api werken, maar daar had ik geen toegang voor gebruikers, dus heb uiteindelijk gekozen voor unsplash -ziet er goed uit. \ No newline at end of file +Dit concept is goed gekeurd, alleen vinden Cyd en Declan het een saai project, want instagram is helemaal niet interessant om te maken. + +## schets + + ik heb eerst instagram nagemaakt en op pinterest en dribbble gekeken wat beter kon want instagram op desktop is niet al te best. + dit zijn mijn eerste schermen: + +img +img + +## feedback: + +Cyd raadde aan om een overzicht te maken met alle fotos, en met een dialog kunnen openen met meer informatie om vervolgens naar een detail pagina te kunnen. Daarnaast meer tags toevoegen die van te foto van toepassing zijn voor meer informatie. + +## reflectie +Ik heb nog niet veel gedaan, dus ik kan niet echt goed reflecteren op deze week, ik was deze week gewoon vooral aan het orienteren en kijken of het lukte met de API. ik heb geen enkele ervaring met APIs dus ik vind zelf dat ik het goed heb gedaan, met hun van Cyd en het ook echt aan de praat heb kunnen krijgen en het ook snapte hoe de route vanuit de api naar het liquid bestand. + +## WEEK 2 + +[x] overzichtspagina maken +[x] dialogs toevoegen op elke foto +[ ] welke Web APIs wil ik gebruiken? +[x] detail pagina maken/ profiel pagina + +## wat heb ik gedaan deze week? +Deze week heb ik gewerkt aan het helemaal veranderen van mijn eerste schets. Ik heb het logo gemaakt, en daarmee mijn website 'officieel' gemaakt. daarna heb ik de 1 voor 1 foto overzicht een overzicht gemaakt van de standaard 10 fotos die je krijgt vanuit de API. ik wilde dat veranderen naar oneindig, maar dat is neit gelukt. De max was 30 dus heb het nu bij 30 gehouden. als Feedback van vorige week had ik gekregen om ook dialogs/ popovers te gaan maken voor elke foto om de foto zo groot mogelijk te zien en meer informatie er over te krijgen. + +op de dialog heb ik ook een p gemaakt met de kleur code van de foto, wat ik eigenlijk best gaaf vind. ik wilde eerst de achtergrond van de dialog maken als die kleur, maar dat vond ik niet mooi, dus heb een soort tekst vlakje met de kleur gemaakt! + +img + +toen dat af was ben ik begonnen aan de detail pagina. ik heb deze week vooral gefocused op de styling en nog niet aan de. Web APIs. + +## feedback: +Ik kreeg deze week feedback van Declan en die had nog mijn idee niet gezien en hij zei dat hij het er goed uit vond zien en dus neit meer over de styling na hoefde te denken en nu vooral bezig moet zijn met de APIs. ik vertelde dat ik geen idee had wat voor apis ik kon gebruiken dat nuttig waren, naast misschien animatie op een pagina of van het wisselen van paginas. + +hij zei dat het handig was om misschien, omdat ik zei dat ik de fotos willen kunnen liken, local storage te gebruiken en dan alles op een andere pagina op te slaan. Maar dus lokaal en echt alleen voor de gebruiker die in die browser aan het gebruiken is. + +## reflectie week2 + +ik heb gemerkt dat ik het moeilijk vond om met web APIs te werken, waardoor ik dus vooral aan css heb gezeten om het mooi te maken. ik denk dat het wel verstandiger was geweest om al te beginnen aan de APIs, omdat ik dan straks een probleem krijg. maar ik ga meteen aan de slag met de local storage, want Declan zei dat hij me wel zou helpen. Deze week vond ik wel heel leuk, want ht nu wel op een echte website begint te lijken met een werkende Content API. + + +## WEEK 3 + +[x] local storage +[x] favorieten pagina maken +[ ] wat is mijn tweede API? + +## wat heb ik gedaan deze week? +ik ben begonnen met mijn APIs te gebruiken, en local storage werkte bijna meteen en meteen gelinkt aan de favorieten pagina. ik kreeg in het begin wel dat de eerste li item op favorieten pagina leeg bleef en ik snapte niet wat ik verkeerd deed en heb ik samen met een klasgenoot er aan gezeten en allerlei dingen geprobeerd en daarna volgens mij weer gecommand z, en toen deed hij het wel..... + +met deze code : '{% if likes.size > 0 %}' +deze week heb ik een paar dingen toegevoegd aan mijn paginas (tekst en styling). + + +Ook begon ik met een animation api, maar die werkte niet hoe ik dat wilde omdat de img van de dilog ging van de foto in het overzicht naar groter en daarna kwam pas de dialog tevoorschijn en het snapte raar dus ik heb die weer verwijderd. + + + +## feedback: +deze week had ik weer Cyd, en zij vond dat het er goed uit zag en misschien het hartje naar de favorieten kan animeren voor de web api. bij de dialog zei ze ook dat ik het duidelijk moest maken dat je er op kon klikken om naar de profiel pagina te gaan. + +ze zei ook over de kleur van de foto om die te maken naar de dialog en ik vertelde haar dat ik het eigenlijk helemaal neit mooi vond, omdat het zo heftig was en niet helemaal paste bij de paarse kleur ik gebruik. toen zei ze dat ik ook color-mix kan doen en dus kan mixen. + + +## reflectie + +deze week was wel moeilijk, omdat ik dus was begonnen met mijn web APIs. en de local storage werkte wel goed gelukkig en had ik geen problemen mee, maar met de animation API werkte het niet helemaal hoe ik het wilde en werd ik beetje gedemotiveerd en schuifte ik het naar week4. + +Daarnaast had ik ook moeite met het kunnen verwijderen van de favorieten in mijn favorieten pagina. + + +## WEEK 4 + +[x] animation API +[x] puntjes op de i zetten + +## wat heb ik gedaan deze week? +deze week begon ik eerst aan mijn favoreiten pagina, want ik kon hem nog niet unliken en dat hij dan word verwijderd. blijkbaar was mijn javascript niet goed gekoppeld omdat hij een querySelector niet kon vinden. dat had ik gefixt en toen begon ik met mijn web api. + +met Declan heb ik gekeken of ik de foto in de button groter kan worden en dan in mijn dialog te zien krijgt. maar het clonen werd heel lastig/ het kon gewoon niet dus nu heb ik een basic transition er in gestopt wat je eigenlijk niet kan zien, maar toch fijner is dat hij er is. + +ik zat te kijken wat ik wilde voor animatie, want ik vond eigenlijk alle animatie die ik kon bedenken onnodig. + +ik zag een animatie over het verwijderen van cards, en ik vond dat wel interessant voor mijn liked pagina +link: https://developer.chrome.com/docs/web-platform/view-transitions + +ik kon niet vinden hoe zij dit deden dus heb chatGPT gevraagd en hij gaf me deze code: + +img + + +## feedback: +- eind gesprek + + +## reflectie + +we hadden maar 1 dag voor het eindgesprek en ik had een druk weekend waardoor ik niks in het weekend heb gedaan. + +Ik vind persoonlijk dat ik wel meer had kunnen doen voor de animation API, want het is niet veel. Maar door tijdsgebrek vind ik dat ik een goede website heb kunnen neerzetten waar ik trots op ben + + +wat ik nog had kunnen doen met meer tijd: + +* meer animatie tussen de popover en tussen paginas in. +* animatie tussen het scrollen van fotos en misschien infinite scrolling? +* kijken of ik ook een eigen account kon maken dus dat je zelf kan inloggen +* van favorieten naar de gesaved pagina gaan. +* finetunenn From 5e11bddf2e5efa01c5e73eb737d074e89aed0e9c Mon Sep 17 00:00:00 2001 From: Annika Date: Thu, 24 Apr 2025 12:38:39 +0200 Subject: [PATCH 16/21] fixed --- client/index.js | 28 +++++++++++++--------------- server/views/index.css | 5 ----- 2 files changed, 13 insertions(+), 20 deletions(-) diff --git a/client/index.js b/client/index.js index cd386ce..f86c82e 100644 --- a/client/index.js +++ b/client/index.js @@ -47,19 +47,17 @@ photoContainers.forEach(photoContainer => { -/////////like button//////////////// - /////////color//////////////// -// Functie om de luminantie van een kleur te berekenen + function getLuminance(hex) { // Hex kleur omzetten naar RGB let r = parseInt(hex.slice(1, 3), 16); let g = parseInt(hex.slice(3, 5), 16); let b = parseInt(hex.slice(5, 7), 16); - // RGB naar schaal van 0 tot 1 omrekenen + r = r / 255; g = g / 255; b = b / 255; @@ -84,16 +82,16 @@ function adjustTextColorForColorDiv() { let luminance = getLuminance(backgroundColor); - // Pas de tekstkleur aan op basis van de luminantie + let textColor = luminance > 0.5 ? ' rgba(71, 56, 76, 1)' : 'rgb(251, 240, 255)'; - let textElement = div.querySelector('p'); // Zoek het

        -element binnen de div - textElement.style.color = textColor; // Pas de tekstkleur aan + let textElement = div.querySelector('p'); + textElement.style.color = textColor; }); } window.onload = adjustTextColorForColorDiv; document.addEventListener("DOMContentLoaded", () => { - console.log("📜 JavaScript actief"); + // console.log("📜 JavaScript actief"); const likeButtons = document.querySelectorAll(".likeButton"); let favorites = JSON.parse(localStorage.getItem("favorites")) || []; @@ -104,7 +102,7 @@ document.addEventListener("DOMContentLoaded", () => { const svg = likeButton.querySelector("svg"); let liked = favorites.includes(photoId); - // Initiele hart status + heart.setAttribute("fill", liked ? "#47284C" : "transparent"); heart.setAttribute("stroke", liked ? "transparent" : "#171616"); @@ -112,13 +110,13 @@ document.addEventListener("DOMContentLoaded", () => { liked = !liked; if (liked) { - // Like toevoegen + if (!favorites.includes(photoId)) { favorites.push(photoId); } console.log(`Toegevoegd: ${photoId}`); - // Hartje like animatie + // verwijder animatie/ svg.animate( [ { transform: "scale(1)" }, @@ -131,13 +129,13 @@ document.addEventListener("DOMContentLoaded", () => { } ); } else { - // Like verwijderen + favorites = favorites.filter(id => id !== photoId); console.log(`Verwijderd: ${photoId}`); const li = likeButton.closest(".liked-photo"); if (li) { - // Foto fade-up verwijderen via Web Animations API + li.animate( [ { opacity: 1, transform: "translateY(0px)" }, @@ -153,7 +151,7 @@ document.addEventListener("DOMContentLoaded", () => { }; } - // Hartje unlike animatie + svg.animate( [ { transform: "scale(1)" }, @@ -167,7 +165,7 @@ document.addEventListener("DOMContentLoaded", () => { ); } - // Update opslag en hart-styling + localStorage.setItem("favorites", JSON.stringify(favorites)); heart.setAttribute("fill", liked ? "#47284C" : "rgb(251, 240, 255)"); diff --git a/server/views/index.css b/server/views/index.css index 6f87226..ba8ce13 100644 --- a/server/views/index.css +++ b/server/views/index.css @@ -66,8 +66,6 @@ dialog { transition: opacity 0.4s ease, transform 0.4s ease; } - -/* Als hij zichtbaar wordt */ dialog[open] { opacity: 1; transform: scale(1); @@ -124,7 +122,6 @@ dialog[open] { .details-content h2 { margin-top: 2rem; - /* ruimte onder button */ margin-bottom: 0.5rem; font-size: 2em; opacity: .8; @@ -195,7 +192,6 @@ dialog[open] { 70% { transform: scale(1.4); - /* transform: translate(-1em, -.5em); */ filter: blur(.2em); } @@ -434,7 +430,6 @@ color: var(--detail); .details-content h2 { margin-top: .5em; - /* ruimte onder button */ } .landscape .dialog-image{ From 89f6f43ef247d31dc2e0f12a27e63094bcb690fb Mon Sep 17 00:00:00 2001 From: Annika <144127346+Annikamekk@users.noreply.github.com> Date: Thu, 24 Apr 2025 12:55:43 +0200 Subject: [PATCH 17/21] Update README.md --- README.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 070c9c3..edcd840 100644 --- a/README.md +++ b/README.md @@ -28,9 +28,10 @@ Dit concept is goed gekeurd, alleen vinden Cyd en Declan het een saai project, w ik heb eerst instagram nagemaakt en op pinterest en dribbble gekeken wat beter kon want instagram op desktop is niet al te best. dit zijn mijn eerste schermen: + +Screenshot 2025-04-24 at 12 53 22 +Screenshot 2025-04-24 at 12 53 31 -img -img ## feedback: @@ -51,7 +52,7 @@ Deze week heb ik gewerkt aan het helemaal veranderen van mijn eerste schets. Ik op de dialog heb ik ook een p gemaakt met de kleur code van de foto, wat ik eigenlijk best gaaf vind. ik wilde eerst de achtergrond van de dialog maken als die kleur, maar dat vond ik niet mooi, dus heb een soort tekst vlakje met de kleur gemaakt! -img +Screenshot 2025-04-24 at 12 08 56 toen dat af was ben ik begonnen aan de detail pagina. ik heb deze week vooral gefocused op de styling en nog niet aan de. Web APIs. @@ -87,6 +88,8 @@ deze week had ik weer Cyd, en zij vond dat het er goed uit zag en misschien het ze zei ook over de kleur van de foto om die te maken naar de dialog en ik vertelde haar dat ik het eigenlijk helemaal neit mooi vond, omdat het zo heftig was en niet helemaal paste bij de paarse kleur ik gebruik. toen zei ze dat ik ook color-mix kan doen en dus kan mixen. +Screenshot 2025-04-24 at 12 11 17 + ## reflectie @@ -112,7 +115,8 @@ link: https://developer.chrome.com/docs/web-platform/view-transitions ik kon niet vinden hoe zij dit deden dus heb chatGPT gevraagd en hij gaf me deze code: -img +Screenshot 2025-04-24 at 12 25 12 + ## feedback: From 051b17e4d61436ba4e167efea6f57f9fa338b351 Mon Sep 17 00:00:00 2001 From: Annika <144127346+Annikamekk@users.noreply.github.com> Date: Thu, 24 Apr 2025 13:42:21 +0200 Subject: [PATCH 18/21] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index edcd840..4ee1f13 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,6 @@ # 📸 visora Website +https://api-web-03h4.onrender.com/ ## 🧠 Over dit project From 4bef9ec1d14ca605523d06d0644b76a7ae0b0818 Mon Sep 17 00:00:00 2001 From: Annika Date: Thu, 24 Apr 2025 14:05:21 +0200 Subject: [PATCH 19/21] js --- server/server.js | 22 ---------------------- 1 file changed, 22 deletions(-) diff --git a/server/server.js b/server/server.js index 20d7c9f..20b8d70 100644 --- a/server/server.js +++ b/server/server.js @@ -78,25 +78,3 @@ app.get('/favorites', async (req, res) => { return res.send(renderTemplate('server/views/liked.liquid', { title: 'Favorieten', likes: likedPhotos })); }); - -======= -app.get('/', async (req, res) => { - return res.send(renderTemplate('server/views/index.liquid', { title: 'Home', items: Object.values(data) })); -}); - -app.get('/plant/:id/', async (req, res) => { - const id = req.params.id; - const item = data[id]; - if (!item) { - return res.status(404).send('Not found'); - } - return res.send(renderTemplate('server/views/detail.liquid', { - title: `Detail page for ${id}`, - item: item - })); -}); - -const renderTemplate = (template, data) => { - return engine.renderFileSync(template, data); -}; - From faa984c59b54a2ff0b9860d9cceee0029e7fabb5 Mon Sep 17 00:00:00 2001 From: Annika Date: Sun, 27 Apr 2025 16:32:48 +0200 Subject: [PATCH 20/21] helpt dot? --- package-lock.json | 45 +-------------------------------------------- package.json | 5 ----- server/server.js | 1 - 3 files changed, 1 insertion(+), 50 deletions(-) diff --git a/package-lock.json b/package-lock.json index c36d9c9..3871428 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1213,20 +1213,12 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" - - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", - "license": "MIT" - }, "node_modules/cliui/node_modules/emoji-regex": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz", "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==" - - "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==", - "license": "MIT" - }, "node_modules/cliui/node_modules/is-fullwidth-code-point": { "version": "2.0.0", @@ -2498,20 +2490,12 @@ "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" - - "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==", - "license": "MIT" - }, "node_modules/lodash.throttle": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==" - - "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==", - "license": "MIT" - }, "node_modules/lru-cache": { "version": "6.0.0", @@ -2644,12 +2628,7 @@ "node_modules/nested-error-stacks": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/nested-error-stacks/-/nested-error-stacks-2.1.1.tgz", - "integrity": "sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw==" - - "integrity": "sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw==", - "license": "MIT" - }, "node_modules/nice-try": { "version": "1.0.5", @@ -3241,8 +3220,6 @@ "url": "https://feross.org/support" } - ] - ], "license": "MIT" @@ -3312,10 +3289,6 @@ "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz", "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==" - - "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==", - "license": "ISC" - }, "node_modules/resolve": { "version": "1.22.8", @@ -3484,9 +3457,6 @@ "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==" - "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==", - "license": "ISC" - }, "node_modules/set-function-length": { "version": "1.2.2", @@ -4084,9 +4054,6 @@ "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz", "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==" - "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==", - "license": "ISC" - }, "node_modules/which-typed-array": { "version": "1.1.15", @@ -4201,16 +4168,7 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz", - "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==" - "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==", - "license": "ISC" - - "node_modules/yallist": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" - }, "node_modules/yargs": { "version": "13.3.2", "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz", @@ -4256,8 +4214,6 @@ "version": "7.0.3", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz", - "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==" - "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==", "license": "MIT" }, @@ -4302,3 +4258,4 @@ } } } +} \ No newline at end of file diff --git a/package.json b/package.json index 217ec06..3ab0eba 100644 --- a/package.json +++ b/package.json @@ -6,11 +6,6 @@ "scripts": { "clean": "rimraf dist && mkdir dist", "start": "node server/server.js", - - "predev": "npm run clean && npm run build:client", - "dev": "npm-run-all --parallel dev:*", - "dev:client": "chokidar '**/*' -i 'dist/**/*' -c 'npm run build:client'", - "predev": "npm run clean && npm run build", "dev": "npm-run-all --parallel dev:*", "dev:client": "chokidar 'client/**/*' -c 'npm run build:client'", diff --git a/server/server.js b/server/server.js index 20b8d70..5a970b5 100644 --- a/server/server.js +++ b/server/server.js @@ -77,4 +77,3 @@ app.get('/favorites', async (req, res) => { return res.send(renderTemplate('server/views/liked.liquid', { title: 'Favorieten', likes: likedPhotos })); }); - From 955761aa330398cc5bec35a661894710776ac7f8 Mon Sep 17 00:00:00 2001 From: Annika Date: Sun, 27 Apr 2025 16:44:15 +0200 Subject: [PATCH 21/21] reddende engel? --- .DS_Store | Bin 6148 -> 6148 bytes client/.DS_Store | Bin 6148 -> 6148 bytes client/public/images/visoraName.svg | 27 +++++++++++++++++++++++++++ server/server.js | 1 + 4 files changed, 28 insertions(+) create mode 100644 client/public/images/visoraName.svg diff --git a/.DS_Store b/.DS_Store index 82e0de9734422452398fceb82c72d9b4550e832e..849e1a40a6b0f2a3471cbe4dc9e4ff9959760a6d 100644 GIT binary patch delta 611 zcmZoMXfc=|#>B!ku~2NHo+2aP#(>?7i$5?kG4f63VbZT>V@PJmVaQ}iWyoVFNh&Wc zNXp4iVqjp{kyMbASzKaZaE+0PnT3^&or9f&nXr1w@?l^GXsk^HPhz8ZuK-fl6Y+GxJjN%boH|^HPezdV@3T!7?129Gvk2 z64livmc}{?CWZ#JItta6Mg~B(u~}^`Cx@uAzI9N1c1~_yeizVjK)}cdp&59gG>qy7 zGEh8K7F?8HVMqabx0s>CGbcYeX|gAi6fg`j8FCpC8Pb8FPz)A^gnB)qu~2NHo+2aX#(>?7jGU8sSo9}rvubS4XPd#eS%HI{Wnu&CW_AvK d4xrM_f*jwOC-aLqaxee^BLf4=<_M8B%mBX95ZwR( diff --git a/client/.DS_Store b/client/.DS_Store index cd3a2cf86a516c8064df523e3cb54a7528c4c45a..3f7ea2e8a3760d047cb44125b028bb9cf69d459c 100644 GIT binary patch literal 6148 zcmeHK!EVz)5S>j!W2*w?08%eVmbg|Wr4>@e#iZrXD@Jet6zn)^4aOVA4xx%7`3xV^ zYrmxb!U^8&ZcCg1M}*LfH2Y>}=dI&sZ`Mmhsy|Klh`L1N!5LdVnqL@?v#(jpWja7* z=J-szG^CQslYFgO691wC{Oo+nsGyWawDkP+Fv)d-QGPX^!gs$LL&UGcGUGiz??(N_ zO8q8{X-Wy@;0>F#>i(ZpZ!R zr^qwMrwNoV;nmO8v#h4#8J5+*gUWL#s_7Km7||K}H!H8f{kFnIS4$mZ4r`0Zz~n=~$RLd< I@K+W10RViC%m4rY delta 116 zcmZoMXfc=|#>CJzu~2NHo}wrt0|NsP3otOGG8C5u7v<&T=cP|9RF?%wurXvZ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/server/server.js b/server/server.js index 5a970b5..0ae75a2 100644 --- a/server/server.js +++ b/server/server.js @@ -1,3 +1,4 @@ +import 'dotenv/config'; import { App } from '@tinyhttp/app'; import { logger } from '@tinyhttp/logger'; import { Liquid } from 'liquidjs';