make button into component, add button to lint page (#1546)

Author: thisisjofrank

_components/CTA.css

@@ -0,0 +1,22 @@
+.docs-cta {
+  @apply border text-balance text-black font-bold inline-block py-3.5 px-6
+    rounded-full w-max hover:no-underline transition-colors duration-200 mb-6;
+}
+
+.runtime-cta,
+.deploy-cta {
+  @apply border-gray-4 hover:!no-underline !text-gray-4;
+}
+
+.runtime-cta {
+  @apply bg-runtime-400 border-runtime-400 hover:bg-runtime-300;
+}
+
+.deploy-cta {
+  @apply bg-deploy-500 border-deploy-500 hover:bg-deploy-400;
+}
+
+.jsr-cta {
+  @apply bg-jsr-yellow-400 border-jsr-cyan-950 !text-jsr-cyan-950 border-2
+    hover:!no-underline hover:bg-jsr-yellow-300;
+}

_components/CTA.tsx

@@ -0,0 +1,11 @@
+export default function CTA(
+  { href, children, type }: { href: string; children: string; type: string },
+) {
+  return (
+    <a href={href} className={`docs-cta ${type}-cta`}>
+      {children}
+    </a>
+  );
+}
+
+export const css = "@import './_components/CTA.css';";

runtime/fundamentals/linting_and_formatting.md renamed to runtime/fundamentals/linting_and_formatting.mdx

@@ -17,6 +17,8 @@ building amazing applications.
 
 ## Linting
 
+<comp.CTA href="/lint/" type="runtime">Explore all the lint rules</comp.CTA>
+
 Linting is the process of analyzing your code for potential errors, bugs, and
 stylistic issues. Deno’s built-in linter,
 [`deno lint`](/runtime/reference/cli/linter/), supports recommended set of rules

runtime/fundamentals/standard_library.md renamed to runtime/fundamentals/standard_library.mdx

@@ -10,10 +10,8 @@ application logic rather than "reinventing the wheel" for common tasks. All of
 the modules in the Deno Standard Library are audited by the core team and are
 guaranteed to work with Deno, ensuring consistency and reliability.
 
-<a href="https://jsr.io/@std" class="docs-cta jsr-cta" aria-label="See all packages on JSR">See
-all packages on
-<svg class="inline ml-1" viewBox="0 0 13 7" aria-hidden="true" height="20"><path d="M0,2h2v-2h7v1h4v4h-2v2h-7v-1h-4" fill="#083344"></path><g fill="#f7df1e"><path d="M1,3h1v1h1v-3h1v4h-3"></path><path d="M5,1h3v1h-2v1h2v3h-3v-1h2v-1h-2"></path><path d="M9,2h3v2h-1v-1h-1v3h-1"></path></g></svg>
-</a>
+<comp.CTA href="https://jsr.io/@std" type="jsr">See
+all packages on <svg class="inline ml-1" viewBox="0 0 13 7" aria-hidden="true" height="20"><path d="M0,2h2v-2h7v1h4v4h-2v2h-7v-1h-4" fill="#083344"></path><g fill="#f7df1e"><path d="M1,3h1v1h1v-3h1v4h-3"></path><path d="M5,1h3v1h-2v1h2v3h-3v-1h2v-1h-2"></path><path d="M9,2h3v2h-1v-1h-1v3h-1"></path></g></svg></comp.CTA>
 
 Many packages in the Deno Standard Library are also compatible with Node.js,
 Cloudflare Workers, and other JavaScript environments. This allows you to write

runtime/reference/deno_namespace_apis.md renamed to runtime/reference/deno_namespace_apis.mdx

@@ -14,7 +14,7 @@ The global `Deno` namespace contains APIs that are not web standard, including
 APIs for reading from files, opening TCP sockets, serving HTTP, and executing
 subprocesses, etc.
 
-<a href="/api/deno/" class="docs-cta runtime-cta">Explore all Deno APIs</a>
+<comp.CTA href="/api/deno" type="runtime">Explore all Deno APIs</comp.CTA>
 
 Below we highlight some of the most important Deno APIs to know.
 

runtime/reference/web_platform_apis.md renamed to runtime/reference/web_platform_apis.mdx

@@ -15,7 +15,7 @@ means if you've ever built for the browser, you're likely already familiar with
 Deno, and if you're learning Deno, you're also investing in your knowledge of
 the web.
 
-<a href="/api/web/" class="docs-cta runtime-cta">Explore supported Web APIs</a>
+<comp.CTA href="/api/web" type="runtime">Explore supported Web APIs</comp.CTA>
 
 Below we'll highlight some of the standard Web APIs that Deno supports.
 

styleguide/components.mdx

@@ -46,4 +46,20 @@ Toggle control for flipping the theme
 ```
 <comp.ThemeToggle />
 
+## CTA
 
+Call to action button with different colors based on their `type` prop
+
+```tsx
+<comp.CTA href="https://deno.com" type="runtime">Explore Deno</comp.CTA>
+
+<comp.CTA href="https://deno.com" type="jsr">See all packages on JSR</comp.CTA>
+
+<comp.CTA href="https://deno.com" type="deploy">Get started</comp.CTA>
+```
+
+<comp.CTA href="https://deno.com" type="runtime">Explore Deno</comp.CTA><br/>
+
+<comp.CTA href="https://deno.com" type="jsr">See all packages on JSR</comp.CTA><br/>
+
+<comp.CTA href="https://deno.com" type="deploy">Get started</comp.CTA><br/>

styles.css

@@ -253,34 +253,6 @@ body {
     styleset(ss01, ss07, ss08);
 }
 
-/* Common styles for all CTAs */
-.docs-cta {
-  @apply border text-balance text-black font-bold inline-block py-3.5 px-4
-    rounded-full w-max hover:no-underline transition-colors duration-200;
-}
-
-/* Specific styles for runtime CTAs */
-.runtime-cta {
-  @apply bg-runtime-400 border-runtime-400 hover:bg-runtime-300;
-}
-
-/* Override for when CTA is used in markdown body */
-.markdown-body .runtime-cta,
-.markdown-body .deploy-cta {
-  @apply border-gray-4 hover:!no-underline !text-gray-4;
-}
-
-/* Specific styles for deploy CTAs */
-.deploy-cta {
-  @apply bg-deploy-500 border-deploy-500 hover:bg-deploy-400;
-}
-
-/* Specific styles for JSR CTAs */
-.jsr-cta {
-  @apply bg-jsr-yellow-400 border-jsr-cyan-950 !text-jsr-cyan-950 border-2
-    hover:!no-underline hover:bg-jsr-yellow-300;
-}
-
 .homepage-link {
   @apply block font-normal underline underline-offset-4;
 }