diff --git a/greenwood.config.js b/greenwood.config.js index b4371ef..7f61308 100644 --- a/greenwood.config.js +++ b/greenwood.config.js @@ -1,7 +1,9 @@ import { greenwoodPluginAdapterVercel } from '@greenwood/plugin-adapter-vercel'; +import { greenwoodPluginImportCss } from '@greenwood/plugin-import-css'; export default { plugins: [ + greenwoodPluginImportCss(), greenwoodPluginAdapterVercel() ] }; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index b64d35b..f324d84 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,22 +12,22 @@ "htmx.org": "^1.9.4" }, "devDependencies": { - "@greenwood/cli": "~0.29.0-alpha.4", - "@greenwood/plugin-adapter-vercel": "~0.29.0-alpha.4", + "@greenwood/cli": "~0.29.0", + "@greenwood/plugin-adapter-vercel": "~0.29.0", + "@greenwood/plugin-import-css": "~0.29.0", "rimraf": "^5.0.1" } }, "node_modules/@greenwood/cli": { - "version": "0.29.0-alpha.4", - "resolved": "https://registry.npmjs.org/@greenwood/cli/-/cli-0.29.0-alpha.4.tgz", - "integrity": "sha512-JJ7j8SgcX0fiMsC3SZzhCaYhKr2N7upWwdw6tSkHW4G5VbcVgW+vRPN3WBTXObB4RCmb5MAF8B0rkor2/5TB1Q==", + "version": "0.29.0", + "resolved": "https://registry.npmjs.org/@greenwood/cli/-/cli-0.29.0.tgz", + "integrity": "sha512-/mqXakf4ciN7j3O7iErp5xJJaginfDlL+F7oPaGo6ndqwgkPArFCrXa/C/svbmuiaymDCDCRjaAwmzsmMhHVPA==", "dev": true, "dependencies": { "@rollup/plugin-commonjs": "^21.0.0", "@rollup/plugin-node-resolve": "^13.0.0", "@rollup/plugin-replace": "^2.3.4", "@rollup/plugin-terser": "^0.1.0", - "@web/rollup-plugin-import-meta-assets": "^1.0.0", "acorn": "^8.0.1", "acorn-walk": "^8.0.0", "commander": "^2.20.0", @@ -46,7 +46,7 @@ "remark-rehype": "^7.0.0", "rollup": "^2.58.0", "unified": "^9.2.0", - "wc-compiler": "~0.8.0" + "wc-compiler": "~0.9.0" }, "bin": { "greenwood": "src/index.js" @@ -56,14 +56,23 @@ } }, "node_modules/@greenwood/plugin-adapter-vercel": { - "version": "0.29.0-alpha.4", - "resolved": "https://registry.npmjs.org/@greenwood/plugin-adapter-vercel/-/plugin-adapter-vercel-0.29.0-alpha.4.tgz", - "integrity": "sha512-ru86tXEUO5jB3Slfv+3Tk1T0keHWUOZsDTKlfUIX2/pfqsSKQG2Yd2iDSARBgUlE/JUKFjjmNCpCWgcGcTQsVg==", + "version": "0.29.0", + "resolved": "https://registry.npmjs.org/@greenwood/plugin-adapter-vercel/-/plugin-adapter-vercel-0.29.0.tgz", + "integrity": "sha512-SdG66AOddsZYjU/QuxodwLi/m7sSgoIWeUqyskLSEB7CCxgDDCJvVql4Vn1Z8JBfxJb+SBTc+MeLZUhiJiiclA==", "dev": true, "peerDependencies": { "@greenwood/cli": "^0.28.0" } }, + "node_modules/@greenwood/plugin-import-css": { + "version": "0.29.0", + "resolved": "https://registry.npmjs.org/@greenwood/plugin-import-css/-/plugin-import-css-0.29.0.tgz", + "integrity": "sha512-2FMk3qs8umOuR4bb4xSuW1bRGV1Pk1QS1QY6sk5BNhOIO5+ZphtuIrVTJUcfxHzLw4BBOG4Xws6LJCs5XfNfjw==", + "dev": true, + "peerDependencies": { + "@greenwood/cli": "^0.4.0" + } + }, "node_modules/@isaacs/cliui": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", @@ -468,60 +477,6 @@ "integrity": "sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g==", "dev": true }, - "node_modules/@web/rollup-plugin-import-meta-assets": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/@web/rollup-plugin-import-meta-assets/-/rollup-plugin-import-meta-assets-1.0.8.tgz", - "integrity": "sha512-lLIzsd94SwQv/z4eOhOECCTzQBZRT20wmmAQaP/wFJZfRgQNWaf3SxMClRlmw1Kuo2x6LdSXocnocUyKcmKNOg==", - "dev": true, - "dependencies": { - "@rollup/pluginutils": "^5.0.2", - "estree-walker": "^2.0.2", - "magic-string": "^0.30.0" - }, - "engines": { - "node": ">=10.0.0" - } - }, - "node_modules/@web/rollup-plugin-import-meta-assets/node_modules/@rollup/pluginutils": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz", - "integrity": "sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==", - "dev": true, - "dependencies": { - "@types/estree": "^1.0.0", - "estree-walker": "^2.0.2", - "picomatch": "^2.3.1" - }, - "engines": { - "node": ">=14.0.0" - }, - "peerDependencies": { - "rollup": "^1.20.0||^2.0.0||^3.0.0" - }, - "peerDependenciesMeta": { - "rollup": { - "optional": true - } - } - }, - "node_modules/@web/rollup-plugin-import-meta-assets/node_modules/@types/estree": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz", - "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==", - "dev": true - }, - "node_modules/@web/rollup-plugin-import-meta-assets/node_modules/magic-string": { - "version": "0.30.2", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.2.tgz", - "integrity": "sha512-lNZdu7pewtq/ZvWUp9Wpf/x7WzMTsR26TWV03BRZrXFsv+BI6dy8RAiKgm1uM/kyR0rCfUcqvOlXKG66KhIGug==", - "dev": true, - "dependencies": { - "@jridgewell/sourcemap-codec": "^1.4.15" - }, - "engines": { - "node": ">=12" - } - }, "node_modules/accepts": { "version": "1.3.8", "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz", @@ -557,9 +512,9 @@ } }, "node_modules/acorn-walk": { - "version": "8.2.0", - "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz", - "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==", + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.0.tgz", + "integrity": "sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA==", "dev": true, "engines": { "node": ">=0.4.0" @@ -3578,9 +3533,9 @@ } }, "node_modules/wc-compiler": { - "version": "0.8.0", - "resolved": "https://registry.npmjs.org/wc-compiler/-/wc-compiler-0.8.0.tgz", - "integrity": "sha512-vkq9wcpMOTsIDgPvQYso01fQZTD2iGzKTVhO6AbbAz5bE8WUOvNAN9sPy56An26sVmMl/KNL2St5rVmFQ/lw9w==", + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/wc-compiler/-/wc-compiler-0.9.0.tgz", + "integrity": "sha512-AmpkRrOVPP0SHUF/9Y9BEiHejw3K+58cjLDxj/cN3w5ptJ3ZKEICDn7v+gEmj+d7XDwwb/8PjeEzmBWjo877ew==", "dev": true, "dependencies": { "acorn": "^8.7.0", @@ -3776,16 +3731,15 @@ }, "dependencies": { "@greenwood/cli": { - "version": "0.29.0-alpha.4", - "resolved": "https://registry.npmjs.org/@greenwood/cli/-/cli-0.29.0-alpha.4.tgz", - "integrity": "sha512-JJ7j8SgcX0fiMsC3SZzhCaYhKr2N7upWwdw6tSkHW4G5VbcVgW+vRPN3WBTXObB4RCmb5MAF8B0rkor2/5TB1Q==", + "version": "0.29.0", + "resolved": "https://registry.npmjs.org/@greenwood/cli/-/cli-0.29.0.tgz", + "integrity": "sha512-/mqXakf4ciN7j3O7iErp5xJJaginfDlL+F7oPaGo6ndqwgkPArFCrXa/C/svbmuiaymDCDCRjaAwmzsmMhHVPA==", "dev": true, "requires": { "@rollup/plugin-commonjs": "^21.0.0", "@rollup/plugin-node-resolve": "^13.0.0", "@rollup/plugin-replace": "^2.3.4", "@rollup/plugin-terser": "^0.1.0", - "@web/rollup-plugin-import-meta-assets": "^1.0.0", "acorn": "^8.0.1", "acorn-walk": "^8.0.0", "commander": "^2.20.0", @@ -3804,13 +3758,19 @@ "remark-rehype": "^7.0.0", "rollup": "^2.58.0", "unified": "^9.2.0", - "wc-compiler": "~0.8.0" + "wc-compiler": "~0.9.0" } }, "@greenwood/plugin-adapter-vercel": { - "version": "0.29.0-alpha.4", - "resolved": "https://registry.npmjs.org/@greenwood/plugin-adapter-vercel/-/plugin-adapter-vercel-0.29.0-alpha.4.tgz", - "integrity": "sha512-ru86tXEUO5jB3Slfv+3Tk1T0keHWUOZsDTKlfUIX2/pfqsSKQG2Yd2iDSARBgUlE/JUKFjjmNCpCWgcGcTQsVg==", + "version": "0.29.0", + "resolved": "https://registry.npmjs.org/@greenwood/plugin-adapter-vercel/-/plugin-adapter-vercel-0.29.0.tgz", + "integrity": "sha512-SdG66AOddsZYjU/QuxodwLi/m7sSgoIWeUqyskLSEB7CCxgDDCJvVql4Vn1Z8JBfxJb+SBTc+MeLZUhiJiiclA==", + "dev": true + }, + "@greenwood/plugin-import-css": { + "version": "0.29.0", + "resolved": "https://registry.npmjs.org/@greenwood/plugin-import-css/-/plugin-import-css-0.29.0.tgz", + "integrity": "sha512-2FMk3qs8umOuR4bb4xSuW1bRGV1Pk1QS1QY6sk5BNhOIO5+ZphtuIrVTJUcfxHzLw4BBOG4Xws6LJCs5XfNfjw==", "dev": true }, "@isaacs/cliui": { @@ -4172,45 +4132,6 @@ "integrity": "sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g==", "dev": true }, - "@web/rollup-plugin-import-meta-assets": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/@web/rollup-plugin-import-meta-assets/-/rollup-plugin-import-meta-assets-1.0.8.tgz", - "integrity": "sha512-lLIzsd94SwQv/z4eOhOECCTzQBZRT20wmmAQaP/wFJZfRgQNWaf3SxMClRlmw1Kuo2x6LdSXocnocUyKcmKNOg==", - "dev": true, - "requires": { - "@rollup/pluginutils": "^5.0.2", - "estree-walker": "^2.0.2", - "magic-string": "^0.30.0" - }, - "dependencies": { - "@rollup/pluginutils": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz", - "integrity": "sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==", - "dev": true, - "requires": { - "@types/estree": "^1.0.0", - "estree-walker": "^2.0.2", - "picomatch": "^2.3.1" - } - }, - "@types/estree": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz", - "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==", - "dev": true - }, - "magic-string": { - "version": "0.30.2", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.2.tgz", - "integrity": "sha512-lNZdu7pewtq/ZvWUp9Wpf/x7WzMTsR26TWV03BRZrXFsv+BI6dy8RAiKgm1uM/kyR0rCfUcqvOlXKG66KhIGug==", - "dev": true, - "requires": { - "@jridgewell/sourcemap-codec": "^1.4.15" - } - } - } - }, "accepts": { "version": "1.3.8", "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz", @@ -4234,9 +4155,9 @@ "dev": true }, "acorn-walk": { - "version": "8.2.0", - "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz", - "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==", + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.0.tgz", + "integrity": "sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA==", "dev": true }, "ansi-red": { @@ -6467,9 +6388,9 @@ } }, "wc-compiler": { - "version": "0.8.0", - "resolved": "https://registry.npmjs.org/wc-compiler/-/wc-compiler-0.8.0.tgz", - "integrity": "sha512-vkq9wcpMOTsIDgPvQYso01fQZTD2iGzKTVhO6AbbAz5bE8WUOvNAN9sPy56An26sVmMl/KNL2St5rVmFQ/lw9w==", + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/wc-compiler/-/wc-compiler-0.9.0.tgz", + "integrity": "sha512-AmpkRrOVPP0SHUF/9Y9BEiHejw3K+58cjLDxj/cN3w5ptJ3ZKEICDn7v+gEmj+d7XDwwb/8PjeEzmBWjo877ew==", "dev": true, "requires": { "acorn": "^8.7.0", diff --git a/package.json b/package.json index 7e38622..e68beac 100644 --- a/package.json +++ b/package.json @@ -21,17 +21,18 @@ ], "scripts": { "clean": "rimraf .greenwood public .vercel", - "dev": "greenwood develop", - "build": "greenwood build", - "serve": "npm run clean && npm run build && greenwood serve", + "dev": "node --experimental-loader ./node_modules/@greenwood/cli/src/loader.js ./node_modules/.bin/greenwood develop", + "build": "node --experimental-loader ./node_modules/@greenwood/cli/src/loader.js ./node_modules/.bin/greenwood build", + "serve": "npm run clean && npm run build && node --experimental-loader ./node_modules/@greenwood/cli/src/loader.js ./node_modules/.bin/greenwood serve", "start": "npm run serve" }, "dependencies": { "htmx.org": "^1.9.4" }, "devDependencies": { - "@greenwood/cli": "~0.29.0-alpha.4", - "@greenwood/plugin-adapter-vercel": "~0.29.0-alpha.4", + "@greenwood/cli": "~0.29.0", + "@greenwood/plugin-adapter-vercel": "~0.29.0", + "@greenwood/plugin-import-css": "~0.29.0", "rimraf": "^5.0.1" } } diff --git a/src/components/card.css b/src/components/card.css new file mode 100644 index 0000000..db18c7c --- /dev/null +++ b/src/components/card.css @@ -0,0 +1,44 @@ +div { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + border: 1px solid #818181; + width: fit-content; + border-radius: 10px; + padding: 2rem 1rem; + height: 680px; + justify-content: space-between; + background-color: #fff; + overflow-x: hidden; +} + +button { + background: var(--color-accent); + color: var(--color-white); + padding: 1rem 2rem; + border: 0; + font-size: 1rem; + border-radius: 5px; + cursor: pointer; +} + +img { + max-width: 500px; + min-width: 500px; + width: 100%; +} + +h3 { + font-size: 1.85rem; +} + +@media(max-width: 768px) { + img { + max-width: 300px; + min-width: 300px; + } + div { + height: 500px; + } +} \ No newline at end of file diff --git a/src/components/card.js b/src/components/card.js index f27b1a3..faf3e72 100644 --- a/src/components/card.js +++ b/src/components/card.js @@ -1,3 +1,5 @@ +import styles from './card.css'; + export default class Card extends HTMLElement { selectItem() { @@ -12,47 +14,7 @@ export default class Card extends HTMLElement { template.innerHTML = `

${title}

@@ -66,4 +28,4 @@ export default class Card extends HTMLElement { } } -customElements.define('app-card', Card); +customElements.define('app-card', Card); \ No newline at end of file