Skip to content

Commit 38f4fe0

Browse files
FredthedoggyFredthedoggy
committed
Toml
1 parent 5f76557 commit 38f4fe0

File tree

5 files changed

+139
-2
lines changed

5 files changed

+139
-2
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"react-json-view": "^1.21.3",
2525
"react-simple-code-editor": "^0.11.0",
2626
"styled-components": "^5.3.3",
27+
"toml": "^3.0.0",
2728
"yaml": "^2.0.0-10"
2829
},
2930
"devDependencies": {

‎pages/_app.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ function Toolbox({Component, pageProps}: AppProps) {
5151
}
5252
`}><p css={tw`pl-3 ml-1 inline`}>More Tools</p>
5353
<div css={tw`ml-1 pr-3 mr-1 inline`}><FontAwesomeIcon icon={faChevronDown} size={"1x"}/></div>
54-
<div css={tw`hidden absolute bg-gray-800 w-full rounded-b-md`}
54+
<div css={tw`hidden absolute bg-gray-800 w-full rounded-b-md z-30`}
5555
className={"dropdown"}>
5656
<p css={tw`px-3 mx-1 pt-3 font-bold pb-1 hover:cursor-default`}>Converters</p>
5757
<p css={tw`px-3 mx-1 ml-2 pb-1 hover:cursor-default`}>ChatChat</p>
@@ -71,6 +71,9 @@ function Toolbox({Component, pageProps}: AppProps) {
7171
<Link href={"/validators/properties"}>
7272
<p css={tw`px-2 mx-1 ml-3 hover:cursor-pointer pb-2`}>Properties</p>
7373
</Link>
74+
<Link href={"/validators/toml"}>
75+
<p css={tw`px-2 mx-1 ml-3 hover:cursor-pointer pb-2`}>Toml</p>
76+
</Link>
7477
</div>
7578
</div>
7679
<Link href={"https://discord.gg/helpchat"}>

‎pages/validators/toml.tsx

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import type {NextPage} from 'next'
2+
import Head from 'next/head'
3+
import tw, {css} from 'twin.macro'
4+
import {TextBox} from "../../components/TextBox";
5+
import {useEffect, useState} from "react";
6+
import {parse} from 'toml'
7+
import dynamic from "next/dynamic";
8+
import duotoneDark from 'prism-react-renderer/themes/duotoneDark';
9+
import {useRouter} from "next/router";
10+
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
11+
import {faLink} from "@fortawesome/free-solid-svg-icons";
12+
13+
const ReactJson = dynamic(import('react-json-view'), {ssr: false});
14+
15+
const Home: NextPage = () => {
16+
17+
const router = useRouter();
18+
19+
const [config, setConfig] = useState("");
20+
const [parsedConfig, setParsedConfig] = useState<any>({});
21+
const [error, setError] = useState<false | string>(false);
22+
23+
useEffect(() => {
24+
if (!router.query.data) return;
25+
if (!(typeof router.query.data === 'string')) return;
26+
try {
27+
const toml = Buffer.from(router.query.data, "base64").toString("utf8");
28+
setConfig(toml.toString())
29+
} catch (e) {
30+
return;
31+
}
32+
}, [router.query.data]);
33+
34+
useEffect(() => {
35+
let configObject;
36+
try {
37+
configObject = parse(config);
38+
if (!configObject || !(typeof configObject === 'object')) {
39+
setError("must be object");
40+
setParsedConfig({})
41+
} else {
42+
setError(false);
43+
setParsedConfig(JSON.parse(JSON.stringify(configObject)))
44+
}
45+
} catch (e: any) {
46+
if (e.line && e.column) {
47+
setError("Parsing error on line " + e.line + ", column " + e.column +
48+
": " + e.message);
49+
} else {
50+
setError(e.message);
51+
}
52+
setParsedConfig({})
53+
}
54+
}, [config])
55+
56+
return (
57+
<div>
58+
<Head>
59+
<title>Toml Validator</title>
60+
<meta name="description" content="Validate Toml Files"/>
61+
</Head>
62+
63+
<main css={css`${tw`flex flex-col`} height: calc(100vh - 3.5rem)`}>
64+
<div css={tw`text-white bg-blue-500 w-full md:px-8 p-16 h-48 text-center`}>
65+
<p css={tw`text-3xl font-bold`}>HelpChat</p>
66+
<p css={tw`text-lg`}>Toml Validator</p>
67+
</div>
68+
<div css={tw`flex flex-col md:flex-row flex-grow flex-shrink h-full`}>
69+
<div css={css`
70+
height: calc(100vh - 15.5em);
71+
${tw`md:w-1/2 p-4 pt-1 pr-2 md:max-width[50vw]`}
72+
`}>
73+
<TextBox title={"Toml Config"} code={config} editor={setConfig} language={"toml"}/>
74+
</div>
75+
<div css={css`
76+
height: calc(100vh - 15.5em);
77+
${tw`w-full md:w-1/2 p-4 pl-2 pt-1 flex flex-col md:max-width[50vw]`}
78+
`}>
79+
<div css={tw`flex flex-col h-full w-full pt-1`}>
80+
<div css={tw`flex flex-row pl-2`}>
81+
<p css={tw`text-xl font-semibold mx-auto mb-2`}>JSON Object Dumb</p>
82+
<div css={tw`flex flex-row h-8`}>
83+
<div css={tw`py-1 px-2 bg-green-400 rounded-md hover:cursor-pointer`}
84+
onClick={() => {
85+
router.query.data = Buffer.from(config).toString("base64");
86+
router.push(router);
87+
}}>
88+
<FontAwesomeIcon icon={faLink} size="1x"/>
89+
</div>
90+
</div>
91+
</div>
92+
<div css={css`${tw`rounded-md overflow-auto h-full`} background-color: #2a2734`}>
93+
<div css={tw`py-2 px-4 text-base`}>
94+
{!(error || !parsedConfig) ? <ReactJson src={parsedConfig} theme={{
95+
base00: duotoneDark.plain.backgroundColor ?? "",
96+
base01: duotoneDark.styles[2].style.color ?? "",
97+
base02: duotoneDark.styles[1].style.color ?? "",
98+
base03: duotoneDark.styles[2].style.color ?? "",
99+
base04: duotoneDark.styles[4].style.color ?? "",
100+
base05: duotoneDark.styles[4].style.color ?? "",
101+
base06: duotoneDark.styles[5].style.color ?? "",
102+
base07: duotoneDark.styles[3].style.color ?? "",
103+
base08: duotoneDark.styles[7].style.color ?? "",
104+
base09: duotoneDark.styles[6].style.color ?? "",
105+
base0A: duotoneDark.styles[9].style.color ?? "",
106+
base0B: duotoneDark.styles[10].style.color ?? "",
107+
base0C: duotoneDark.styles[4].style.color ?? "",
108+
base0D: duotoneDark.styles[2].style.color ?? "",
109+
base0E: duotoneDark.styles[2].style.color ?? "",
110+
base0F: duotoneDark.styles[2].style.color ?? "",
111+
}}/> :
112+
<span css={
113+
css`
114+
${tw`text-base text-white whitespace-pre`}
115+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
116+
`}>{error}</span>
117+
}
118+
</div>
119+
</div>
120+
</div>
121+
</div>
122+
</div>
123+
</main>
124+
</div>
125+
)
126+
}
127+
128+
export default Home

‎pages/validators/yaml.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const Home: NextPage = () => {
3535
let configObject;
3636
try {
3737
configObject = parse(config);
38-
if (!configObject || !(configObject instanceof Object)) {
38+
if (!configObject || !(typeof configObject === 'object')) {
3939
setError("must be object");
4040
setParsedConfig({})
4141
} else {

‎yarn.lock

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2701,6 +2701,11 @@ to-regex-range@^5.0.1:
27012701
dependencies:
27022702
is-number "^7.0.0"
27032703

2704+
toml@^3.0.0:
2705+
version "3.0.0"
2706+
resolved "https://registry.yarnpkg.com/toml/-/toml-3.0.0.tgz#342160f1af1904ec9d204d03a5d61222d762c5ee"
2707+
integrity sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w==
2708+
27042709
tr46@~0.0.3:
27052710
version "0.0.3"
27062711
resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"

0 commit comments

Comments
 (0)