wip

goccy · Jan 9, 2025 · 35bdbc8 · 35bdbc8
1 parent c5d3cc3
commit 35bdbc8
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 74 deletions.
diff --git a/docs/playground/package-lock.json b/docs/playground/package-lock.json
diff --git a/docs/playground/package.json b/docs/playground/package.json
@@ -16,7 +16,9 @@
     "@mui/icons-material": "^6.3.1",
     "@mui/material": "^6.3.0",
     "@types/golang-wasm-exec": "^1.15.2",
+    "@types/json2mq": "^0.2.2",
     "@xterm/addon-fit": "^0.10.0",
+    "json2mq": "^0.2.0",
     "monaco-editor": "^0.52.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

diff --git a/docs/playground/src/App.css b/docs/playground/src/App.css
@@ -1,42 +1,7 @@
 #root {
-  max-width: 1280px;
+  min-width: 300px;
   margin: 0 auto;
   padding: 2rem;
   text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
+  background-color: white;
 }
diff --git a/docs/playground/src/App.tsx b/docs/playground/src/App.tsx
@@ -1,5 +1,5 @@
 /// <reference types="vite-plugin-svgr/client" />
-import { AppBar, Toolbar, Typography, Box, Stack, SvgIcon, Button, TextField, Tabs, Tab, Tooltip, TooltipProps, tooltipClasses, styled, Snackbar, SnackbarCloseReason } from '@mui/material';
+import { AppBar, Toolbar, Typography, Box, Stack, SvgIcon, Button, TextField, Tabs, Tab, Tooltip, TooltipProps, tooltipClasses, styled, Snackbar, SnackbarCloseReason, IconButton } from '@mui/material';
 import GitHub from '@mui/icons-material/GitHub';
 import Share from '@mui/icons-material/Share';
 import ContentCopy from '@mui/icons-material/ContentCopy';
@@ -15,6 +15,8 @@ import yamlWorker from "./worker?worker";
 import '@xterm/xterm/css/xterm.css';
 import { ArrowBackIosNew } from '@mui/icons-material'
 import { Terminal } from '@xterm/xterm';
+import json2mq from 'json2mq';
+import useMediaQuery from '@mui/material/useMediaQuery';
 
 const themeBlack = '#313131';
 const themeWhite = 'white';
@@ -24,12 +26,13 @@ const Header = (content: any) => {
   const shareURL = `${window.location.origin}${window.location.pathname}?content=${v}`;
   const [open, setOpen] = useState(false);
   const [shareURLFieldVisibility, setShareURLFieldVisibility] = useState('hidden');
+
   return (
     <Box sx={{ flexGrow: 1 }}>
       <AppBar position="fixed">
         <Toolbar sx={{ backgroundColor: themeBlack }}>
-          <SvgIcon sx={{ md: 2, transform: 'scale(1.8)', marginRight: 3 }}><YAMLIcon /></SvgIcon>
-          <Typography variant="h5" sx={{ flexGrow: 1, textAlign: 'left' }}>
+          <Logo/>
+          <Typography sx={{ flexGrow: 1, textAlign: 'left' }}>
             goccy/go-yaml Playground
           </Typography>
           <Stack sx={{
@@ -66,43 +69,86 @@ const Header = (content: any) => {
               message="Copied"
             />
           </Stack>
-          <Button variant="contained" sx={{
-            backgroundColor: themeWhite,
-            color: themeBlack,
-            marginLeft: 4,
-            marginRight: 4,
-            textTransform: 'none',
-            fontWeight: 'bold',
-            paddingRight: 2,
-            paddingLeft: 2,
-            borderRadius: 0,
-          }}
-           startIcon={<Share sx={{ color: themeBlack }} />}
-           onClick={() => {
-            setShareURLFieldVisibility('visible');
-           }}
-           >
-            Share
-          </Button>
-          <Button variant="contained" sx={{
-            color: themeBlack,
-            backgroundColor: 'white',
-            fontWeight: 'bold',
-            paddingRight: 2,
-            paddingLeft: 2,
-            textTransform: 'none',
-          }}
-            startIcon={<GitHub sx={{ color: themeBlack }}></GitHub>}
-            href="https://github.com/goccy/go-yaml"
-          >
-            Visit Our GitHub
-          </Button>
+          <ShareLink setShareURLFieldVisibility={setShareURLFieldVisibility}></ShareLink>
+          <GitHubLink></GitHubLink>
         </Toolbar>
       </AppBar>
     </Box>
   )
 };
 
+const Logo = () => {
+  return <SvgIcon sx={{ xs: 1, md: 2, transform: 'scale(1.8)', marginRight: 3 }}><YAMLIcon /></SvgIcon>;
+}
+
+const ShareLink = (setShareURLFieldVisibility: any) => {
+  const isNotXS = useMediaQuery(
+    json2mq({
+      minWidth: 400,
+    }),
+  );
+
+  if (isNotXS) {
+    return (
+      <Button variant="contained" sx={{
+        backgroundColor: themeWhite,
+        color: themeBlack,
+        marginLeft: 4,
+        marginRight: 4,
+        textTransform: 'none',
+        fontWeight: 'bold',
+        paddingRight: 2,
+        paddingLeft: 2,
+        borderRadius: 0,
+      }}
+        startIcon={<Share sx={{ color: themeBlack }} />}
+        onClick={() => {
+          setShareURLFieldVisibility.setShareURLFieldVisibility('visible');
+        }}
+      >
+        Share
+      </Button>
+    )
+  }
+  return (
+    <IconButton onClick={() => {
+      setShareURLFieldVisibility.setShareURLFieldVisibility('visible');
+    }}>
+      <Share sx={{color: themeWhite }}></Share>
+    </IconButton>
+  )
+}
+
+const GitHubLink = () => {
+  const isNotXS = useMediaQuery(
+    json2mq({
+      minWidth: 400,
+    }),
+  );
+  if (isNotXS) {
+    return (
+      <Button variant="contained" sx={{
+        color: themeBlack,
+        backgroundColor: 'white',
+        fontWeight: 'bold',
+        paddingRight: 2,
+        paddingLeft: 2,
+        textTransform: 'none',
+      }}
+        startIcon={<GitHub sx={{ color: themeBlack }}></GitHub>}
+        href="https://github.com/goccy/go-yaml"
+      >
+        Visit Our GitHub
+      </Button>
+    )
+  }
+  return (
+    <IconButton href="https://github.com/goccy/go-yaml">
+      <GitHub sx={{ color: themeWhite }}></GitHub>
+    </IconButton>
+  )
+};
+
 function TabPanel(props: { children: any, value: number, index: number }) {
   const { children, value, index, ...other } = props;
 
@@ -228,7 +274,7 @@ const EmptyTokenContainer = () => {
   )
 };
 
-const TokenContainer = ({ children }: {children: any}) => {
+const TokenContainer = ({ children }: { children: any }) => {
   return (
     <Box sx={{
       textAlign: 'left',
@@ -458,7 +504,6 @@ function App() {
     workerRef.current.onmessage = (event) => {
       const data = event.data as YAMLProcessResult[];
       data.forEach((v) => {
-        console.log(v);
         switch (v.type) {
           case YAMLProcessResultType.Decode:
             setOut(v.result as string);
@@ -491,7 +536,6 @@ function App() {
   }, []);
   const onChange = () => {
     const code = editorRef?.current?.getValue()!;
-    console.log('code = ', code);
     setContent(code);
     if (workerRef.current) {
       workerRef.current.postMessage(code);