Add youtube social icon to website (#239)

* Add youtube social icon to website Signed-off-by: Joshua Shanks <[email protected]> * Reorder github and youtube social links in header Signed-off-by: Joshua Shanks <[email protected]> --------- Signed-off-by: Joshua Shanks <[email protected]>
opentofu · Jan 9, 2024 · b04a7d2 · b04a7d2
1 parent 3f8b969
commit b04a7d2
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 0 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -291,6 +291,13 @@ const config = {
             ghRepoUrl: "https://github.com/opentofu/opentofu",
             buttonLabel: "Star",
           },
+          {
+            type: "custom-social-icon-link-navbar-item",
+            href: "https://www.youtube.com/channel/UCgIzfj9QuWL9HHXIXq2A0Ig",
+            position: "right",
+            name: "youtube",
+            label: "Go to the OpenTofu's Youtube page",
+          },
           {
             type: "custom-social-icon-link-navbar-item",
             href: "https://twitter.com/opentofuorg",

diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -45,6 +45,12 @@ export default function Footer({ links }: FooterProps) {
         ))}
       </div>
       <div className="flex gap-6">
+        <SocialIconLink
+          name="youtube"
+          href="https://www.youtube.com/channel/UCgIzfj9QuWL9HHXIXq2A0Ig"
+          label="Go to the OpenTofu's Youtube page"
+          hiddenLabel
+        />
         <SocialIconLink
           name="github"
           href="https://github.com/opentofu/opentofu"

diff --git a/src/components/HowToSupport/index.tsx b/src/components/HowToSupport/index.tsx
@@ -180,6 +180,10 @@ export default function HowToSupport() {
                 fill="none"
                 aria-hidden
               >
+                <path
+                  className="fill-brand-300"
+                  d="M23.8 7.429s-.2-1.62-1-2.286c-.9-.953-1.9-.953-2.4-.953C17 4 12 4 12 4s-5 0-8.4.19c-.5.096-1.5.096-2.4.953-.7.667-1 2.286-1 2.286S0 9.239 0 11.143v1.714c0 1.81.2 3.714.2 3.714s.2 1.62 1 2.286c.9.953 2.1.857 2.6.953C5.7 20 12 20 12 20s5 0 8.4-.286c.5-.095 1.5-.095 2.4-.952.7-.667 1-2.286 1-2.286s.2-1.81.2-3.714v-1.714c0-1.81-.2-3.62-.2-3.62ZM9.5 14.952v-6.38L16 11.81l-6.5 3.142Z">
+                </path>
                 <path
                   className="fill-brand-600"
                   d="M19.733 8.32a3.2 3.2 0 1 0 0 6.4h3.2v-3.2a3.2 3.2 0 0 0-3.2-3.2ZM19.733 16.855H11.2a3.2 3.2 0 1 0 0 6.4h8.533a3.2 3.2 0 0 0 0-6.4Z"

diff --git a/src/components/SocialIconLink/index.tsx b/src/components/SocialIconLink/index.tsx
@@ -3,6 +3,8 @@ import React from "react";
 import clsx from "clsx";
 
 const iconMap = {
+  youtube:
+    "M23.8 7.429s-.2-1.62-1-2.286c-.9-.953-1.9-.953-2.4-.953C17 4 12 4 12 4s-5 0-8.4.19c-.5.096-1.5.096-2.4.953-.7.667-1 2.286-1 2.286S0 9.239 0 11.143v1.714c0 1.81.2 3.714.2 3.714s.2 1.62 1 2.286c.9.953 2.1.857 2.6.953C5.7 20 12 20 12 20s5 0 8.4-.286c.5-.095 1.5-.095 2.4-.952.7-.667 1-2.286 1-2.286s.2-1.81.2-3.714v-1.714c0-1.81-.2-3.62-.2-3.62ZM9.5 14.952v-6.38L16 11.81l-6.5 3.142Z",
   twitter:
     "M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z",
   github: