initial

Author: iammukeshm

astro.config.mjs

@@ -1,22 +1,20 @@
 import starlight from '@astrojs/starlight';
+import tailwind from "@astrojs/tailwind";
 import { defineConfig } from 'astro/config';
 
-import tailwind from "@astrojs/tailwind";
+import react from "@astrojs/react";
 
 // https://astro.build/config
 export default defineConfig({
   integrations: [starlight({
     title: 'fullstackhero',
     editLink: {
-      baseUrl: 'https://github.com/fullstackhero/docs/edit/astro/',
+      baseUrl: 'https://github.com/fullstackhero/docs/edit/astro/'
     },
     social: {
       github: 'https://github.com/withastro/starlight'
     },
-    customCss: [
-      './src/styles/tailwind.css',
-      './src/styles/base.css'
-    ],
+    customCss: ['./src/styles/tailwind.css', './src/styles/custom.scss'],
     sidebar: [{
       label: 'General',
       autogenerate: {
@@ -28,10 +26,7 @@ export default defineConfig({
         directory: '/dotnet-starter-kit/webapi/'
       }
     }]
-  }),
-  tailwind(
-    {
-      applyBaseStyles: false,
-    }
-  )]
+  }), tailwind({
+    applyBaseStyles: false
+  }), react()]
 });

package-lock.json

@@ -11,10 +11,16 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.7.0",
+    "@astrojs/react": "^3.6.0",
     "@astrojs/starlight": "^0.24.2",
     "@astrojs/starlight-tailwind": "^2.0.3",
     "@astrojs/tailwind": "^5.1.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "astro": "^4.10.2",
+    "classnames": "^2.5.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "sharp": "^0.32.5",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.4.5"

package.json

@@ -0,0 +1,46 @@
+@import '../../../styles/variables.scss';
+
+.link {
+  --outline-color-hsl: 0, 0%, 100%;
+  --outline-opacity: 0.08;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  padding: 1px 20px 0;
+  border-radius: 8px;
+  color: var(--custom-color-text-strong);
+  font-size: 15px;
+  font-weight: 400;
+  text-align: center;
+  text-decoration: none;
+  box-shadow: inset 0 0 0 1px hsla(var(--outline-color-hsl), var(--outline-opacity));
+  background-color: hsla(224, 32%, 28%, 0.24);
+  backdrop-filter: blur(8px);
+  transition: var(--transition-fast);
+  transition-property: background-color, box-shadow, color;
+
+  [data-theme='light'] & {
+    --outline-color-hsl: 0, 0%, 0%;
+    background-color: hsla(224, 32%, 28%, 0.08);
+  }
+
+  &:hover {
+    --outline-opacity: 0.1;
+    color: var(--custom-color-text-strong) !important; // !important for starlight override only
+    background-color: hsla(224, 32%, 28%, 0.54);
+    [data-theme='light'] & {
+      --outline-opacity: 0.16;
+      background-color: hsla(224, 32%, 28%, 0.04);
+    }
+  }
+
+  &.accent {
+    color: #fff !important; // !important for starlight override only
+    background-color: #3eaf7c;
+
+    &:hover {
+      background-color: #3eaf7c;
+    }
+  }
+}

src/components/ui/button/Button.module.scss

@@ -0,0 +1,17 @@
+import type { ButtonTheme } from '@components/ui/button/ButtonTheme';
+import type { FC, ReactNode } from 'react';
+
+import cn from 'classnames';
+import styles from './Button.module.scss';
+
+interface Props {
+  children?: ReactNode;
+  theme?: ButtonTheme;
+  url: string;
+}
+
+export const Button: FC<Props> = ({ children, theme = 'default', url }) => (
+  <a href={url} className={cn(styles.link, { [styles[theme]]: true })}>
+    {children}
+  </a>
+);

src/components/ui/button/Button.tsx

@@ -0,0 +1 @@
+export type ButtonTheme = 'default' | 'accent';