Component Rendering Key

Author: haydncomley

src/example/src/app.ts

@@ -4,6 +4,7 @@ import { ThemeWidget } from "./components/theme-widget";
 import { CalloutSection } from "./sections/callout";
 import { Footer } from "./sections/footer";
 import { HeroSection } from "./sections/hero";
+import { ProjectShowcaseSection } from "./sections/project-showcase";
 
 export const globalStore = store({
     appName: 'haydn',
@@ -19,6 +20,8 @@ export const myApp = app(() => {
 
                 ${HeroSection()}
                 ${CalloutSection({ header: 'Hello World', subheader: 'This is some more content' })}
+                ${ProjectShowcaseSection()}
+
                 ${HeroSection()}
 
                 ${Footer()}

src/example/src/components/link.module.scss

@@ -58,6 +58,7 @@
         text-decoration-style: wavy;
         text-decoration-color: rgb(var(--theme-secondary));
         text-decoration-skip-ink: none;
+        text-decoration-thickness: .1rem;
         transform: translateY(-50%);
         opacity: 0.75;
         transition: .1s ease;

src/example/src/components/nav.module.scss

@@ -10,6 +10,7 @@
     border: .2rem solid rgb(var(--theme-primary));
     z-index: 5;
     display: flex;
+    transition: .2s ease;
 
     @include theme.Mobile {
         right: 0;
@@ -30,10 +31,14 @@
             transition: .2s ease;
         }
 
-        &[data-is-open="true"]::after {
-            background-color: rgba(0,0,0, .5);
-            backdrop-filter: blur(0.2rem);
-            pointer-events: auto;
+        &[data-is-open="true"] {
+            border-color: transparent;
+
+            &::after {
+                background-color: rgba(var(--theme-background), .5);
+                backdrop-filter: blur(0.2rem);
+                pointer-events: auto;
+            }
         }
     }
 }
@@ -49,19 +54,49 @@
     border-radius: 50%;
     -webkit-tap-highlight-color: transparent;
     z-index: 1;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     svg {
         height: 100%;
         width: 100%;
+        transition: .2s ease;
 
         path {
             stroke: rgb(var(--theme-contrast));
+            fill: rgb(var(--theme-contrast));
+        }
+
+        &:nth-child(2) {
+            position: absolute;
+            opacity: 0;
         }
     }
 
     @include theme.NotMobile {
         display: none
     };
+
+    [data-is-open="true"] & {
+        svg {
+            transform: rotateZ(90deg);
+
+            &:nth-child(1) {
+                opacity: 0;
+            }
+
+            &:nth-child(2) {
+                opacity: 1;
+            }
+
+            path {
+                stroke: rgb(var(--theme-primary));
+                fill: rgb(var(--theme-primary));
+            }
+        }
+    }
 }
 
 .navContent {

src/example/src/components/nav.ts

@@ -19,6 +19,10 @@ export const Navigation = component(() => {
                     <path d="M4 12L20 12" stroke-width="2" stroke-linecap="round"/>
                     <path d="M4 6L20 6" stroke-width="2" stroke-linecap="round"/>
                 </svg>
+
+                <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"/>
+                </svg>
             </button>
 
             <div class=${styles.navContent}>

src/example/src/components/project-card.module.scss

@@ -1,8 +1,8 @@
 .projectCard {
     padding: 1rem;
     border-radius: 1rem;
-    background-color: rgba(var(--theme-contrast), .1);
-    border: .2rem solid rgba(var(--theme-contrast), .1);
+    background-color: rgba(var(--theme-background), 1);
+    outline: .15rem solid rgba(var(--theme-secondary), 1);
     backdrop-filter: blur(.5rem);
     transform-origin: 50% 50%;
     transition: .1s ease;
@@ -11,27 +11,19 @@
     aspect-ratio: 16 / 9;
     display: flex;
     min-height: 8rem;
-
-    img {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        border-radius: 1rem;
-        -webkit-mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.5));
-        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0)  25%, rgba(0, 0, 0, 0.5));
-        transition: .1s ease;
-        opacity: 0.5;
-    }
+    overflow: hidden;
+    flex-shrink: 0;
 
     &:hover {
-        border: .2rem solid rgba(var(--theme-contrast), .25);
-        transform: translateY(-.1rem) scale(1.05);
+        outline: .2rem solid rgba(var(--theme-primary), 1);
+        transform: translateY(-.1rem) scale(1.03);
+
+        .projectCardFeature {
+            transform: scale(1.1);
+        }
 
-        img {
-           opacity: 1;
+        .projectCardBody {
+            color: rgba(var(--theme-contrast), 1);
         }
     }
 }
@@ -43,16 +35,34 @@
 }
 
 .projectCardTitle {
-    font-size: 1.2rem;
+    font-size: 1.15rem;
     font-weight: 600;
 }
 
 .projectCardBody {
     font-size: 1rem;
     font-weight: 400;
-    color: rgb(var(--theme-contrast), .75);
+    color: rgba(var(--theme-contrast), .75);
 }
 
 .projectCardFooter {
     margin-top: auto;
+}
+
+.projectCardFeature {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+    margin-left: 1rem;
+    transition: .2s ease;
+
+    img {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 1rem;
+        object-fit: cover;
+    }
 }

src/example/src/components/project-card.ts

@@ -1,15 +1,12 @@
 import { component, render } from "../../../nice";
-import { globalStore } from "../app";
 
 import styles from './project-card.module.scss'
 
 export const ProjectCard = component(() => {
-    const name = globalStore('appName');
+    const url = "https://images.unsplash.com/photo-1682687221323-6ce2dbc803ab?q=80&w=1287&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";
 
     return render`
         <article class=${styles.projectCard}>
-            <img src="https://images.unsplash.com/photo-1682687221323-6ce2dbc803ab?q=80&w=1287&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-
             <div class=${styles.projectCardContent}>
                 <p class=${styles.projectCardTitle}>OutRanked</p>
                 <p class=${styles.projectCardBody}>Mobile App</p>
@@ -18,6 +15,10 @@ export const ProjectCard = component(() => {
                     <p class=${styles.projectCardBody}>React • Ionic</p>
                 </div>
             </div>
+
+            <div class=${styles.projectCardFeature}>
+                <img src=${url} />
+            </div>
         </article>
     `
 });

src/example/src/components/star.module.scss

@@ -12,6 +12,21 @@
     }
 }
 
