Merge pull request nf-core#1887 from mashehu/test-transitions

first try with view transitions

README.md

@@ -1,5 +1,5 @@
-<img src="public/images/nf-core-logo.svg#gh-light-mode-only" width="400">
-<img src="public/images/nf-core-logo-darkbg.svg#gh-dark-mode-only" width="400">
+<img src="public/images/logo/nf-core-logo.svg#gh-light-mode-only" width="400">
+<img src="public/images/logo/nf-core-logo-darkbg.svg#gh-dark-mode-only" width="400">
 
 # [nf-co.re](https://github.com/nf-core/website)
 

astro.config.mjs

@@ -41,6 +41,7 @@ export default defineConfig({
     output: 'hybrid',
     experimental: {
         assets: true,
+        viewTransitions: true,
     },
     adapter: netlify(),
     redirects: {

bin/remark-admonitions.js

@@ -62,7 +62,7 @@ export default function admonitionsPlugin() {
           const svgData = svg.data || (svg.data = {});
           svgData.hName = 'i';
           svgData.hProperties = h('i', {
-            class: 'fa ' + node.attributes.class + ' me-2',
+            class: 'fa-solid ' + node.attributes.class + ' me-2',
           }).properties;
         } else {
           svg = h('svg');

package.json

@@ -18,7 +18,7 @@
         "build-component-json": "node bin/components.json.js"
     },
     "dependencies": {
-        "@astro-community/astro-embed-youtube": "^0.4.0",
+        "@astro-community/astro-embed-youtube": "^0.4.1",
         "@astrojs/mdx": "^0.19.7",
         "@astrojs/netlify": "^2.6.0",
         "@astrojs/partytown": "^1.2.3",
@@ -84,11 +84,11 @@
     },
     "devDependencies": {
         "@rollup/plugin-yaml": "^4.1.1",
-        "@trivago/prettier-plugin-sort-imports": "^4.2.0",
         "@types/leaflet": "^1.9.3",
         "fontaine": "^0.4.0",
         "prettier": "^2.8.8",
         "prettier-plugin-astro": "^0.10.0",
-        "prettier-plugin-svelte": "^2.10.1"
+        "prettier-plugin-svelte": "^2.10.1",
+        "sass": "^1.66.1"
     }
 }

src/components/Admonition.astro

@@ -1,10 +1,11 @@
 ---
 //NOTE: When updating this file, check remark-admonitions.js for similar changes.
 
-const { title } = Astro.props;
+const { title, icon } = Astro.props;
 
 export interface Props {
     title: string;
+    icon: string;
 }
 
 const admonitionTypes = {
@@ -32,11 +33,11 @@ const admonitionTypes = {
         svg: 'M173.2 0c-1.8 0-3.5 .7-4.8 2C138.5 32.3 120 74 120 120c0 26.2 6 50.9 16.6 73c-22 2.4-43.8 9.1-64.2 20.5C37.9 232.8 13.3 262.4 .4 296c-.7 1.7-.5 3.7 .5 5.2c2.2 3.7 7.4 4.3 10.6 1.3C64.2 254.3 158 245.1 205 324s-8.1 153.1-77.6 173.2c-4.2 1.2-6.3 5.9-4.1 9.6c1 1.6 2.6 2.7 4.5 3c36.5 5.9 75.2 .1 109.7-19.2c20.4-11.4 37.4-26.5 50.5-43.8c13.1 17.3 30.1 32.4 50.5 43.8c34.5 19.3 73.3 25.2 109.7 19.2c1.9-.3 3.5-1.4 4.5-3c2.2-3.7 .1-8.4-4.1-9.6C379.1 477.1 324 403 371 324s140.7-69.8 193.5-21.4c3.2 2.9 8.4 2.3 10.6-1.3c1-1.6 1.1-3.5 .5-5.2c-12.9-33.6-37.5-63.2-72.1-82.5c-20.4-11.4-42.2-18.1-64.2-20.5C450 170.9 456 146.2 456 120c0-46-18.5-87.7-48.4-118c-1.3-1.3-3-2-4.8-2c-5 0-8.4 5.2-6.7 9.9C421.7 80.5 385.6 176 288 176S154.3 80.5 179.9 9.9c1.7-4.7-1.6-9.9-6.7-9.9zM240 272a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zM181.7 417.6c6.3-11.8 9.8-25.1 8.6-39.8c-19.5-18-34-41.4-41.2-67.8c-12.5-8.1-26.2-11.8-40-12.4c-9-.4-18.1 .6-27.1 2.7c7.8 57.1 38.7 106.8 82.9 139.4c6.8-6.7 12.6-14.1 16.8-22.1zM288 64c-28.8 0-56.3 5.9-81.2 16.5c2 8.3 5 16.2 9 23.5c6.8 12.4 16.7 23.1 30.1 30.3c13.3-4.1 27.5-6.3 42.2-6.3s28.8 2.2 42.2 6.3c13.4-7.2 23.3-17.9 30.1-30.3c4-7.3 7-15.2 9-23.5C344.3 69.9 316.8 64 288 64zM426.9 310c-7.2 26.4-21.7 49.7-41.2 67.8c-1.2 14.7 2.2 28.1 8.6 39.8c4.3 8 10 15.4 16.8 22.1c44.3-32.6 75.2-82.3 82.9-139.4c-9-2.2-18.1-3.1-27.1-2.7c-13.8 .6-27.5 4.4-40 12.4z',
         viewBox: '0 0 576 512',
     },
-    publication: {
-        title: 'Publication',
+    tip: {
+        title: 'tip',
         id: 'success',
-        svg: 'M96 96c0-35.3 28.7-64 64-64H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H80c-44.2 0-80-35.8-80-80V128c0-17.7 14.3-32 32-32s32 14.3 32 32V400c0 8.8 7.2 16 16 16s16-7.2 16-16V96zm64 24v80c0 13.3 10.7 24 24 24H296c13.3 0 24-10.7 24-24V120c0-13.3-10.7-24-24-24H184c-13.3 0-24 10.7-24 24zm208-8c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16s-7.2-16-16-16H384c-8.8 0-16 7.2-16 16zm0 96c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16s-7.2-16-16-16H384c-8.8 0-16 7.2-16 16zM160 304c0 8.8 7.2 16 16 16H432c8.8 0 16-7.2 16-16s-7.2-16-16-16H176c-8.8 0-16 7.2-16 16zm0 96c0 8.8 7.2 16 16 16H432c8.8 0 16-7.2 16-16s-7.2-16-16-16H176c-8.8 0-16 7.2-16 16z',
-        viewBox: '0 0 512 512',
+        svg: 'M112,192a24,24,0,0,0-24-24H24a24,24,0,0,0,0,48H88A24,24,0,0,0,112,192Zm-4.92,95.22-55.42,32a24,24,0,1,0,24,41.56l55.42-32a24,24,0,0,0-24-41.56Zm24-232-55.42-32a24,24,0,1,0-24,41.56l55.42,32a24,24,0,1,0,24-41.56ZM520.94,100a23.8,23.8,0,0,0,12-3.22l55.42-32a24,24,0,0,0-24-41.56l-55.42,32a24,24,0,0,0,12,44.78ZM616,168H552a24,24,0,0,0,0,48h64a24,24,0,0,0,0-48ZM588.34,319.23l-55.42-32a24,24,0,1,0-24,41.56l55.42,32a24,24,0,0,0,24-41.56ZM320,0C217.72,0,144,83,144,176a175,175,0,0,0,43.56,115.78c16.63,19,42.75,58.8,52.41,92.16V384h48v-.12a47.67,47.67,0,0,0-2.13-14.07C280.25,352,263,305.06,223.66,260.15A127.48,127.48,0,0,1,192.06,176C191.84,102.36,251.72,48,320,48a127.91,127.91,0,0,1,96.34,212.15c-39.09,44.61-56.4,91.47-62.09,109.46A56.78,56.78,0,0,0,352,383.92V384h48V384c9.69-33.37,35.78-73.18,52.41-92.15A175.93,175.93,0,0,0,320,0Zm0,80a96.11,96.11,0,0,0-96,96,16,16,0,0,0,32,0,64.08,64.08,0,0,1,64-64,16,16,0,0,0,0-32ZM240.06,459.19a16,16,0,0,0,2.69,8.84l24.5,36.83A16,16,0,0,0,280.56,512h78.85a16,16,0,0,0,13.34-7.14L397.25,468a16.2,16.2,0,0,0,2.69-8.84L400,416H240Z',
+        viewBox: '0 0 640 512',
     },
 };
 ---
@@ -46,9 +47,14 @@ const admonitionTypes = {
         <div
             class={`title alert alert-${admonitionTypes[title].id} fw-bold px-3 py-2 d-flex align-items-center rounded-top-1 rounded-bottom-0 border-0`}
         >
-            <svg class="icon fill-current me-2" viewBox={admonitionTypes[title].viewBox}
-                ><path d={admonitionTypes[title].svg}></path></svg
-            >
+            {icon && <i class={`fa-solid ${icon} me-2`} />}
+            {
+                !icon && (
+                    <svg class="icon fill-current me-2" viewBox={admonitionTypes[title].viewBox}>
+                        <path d={admonitionTypes[title].svg} />
+                    </svg>
+                )
+            }
             {title.charAt(0).toUpperCase() + title.slice(1)}
         </div>
         <div class="p-3 pt-0">

src/components/BaseHead.astro

@@ -1,15 +1,17 @@
 ---
+import { ViewTransitions } from 'astro:transitions';
 export interface Props {
     title: string;
     description: string;
     image?: string;
+    viewTransitions: boolean;
     docSearchTags?: {
         name: string;
         content: string;
     }[];
 }
 
-const { title, description, image = '/social_img.png', docSearchTags = [] } = Astro.props;
+const { title, description, image = '/social_img.png', docSearchTags = [], viewTransitions = false } = Astro.props;
 ---
 
 <!-- Global Metadata -->
@@ -41,35 +43,56 @@ const { title, description, image = '/social_img.png', docSearchTags = [] } = As
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={new URL(image, Astro.url)} />
 
+{viewTransitions && <ViewTransitions fallback="swap" />}
+
 <!-- DocSearch -->
 {docSearchTags.map(({ name, content }) => <meta name={'docsearch:' + name} content={content} />)}
 
 <!-- Theme -->
 <script is:inline>
-    const theme = (() => {
-        if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
-            return localStorage.getItem('theme');
-        }
-        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            return 'dark';
-        }
-        return 'light';
-    })();
-    function setTheme(theme) {
-        //NOTE: same as in ThemeSwitch.svelte
-        const root = document.documentElement;
-        if (theme === 'auto') {
+    if (!window.theme) {
+        const theme = (() => {
+            if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+                return localStorage.getItem('theme');
+            }
             if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                root.setAttribute('data-bs-theme', 'dark');
+                return 'dark';
+            }
+            return 'light';
+        })();
+        function setTheme(theme) {
+            //NOTE: same as in ThemeSwitch.svelte
+            const root = document.documentElement;
+            if (theme === 'auto') {
+                if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    root.setAttribute('data-bs-theme', 'dark');
+                } else {
+                    root.setAttribute('data-bs-theme', 'light');
+                }
             } else {
-                root.setAttribute('data-bs-theme', 'light');
+                root.setAttribute('data-bs-theme', theme);
             }
-        } else {
-            root.setAttribute('data-bs-theme', theme);
         }
+
+        setTheme(theme);
+
+        document.addEventListener('astro:beforeload', () => {
+            setTheme(theme);
+        });
     }
+</script>
+<script>
+    import bootstrap from 'bootstrap/dist/js/bootstrap.bundle.min.js';
 
-    setTheme(theme);
+    document.addEventListener('astro:beforeload', () => {
+        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+        [...tooltipTriggerList].map((tooltipTriggerEl) => {
+            const tooltip = bootstrap.Tooltip.getInstance(tooltipTriggerEl);
+            if (!tooltip) {
+                new bootstrap.Tooltip(tooltipTriggerEl);
+            }
+        });
+    });
 </script>
 <!-- Google Analytics -->
 <script type="text/partytown" src="https://www.googletagmanager.com/gtag/js?id=G-1J32LEB1KZ"></script>

src/components/FilterBar.svelte

@@ -54,7 +54,7 @@
             on:keyup={handleSearch}
             placeholder="Search"
         />
-        {#if $Filters.length > 0}
+        {#if $Filters.length > 0 && $Filters[0].name}
             <div class="ms-3 d-flex align-items-center">
                 Show:
                 <div class="btn-group ms-1 filter-buttons d-flex" role="group" aria-label="Filter listing">

src/components/event/EventListing.svelte

@@ -85,20 +85,13 @@
         talk: 'fa-solid fa-presentation',
         training: 'fa-solid fa-chalkboard-teacher',
     };
-    const event_types = [...new Set(events.map((event) => event.data.type))]
-        .map((type) => {
-            return {
-                name: type,
-                class: event_type_classes[type],
-                icon: event_type_icons[type],
-            };
-        })
-        .sort((a, b) => {
-            if (a.name < b.name) {
-                return -1;
-            }
-            return 1;
-        });
+    const event_types = Object.keys(event_type_classes).map((type) => {
+        return {
+            name: type,
+            class: event_type_classes[type],
+            icon: event_type_icons[type],
+        };
+    });
 
     CurrentFilter.set(event_types);
 

src/components/homepage/HomepageVideosEvents.astro

@@ -82,17 +82,15 @@ eventPreviewPast = eventPreview
             {eventPreviewFuture.length > 0 && <h4>Upcoming Events</h4>}
             {
                 eventPreviewFuture.map((event) => (
-                    <>
-                        <EventCard
-                            frontmatter={event.data}
-                            slug={event.slug}
-                            type={event.data.type}
-                            time_category="future"
-                            showDescription={false}
-                            narrow={true}
-                            client:idle
-                        />
-                    </>
+                    <EventCard
+                        frontmatter={event.data}
+                        slug={event.slug}
+                        type={event.data.type}
+                        time_category="future"
+                        showDescription={false}
+                        narrow={true}
+                        client:idle
+                    />
                 ))
             }
             {eventPreviewPast.length > 0 && <h4>Past Events</h4>}

src/components/sidebar/SidebarToc.svelte

@@ -23,17 +23,17 @@
     }
     onMount(() => {
         // set the first heading as active on initial load
-        if (!$currentHeading) {
+
+        if (!$currentHeading || !headings.find((h) => h.slug === $currentHeading)) {
             currentHeading.set(headings[0]?.slug);
         }
         currentHeading.subscribe((slug) => {
             // wait 1 second for sidebar selection animation to finish
-            setTimeout(() => {
-                const active = document.querySelector('.toc .nav-item.active');
-                if (active) {
-                    active.scrollIntoView({ block: 'nearest' });
-                }
-            }, 1000);
+
+            const active = document.querySelector('.toc nav-item.active');
+            if (active) {
+                active.scrollIntoView({ block: 'nearest' });
+            }
         });
     });
 </script>

src/layouts/BaseLayout.astro

@@ -22,6 +22,7 @@ export interface Props {
     subfooter?: boolean;
     navTocHeadings?: object[];
     sections?: { section_name: string; children: {}[] }[] | never[];
+    viewTransitions?: boolean;
     docSearchTags?: {
         name: string;
         content: string;
@@ -36,14 +37,21 @@ const {
     subfooter = false,
     navTocHeadings = [],
     sections = [],
+    viewTransitions = false,
     docSearchTags = [],
 } = Astro.props;
 ---
 
 <!DOCTYPE html>
 <html lang="en">
     <head>
-        <BaseHead title={title} description={subtitle} image={image} docSearchTags={docSearchTags} />
+        <BaseHead
+            title={title}
+            description={subtitle}
+            image={image}
+            viewTransitions={viewTransitions}
+            docSearchTags={docSearchTags}
+        />
     </head>
 
     <body tabindex="0">
@@ -53,21 +61,6 @@ const {
         </div>
         {subfooter && <SubFooter md_github_url={md_github_url} />}
         <Footer />
-        <script>
-            import bootstrap from 'bootstrap/dist/js/bootstrap.bundle.min.js';
-            window.onload = function () {
-                setTimeout(() => {
-                    // need timeout to wait for svelte elements to render
-                    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
-                    [...tooltipTriggerList].map((tooltipTriggerEl) => {
-                        const tooltip = bootstrap.Tooltip.getInstance(tooltipTriggerEl);
-                        if (!tooltip) {
-                            new bootstrap.Tooltip(tooltipTriggerEl);
-                        }
-                    });
-                }, 1000);
-            };
-        </script>
         <style lang="scss" is:global>
             @import '@styles/main.scss';
         </style>

src/layouts/EventLayout.astro

@@ -88,7 +88,11 @@ const sections = years.map((year) => {
 });
 ---
 
-<PageLayout title={title || 'Events'} subtitle={subtitle || 'Details of past and future events around nf-core.'}>
+<PageLayout
+    title={title || 'Events'}
+    subtitle={subtitle || 'Details of past and future events around nf-core.'}
+    viewTransitions={true}
+>
     <div class="row">
         <div class="col-12 col-md-2 sticky-top-under d-none d-md-inline sidebar-left pt-1">
             <SidebarNav items={sections} minimal={true} />

src/layouts/ListingLayout.astro

@@ -41,22 +41,29 @@ export interface Props {
         config: {};
     }[];
     mainpage_container?: boolean;
+    viewTransitions?: boolean;
 }
 
 const {
     title,
     description,
-    filter,
+    filter = [],
     displayStyle,
     sortBy,
     pipelines,
     components,
     configs,
     mainpage_container = false,
+    viewTransitions = false,
 } = Astro.props;
 ---
 
-<PageLayout title={title} subtitle={description} mainpage_container={mainpage_container}>
+<PageLayout
+    title={title}
+    subtitle={description}
+    mainpage_container={mainpage_container}
+    viewTransitions={viewTransitions}
+>
     <div class="container-fluid main-content pt-md-2 p-1">
         <slot />
         <FilterBar displayStyle={displayStyle} filter={filter} sortBy={sortBy} client:load />