graphql-engine/docs/_theme/djangodocs/layout.html
2020-05-14 12:29:45 +05:30

588 lines
23 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{% extends "basic/layout.html" %}
{%- if pagename == 'index' %}
{% set is_landing_page = true %}
{%- endif %}
{% set css_files = css_files + ['_static/hasura-custom.css', '_static/djangosite.css'] %}
{%- if is_landing_page %}
{% set css_files = css_files + ['_static/landing.css'] %}
{%- endif %}
{%- macro secondnav() %}
{%- if prev %}
&laquo; <a href="{{ prev.link|e }}" title="{{ prev.title|e }}">previous</a>
{{ reldelim2 }}
{%- endif %}
{%- if next %}
<a href="{{ next.link|e }}" title="{{ next.title|e }}">next</a> &raquo;
{%- endif %}
{%- endmacro %}
{% block linktags %}
{{ super() }}
<link rel="canonical" href="https://{{ BASE_DOMAIN }}/docs/1.0/{{ pagename }}{{ file_suffix }}" />
{% endblock %}
{% block document %}
<div id="custom-doc" class="{% block bodyclass %}{{ 'yui-t6' if not is_landing_page else '' }}{% endblock %}">
<div class="main_container_wrapper">
{% include 'pages/loading.html' %}
<div id="banner" class="bannerStripWrapper hideClass">
<div class='bannerInnerWrapper displayFlex'>
<a
href="https://hasura.io/events/hasura-con-2020/"
target="_blank"
rel="noreferrer noopener"
>
<div class="bannerStrip">
<div class="displayFlex noPadd">
<div class="announceIcon">
<img src="{{ pathto('_images/layout/hasura-con.svg', 1) }}" alt="Hasura Con20"/>
</div>
<div class="bodyTextSmall">
<span class="textColor">
Announcing our first user conference, Hasura Con20 >
</span>
</div>
</div>
</div>
</a>
<div id="banner-close" class="closeBanner">
<img src="{{ pathto('_images/layout/close.svg', 1) }}" alt="Close" />
</div>
</div>
<div class='bannerStripImg'>
<img src="{{ pathto('_images/layout/stripe.png', 1) }}" alt='stripe' />
</div>
</div>
<div id="" class="content_wrapper">
{%- if is_landing_page %}
{% include 'pages/landing.html' %}
{%- else %}
{% set rootpage = 'common' %}
{% set pagenameSplit = pagename.split('/') %}
{% block sidebarwrapper %}
<div class="yui-b mobile-hide" id="sidebar">
{{ sidebar() }}
</div>
{% endblock %}
<div class="content_inner_wrapper">
<div role="main" parent={{ rootpage }}>
<div id="docs-header">
<div class="mobile-only" id="mobile-logo">
<a href="https://{{ BASE_DOMAIN }}/" target="_blank" rel="noopener">
<div class="img_wrapper inline-block">
<img class="responsive logo_img no-shadow" src="{{ pathto('_images/layout/logo-dark.svg', 1) }}" alt="Hasura Logo Dark" />
</div>
</a>
<a href="https://{{ BASE_DOMAIN }}/docs" class="docs_label mobile-logo-docs">DOCS&nbsp;&nbsp;v{{version}}</a>
</div>
<div id="docs-header-actions">
<div class="inline-block mobile-only" id="nav_tree_icon">
<span class="fa fa-bars"></span>
</div>
<div class="inline-block" id="input_search_box">
<span class="fa fa-search search_icon"></span>
<input type="text" id="search_element" placeholder="Search docs..." />
</div>
<div class="inline-block header_links">
<div class="social_icons_wrapper">
<div class="social_icons">
<a href="https://hasura.io/learn/" target="_blank" rel="noopener">
Tutorials
</a>
</div>
<div class="social_icons">
<iframe title="Hasura GraphQL Github Stars" src="https://ghbtns.com/github-btn.html?user=hasura&repo=graphql-engine&type=star&count=true" frameBorder="0" scrolling="0" width="120px" height="25px"></iframe>
</div>
<div class="social_icons">
<a href="https://twitter.com/hasurahq/" target="_blank" rel="noopener">
<img class="responsive" src="{{ pathto('_images/layout/Twitter.svg', 1) }}" alt="Twitter icon" />
</a>
</div>
<div class="social_icons tooltip">
<a href="https://discord.gg/vBPpJkS" target="_blank" rel="noopener">
<img class="responsive" src="{{ pathto('_images/layout/Discord.svg', 1) }}" alt="Discord icon" />
</a>
<span class="tooltip_text">Get instant support on our discord server</span>
</div>
</div>
</div>
</div>
</div>
<div id="docs-content">
<div id="{{ pagename|replace('/', '-') }}">
{% block body %}{% endblock %}
</div>
</div>
<div class="nav">{{ secondnav() }}</div>
<div class="feedback_wrapper">
<div class="feedback">
Was this page helpful?
<!-- inline svgs to allow color manipulation on hover -->
<div class="display_inl actions thumb_up">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="21px" height="21px" viewBox="0 0 561 561" style="enable-background:new 0 0 561 561;" xml:space="preserve">
<g>
<g id="thumb-up">
<path d="M0,535.5h102v-306H0V535.5z M561,255c0-28.05-22.95-51-51-51H349.35l25.5-117.3c0-2.55,0-5.1,0-7.65 c0-10.2-5.1-20.4-10.199-28.05L336.6,25.5L168.3,193.8c-10.2,7.65-15.3,20.4-15.3,35.7v255c0,28.05,22.95,51,51,51h229.5 c20.4,0,38.25-12.75,45.9-30.6l76.5-181.051c2.55-5.1,2.55-12.75,2.55-17.85v-51H561C561,257.55,561,255,561,255z" fill="#787878"/>
</g>
</g>
</svg>
</div>
<div class="display_inl actions thumb_down">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_2" x="0px" y="0px" width="21px" height="21px" viewBox="0 0 561 561" style="enable-background:new 0 0 561 561;" xml:space="preserve">
<g>
<g id="thumb-down">
<path d="M357,25.5H127.5c-20.4,0-38.25,12.75-45.9,30.6L5.1,237.15C2.55,242.25,0,247.35,0,255v48.45l0,0V306 c0,28.05,22.95,51,51,51h160.65l-25.5,117.3c0,2.55,0,5.101,0,7.65c0,10.2,5.1,20.399,10.2,28.05l28.05,25.5l168.3-168.3 c10.2-10.2,15.3-22.95,15.3-35.7v-255C408,48.45,385.05,25.5,357,25.5z M459,25.5v306h102v-306H459z" fill="#787878"/>
</g>
</g>
</svg>
</div>
</div>
<div class="detailed_feedback hide">
<div class="feedback_detail_msg"></div>
<textarea rows="4" cols="75" id="feedback_box" data-id="0"></textarea>
<br/>
<button class="feedback_btn">Submit</button>
</div>
<div class="thank_you hide">
Thank you for your feedback!
</div>
</div>
<div class="footer-hasura-custom">
<img class="responsive footer_logo" src="{{ pathto('_images/layout/hasura_logo.svg', 1) }}" alt="Hasura Logo Dark"/>
<div class="footer_text">
<div>Want to contribute or report missing content?</div>
<div>
<a target="_blank" rel="noopener" href="https://github.com/hasura/graphql-engine/blob/master/docs/{{ pagename }}.rst">edit this page on github</a>
| <a target="_blank" rel="noopener" href="https://github.com/hasura/graphql-engine/blob/master/CONTRIBUTING.md">contributing guidelines</a>
| <a target="_blank" rel="noopener" href="https://github.com/hasura/graphql-engine/issues">report an issue</a>
</div>
<br/>
<div>
<a target="_blank" rel="noopener" href="https://github.com/hasura/graphql-engine">Hasura GraphQL engine</a> is open source. <a target="_blank" rel="noopener" href="https://github.com/hasura/graphql-engine/blob/master/LICENSE">See license</a>
</div>
<div>
Powered by <a target="_blank" rel="noopener" href="http://www.sphinx-doc.org">Sphinx</a>.
| Copyright &copy; 2020 <a target="_blank" rel="noopener" href="https://hasura.io">Hasura</a>.
</div>
</div>
</div>
</div>
</div>
<div style="clear: both;"></div>
{%- endif %}
</div>
</div>
</div>
{% endblock %}
{% block sidebarrel %}
{% endblock %}
{# Empty some default blocks out #}
{% block relbar1 %}{% endblock %}
{% block relbar2 %}{% endblock %}
{% block sidebar1 %}{% endblock %}
{% block sidebar2 %}{% endblock %}
{% block footer %}
<!-- intercom -->
<script>
window.intercomSettings = {
app_id: "rucirpb3"
};
</script>
<script>(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',intercomSettings);}else{var d=document;var i=function(){i.c(arguments)};i.q=[];i.c=function(args){i.q.push(args)};w.Intercom=i;function l(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/rucirpb3';var
x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);}if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})()
</script>
<!-- support button -->
<script type="text/javascript">
$(document).ready( function() {
const supportBtnHandler = function() {
if ( window.Intercom ) {
window.Intercom('show');
}
};
$('.supportBtn').on('click', supportBtnHandler);
});
</script>
<!-- Local storage -->
<script type="text/javascript">
$(document).ready( function() {
const bannerStripeConsent = window.localStorage.getItem("hasuraCon2020BannerStripeConsent")
if (bannerStripeConsent !== "yes") {
$('#banner').removeClass("hideClass");
}
$('#banner-close').click(function(e){
window.localStorage.setItem('hasuraCon2020BannerStripeConsent', 'yes');
$('#banner').hide();
});
});
</script>
<!-- utils -->
<script type="text/javascript">
// load script file
const loadScript = function(url, callback) {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
script.onreadystatechange = callback;
script.onload = callback;
// Fire the loading
head.appendChild(script);
};
// load css file
const loadCss = function(url, callback) {
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = url;
// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
link.onreadystatechange = callback;
link.onload = callback;
// Fire the loading
head.appendChild(link);
};
// make ajax call
const promise_ajax = function(url, data, type) {
return new Promise(function(resolve, reject) {
var req = new XMLHttpRequest();
req.open(type, url, true);
req.setRequestHeader("Content-type", "application/json");
req.onload = function() {
if (req.status === 200) {
resolve(req.response);
} else {
reject(req.response);
}
};
req.onerror = function() {
reject(Error("Network Error"));
};
// Make the request
req.send(JSON.stringify(data));
});
};
// Track GA event
const trackga = function ( category, action, label, value ) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'Click Events',
category: category,
action: action,
label: label,
value: value
})
};
</script>
<!-- search -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script type="text/javascript">
docsearch({
appId: 'WCBB1VVLRC',
apiKey: '298d448cd9d7ed93fbab395658da19e8',
indexName: 'graphql-docs-prod',
inputSelector: '#search_element',
transformData: function(suggestions) {
if (window.location.origin !== 'https://hasura.io') {
suggestions.forEach(suggestion => {
if (window.location.origin === 'http://localhost:8000') {
suggestion.url = suggestion.url.replace(/https:\/\/hasura.io\/docs\/[^\/]*/, window.location.origin)
} else {
suggestion.url = suggestion.url.replace('https://hasura.io\/docs', window.location.origin);
}
});
}
return suggestions;
},
// algoliaOptions: {
// hitsPerPage: 10
// },
debug: false
});
</script>
<!-- mobile sidebar -->
<script type="text/javascript">
$(document).ready( function() {
const navTreeHandler = function(e) {
const sidebar = $('#sidebar');
const background = $('.content_inner_wrapper');
const body = $('body');
if (sidebar.hasClass('mobile-hide')) {
sidebar.removeClass('mobile-hide');
background.addClass('no_scroll');
body.addClass('no_scroll');
} else {
sidebar.addClass('mobile-hide');
background.removeClass('no_scroll');
body.removeClass('no_scroll');
}
};
$('#nav_tree_icon').on('click', navTreeHandler);
});
</script>
<!-- feedback -->
<script type="text/javascript">
$(document).ready( function() {
var baseDomain = "{{ BASE_DOMAIN }}";
const feedbackUrl = baseDomain ? 'https://data.' + baseDomain + '/v1/query' : 'https://data.hasura-stg.hasura-app.io/v1/query';
const sendFeedback = function(feedback, feedbackDetailMsg) {
const insertQuery = {
'type': 'insert',
'args': {
'table': 'docs_feedback',
'objects': [
{
'page': window.location.pathname,
'feedback': feedback
}
],
'returning': ['id']
}
};
promise_ajax(feedbackUrl, insertQuery, 'POST')
.then( function(response) {
const data = JSON.parse(response);
$('#feedback_box').data('id', data['returning'][0]['id']);
$('.feedback_detail_msg').html(feedbackDetailMsg);
$('.feedback').addClass('hide');
$('.detailed_feedback').removeClass('hide');
})
.catch( function(err) {
alert('Error capturing feedback');
console.log(err);
});
};
const handleThumbUpClick = function(e) {
sendFeedback('positive', 'Great to hear that. Would you like to share any other feedback:');
};
$('.thumb_up').on('click', handleThumbUpClick);
const handleThumbDownClick = function(e) {
sendFeedback('negative', 'Sorry to hear that. Could you please tell us what you were looking for:');
};
$('.thumb_down').on('click', handleThumbDownClick);
const handleFeedbackBtnClick = function(e) {
const feedbackBox = $('#feedback_box');
const feedbackId = feedbackBox.data('id');
const feedbackContent = feedbackBox.val();
const updateQuery = {
'type': 'update',
'args': {
'table': 'docs_feedback',
'$set': {
'feedback_content': feedbackContent
},
'where': {'id': feedbackId}
}
};
promise_ajax(feedbackUrl, updateQuery, 'POST')
.then( function(response) {
$('.detailed_feedback').addClass('hide');
$('.thank_you').removeClass('hide');
})
.catch( function(err) {
alert('Error capturing feedback');
console.log(err);
});
};
$('.feedback_btn').on('click', handleFeedbackBtnClick);
});
</script>
<!-- graphiql -->
<script type="text/javascript">
$(document).ready( function() {
// graphql query fetcher
const graphQLFetcher = function(endpoint) {
endpoint = endpoint || "{{ GRAPHIQL_DEFAULT_ENDPOINT }}";
return function(graphQLParams) {
const params = {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(graphQLParams),
credentials: 'include'
};
return fetch(endpoint, params)
.then(function (response) {
return response.text();
})
.then(function (responseBody) {
try {
return JSON.parse(responseBody);
} catch (error) {
return responseBody;
}
});
}
};
// create GraphiQL components and embed into HTML
const setupGraphiQL = function() {
if (typeof(React) === 'undefined' || typeof(ReactDOM) === 'undefined' || typeof(GraphiQL) === 'undefined') {
return;
}
const targets = document.getElementsByClassName('graphiql');
for (let i = 0; i < targets.length; i++) {
const target = targets[i];
const endpoint = target.getElementsByClassName("endpoint")[0].innerHTML.trim();
const query = target.getElementsByClassName("query")[0].innerHTML.trim();
const response = target.getElementsByClassName("response")[0].innerHTML.trim();
const variables = target.getElementsByClassName("variables")[0].innerHTML.trim();
const graphiQLElement = React.createElement(GraphiQL, {
fetcher: graphQLFetcher(endpoint),
schema: null, // TODO: pass undefined if introspection supported
query: query,
response: response,
variables: variables
});
ReactDOM.render(graphiQLElement, target);
}
};
const resizeGraphiQLVariableEditors = function() {
const graphiQLVariableEditors = $('.graphiql .variable-editor');
for (let i = 0; i < graphiQLVariableEditors.length; i++) {
graphiQLVariableEditors[i].style.height = '120px';
}
};
// if graphiql elements present, load react/graphiql js files and setup graphiql
if ($('.graphiql').length > 0) {
const loadingStatus = {'react': false, 'reactDom': false, 'graphiQL': false};
const checkLoading = function(loadedFile) {
return function () {
loadingStatus[loadedFile] = true;
// return if all files not yet loaded
for (var file in loadingStatus) {
if (!loadingStatus[file]) {
return;
}
}
setupGraphiQL();
resizeGraphiQLVariableEditors();
}
};
loadCss("{{ pathto('_static/graphiql/graphiql.css', 1) }}", function(){});
loadScript("{{ pathto('_static/react/react.min.js', 1) }}", checkLoading('react'));
loadScript("{{ pathto('_static/react/react-dom.min.js', 1) }}", checkLoading('reactDom'));
loadScript("{{ pathto('_static/graphiql/graphiql.min.js', 1) }}", checkLoading('graphiQL'));
}
});
</script>
<!-- global_tabs -->
<script type="text/javascript">
$(document).ready( function() {
if ($('.global-tabs').length > 0) {
loadCss("{{ pathto('_static/global_tabs/global_tabs.css', 1) }}", function(){});
loadScript("{{ pathto('_static/global_tabs/global_tabs.js', 1) }}", function(){});
}
});
</script>
<!-- replace latest release tag -->
<script type="text/javascript">
$(document).ready( function() {
// if latest release tag elements present, replace with latest release tag
if ($('.latest-release-tag').length > 0) {
const releaseUrl = 'https://releases.hasura.io/graphql-engine?agent=docs.hasura.io';
promise_ajax(releaseUrl, null, 'GET')
.then(function (response) {
const data = JSON.parse(response);
const latest_version = data.latest;
const latest_prerelease_version = data.prerelease;
const release_targets = document.getElementsByClassName('latest-release-tag');
for (let i = 0; i < release_targets.length; i++) {
const release_target = release_targets[i];
release_target.innerHTML = latest_version;
}
const prerelease_targets = document.getElementsByClassName('latest-prerelease-tag');
for (let i = 0; i < prerelease_targets.length; i++) {
const prerelease_target = prerelease_targets[i];
prerelease_target.innerHTML = latest_prerelease_version;
}
})
.catch(function (err) {
console.log(err);
});
}
});
</script>
<!-- open external links in new tab -->
<script type="text/javascript">
$(document).ready( function() {
const externalLinks = $('a.reference.external');
for (let i = 0; i < externalLinks.length; i++) {
externalLinks[i].setAttribute('target', '_blank');
}
});
</script>
{%- block extrafooter %} {% endblock %}
{% block extrahead %}
<!--<meta name="viewport" content="user-scalable=no">-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
{% endblock %}
{% endblock %}