Add discord link to website (#3586)

Pointing to https://aka.ms/typespec/discord ![image](https://github.com/microsoft/typespec/assets/1031227/d9199709-fdcc-40a2-adcc-4c917fd12fa3) ![image](https://github.com/microsoft/typespec/assets/1031227/b5cf7391-407b-438f-bdd2-90d5a68eb9fd)
microsoft · Jun 14, 2024 · d7ec3da · d7ec3da
1 parent 6bbc247
commit d7ec3da
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 0 deletions.
diff --git a/packages/website/docusaurus.config.ts b/packages/website/docusaurus.config.ts
@@ -250,6 +250,12 @@ const config: Config = {
           className: "header-github-link",
           "aria-label": "Github repository",
         },
+        {
+          href: "https://aka.ms/typespec/discord",
+          position: "right",
+          className: "header-discord-link",
+          "aria-label": "Discord server",
+        },
       ],
     } satisfies ThemeConfig,
     footer: {

diff --git a/packages/website/src/css/custom.css b/packages/website/src/css/custom.css
@@ -217,6 +217,22 @@
     no-repeat;
 }
 
+.header-discord-link:before {
+  content: "";
+  width: 24px;
+  height: 19px;
+  display: flex;
+  /* cspell:disable-next-line */
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 71 55' fill='000000' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M60.105 4.898A58.55 58.55 0 0 0 45.653.415a.22.22 0 0 0-.233.11 40.784 40.784 0 0 0-1.8 3.697c-5.456-.817-10.886-.817-16.23 0-.485-1.164-1.201-2.587-1.828-3.697a.228.228 0 0 0-.233-.11 58.386 58.386 0 0 0-14.451 4.483.207.207 0 0 0-.095.082C1.578 18.73-.944 32.144.293 45.39a.244.244 0 0 0 .093.167c6.073 4.46 11.955 7.167 17.729 8.962a.23.23 0 0 0 .249-.082 42.08 42.08 0 0 0 3.627-5.9.225.225 0 0 0-.123-.312 38.772 38.772 0 0 1-5.539-2.64.228.228 0 0 1-.022-.378c.372-.279.744-.569 1.1-.862a.22.22 0 0 1 .23-.03c11.619 5.304 24.198 5.304 35.68 0a.219.219 0 0 1 .233.027c.356.293.728.586 1.103.865a.228.228 0 0 1-.02.378 36.384 36.384 0 0 1-5.54 2.637.227.227 0 0 0-.121.315 47.249 47.249 0 0 0 3.624 5.897.225.225 0 0 0 .249.084c5.801-1.794 11.684-4.502 17.757-8.961a.228.228 0 0 0 .092-.164c1.48-15.315-2.48-28.618-10.497-40.412a.18.18 0 0 0-.093-.084Zm-36.38 32.427c-3.497 0-6.38-3.211-6.38-7.156 0-3.944 2.827-7.156 6.38-7.156 3.583 0 6.438 3.24 6.382 7.156 0 3.945-2.827 7.156-6.381 7.156Zm23.593 0c-3.498 0-6.38-3.211-6.38-7.156 0-3.944 2.826-7.156 6.38-7.156 3.582 0 6.437 3.24 6.38 7.156 0 3.945-2.798 7.156-6.38 7.156Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M0 0h71v55H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")
+    no-repeat;
+}
+
+html[data-theme="dark"] .header-discord-link:before {
+  /* cspell:disable-next-line */
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 71 55' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M60.105 4.898A58.55 58.55 0 0 0 45.653.415a.22.22 0 0 0-.233.11 40.784 40.784 0 0 0-1.8 3.697c-5.456-.817-10.886-.817-16.23 0-.485-1.164-1.201-2.587-1.828-3.697a.228.228 0 0 0-.233-.11 58.386 58.386 0 0 0-14.451 4.483.207.207 0 0 0-.095.082C1.578 18.73-.944 32.144.293 45.39a.244.244 0 0 0 .093.167c6.073 4.46 11.955 7.167 17.729 8.962a.23.23 0 0 0 .249-.082 42.08 42.08 0 0 0 3.627-5.9.225.225 0 0 0-.123-.312 38.772 38.772 0 0 1-5.539-2.64.228.228 0 0 1-.022-.378c.372-.279.744-.569 1.1-.862a.22.22 0 0 1 .23-.03c11.619 5.304 24.198 5.304 35.68 0a.219.219 0 0 1 .233.027c.356.293.728.586 1.103.865a.228.228 0 0 1-.02.378 36.384 36.384 0 0 1-5.54 2.637.227.227 0 0 0-.121.315 47.249 47.249 0 0 0 3.624 5.897.225.225 0 0 0 .249.084c5.801-1.794 11.684-4.502 17.757-8.961a.228.228 0 0 0 .092-.164c1.48-15.315-2.48-28.618-10.497-40.412a.18.18 0 0 0-.093-.084Zm-36.38 32.427c-3.497 0-6.38-3.211-6.38-7.156 0-3.944 2.827-7.156 6.38-7.156 3.583 0 6.438 3.24 6.382 7.156 0 3.945-2.827 7.156-6.381 7.156Zm23.593 0c-3.498 0-6.38-3.211-6.38-7.156 0-3.944 2.826-7.156 6.38-7.156 3.582 0 6.437 3.24 6.38 7.156 0 3.945-2.798 7.156-6.38 7.156Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M0 0h71v55H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")
+    no-repeat;
+}
+
 .DocSearch-Button {
   border-radius: 4px !important;
 

diff --git a/packages/website/src/pages/community.md b/packages/website/src/pages/community.md
@@ -10,6 +10,10 @@ We love stars so make sure you [star us on GitHub](https://github.com/microsoft/
 
 Check out our [contributing guide](https://github.com/microsoft/typespec/blob/main/CONTRIBUTING.md) if you would like to contribute to TypeSpec.
 
+## Community Discord
+
+Join our community [Discord Server](https://aka.ms/typespec/discord) to connect with other developers using TypeSpec.
+
 ## Discussion
 
 Ask questions on [Github Discussion](https://github.com/microsoft/typespec/discussions)