Add Linux Foundation trademark statement in footer (#239)

* add linux foundation trademark statement in footer

Signed-off-by: Michael Valdron <mvaldron@redhat.com>

* add cncf project section to landing page

Signed-off-by: Michael Valdron <mvaldron@redhat.com>

* revise LF trademark/policy footer notice to recent changes cncf/foundation@a5be632

Signed-off-by: Michael Valdron <mvaldron@redhat.com>

* fix linting issues

Signed-off-by: Michael Valdron <mvaldron@redhat.com>

* fix formatting issues

Signed-off-by: Michael Valdron <mvaldron@redhat.com>

* define url entity type for passing in link data props

Signed-off-by: Michael Valdron <mvaldron@redhat.com>

---------

Signed-off-by: Michael Valdron <mvaldron@redhat.com>

Author: michael-valdron

apps/landing-page/pages/_app.tsx

@@ -83,6 +83,7 @@ function collectHeadings(
 
 const websiteName = 'Devfile.io';
 const websiteDescription = 'An open standard defining containerized development environments.';
+const lfTrademarkUsageUrl = 'https://lfprojects.org/policies/';
 
 function LandingPage({ Component, pageProps }: AppProps): JSX.Element {
   const { markdoc } = pageProps as MarkdocNextJsPageProps;
@@ -114,7 +115,14 @@ function LandingPage({ Component, pageProps }: AppProps): JSX.Element {
                 <Component {...pageProps} />
               </LandingPageLayout>
             </div>
-            <Footer websiteName={websiteName} websiteDescription={websiteDescription} />
+            <Footer
+              websiteName={websiteName}
+              websiteDescription={websiteDescription}
+              lfTrademarkUsageLink={{
+                href: lfTrademarkUsageUrl,
+                text: lfTrademarkUsageUrl.replace(/http:\/\/|https:\/\//g, ''),
+              }}
+            />
           </div>
         </NavigationProvider>
       </LinksProvider>

apps/landing-page/pages/index.tsx

@@ -14,14 +14,20 @@
  * limitations under the License.
  */
 
-import { Hero, KeyFeaturesSection, ValuePropositionSection } from '@devfile-web/core';
+import {
+  CncfProjectSection,
+  Hero,
+  KeyFeaturesSection,
+  ValuePropositionSection,
+} from '@devfile-web/core';
 
 export function Index(): JSX.Element {
   return (
     <>
       <Hero />
       <ValuePropositionSection />
       <KeyFeaturesSection />
+      <CncfProjectSection />
     </>
   );
 }

apps/registry-viewer/pages/_app.tsx

@@ -27,6 +27,7 @@ const analyticsConfig = {
 };
 
 const websiteName = 'Devfile Registry';
+const lfTrademarkUsageUrl = 'https://lfprojects.org/policies/';
 
 function CustomApp({ Component, pageProps }: AppProps): JSX.Element {
   return (
@@ -38,7 +39,13 @@ function CustomApp({ Component, pageProps }: AppProps): JSX.Element {
             <Header websiteName={websiteName} />
             <Component {...pageProps} />
           </div>
-          <Footer websiteName={websiteName} />
+          <Footer
+            websiteName={websiteName}
+            lfTrademarkUsageLink={{
+              href: lfTrademarkUsageUrl,
+              text: lfTrademarkUsageUrl.replace(/http:\/\/|https:\/\//g, ''),
+            }}
+          />
         </div>
       </LinksProvider>
     </AnalyticsProvider>

libs/core/src/components/cncf-project-section/cncf-project-section.tsx

@@ -0,0 +1,32 @@
+/**
+ * Copyright Red Hat
+ *
+ * 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 { CncfIcon } from '../../icons';
+
+export function CncfProjectSection(): JSX.Element {
+  return (
+    <div className="relative -z-10 bg-slate-50 py-16 dark:bg-slate-900 sm:py-24 lg:py-32">
+      <div className="mx-auto max-w-md px-4 text-center sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8">
+        <CncfIcon id="cncf-logo" className="mx-auto max-w-prose text-slate-500" />
+        <p className="mx-auto mt-5 max-w-prose text-xl text-slate-500 dark:text-slate-400">
+          We are a Cloud Native Computing Foundation sandbox project.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default CncfProjectSection;

libs/core/src/components/footer/footer.tsx

@@ -17,14 +17,16 @@
 import Link from 'next/link';
 import { DevfileIcon } from '../../icons';
 import { useLinks } from '../../hooks';
+import { LinkProp } from '../../types/props';
 
 export interface FooterProps {
   websiteName: string;
   websiteDescription?: string;
+  lfTrademarkUsageLink?: LinkProp;
 }
 
 export function Footer(props: FooterProps): JSX.Element {
-  const { websiteName, websiteDescription } = props;
+  const { websiteName, websiteDescription, lfTrademarkUsageLink } = props;
 
   const { footerNavigation } = useLinks();
 
@@ -48,6 +50,22 @@ export function Footer(props: FooterProps): JSX.Element {
             {websiteDescription && (
               <p className="text-base text-slate-500 dark:text-slate-400">{websiteDescription}</p>
             )}
+            {lfTrademarkUsageLink && (
+              <p className="text-base text-slate-500 dark:text-slate-400">
+                Copyright © Devfile a Series of LF Projects, LLC
+                <br />
+                For website terms of use, trademark policy and other project policies please
+                see&nbsp;
+                <Link
+                  href={lfTrademarkUsageLink.href}
+                  className="text-base text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
+                  target="_blank"
+                >
+                  {lfTrademarkUsageLink.text}
+                </Link>
+                .
+              </p>
+            )}
             <div className="flex space-x-6">
               {footerNavigation.social.map((item) => (
                 <Link key={item.name} href={item.href} passHref>

libs/core/src/components/index.ts

@@ -47,3 +47,4 @@ export * from './devfile-datalist/devfile-datalist';
 export * from './devfile-codeblock/devfile-codeblock';
 export * from './custom-404/custom-404';
 export * from './video/video';
+export * from './cncf-project-section/cncf-project-section';