feat: add get started & Who is Behind sections landing page anonymous…

… users (#2891) (#2896)

fix #2891 #2897

client/.eslintrc.json

@@ -163,6 +163,7 @@
           "linkify",
           "localhost",
           "maintenances",
+          "mailto",
           "matcher",
           "mathbf",
           "mathjax",

client/package.json

@@ -23,6 +23,7 @@
     "dropzone": "^6.0.0-beta.2",
     "file-saver": "^2.0.5",
     "filesize": "^6.4.0",
+    "framer-motion": "^10.16.5",
     "graphql": "^16.8.1",
     "highlight.js": "^11.8.0",
     "http-proxy": "^1.18.1",

client/run-telepresence.sh

@@ -33,6 +33,9 @@ PREVIEW_THRESHOLD='{"soft":"1048576","hard":"10485760"}'
 UPLOAD_THRESHOLD='{"soft":"104857600"}'
 CURRENT_CHART=`grep -oE "(^version: )[.0-9a-f\-]*" ../helm-chart/renku-ui/Chart.yaml | cut -d" " -f2`
 CURRENT_COMMIT=`git rev-parse --short HEAD`
+# Set HOMEPAGE_PROJECT_PATH with the project's path with namespace to display the project on the landing page.
+# E.g.,
+#HOMEPAGE_PROJECT_PATH='limited-group/heat-flux-lp2'
 if [[ "$OSTYPE" == "linux-gnu" ]]
 then
   WELCOME_PAGE=`echo "${WELCOME_MESSAGE}" | base64 -w 0`
@@ -175,7 +178,8 @@ tee > ./public/config.json << EOF
       }
     },
     "tutorialLink": "${HOMEPAGE_TUTORIAL_LINK}",
-    "showcase": ${HOMEPAGE_SHOWCASE}
+    "showcase": ${HOMEPAGE_SHOWCASE},
+    "projectPath": "${HOMEPAGE_PROJECT_PATH}"
   },
   "USER_PREFERENCES_MAX_PINNED_PROJECTS": ${USER_PREFERENCES_MAX_PINNED_PROJECTS:-5}
 }

client/src/App.js

@@ -72,34 +72,36 @@ function CentralContentContainer(props) {
     skip: !props.user.logged,
   });
 
+  const appContext = {
+    client: props.client,
+    coreApiVersionedUrlConfig,
+    location: props.location,
+    model: props.model,
+    notifications,
+    params: props.params,
+  };
+
   if (
     !props.user.logged &&
     props.location.pathname === Url.get(Url.pages.landing)
   ) {
     return (
-      <AnonymousHome
-        client={props.client}
-        homeCustomized={props.params["HOMEPAGE"]}
-        user={props.user}
-        model={props.model}
-        location={props.location}
-        params={props.params}
-      />
+      <AppContext.Provider value={appContext}>
+        <AnonymousHome
+          client={props.client}
+          homeCustomized={props.params["HOMEPAGE"]}
+          user={props.user}
+          model={props.model}
+          location={props.location}
+          params={props.params}
+        />
+      </AppContext.Provider>
     );
   }
 
   // check anonymous sessions settings
   const blockAnonymous = !user.logged && !props.params["ANONYMOUS_SESSIONS"];
 
-  const appContext = {
-    client: props.client,
-    coreApiVersionedUrlConfig,
-    location: props.location,
-    model: props.model,
-    notifications,
-    params: props.params,
-  };
-
   return (
     <div className="d-flex flex-grow-1">
       <AppContext.Provider value={appContext}>

client/src/components/entities/Buttons.tsx

@@ -28,18 +28,37 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Funnel, FunnelFill } from "react-bootstrap-icons";
 import { Link } from "react-router-dom";
 import { Button, UncontrolledTooltip } from "reactstrap";
+import { motion } from "framer-motion";
 import SimpleSessionButton from "../../features/session/components/SimpleSessionButton";
 import { stylesByItemType } from "../../utils/helpers/HelperFunctions";
 import { EntityType } from "./Entities";
 
 export interface EntityButtonProps {
   type: EntityType;
   slug: string;
+  animated?: boolean;
+  fromLanding?: boolean;
 }
