From 9be6b01110045dc2baa56ba1beb98be182b633b3 Mon Sep 17 00:00:00 2001 From: Guillaume Date: Tue, 7 May 2024 11:36:34 +0200 Subject: [PATCH] Add json formatter tool --- components/card.tsx | 15 +- pages/brand.tsx | 79 +++-- pages/tools/index.tsx | 11 + pages/tools/json-formatter-beautifier.tsx | 316 ++++++++++++++++++ .../json-formatter-beautifier.svg | 23 ++ 5 files changed, 420 insertions(+), 24 deletions(-) create mode 100644 pages/tools/json-formatter-beautifier.tsx create mode 100644 public/images/illustrations/json-formatter-beautifier.svg diff --git a/components/card.tsx b/components/card.tsx index a0711887..c40b52cb 100644 --- a/components/card.tsx +++ b/components/card.tsx @@ -9,6 +9,8 @@ const Card: FunctionComponent<{ cover?: boolean; border?: boolean; borderColor?: string; + backgroundColor?: string; + btnLight?: boolean; // synchronize colors between border and link synchronizedColors?: boolean; }> = function (props) { @@ -26,7 +28,10 @@ const Card: FunctionComponent<{ className={`card ${border ? 'card-border' : ''} d-flex ${ props.vertical ? 'flex-column' : 'flex-column flex-lg-row' } flex-fill shadow-light-lg text-center h-100`} - style={{ borderTopColor: props.borderColor }} + style={{ + borderTopColor: props.borderColor, + backgroundColor: props.backgroundColor + }} > {props.data.imageSrc && (
1 ? '' : 'mt-auto' }`} style={{ @@ -106,7 +113,9 @@ const Card: FunctionComponent<{ ) : ( 1 ? '' : 'mt-auto' }`} href={link.src} diff --git a/pages/brand.tsx b/pages/brand.tsx index db81983a..5fb34533 100644 --- a/pages/brand.tsx +++ b/pages/brand.tsx @@ -24,7 +24,7 @@ const Brand: FunctionComponent = function () {
+
+
+
+
+ +
+
+
diff --git a/pages/tools/index.tsx b/pages/tools/index.tsx index 39ea054d..edacdba1 100644 --- a/pages/tools/index.tsx +++ b/pages/tools/index.tsx @@ -84,6 +84,17 @@ const tools = [ } ], imageSrc: '/images/illustrations/http-headers-analyzer.svg' + }, + { + title: 'Online JSON beautifier and formatter', + description: 'Format and beautify your JSON data online', + links: [ + { + src: '/tools/json-formatter-beautifier/', + text: 'Format JSON' + } + ], + imageSrc: '/images/illustrations/json-formatter-beautifier.svg' } ]; diff --git a/pages/tools/json-formatter-beautifier.tsx b/pages/tools/json-formatter-beautifier.tsx new file mode 100644 index 00000000..46a1bbda --- /dev/null +++ b/pages/tools/json-formatter-beautifier.tsx @@ -0,0 +1,316 @@ +import { FunctionComponent, useState } from 'react'; +import JsonEditor from '../../components/editors/json-editor'; +import Hero from '../../components/hero'; +import Meta from '../../components/meta'; +import Layout from '../../layout/layout'; + +const JsonFormatterBeautifier: FunctionComponent = function () { + const [originalJsonContent] = useState( + `{ "property": { "value": "example_value", "list_of_properties": [ + { + + + "property_1": "value_1" }, + { "property_2": "value_2" +}, + { + "property_3": "value_3" } + ], + "nested_properties": { +"nested_property": { + "nested_value": "nested_example_value" + } + }, + + "multiple_values_for_property": [ + "value_1", "value_2", "value_3" ] + } +}` + ); + const [formattedJsonContent, setFormattedJsonContent] = useState(`{ + "property": { + "value": "example_value", + "list_of_properties": [ + { + "property_1": "value_1" + }, + { + "property_2": "value_2" + }, + { + "property_3": "value_3" + } + ], + "nested_properties": { + "nested_property": { + "nested_value": "nested_example_value" + } + }, + "multiple_values_for_property": [ + "value_1", + "value_2", + "value_3" + ] + } +}`); + const [spacesOrTabs, setSpacesOrTabs] = useState<'spaces' | 'tabs'>('spaces'); + const [numberOfSpaces, setNumberOfSpaces] = useState(2); + + const format = ( + json: string, + spOrT: 'spaces' | 'tabs', + nbSpaces?: number + ) => { + try { + return JSON.stringify( + JSON.parse(json), + null, + spOrT === 'spaces' ? nbSpaces : '\t' + ); + } catch (error) {} + }; + + return ( + + + +
+
+
+ { + try { + setFormattedJsonContent( + format(value, spacesOrTabs, numberOfSpaces) + ); + } catch (error) {} + }} + /> + +
+ +
+ + +
+
+
+ { + try { + setSpacesOrTabs('spaces'); + setFormattedJsonContent( + format(originalJsonContent, 'spaces', numberOfSpaces) + ); + } catch (error) {} + }} + /> + + { + try { + setSpacesOrTabs('tabs'); + setFormattedJsonContent( + format(originalJsonContent, 'tabs', numberOfSpaces) + ); + } catch (error) {} + }} + /> + +
+ {spacesOrTabs === 'spaces' && ( +
+ + { + try { + const newNumberOfSpaces = !Number.isNaN( + parseInt(event.target.value, 10) + ) + ? parseInt(event.target.value, 10) + : 0; + setNumberOfSpaces(newNumberOfSpaces); + setFormattedJsonContent( + format( + originalJsonContent, + spacesOrTabs, + newNumberOfSpaces + ) + ); + } catch (error) {} + }} + /> +
+ )} +
+
+
+ +
+
+
+
+

