From d8a55817fa69d75e822ba969765c43a1ac058b9e Mon Sep 17 00:00:00 2001 From: Artem Date: Thu, 6 Apr 2023 17:21:04 +0200 Subject: [PATCH] svelte much wow --- astro.config.mjs | 6 +- package.json | 2 + pnpm-lock.yaml | 105 ++++++++++++++++++- src/components/Centerpiece.astro | 2 +- src/components/{Heart.astro => Heart.svelte} | 65 ++++++++---- src/pages/404.astro | 1 - src/pages/index.astro | 4 +- svelte.config.js | 5 + 8 files changed, 162 insertions(+), 28 deletions(-) rename src/components/{Heart.astro => Heart.svelte} (54%) create mode 100644 svelte.config.js diff --git a/astro.config.mjs b/astro.config.mjs index 39d964c..61f9ff8 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,9 +1,11 @@ import { defineConfig } from 'astro/config'; -// https://astro.build/config import tailwind from "@astrojs/tailwind"; +// https://astro.build/config +import svelte from "@astrojs/svelte"; + // https://astro.build/config export default defineConfig({ - integrations: [tailwind()] + integrations: [tailwind(), svelte()] }); \ No newline at end of file diff --git a/package.json b/package.json index b71553c..190becc 100644 --- a/package.json +++ b/package.json @@ -11,9 +11,11 @@ "push": "pnpm build && wsl ./deploy.sh" }, "dependencies": { + "@astrojs/svelte": "^2.1.0", "@astrojs/tailwind": "^3.1.1", "astro": "^2.1.8", "astro-icon": "^0.8.0", + "svelte": "^3.54.0", "tailwindcss": "^3.3.1" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5569f0a..4b44efa 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,6 +1,9 @@ lockfileVersion: '6.0' dependencies: + '@astrojs/svelte': + specifier: ^2.1.0 + version: 2.1.0(astro@2.1.8)(svelte@3.58.0)(typescript@4.9.5)(vite@4.1.4) '@astrojs/tailwind': specifier: ^3.1.1 version: 3.1.1(astro@2.1.8)(tailwindcss@3.3.1) @@ -10,6 +13,9 @@ dependencies: astro-icon: specifier: ^0.8.0 version: 0.8.0 + svelte: + specifier: ^3.54.0 + version: 3.58.0 tailwindcss: specifier: ^3.3.1 version: 3.3.1(postcss@8.4.21) @@ -80,6 +86,23 @@ packages: prismjs: 1.29.0 dev: false + /@astrojs/svelte@2.1.0(astro@2.1.8)(svelte@3.58.0)(typescript@4.9.5)(vite@4.1.4): + resolution: {integrity: sha512-upfkscrNuZbQvqVB5EG38FPJCgHCxO/LOJLAap75rO/++c1T7ztbVru4uSYVBRJkzTDuH3TS52T8kFTVgHXx/g==} + engines: {node: '>=16.12.0'} + peerDependencies: + astro: ^2.1.0 + svelte: ^3.54.0 + dependencies: + '@sveltejs/vite-plugin-svelte': 2.0.4(svelte@3.58.0)(vite@4.1.4) + astro: 2.1.8 + svelte: 3.58.0 + svelte2tsx: 0.5.23(svelte@3.58.0)(typescript@4.9.5) + transitivePeerDependencies: + - supports-color + - typescript + - vite + dev: false + /@astrojs/tailwind@3.1.1(astro@2.1.8)(tailwindcss@3.3.1): resolution: {integrity: sha512-Wx/ZtVnmtfqHWGVzvUEYZm8rufVKVgDIef0q6fzwUxoT1EpTTwBkTbpnzooogewMLOh2eTscasGe3Ih2HC1wVA==} peerDependencies: @@ -641,10 +664,29 @@ packages: /@proload/core@0.3.3: resolution: {integrity: sha512-7dAFWsIK84C90AMl24+N/ProHKm4iw0akcnoKjRvbfHifJZBLhaDsDus1QJmhG12lXj4e/uB/8mB/0aduCW+NQ==} dependencies: - deepmerge: 4.3.0 + deepmerge: 4.3.1 escalade: 3.1.1 dev: false + /@sveltejs/vite-plugin-svelte@2.0.4(svelte@3.58.0)(vite@4.1.4): + resolution: {integrity: sha512-pjqhW00KwK2uzDGEr+yJBwut+D+4XfJO/+bHHdHzPRXn9+1Jeq5JcFHyrUiYaXgHtyhX0RsllCTm4ssAx4ZY7Q==} + engines: {node: ^14.18.0 || >= 16} + peerDependencies: + svelte: ^3.54.0 + vite: ^4.0.0 + dependencies: + debug: 4.3.4 + deepmerge: 4.3.1 + kleur: 4.1.5 + magic-string: 0.30.0 + svelte: 3.58.0 + svelte-hmr: 0.15.1(svelte@3.58.0) + vite: 4.1.4 + vitefu: 0.2.4(vite@4.1.4) + transitivePeerDependencies: + - supports-color + dev: false + /@trysound/sax@0.2.0: resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==} engines: {node: '>=10.13.0'} @@ -1205,13 +1247,17 @@ packages: character-entities: 2.0.2 dev: false + /dedent-js@1.0.1: + resolution: {integrity: sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==} + dev: false + /deepmerge-ts@4.3.0: resolution: {integrity: sha512-if3ZYdkD2dClhnXR5reKtG98cwyaRT1NeugQoAPTTfsOpV9kqyeiBF9Qa5RHjemb3KzD5ulqygv6ED3t5j9eJw==} engines: {node: '>=12.4.0'} dev: false - /deepmerge@4.3.0: - resolution: {integrity: sha512-z2wJZXrmeHdvYJp/Ux55wIjqo81G5Bp4c+oELTW+7ar6SogWHajt5a9gO3s3IDaGSAXjDk0vlQKN3rms8ab3og==} + /deepmerge@4.3.1: + resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==} engines: {node: '>=0.10.0'} dev: false @@ -1866,6 +1912,12 @@ packages: resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==} dev: false + /lower-case@2.0.2: + resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==} + dependencies: + tslib: 2.5.0 + dev: false + /lru-cache@5.1.1: resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==} dependencies: @@ -1886,6 +1938,13 @@ packages: '@jridgewell/sourcemap-codec': 1.4.14 dev: false + /magic-string@0.30.0: + resolution: {integrity: sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==} + engines: {node: '>=12'} + dependencies: + '@jridgewell/sourcemap-codec': 1.4.14 + dev: false + /markdown-table@3.0.3: resolution: {integrity: sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==} dev: false @@ -2342,6 +2401,13 @@ packages: '@types/nlcst': 1.0.0 dev: false + /no-case@3.0.4: + resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==} + dependencies: + lower-case: 2.0.2 + tslib: 2.5.0 + dev: false + /node-domexception@1.0.0: resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==} engines: {node: '>=10.5.0'} @@ -2482,6 +2548,13 @@ packages: resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==} dev: false + /pascal-case@3.1.2: + resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==} + dependencies: + no-case: 3.0.4 + tslib: 2.5.0 + dev: false + /path-exists@4.0.0: resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==} engines: {node: '>=8'} @@ -3079,6 +3152,32 @@ packages: engines: {node: '>= 0.4'} dev: false + /svelte-hmr@0.15.1(svelte@3.58.0): + resolution: {integrity: sha512-BiKB4RZ8YSwRKCNVdNxK/GfY+r4Kjgp9jCLEy0DuqAKfmQtpL38cQK3afdpjw4sqSs4PLi3jIPJIFp259NkZtA==} + engines: {node: ^12.20 || ^14.13.1 || >= 16} + peerDependencies: + svelte: '>=3.19.0' + dependencies: + svelte: 3.58.0 + dev: false + + /svelte2tsx@0.5.23(svelte@3.58.0)(typescript@4.9.5): + resolution: {integrity: sha512-jYFnugTQRFmUpvLXPQrKzVYcW5ErT+0QCxg027Zx9BuvYefMZFuoBSTDYe7viPEFGrPPiLgT2m7f5n9khE7f7Q==} + peerDependencies: + svelte: ^3.24 + typescript: ^4.1.2 + dependencies: + dedent-js: 1.0.1 + pascal-case: 3.1.2 + svelte: 3.58.0 + typescript: 4.9.5 + dev: false + + /svelte@3.58.0: + resolution: {integrity: sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==} + engines: {node: '>= 8'} + dev: false + /svgo@2.8.0: resolution: {integrity: sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==} engines: {node: '>=10.13.0'} diff --git a/src/components/Centerpiece.astro b/src/components/Centerpiece.astro index 4a6df22..06b4155 100644 --- a/src/components/Centerpiece.astro +++ b/src/components/Centerpiece.astro @@ -7,7 +7,7 @@ > 👋

