dethos
/
webhook_logger
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add highlightjs for the body of the requests

This commit is contained in:
Gonçalo Valério 2019-05-18 19:20:35 +01:00
parent 0ed52a3cf6
commit 8a069cda2c
2 changed files with 45 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
callbacks/static/js/viewer.js
View File

@ -43,6 +43,24 @@ function setupConnection() {
setupConnection();
};
}
/*
Create the highlight directive
*/
Vue.directive("highlightjs", {
deep: true,
bind: function(el, binding) {
if (binding.value) {
el.textContent = binding.value;
}
hljs.highlightBlock(el);
},
componentUpdated: function(el, binding) {
if (binding.value) {
target.textContent = binding.value;
hljs.highlightBlock(target);
}
}
});
/*
Setup a simple components to handle the display of new content.

35
callbacks/templates/callbacks/check.html
View File

@ -8,13 +8,18 @@
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"
/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
<link
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="{% static 'css/main.css' %}"></link>
<link rel="stylesheet" href="{% static 'css/gh-corner.css' %}"></link>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css"
/>
<link rel="stylesheet" href="{% static 'css/main.css' %}" />
<link rel="stylesheet" href="{% static 'css/gh-corner.css' %}" />
<title>Webhook Logger</title>
</head>
<body>
@ -42,7 +47,10 @@
</span>
</div>
<div class="control">
<a class="button is-info is-outlined is-large" v-on:click="copytoclipboard()">
<a
class="button is-info is-outlined is-large"
v-on:click="copytoclipboard()"
>
<i class="fa fa-files-o"></i>
</a>
</div>
@ -107,8 +115,14 @@
<header class="card-header">
<p class="card-header-title">Body</p>
</header>
<div class="card-content">
[[request.body]]
<div
class="card-content"
v-if="request.headers['Content-Type']"
>
<pre v-highlightjs>[[request.body]]</pre>
</div>
<div class="card-content" v-else>
<pre>[[request.body]]</pre>
</div>
</div>
</div>
@ -120,8 +134,12 @@
<footer class="footer">
<div class="content has-text-centered">
<p>
<strong>Webhook Logger</strong> by <a href="https://ovalerio.net">Gonçalo Valério</a>. The source code is licensed
<a href="https://github.com/dethos/webhook_logger/blob/master/LICENSE">GPL-3.0</a>.
<strong>Webhook Logger</strong> by
<a href="https://ovalerio.net">Gonçalo Valério</a>. The source code is
licensed
<a href="https://github.com/dethos/webhook_logger/blob/master/LICENSE"
>GPL-3.0</a
>.
</p>
</div>
</footer>
@ -152,6 +170,7 @@
</svg>
</a>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script src="{% static 'js/viewer.js' %}"></script>
</body>
</html>