-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
122 lines (113 loc) · 6.63 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="robots" content="max-image-preview:large">
<link rel="icon" type="image/x-icon" href="favicon.png">
<meta name="google-site-verification" content="BCjSwBqP4XS2yH1CVwXNsntcBvNIjNuhN8M8aGM670Q" />
<meta name="msvalidate.01" content="654C959A926C63EAED391D1C87EE6A47" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<meta name="description" content="JSON to RAML Datatype converter for mulesoft API Designer">
<script id="rendered-js" src="script.js"></script>
<script src="voca.min.js" ></script>
<title>JSON to RAML Converter | Mulesoft</title>
</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-398H4FBSEH"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-398H4FBSEH');
</script>
<body onload="loadPage()">
<nav class="navbar navbar-expand-lg navbar-light bg-primary navbar-dark bg-primary">
<a class="navbar-brand" href="/">JSON to RAML Converter</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link " href="index.html" role="button">Home 🏠</a>
</li>
<!-- <li class="nav-item dropdown">
<a class="nav-link " href="#" role="button" onclick="comingSoon()" >Upload JSON ⬆ </a>
</li> -->
<li class="nav-item dropdown">
<a class="nav-link " href="FAQs.html" role="button" >FAQs 💡</a>
</li>
</ul>
</div>
</nav>
<div class="container my-5">
<div id="app">
<div class="row my-7">
<div class="col-12">
<h1>JSON to RAML Datatype Converter online</h1>
</div>
<div class="col-md-9 col-sm-12">Transform your JSON Example to RAML Dataype for API Design </br> <code>PS : This is not a perfect tool. But, I hope this will save a lot of time for you 🤗 </code></div>
</div>
<div class="row my-3">
<div class="col-md-6">
<label for="input">Paste your JSON here 👇</label>
<textarea rows="10" class="form-control" id="input" placeholder="Feeling empty already 🥺 do you have any JSON to process😋"></textarea>
<div class="form-check" data-toggle="tooltip" data-placement="top" title="If you choose this option you will see key?: string instead of key: string">
<input class="form-check-input" type="checkbox" value="" id="areKeysOptional" >
<label class="form-check-label" for="areKeysOptional">
Make all Keys Optional in RAML
<svg height="16" width="16" viewBox="0 0 16 16"><path fill="#skin_color_information" d="M8 0c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM8.9 13h-2v-2h2v2zM11 8.1c-0.4 0.4-0.8 0.6-1.2 0.7-0.6 0.4-0.8 0.2-0.8 1.2h-2c0-2 1.2-2.6 2-3 0.3-0.1 0.5-0.2 0.7-0.4 0.1-0.1 0.3-0.3 0.1-0.7-0.2-0.5-0.8-1-1.7-1-1.4 0-1.6 1.2-1.7 1.5l-2-0.3c0.1-1.1 1-3.2 3.6-3.2 1.6 0 3 0.9 3.6 2.2 0.4 1.1 0.2 2.2-0.6 3z"></path></svg>
</label>
</div>
<div class="form-check" data-toggle="tooltip" data-placement="top" title="If you choose this option all the keys will be converted to CamelCase using Vue JS">
<input class="form-check-input" type="checkbox" value="" id="areKeysCamelCased" >
<label class="form-check-label" for="areKeysCamelCased">
Make all Keys CamelCase in RAML
<svg height="16" width="16" viewBox="0 0 16 16"><path fill="#skin_color_information" d="M8 0c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM8.9 13h-2v-2h2v2zM11 8.1c-0.4 0.4-0.8 0.6-1.2 0.7-0.6 0.4-0.8 0.2-0.8 1.2h-2c0-2 1.2-2.6 2-3 0.3-0.1 0.5-0.2 0.7-0.4 0.1-0.1 0.3-0.3 0.1-0.7-0.2-0.5-0.8-1-1.7-1-1.4 0-1.6 1.2-1.7 1.5l-2-0.3c0.1-1.1 1-3.2 3.6-3.2 1.6 0 3 0.9 3.6 2.2 0.4 1.1 0.2 2.2-0.6 3z"></path></svg>
</label>
</div>
<button onclick="loadExample()" class="btn btn-info my-3" >Load Example</button>
<button onclick="clearContents()" class="btn btn-danger my-3" >Clear 😣</button>
<button onclick="convert()" class="btn btn-success">Convert 😁</button>
</div>
<div class="col-md-6">
<label for="output bold">Result 👇</label>
<textarea rows="10" class="form-control" readonly id="output" placeholder="RAML Result will be here"></textarea>
<input hidden="true" id="fileName" class="form-control" value="" placeholder="Name for RAML ⌨">
<button onclick="copy()" class="copy btn btn-success my-3">Copy to clipboard 📋</button>
<button onclick="downloadRAML()" class="btn btn-primary">Download to RAML file 📁</button>
</div>
</div>
</div>
</div>
<footer style="position: absolute; bottom: 5; width: 100%; text-align: center;">
Designed by
<a href="mailto:muralidhar.thunuguntla@gmail.com">Upendra Thunuguntla ❤️</a> |
<a href="https://www.linkedin.com/in/upendra-thunuguntla/">LinkedIn</a> |
<a href="https://github.com/Upendra-Thunuguntla/JSON2RAML-Converter">Github Repo</a> |
<a href="https://hub.docker.com/repository/docker/upendrathunuguntla/json2raml">Run on Docker</a>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- <script async src="https://api.countapi.xyz/hit/JSON2RAML/counter?callback=cb"></script> -->
<script>
// function cb(response) {
// document.getElementById('visits').innerHTML = "<strong>Page Visits : </strong>"+response.value;
// }
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<style>
body{
/* margin-top:20px; */
background-color: #f5f5ff;
}
</style>
</body>
</html>