feat(theme): more css

yjl9903 · Mar 5, 2023 · fb7dc43 · fb7dc43
1 parent e8b30f0
commit fb7dc43
Show file tree

Hide file tree

Showing 5 changed files with 271 additions and 53 deletions.
diff --git a/packages/core/src/xhtml/builder.ts b/packages/core/src/xhtml/builder.ts
@@ -6,6 +6,7 @@ import { Item, Style } from '../epub/item';
 import { TextCSS, TextXHTML } from '../constant';
 
 import type { XHTMLNode } from './types';
+
 import { Fragment } from './render';
 
 const builder = new XMLBuilder({
@@ -65,6 +66,8 @@ export class XHTMLBuilder {
 
   private _body: XHTMLNode[] = [];
 
+  private _bodyAttrs: Record<string, string> = {};
+
   public constructor(filename: string) {
     this._filename = filename;
     this._meta.title = path.basename(filename);
@@ -117,6 +120,15 @@ export class XHTMLBuilder {
     return this;
   }
 
+  public bodyAttrs(attrs: Record<string, string> = {}) {
+    const a = Object.entries(attrs).map(([key, value]) => [`@_${key}`, value]);
+    this._bodyAttrs = {
+      ...this._bodyAttrs,
+      ...Object.fromEntries(a)
+    };
+    return this;
+  }
+
   public build(): XHTML {
     const content = builder.build({
       html: {
@@ -128,7 +140,10 @@ export class XHTMLBuilder {
           title: this._meta.title,
           ...list(this._head)
         },
-        body: list(this._body)
+        body: {
+          ...this._bodyAttrs,
+          ...list(this._body)
+        }
       }
     });
 

diff --git a/packages/theme-default/package.json b/packages/theme-default/package.json
@@ -50,9 +50,9 @@
     "node": ">=v18.14.2"
   },
   "epubook": {
-    "pages": [],
     "styles": [
-      "styles/main.css"
+      "styles/main.css",
+      "styles/cover.css"
     ],
     "images": []
   }

diff --git a/packages/theme-default/src/index.ts b/packages/theme-default/src/index.ts
@@ -10,7 +10,7 @@ import { DefaultThemePageTemplate } from './types';
 export * from './types';
 export * from './chapter';
 
-const styles = ['./styles/main.css'];
+const styles = ['./styles/main.css', './styles/cover.css'];
 
 export async function DefaultTheme(): Promise<Theme<DefaultThemePageTemplate>> {
   return {
@@ -21,6 +21,7 @@ export async function DefaultTheme(): Promise<Theme<DefaultThemePageTemplate>> {
       cover(file, { image, title = '封面' }) {
         return new XHTMLBuilder(file)
           .title(title)
+          .bodyAttrs({ class: 'cover' })
           .body({ tag: 'img', attrs: { src: image.relative(file) } });
       },
       nav(file, { nav, option }) {

diff --git a/packages/theme-default/styles/cover.css b/packages/theme-default/styles/cover.css
@@ -0,0 +1,13 @@
+body.cover, body.cover div, body.cover img {
+  margin: 0;
+  padding: 0;
+  text-align: center;
+}
+
+body.cover img {
+  height: 100%;
+  max-width: 100%;
+  border: 0 none;
+  vertical-align: bottom;
+  object-fit: contain;
+}