@internetarchive/cdxsummary - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

cdxsummary.js

@@ -194,3 +194,3 @@ export class CDXSummary extends HTMLElement {
     if(this.data['msg']) {
-      container.innerHTML = `<p class="msg">${this.data['msg']}</p>`;
+      container.innerHTML = `<p class="info"> ${this.data['msg']}</p>`;
       return;
@@ -250,3 +250,3 @@ }
 ${this.thumbs ? `
-<button id="thumb-loader">Load ${this.thumbs == 1 ? 'a Sample' : `${this.thumbs} Samples`}</button>
+<button id="thumb-loader">Load ${this.thumbs == 1 ? 'a sample' : `${this.thumbs} samples`}</button>
 <div id="sample-thumbs">
@@ -306,5 +306,48 @@ ${this.fold.includes('thumbs') ? '' : this.sampleThumbs()}
   #container {
-    padding: 5px;
-    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+    color: var(--cdxsummary-main-txt-color);
+    background: var(--cdxsummary-main-bg-color);
+    font-family: var(--cdxsummary-main-font-family, sans-serif);
+    font-size: var(--cdxsummary-main-font-size);
+    margin: var(--cdxsummary-main-margin);
+    padding: var(--cdxsummary-main-padding, 5px);
   }
+  pre, code {
+    font-family: var(--cdxsummary-mono-font-family, monospace);
+  }
+  a {
+    color: var(--cdxsummary-link-txt-color, blue);
+    background: var(--cdxsummary-link-bg-color);
+    text-decoration: var(--cdxsummary-link-txt-decoration, underline);
+  }
+  a:hover, a:focus {
+    text-decoration: underline;
+  }
+  .info {
+    color: var(--cdxsummary-info-txt-color);
+    background: var(--cdxsummary-info-bg-color);
+    font-family: var(--cdxsummary-info-font-family, var(--cdxsummary-main-font-family, sans-serif));
+    font-size: var(--cdxsummary-info-font-size);
+    font-style: var(--cdxsummary-info-font-style, italic);
+    border: var(--cdxsummary-info-border);
+    border-radius: var(--cdxsummary-info-border-radius);
+    margin: var(--cdxsummary-info-margin, 5px);
+    padding: var(--cdxsummary-info-padding, 5px);
+  }
+  .info::before {
+    content: "i";
+    border: 1px solid;
+    border-radius: 0.6em;
+    line-height: 1em;
+    width: 1em;
+    display: inline-block;
+    text-align: center;
+  }
+  h2 {
+    color: var(--cdxsummary-h2-txt-color);
+    background: var(--cdxsummary-h2-bg-color);
+    font-family: var(--cdxsummary-h2-font-family);
+    font-size: var(--cdxsummary-h2-font-size, 1.5em);
+    margin: var(--cdxsummary-h2-margin, 1em 0 0.7em);
+    padding: var(--cdxsummary-h2-padding);
+  }
   table {
@@ -316,5 +359,11 @@ border-collapse: collapse;
     white-space: nowrap;
+    color: var(--cdxsummary-tbl-txt-color);
+    background: var(--cdxsummary-tbl-bg-color);
+    font-family: var(--cdxsummary-tbl-font-family);
+    font-size: var(--cdxsummary-tbl-font-size);
+    margin: var(--cdxsummary-tbl-margin);
   }
   tr:nth-child(even), li:nth-child(even) {
-    background-color: #eee;
+    color: var(--cdxsummary-tbl-alt-txt-color);
+    background: var(--cdxsummary-tbl-alt-bg-color);
   }
@@ -329,40 +378,22 @@ th, td {
   }
-  table, thead, tfoot {
-    border-bottom: 1px solid #333;
-    border-top: 1px solid #333;
+  table, thead {
+    border-bottom: var(--cdxsummary-tbl-border, 1px solid var(--cdxsummary-tbl-hdr-bg-color, gray));
   }
+  table, tfoot {
+    border-top: var(--cdxsummary-tbl-border, 1px solid var(--cdxsummary-tbl-hdr-bg-color, gray));
+  }
   thead, tfoot {
-    background: #777;
-    color: #eee;
+    color: var(--cdxsummary-tbl-hdr-txt-color, white);
+    background: var(--cdxsummary-tbl-hdr-bg-color, gray);
   }
-  ul {
-    word-break: break-all;
-    list-style-position: inside;
-    padding-inline-start: 0;
+  button {
+    color: var(--cdxsummary-btn-txt-color, var(--cdxsummary-tbl-hdr-txt-color, white));
+    background: var(--cdxsummary-btn-bg-color, var(--cdxsummary-tbl-hdr-bg-color, gray));
+    font-family: var(--cdxsummary-btn-font-family);
+    font-size: var(--cdxsummary-btn-font-size);
+    border: var(--cdxsummary-btn-border, var(--cdxsummary-tbl-border, 1px solid var(--cdxsummary-tbl-hdr-bg-color, gray)));
+    border-radius: var(--cdxsummary-btn-border-radius, 5px);
+    margin: var(--cdxsummary-btn-margin, 0 0 10px);
+    padding: var(--cdxsummary-btn-padding, 5px 10px);
   }
-  li a {
-    text-decoration: none;
-  }
-  .msg {
-    margin: 5px;
-    padding: 5px;
-  }
-  .msg, .info {
-    font-style: italic;
-  }
-  .info::before {
-    content: "🛈 ";
-  }
-  summary {
-    cursor: pointer;
-  }
-  details {
-    margin-bottom: 20px;
-  }
-  details.samples[open] summary::after {
-    content: attr(data-open);
-  }
-  details.samples:not([open]) summary::after {
-    content: attr(data-close);
-  }
   .thumb-container {
@@ -377,4 +408,4 @@ display: inline-block;
     overflow: hidden;
-    border: 1px solid #333;
-    border-radius: 4px;
+    border: var(--cdxsummary-thumb-border, var(--cdxsummary-tbl-border, 1px solid var(--cdxsummary-tbl-hdr-bg-color, gray)));
+    border-radius: var(--cdxsummary-thumb-border-radius, 5px);
     padding: 2px;
@@ -387,10 +418,2 @@ background: linear-gradient(45deg, #eee, #333, #eee);
   }
-  @keyframes loader {
-    0%, 100% {
-      background-position: left 10px top 2px;
-    }
-    50% {
-      background-position: right 10px top 2px;
-    }
-  }
   .thumb a {
@@ -414,6 +437,27 @@ display: block;
   }
-  button {
-    margin-bottom: 10px;
-    padding: 5px 15px;
+  @keyframes loader {
+    0%, 100% {
+      background-position: left 10px top 2px;
+    }
+    50% {
+      background-position: right 10px top 2px;
+    }
   }
+  summary {
+    cursor: pointer;
+  }
+  details {
+    margin-bottom: 20px;
+  }
+  details.samples[open] summary::after {
+    content: attr(data-open);
+  }
+  details.samples:not([open]) summary::after {
+    content: attr(data-close);
+  }
+  ul {
+    word-break: break-all;
+    list-style-position: inside;
+    padding-inline-start: 0;
+  }
   .compact {
@@ -420,0 +464,0 @@ overflow: hidden;

package.json

 {
   "name": "@internetarchive/cdxsummary",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A Web Component to render CDX Summary JSON files",
@@ -5,0 +5,0 @@ "main": "cdxsummary.js",

README.md

@@ -38,10 +38,56 @@ # CDX Summary Web Component
 
-Override the `--cdxsummary-thumb-scale` CSS variable to change the size of the thumbnail from the original `960x600` iframe dimension (default scale is set to `0.3`).
+Customize the style of various parts using any of the following CSS custom properties (variables).
+For example, override the `--cdxsummary-thumb-scale` CSS variable to change the size of the thumbnail from the original `960x600` iframe dimension (default scale is set to `0.3`).
 
 ```css
-:root {
-  --cdxsummary-thumb-scale: 0.25;
+cdx-summary {
+  --cdxsummary-main-txt-color: initial;
+  --cdxsummary-main-bg-color: initial;
+  --cdxsummary-main-font-family: sans-serif;
+  --cdxsummary-main-font-size: initial;
+  --cdxsummary-main-margin: 0;
+  --cdxsummary-main-padding: 5px;
+  --cdxsummary-mono-font-family: monospace;
+  --cdxsummary-link-txt-color: blue;
+  --cdxsummary-link-txt-decoration: underline;
+  --cdxsummary-link-bg-color: inherit;
+  --cdxsummary-info-txt-color: inherit;
+  --cdxsummary-info-bg-color: inherit;
+  --cdxsummary-info-font-family: inherit;
+  --cdxsummary-info-font-size: inherit;
+  --cdxsummary-info-font-style: italic;
+  --cdxsummary-info-border: initial;
+  --cdxsummary-info-border-radius: initial;
+  --cdxsummary-info-margin: 5px;
+  --cdxsummary-info-padding: 5px;
+  --cdxsummary-h2-txt-color: inherit;
+  --cdxsummary-h2-bg-color: inherit;
+  --cdxsummary-h2-font-family: inherit;
+  --cdxsummary-h2-font-size: 1.5em;
+  --cdxsummary-h2-margin: 1em 0 0.7em;
+  --cdxsummary-h2-padding: initial;
+  --cdxsummary-tbl-txt-color: inherit;
+  --cdxsummary-tbl-bg-color: inherit;
+  --cdxsummary-tbl-hdr-txt-color: white;
+  --cdxsummary-tbl-hdr-bg-color: gray;
+  --cdxsummary-tbl-alt-txt-color: inherit;
+  --cdxsummary-tbl-alt-bg-color: inherit;
+  --cdxsummary-tbl-border: 1px solid gray;
+  --cdxsummary-tbl-font-family: inherit;
+  --cdxsummary-tbl-font-size: inherit;
+  --cdxsummary-tbl-margin: initial;
+  --cdxsummary-btn-txt-color: white;
+  --cdxsummary-btn-bg-color: gray;
+  --cdxsummary-btn-font-family: inherit;
+  --cdxsummary-btn-font-size: inherit;
+  --cdxsummary-btn-border: tbl-border;
+  --cdxsummary-btn-border-radius: 5px;
+  --cdxsummary-btn-margin: 0 0 10px;
+  --cdxsummary-btn-padding: 5px 10px;
+  --cdxsummary-thumb-border: tbl-border;
+  --cdxsummary-thumb-border-radius: 5px;
+  --cdxsummary-thumb-scale: 0.3;
 }
 ```
 
-An [interactive test interface](https://internetarchive.github.io/cdx-summary/webcomponent/) is available for the Web Component that renders the JSON summary.
+Alternatively, use the [interactive tester interface](https://internetarchive.github.io/cdx-summary/webcomponent/) to customize the style and copy the generated code for integration.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

78559

increased by19.63%

Lines of code

1726

increased by2.62%

Number of lines in readme file

93

increased by97.87%

No dependency changes