What is JSON?

+

+ JSON (JavaScript Object Notation) is a lightweight{' '} + data interchange format. It is easy to read and + write and easy to parse and generate using code. +
+ It is based on a{' '} + + subset of the JavaScript programming language + .{' '} +

+

+ JSON is a text format that is completely + language independent but uses conventions that are familiar to + programmers of many languages like C, C++, C#, Java or + JavaScript. These properties make JSON an ideal data-interchange + language. +

+ +

JSON syntax

+

JSON is built on two universal data structures:

+
    +
  • + A collection of unordered name/value pairs: + usually called in other languages, object, record, struct, + dictionary, hash table, keyed list, or associative array. +
    • +
  • + An ordered list of values: called in other + languages, array, vector, list, or sequence. +
    • +
+ +

+ The JSON syntax is derived from the JavaScript object notation + syntax: +

+ +
    +
  • + Curly braces hold objects{' '} + name/value pairs{' '} + + {'{'}...{'}'} + +
    • +
  • + Square brackets hold arrays{' '} + [...] +
    • +
  • + Object name/value pairs are{' '} + separated by a colon + "name": "value" +
    • +
  • + Object and array members are{' '} + separated by commas{' '} + [1,2,3] +
    • +
  • + Object names are enclosed in{' '} + double quotes{' '} + "name" +
    • +
  • + Object names must be unique{' '} + within the object +
    • +
  • + String values must be{' '} + enclosed in double quotes +
    • + +
  • + Values can be one of the following data types: +
      +
    • + a string "value" +
      • +
    • + a number + -5.56e7 +
      • +
    • + an object + + {'{'}...{'}'} + +
      • +
    • + an array [...] +
      • +
    • + a boolean true or + false +
      • +
    • + null + null +
      • +
    +
    • +
+

Most common JSON formatting

+

+ Formatting JSON data is a common task when working with JSON. It + makes the JSON data more readable and easier to understand. Here + are some common formatting rules: +

+
    +
  • + Indentation: Indentation is usually done + using spaces or tabs. The most common indentation is 2 spaces + or 4 spaces, or a tab. There is no strict rule for the + indentation as JSON is a serialization format not a + presentation format. +
    • +
  • + Line breaks: Line breaks are used to separate + different objects or arrays. Extra line breaks are usually not + used as they add unnecessary space to the JSON data. +
    • +
+
+
+
+
+ + ); +}; + +export default JsonFormatterBeautifier; diff --git a/public/images/illustrations/json-formatter-beautifier.svg b/public/images/illustrations/json-formatter-beautifier.svg new file mode 100644 index 00000000..c3da52b7 --- /dev/null +++ b/public/images/illustrations/json-formatter-beautifier.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + +