diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..849e1a4 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 377ea97..4ee1f13 100644 --- a/README.md +++ b/README.md @@ -1,112 +1,140 @@ -# API @cmda-minor-web 2024 - 2025 -Het web is een geweldige plek en de beschikbare technologieën ervan zijn vandaag de dag krachtiger dan ooit tevoren. -De kracht van het web ligt in het feit dat het een platform is dat voor iedereen beschikbaar is en dat het gebaseerd is -op open standaarden. De technologieën worden ontworpen en gespecificeerd op basis van consensus en zijn niet in handen -van één enkele entiteit. +# 📸 visora Website -Desondanks zijn er veel mensen en bedrijven die vinden dat het internet niet voldoet aan hun behoeften. Dit blijkt uit -de pogingen van grote techbedrijven om hun eigen afgesloten ecosystemen te creëren. Ze streven hiermee naar controle over -zowel de gebruikerservaring als de gegenereerde data. +https://api-web-03h4.onrender.com/ -**In dit vier weken durende vak zullen we de kracht van het web ervaren en kijken hoe we (mobiele) web apps kunnen maken die -net zo aantrekkelijk zijn als native mobiele apps. We beginnen met het maken van een server-side gerenderde applicatie -waarbij we geleidelijk de gebruikerservaring verbeteren met relevante beschikbare web API's.** +## 🧠 Over dit project -[TLDR; hoe zet ik mijn project op?](#Inrichten-ontwikkelomgeving) +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. -## Doelen -Na deze cursus zul je: +## WEEK 1 -- In staat zijn om een server-side gerenderde applicatie te maken. -- In staat zijn om een enerverende gebruikerservaring te creëren. -- Een breder begrip hebben van het web en zijn mogelijkheden. +[x] orienteren welke content API te gebruiken is (gratis) +[x] wat voor soort website wil ik maken? +[ ] welke Web APIs wil ik gebruiken? -## Opdracht +### ideeen: +hi ik wil voor dit vak een eigen social media app gaan maken en ik zit te kijken naar: -In dit vak zullen we een van de meest voorkomende app-concepten van vandaag -gebruiken en ontdekken dat we deze kunnen maken met moderne webtechnologie -met als doel om een rijke gebruikerservaring creëeren. +- Pinterest API +- Instagram API +- Fake user API + PEXELS API -Randvoorwaarden: +ik wilde met de PEXELS api werken, maar daar had ik geen toegang voor gebruikers, dus heb uiteindelijk gekozen voor unsplash -- Minimaal een overzichts- en detailpagina -- Gebouwd in TinyHTTP + Liquid -- Minimaal een content API -- Minimaal twee Web API's +Dit concept is goed gekeurd, alleen vinden Cyd en Declan het een saai project, want instagram is helemaal niet interessant om te maken. -Voorbeelden: +## 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: + +Screenshot 2025-04-24 at 12 53 22 +Screenshot 2025-04-24 at 12 53 31 -- Maak je eigen streamingplatform (Netflix/Spotify). -- Maak je eigen doom-scroll-app (Instagram/TikTok). -- Maak je eigen chatapplicatie (WhatsApp/Signal). -- Een andere app die je zelf leuk vindt... -Voorbeeld content API's die je kan gebruiken: +## feedback: -- [MovieDB API](https://developer.themoviedb.org/reference/intro/getting-started) -- [Rijksmuseum API](https://data.rijksmuseum.nl/object-metadata/api/) -- [Spotify API](https://developer.spotify.com/documentation/web-api) -- ... +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. -Voorbeelden van Web API's die je kan gebruiken: +## 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. -- [Page Transition API voor animaties tusse npagina's](https://developer.mozilla.org/en-US/docs/Web/API/Page_Transitions_API) -- [Web Animations API voor complexe animaties](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) -- [Service Worker API voor installable web apps](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) -- [Web Push API voor push notifications](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) -- [Server sent events voor realtime functionaliteit](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events) -- [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) -- [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API) -- [Web Share API voor sharen van content binnen de context van de gebruiker](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) -- ... +## WEEK 2 -De lijst is eindeloos, laat je vooral inspireren op de overzichtspagina van [MDN](https://developer.mozilla.org/en-US/docs/Web/API). +[x] overzichtspagina maken +[x] dialogs toevoegen op elke foto +[ ] welke Web APIs wil ik gebruiken? +[x] detail pagina maken/ profiel pagina -## Beoordeling -De beoordelingscriteria zijn te vinden op [DLO](https://dlo.mijnhva.nl/d2l/le/content/609470/Home) +## 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. -## Planning +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! -| Planning | Maandag | Dinsdag | Vrijdag | -|----------------------------|-----------------------|--------------------|---------------------------------------------| -| Week 1 - Kickoff & concept | Introductie ne uitleg | Workshops | Feedback gesprekken | -| Week 2 - The baseline | College + workshops | Workshops | Feedback gesprekken | -| Week 3 - Enhance | College + workshops | Workshops | Feedback gesprekken(*DONDERDAG*) | -| Week 4 - Enhance & wrap up | Tweede paasdag | Individuele vragen | Beoordelingsgesprekken(*DONDERDAG/VRIJDAG*) | +Screenshot 2025-04-24 at 12 08 56 -## Bronnen +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. -- [Nodejs.org](https://nodejs.org/en/), voor de installatie van NodeJS op jouw systeem, kies voor NodeJS 22.13.1 Long Term Support. Dit is de meest stabiele versie van NodeJS, welke ondersteund wordt met goede documentatie. -- [VSCode How To Open Terminal](https://www.youtube.com/watch?v=OmQhOnBzg_k), om iemand de terminal te zien openen en gebruiken op Youtube. -- [Introduction to NodeJS](https://nodejs.dev/en/learn/), voor een in depth introductie met de NodeJS ontwikkelomgeving. Let op: dit is best een technisch verhaal. De eerste zes pagina’s zijn interessant. -- Om serverside te kunnen renderen maken we gebruik van [TinyHttp](https://github.com/tinyhttp). -- Voor templating maken we gebruik van [LiquidJS](https://liquidjs.com/). -- [Liquid Filters](https://liquidjs.com/filters/overview.html) -- Voor build tooling(CSS en JS) maken we gebruik [Vite](https://vitejs.dev/). -- [Using the Fetch API @ MDN](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) -- [JSON.parse() @ MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) -- [Partial commits in GitHub Desktop](https://github.blog/news-insights/product-news/partial-commits-in-github-for-windows/) -- [Committing and reviewing changes to your project in GitHub Desktop](https://docs.github.com/en/desktop/making-changes-in-a-branch/committing-and-reviewing-changes-to-your-project-in-github-desktop) +## 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. -## Inrichten ontwikkelomgeving +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. -1. Navigeer naar [nodejs.org](https://nodejs.org/en/) en installeer de NodeJS ontwikkelomgeving. Kies voor _NodeJS 22.13.1 with long-term support_, download de benodigde bestanden en doorloop het installatieproces. +## reflectie week2 -2. Fork daarna [deze repository](https://github.com/cmda-minor-web/API-2425) en *clone* deze op jouw computer. +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. -3. Open deze repository in je code editor. -4. Open de _Terminal_ in Visual Studio Code door de toetscombinatie `` ^` `` (control + `) te gebruiken. Er opent een terminalscherm in de hoofdmap van jouw project. +## WEEK 3 -5. Voer in de terminal het commando `npm install` uit, door het in te typen en op enter te drukken. Je gebruikt _NPM_, de _NodeJS Package Manager_ om alle _afhankelijkheden_ voor dit project te installeren. NPM is een veelgebruikte package manager in frontend land. Voor dit project gebruiken we _TinyHTTP_ (om een _server_ te maken) en _Liquid_ (om HTML te _renderen_). -- (Optioneel) Na de installatie is de map `node_modules` aangemaakt, en gevuld met allerlei _packages_. Scroll eens door deze map heen; vele honderden *open source* ontwikkelaars hebben de packages die je ziet gebouwd en die mag je gratis gebruiken. Ontwikkelen in NodeJS is *standing on the shoulders of giants*. +[x] local storage +[x] favorieten pagina maken +[ ] wat is mijn tweede API? -### Project starten en stoppen -Start het voorbeeldproject op door in de terminal het commando `npm run dev` uit te voeren. Als het goed is, komt een melding te staan over het opstarten van de server: `Server available on http://localhost:3000` — Open deze URL in je browser. Let op: Vite draait op een andere poort dan TinyHTTP, dus je moet de poort van TinyHTTP gebruiken: http://localhost:3000 +## 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..... -Als het werkt, zet je je server weer uit door in de terminal de toetscombinatie `^c` (control + c) in te voeren. Deze toetsencombinatie wordt in de terminal gebruikt om de huidige taak te stoppen en *controle* (vandaar de c) terug te krijgen van het programma. +met deze code : '{% if likes.size > 0 %}' +deze week heb ik een paar dingen toegevoegd aan mijn paginas (tekst en styling). -- Optioneel: Volg het [NodeJS ‘Hello World’ voorbeeld](https://medium.com/@mohammedijas/hello-world-in-node-js-b333275ddc89) -- Optioneel, iets technischer: Lees de eerste vijf delen van [Introduction to Node](https://nodejs.dev/en/learn/) als je een meer in-depth introductie wilt met de NodeJS ontwikkelomgeving. +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. + +Screenshot 2025-04-24 at 12 11 17 + + +## 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: + +Screenshot 2025-04-24 at 12 25 12 + + + +## 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 diff --git a/client/.DS_Store b/client/.DS_Store new file mode 100644 index 0000000..3f7ea2e Binary files /dev/null and b/client/.DS_Store differ diff --git a/client/index.css b/client/index.css index 576d3eb..ae73a7e 100644 --- a/client/index.css +++ b/client/index.css @@ -10,12 +10,6 @@ @import '../server/components/card/card.css'; body { - color: black; - max-width: 1440px; margin: 0 auto; - background-image: url('/images/background.jpg'); } -main { - padding: 1rem; -} diff --git a/client/index.js b/client/index.js index 5f2dbf3..f86c82e 100644 --- a/client/index.js +++ b/client/index.js @@ -1,3 +1,200 @@ import './index.css'; -console.log('Hello, world!'); +document.getElementById('goToFavorites').addEventListener('click', (e) => { + e.preventDefault(); + const favorites = JSON.parse(localStorage.getItem('favorites')) || []; + + if (favorites.length === 0) { + alert('Je hebt nog geen favorieten!'); + return; + } + + const idsParam = favorites.join(','); + window.location.href = `/favorites?ids=${idsParam}`; +}); + + + +window.addEventListener('DOMContentLoaded', () => { + const images = document.querySelectorAll('ul img'); + images.forEach(img => { + function checkOrientation() { + if (img.naturalWidth > img.naturalHeight) { + img.closest('li').classList.add('landscape'); + } + } + + if (img.complete) { + checkOrientation(); // al geladen + } else { + img.onload = checkOrientation; + } + }); +}); + + +const photoContainers = document.querySelectorAll('#photoContainer, #likedPhotosContainer'); + +photoContainers.forEach(photoContainer => { + const hasLandscape = photoContainer.querySelector('li .landscape'); + + if (hasLandscape) { + photoContainer.style.flexDirection = 'column'; + } else { + photoContainer.style.flexDirection = 'row'; + } +}); + + + + +/////////color//////////////// + + +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); + + + r = r / 255; + g = g / 255; + b = b / 255; + + // Luminosity berekening + r = (r <= 0.03928) ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4); + g = (g <= 0.03928) ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4); + b = (b <= 0.03928) ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4); + + // Luminantie (gemiddelde van de R, G, B waarden) + return 0.2126 * r + 0.7152 * g + 0.0722 * b; +} + +// Functie om de tekstkleur aan te passen voor de div color-info +function adjustTextColorForColorDiv() { + let colorDivs = document.querySelectorAll('.details-content div'); // Alle divs met de class 'color-info' + + colorDivs.forEach(function (div) { + let backgroundColor = window.getComputedStyle(div).backgroundColor; + let rgb = backgroundColor.match(/\d+/g); + backgroundColor = "#" + ((1 << 24) + (parseInt(rgb[0]) << 16) + (parseInt(rgb[1]) << 8) + parseInt(rgb[2])).toString(16).slice(1); + + let luminance = getLuminance(backgroundColor); + + + let textColor = luminance > 0.5 ? ' rgba(71, 56, 76, 1)' : 'rgb(251, 240, 255)'; + let textElement = div.querySelector('p'); + textElement.style.color = textColor; + }); +} +window.onload = adjustTextColorForColorDiv; + +document.addEventListener("DOMContentLoaded", () => { + // console.log("📜 JavaScript actief"); + + const likeButtons = document.querySelectorAll(".likeButton"); + let favorites = JSON.parse(localStorage.getItem("favorites")) || []; + + likeButtons.forEach((likeButton) => { + const photoId = likeButton.getAttribute("data-photo-id"); + const heart = likeButton.querySelector("svg path"); + const svg = likeButton.querySelector("svg"); + let liked = favorites.includes(photoId); + + + heart.setAttribute("fill", liked ? "#47284C" : "transparent"); + heart.setAttribute("stroke", liked ? "transparent" : "#171616"); + + likeButton.addEventListener("click", () => { + liked = !liked; + + if (liked) { + + if (!favorites.includes(photoId)) { + favorites.push(photoId); + } + console.log(`Toegevoegd: ${photoId}`); + + // verwijder animatie/ + svg.animate( + [ + { transform: "scale(1)" }, + { transform: "scale(1.3)" }, + { transform: "scale(1)" } + ], + { + duration: 500, + easing: "ease" + } + ); + } else { + + favorites = favorites.filter(id => id !== photoId); + console.log(`Verwijderd: ${photoId}`); + + const li = likeButton.closest(".liked-photo"); + if (li) { + + li.animate( + [ + { opacity: 1, transform: "translateY(0px)" }, + { opacity: 0, transform: "translateY(-20px)" } + ], + { + duration: 400, + easing: "ease", + fill: "forwards" + } + ).onfinish = () => { + li.remove(); + }; + } + + + svg.animate( + [ + { transform: "scale(1)" }, + { transform: "scale(0.8)" }, + { transform: "scale(1)" } + ], + { + duration: 300, + easing: "ease" + } + ); + } + + + localStorage.setItem("favorites", JSON.stringify(favorites)); + + heart.setAttribute("fill", liked ? "#47284C" : "rgb(251, 240, 255)"); + heart.setAttribute("stroke", liked ? "transparent" : "#171616"); + }); + }); +}); + + + +const openButtons = document.querySelectorAll('[data-modalPhoto]') + +openButtons.forEach((button) => { + button.addEventListener("click", (e)=>{ + + // get dialog id + const id = e.currentTarget.getAttribute('data-modalPhoto') + + // get dialog element + const dialogElement = document.getElementById(`foto-${id}`) + + // open modal + if (!('startViewTransition' in document)) { + dialogElement.showModal() + return + } + + document.startViewTransition(() => { + dialogElement.showModal() + }) + }) +}) \ No newline at end of file diff --git a/client/public/images/.DS_Store b/client/public/images/.DS_Store new file mode 100644 index 0000000..ddc4ff8 Binary files /dev/null and b/client/public/images/.DS_Store differ diff --git a/client/public/images/logo.svg b/client/public/images/logo.svg new file mode 100644 index 0000000..ec80924 --- /dev/null +++ b/client/public/images/logo.svg @@ -0,0 +1,19 @@ + + + + + + + + + \ No newline at end of file diff --git a/client/public/images/visora.svg b/client/public/images/visora.svg new file mode 100644 index 0000000..c33191e --- /dev/null +++ b/client/public/images/visora.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/client/public/images/visoraName.svg b/client/public/images/visoraName.svg new file mode 100644 index 0000000..b9b415c --- /dev/null +++ b/client/public/images/visoraName.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index d8e410b..3871428 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,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" }, @@ -420,7 +421,10 @@ "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", + + "license": "MIT", + "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" @@ -433,7 +437,10 @@ "version": "2.0.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", + + "license": "MIT", + "engines": { "node": ">= 8" } @@ -442,7 +449,10 @@ "version": "1.2.8", "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", + + "license": "MIT", + "dependencies": { "@nodelib/fs.scandir": "2.1.5", "fastq": "^1.6.0" @@ -913,7 +923,10 @@ "version": "4.0.1", "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-4.0.1.tgz", "integrity": "sha512-0poP0T7el6Vq3rstR8Mn4V/IQrpBLO6POkUSrN7RhyY+GF/InCFShQzsQ39T25gkHhLgSLByyAz+Kjb+c2L98w==", + + "license": "MIT", + "dependencies": { "clean-stack": "^4.0.0", "indent-string": "^5.0.0" @@ -1001,7 +1014,9 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/arrify/-/arrify-3.0.0.tgz", "integrity": "sha512-tLkvA81vQG/XqE2mjDkGQHoOINtMHtysSnemrmoGe6PydDPMRbVugqyk4A6V/WDWEfm3l+0d8anA9r8cv/5Jaw==", + "license": "MIT", + "engines": { "node": ">=12" }, @@ -1081,7 +1096,9 @@ "version": "5.3.1", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", + "license": "MIT", + "engines": { "node": ">=6" } @@ -1114,6 +1131,7 @@ "resolved": "https://registry.npmjs.org/chokidar-cli/-/chokidar-cli-3.0.0.tgz", "integrity": "sha512-xVW+Qeh7z15uZRxHOkP93Ux8A0xbPzwK4GaqD8dQOYc34TlkqUhVSS59fK36DOp5WdJlrRzlYSy02Ht99FjZqQ==", "license": "MIT", + "dependencies": { "chokidar": "^3.5.2", "lodash.debounce": "^4.0.8", @@ -1131,7 +1149,9 @@ "version": "4.2.0", "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-4.2.0.tgz", "integrity": "sha512-LYv6XPxoyODi36Dp976riBtSY27VmFo+MKqEU9QCCWyTrdEPDog+RWA7xQWHi6Vbp61j5c4cdzzX1NidnwtUWg==", + "license": "MIT", + "dependencies": { "escape-string-regexp": "5.0.0" }, @@ -1147,6 +1167,7 @@ "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz", "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==", "license": "ISC", + "dependencies": { "string-width": "^3.1.0", "strip-ansi": "^5.2.0", @@ -1158,6 +1179,7 @@ "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz", "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==", "license": "MIT", + "engines": { "node": ">=6" } @@ -1167,6 +1189,7 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", "license": "MIT", + "dependencies": { "color-convert": "^1.9.0" }, @@ -1178,7 +1201,9 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "license": "MIT", + "dependencies": { "color-name": "1.1.3" } @@ -1186,20 +1211,22 @@ "node_modules/cliui/node_modules/color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", - "license": "MIT" + + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" }, "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==", - "license": "MIT" + + "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==" }, "node_modules/cliui/node_modules/is-fullwidth-code-point": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", "integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==", + "license": "MIT", + "engines": { "node": ">=4" } @@ -1209,6 +1236,7 @@ "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz", "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==", "license": "MIT", + "dependencies": { "emoji-regex": "^7.0.1", "is-fullwidth-code-point": "^2.0.0", @@ -1223,6 +1251,7 @@ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", "license": "MIT", + "dependencies": { "ansi-regex": "^4.1.0" }, @@ -1235,6 +1264,7 @@ "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz", "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==", "license": "MIT", + "dependencies": { "ansi-styles": "^3.2.0", "string-width": "^3.0.0", @@ -1285,6 +1315,7 @@ "resolved": "https://registry.npmjs.org/cp-file/-/cp-file-10.0.0.tgz", "integrity": "sha512-vy2Vi1r2epK5WqxOLnskeKeZkdZvTKfFZQCplE3XWsP+SUJyd5XAUFC9lFgTjjXJF2GMne/UML14iEmkAaDfFg==", "license": "MIT", + "dependencies": { "graceful-fs": "^4.2.10", "nested-error-stacks": "^2.1.1", @@ -1302,6 +1333,7 @@ "resolved": "https://registry.npmjs.org/cpy/-/cpy-10.1.0.tgz", "integrity": "sha512-VC2Gs20JcTyeQob6UViBLnyP0bYHkBh6EiKzot9vi2DmeGlFT9Wd7VG3NBrkNx/jYvFBeyDOMMHdHQhbtKLgHQ==", "license": "MIT", + "dependencies": { "arrify": "^3.0.0", "cp-file": "^10.0.0", @@ -1324,6 +1356,7 @@ "resolved": "https://registry.npmjs.org/cpy-cli/-/cpy-cli-5.0.0.tgz", "integrity": "sha512-fb+DZYbL9KHc0BC4NYqGRrDIJZPXUmjjtqdw4XRRg8iV8dIfghUX/WiL+q4/B/KFTy3sK6jsbUhBaz0/Hxg7IQ==", "license": "MIT", + "dependencies": { "cpy": "^10.1.0", "meow": "^12.0.1" @@ -1425,7 +1458,9 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==", + "license": "MIT", + "engines": { "node": ">=0.10.0" } @@ -1466,7 +1501,9 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==", + "license": "MIT", + "dependencies": { "path-type": "^4.0.0" }, @@ -1684,6 +1721,7 @@ "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz", "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==", "license": "MIT", + "engines": { "node": ">=12" }, @@ -1696,6 +1734,7 @@ "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz", "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==", "license": "MIT", + "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", @@ -1712,6 +1751,7 @@ "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz", "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==", "license": "ISC", + "dependencies": { "reusify": "^1.0.4" } @@ -1732,6 +1772,7 @@ "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz", "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==", "license": "MIT", + "dependencies": { "locate-path": "^3.0.0" }, @@ -1814,6 +1855,7 @@ "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", "license": "ISC", + "engines": { "node": "6.* || 8.* || >= 10.*" } @@ -1880,6 +1922,7 @@ "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", "license": "ISC", + "dependencies": { "is-glob": "^4.0.1" }, @@ -1930,6 +1973,7 @@ "resolved": "https://registry.npmjs.org/globby/-/globby-13.2.2.tgz", "integrity": "sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==", "license": "MIT", + "dependencies": { "dir-glob": "^3.0.1", "fast-glob": "^3.3.0", @@ -2049,6 +2093,7 @@ "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==", "license": "MIT", + "engines": { "node": ">= 4" } @@ -2063,6 +2108,7 @@ "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-5.0.0.tgz", "integrity": "sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==", "license": "MIT", + "engines": { "node": ">=12" }, @@ -2351,6 +2397,15 @@ "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==" }, + "node_modules/isomorphic-fetch": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-3.0.0.tgz", + "integrity": "sha512-qvUtwJ3j6qwsF3jLxkZ72qCgjMysPzDfeV240JHiGZsANBYd+EEuu35v7dfrJ9Up0Ak07D7GGSkGhCHTqg/5wA==", + "dependencies": { + "node-fetch": "^2.6.1", + "whatwg-fetch": "^3.4.1" + } + }, "node_modules/jackspeak": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-4.1.0.tgz", @@ -2376,6 +2431,7 @@ "resolved": "https://registry.npmjs.org/junk/-/junk-4.0.1.tgz", "integrity": "sha512-Qush0uP+G8ZScpGMZvHUiRfI0YBWuB3gVBYlI0v0vvOJt5FLicco+IkP0a50LqTTQhmts/m6tP5SWE+USyIvcQ==", "license": "MIT", + "engines": { "node": ">=12.20" }, @@ -2421,6 +2477,7 @@ "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz", "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==", "license": "MIT", + "dependencies": { "p-locate": "^3.0.0", "path-exists": "^3.0.0" @@ -2432,14 +2489,13 @@ "node_modules/lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", - "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==", - "license": "MIT" + "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" }, "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==", - "license": "MIT" + + "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==" }, "node_modules/lru-cache": { "version": "6.0.0", @@ -2465,6 +2521,7 @@ "resolved": "https://registry.npmjs.org/meow/-/meow-12.1.1.tgz", "integrity": "sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==", "license": "MIT", + "engines": { "node": ">=16.10" }, @@ -2477,6 +2534,7 @@ "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", "license": "MIT", + "engines": { "node": ">= 8" } @@ -2486,6 +2544,7 @@ "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", "license": "MIT", + "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" @@ -2569,14 +2628,32 @@ "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==", - "license": "MIT" + "integrity": "sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw==" }, "node_modules/nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==" }, + "node_modules/node-fetch": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz", + "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==", + "dependencies": { + "whatwg-url": "^5.0.0" + }, + "engines": { + "node": "4.x || >=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", @@ -2851,6 +2928,7 @@ "resolved": "https://registry.npmjs.org/p-event/-/p-event-5.0.1.tgz", "integrity": "sha512-dd589iCQ7m1L0bmC5NLlVYfy3TbBEsMUfWx9PyAgPeIcFZ/E2yaTZ4Rz4MiBmmJShviiftHVXOqfnfzJ6kyMrQ==", "license": "MIT", + "dependencies": { "p-timeout": "^5.0.2" }, @@ -2865,7 +2943,9 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/p-filter/-/p-filter-3.0.0.tgz", "integrity": "sha512-QtoWLjXAW++uTX67HZQz1dbTpqBfiidsB6VtQUC9iR85S120+s0T5sO6s+B5MLzFcZkrEd/DGMmCjR+f2Qpxwg==", + "license": "MIT", + "dependencies": { "p-map": "^5.1.0" }, @@ -2881,6 +2961,7 @@ "resolved": "https://registry.npmjs.org/p-map/-/p-map-5.5.0.tgz", "integrity": "sha512-VFqfGDHlx87K66yZrNdI4YGtD70IRyd+zSvgks6mzHPRNkoKy+9EKP4SFC77/vTTQYmRmti7dvqC+m5jBrBAcg==", "license": "MIT", + "dependencies": { "aggregate-error": "^4.0.0" }, @@ -2895,7 +2976,9 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", + "license": "MIT", + "dependencies": { "p-try": "^2.0.0" }, @@ -2910,7 +2993,9 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz", "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==", + "license": "MIT", + "dependencies": { "p-limit": "^2.0.0" }, @@ -2923,6 +3008,7 @@ "resolved": "https://registry.npmjs.org/p-map/-/p-map-6.0.0.tgz", "integrity": "sha512-T8BatKGY+k5rU+Q/GTYgrEf2r4xRMevAN5mtXc2aPc4rS1j3s+vWTaO2Wag94neXuCAUAs8cxBL9EeB5EA6diw==", "license": "MIT", + "engines": { "node": ">=16" }, @@ -2934,7 +3020,9 @@ "version": "5.1.0", "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-5.1.0.tgz", "integrity": "sha512-auFDyzzzGZZZdHz3BtET9VEz0SE/uMEAx7uWfGPucfzEwwe/xH0iVeZibQmANYE/hp9T2+UUZT5m+BKyrDp3Ew==", + "license": "MIT", + "engines": { "node": ">=12" }, @@ -2946,7 +3034,9 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", + "license": "MIT", + "engines": { "node": ">=6" } @@ -2974,6 +3064,7 @@ "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz", "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==", "license": "MIT", + "engines": { "node": ">=4" } @@ -3028,6 +3119,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", @@ -3120,8 +3219,10 @@ "type": "consulting", "url": "https://feross.org/support" } + ], "license": "MIT" + }, "node_modules/read-pkg": { "version": "3.0.0", @@ -3176,7 +3277,9 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==", + "license": "MIT", + "engines": { "node": ">=0.10.0" } @@ -3184,8 +3287,8 @@ "node_modules/require-main-filename": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz", - "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==", - "license": "ISC" + + "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==" }, "node_modules/resolve": { "version": "1.22.8", @@ -3207,7 +3310,9 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz", "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==", + "license": "MIT", + "engines": { "iojs": ">=1.0.0", "node": ">=0.10.0" @@ -3294,6 +3399,7 @@ } ], "license": "MIT", + "dependencies": { "queue-microtask": "^1.2.2" } @@ -3348,8 +3454,9 @@ "node_modules/set-blocking": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", - "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==", - "license": "ISC" + + "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==" + }, "node_modules/set-function-length": { "version": "1.2.2", @@ -3468,6 +3575,7 @@ "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz", "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==", "license": "MIT", + "engines": { "node": ">=12" }, @@ -3719,6 +3827,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", @@ -3887,6 +4000,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", @@ -3920,8 +4052,8 @@ "node_modules/which-module": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz", - "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==", - "license": "ISC" + + "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==" }, "node_modules/which-typed-array": { "version": "1.1.15", @@ -4035,19 +4167,14 @@ "node_modules/y18n": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz", + "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", "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==", "license": "MIT", + "dependencies": { "cliui": "^5.0.0", "find-up": "^3.0.0", @@ -4065,7 +4192,9 @@ "version": "13.1.2", "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz", "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==", + "license": "ISC", + "dependencies": { "camelcase": "^5.0.0", "decamelize": "^1.2.0" @@ -4075,6 +4204,7 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz", "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==", + "license": "MIT", "engines": { "node": ">=6" @@ -4083,6 +4213,7 @@ "node_modules/yargs/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==", "license": "MIT" }, @@ -4091,6 +4222,7 @@ "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", "integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==", "license": "MIT", + "engines": { "node": ">=4" } @@ -4099,7 +4231,9 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz", "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==", + "license": "MIT", + "dependencies": { "emoji-regex": "^7.0.1", "is-fullwidth-code-point": "^2.0.0", @@ -4114,6 +4248,7 @@ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", "license": "MIT", + "dependencies": { "ansi-regex": "^4.1.0" }, @@ -4123,3 +4258,4 @@ } } } +} \ No newline at end of file diff --git a/package.json b/package.json index 0ed6706..3ab0eba 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "predev": "npm run clean && npm run build", "dev": "npm-run-all --parallel dev:*", "dev:client": "chokidar 'client/**/*' -c 'npm run build:client'", + "dev:server": "nodemon server/server.js --ext js,liquid", "prebuild": "npm run clean", "build": "npm-run-all build:*", @@ -24,6 +25,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/components/photo/photo.css b/server/components/photo/photo.css new file mode 100644 index 0000000..e69de29 diff --git a/server/components/photo/photo.liquid b/server/components/photo/photo.liquid new file mode 100644 index 0000000..e69de29 diff --git a/server/layouts/base.css b/server/layouts/base.css index 6efd0ce..46ba8b7 100644 --- a/server/layouts/base.css +++ b/server/layouts/base.css @@ -1,7 +1,68 @@ header { - padding: 1rem; + height: 5em; + padding: 1em; + display: flex; + justify-content: space-between; +} + +header a img { + height: 5em; } +header a:nth-of-type(1) { + position: fixed; + top: .5em; + left: 2em; + 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: 2em; +} +header a{ + place-self: center; + } + + header a:nth-of-type(2){ + width: 5em; + align-items: center; + justify-content: center; + } + + header a svg{ + margin-left:1em ; + height: 2em; + width: 2em; + + } + footer { padding: 1rem; } +footer ul { + display: flex; + list-style: none; + color: var(--text); + justify-content: end; + gap: 2em; + margin: auto; + font-size: 1em; + padding: 1em 0; +} + +footer a{ + color: var(--text); + text-decoration: none; +} \ No newline at end of file diff --git a/server/layouts/base.liquid b/server/layouts/base.liquid index ecf0462..b5bda35 100644 --- a/server/layouts/base.liquid +++ b/server/layouts/base.liquid @@ -6,6 +6,8 @@ {{ title }} {% endblock %} + + {% block styles %}{% endblock %} {% block scripts %}{% endblock %} @@ -13,13 +15,37 @@
- Deze header staat op elke pagina -
+ + visora titel + + + + A heart + + + + +
{% block content %}{% endblock %}
diff --git a/server/server.js b/server/server.js index 8dd9334..0ae75a2 100644 --- a/server/server.js +++ b/server/server.js @@ -1,58 +1,80 @@ +import 'dotenv/config'; import { App } from '@tinyhttp/app'; 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, - } - } -} +// 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&page=2`; + +// Maak een Liquid Engine voor rendering van templates const engine = new Liquid({ extname: '.liquid', }); const app = new App(); +// Logger en statische bestanden app .use(logger()) - .use('/', sirv('dist')) + .use('/', sirv('dist')) // Zorg ervoor dat 'dist' de juiste map is .listen(3000, () => console.log('Server available on http://localhost:3000')); + +// Render functie voor Liquid templates +const renderTemplate = (template, data) => { + const templateData = { + ...data + }; + + return engine.renderFileSync(template, templateData); +}; + +// Hoofdpagina route app.get('/', async (req, res) => { - return res.send(renderTemplate('server/views/index.liquid', { title: 'Home', items: Object.values(data) })); + const response = await fetch(apiUrl); // Gebruik de ingebouwde fetch van Node.js + const jsonData = await response.json(); + + return res.send(renderTemplate('server/views/index.liquid', { title: 'Home', photos: jsonData })); }); -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 - })); +// Gebruikerspagina route +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}&per_page=30`; + + + const userResponse = await fetch(usersAPIEndpoint); + const userData = await userResponse.json(); + const photosResponse = await fetch(userPhotosAPIEndpoint); + const userPhotos = await photosResponse.json(); + + const fullUserData = { + title: `${userData.name}'s Profile`, + profile: userData, + photos: userPhotos, + }; + + return res.send(renderTemplate('server/views/detail.liquid', fullUserData)); }); -const renderTemplate = (template, data) => { - return engine.renderFileSync(template, data); -}; +app.get('/favorites', async (req, res) => { + const ids = req.query.ids?.split(',') || []; + + if (ids.length === 0) { + return res.send(renderTemplate('server/views/liked.liquid', { title: 'Favorieten', likes: [] })); + } + + // Haal individuele foto's op via Unsplash API + const photoPromises = ids.map(id => + fetch(`https://api.unsplash.com/photos/${id}?client_id=${apiKey}`).then(r => r.json()) + ); + + const likedPhotos = await Promise.all(photoPromises); + + return res.send(renderTemplate('server/views/liked.liquid', { title: 'Favorieten', likes: likedPhotos })); +}); diff --git a/server/views/detail.liquid b/server/views/detail.liquid index 45c94b4..295e87d 100644 --- a/server/views/detail.liquid +++ b/server/views/detail.liquid @@ -1,6 +1,45 @@ {% layout "server/layouts/base.liquid" %} {% block content %} -

{{ item.name }}

-{{ item.image.alt }} +
+ {% comment %} back to overview {% endcomment %} + +
+ {{ profile.name }}'s profile image +
+

{{ profile.name }}

+ {% if profile.location %} +

📍 {{ profile.location}}

+ {% endif %} +

{{ profile.bio }}

+ {% if profile.portfolio_url %} +

+ Website: + {{ profile.portfolio_url }} +

+ {% endif %} +
    + {% for tag in profile.tags.custom %} +
  • {{ tag.title }}
    • + {% endfor %} +
+ +
+ +
+ +
+

Photos by {{ profile.name }}

+ +
+
+ + {% endblock %} + diff --git a/server/views/index.css b/server/views/index.css index 055029e..ba8ce13 100644 --- a/server/views/index.css +++ b/server/views/index.css @@ -1,5 +1,523 @@ -.grid { - display: grid; - gap: 1rem; - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); +:root { + --text:rgba(35, 31, 36, 1); + --dark: rgba(71, 56, 76, 1); + --wit: rgb(251, 240, 255); + --detail: rgba(187, 175, 205, 0.8253895308123249); } + +body { + font-family: 'Poppins', Arial, Helvetica, sans-serif; + color: var(--wit); + background: rgb(187, 175, 205); + background: rgb(187, 175, 205); + background: -moz-linear-gradient(90deg, rgba(187, 175, 205, 0.8253895308123249) 0%, rgba(71, 56, 76, 1) 54%, rgba(35, 31, 36, 1) 100%); + background: -webkit-linear-gradient(90deg, rgba(187, 175, 205, 0.8253895308123249) 0%, rgba(71, 56, 76, 1) 54%, rgba(35, 31, 36, 1) 100%); + background: linear-gradient(60deg, rgba(187, 175, 205, 0.8253895308123249) 0%, rgba(71, 56, 76, 1) 54%, rgba(35, 31, 36, 1) 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#bbafcd", endColorstr="#231f24", GradientType=1); +} + +main { + padding: 0; + margin: 2rem; +} + +#photoContainer { + /* margin: 0; + padding: 0; + width: 100vw; */ + display: flex; + flex-wrap: wrap; + gap: 1.5em; + align-items: stretch; +} + +#photoContainer li { + width: min(15em, 20%); + flex-grow: 1; + /* max-height:100vh; */ + + &.landscape { + width: max(17em, 35%); + } +} + +#card__image { + width: 100%; + height: 100%; + border-radius: 1em; + object-fit: cover; +} + + +#photoContainer button { + background-color: transparent; + border: none; + padding: 0; +} + +dialog { + border-radius: .5em; + width: 90vw; + background-color: var(--wit); + border: none; + padding: 2em; + opacity: 0; + transform: scale(0.96); + transition: opacity 0.4s ease, transform 0.4s ease; +} + +dialog[open] { + opacity: 1; + transform: scale(1); +} + +#moreDetailsOver { + display: flex; + flex-direction: row; + align-items: start; + + width: 88vw; + padding: 1rem; + position: relative; + gap: 2em; +} + +.dialog-image { + max-width: 60%; + max-height: 70vh; + aspect-ratio: var(--aspect-ratio); +} + +#moreDetailsOver img { + border-radius: 0; + width: 100%; + height: 100%; + object-fit: cover; + flex-shrink: 0; +} + + +#moreDetailsOver>button:nth-of-type(1) { + position: absolute; + top: 0; + right: 0; + border-radius: .5em; + border: none; + font-size: 1.5rem; + cursor: pointer; + color: var(--wit); + background-color: var(--dark); + padding: .4em .7em; +} + +.details-content { + display: flex; + flex-direction: column; + flex: 1; +} + +#moreDetailsOver a { + color: var(--text); +} + +.details-content h2 { + margin-top: 2rem; + margin-bottom: 0.5rem; + font-size: 2em; + opacity: .8; +} + + +.location{ + margin: 0; + font-size: 1.2em; + font-weight: 100; +} + +.text { + margin: .5em 0; + font-size: 4em; + font-weight: 800; + color: var(--dark); + font-style: italic; + hyphens: auto; +} +.details-content div{ + border-radius: .8em; + width: 20em; + padding: 1em; + align-items: center; + justify-content: center; + box-shadow: .1em .1em 1em var(--detail); +} +.details-content div p{ + font-weight: 600; + text-transform: uppercase; +} + + +.details-content ul { + margin: 0.5rem 0; + padding-left: 1rem; +} + +.details-content button { + position: absolute; + bottom: 2em; + right: 1em; + width: 4em; + height: 4em; +} + +.details-content svg { + width: 4em; + height: 4em; +} + +.like-pop { + animation: pop 1s ease; +} + +@keyframes pop { + 0% { + transform: scale(1); + filter: blur(0); + } + + 4% { + transform: scale(.4); + filter: blur(.1em); + + } + + 70% { + transform: scale(1.4); + filter: blur(.2em); + + } + + 95%{ + filter: blur(.1em); + } + 100% { + transform: scale(1); + } +} + +/* ////////////detail pagina//////////// */ + +.detailMain{ + width: 90%; + margin: auto; +} +.back { + text-decoration: none; + font-weight: bold; + color: var(--wit); + +} + +.back::before { + content: "←"; +} + +.detailMain section:nth-of-type(1){ + display: flex; + flex-direction: row; + align-items: start; + padding: 1rem; + position: relative; + gap: 2em; + width: 85%; +} + +.detailMain section:nth-of-type(1) img{ + flex-shrink:0 ; + height: 15em; + margin-bottom: 1em; + border-radius: 50%; + align-self: center; +} +.detailMain section:nth-of-type(1) h1{ + font-size: 2.5em; + color: var(--detail); + +} + +.detailMain section:nth-of-type(1)> div> p{ + /* padding-left: 1em; */ + font-size: 1.3em; + line-height: 1.2em; +} +.detailMain section:nth-of-type(1) p:nth-of-type(1){ + font-weight: 100; + margin-bottom: 1em; + +} + +.detailMain section:nth-of-type(1)> div> p:nth-of-type(2){ + font-weight: 500; + 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; + gap: 1em; + margin: 1.5em 0; +} + +.detailMain section:nth-of-type(1) ul li{ + font-size: 1.1em; + background-color: var(--detail); + padding: .7em; + border-radius: .5em; +} + +.detailMain section:nth-of-type(1) p:nth-of-type(3){ + font-weight: 500; + +} + +.detailMain a { + color: var(--wit); +} + +.detailMain a:visited { + color: var(--wit); +} + +button:focus-visible{ + border-radius: .3em; + outline: .5em solid var(--text); +} +a:focus-visible { + border-radius: .2em; + outline: .3em solid var(--text); + +} +.detailMain a:focus-visible { + /* background-color: var(--detail); */ + padding: .2em .7em; + border-radius: .2em; + outline: .2em solid var(--wit); + +} +.detailMain section:nth-of-type(2) h3{ +font-size: 2em; +margin: 1em 0; +font-weight: 700; +color: var(--detail); +} + +/* /////////////////////////////liked pagina///////////////////// */ + +.favorites{ + font-size: 3em; + font-weight: 600; + margin-bottom: .5em; + color: var(--detail); + opacity: .5; +} +#likedPhotosContainer{ + display: flex; + flex-wrap: wrap; + gap: 1em; + align-items: stretch; +} + +#likedPhotosContainer > li { + display: flex; + flex-direction: column; + align-items: start; + padding: 1em; + border-radius:2em ; + + + width: min(15em, 20%); + flex-grow: 1; + background: rgb(142, 126, 167); + background: radial-gradient(circle,rgb(187, 175, 205) 0%,rgb(142, 126, 167) 100%); + max-width: 50%; + &.landscape { + width: max(17em, 40%); + } +} +#likedPhotosContainer a{ + text-decoration: none; + color: var(--text); +} +#likedPhotosContainer a p:first-of-type{ + font-size:1.4em; + margin: 1em 0; + color: var(--text); +} +#likedPhotosContainer a p:last-of-type{ + font-size: 2.5em; + font-weight: 700; + margin-bottom: 1em ; + hyphens: auto; + font-style: italic; + color: var(--wit); +} + +#likedPhotosContainer li img{ + width: 100%; + height: 50vh; + object-fit: cover; + border-radius: 1em; +/* + max-width: 100%; + max-height: 70vh; */ + aspect-ratio: var(--aspect-ratio); +} + + +.likeButton{ + position: relative; + background-color: transparent; + border: none; + height: 4em; + width: 100%; +} + +.likeButton svg{ + position: absolute; + bottom: 0; + right: 0; + height: 4em; + width: 4em; +} + + + +@media (max-width:600px) { + #photoContainer{ + gap: 1em; + } + dialog { + width: 85vw; + height:80vh; + padding: 1em; + } + + #moreDetailsOver { + display: flex; + flex-direction: column; + position: relative; + padding: .5em; + width: 85vw; + gap: 0; + } + + #moreDetailsOver>button:nth-of-type(1) { + position: fixed; + top: 1em; + right: 1em; + } + .details-content{ + padding: .5em; + } + + .details-content h2 { + margin-top: .5em; + } + + .landscape .dialog-image{ + max-width: 100%; + } + + .details-content p:nth-of-type(2) { + margin: .5em 0; + font-size: 3em; + width: 100%; + font-weight: 800; + font-style: italic; + } + + .details-content ul { + margin: 0.5rem 0; + padding-left: 0; + } + + .details-content button { + bottom: 35%; + right: 1em; + + } + .dialog-image { + max-width: 100%; + + } + main{ + margin: 1em; + } + .detailMain{ + margin: 0; + } +} + + +@media (min-width:601px) and (max-width:1000px) { +.landscape #moreDetailsOver { + display: flex; + flex-direction: column; + position: relative; + padding: 0; + /* width: 85vw; */ + gap: 0; + } + .landscape .dialog-image{ + max-width: 80%; + align-self: center; + } + + #moreDetailsOver p:nth-of-type(2){ + font-size: 2.5em; + } + + .detailMain section:nth-of-type(1) img{ + width: 10em; + height: 10em; + } + + .detailMain section:nth-of-type(1) h1{ + font-size:1.5em ; + } + .detailMain section:nth-of-type(1)>div> p{ + font-size:1.1em ; + } + .detailMain ul{ + max-width: 100%; + } +} + +@media (max-width:800px){ + .detailMain section:nth-of-type(1){ + flex-direction: column; + gap: .5em; + width: 95%; + } + .detailMain section:nth-of-type(1) img { + align-self: start ; + } + .detailMain section:nth-of-type(1) div{ + max-width: 100%; + } + .detailMain section:nth-of-type(1) div p a{ + flex-wrap: wrap; + hyphens: auto; + } + .detailMain section:nth-of-type(1) ul{ + flex-wrap: wrap; + } +} \ No newline at end of file diff --git a/server/views/index.liquid b/server/views/index.liquid index 0dc52f4..8e02fe5 100644 --- a/server/views/index.liquid +++ b/server/views/index.liquid @@ -2,16 +2,44 @@ {% block content %} -

{{ title }}

+