[Feat] - Added CNCF Logo on the Homepage

docusaurus.config.js

@@ -79,6 +79,11 @@ const config = {
     themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
         ({
+            announcementBar: {
+                id: "start",
+                content:
+                    '⭐️ If you like WasmEdge, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/WasmEdge/WasmEdge">GitHub</a>! ⭐️',
+            },
             navbar: {
                 title: 'WasmEdge',
                 logo: {
@@ -111,7 +116,7 @@ const config = {
                     },
                     {
                         href: 'https://github.com/WasmEdge/WasmEdge',
-                        label: 'GitHub',
+                        className: "header-github-link",
                         position: 'right',
                     },
                 ],
@@ -127,7 +132,7 @@ const config = {
                     src: '/img/wasmedge_logo.svg',
                     href: 'https://wasmedge.org/',
                   },
-                style: 'light',
+                style: 'dark',
                 links: [
                     {
                         title: 'Docs',
@@ -178,8 +183,8 @@ const config = {
                                 href: 'https://twitter.com/realwasmedge',
                             },
                             {
-                                label: 'Slack#WasmEdge',
-                                href: 'https://slack.cncf.io/'
+                                label: 'Slack #WasmEdge',
+                                href: 'https://cloud-native.slack.com/archives/C0215BBK248'
                             },
                             {
                                 label: 'Community Meeting',
@@ -188,7 +193,7 @@ const config = {
                         ],
                     },
                 ],
-                copyright: `Copyright © ${new Date().getFullYear()} WasmEdge. Built with Docusaurus.`,
+                copyright: `Copyright © ${new Date().getFullYear()} WasmEdge. Built with Docusaurus. <br /> <a href="https://github.com/WasmEdge/docs/blob/main/CODE_OF_CONDUCT.md" target="_blank">Code of Conduct</a>`,
             },
             prism: {
                 theme: lightCodeTheme,

src/css/custom.css

@@ -28,3 +28,28 @@
   --ifm-color-primary-lightest: #4fddbf;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+
+.cncf-logo {
+  background: center no-repeat url('/img/cncf-color.svg');
+}
+
+html[data-theme='dark'] .cncf-logo {
+  background: center no-repeat url('/img/cncf-white.svg');
+}
+
+.header-github-link:hover {
+  opacity: 0.6;
+}
+
+.header-github-link:before {
+  content: '';
+  width: 24px;
+  height: 24px;
+  display: flex;
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+  no-repeat;
+}
+
+[data-theme=dark] .header-github-link:before {
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat
+}

src/pages/index.js

@@ -36,6 +36,13 @@ export default function Home() {
       <main>
         <HomepageFeatures />
       </main>
+      <div className={clsx('homepageCNCFLogo', styles.homepageCNCFLogo)}>
+        <h2 className="hero_subtitle">
+          WasmEdge is a <a href="https://cncf.io/">CNCF (Cloud Native Computing Foundation)</a> sandbox project
+        </h2>
+        <div className={clsx('cncf-logo', styles.cncfLogo)} />
+        <br/>
+      </div>
     </Layout>
   );
 }

src/pages/index.module.css

@@ -21,3 +21,17 @@
   align-items: center;
   justify-content: center;
 }
+
+.cncfLogo {
+  height: 90px;
+}
+
+@media screen and (max-width: 768px) {
+  .cncfLogo {
+    height: 64px;
+  }
+}
+
+div.homepageCNCFLogo{
+  text-align: center;
+}