-function EntityButton({ type, slug }: EntityButtonProps) {
+function EntityButton({
+  type,
+  slug,
+  animated = false,
+  fromLanding = false,
+}: EntityButtonProps) {
   switch (type) {
     case "project":
-      return (
+      return animated ? (
+        <motion.div
+          className="card-button"
+          whileInView={{
+            scale: [0.9, 1, 0.9, 1, 0.9, 1],
+            animationDuration: "3s",
+          }}
+          viewport={{ once: false }}
+        >
+          <SimpleSessionButton fullPath={slug} fromLanding={fromLanding} />
+        </motion.div>
+      ) : (
         <div className="card-button">
           <SimpleSessionButton fullPath={slug} />
         </div>

client/src/components/list/EntityCardSkeleton.module.scss

@@ -0,0 +1,35 @@
+.skeletonCardContainer {
+  width: 350px;
+  position: relative;
+}
+
+.skeletonWrapper {
+  position: absolute;
+}
+
+.skeletonWrapper .skeletonImg .skeletonImgGraphic {
+  height: 100%;
+}
+.skeletonLoader:empty {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  display: block;
+  background: linear-gradient(
+      to right,
+      rgba(255, 255, 255, 0),
+      rgba(255, 255, 255, 0.5) 50%,
+      rgba(255, 255, 255, 0) 80%
+    ),
+    transparent;
+  background-repeat: repeat-y;
+  background-size: 150px 200px;
+  background-position: 0 0;
+  animation: shine 2s infinite;
+}
+
+@keyframes shine {
+  to {
+    background-position: 200% 0;
+  }
+}

client/src/components/list/EntityCardSkeleton.tsx

@@ -0,0 +1,34 @@
+/*!
+ * Copyright 2023 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import skeletonCardImage from "../../styles/assets/SkeletonCard.svg";
+import styles from "./EntityCardSkeleton.module.scss";
+import cx from "classnames";
+
+export default function EntityCardSkeleton() {
+  return (
+    <div className={styles.skeletonWrapper}>
+      <div className={styles.skeletonImg}>
+        <img src={skeletonCardImage} alt="skeleton card" />
+        <div
+          className={cx([styles.skeletonImgGraphic, styles.skeletonLoader])}
+        />
+      </div>
+    </div>
+  );
+}

client/src/components/list/ListCard.tsx

@@ -47,6 +47,8 @@ function ListCard({
   title,
   url,
   visibility,
+  animated = false,
+  fromLanding = false,
 }: ListElementProps) {
   const imageStyles: CSSProperties = imageUrl
     ? { backgroundImage: `url("${imageUrl}")` }
@@ -82,7 +84,12 @@ function ListCard({
               </div>
             )}
           </Link>
-          <EntityButton type={itemType} slug={path ?? ""} />
+          <EntityButton
+            type={itemType}
+            slug={path ?? ""}
+            animated={animated}
+            fromLanding={fromLanding}
+          />
           <Link
             className={cx("card-body", "d-block", "text-decoration-none")}
             to={url}

client/src/components/list/list.types.tsx

@@ -46,6 +46,8 @@ export interface ListElementProps {
   type?: ListDisplayType;
   url: string;
   visibility: Visibilities;
+  animated?: boolean;
+  fromLanding?: boolean;
 }
 
 export interface VisibilityIconProps {

client/src/components/markdown/LazyRenkuMarkdown.tsx

@@ -31,7 +31,7 @@ export default function LazyRenkuMarkdown(
   props: ComponentProps<typeof RenkuMarkdown>
 ) {
   return (
-    <Suspense fallback={<Loader />}>
+    <Suspense fallback={<Loader size={30} />}>
       <RenkuMarkdown {...props} />
     </Suspense>
   );

client/src/features/session/components/ShowSession.tsx

@@ -103,7 +103,7 @@ function ShowSessionFullscreen({ sessionName }: ShowSessionFullscreenProps) {
   });
 
   const location = useLocation<
-    { redirectFromStartServer?: boolean } | undefined
+    { redirectFromStartServer?: boolean; fromLanding?: boolean } | undefined
   >();
 
   const { data: sessions, isLoading } = useGetSessionsQuery();
@@ -214,6 +214,7 @@ function ShowSessionFullscreen({ sessionName }: ShowSessionFullscreenProps) {
   );
 
   const includeStepInTitle = location.state?.redirectFromStartServer;
+  const isFromLandingPage = location.state?.fromLanding;
   const content =
     !isLoading && thisSession == null ? (
       <SessionUnavailable />
@@ -258,7 +259,7 @@ function ShowSessionFullscreen({ sessionName }: ShowSessionFullscreenProps) {
               "align-items-center"
             )}
           >
-            <GoBackBtn urlBack={sessionsListUrl} />
+            <GoBackBtn urlBack={isFromLandingPage ? "/" : sessionsListUrl} />
             <PullSessionBtn togglePullSession={togglePullSession} />
             <SaveSessionBtn toggleSaveSession={toggleSaveSession} />
             <ResourcesBtn toggleModalResources={toggleModalResources} />