+@keyframes breathe {
+    0% {
+        transform: scale(0.8) rotateZ(5deg);
+        opacity: 0.7;
+    }
+    50% {
+        transform: scale(1.2) rotateZ(-5deg);
+        opacity: 1;
+    }
+    100% {
+        transform: scale(0.8) rotateZ(5deg);
+        opacity: 0.7;
+    }
+}
+
 .star {
     position: absolute;
     height: 2rem;
@@ -27,52 +42,71 @@
         margin-top: -.5rem;
         filter: drop-shadow(0 0 0.5rem rgb(var(--theme-primary), .5));
     }
-    
-    &::after {
-        content: '';
-        position: absolute;
-        transform-origin: 50% 50%;
-        top: 0;
-        left: 0;
-        width: 100%;
+
+    span {
         height: 100%;
-        background: rgb(var(--theme-primary));
-        animation: burstIn 0.5s ease forwards;
+        width: 100%;
+        display: block;
+        animation: 3s infinite breathe;
+
+        &::after {
+            content: '';
+            position: absolute;
+            transform-origin: 50% 50%;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgb(var(--theme-primary));
+            animation: burstIn 0.5s ease forwards;
+        }
     }
 
-    &.square::after {
+    &.square>span::after {
         border-radius: 0;
     }
 
-    &.circle::after {
+    &.circle>span::after {
         border-radius: 50%;
     }
 
-    &.triangle::after {
+    &.triangle>span::after {
         clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
     }
 
-    &.burst::after {
+    &.burst>span::after {
         clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
     }
 
-    &:not(:last-child)::after {
-        animation: none;
-    }
-
     &:nth-child(2n) {
         opacity: 1;
+
+        span {
+            animation-delay: -1.5s;
+        }
+    }
+
+    &:nth-child(3n) {
+        span {
+            animation-delay: -.5s;
+        }
+    }
+
+    &:nth-child(5n) {
+        span {
+            animation-delay: -.9s;
+        }
     }
 
     &:nth-child(4n) {
         opacity: 0.25;
     }
 
-    &:nth-child(3n)::after {
+    &:nth-child(3n)>span::after {
         background: rgb(var(--theme-secondary));
     }
 
-    &:nth-child(5n)::after {
+    &:nth-child(5n)>span::after {
         background: linear-gradient(to bottom right, rgb(var(--theme-primary)), rgb(var(--theme-secondary)));
     }
 }

src/example/src/components/star.ts

@@ -29,6 +29,7 @@ const getShape = (num: number) => {
 
 export const Star = component<{
     value: number
+    key?: number
 }>(({
     value,
 }) => {
@@ -44,5 +45,5 @@ export const Star = component<{
 
     const starClass = computed(() => `${getShape(value)} ${styles.star}`, [value]);
 
-    return render`<span class=${starClass} style=${style}></span>`
+    return render`<span class=${starClass} style=${style}><span></span></span>`
 });

src/example/src/pages/index.astro

@@ -8,7 +8,10 @@ import { myApp } from "../app";
   <head>
     <meta charset="utf-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.png" />
-    <meta name="viewport" content="width=device-width" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
     <title>Haydn Comley</title>
   </head>
   <body set:html={myApp!.html} id={myApp!.id!}>