1<!DOCTYPE html> 2<html lang="en"> 3 <!DOCTYPE html> 4<html lang="en"> 5 6<head> 7 <meta charset="utf-8"> 8 <meta name="description" content=""> 9 <meta name="author" content=""> 10 <!-- not working --> 11 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> 12 13 <title>OpenAPI-to-GraphQL</title> 14 15 <!-- Bootstrap core CSS --> 16 <link href="dist/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 17 <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans" rel="stylesheet"> 18 <link href="css/loopback.css" rel="stylesheet"> 19 <link href="css/openapi-to-graphql.css" rel="stylesheet"> 20 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 21 22 <!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 68 bytes, lines 22-23
22 23 <script async src="https://www.googletagmanager.com/gtag/js?id=
23UA-150726441-2
vendor: 16 bytes, lines 23-24
23"></script> 24
24<script> 25
vendor: 146 bytes, lines 25-29
25window.dataLayer = window.dataLayer || []; 26 function gtag(){dataLayer.push(arguments);} 27 gtag('js', new Date()); 28 29 gtag('config', '
29UA-150726441-2
vendor: 8 bytes, lines 29-30
29'); 30
30</script>
30 31</head> 32 33<body> 34 <!-- Navbar --> 35 <div id="navbar-template"></div> 36 37 <!-- Header --> 38 <div class="openapi-to-graphql-masthead"> 39 <h1>OpenAPI-to-GraphQL</h1> 40 <h5>Take any OpenAPI Specification (OAS) and create a GraphQL interface</h5> 41 </div> 42 43 <!-- How it works section --> 44 <section class="odd-section"> 45 <div class="container"> 46 <div class="row"> 47 <div class="col-sm-12"> 48 <h3 class="text-center">How it works</h3> 49 <div class="embed-responsive embed-responsive-16by9"> 50 <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/4TrHUBJElrk" allowfullscreen></iframe> 51 </div> 52 </div> 53 </div> 54 </div> 55 </section> 56 57 <hr class="openapi-to-graphql-hr"> 58 59 <!-- Powerful functionality section --> 60 <section class="even-section"> 61 <div class="container"> 62 <div class="row"> 63 <div class="col-sm-12"> 64 <h3 class="text-center">Powerful functionality</h3> 65 <br/> 66 </div> 67 </div> 68 69 <div class="row"> 70 <div class="col-sm-12 col-lg-4 text-center"> 71 <img class="feature-image" src="images/openapi-to-graphql/nested-data-2x.png" alt="Icon depcting nested data"/> 72 <h4>Nested data</h4> 73 <p> 74 Schemas are used to create GraphQL data definitions, and links defined in the OAS are used to create a nested structure, allowing for (deeply) nested queries. 75 </p> 76 </div> 77 <div class="col-sm-12 col-lg-4 text-center"> 78 <img class="feature-image" src="images/openapi-to-graphql/data-sanitization-2x.png" alt="Icon depicting data sanitation"/> 79 <h4>API Sanitation</h4> 80 <p> 81 GraphQL-incompatible identifiers of your API are sanitized. For example, API parameters or data definitions with unsupported characters (e.g., <code>-</code>, <code>.</code>, <code>,</code>, <code>:</code>, <code>;</code>...) are removed. 82 </p> 83 </div> 84 <div class="col-sm-12 col-lg-4 text-center"> 85 <img class="feature-image" src="images/openapi-to-graphql/authentication-2x.png" alt="Icon depicting authentication"/> 86 <h4>Authentication</h4> 87 <p> 88 OpenAPI-to-GraphQL provides <em>viewers</em> to support passing API keys or basic auth credentials. OAuth 2.0 integration can be handled by the hosting application (<a href="https://github.com/ibm/openapi-to-graphql/tree/master/packages/openapi-to-graphql#authentication" target="_blank" rel="noopener noreferrer">learn more...</a>). 89 </p> 90 </div> 91 </div> 92 </div> 93 </section> 94 95 <hr class="openapi-to-graphql-hr"> 96 97 <!-- Get started section --> 98 <section class="odd-section"> 99 <div class="container"> 100 <div class="row"> 101 <div class="col-sm-12 col-md-8"> 102 <h3>Get started</h3> 103 <h5>Ready to translate from REST to GraphQL? Let's get you started!</h5> 104 <a class="btn btn-secondary" style="padding-left:60px; padding-right:60px; top: 20%" role="button" href="getting-started-openapi-to-graphql.html">View Guide</a> 105 </div> 106 <div class="col-sm-12 col-md-4"> 107 <img class="get-started-image float-right" src="images/openapi-to-graphql-getting-started/rocketship-2x.png" alt="Icon showing a rocket and depicting getting started"/> 108 </div> 109 </div> 110 </div> 111 </section> 112 113 <hr class="openapi-to-graphql-hr"> 114 115 <!-- How can we help --> 116 <section class="even-section"> 117 <div class="container"> 118 <div class="row"> 119 <div class="col-lg-12 text-center"> 120 <h3 class="section-heading">How can we help?</h3> 121 <p>We've curated resources to help you get started faster with OpenAPI-to-GraphQL.</p> 122 <p style="height:36px"></p> 123 </div> 124 </div> 125 126 <div class="row text-center" style="justify-content: center"> 127 <div class="col-sm-12 col-md-6"> 128 <a class="openapi-to-graphql-card" href="https://strongloop.com/strongblog/" target="_blank" rel="noopener noreferrer"> 129 <div class="row"> 130 <div class="col-sm-3"> 131 <img class="help-image" src="images/openapi-to-graphql/blog-posts-2x.png" alt="Icon depicting blog"/> 132 </div> 133 <div class="col-sm-9"> 134 <h5 class="card-title">Blog posts</h5> 135 <p class="regular text-gray">Visit our blog for all developer-related articles, tips, and advice.</p> 136 </div> 137 </div> 138 </a> 139 </div> 140 141 <div class="col-sm-12 col-md-6"> 142 <a class="openapi-to-graphql-card" href="https://github.com/ibm/openapi-to-graphql" target="_blank" rel="noopener noreferrer"> 143 <div class="row"> 144 <div class="col-sm-3"> 145 <img class="help-image" src="images/openapi-to-graphql/git-repository-2x.png" alt="Icon depicting Git repository"/> 146 </div> 147 <div class="col-sm-9"> 148 <h5 class="card-title">Git repository</h5> 149 <p class="regular text-gray">Learn from or contribute to our repository, complete with regularly updated documentation.</p> 150 </div> 151 </div> 152 </a> 153 </div> 154 </div> 155 </div> 156 </section> 157 158 <!-- footer --> 159 <footer> 160 <div class="container"> 161 <div class="row text-center"> 162 <div class="col-md-3"> 163 <img src="images/global/loopback-mark-frame-white.svg" width=40px/> 164 </div> 165 <div class="col-md-3"> 166 <p class="label text-uppercase">Product</p> 167 <p class="regular"> 168 <a href="getting-started.html">Getting Started</a> 169 </p> 170 <p class="regular"> 171 <a href="doc/en/lb4/Tutorials.html">Tutorials</a> 172 </p> 173 </div> 174 <div class="col-md-3"> 175 <p class="label text-uppercase" >Documentation</p> 176 <p class="regular"> 177 <a href="/doc">Docs</a> 178 </p> 179 <p class="regular"> 180 <a href="resources.html">Resources</a> 181 </p> 182 <p class="regular"> 183 <a href="contribute.html">
183Contribute</a> 184 </p> 185 </div> 186 <div class="col-md-3"> 187 <p class="label text-uppercase">Support</p> 188 <p class="regular"> 189 <a href="/doc/en/lb4">LoopBack 4 Documentation</a> 190 </p> 191 <p class="regular"> 192 <a href="https://loopback.io/doc/en/lb4/apidocs.index.html" target="_blank" rel="noopener noreferrer">API Docs</a> 193 </p> 194 </div> 195 </div> 196 <hr class="hairline-footer"> 197 <div class="row text-center"> 198 <div class="col-md-6"> 199 <p class="regular"> © Copyright 2020 StrongLoop, an IBM company</p> 200 </div> 201 <div class="col-md-6"> 202 <p style="float:right"> 203 <a class="twitter-share-button" 204 href="https://twitter.com/intent/tweet?text=Creating APIs has never been easier using %23LoopBack 4 by %40StrongLoop. Check it out at loopback.io.&url=loopback.io"> 205 Tweet</a> 206 <a href="https://twitter.com/intent/tweet?screen_name=StrongLoop&ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="true">Tweet to @StrongLoop</a> 207
207<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
207 208 </p> 209 </div> 210 </div> 211 </div> 212 </footer> 213 214
214<script src="/dist/jquery/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
214 215
215<script src="dist/popper/1.14.0/umd/popper.min.js"></script>
215 216 <!-- Bootstrap core JavaScript --> 217
217<script src="dist/bootstrap/js/bootstrap.min.js"></script>
217 218 219 <!-- GitHub button --> 220
220<script async defer src="https://buttons.github.io/buttons.js"></script>
220 221 <!-- Load the NavBar template --> 222
222<script> 223 $(function(){ 224 $("#navbar-template").load("navbar-template.html"); 225 }); 226 </script>
226 227 228</body> 229 230</html> 231 232</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.