update footer

Author: riccardoperra

apps/codeimage/src/components/Footer/Footer.css.ts

@@ -1,3 +1,4 @@
+import {responsiveStyle} from '@codeui/kit';
 import {style} from '@vanilla-extract/css';
 import {themeVars} from '@codeimage/ui';
 
@@ -21,3 +22,14 @@ export const link = style({
     },
   },
 });
+
+export const linkOnlyDesktop = style(
+  responsiveStyle({
+    xs: {
+      display: 'none',
+    },
+    md: {
+      display: 'inline-block',
+    },
+  }),
+);

apps/codeimage/src/components/Footer/Footer.tsx

@@ -1,7 +1,8 @@
 import {Box, Link} from '@codeimage/ui';
+import {getUmami} from '@core/constants/umami';
 import {createControlledDialog} from '@core/hooks/createControlledDialog';
 import {Changelog} from '../Changelog/Changelog';
-import {link} from './Footer.css';
+import {link, linkOnlyDesktop} from './Footer.css';
 import * as styles from './Footer.css';
 
 export const Footer = () => {
@@ -10,6 +11,18 @@ export const Footer = () => {
   return (
     <div class={styles.wrapper}>
       <Box display={'inlineFlex'} justifyContent={'flexEnd'} padding={1}>
+        <Box marginRight={5}>
+          <Link
+            class={`${styles.link} ${styles.linkOnlyDesktop}`}
+            target={'_blank'}
+            title="Better Comments for GitHub"
+            href={'https://github.com/riccardoperra/better-comments-for-github'}
+            size="xs"
+            onClick={() => getUmami().track('better-comments-for-github')}
+          >
+            Better Comments for GitHub
+          </Link>
+        </Box>
         <Box marginRight={5}>
           <Link
             class={link}

apps/website/src/components/Footer/Footer.tsx

@@ -1,5 +1,4 @@
 import {HStack, Link, Text} from '@codeimage/ui';
-import {onlyDesktopLink} from '~/components/Footer/Footer.css';
 import * as styles from '~/components/Footer/Footer.css';
 
 export default function Footer() {
@@ -27,6 +26,7 @@ export default function Footer() {
               href={
                 'https://github.com/riccardoperra/better-comments-for-github'
               }
+              target={'_blank'}
               title="Better Comments for GitHub"
               children={'GitHub'}
             />