Option for a minimal header

Author: dionjwa

editor/src/components/header/MainHeader.tsx

@@ -22,6 +22,7 @@ export const capitalize = (str: string): string => {
 
 export const MainHeader: React.FC = () => {
   const [_edit, setEdit] = useHashParamBoolean("edit");
+  const [minimalHeader] = useHashParamBoolean("minimalheader");
   const [isLargerThan400] = useMediaQuery("(min-width: 400px)");
 
   // only show the edit button if the command points to a script in the inputs
@@ -90,30 +91,32 @@ export const MainHeader: React.FC = () => {
       >
         Markdown
       </Button>
-      <HStack
-        borderLeft={"1px"}
-        right={0}
-        px={4}
-        bg={"gray.100"}
-        justifyContent={"space-around"}
-        h={"headerHeight"}
-        w={"16rem"}
-      >
-        {icon(
-          Gear,
-          "settings",
-          () => setShownPanel(shownPanel === "settings" ? null : "settings"),
-          true
-        )}
-        {icon(
-          QuestionMark,
-          "docs",
-          () => setShownPanel(shownPanel === "docs" ? null : "docs"),
-          true
-        )}
-        <ButtonCopyExternalLink />
-        {icon(X, "close", () => setEdit(false))}
-      </HStack>
+      {!minimalHeader && (
+        <HStack
+          borderLeft={"1px"}
+          right={0}
+          px={4}
+          bg={"gray.100"}
+          justifyContent={"space-around"}
+          h={"headerHeight"}
+          w={"16rem"}
+        >
+          {icon(
+            Gear,
+            "settings",
+            () => setShownPanel(shownPanel === "settings" ? null : "settings"),
+            true
+          )}
+          {icon(
+            QuestionMark,
+            "docs",
+            () => setShownPanel(shownPanel === "docs" ? null : "docs"),
+            true
+          )}
+          <ButtonCopyExternalLink />
+          {icon(X, "close", () => setEdit(false))}
+        </HStack>
+      )}
     </HStack>
   );
 };

editor/src/components/sections/PanelCode.tsx

@@ -36,6 +36,7 @@ const LocalEditor: React.FC<{
       hidemenuififrame: true,
       mode: "markdown",
       theme: themeOptions?.theme || "vs-light",
+      hideLineNumbers: true,
     });
     return `https://editor.mtfm.io/#?hm=disabled&options=${options}`;
   };

…nts/sections/settings/EdiDisplayMode.tsx …ts/sections/settings/EditDisplayMode.tsxeditor/src/components/sections/settings/EdiDisplayMode.tsx renamed to editor/src/components/sections/settings/EditDisplayMode.tsx editor/src/components/sections/settings/EdiDisplayMode.tsx renamed to editor/src/components/sections/settings/EditDisplayMode.tsx

@@ -33,7 +33,7 @@ const validationSchema = yup.object({
 
 interface FormType extends yup.InferType<typeof validationSchema> {}
 
-export const EdiDisplayMode: React.FC = () => {
+export const EditDisplayMode: React.FC = () => {
   const [options, setOptions] = useOptions();
 
   const onSubmit = useCallback(

editor/src/components/sections/settings/EditMinimalHeader.tsx

@@ -0,0 +1,26 @@
+import { useCallback } from "react";
+
+import { Checkbox, Text, VStack } from "@chakra-ui/react";
+import { useHashParamBoolean } from "@metapages/hash-query/react-hooks";
+
+export const EditMinimalHeader: React.FC = () => {
+  const [minimalHeader, setMinimalHeader] =
+    useHashParamBoolean("minimalheader");
+
+  const handleChange = useCallback(() => {
+    // console.log("minimalheader", values.minimalheader);
+    setMinimalHeader(!minimalHeader);
+  }, [minimalHeader, setMinimalHeader]);
+
+  return (
+    <VStack align="flex-start" w="100%" minW={"100%"} p={6}>
+      <Text fontWeight={700}>Minimal Header</Text>
+      <Checkbox
+        id="minimalheader"
+        name="minimalheader"
+        isChecked={minimalHeader}
+        onChange={handleChange}
+      ></Checkbox>
+    </VStack>
+  );
+};

editor/src/components/sections/settings/SectionOptions.tsx

@@ -6,7 +6,8 @@ import { EditBgColor } from "./EditBgColor";
 import { EditButtonSettings } from "./EditButtonSettings";
 import { EditColorScheme } from "./EditColorScheme";
 import { EditEditorWidth } from "./EditEditorWidth";
-import { EdiDisplayMode } from "./EdiDisplayMode";
+import { EditDisplayMode } from "./EditDisplayMode";
+import { EditMinimalHeader } from "./EditMinimalHeader";
 
 export const SectionOptions: React.FC = () => {
   return (
@@ -19,13 +20,15 @@ export const SectionOptions: React.FC = () => {
     >
       <EditButtonSettings />
       <Divider />
-      <EdiDisplayMode />
+      <EditDisplayMode />
       <Divider />
       <EditColorScheme />
       <Divider />
       <EditBgColor />
       <Divider />
       <EditEditorWidth />
+      <Divider />
+      <EditMinimalHeader />
     </VStack>
   );
 };

justfile

@@ -46,6 +46,7 @@ publish: _ensure_deployctl
   cp -r editor/dist deploy/editor
   cp -r worker/server.ts deploy/
   cp -r worker/index.html deploy/
+  cp -r worker/public deploy/
   cd deploy
   deployctl deploy --project=metaframe-mdv2 --prod server.ts