-

+

a laid-back software tinkerer

diff --git a/src/components/Heart.astro b/src/components/Heart.svelte similarity index 54% rename from src/components/Heart.astro rename to src/components/Heart.svelte index dc22f63..a3d34e6 100644 --- a/src/components/Heart.astro +++ b/src/components/Heart.svelte @@ -1,6 +1,32 @@ - - + let heart: SVGElement; + let colors = ["#f472b6", "#c084fc", "#818cf8", "#38bdf8", "#2dd4bf", "#4ade80", "#facc15", "#fb923c"]; + let currentColor = "#f472b6"; + + function handleClick() { + let choice = currentColor; + while (choice === currentColor) { + choice = colors[Math.floor(Math.random() * colors.length)]; + } + heart.style.fill = currentColor = choice; + } + + + + + C438.744,208.616,438.744,151.275,404.169,116.034z" + /> \ No newline at end of file + @keyframes float { + 0% { + transform: translatey(0px); + } + 50% { + transform: translatey(-30px); + } + 100% { + transform: translatey(0px); + } + } + diff --git a/src/pages/404.astro b/src/pages/404.astro index d675612..99d8558 100644 --- a/src/pages/404.astro +++ b/src/pages/404.astro @@ -1,5 +1,4 @@ --- -import Heart from "../components/Heart.astro"; import Kotori from "../components/Kotori.astro"; import Prompt from "../components/Prompt.astro"; import Stripe from "../components/Stripe.astro"; diff --git a/src/pages/index.astro b/src/pages/index.astro index 60903d4..868ef3d 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -3,7 +3,7 @@ import Layout from "../layouts/Layout.astro"; import Prompt from "../components/Prompt.astro"; import Centerpiece from "../components/Centerpiece.astro"; import Icons from "../components/Icons.astro"; -import Heart from "../components/Heart.astro"; +import Heart from "../components/Heart.svelte"; import Stripe from "../components/Stripe.astro"; --- @@ -12,5 +12,5 @@ import Stripe from "../components/Stripe.astro"; - + \ No newline at end of file diff --git a/svelte.config.js b/svelte.config.js new file mode 100644 index 0000000..cbaee33 --- /dev/null +++ b/svelte.config.js @@ -0,0 +1,5 @@ +import { vitePreprocess } from '@astrojs/svelte'; + +export default { + preprocess: vitePreprocess(), +};