mirror of
https://github.com/daniel-j/fimfic2epub.git
synced 2024-05-14 17:33:22 +12:00
stylus stylesheets
This commit is contained in:
daniel-j
parent
697a038def
commit
83c6b3061c
File diff suppressed because one or more lines are too long
|
|
@ -71,10 +71,9 @@ gulp.task('clean', () => del('extension/fimfic2epub.js'))
|
|||
|
||||
// Main tasks
|
||||
gulp.task('webpack', webpackTask)
|
||||
gulp.task('script', ['webpack'])
|
||||
gulp.task('watch:script', () => {
|
||||
return watch(['src/**/*.js'], watchOpts, function () {
|
||||
return sequence('script')
|
||||
gulp.task('watch:webpack', () => {
|
||||
return watch(['src/**/*.js', 'src/**/*.styl'], watchOpts, function () {
|
||||
return sequence('webpack')
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -89,10 +88,10 @@ gulp.task('watch:lint', () => {
|
|||
|
||||
// Default task
|
||||
gulp.task('default', (done) => {
|
||||
sequence('clean', ['script', 'lint'], done)
|
||||
sequence('clean', ['webpack', 'lint'], done)
|
||||
})
|
||||
|
||||
// Watch task
|
||||
gulp.task('watch', (done) => {
|
||||
sequence('default', ['watch:lint', 'watch:script'], done)
|
||||
sequence('default', ['watch:lint', 'watch:webpack'], done)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -27,8 +27,11 @@
|
|||
"gulp-util": "^3.0.7",
|
||||
"gulp-watch": "^4.3.8",
|
||||
"lazypipe": "^1.0.1",
|
||||
"raw-loader": "^0.5.1",
|
||||
"run-sequence": "^1.2.1",
|
||||
"standard": "^7.1.2",
|
||||
"stylus": "^0.54.5",
|
||||
"stylus-loader": "^2.1.1",
|
||||
"webpack": "^1.13.1"
|
||||
},
|
||||
"standard": {
|
||||
|
|
|
|||
17
src/coverstyle.css
Normal file
17
src/coverstyle.css
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
@page {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
#cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
18
src/coverstyle.styl
Normal file
18
src/coverstyle.styl
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
@page {
|
||||
padding: 0;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
138
src/main.js
138
src/main.js
|
|
@ -1,6 +1,7 @@
|
|||
/* global chrome */
|
||||
'use strict'
|
||||
|
||||
import JSZip from 'jszip'
|
||||
import m from 'mithril'
|
||||
import render from './mithril-node-render'
|
||||
import { pd as pretty } from 'pretty-data'
|
||||
|
|
@ -9,6 +10,9 @@ import { XmlEntities } from 'html-entities'
|
|||
import { saveAs } from 'file-saver'
|
||||
import tidy from 'exports?tidy_html5!tidy-html5'
|
||||
|
||||
import styleCss from './style'
|
||||
import coverstyleCss from './coverstyle'
|
||||
|
||||
const entities = new XmlEntities()
|
||||
|
||||
const NS = {
|
||||
|
|
@ -104,7 +108,7 @@ function fetchChapters (cb) {
|
|||
recursive()
|
||||
}
|
||||
|
||||
function fetchRemote (cb) {
|
||||
function fetchRemote (zip, cb) {
|
||||
let iter = remoteResources.entries()
|
||||
let counter = 0
|
||||
|
||||
|
|
@ -143,6 +147,17 @@ function fetchRemote (cb) {
|
|||
|
||||
function downloadStory () {
|
||||
isDownloading = true
|
||||
|
||||
const zip = new JSZip()
|
||||
zip.file('mimetype', 'application/epub+zip')
|
||||
zip.folder('META-INF').file('container.xml', `<?xml version="1.0" encoding="UTF-8"?>
|
||||
<container version="1.0" xmlns="urn:oasis:names:tc:opendocument:xmlns:container">
|
||||
<rootfiles>
|
||||
<rootfile full-path="content.opf" media-type="application/oebps-package+xml"/>
|
||||
</rootfiles>
|
||||
</container>
|
||||
`)
|
||||
|
||||
console.log('Fetching story...')
|
||||
|
||||
fetch(apiUrl, function (raw) {
|
||||
|
|
@ -161,12 +176,15 @@ function downloadStory () {
|
|||
let coverImage = new Image()
|
||||
coverImage.src = storyInfo.full_image
|
||||
|
||||
zip.file('style.css', styleCss)
|
||||
zip.file('coverstyle.css', coverstyleCss)
|
||||
|
||||
coverImage.addEventListener('load', function () {
|
||||
zip.file('toc.ncx', createNcx())
|
||||
zip.file('nav.xhtml', createNav())
|
||||
|
||||
fetchChapters(function () {
|
||||
fetchRemote(function () {
|
||||
fetchRemote(zip, function () {
|
||||
remoteResources.forEach((r, url) => {
|
||||
if (r.chapter && r.originalUrl && r.dest) {
|
||||
chapterContent[r.chapter] = chapterContent[r.chapter].replace(
|
||||
|
|
@ -238,7 +256,7 @@ function parseChapter (ch, html) {
|
|||
]),
|
||||
m('body', [
|
||||
m('div', {id: 'chapter_container'}, '@@CHAPTER@@'),
|
||||
m('div', {id: 'author_notes'}, '@@NOTES@@')
|
||||
'@@NOTES@@'
|
||||
])
|
||||
])
|
||||
)
|
||||
|
|
@ -265,7 +283,7 @@ function parseChapter (ch, html) {
|
|||
chapter = chapter.substring(0, pos)
|
||||
|
||||
chapterPage = chapterPage.replace('@@CHAPTER@@', chapter)
|
||||
chapterPage = chapterPage.replace('@@NOTES@@', authorNotes)
|
||||
chapterPage = chapterPage.replace('@@NOTES@@', authorNotes ? '<div id="author_notes">' + authorNotes + '</div>' : '')
|
||||
|
||||
chapterPage = chapterPage.replace(/<center>/g, '<div style="text-align: center;">')
|
||||
chapterPage = chapterPage.replace(/<\/center>/g, '</div>')
|
||||
|
|
@ -300,20 +318,6 @@ function parseChapter (ch, html) {
|
|||
return chapterPage
|
||||
}
|
||||
|
||||
const JSZip = require('jszip')
|
||||
|
||||
const zip = new JSZip()
|
||||
|
||||
zip.file('mimetype', 'application/epub+zip')
|
||||
|
||||
zip.folder('META-INF').file('container.xml', `<?xml version="1.0" encoding="UTF-8"?>
|
||||
<container version="1.0" xmlns="urn:oasis:names:tc:opendocument:xmlns:container">
|
||||
<rootfiles>
|
||||
<rootfile full-path="content.opf" media-type="application/oebps-package+xml"/>
|
||||
</rootfiles>
|
||||
</container>
|
||||
`)
|
||||
|
||||
function subjects (s) {
|
||||
var list = []
|
||||
for (let i = 0; i < s.length; i++) {
|
||||
|
|
@ -454,101 +458,3 @@ function createCoverPage (w, h) {
|
|||
// console.log(coverPage)
|
||||
return coverPage
|
||||
}
|
||||
|
||||
zip.file('style.css', `
|
||||
body {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
p {
|
||||
margin-top: 0.0em;
|
||||
margin-bottom: 0.0em;
|
||||
text-indent: 0.0em;
|
||||
}
|
||||
p.double {
|
||||
margin-top: 1.0em;
|
||||
}
|
||||
p.double2 {
|
||||
margin-top: 1.0em;
|
||||
margin-bottom: 1.0em;
|
||||
}
|
||||
p.indented {
|
||||
text-indent: 1.0em;
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 10px 0px;
|
||||
padding: 20px;
|
||||
border: none;
|
||||
border-left: 5px solid rgba(0,0,0,0.2);
|
||||
background: rgba(0,0,0,0.1);
|
||||
}
|
||||
blockquote.left_insert {
|
||||
box-sizing:border-box;
|
||||
-moz-box-sizing:border-box;
|
||||
margin-right:25px;
|
||||
padding: 15px;
|
||||
background-color: #F7F7F7;
|
||||
border: 1px solid #AAA;
|
||||
width: 50%;
|
||||
float:left;
|
||||
box-shadow: 5px 5px 0px #EEE;
|
||||
}
|
||||
blockquote.right_insert {
|
||||
box-sizing:border-box;
|
||||
-moz-box-sizing:border-box;
|
||||
margin-left:25px;
|
||||
padding: 15px;
|
||||
background-color: #F7F7F7;
|
||||
border: 1px solid #AAA;
|
||||
width: 50%;
|
||||
float:right;
|
||||
box-shadow: 5px 5px 0px #EEE;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: #ddd;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
color: #ddd;
|
||||
height: 1px;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
#author_notes {
|
||||
clear: both;
|
||||
border: 1px solid;
|
||||
border-radius: 3px;
|
||||
line-height: 1.7em;
|
||||
padding: 16px;
|
||||
margin-top: 1.0em;
|
||||
margin-bottom: 1.0em;
|
||||
}
|
||||
|
||||
#toc [hidden] {
|
||||
display: none;
|
||||
}
|
||||
`)
|
||||
|
||||
zip.file('coverstyle.css', `
|
||||
@page {padding: 0; margin:0;}
|
||||
html, body {
|
||||
padding:0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
#cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
`)
|
||||
|
|
|
|||
79
src/style.styl
Normal file
79
src/style.styl
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
|
||||
body {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0.0em;
|
||||
margin-bottom: 0.0em;
|
||||
text-indent: 0.0em;
|
||||
|
||||
&.double {
|
||||
margin-top: 1.0em;
|
||||
}
|
||||
&.double2 {
|
||||
margin-top: 1.0em;
|
||||
margin-bottom: 1.0em;
|
||||
}
|
||||
&.indented {
|
||||
text-indent: 1.0em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: #ddd;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
color: #ddd;
|
||||
height: 1px;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 10px 0px;
|
||||
padding: 20px;
|
||||
border: none;
|
||||
border-left: 5px solid rgba(0,0,0,0.2);
|
||||
background: rgba(0,0,0,0.1);
|
||||
|
||||
&.left_insert, &.right_insert {
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
padding: 15px;
|
||||
background-color: #F7F7F7;
|
||||
border: 1px solid #AAA;
|
||||
width: 50%;
|
||||
box-shadow: 5px 5px 0px #EEE;
|
||||
}
|
||||
&.left_insert {
|
||||
margin-right: 25px;
|
||||
float: left;
|
||||
}
|
||||
&.right_insert {
|
||||
margin-left: 25px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
#author_notes {
|
||||
clear: both;
|
||||
border: 1px solid;
|
||||
border-radius: 3px;
|
||||
line-height: 1.7em;
|
||||
padding: 16px;
|
||||
margin-top: 1.0em;
|
||||
margin-bottom: 1.0em;
|
||||
}
|
||||
|
||||
#toc [hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -20,6 +20,10 @@ export default {
|
|||
presets: ['es2015'],
|
||||
plugins: ['transform-strict-mode']
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.styl$/,
|
||||
loader: 'raw-loader!stylus-loader'
|
||||
}
|
||||
],
|
||||
noParse: [
|
||||
|
|
@ -28,7 +32,7 @@ export default {
|
|||
},
|
||||
|
||||
resolve: {
|
||||
extensions: ['', '.js', '.json'],
|
||||
extensions: ['', '.js', '.json', '.styl'],
|
||||
root: [path.join(__dirname, '/src')]
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue