Discord and some mobile tweaks

src/components/Discord.tsx

@@ -0,0 +1,10 @@
+import discord from "../assets/wordmarks/discord.svg";
+import { IconButton, Box } from "@mui/material";
+
+export default function Discord() {
+  //FIXME hardcoding the size sucks
+
+  return <IconButton href='https://discord.gg/rNwNUY83XS'>
+    <Box component='img' src={discord} height={20} width={20} />
+  </IconButton>
+}

src/components/Footer.tsx

@@ -74,6 +74,7 @@ export default function Footer() {
         <ul style={ul_style}>
           <Li><Link href='https://github.com/pkgxdev' {...link_props}>GitHub{icon}</Link></Li>
           <Li><Link href='https://x.com/pkgxdev' {...link_props}>𝕏{icon}</Link></Li>
+          <Li><Link href='https://discord.gg/rNwNUY83XS' {...link_props}>Discord{icon}</Link></Li>
           <Li><Link href='https://web.libera.chat/?channel=#pkgx' {...link_props}>irc:#pkgx{icon}</Link></Li>
         </ul>
       </Grid>

src/components/Terminal.tsx

@@ -19,7 +19,8 @@ export default function Terminal({ children, width, mb, mt }: { children: React.
       mx: 'auto',
       mb: mb ?? 4,
       mt: mt ?? 4,
-      overflow: 'visible'
+      overflow: 'visible',
+      fontSize: isxs ? 14 : undefined
   }}>
     <Card variant="outlined" sx={sx} data-terminal={stoplights}>
       {children}

src/hub.pkgx.sh.tsx

@@ -12,6 +12,7 @@ import Hero from './hub.pkgx.sh/Hero';
 import theme from './utils/theme';
 import './assets/main.css';
 import React from "react";
+import Discord from './components/Discord';
 
 function Body() {
   const theme = useTheme();
@@ -42,7 +43,7 @@ function MyMasthead() {
   return <Masthead>
     <Button href='https://docs.pkgx.sh' color='inherit'>docs</Button>
     <Button href='https://pkgx.dev/pkgs/' color='inherit'>pkgs</Button>
-    <Button href='https://web.libera.chat/?channel=#pkgx' color='inherit'>irc</Button>
+    <Discord />
     <Stars href='https://github.com/pkgxdev/scripthub/' />
   </Masthead>
 }

src/pkgx.dev.tsx

@@ -1,5 +1,5 @@
 import { CssBaseline, Button, Stack, Typography, ThemeProvider } from '@mui/material';
-import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
+import { Route, BrowserRouter as Router, Routes, useLocation } from 'react-router-dom';
 import PackageShowcase from './pkgx.dev/PackageShowcase';
 import PackageListing from './pkgx.dev/PackageListing';
 import PrivacyPolicy from './pkgx.dev/PrivacyPolicy';
@@ -15,6 +15,7 @@ import Stars from './components/Stars';
 import theme from './utils/theme';
 import React, {  } from "react";
 import './assets/main.css';
+import Discord from './components/Discord';
 
 const searchClient = algoliasearch('UUTLHX01W7', '819a841ca219754c38918b8bcbbbfea7');
 
@@ -24,13 +25,7 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
       <CssBaseline />
       <Router>
         <Stack direction="column" p={{xs: 1, md: 2}} maxWidth='lg' minHeight='100vh' mx='auto' spacing={4}>
-          <Masthead>
-            <Button href='/pkgs/' color='inherit'>pkgs</Button>
-            <Stars href={`https://github.com/pkgxdev/`} hideCountIfMobile={true} />
-            <InstantSearch searchClient={searchClient} indexName="pkgs">
-              <Search />
-            </InstantSearch>
-          </Masthead>
+          <MyMasthead />
           <Routes>
             <Route path='/' element={<HomeFeed />} />
             <Route path='/privacy-policy' element={<PrivacyPolicy/>} />
@@ -44,3 +39,17 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
     </ThemeProvider>
   </React.StrictMode>,
 );
+
+function MyMasthead() {
+  const { pathname } = useLocation()
+  const is_pkgs = pathname.startsWith('/pkgs')
+  return <Masthead>
+    <Button href='/pkgs/' color='inherit'>pkgs</Button>
+    {is_pkgs && <Button href='https://docs.pkgx.sh' color='inherit'>docs</Button>}
+    <Discord />
+    <Stars href={`https://github.com/pkgxdev/`} hideCountIfMobile={true} />
+    <InstantSearch searchClient={searchClient} indexName="pkgs">
+      <Search />
+    </InstantSearch>
+  </Masthead>
+}

src/pkgx.sh.tsx

@@ -9,6 +9,7 @@ import Footer from "./components/Footer";
 import Hero from "./pkgx.sh/Hero";
 import './assets/main.css';
 import Stars from './components/Stars';
+import Discord from './components/Discord';
 
 function Body() {
   const theme = useTheme();
@@ -29,11 +30,15 @@ function Body() {
 }
 
 function MyMasthead() {
+  const theme = useTheme();
+  const isxs = useMediaQuery(theme.breakpoints.down('md'));
+  const size = isxs ? 'small' : undefined
+
   return <Masthead>
-    <Button href='https://docs.pkgx.sh' color='inherit'>docs</Button>
-    <Button href='https://pkgx.dev/pkgs/' color='inherit'>pkgs</Button>
-    <Button href='https://web.libera.chat/?channel=#pkgx' color='inherit'>irc</Button>
-    <Stars />
+    <Button href='https://docs.pkgx.sh' color='inherit' size={size}>docs</Button>
+    <Button href='https://pkgx.dev/pkgs/' color='inherit' size={size}>pkgs</Button>
+    <Discord />
+    <Stars hideCountIfMobile />
   </Masthead>
 }
 

src/pkgx.sh/Hero.tsx

@@ -27,17 +27,16 @@ export default function Hero() {
       <code>pkgx</code> is a blazingly fast, standalone, cross‐platform binary that <i>runs anything</i>
     </Typography>
 
-    <Box onClick={click} px={isxs ? undefined : 10} width={isxs ? undefined : 570}>
+    <Box onClick={click} px={isxs ? undefined : 10} width={isxs ? '90vw' : 570}>
       <Tooltip title="Click to Copy" placement='right' arrow>
       <TextField
         className="halo"
         value={brew_install}
-        size='medium'
         fullWidth={true}
         InputProps={{
           endAdornment: <InputAdornment position="end"><ContentCopyIcon /></InputAdornment>,
           readOnly: true,
-          style: {cursor: 'default', fontFamily: 'monospace'},
+          style: {cursor: 'default', fontFamily: 'monospace', fontSize: isxs ? 14 : undefined},
         }}
       />
       </Tooltip>

src/pkgx.sh/Landing.tsx

@@ -28,9 +28,9 @@ export function RunAnything() {
   const theme = useTheme();
   const isxs = useMediaQuery(theme.breakpoints.down('md'));
 
-  return <Stack spacing={3}>
+  return <Stack spacing={3} p={0}>
     <H3 sx={{"&&": { mb: 3}}}>
-      Whatever you want to run {isxs && <br />}<Typography display='inline' variant='h3' fontSize='inherit' color='primary' fontWeight='bold' component='span'>Just type it</Typography>
+      It’s <code>npx</code>, but for <Typography display='inline' variant='h3' fontSize='inherit' color='primary' fontWeight='bold' component='span'>Everything Else</Typography>
     </H3>
 
     <Terminal>
@@ -87,7 +87,7 @@ export function RunAnything() {
           <Card>
             <CardContent>
               <Typography variant="h5">
-                Aksually… <b>Really</b> Just Type It
+                Actually… Just Type It
               </Typography>
               <Typography my={1.5} color="text.secondary">
                 <code>pkgx</code> can <i>optionally</i> integrate with your shell giving it <b>pkging powers</b>.