feat: add get started & who we are sections in landing page anonymous…

… users

client/.eslintrc.json

@@ -162,6 +162,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,8 @@ 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`
+HOMEPAGE_PROJECT_PATH='limited-group/heat-flux'
+HOMEPAGE_CONTACT_EMAIL='[email protected]'
 if [[ "$OSTYPE" == "linux-gnu" ]]
 then
   WELCOME_PAGE=`echo "${WELCOME_MESSAGE}" | base64 -w 0`
@@ -175,7 +177,9 @@ tee > ./public/config.json << EOF
       }
     },
     "tutorialLink": "${HOMEPAGE_TUTORIAL_LINK}",
-    "showcase": ${HOMEPAGE_SHOWCASE}
+    "showcase": ${HOMEPAGE_SHOWCASE},
+    "projectPath": "${HOMEPAGE_PROJECT_PATH}",
+    "contactEmail": "${HOMEPAGE_CONTACT_EMAIL}"
   }
 }
 EOF

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,28 @@ 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;
 }
-function EntityButton({ type, slug }: EntityButtonProps) {
+function EntityButton({ type, slug, animated = 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} />
+        </motion.div>
+      ) : (
         <div className="card-button">
           <SimpleSessionButton fullPath={slug} />
         </div>

client/src/components/list/EntityCardSkeleton.scss

@@ -0,0 +1,35 @@
+.SkeletonCardContainer {
+  width: 350px;
+  position: relative;
+}
+
+.skeleton--wrapper {
+  position: absolute;
+}
+
+.skeleton--wrapper .skeleton--img .skeleton--img-graphic {
+  height: 100%;
+}
+.skeleton-loader: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,35 @@
+/*!
+ * 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 "./EntityCardSkeleton.scss";
+
+export default function EntityCardSkeleton() {
+  return (
+    <div className="skeleton--wrapper">
+      <div className="skeleton--col skeleton--img">
+        <img
+          className="SkeletonCardImage"
+          src={skeletonCardImage}
+          alt="skeleton card"
+        />
+        <div className="skeleton--img-graphic skeleton-loader" />
+      </div>
+    </div>
+  );
+}

client/src/components/list/List.d.tsx

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

client/src/components/list/ListCard.tsx

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

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>
   );