Skip to content

Commit 884bfd1

Browse files
jstirnamanjstirnaman
committed
feat(api): Add Ask AI widget to API ref docs
- Adds the widget script to template.hbs. - Copies branding color and font styles from js/ask-ai.js - Copies position and some sizes from the configuration docs. - This will be replaced when the API uplift is completed and using the same layouts as the rest of the site.
1 parent 4194ef5 commit 884bfd1

File tree

1 file changed

+98
-54
lines changed

1 file changed

+98
-54
lines changed

‎api-docs/template.hbs

Lines changed: 98 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,73 @@
1-
<!DOCTYPE html>
21
<html>
32

4-
<head>
5-
<!-- Google Tag Manager -->
6-
<script>window.location.hostname.endsWith('influxdata.com') && (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
7-
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
8-
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
9-
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
10-
})(window,document,'script','dataLayer','GTM-WXRH9C');</script>
11-
<!-- End Google Tag Manager -->
3+
<head>
4+
<!-- Google Tag Manager -->
5+
<script>window.location.hostname.endsWith('influxdata.com') &&
6+
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new
7+
Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
8+
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
9+
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
10+
})(window,document,'script','dataLayer','GTM-WXRH9C');</script>
11+
<!-- End Google Tag Manager -->
1212

13-
<meta charset="utf8" />
14-
<title>{{title}}</title>
15-
<meta name="description" content="{{templateOptions.description}}">
16-
<meta name="viewport" content="width=device-width, initial-scale=1">
17-
<link rel="shortcut icon" href="/img/favicon.png" type="image/png" sizes="32x32">
13+
<meta charset='utf8' />
14+
<title>{{title}}</title>
15+
<meta name='description' content='{{templateOptions.description}}' />
16+
<meta name='viewport' content='width=device-width, initial-scale=1' />
17+
<link
18+
rel='shortcut icon'
19+
href='/img/favicon.png'
20+
type='image/png'
21+
sizes='32x32'
22+
/>
1823

19-
<meta name="google-site-verification" content="_V6CNhaIIgVsTO9max_ECw7DUfPL-ZGE7G03MQgEGMU" />
24+
<meta
25+
name='google-site-verification'
26+
content='_V6CNhaIIgVsTO9max_ECw7DUfPL-ZGE7G03MQgEGMU'
27+
/>
2028

