camaleaun/wp-api_inspector.html

## wp-api_inspector.html
<!DOCTYPE html>
<html>
<head>
	<title>WordPress Inspector</title>
	<meta charset="utf-8">
	<link rel="icon" href="https://visie.com.br/favicon.ico">
	<style>
	body {
		margin: 0;
		padding: 0;
		font-family: sans-serif;
	}
	.form {
		display: grid;
		background: #ccc;
		grid-template-columns: 1fr 100px;
		grid-gap: 10px;
		padding: 10px;
	}
	.form input,
	.form button {
		padding: 5px;
		font-size: 1.2em;
	}
	.status {
		background: #ffa;
		font-size: 1.2em;
	}
	.panels {
		display: grid;
		grid-template-columns: 1fr 1fr 4fr ;
	}
	.panels ul {
		list-style: none;
		padding: 0;
		margin: 0;
		border: 1px solid #999;
	}
	.panels li {
		padding: 5px;
		background: #eee;
		border-bottom: 1px solid #999;
		cursor: pointer;
	}
	.inspector h1 {
		background: #333;
		color: white;
		padding: 10px;
		margin: 0;
	}
	.inspector div {
		padding: 10px;
	}
	.inspector div ifram {
		max-width: 100%;
	}
	.inspector div img {
		max-width: 100%;
		height: auto;
	}
	.inspector table {
		border-collapse: collapse;
		margin: 20px;
	}
	.inspector th,
	.inspector td {
		vertical-align: top;
		text-align: left;
		padding: 5px;
		border: 1px solid #999;
	}
	</style>
</head>
<body>
	<div id="app">
		<div class="form">
			<input type="text" v-model="baseurl">
			<button @click="start">Start!</button>
		</div>
		<div class="status" v-if="loading">Loading...</div>
		<div class="panels">
			<ul>
				<li v-for="r in routes" @click="route=r">{{r}}</li>
			</ul>
			<ul>
				<li v-for="p in posts" @click="post=p" v-html="title(p)"></li>
			</ul>
			<div class="inspector" v-if="post">
				<h1 v-html="title(post)"></h1>
				<div v-html="rendered(post.content || post.excerpt)"
					v-if="(post.content || post.excerpt)"></div>
				<table>
					<tbody>
						<tr v-for="v,k in post" v-if="k!='content'">
							<th>{{k}}</th>
							<td v-html="rendered(v)"></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		/*jshint esversion:6 */
		let app=new Vue({
			el: '#app',
			data: {
				baseurl:'https://www.tvgazeta.com.br',
				routes:[],
				posts:[],
				loading:false,
				post:false,
			},
			_route:'',
			computed:{
				route:{
					set(v){
						app._route=v;
						app.posts=[];
						app.get(v).then((d)=>{
							app.posts=d;
						});
					},
					get(){
						return app._route;
					}
				}
			},
			methods:{
				get(url){
					app.loading=true;
					return  fetch(app.baseurl+'/wp-json'+url).then((r)=>{
						let p=r.json();
						p.then((d)=>{
							app.loading=false;
						}).catch(()=>{
							app.loading=false;
							alert('Oops. Something wrong.');
						});
						return p;
					});
				},
				start(){
					app.routes=[];
					app.get('/wp/v2').then((d)=>{
						for(var r in d.routes){
							if(r.indexOf('(')==-1)
								app.routes.push(r);
						}
					});
				},
				rendered(o){
					if(o==null)return 0;
					return o.rendered || o;
				},
				title(p){
					if(p.title)return app.rendered(p.title);
					if(p.name)return app.rendered(p.name);
					if(p.id)return app.rendered(p.id);
				},
			}
		});
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>WordPress Inspector</title>
	<meta charset="utf-8">
	<link rel="icon" href="https://visie.com.br/favicon.ico">
	<style>
	body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	}
	.form {
	display: grid;
	background: #ccc;
	grid-template-columns: 1fr 100px;
	grid-gap: 10px;
	padding: 10px;
	}
	.form input,
	.form button {
	padding: 5px;
	font-size: 1.2em;
	}
	.status {
	background: #ffa;
	font-size: 1.2em;
	}
	.panels {
	display: grid;
	grid-template-columns: 1fr 1fr 4fr ;
	}
	.panels ul {
	list-style: none;
	padding: 0;
	margin: 0;
	border: 1px solid #999;
	}
	.panels li {
	padding: 5px;
	background: #eee;
	border-bottom: 1px solid #999;
	cursor: pointer;
	}
	.inspector h1 {
	background: #333;
	color: white;
	padding: 10px;
	margin: 0;
	}
	.inspector div {
	padding: 10px;
	}
	.inspector div ifram {
	max-width: 100%;
	}
	.inspector div img {
	max-width: 100%;
	height: auto;
	}
	.inspector table {
	border-collapse: collapse;
	margin: 20px;
	}
	.inspector th,
	.inspector td {
	vertical-align: top;
	text-align: left;
	padding: 5px;
	border: 1px solid #999;
	}
	</style>
	</head>
	<body>
	<div id="app">
	<div class="form">
	<input type="text" v-model="baseurl">
	<button @click="start">Start!</button>
	</div>
	<div class="status" v-if="loading">Loading...</div>
	<div class="panels">
	<ul>
	<li v-for="r in routes" @click="route=r">{{r}}</li>
	</ul>
	<ul>
	<li v-for="p in posts" @click="post=p" v-html="title(p)"></li>
	</ul>
	<div class="inspector" v-if="post">
	<h1 v-html="title(post)"></h1>
	<div v-html="rendered(post.content \|\| post.excerpt)"
	v-if="(post.content \|\| post.excerpt)"></div>
	<table>
	<tbody>
	<tr v-for="v,k in post" v-if="k!='content'">
	<th>{{k}}</th>
	<td v-html="rendered(v)"></td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
	/jshint esversion:6 /
	let app=new Vue({
	el: '#app',
	data: {
	baseurl:'https://www.tvgazeta.com.br',
	routes:[],
	posts:[],
	loading:false,
	post:false,
	},
	_route:'',
	computed:{
	route:{
	set(v){
	app._route=v;
	app.posts=[];
	app.get(v).then((d)=>{
	app.posts=d;
	});
	},
	get(){
	return app._route;
	}
	}
	},
	methods:{
	get(url){
	app.loading=true;
	return fetch(app.baseurl+'/wp-json'+url).then((r)=>{
	let p=r.json();
	p.then((d)=>{
	app.loading=false;
	}).catch(()=>{
	app.loading=false;
	alert('Oops. Something wrong.');
	});
	return p;
	});
	},
	start(){
	app.routes=[];
	app.get('/wp/v2').then((d)=>{
	for(var r in d.routes){
	if(r.indexOf('(')==-1)
	app.routes.push(r);
	}
	});
	},
	rendered(o){
	if(o==null)return 0;
	return o.rendered \|\| o;
	},
	title(p){
	if(p.title)return app.rendered(p.title);
	if(p.name)return app.rendered(p.name);
	if(p.id)return app.rendered(p.id);
	},
	}
	});
	</script>
	</body>
	</html>