ux: improve lists and mobile

components/basicList/basicList.tsx

@@ -32,6 +32,7 @@ export type BasicListProps = BasicDataViewProps & {
 interface SelectOptionProps {
   label: string;
   handleChange: (value: string) => void;
+  selected?: string;
   options: {
     value: string;
     label: string;
@@ -53,17 +54,32 @@ const SelectOption = (props: SelectOptionProps) => {
   };
 
   return (
-    <FormControl>
-      <FormLabel>
-        <Box>
+    <FormControl
+      sx={{
+        // pl: 1.5,
+        flexDirection: "row",
+      }}
+    >
+      <FormLabel sx={{ width: "11rem", wordWrap: "unset" }}>
+        <Typography>
           <IconButton aria-label="clear-button" onClick={handleClear}>
             <ClearIcon />
           </IconButton>
           {label}
-        </Box>
+        </Typography>
       </FormLabel>
 
-      <RadioGroup sx={{ pl: 1.5 }} value={value} onChange={_handleChange}>
+      <RadioGroup
+        sx={{
+          // pl: 1.5,
+          width: "100%",
+          "&.MuiFormGroup-root": {
+            flexDirection: "row",
+          },
+        }}
+        value={value}
+        onChange={_handleChange}
+      >
         {options.map(({ value, label }) => (
           <FormControlLabel
             key={value}
@@ -78,7 +94,14 @@ const SelectOption = (props: SelectOptionProps) => {
 };
 
 export function BasicList(props: BasicListProps) {
-  const { items, pageCount = 1, handleSearch, handleFilter, preview } = props;
+  const {
+    items,
+    pageCount = 1,
+    handleSearch,
+    handleFilter,
+    preview,
+    selected = "",
+  } = props;
   // const [from, setFrom] = useState<NixType>("any");
   // const [to, setTo] = useState<NixType>("any");
 
@@ -112,44 +135,69 @@ export function BasicList(props: BasicListProps) {
         clearSearch={() => _handleSearch("")}
       />
       <Box>
+        {/* <Stack direction="row"> */}
         <Grid container>
-          <Grid item xs={12} lg={3}>
-            <Stack direction="row">
-              <SelectOption
-                label="from type"
-                handleChange={(value) => {
-                  _handleFilter(value as NixType, "from");
-                }}
-                options={nixTypes.map((v) => ({ value: v, label: v }))}
-              />
-              <Typography
-                sx={{
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "center",
-                }}
-              >
-                <ChevronRightIcon />
-              </Typography>
-              <SelectOption
-                label="to type"
-                handleChange={(value) => {
-                  _handleFilter(value as NixType, "to");
-                }}
-                options={nixTypes.map((v) => ({ value: v, label: v }))}
-              />
-            </Stack>
+          <Grid item xs={12} md={5}>
+            <SelectOption
+              label="from type"
+              handleChange={(value) => {
+                _handleFilter(value as NixType, "from");
+              }}
+              options={nixTypes.map((v) => ({ value: v, label: v }))}
+            />
           </Grid>
-          <Grid item xs={12} lg={9}>
-            {preview}
+          <Grid
+            item
+            md={2}
+            sx={{
+              display: {
+                md: "flex",
+                xs: "none",
+              },
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <Typography
+            // sx={{
+            //   width: "100%",
+            //   display: "flex",
+            //   justifyContent: "center",
+            //   alignItems: "center",
+            //   // flexDirection: "column",
+            // }}
+            >
+              <ChevronRightIcon />
+            </Typography>
+          </Grid>
+          <Grid item xs={12} md={5}>
+            <SelectOption
+              label="to type"
+              handleChange={(value) => {
+                _handleFilter(value as NixType, "to");
+              }}
+              options={nixTypes.map((v) => ({ value: v, label: v }))}
+            />
           </Grid>
         </Grid>
+        {/* </Stack> */}
       </Box>
       <List aria-label="basic-list" sx={{ pt: 0 }}>
         {items.map(({ item, key }) => (
-          <ListItem key={key} aria-label={`item-${key}`} sx={{ px: 0 }}>
-            {item}
-          </ListItem>
+          <>
+            {key === selected && (
+              <ListItem
+                key={`${key}-preview`}
+                aria-label={`item-${key}`}
+                sx={{ px: 0 }}
+              >
+                {preview}
+              </ListItem>
+            )}
+            <ListItem sx={{ px: 0 }} key={key} aria-label={`item-${key}`}>
+              {item}
+            </ListItem>
+          </>
         ))}
       </List>
 

components/layout/layout.tsx

@@ -8,6 +8,7 @@ import {
 } from "@mui/material";
 import { Image } from "../image";
 import nixSnowflake from "../../public/nix-snowflake.svg";
+import nixWhite from "../../public/white.svg";
 import GitHubIcon from "@mui/icons-material/GitHub";
 // import Link from "next/link";
 export interface LayoutProps {
@@ -21,15 +22,15 @@ export function Layout(props: LayoutProps) {
   return (
     <Box
       sx={{
+        height: "100vh",
+        overflow: "hidden",
         bgcolor:
           theme.palette.mode === "light"
             ? "rgb(242, 248, 253)"
             : "rgb(23, 17, 22)",
       }}
     >
-      <header
-      // style={{ position: "sticky", top: 0, width: "100%", zIndex: 100 }}
-      >
+      <header>
         <Box
           sx={{
             position: "fixed",
@@ -46,7 +47,13 @@ export function Layout(props: LayoutProps) {
 
         <Box
           sx={{
-            p: 2,
+            position: "fixed",
+            top: 0,
+            width: "100%",
+            p: 1,
+            zIndex: 1,
+            borderBottomRightRadius: 16,
+            borderBottomLeftRadius: 16,
             backgroundColor:
               theme.palette.mode === "light"
                 ? "primary.main"
@@ -54,7 +61,7 @@ export function Layout(props: LayoutProps) {
           }}
         >
           <Typography
-            variant="h1"
+            variant="h2"
             sx={{
               textAlign: "center",
               color: "#fff",
@@ -64,35 +71,44 @@ export function Layout(props: LayoutProps) {
               sx={{
                 display: {
                   xs: "none",
-                  md: "block",
+                  md: "inline-block",
                 },
               }}
+              component="span"
             >
               <Image
-                src={nixSnowflake}
+                src={nixWhite}
                 alt="nix-logo"
-                height={90}
+                height={50}
                 style={{
-                  marginBottom: "-1rem",
+                  marginBottom: "-0.5rem",
                 }}
               />
             </Box>
             <Box sx={{ ml: 1 }} component="span">{`noog\u03BBe`}</Box>
-            <IconButton sx={{ float: "right", top: "1em", right: "1em" }}>
-              <GitHubIcon
-                fontSize="large"
-                sx={{
-                  display: {
-                    xs: "none",
-                    md: "block",
-                  },
-                }}
-              />
-            </IconButton>
+            <Link href="https://github.com/hsjobeki/noogle">
+              <IconButton sx={{ float: "right", top: "0.5em", right: "1em" }}>
+                <GitHubIcon
+                  fontSize="large"
+                  sx={{
+                    display: {
+                      xs: "none",
+                      md: "inline-block",
+                    },
+                  }}
+                />
+              </IconButton>
+            </Link>
           </Typography>
         </Box>
       </header>
-      <main>
+      <main
+        style={{
+          marginTop: "6em",
+          maxHeight: "calc(100vh - 8em)",
+          overflowY: "scroll",
+        }}
+      >
         <Container sx={{ pt: 0 }} maxWidth="xl">
           {children}
         </Container>

components/preview/preview.tsx

@@ -32,7 +32,17 @@ export const Preview = (props: PreviewProps) => {
     ?.replace(".nix", "");
   const docsRef = `https://nixos.org/manual/nixpkgs/stable/#function-library-lib.${libName}.${name}`;
   return (
-    <Box sx={{ p: 1, width: "100%" }}>
+    <Box
+      sx={{
+        p: 1,
+        pt: 2,
+        mt: 2,
+        mb: -2,
+        width: "100%",
+        borderTop: "solid 1px",
+        borderTopColor: "primary.main",
+      }}
+    >
       <Typography variant="h2">{`${prefix}.${name}`}</Typography>
       <List sx={{ width: "100%" }}>
         <ListItem>

pages/index.tsx

@@ -5,10 +5,6 @@ import FunctionItem from "../components/functionItem/functionItem";
 import { NixType, nixTypes, MetaData, DocItem } from "../types/nix";
 import { Preview } from "../components/preview/preview";
 import metadata from "../models/data.json";
-// const mockData: FuncData[] = Object.entries(nixFuns).map(([key, value]) => ({
-//   name: key,
-//   info: value,
-// }));
 
 const data: MetaData = metadata as MetaData;
 
@@ -57,9 +53,6 @@ const filter =
           // const fn_from =
           const fn_to = args.at(-1);
           const parsedOutType = preProcess(fn_to);
-          if (name.includes("escapeShellArgs")) {
-            console.log({ args, inp_args: inpArgs, fn_to });
-          }
           return (
             from.some((f) => parsedInpTypes.join(" ").includes(f)) &&
             to.some((t) => parsedOutType?.includes(t))
@@ -138,6 +131,7 @@ export default function FunctionsPage() {
   return (
     <Box sx={{ ml: 2 }}>
       <BasicList
+        selected={selected}
         items={preRenderedItems}
         handleSearch={handleSearch}
         handleFilter={handleFilter}

public/white.svg

@@ -0,0 +1,188 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   inkscape:export-ydpi="600"
+   inkscape:export-xdpi="600"
+   inkscape:export-filename="/Users/samuel/Projects/nixos/nixos-artwork/logo/white.png"
+   sodipodi:docname="white.svg"
+   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
+   version="1.1"
+   id="svg2"
+   viewBox="0 0 501.56252 435.00001"
+   height="464"
+   width="535">
+  <defs
+     id="defs4">
+    <linearGradient
+       inkscape:collect="always"
+       id="main">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0"
+         offset="0"
+         id="stop915" />
+      <stop
+         id="stop917"
+         offset="0.23168644"
+         style="stop-color:#ffffff;stop-opacity:1" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1"
+         offset="1"
+         id="stop919" />
+    </linearGradient>
+    <linearGradient
+       y2="880.37714"
+       x2="-414.38654"
+       y1="782.33563"
+       x1="-584.19934"
+       gradientTransform="translate(864.69589,-1491.3405)"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient1299"
+       xlink:href="#main"
+       inkscape:collect="always" />
+    <linearGradient
+       y2="460.51822"
+       x2="389.57562"
+       y1="351.41116"
+       x1="200.59668"
+       gradientTransform="translate(210.82018,-765.27605)"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient1713"
+       xlink:href="#main"
+       inkscape:collect="always" />
+  </defs>
+  <sodipodi:namedview
+     inkscape:showpageshadow="false"
+     borderlayer="true"
+     inkscape:pagecheckerboard="false"
+     units="px"
+     inkscape:document-rotation="0"
+     fit-margin-bottom="0"
+     fit-margin-right="0"
+     fit-margin-left="0"
+     fit-margin-top="0"
+     inkscape:snap-global="true"
+     inkscape:window-maximized="1"
+     inkscape:window-y="605"
+     inkscape:window-x="1680"
+     inkscape:window-height="1407"
+     inkscape:window-width="2556"
+     showgrid="false"
+     inkscape:current-layer="layer1"
+     inkscape:document-units="px"
+     inkscape:cy="474.733"
+     inkscape:cx="19.850892"
+     inkscape:zoom="0.45238095"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="1"
+     borderopacity="1.0"
+     bordercolor="#666666"
+     pagecolor="#000000"
+     id="base" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     style="display:none"
+     transform="matrix(0.09048806,0,0,0.09048806,-14.15991,84.454917)"
+     inkscape:label="(pdf) background"
+     id="layer1"
+     inkscape:groupmode="layer">
+    <rect
+       y="-2102.4253"
+       x="-1045.6049"
+       height="7145.4614"
+       width="7947.0356"
+       id="rect995"
+       style="opacity:1;fill:#040404;fill-opacity:1;stroke-width:10.3605" />
+  </g>
+  <g
+     sodipodi:insensitive="true"
+     transform="translate(-156.48372,537.56136)"
+     style="display:inline;opacity:1"
+     inkscape:label="gradient-logo"
+     id="layer3"
+     inkscape:groupmode="layer">
+    <g
+       style="stroke-width:11.0512"
+       transform="matrix(0.09048806,0,0,0.09048806,142.32381,-453.10644)"
+       id="g955">
+      <g
+         transform="matrix(11.047619,0,0,11.047619,-1572.2888,9377.7107)"
+         id="g869">
+        <g
+           transform="rotate(-60,226.35754,-449.37199)"
+           id="g932"
+           style="stroke-width:11.0512">
+          <path
+             sodipodi:nodetypes="cccccccccc"
+             inkscape:connector-curvature="0"
+             id="path3336-6"
+             d="m 449.71876,-420.51322 122.19683,211.67512 -56.15706,0.5268 -32.6236,-56.8692 -32.85645,56.5653 -27.90237,-0.011 -14.29086,-24.6896 46.81047,-80.4901 -33.22946,-57.8257 z"
+             style="opacity:1;fill:url(#linearGradient1713);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:33.1535;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        </g>
+        <path
+           sodipodi:nodetypes="cccccccccc"
+           inkscape:connector-curvature="0"
+           id="path4260-0"
+           d="m 309.54892,-710.38827 122.19683,211.67512 -56.15706,0.5268 -32.6236,-56.8692 -32.85645,56.5653 -27.90237,-0.011 -14.29086,-24.6896 46.81047,-80.4901 -33.22946,-57.8256 z"
+           style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:url(#linearGradient1299);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:33.1535;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+        <use
+           x="0"
+           y="0"
+           xlink:href="#path3336-6"
+           inkscape:transform-center-x="124.43045"
+           inkscape:transform-center-y="151.59082"
+           id="use3439-6"
+           transform="rotate(60,728.23563,-692.24036)"
+           width="100%"
+           height="100%"
+           style="stroke-width:11.0512" />
+        <use
+           x="0"
+           y="0"
+           xlink:href="#path3336-6"
+           inkscape:transform-center-x="59.669705"
+           inkscape:transform-center-y="-139.94592"
+           id="use3449-5"
+           transform="rotate(180,477.5036,-570.81898)"
+           width="100%"
+           height="100%"
+           style="stroke-width:11.0512" />
+        <use
+           style="display:inline;stroke-width:11.0512"
+           x="0"
+           y="0"
+           xlink:href="#path4260-0"
+           id="use4354-5"
+           transform="rotate(120,407.33916,-716.08356)"
+           width="100%"
+           height="100%" />
+        <use
+           style="display:inline;stroke-width:11.0512"
+           x="0"
+           y="0"
+           xlink:href="#path4260-0"
+           id="use4362-2"
+           transform="rotate(-120,407.28823,-715.86995)"
+           width="100%"
+           height="100%" />
+      </g>
+    </g>
+  </g>
+</svg>

types/nix.ts

@@ -1,15 +1,3 @@
-// {
-//     "category": "./lib/customisation.nix",
-//     "name": "overrideDerivation",
-//     "fn_type": null,
-//     "description": [
-//       "`overrideDerivation drv f' takes a derivation (i.e., the result\nof a call to the builtin function `derivation') and returns a new\nderivation in which the attributes of the original are overridden\naccording to the function `f'.  The function `f' is called with\nthe original derivation attributes.",
-//       "`overrideDerivation' allows certain \"ad-hoc\" customisation\nscenarios (e.g. in ~/.config/nixpkgs/config.nix).  For instance,\nif you want to \"patch\" the derivation returned by a package\nfunction in Nixpkgs to build another version than what the\nfunction itself provides, you can do something like this:",
-//       "mySed = overrideDerivation pkgs.gnused (oldAttrs: {\nname = \"sed-4.2.2-pre\";\nsrc = fetchurl {\nurl = ftp://alpha.gnu.org/gnu/sed/sed-4.2.2-pre.tar.bz2;\nsha256 = \"11nq06d131y4wmf3drm0yk502d2xc6n5qy82cg88rb9nqd2lj41k\";\n};\npatches = [];\n});",
-//       "For another application, see build-support/vm, where this\nfunction is used to build arbitrary derivations inside a QEMU\nvirtual machine."
-//     ],
-//     "example": null
-//   },
 export type NixType = "attrset" | "list" | "string" | "int" | "bool" | "any";
 export const nixTypes: NixType[] = [
     "any",