21-
<style>
22-
body {
23-
padding: 0;
24-
margin: 0;
25-
}
26-
</style>
27-
{{#unless disableGoogleFont}}<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:500,500i,700,700i|Roboto:400,400i,700,700i|Rubik:400,400i,500,500i,700,700i" rel="stylesheet">{{/unless}}
28-
{{{redocHead}}}
29-
<link rel="stylesheet" type="text/css" href="/api.css">
30-
</head>
29+
<style>
30+
body {
31+
padding: 0;
32+
margin: 0;
33+
}
34+
</style>
35+
{{#unless disableGoogleFont}}<link
36+
href="https://fonts.googleapis.com/css?family=Roboto+Mono:500,500i,700,700i|Roboto:400,400i,700,700i|Rubik:400,400i,500,500i,700,700i"
37+
rel="stylesheet"
38+
/>{{/unless}}
39+
{{{redocHead}}}
40+
<link rel="stylesheet" type="text/css" href="/api.css" />
41+
<script type="text/javascript"
42+
async="true"
43+
src="https://widget.kapa.ai/kapa-widget.bundle.js"
44+
data-website-id="a02bca75-1dd3-411e-95c0-79ee1139be4d"
45+
data-project-name="InfluxDB"
46+
data-project-color="#d30971"
47+
data-project-logo="/img/influx-logo-cubo-white.png"
48+
data-modal-disclaimer="This AI can access [documentation for InfluxDB, clients, and related tools](https://docs.influxdata.com). Information you submit is used in accordance with our [Privacy Policy](https://www.influxdata.com/legal/privacy-policy/)."
49+
data-modal-example-questions="How do I write and query data with the {{title}}?, How do I use client libraries for the {{title}}?" data-button-height="65px" data-button-width="65px"
50+
data-button-text="Ask AI" data-conversation-button-icons-only="true"
51+
data-font-family="Proxima Nova, sans-serif"
52+
data-modal-example-questions-col-span="8"
53+
data-modal-full-screen-on-mobile="true"
54+
data-modal-header-bg-color="#d30971"
55+
data-modal-header-border-bottom="none" data-modal-header-padding=".5rem"
56+
data-modal-header-text-color="#ffffff" data-modal-x-offset="0"
57+
data-modal-y-offset="0" data-modal-with-overlay="false"
58+
data-modal-inner-flex-direction="column"
59+
data-modal-inner-justify-content="end" data-modal-inner-max-width="600px"
60+
data-modal-inner-position-left="auto"
61+
data-modal-inner-position-right="20px"
62+
data-modal-inner-position-bottom="calc(2.5rem + 25px)"
63+
data-modal-size="640px"
64+
data-modal-title-color="#fff"
65+
data-modal-title-font-size="1.25rem"
66+
data-modal-lock-scroll="false" ></script>
67+
</head>
3168

32-
<body>
33-
{{!-- <script>
69+
<body>
70+
{{! <script>
3471
document.addEventListener('DOMContentLoaded', function() {
3572
// Prevent throwing errors when the Google Tag Manager script is blocked
3673
if (!window.hasOwnProperty('fcdsc')) {
@@ -44,31 +81,38 @@
4481
})();
4582
}
4683
});
47-
</script> --}}
48-
<!-- Google Tag Manager (noscript) -->
49-
<noscript>
50-
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WXRH9C" height="0" width="0" style="display:none;visibility:hidden"></iframe>
51-
</noscript>
52-
<!-- End Google Tag Manager (noscript) -->
53-
<div id="loading">
54-
<div class="spinner"></div>
55-
</div>
56-
<div id="influx-header">
57-
<a class="back" href="/{{templateOptions.product}}/"><span class="version">{{templateOptions.productName}}</span> Docs</a>
58-
<a class="btn" href="https://github.com/influxdata/influxdb/issues/new/choose/" target="_blank">Submit API issue</a>
59-
</div>
60-
{{{redocHTML}}}
61-
<script type="text/javascript">
62-
function removeFadeOut( el, speed ) {
63-
var seconds = speed/1000;
64-
el.style.transition = "opacity "+seconds+"s ease";
65-
el.style.opacity = 0;
66-
setTimeout(function() {
67-
el.parentNode.removeChild(el);
68-
}, speed);
69-
}
70-
removeFadeOut(document.getElementById('loading'), 500);
71-
</script>
72-
</body>
84+
</script> }}
85+
<!-- Google Tag Manager (noscript) -->
86+
<noscript>
87+
<iframe
88+
src='https://www.googletagmanager.com/ns.html?id=GTM-WXRH9C'
89+
height='0'
90+
width='0'
91+
style='display:none;visibility:hidden'
92+
></iframe>
93+
</noscript>
94+
<!-- End Google Tag Manager (noscript) -->
95+
<div id='loading'>
96+
<div class='spinner'></div>
97+
</div>
98+
<div id='influx-header'>
99+
<a class='back' href='/{{templateOptions.product}}/'><span
100+
class='version'
101+
>{{templateOptions.productName}}</span>
102+
Docs</a>
103+
<a
104+
class='btn'
105+
href='https://github.com/influxdata/influxdb/issues/new/choose/'
106+
target='_blank'
107+
>Submit API issue</a>
108+
</div>
109+
{{{redocHTML}}}
110+
<script type='text/javascript'>
111+
function removeFadeOut( el, speed ) { var seconds = speed/1000;
112+
el.style.transition = "opacity "+seconds+"s ease"; el.style.opacity = 0;
113+
setTimeout(function() { el.parentNode.removeChild(el); }, speed); }
114+
removeFadeOut(document.getElementById('loading'), 500);
115+
</script>
116+
</body>
73117

74-
</html>
118+
</html>

0 commit comments

Comments
 (0)