hsjobeki/noogle
1
1
Fork 0
mirror of https://github.com/hsjobeki/noogle.git synced 2024-12-25 06:53:17 +03:00
Code Issues Projects Releases Wiki Activity

improve: mobile & dark theme

Browse Source
This commit is contained in:
hsjobeki 2022-12-12 14:24:16 +01:00
parent 9d8b3f6c8e
commit 1b72d4f6c4
7 changed files with 151 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/functionItem/functionItem.tsx
View File

@ -36,7 +36,7 @@ export default function FunctionItem(props: FunctionItemProps) {
cursor: !selected ? "pointer" : "default",
display: "flex",
justifyContent: "left",
px: 2,
px: { xs: 0, md: 2 },
py: 1,
color: selected ? "primary.main" : undefined,
borderColor: selected ? "primary.light" : "none",

41
components/layout/layout.tsx
View File

@ -5,6 +5,7 @@ import {
Link,
useTheme,
IconButton,
Tooltip,
} from "@mui/material";
import { Image } from "../image";
import nixSnowflake from "../../public/nix-snowflake.svg";
@ -23,18 +24,16 @@ export function Layout(props: LayoutProps) {
<Box
sx={{
height: "100vh",
overflow: "hidden",
overflow: "scroll",
bgcolor:
theme.palette.mode === "light"
? "rgb(242, 248, 253)"
: "rgb(23, 17, 22)",
theme.palette.mode === "light" ? "rgb(242, 248, 253)" : "#070c16",
}}
>
<header>
<Box
sx={{
position: "fixed",
top: "15rem",
// position: "fixed",
// top: "15rem",
height: "100%",
width: "100%",
zIndex: 0,
@ -47,8 +46,8 @@ export function Layout(props: LayoutProps) {
<Box
sx={{
position: "fixed",
top: 0,
// position: "fixed",
// top: 0,
width: "100%",
p: 1,
zIndex: 1,
@ -61,10 +60,13 @@ export function Layout(props: LayoutProps) {
}}
>
<Typography
variant="h2"
variant="h1"
component="h1"
sx={{
textAlign: "center",
color: "#fff",
fontSize: "30pt",
lineHeight: 1.2,
}}
>
<Box
@ -79,17 +81,23 @@ export function Layout(props: LayoutProps) {
<Image
src={nixWhite}
alt="nix-logo"
height={50}
height={25}
style={{
marginBottom: "-0.5rem",
marginBottom: "0rem",
}}
/>
</Box>
<Box sx={{ ml: 1 }} component="span">{`noog\u03BBe`}</Box>
<Link href="https://github.com/hsjobeki/noogle">
<IconButton sx={{ float: "right", top: "0.5em", right: "1em" }}>
<Tooltip title="Contribute on Github">
<IconButton
// ButtonProps={{ ref: iconRef }}
// buttonProps
// ref={iconRef}
sx={{ float: "right", top: "0.6rem", right: "1em", p: 0 }}
>
<GitHubIcon
fontSize="large"
// fontSize=""
sx={{
display: {
xs: "none",
@ -98,16 +106,15 @@ export function Layout(props: LayoutProps) {
}}
/>
</IconButton>
</Tooltip>
</Link>
</Typography>
</Box>
</header>
<main
style={{
marginTop: "6em",
maxHeight: "calc(100vh - 8em)",
overflowY: "scroll",
overflowX: "hidden",
marginTop: "1rem",
// height:
width: "100vw",
}}
>

11
components/preview/preview.module.css
View File

@ -1,4 +1,11 @@
.hljs {
padding: 0 !important;
.hljs {
padding-left: 0 !important;
padding-top: 0 !important;
}
.hljs .pre {
width: 100%;
}
.hljs .nix {
overflow-x: scroll;
}

121
components/preview/preview.tsx
View File

@ -1,18 +1,17 @@
import React, { useEffect } from "react";
import {
Box,
Container,
IconButton,
Link,
List,
ListItem,
ListItemButton,
ListItemIcon,
ListItemSecondaryAction,
ListItemText,
Tooltip,
Typography,
useTheme,
Link as MuiLink,
} from "@mui/material";
// import CloseIcon from "@mui/icons-material/Close";
import Highlight from "react-highlight";
import LocalLibraryIcon from "@mui/icons-material/LocalLibrary";
import InputIcon from "@mui/icons-material/Input";
@ -23,10 +22,11 @@ import ExpandLessIcon from "@mui/icons-material/ExpandLess";
import styles from "./preview.module.css";
import rehypeHighlight from "rehype-highlight";
import nix from "highlight.js/lib/languages/nix";
import Link from "next/link";
// import "highlight.js/styles/github-dark.css";
// import "highlight.js/styles/github.css";
// import hljs from "highlight.js";
// needed for nextjs to import the classes of github theme
import "highlight.js/styles/github.css";
interface PreviewProps {
docItem: DocItem;
handleClose: () => void;
@ -35,39 +35,28 @@ interface PreviewProps {
export const Preview = (props: PreviewProps) => {
const { docItem, handleClose } = props;
const { name, description, category, example, fn_type } = docItem;
const theme = useTheme();
const getGeneratedExamples = () => {
if (description) {
const regex = /(```.+?```)/gms;
console.log({ description, regex });
if (typeof description === "object") {
return description
.join(" ")
.match(regex)
?.join("\n#---\n")
?.replaceAll("```nix", "")
?.replaceAll("```", "");
useEffect(() => {
if (theme.palette.mode === "dark") {
// @ts-ignore - dont check type of css module
import("highlight.js/styles/github-dark.css");
} else {
return description
.match(regex)
?.join("\n#---\n")
?.replaceAll("```nix", "")
?.replaceAll("```", "");
// @ts-ignore - dont check type of css module
import("highlight.js/styles/github.css");
}
}
};
}, [theme]);
const finalExample = example || getGeneratedExamples();
console.log({ finalExample });
const prefix = category.split(/([\/.])/gm).at(4) || "builtins";
const libName = category
.match(/(?:[a-zA-Z]*)\.nix/gm)?.[0]
?.replace(".nix", "");
const docsRef = `https://nixos.org/manual/nixpkgs/stable/#function-library-lib.${libName}.${name}`;
const libDocsRef = `https://nixos.org/manual/nixpkgs/stable/#function-library-lib.${libName}.${name}`;
const builtinsDocsRef = `https://nixos.org/manual/nix/stable/language/builtins.html#builtins-${name}`;
return (
<Box
sx={{
p: 1,
p: { xs: 0.5, md: 1 },
width: "100%",
overflow: "none",
}}
@ -97,16 +86,26 @@ export const Preview = (props: PreviewProps) => {
</IconButton>
</Tooltip>
</Box>
<List sx={{ width: "100%" }}>
<ListItem sx={{ flexDirection: { xs: "column", sm: "row" } }}>
<List sx={{ width: "100%" }} disablePadding>
<ListItem sx={{ flexDirection: { xs: "column", sm: "row" }, px: 0 }}>
<ListItemIcon>
<Tooltip title={"read docs"}>
<MuiLink sx={{ m: "auto", color: "primary.light" }}>
<Link
href={prefix != "builtins" ? libDocsRef : builtinsDocsRef}
>
<LocalLibraryIcon sx={{ m: "auto" }} />
</Link>
</MuiLink>
</Tooltip>
</ListItemIcon>
<ListItemText
sx={{
overflow: "hidden",
textOverflow: "ellipsis",
alignSelf: "flex-start",
width: "100%",
px: 0,
}}
primaryTypographyProps={{
color: "text.secondary",
@ -117,7 +116,24 @@ export const Preview = (props: PreviewProps) => {
fontSize: "1rem",
component: "div",
}}
primary={"nixpkgs/" + category.replace("./", "")}
primary={
prefix !== "builtins" ? (
<Tooltip title={"browse source code"}>
<MuiLink>
<Link
href={`https://github.com/NixOS/nixpkgs/blob/master/${category.replace(
"./",
""
)}`}
>
{"github:NixOS/nixpkgs/" + category.replace("./", "")}
</Link>
</MuiLink>
</Tooltip>
) : (
"github:NixOS/nix/" + category.replace("./", "")
)
}
secondary={
<Container
component={"div"}
@ -154,8 +170,6 @@ export const Preview = (props: PreviewProps) => {
rehypePlugins={[
[rehypeHighlight, { languages: { nix } }],
]}
// languages: { nix } }}
>
{description}
</ReactMarkdown>
@ -164,13 +178,25 @@ export const Preview = (props: PreviewProps) => {
}
/>
</ListItem>
<ListItem sx={{ flexDirection: { xs: "column", sm: "row" } }}>
<ListItem sx={{ flexDirection: { xs: "column", sm: "row" }, px: 0 }}>
<ListItemIcon>
<Tooltip title={"browse source code"}>
<MuiLink sx={{ m: "auto", color: "primary.light" }}>
<Link
href={`https://github.com/NixOS/nixpkgs/blob/master/${category.replace(
"./",
""
)}`}
>
<InputIcon sx={{ m: "auto" }} />
</Link>
</MuiLink>
</Tooltip>
</ListItemIcon>
<ListItemText
sx={{
overflow: "hidden",
width: "100%",
textOverflow: "ellipsis",
alignSelf: "flex-start",
}}
@ -190,39 +216,44 @@ export const Preview = (props: PreviewProps) => {
sx={{
backgroundColor: "background.paper",
flexDirection: { xs: "column", sm: "row" },
px: 0,
}}
>
{example && (
<ListItemIcon>
<CodeIcon sx={{ m: "auto" }} />
</ListItemIcon>
)}
{example && (
<ListItemText
sx={{
overflow: "hidden",
textOverflow: "ellipsis",
alignSelf: "flex-start",
width: "100%",
px: 0,
}}
disableTypography
primary={
finalExample && (
<Typography sx={{ color: "text.secondary" }}>
Example
</Typography>
)
}
secondary={
finalExample ? (
<Box sx={{ mt: -2 }}>
<Box
sx={{
"&.MuiBox-root>pre": {
width: "100%",
},
}}
>
<Highlight className={`nix ${styles.hljs}`}>
{finalExample}
{example}
</Highlight>
</Box>
) : (
<Typography
sx={{ color: "text.secondary" }}
>{`no example yet provided`}</Typography>
)
}
/>
)}
</ListItem>
</List>
</Box>

38
package-lock.json generated
View File

@ -19,13 +19,13 @@
"eslint": "8.27.0",
"eslint-config-next": "13.0.2",
"highlight.js": "^11.7.0",
"highlightjs-copy": "^1.0.3",
"next": "13.0.2",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-highlight": "^0.15.0",
"react-markdown": "^8.0.4",
"rehype-highlight": "^6.0.0",
"remark-highlight.js": "^7.0.1",
"typescript": "4.8.4"
},
"devDependencies": {
@ -2831,6 +2831,11 @@
"node": ">=12.0.0"
}
},
"node_modules/highlightjs-copy": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/highlightjs-copy/-/highlightjs-copy-1.0.3.tgz",
"integrity": "sha512-vXHBmzz7IuJg8f5ixX7qxhfCCDnEQCXRuIzcd7yTblJazZT3ZkaRto0md8IfBu86JdK4VRIdKMubxKt7kwNGfg=="
},
"node_modules/hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@ -4360,21 +4365,6 @@
"url": "https://opencollective.com/unified"
}
},
"node_modules/remark-highlight.js": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/remark-highlight.js/-/remark-highlight.js-7.0.1.tgz",
"integrity": "sha512-ihXPWmg4l55rZ/wREHtEdqXEuVHfE8TvS0UMCemd4lKA1t7ts13xvV3pVLK4vhaeDjSxOroo6U7E4Xxf2wVS4A==",
"dependencies": {
"@types/mdast": "^3.0.0",
"lowlight": "^2.0.0",
"unified": "^10.0.0",
"unist-util-visit": "^4.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/remark-parse": {
"version": "10.0.1",
"resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-10.0.1.tgz",
@ -7040,6 +7030,11 @@
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.7.0.tgz",
"integrity": "sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ=="
},
"highlightjs-copy": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/highlightjs-copy/-/highlightjs-copy-1.0.3.tgz",
"integrity": "sha512-vXHBmzz7IuJg8f5ixX7qxhfCCDnEQCXRuIzcd7yTblJazZT3ZkaRto0md8IfBu86JdK4VRIdKMubxKt7kwNGfg=="
},
"hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@ -8004,17 +7999,6 @@
"unist-util-visit": "^4.0.0"
}
},
"remark-highlight.js": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/remark-highlight.js/-/remark-highlight.js-7.0.1.tgz",
"integrity": "sha512-ihXPWmg4l55rZ/wREHtEdqXEuVHfE8TvS0UMCemd4lKA1t7ts13xvV3pVLK4vhaeDjSxOroo6U7E4Xxf2wVS4A==",
"requires": {
"@types/mdast": "^3.0.0",
"lowlight": "^2.0.0",
"unified": "^10.0.0",
"unist-util-visit": "^4.0.0"
}
},
"remark-parse": {
"version": "10.0.1",
"resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-10.0.1.tgz",

1
package.json
View File

@ -21,6 +21,7 @@
"eslint": "8.27.0",
"eslint-config-next": "13.0.2",
"highlight.js": "^11.7.0",
"highlightjs-copy": "^1.0.3",
"next": "13.0.2",
"react": "18.2.0",
"react-dom": "18.2.0",

2
styles/theme/darkThemeOptions.ts
View File

@ -4,7 +4,7 @@ const darkThemeOptions: ThemeOptions = {
palette: {
mode: "dark",
background: {
paper: "#031456 "
paper: "#0f192c"
},
primary: {
main: "#6586c8"