Merge pull request #53 from tamerhayek/main

feat: added astro page transitions
Roma-JS · Sep 23, 2023 · d630343 · d630343
2 parents f4cdba1 + 6a765b0
commit d630343
Show file tree

Hide file tree

Showing 11 changed files with 64 additions and 38 deletions.
diff --git a/src/components/BrandLogo/BrandLogo.tsx → src/components/BrandLogo/BrandLogo.astro b/src/components/BrandLogo/BrandLogo.tsx → src/components/BrandLogo/BrandLogo.astro
@@ -1,13 +1,19 @@
-import type { JSX } from 'solid-js/jsx-runtime';
+---
 import styles from './styles.module.scss';
 
-export function BrandLogo(props: { class: string }): JSX.Element {
-  return (
-    <svg
+export interface Props {
+  class?: string;
+}
+
+const props = Astro.props;
+
+---
+<svg
       class={props.class}
       viewBox="0 0 224 224"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      transition:name="logo"
     >
       <path
         d="M223.955 0.271484H0.407227V223.819H223.955V0.271484Z"
@@ -86,6 +92,5 @@ export function BrandLogo(props: { class: string }): JSX.Element {
         d="M36.4735 20.6351H26.9253V45.0715H36.4735V20.6351Z"
         fill="#FFB200"
       />
-    </svg>
-  );
-}
+</svg>
+
diff --git a/src/components/SlantedHeader/SlantedHeader.tsx b/src/components/SlantedHeader/SlantedHeader.tsx
@@ -1,4 +1,4 @@
-import { type JSX, Show } from 'solid-js';
+import { type JSX, Show, type JSXElement } from 'solid-js';
 import { splitProps } from 'solid-js';
 import styles from './styles.module.scss';
 import logoSvg from 'media/brand-logo/primary.svg';
@@ -7,6 +7,7 @@ export type SlantedHeaderProps = JSX.IntrinsicElements['header'] & {
   title: string;
   logoHref?: string;
   logoLabel?: string;
+  children: JSXElement;
 };
 
 export function SlantedHeader(props: SlantedHeaderProps): JSX.Element {
@@ -29,24 +30,15 @@ export function SlantedHeader(props: SlantedHeaderProps): JSX.Element {
     return output;
   };
 
-  const imageLogo = () => (
-    <img
-      src={logoSvg.src}
-      alt={'Romajs logo'}
-      class={styles.logo}
-      aria-hidden="true"
-    />
-  );
-
   return (
     <header class={styles.header} classList={classList()} {...otherProps}>
-      <Show when={local.logoHref} fallback={imageLogo()}>
+      <Show when={local.logoHref} fallback={props.children}>
         <a
           class={styles.logoLink}
           href={local.logoHref}
           aria-label={props.logoLabel}
         >
-          {imageLogo()}
+          {props.children}
         </a>
       </Show>
 

diff --git a/src/components/SlantedHeader/styles.module.scss b/src/components/SlantedHeader/styles.module.scss
@@ -17,22 +17,10 @@
   align-items: flex-start;
   gap: var(--slanted-header-gap);
 
-  .logo {
-    width: var(--slanted-header-logo-size);
-    height: var(--slanted-header-logo-size);
-    border-radius: 8px;
-  }
-
   @include br.media-breakpoint-up(lg) {
     padding: 40px 110px 0;
     --slanted-header-height: 212px;
-    --slanted-header-logo-size: 80px;
     --slanted-header-gap: 32px;
-
-    .logo {
-      position: relative;
-      top: -10px;
-    }
   }
 }
 

diff --git a/src/layouts/About.astro b/src/layouts/About.astro
@@ -10,6 +10,8 @@ import { getCanonicalURL, aboutUrlMap, navbarLinks } from 'utils/routing';
 import { SocialLinksList } from '@components/SocialLinksList/SocialLinksList';
 import type { Lang } from '@i18n/types';
 import { getNavbarMessages } from '@components/Navbar/helpers';
+import { ViewTransitions } from 'astro:transitions';
+import BrandLogo from '@components/BrandLogo/BrandLogo.astro';
 
 const { content } = Astro.props;
 
@@ -29,6 +31,7 @@ changeLanguage(lang);
   <head>
     <BaseHead title={title} description={description} />
     <slot name="head" />
+    <ViewTransitions />
   </head>
   <body class={styles.wallpaper}>
     <article class="main">
@@ -43,7 +46,9 @@ changeLanguage(lang);
         title={title}
         logoHref={navbarLinks[lang]?.home}
         logoLabel={'homepage'}
-      />
+      >
+        <BrandLogo class="logo-small" />
+      </SlantedHeader>
       <div class="main-content"><slot /></div>
       <footer><SocialLinksList /></footer>
     </article>

diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
@@ -18,6 +18,8 @@ import {
   type BreadcrumbsProps,
 } from '@components/Breadcrumbs/Breadcrumbs';
 import { l10n } from '@i18n/config';
+import { ViewTransitions } from 'astro:transitions';
+import BrandLogo from '@components/BrandLogo/BrandLogo.astro';
 
 const { content } = Astro.props;
 
@@ -41,6 +43,7 @@ const breadcrumMessages = Object.fromEntries(
   <head>
     <BaseHead title={title} description={description} />
     <slot name="head" />
+    <ViewTransitions />
   </head>
 
   <body class={styles.wallpaper}>
@@ -56,7 +59,9 @@ const breadcrumMessages = Object.fromEntries(
         title={title}
         logoHref={navbarLinks[lang]?.home}
         logoLabel={'homepage'}
-      />
+      >
+        <BrandLogo class="logo-small" />
+      </SlantedHeader>
       <BlogPostInfo
         createdAt={createdAt ?? ''}
         categories={categories}

diff --git a/src/layouts/BlogPostList.astro b/src/layouts/BlogPostList.astro
@@ -20,6 +20,8 @@ import {
   Breadcrumbs,
   type BreadcrumbsProps,
 } from '@components/Breadcrumbs/Breadcrumbs';
+import { ViewTransitions } from 'astro:transitions';
+import BrandLogo from '@components/BrandLogo/BrandLogo.astro';
 
 export interface Props extends BaseHeadProps {
   lang: Lang;
@@ -55,6 +57,7 @@ const breadcrumMessages = Object.fromEntries(
   <head>
     <BaseHead title={title} description={description} />
     <slot name="head" />
+    <ViewTransitions />
   </head>
 
   <body class={styles.wallpaper}>
@@ -70,7 +73,9 @@ const breadcrumMessages = Object.fromEntries(
         title={title}
         logoHref={navbarLinks[lang]?.home}
         logoLabel={'homepage'}
-      />
+      >
+        <BrandLogo class="logo-small" />
+      </SlantedHeader>
       <div class="main-content blog-list-layout">
         <ul class="list-style-none m-0 post-list">
           {

diff --git a/src/layouts/CategoriesList.astro b/src/layouts/CategoriesList.astro
@@ -14,6 +14,8 @@ import { Navbar } from '@components/Navbar/Navbar';
 import BaseHead from '@components/BaseHead.astro';
 import { CategoriesList as CategoriesListComponent } from '@components/CategoriesList/CategoriesList';
 import { getNavbarMessages } from '@components/Navbar/helpers';
+import { ViewTransitions } from 'astro:transitions';
+import BrandLogo from '@components/BrandLogo/BrandLogo.astro';
 
 export interface Props extends BaseHeadProps {
   lang: Lang;
@@ -36,6 +38,7 @@ changeLanguage(lang);
   <head>
     <BaseHead title={title} description={description} />
     <slot name="head" />
+    <ViewTransitions />
   </head>
 
   <body class={styles.wallpaper}>
@@ -51,7 +54,9 @@ changeLanguage(lang);
         title={title}
         logoHref={navbarLinks[lang]?.home}
         logoLabel={'homepage'}
-      />
+      >
+        <BrandLogo class="logo-small" />
+      </SlantedHeader>
       <div class="main-content categories-list-layout">
         <CategoriesListComponent
           class="categories-list"

diff --git a/src/layouts/Hp.astro b/src/layouts/Hp.astro
@@ -3,7 +3,7 @@ import '../styles/main.scss';
 import styles from '../styles/wallpaper.module.scss';
 import '../styles/layouts/hp.scss';
 import BaseHead from '@components/BaseHead.astro';
-import { BrandLogo } from '@components/BrandLogo/BrandLogo';
+import BrandLogo  from '@components/BrandLogo/BrandLogo.astro';
 import { BuildInfo } from '@components/BuildInfo/BuildInfo';
 import type { Props as BaseHeadProps } from '@components/BaseHead.astro';
 import { Navbar } from '@components/Navbar/Navbar';
@@ -14,6 +14,7 @@ import { getNavbarMessages } from '@components/Navbar/helpers';
 import { SocialLinksList } from '@components/SocialLinksList/SocialLinksList';
 import { l10n } from '@i18n/config';
 import type { HpContent } from '../@types/hp';
+import { ViewTransitions } from 'astro:transitions';
 
 export interface Props extends BaseHeadProps {
   lang: Lang;
@@ -43,6 +44,7 @@ changeLanguage(lang);
   <head>
     <BaseHead title={title} description={description} />
     <slot name="head" />
+    <ViewTransitions />
   </head>
 
   <body class={styles.wallpaper}>
@@ -56,7 +58,7 @@ changeLanguage(lang);
       />
       <div class="hp-wrapper">
         <section class="hp-section logo-hero">
-          <BrandLogo class="logo" />
+          <BrandLogo class='logo'/>
           <div class="logo-hero__text hero">
             <h1 class="h-1">{title}</h1><span class="h-1">{description}</span>
           </div>

diff --git a/src/layouts/UpcomingEvents.astro b/src/layouts/UpcomingEvents.astro
@@ -16,6 +16,8 @@ import type { CollectionEntry } from 'astro:content';
 import { i18nLang } from '@i18n/config';
 import { CFPCta } from '@components/CFPCta/CFPCta';
 import { sortUpComingEvents } from 'utils/upcoming-events';
+import { ViewTransitions } from 'astro:transitions';
+import BrandLogo from '@components/BrandLogo/BrandLogo.astro';
 
 export interface Props extends BaseHeadProps {
   lang: Lang;
@@ -47,6 +49,7 @@ const sortedUpcomingEvents = sortUpComingEvents(upcomingEvents);
   <head>
     <BaseHead title={title} description={description} />
     <slot name="head" />
+    <ViewTransitions />
   </head>
   <body class={styles.wallpaper}>
     <article class="main">
@@ -61,7 +64,9 @@ const sortedUpcomingEvents = sortUpComingEvents(upcomingEvents);
         title={title}
         logoHref={navbarLinks[lang]?.home}
         logoLabel={'homepage'}
-      />
+      >
+        <BrandLogo class='logo-small' />
+      </SlantedHeader>
       <div class="main-content">
         <ul class="upcoming-events-list">
           {

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -4,6 +4,7 @@ import { getHpItContent } from './api/hp/it.json';
 import { hpUrlMap } from 'utils/routing';
 import type { Lang } from '@i18n/types';
 import { changeLanguage } from 'i18next';
+import { ViewTransitions } from 'astro:transitions';
 
 const lang: Lang = 'it';
 changeLanguage(lang);

diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -198,3 +198,16 @@ body {
     padding: 0;
   }
 }
+
+.logo-small {
+  border-radius: 8px;
+  width: 64px;
+  height: 64px;
+}
+
+@include br.media-breakpoint-up(lg) {
+  .logo-small {
+    width: 80px;
+    height: 80px;
+  }
+}