diff --git a/index.js b/index.js index 9f9a460..d6be0f7 100644 --- a/index.js +++ b/index.js @@ -2,12 +2,16 @@ var Express = require('express'); var convert = require('./lib/convert'); var serveStatic = require('serve-static'); var request = require('request'); +var log = console.log; var app = Express(); app.use(serveStatic('static')); app.get('/api/feed',function(req,res){ + // logging + log(req.url); + // get feed url var feedUrl = req.query.url; if (!feedUrl){ diff --git a/static/index.html b/static/index.html index d1595c7..79aaf67 100644 --- a/static/index.html +++ b/static/index.html @@ -1,30 +1,42 @@ <html><head> - <title>Mastofeed - embeddable Mastodon feeds</title> + <title>Mastofeed - embeddable Mastodon feeds</title> </head> <body> -<h4>Example:</h4> -<label>Instance URL:<input type="text" id="urlin" placeholder="octodon.social"></label><br> -<label>Username:<input type="text" id="usernamein" placeholder="fenwick67"></label><br> -<label>Width(px):<input type="text" id="width" value="400"></label><br> -<label>Height(px):<input type="text" id="height" value="800"></label><br> - -<button onclick="genUrl()" value="generate">Generate</button> +<h1>Mastofeed</h1> +<h4>Embedded Mastodon feeds for blogs etc.</h4> +<a href="https://github.com/fenwick67/mastofeed">Fork on Github</a><br> +<br><hr><br> +<form action="javascript:genUrl()"> + <label>Instance URL:<input required type="text" id="urlin" placeholder="octodon.social"></label><br> + <label>Username:<input required type="text" id="usernamein" placeholder="fenwick67"></label><br> + <label>Width(px):<input required type="number" id="width" value="400"></label><br> + <label>Height(px):<input required type="number" id="height" value="800"></label><br> + <label>UI scale (percent):<input required type="number" id="size" value="100"></label><br> + <label>theme: + <select id="theme"> + <option value="dark">dark</option> + <option value="light">light</option> + </select> + </label><br> + <button value="generate">Generate</button> +</form> <br> <br> -<label>Use this markup in your HTML: <input id="result" placeholder="result will go here"> +<label>Use this markup in your HTML: <br><textarea id="result" placeholder="result will go here"></textarea></label> <br> -<h4>Preview</h4> +<h4>Live Preview:</h4> <iframe width="0" height="0" id="frame" sandbox="allow-top-navigation" src=""></iframe> + <script> -function genUrl(){ +window.genUrl = function genUrl(){ function val(id){ return document.getElementById(id).value; } - + var inUrl = 'https://' + val('urlin') + '/users/'+val('usernamein')+'.atom'; - - - var iframeUrl = window.location.protocol + '//'+ window.location.hostname +((window.location.port && window.location.port!=80)?(':'+window.location.port):'') +"/api/feed?url="+encodeURIComponent(inUrl); + + var iframeUrl = window.location.protocol + '//'+ window.location.hostname +((window.location.port && window.location.port!=80)?(':'+window.location.port):'') +"/api/feed?url="+encodeURIComponent(inUrl)+"&theme="+val('theme')+'&size='+val('size'); + document.getElementById('result').value = '<iframe sandbox="allow-top-navigation" width="'+val('width')+'" height="'+val('height')+'" src="'+iframeUrl+'"></iframe>'; var iframe = document.getElementById('frame');