This is a solution to the Product preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover and focus states for interactive elements
- Solution URL: Source code
- Live Site URL: Live site
- Vite - Next Generation Frontend Tooling
-
Change base dir for vite - By default the base dir in vite is set to "/". Due to the hosting environment (GitHub Pages), root hosting is resticted to only one repo (the portfolio repo). Other repos are hosted one level down the root. This caused links set with their base dir to "/", to break.
- CUBE CSS - Utility
- Change the base dir for vite - This allowd me to solve the issue of broken links that have their base dir set to the root of the domain.
- Host dist and src folder in one repo without overlap and deploy dist folder - This allowed me to have two worktrees in the same repo. One tracking the source code and the other tracking the dist folder. The worktree tracking the dist folder was used for GitHub Pages
- Frontend Mentor - @SilvanosEric