terminal shortcuts

Author: danielacorner

src/components/Home/HeroVideo.jsx

@@ -145,12 +145,12 @@ const HeroStyles = styled.section`
   }
 `
 
-const isBraveBrowser = (navigator.brave && await navigator.brave.isBrave() || false)
+const isBraveBrowser = (async () => ((navigator.brave && await navigator.brave.isBrave() || false)))()
 
 export default () => {
   const isTabletOrLarger = useMediaQuery(`(min-width:${BREAKPOINTS.TABLET}px)`)
   const doesFitFullWidthTitle = useMediaQuery(`(min-width:${914}px)`)
-  const isSlowNetwork = navigator?.connection?.downlink && navigator.connection.downlink < 5
+  const isSlowNetwork = typeof window !== 'undefined' && navigator?.connection?.downlink && navigator.connection.downlink < 5
   const data = useStaticQuery(graphql`
     query {
       site {

src/components/Home/PageLinksHorizontal.jsx

@@ -9,7 +9,7 @@ const GRID_GAP_HZ = 10
 const LINK_HEIGHT = 48
 
 export default () => {
-  const PAGE_LINKS = getPageLinks().slice(1)
+  const PAGE_LINKS = getPageLinks().slice(1, -1)
   const isMounted = useIsMounted()
   const trailSpringLeftOnEnter = useTrail(PAGE_LINKS.length, {
     transform: `translate(${isMounted ? 0 : 250}px, 0px)`,
@@ -39,14 +39,14 @@ export default () => {
                 style={{
                   ...(isMousedOverIdx === idx
                     ? {
-                        transform: `scale(${1.07 +
-                          randomNumbers[0] * 0.5 -
-                          0.2}) translateY(-3px) rotate(${rotateDeg}deg)`,
-                        color: `hsl(${randomNumbers[0] * 360},90%,80%)`,
-                        borderColor: `hsl(${randomNumbers[1] * 360},90%,80%)`,
-                        boxShadow: `0px 0px 20px 0px hsla(${randomNumbers[2] *
-                          360}, 67%, 82%, 0.56)`,
-                      }
+                      transform: `scale(${1.07 +
+                        randomNumbers[0] * 0.5 -
+                        0.2}) translateY(-3px) rotate(${rotateDeg}deg)`,
+                      color: `hsl(${randomNumbers[0] * 360},90%,80%)`,
+                      borderColor: `hsl(${randomNumbers[1] * 360},90%,80%)`,
+                      boxShadow: `0px 0px 20px 0px hsla(${randomNumbers[2] *
+                        360}, 67%, 82%, 0.56)`,
+                    }
                     : {}),
                 }}
                 onMouseEnter={() => {

src/shortcuts/terminalShortcuts.jsx

@@ -1,7 +1,63 @@
 import React from "react"
-import { Alt, Key, Ctrl, Shift } from "../components/Keyboard/Keys"
+import { Alt, Key, Ctrl, Shift, Tab, Code } from "../components/Keyboard/Keys"
 
 export const terminalShortcuts = {
+  "Navigation": [
+    {
+      description: "Open File Explorer here",
+      shortcut: (
+        <>
+          <Code>{`start .`}</Code>
+        </>
+      ),
+      shortcutMac: (
+        <>
+          <Code>{`open .`}</Code>
+        </>
+      ),
+    },
+    {
+      description: "Go back to last location",
+      shortcut: (
+        <>
+          <Code>{`cd -`}</Code>
+        </>
+      ),
+    },
+    {
+      description: "Autocomplete",
+      shortcut: (
+        <>
+          <Tab />
+        </>
+      ),
+    },
+    {
+      description: "Autocomplete - list all options",
+      shortcut: (
+        <>
+          <Tab />, <Tab />
+        </>
+      ),
+    },
+    {
+      description: "Reverse search",
+      shortcut: (
+        <>
+          <Ctrl />+<Key>R</Key>
+        </>
+      ),
+    },
+    {
+      description: "Reverse search - previous match",
+      shortcut: (
+        <>
+          <Ctrl />+<Key>R</Key>, <Ctrl />+<Key>R</Key>
+        </>
+      ),
+    },
+
+  ].map(s => ({ ...s, shortcutMac: s.shortcutMac || s.shortcut })),
   bash: [
     {
       description: "New terminal",
@@ -35,5 +91,5 @@ export const terminalShortcuts = {
         </>
       ),
     },
-  ],
+  ].map(s => ({ ...s, shortcutMac: s.shortcutMac || s.shortcut })),
 }

src/utils/constants.js src/utils/constants.jsxsrc/utils/constants.js renamed to src/utils/constants.jsx

@@ -1,3 +1,6 @@
+import { GitHub } from "@material-ui/icons"
+import React from "react"
+
 export const BREAKPOINTS = {
   MOBILE: 480,
   TABLET: 800,
@@ -12,7 +15,7 @@ export const getPageLinks = () => [
   { to: "/mac", title: "Mac" },
   { to: "/vs-code", title: "VS Code" },
   { to: "/terminal", title: "Terminal" },
-  { to: "https://github.com/danielacorner/", title: "whoami" },
+  { to: "https://github.com/danielacorner/shortcutslist", title: <GitHub style={{ width: "0.5em", height: "0.5em", marginTop: 2 }} />, },
 ]
 
 export const COLORS = {