making pocket style page
This commit is contained in:
Martin Donnelly
parent
e2a5a81c3b
commit
8d563dabc7
144
app/pocket.html
Normal file
144
app/pocket.html
Normal file
@ -0,0 +1,144 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="//cdn.linearicons.com/free/1.0.0/icon-font.min.css">
|
||||
<link href="//cdn.muicss.com/mui-0.4.6/css/mui.min.css" rel="stylesheet" type="text/css" />
|
||||
<!-- build:css -->
|
||||
|
||||
|
||||
<!-- endbuild -->
|
||||
<script src="libs/microevent.js"></script>
|
||||
<script src="//cdn.muicss.com/mui-0.4.6/js/mui.min.js"></script>
|
||||
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
|
||||
<!-- build:vendor -->
|
||||
<script src="libs/ejs.js"></script>
|
||||
<script src="libs/view.js"></script>
|
||||
<!-- endbuild -->
|
||||
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="fav/apple-touch-icon-57x57.png">
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="fav/apple-touch-icon-60x60.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="fav/apple-touch-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="fav/apple-touch-icon-76x76.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="fav/apple-touch-icon-114x114.png">
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="fav/apple-touch-icon-120x120.png">
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="fav/apple-touch-icon-144x144.png">
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="fav/apple-touch-icon-152x152.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="fav/apple-touch-icon-180x180.png">
|
||||
<link rel="icon" type="image/png" href="fav/favicon-32x32.png" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="fav/favicon-194x194.png" sizes="194x194">
|
||||
<link rel="icon" type="image/png" href="fav/favicon-96x96.png" sizes="96x96">
|
||||
<link rel="icon" type="image/png" href="fav/android-chrome-192x192.png" sizes="192x192">
|
||||
<link rel="icon" type="image/png" href="fav/favicon-16x16.png" sizes="16x16">
|
||||
<link rel="manifest" href="fav/manifest.json">
|
||||
<link rel="mask-icon" href="fav/safari-pinned-tab.svg" color="#5bbad5">
|
||||
<meta name="msapplication-TileColor" content="#ffc40d">
|
||||
<meta name="msapplication-TileImage" content="fav/mstile-144x144.png">
|
||||
<meta name="theme-color" content="#ffc40d">
|
||||
<title>Keeper Silvtree</title>
|
||||
<style>
|
||||
.item_content {
|
||||
height:80px;
|
||||
border:1px solid grey;
|
||||
display:block;
|
||||
height:auto;
|
||||
max-width:74em;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
min-height:80px;
|
||||
overflow:hidden;
|
||||
position:relative;
|
||||
padding:0;
|
||||
|
||||
}
|
||||
|
||||
.item_content .thumbnail {
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
|
||||
width:100px; height:80px;background-size: cover, auto;background-position:50% 50%, 50% 50%;
|
||||
}
|
||||
|
||||
.item_content a.title {
|
||||
padding:1em 11em 0.1em 7.35em;
|
||||
font-size: 1.38em;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
|
||||
display:block;
|
||||
color:#313131;
|
||||
font-weight:600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content" class="mui-container">
|
||||
<div class="mui-row">
|
||||
<p>Image is 100 x 80</p>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="item_content">
|
||||
<a href="link" class="title">I am the title</a>
|
||||
<span class='thumbnail' style="background-image:url('http://image.silvrtree.co.uk/100x80/http://pipes.silvrtree.co.uk/assets/fm.png');"></span>
|
||||
<ul><li>I'm tags</li></ul>
|
||||
<ul><li>I'm buttons</li></ul>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<div class="item_content">
|
||||
<a href="link" class="title">I am the title</a>
|
||||
<span class='thumbnail' style="background-image:url('http://image.silvrtree.co.uk/100x80/http://pipes.silvrtree.co.uk/assets/fm.png');"></span>
|
||||
<ul><li>I'm tags</li></ul>
|
||||
<ul><li>I'm buttons</li></ul>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<div class="item_content">
|
||||
<a href="link" class="title">I am the title</a>
|
||||
<span class='thumbnail' style="background-image:url('http://image.silvrtree.co.uk/100x80/http://pipes.silvrtree.co.uk/assets/fm.png');"></span>
|
||||
<ul><li>I'm tags</li></ul>
|
||||
<ul><li>I'm buttons</li></ul>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<div class="item_content">
|
||||
<a href="link" class="title">I am the title</a>
|
||||
<span class='thumbnail' style="background-image:url('http://image.silvrtree.co.uk/100x80/http://pipes.silvrtree.co.uk/assets/fm.png');"></span>
|
||||
<ul><li>I'm tags</li></ul>
|
||||
<ul><li>I'm buttons</li></ul>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<div class="item_content">
|
||||
<a href="link" class="title">I am the title</a>
|
||||
<span class='thumbnail' style="background-image:url('http://image.silvrtree.co.uk/100x80/http://pipes.silvrtree.co.uk/assets/fm.png');"></span>
|
||||
<ul><li>I'm tags</li></ul>
|
||||
<ul><li>I'm buttons</li></ul>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<div class="item_content">
|
||||
<a href="link" class="title">I am the title</a>
|
||||
<span class='thumbnail' style="background-image:url('http://image.silvrtree.co.uk/100x80/http://pipes.silvrtree.co.uk/assets/fm.png');"></span>
|
||||
<ul><li>I'm tags</li></ul>
|
||||
<ul><li>I'm buttons</li></ul>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -30,8 +30,7 @@ gulp.task('scripts', function() {
|
||||
/*.pipe(rename({suffix: '.min'}))*/
|
||||
.pipe(concat('app.js'))
|
||||
/*.pipe(uglify({mangle: false}))*/
|
||||
.pipe(gulp.dest('dist/js'))
|
||||
.pipe(notify({ message: 'Scripts task complete' }));
|
||||
.pipe(gulp.dest('dist/js'));
|
||||
});
|
||||
|
||||
gulp.task('styles', function() {
|
||||
@ -41,8 +40,7 @@ gulp.task('styles', function() {
|
||||
/*.pipe(rename({suffix: '.min'}))*/
|
||||
.pipe(cssnano())
|
||||
.pipe(concat('app.css'))
|
||||
.pipe(gulp.dest('dist/css'))
|
||||
.pipe(notify({ message: 'Styles task complete' }));
|
||||
.pipe(gulp.dest('dist/css'));
|
||||
});
|
||||
|
||||
gulp.task('partials', function() {
|
||||
@ -75,4 +73,4 @@ gulp.task('clean', function() {
|
||||
|
||||
gulp.task('default', ['clean'], function() {
|
||||
gulp.start('styles', 'scripts','partials','index');
|
||||
});
|
||||
});
|
||||
|
||||
@ -17,7 +17,7 @@ app.use(logger('dev'));
|
||||
app.use(bodyParser.json());
|
||||
app.use(bodyParser.urlencoded({ extended: true }));
|
||||
app.use(cookieParser());
|
||||
app.use(express.static(path.join(__dirname, 'dist')));
|
||||
app.use(express.static(path.join(__dirname, 'app')));
|
||||
|
||||
app.use('/', keeper);
|
||||
|
||||
|
||||
@ -22,6 +22,7 @@ var busEmitter = new EventEmitter();
|
||||
var db_name = 'keeper';
|
||||
var dbCouch = nano.use(db_name);
|
||||
|
||||
var jsonFile = __dirname + '/' + 'output.json';
|
||||
var bodyfile = __dirname + '/' + 'body.html';
|
||||
var htmlfile = __dirname + '/' + 'testoutput.html';
|
||||
var generics = [
|
||||
@ -132,8 +133,6 @@ var doUpdateTagsDB = () => {
|
||||
dbCouch.view('getAllTags', 'getAllTags', function (err, body) {
|
||||
var masterList = [];
|
||||
if (!err) {
|
||||
|
||||
var outJSON = [];
|
||||
body.rows.forEach(function (doc) {
|
||||
|
||||
masterList = masterList.concat(doc.value);
|
||||
@ -151,7 +150,7 @@ logger.debug(body);
|
||||
|
||||
body.rows.forEach(function (doc) {
|
||||
doSaveTagsDB(doc.value,masterList);
|
||||
})
|
||||
});
|
||||
|
||||
}
|
||||
else {
|
||||
@ -171,7 +170,6 @@ logger.debug(body);
|
||||
var doSaveTagsDB = (orig, newList) =>
|
||||
{
|
||||
logger.debug('doSaveTagsDB');
|
||||
// logger.info('sendSocket: ' + JSON.stringify(obj));
|
||||
|
||||
var _obj = orig;
|
||||
|
||||
@ -232,13 +230,21 @@ function processBody(body, url, _id, _rev) {
|
||||
|
||||
urlObj = URL.parse(url);
|
||||
urlPrefix = urlObj.protocol + '//' + urlObj.host + '/';
|
||||
obj.host = urlObj.host;
|
||||
try {
|
||||
tdihbody.find('IMG').each(function (i, elem) {
|
||||
let s, src = $(this).attr("src");
|
||||
|
||||
if (!STRING(src).startsWith('http')) {
|
||||
src = urlPrefix + STRING(src).stripLeft('/').s;
|
||||
src = urlPrefix + STRING(src).stripLeft('/').trim().s;
|
||||
}
|
||||
|
||||
if (typeof obj.thumbnail === 'undefined') {
|
||||
obj.thumbnail = src;
|
||||
}
|
||||
|
||||
|
||||
|
||||
s = 'http://image.silvrtree.co.uk/900,fit/' + src;
|
||||
|
||||
$(this).attr("src", s);
|
||||
@ -249,11 +255,16 @@ function processBody(body, url, _id, _rev) {
|
||||
logger.error(e);
|
||||
}
|
||||
|
||||
obj.url = url;
|
||||
obj.url = STRING(url).trim().s;
|
||||
obj.html = $.html();
|
||||
obj.reduced = STRING(tdihbody.html()).trim().s;
|
||||
obj.nib = STRING(tdihbody.text()).collapseWhitespace().trim().left(300).s;
|
||||
obj.title = STRING(title).collapseWhitespace().s;
|
||||
|
||||
|
||||
jsonfile.writeFile(jsonFile, obj, function (err) { console.error(err); });
|
||||
|
||||
|
||||
if (_id !== null) {
|
||||
busEmitter.emit("updateBookmarkData", obj, _id, _rev);
|
||||
}
|
||||
@ -345,7 +356,7 @@ router.get('/list', function (req, res) {
|
||||
|
||||
var outJSON = [];
|
||||
body.rows.forEach(function (doc) {
|
||||
outJSON.push({id: doc.id, title: doc.value})
|
||||
outJSON.push({id: doc.id, title: doc.value});
|
||||
});
|
||||
|
||||
//logger.debug(util.inspect(body));
|
||||
|
||||
Loading…
Reference in New Issue
Block a user