mirror of
https://gitee.com/arthas/arthas.git
synced 2024-11-30 11:17:39 +08:00
add arthas-tutorials.html. #499
This commit is contained in:
hengyunabc
parent
2058ae4785
commit
f18187790b
216
site/src/site/sphinx/_include_html/arthas-tutorials.html
Normal file
216
site/src/site/sphinx/_include_html/arthas-tutorials.html
Normal file
@ -0,0 +1,216 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
|
||||
crossorigin="anonymous">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.4/dist/vue.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/index.min.js"></script>
|
||||
|
||||
<title>Arthas Totorials</title>
|
||||
|
||||
<style>
|
||||
/* This is all that's required */
|
||||
.dropdown-item-checked::before {
|
||||
position: absolute;
|
||||
left: .4rem;
|
||||
content: '✓';
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<script src="https://katacoda.com/embed.js"></script>
|
||||
|
||||
<div id="app">
|
||||
|
||||
<nav class="navbar navbar-expand navbar-light bg-light flex-column flex-md-row bd-navbar">
|
||||
<a href="https://github.com/alibaba/arthas" target="_blank" title="" class="navbar-brand">
|
||||
<img v-bind:src="logoUrl()" alt="Arthas" title="Welcome to Arthas web console" style="height: 25px;" class="img-responsive">
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://alibaba.github.io/arthas" target="_blank">Documentation
|
||||
<span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://github.com/alibaba/arthas" target="_blank">Github</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item dropdown active show">
|
||||
<!-- <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button> -->
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-tutorials" data-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="true">
|
||||
{{currentTutorialName()}}
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="bd-tutorials">
|
||||
<a v-for="tutorial in tutorials" v-bind:class="{ 'dropdown-item-checked': tutorial.id === tutorialId }"
|
||||
class="dropdown-item" v-bind:href='currentUrl() + "?language=" + language + "&id=" + tutorial.id'>
|
||||
{{ tutorial.names[language] }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<form class="form-inline my-2 my-lg-0">
|
||||
|
||||
<div class="col">
|
||||
<div class="input-group ">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="language-addon">Language</span>
|
||||
</div>
|
||||
<select class="form-control" v-model="language" class="custom-select" v-on:change="languageChange($event)">
|
||||
<option v-for="l in languages" v-bind:value="l.value">
|
||||
{{ l.text }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
<div id="kata-container" class="container-fluid px-0">
|
||||
|
||||
<div id="katacoda-scenario-1" v-bind:data-katacoda-id="currentKatacodaId()" data-katacoda-color="004d7f"
|
||||
v-bind:style="{height: (calculateKataSize().height - 5) + 'px' }">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
||||
<script>
|
||||
/** get params in url **/
|
||||
function getUrlParam(name, url) {
|
||||
if (!url) url = window.location.href;
|
||||
name = name.replace(/[\[\]]/g, '\\$&');
|
||||
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
|
||||
results = regex.exec(url);
|
||||
if (!results) return null;
|
||||
if (!results[2]) return '';
|
||||
return decodeURIComponent(results[2].replace(/\+/g, ' '));
|
||||
}
|
||||
|
||||
var app = new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
message: 'Hello Vue!',
|
||||
language: 'en',
|
||||
languages: [
|
||||
{ text: 'English', value: 'en' },
|
||||
{ text: '中文', value: 'cn' }
|
||||
],
|
||||
tutorialId: "arthas-basics",
|
||||
tutorials: [
|
||||
{
|
||||
id: "arthas-basics",
|
||||
names: {
|
||||
en: "Arthas Basics",
|
||||
cn: "Arthas基础教程",
|
||||
},
|
||||
ids: {
|
||||
en: "arthas-basics-en",
|
||||
cn: "arthas-basics-cn",
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "arthas-advanced",
|
||||
names: {
|
||||
en: "Arthas Advanced",
|
||||
cn: "Arthas进阶教程",
|
||||
},
|
||||
ids: {
|
||||
en: "arthas-advanced-en",
|
||||
cn: "arthas-advanced-cn",
|
||||
}
|
||||
}
|
||||
],
|
||||
},
|
||||
methods: {
|
||||
languageChange: function (event) {
|
||||
// alert(event.target.value)
|
||||
window.location = this.currentUrl() + "?language=" + this.language + "&id=" + this.tutorialId;
|
||||
},
|
||||
currentUrl: function () {
|
||||
return window.location.href.split(/[?#]/)[0];
|
||||
},
|
||||
logoUrl: function() {
|
||||
var url = this.currentUrl();
|
||||
return url.substring(0, url.lastIndexOf('/')) + "/_static/logo.png";
|
||||
},
|
||||
currentTutorialName: function () {
|
||||
for (index in this.tutorials) {
|
||||
if (this.tutorials[index].id == this.tutorialId) {
|
||||
return this.tutorials[index].names[this.language];
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
currentKatacodaId: function () {
|
||||
// https://katacoda.com/embed/hengyunabc/arthas-advanced-cn/?embed=true
|
||||
for (index in this.tutorials) {
|
||||
if (this.tutorials[index].id == this.tutorialId) {
|
||||
return "hengyunabc/" + this.tutorials[index].ids[this.language];
|
||||
}
|
||||
}
|
||||
},
|
||||
calculateKataSize: function () {
|
||||
var e = window;
|
||||
var a = 'inner';
|
||||
if (!('innerWidth' in window)) {
|
||||
a = 'client';
|
||||
e = document.documentElement || document.body;
|
||||
}
|
||||
var terminalDiv = document.getElementById("kata-container");
|
||||
var terminalDivRect = terminalDiv.getBoundingClientRect();
|
||||
return {
|
||||
width: terminalDivRect.width,
|
||||
height: e[a + 'Height'] - terminalDivRect.top
|
||||
};
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
var l = getUrlParam('language');
|
||||
if (l != null) {
|
||||
this.language = l;
|
||||
}
|
||||
var id = getUrlParam('id');
|
||||
if (id != null) {
|
||||
this.tutorialId = id;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</html>
|
||||
BIN
site/src/site/sphinx/_static/logo.png
Normal file
BIN
site/src/site/sphinx/_static/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
@ -170,7 +170,7 @@ html_static_path = ['_static']
|
||||
# Add any extra paths that contain custom files (such as robots.txt or
|
||||
# .htaccess) here, relative to this directory. These files are copied
|
||||
# directly to the root of the documentation.
|
||||
#html_extra_path = []
|
||||
html_extra_path = ['_include_html']
|
||||
|
||||
# If not '', a 'Last updated on:' timestamp is inserted at every page bottom,
|
||||
# using the given strftime format.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user