artie/artie.moe
1
0
Fork 0
mirror of https://github.com/artiemis/artie.moe.git synced 2026-02-14 09:01:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

svelte much wow

Browse Source
This commit is contained in:
Artem 2023-04-06 17:21:04 +02:00
parent 6b4c0e5176
commit d8a55817fa
8 changed files with 162 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
astro.config.mjs
View File

@ -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()]
});

2
package.json
View File

@ -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"
}
}

105
pnpm-lock.yaml generated
View File

@ -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'}

2
src/components/Centerpiece.astro
View File

@ -7,7 +7,7 @@
></span
> 👋
</p>
<p class="font-normal lg:text-2xl text-xl xl:mt-4 mt-3 hover:scale-110 transition duration-50">
<p class="font-normal lg:text-2xl text-xl xl:mt-4 mt-2 hover:scale-110 transition duration-50">
a laid-back software tinkerer
</p>
</div>

35
src/components/Heart.astro → src/components/Heart.svelte
View File

@ -1,6 +1,32 @@
<svg class="fixed xl:-bottom-64 -bottom-72 xl:right-20 right-11 xl:w-48 w-28 fill-pink-400 opacity-70 -z-10" fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 490 490" xml:space="preserve">
<path id="XMLID_25_" d="M316.554,108.336c4.553,6.922,2.629,16.223-4.296,20.774c-3.44,2.261-6.677,4.928-9.621,7.929
<script lang="ts">
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;
}
</script>
<svg
bind:this={heart}
on:click={handleClick}
on:keydown={handleClick}
class="hover:opacity-100 transition duration-50 cursor-pointer fixed xl:bottom-10 bottom-7 xl:right-20 right-10 xl:w-48 w-24 fill-pink-400 opacity-70"
fill="#000000"
width="800px"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 490 490"
xml:space="preserve"
>
<path
d="M316.554,108.336c4.553,6.922,2.629,16.223-4.296,20.774c-3.44,2.261-6.677,4.928-9.621,7.929
c-2.938,2.995-6.825,4.497-10.715,4.497c-3.791,0-7.585-1.427-10.506-4.291c-5.917-5.801-6.009-15.298-0.207-21.212
c4.439-4.524,9.338-8.559,14.562-11.992C302.698,99.491,312.002,101.414,316.554,108.336z M447.022,285.869
c-1.506,1.536-148.839,151.704-148.839,151.704C283.994,452.035,265.106,460,245,460s-38.994-7.965-53.183-22.427L42.978,285.869
@ -14,7 +40,8 @@
c-7.746-2.939-16.413,0.953-19.355,8.698c-2.942,7.744,0.953,16.407,8.701,19.348c7.645,2.902,14.521,7.431,20.436,13.459
c23.211,23.658,23.211,62.153,0,85.811l-52.648,53.661c-5.803,5.915-5.711,15.412,0.206,21.212
c2.921,2.863,6.714,4.291,10.506,4.291c3.889,0,7.776-1.502,10.714-4.497l52.648-53.661
C438.744,208.616,438.744,151.275,404.169,116.034z"/>
C438.744,208.616,438.744,151.275,404.169,116.034z"
/>
</svg>
<style>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

1
src/pages/404.astro
View File

@ -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";

4
src/pages/index.astro
View File

@ -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";
<Prompt />
<Centerpiece />
<Icons />
<Heart />
<Heart client:load />
</Layout>

5
svelte.config.js Normal file
View File

@ -0,0 +1,5 @@
import { vitePreprocess } from '@astrojs/svelte';
export default {
preprocess: vitePreprocess(),
};