ToC as a HTML table

css/fonts.css

@@ -0,0 +1,176 @@
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Fira Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v9/va9E4kDNxMZdWfMOD5VvmojLazX3dGTP.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Fira Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v9/va9E4kDNxMZdWfMOD5Vvk4jLazX3dGTP.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Fira Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v9/va9E4kDNxMZdWfMOD5Vvm4jLazX3dGTP.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Fira Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v9/va9E4kDNxMZdWfMOD5VvlIjLazX3dGTP.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Fira Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v9/va9E4kDNxMZdWfMOD5VvmIjLazX3dGTP.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Fira Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v9/va9E4kDNxMZdWfMOD5VvmYjLazX3dGTP.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Fira Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v9/va9E4kDNxMZdWfMOD5Vvl4jLazX3dA.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Raleway';
+  font-style: italic;
+  font-weight: 300;
+  src: local('Raleway Light Italic'), local('Raleway-LightItalic'), url(https://fonts.gstatic.com/s/raleway/v13/1Ptpg8zYS_SKggPNyCgw5qN_DNCb71ka4ZiO.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Raleway';
+  font-style: italic;
+  font-weight: 300;
+  src: local('Raleway Light Italic'), local('Raleway-LightItalic'), url(https://fonts.gstatic.com/s/raleway/v13/1Ptpg8zYS_SKggPNyCgw5qN_AtCb71ka4Q.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Raleway';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Raleway Italic'), local('Raleway-Italic'), url(https://fonts.gstatic.com/s/raleway/v13/1Ptsg8zYS_SKggPNyCg4Q4FqL_KWxWMT.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Raleway';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Raleway Italic'), local('Raleway-Italic'), url(https://fonts.gstatic.com/s/raleway/v13/1Ptsg8zYS_SKggPNyCg4TYFqL_KWxQ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Raleway Light'), local('Raleway-Light'), url(https://fonts.gstatic.com/s/raleway/v13/1Ptrg8zYS_SKggPNwIYqWqhPANqczVsq4A.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Raleway Light'), local('Raleway-Light'), url(https://fonts.gstatic.com/s/raleway/v13/1Ptrg8zYS_SKggPNwIYqWqZPANqczVs.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v13/1Ptug8zYS_SKggPNyCMIT4ttDfCmxA.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v13/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), local('sans-serif'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), local('sans-serif'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), local('sans-serif'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), local('sans-serif'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), local('sans-serif'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), local('sans-serif'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), local('sans-serif'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

css/main.css

@@ -7,6 +7,13 @@ html {
     font-size: 22px;
     -webkit-print-color-adjust: exact;
 }
+
+@media print {
+    thead {
+        display: table-header-group;
+    }
+}
+
 .image {
     max-width: 500px;
     margin: auto;
@@ -41,20 +48,83 @@ html {
     padding: 0 1rem;
 }
 
+table {
+    page-break-before: always;
+}
+
+table.table th,
+table.table td {
+    padding: 0;
+    border: 0;
+}
+
+table thead {
+    display: table-header-group;
+}
+table.toc-table {
+    width: 100%;
+}
+
+table.toc-table tbody tr {
+    page-break-inside: avoid;
+}
+
+table.toc-table .toc-section {
+    padding: .4rem 1rem;
+}
+
+table.toc-table .toc-section a {
+    font-weight: 600;
+    text-transform: uppercase;
+    color: rgba(24, 40, 72, 0.8);
+    font-size: 1.3rem;
+}
+
+table.toc-table .toc-content {
+    font-family: 'Raleway', sans-serif;
+    color: hsl(0, 0%, 33%);
+    letter-spacing: 0.02rem;
+    font-weight: 400;
+    font-size: .75rem;
+    padding-left: 1rem;
+    line-height: 1rem;
+}
+
 .toc-container {
     padding: 0 6rem;
     margin-bottom: 1rem;
     font-size: 1.5rem;
 }
 
-.toc-container a {
-    color: #182848;
-    /* font-family: 'Raleway', sans-serif;
-    font-weight: 300; */
+.toc-container .columns.is-mobile {
+    margin-bottom: .75rem;
+    page-break-inside: avoid;
+}
+
+.toc-container .column.is-11,
+.toc-container .column.is-1 {
+    padding: .2rem 1rem;
+}
+
+.toc-container .toc-title,
+.toc-container .column.is-1 {
+    font-weight: 600;
+    text-transform: uppercase;
+    color: rgba(24, 40, 72, 0.8);
+    font-size: 1.3rem;
+}
+
+.toc-container .toc-content {
+    font-family: 'Raleway', sans-serif;
+    color: hsl(0, 0%, 33%);
+    letter-spacing: 0.02rem;
+    font-weight: 400;
+    font-size: .75rem;
+    padding-left: 1rem;
+    line-height: 1rem;
 }
 
-h2,
-h2.category-name {
+h2 {
     background: rgb(24,40,72);
     background: linear-gradient(25deg, rgba(24,40,72,1) 0%, rgba(24,40,72,0.8) 100%);
     padding: 3rem 1rem 1rem 1rem;

example.js

@@ -4,14 +4,13 @@ const puppeteer = require('puppeteer');
   const browser = await puppeteer.launch();
   const page = await browser.newPage();
   await page.goto('http://localhost:5500/', {waitUntil: 'networkidle2'});
-  await page.emulateMedia('screen');
+  //await page.emulateMedia('screen');
   await page.pdf({
       path: 'sample.pdf',
       height: '1450',
-      displayHeaderFooter: true,
-      footerTemplate: '<div style="width:100%;font-size:11px!important;color:grey!important;text-align:right!important;padding-right:10px!important;" class="pdfheader"><span class="pageNumber"></span></div>',
-      margin: {bottom: 35}
     });
-
+    // displayHeaderFooter: true,
+    // footerTemplate: '<div style="width:100%;font-size:11px!important;color:grey!important;text-align:right!important;padding-right:10px!important;" class="pdfheader"><span class="pageNumber"></span></div>',
+    // margin: {bottom: 35}
   await browser.close();
 })();

index.html

@@ -6,7 +6,7 @@
     <title>Vademecum</title>
     <link rel="stylesheet" href="css/bulma.min.css">
     <link rel="stylesheet" href="css/main.css">
-    <link href="https://fonts.googleapis.com/css?family=Fira+Sans|Raleway:300,300i,400,400i|Roboto" rel="stylesheet">
+    <link href="css/fonts.css" rel="stylesheet">
     <!-- Polyfill file for wkhtmltopdf -->
     <script src="js/polyfill.min.js"></script>
     
@@ -25,7 +25,53 @@
       </div>
     </div>
 
-    <section class="container us-container">
+    <table>
+      <thead>
+        <tr>
+          <td>
+            <h2>Nosotros</h2>
+          </td>
+        </tr>
+      </thead>
+      <tbody>
+        <tr><td>
+          <div>
+              <p>
+                Productos profesionales, elaborados con normas de calidad internacional GMP, basados en sustancias activas concentradas de gran pureza y vehículos específicos altamente eficaces que permiten optimizar la belleza y cuidados personalizados de la piel, con base científica.
+              </p>
+              <p>
+                ESPECIFICOS Buenos Aires se compromete a garantizar productos de confianza, ultra-eficaces, tecnología de avanzada y control de calidad permanente bajo normas internacionales de bioseguridad. Texturas aterciopeladas, principios activos de gran pureza, vehículos especializados que conforman productos vanguardistas con delicadas fragancias.
+              </p>
+              <p>
+                El diagnóstico previo personalizado y seguimiento por una profesional formada en tratamientos ESPECIFICOS Buenos Aires es nuestra filosofía de excelencia, ética, seriedad y apoyo constante para un perfecto resultado.
+              </p>
+          </div>
+        </td></tr>
+        <tr><td>
+            <div class="columns">
+              <div class="column">
+                <image src="images/pure.png" width="124"/>
+                <p>Principios activos seleccionados de máximo grado de pureza.</p>
+              </div>
+              <div class="column">
+                <image src="images/application.png" width="124" />
+                <p>Formulaciones únicas, concebidas en combinación con técnicas de aplicación sinérgica, que aportan resultados inmediatos y duraderos.</p>
+              </div>
+            </div>
+            <div class="columns">
+              <div class="column">
+                <image src="images/science.png" width="124"/>
+                <p>Vehículos especializados para preservar la integridad de las fórmulas y evitar procesos de sensibilización.</p>
+              </div>
+              <div class="column">
+                <image src="images/certification.png" width="124" />
+                <p>Estrictos controles bajo normas de calidad internacional GMP son garantía de los productos ESPECIFICOS Buenos Aires.</p>
+              </div>
+            </div>
+        </td></tr>
+      </tbody>
+    </table>
+    <!-- <section class="container us-container">
       <h2>Nosotros</h2>
       <div class="us-body">
         <p>
@@ -61,47 +107,7 @@
           </div>
         </div>
       </div>
-    </section>
-
-    <section class="table-of-content container">
-      <h2>Indice</h2>
-      <div class="toc-container">
-        <div class="columns is-mobile">
-          <div class="column is-11">
-            <a href="#higiene"><h4>Higiene</h4></a>
-            <p class="">
-              <span>Emulsion de Higiene</span>
-              <span>Exfoliating Scrub</span>
-            </p>
-          </div>
-          <div class="column is-1">
-            4
-          </div>
-        </div>
-        <ul>
-          <li>
-            <a href="#higiene"><span class="item-number">4</span> Higiene</li></a>
-          <li>
-            <a href="#máscaras"><span class="item-number">5</span> Máscaras</a></li>
-          <li>
-            <a href="#ácido-hialurónico"><span class="item-number">6</span> Ácido Hialurónico</a></li>
-          <li>
-            <a href="#peeling"><span class="item-number">8</span> Peeling</a></li>
-          <li>
-            <a href="#corporales"><span class="item-number">9</span> Corporales</a></li>
-          <li>
-            <a href="#hombres"><span class="item-number">11</span> Hombres</a></li>
-          <li>
-            <a href="#protección-intensiva"><span class="item-number">13</span> Protección Intensiva</a></li>
-          <li>
-            <a href="#monodosis"><span class="item-number">18</span> Monodosis</a></li>
-          <li>
-            <a href="#activos-concentrados"><span class="item-number">23</span> Activos Concentrados</a></li>
-          <li>
-            <a href="#protección-solar"><span class="item-number">27</span> Protección Solar</a></li>
-        </ul>
-      </div>
-    </section>
+    </section> -->
 
     <div id="vademecum" class="container"></div>
 

js/vademecum.js

@@ -1213,31 +1213,55 @@ const Category = (categoryName, products) => (
 );
 
 const ToC = () => (
-  <div className="table-of-content container">
-    <h2>Indice</h2>
-    <div className="toc-container">
-      {
-        categories.map((categoryName, i) => (
-          <div className="columns is-mobile">
-            <div className="column is-11">
-              <a href={`#${mkCategoryTag(categoryName)}`}>{categoryName}</a>
-              {
-                products[categoryName].map(product => (
-                  <div>
-                    { product.name }
-                  </div>
-                ))
-              }
-            </div>
-            <div className="column is-1">
-              { i }
-            </div>
+  <table className='toc-table table is-fullwidth'>
+    <thead>
+      <tr><th><h2>Indice</h2></th></tr>
+    </thead>
+    <tbody>
+    {
+      categories.map((categoryName, i) => (
+        <tr><td>
+          <div className='toc-section'>
+            <div><a href={`#${mkCategoryTag(categoryName)}`} className='toc-title'>{categoryName}</a></div>
+            {
+              products[categoryName].map(product => (
+                <div className='toc-content'>
+                  { product.name }
+                </div>
+              ))
+            }
           </div>
-        ))
-      }
-    </div>
-  </div>
+        </td></tr>
+      ))
+    }  
+    </tbody>
+  </table>
 )
+
+{/* <div className="table-of-content container">
+  <h2>Indice</h2>
+  <div className="toc-container">
+    {
+      categories.map((categoryName, i) => (
+        <div className="columns is-mobile">
+          <div className="column is-11">
+            <a href={`#${mkCategoryTag(categoryName)}`} className='toc-title'>{categoryName}</a>
+            {
+              products[categoryName].map(product => (
+                <div className='toc-content'>
+                  { product.name }
+                </div>
+              ))
+            }
+          </div>
+          <div className="column is-1">
+            { i }
+          </div>
+        </div>
+      ))
+    }
+  </div>
+</div> */}
 const Vademecum = () => {
   return categories.map((categoryName, i) => (
     <div key={i}>

lib/vademecum.js

@@ -771,25 +771,49 @@ var Category = function Category(categoryName, products) {
 };
 
 var ToC = function ToC() {
-  return dom("div", {
-    className: "table-of-content container"
-  }, dom("h2", null, "Indice"), dom("div", {
-    className: "toc-container"
-  }, categories.map(function (categoryName, i) {
-    return dom("div", {
-      className: "columns is-mobile"
-    }, dom("div", {
-      className: "column is-11"
-    }, dom("a", {
-      href: "#".concat(mkCategoryTag(categoryName))
-    }, categoryName), products[categoryName].map(function (product) {
-      return dom("div", null, product.name);
-    })), dom("div", {
-      className: "column is-1"
-    }, i));
+  return dom("table", {
+    className: "toc-table table is-fullwidth"
+  }, dom("thead", null, dom("tr", null, dom("th", null, dom("h2", null, "Indice")))), dom("tbody", null, categories.map(function (categoryName, i) {
+    return dom("tr", null, dom("td", null, dom("div", {
+      className: "toc-section"
+    }, dom("div", null, dom("a", {
+      href: "#".concat(mkCategoryTag(categoryName)),
+      className: "toc-title"
+    }, categoryName)), products[categoryName].map(function (product) {
+      return dom("div", {
+        className: "toc-content"
+      }, product.name);
+    }))));
   })));
 };
 
+{
+  /* <div className="table-of-content container">
+   <h2>Indice</h2>
+   <div className="toc-container">
+     {
+       categories.map((categoryName, i) => (
+         <div className="columns is-mobile">
+           <div className="column is-11">
+             <a href={`#${mkCategoryTag(categoryName)}`} className='toc-title'>{categoryName}</a>
+             {
+               products[categoryName].map(product => (
+                 <div className='toc-content'>
+                   { product.name }
+                 </div>
+               ))
+             }
+           </div>
+           <div className="column is-1">
+             { i }
+           </div>
+         </div>
+       ))
+     }
+   </div>
+  </div> */
+}
+
 var Vademecum = function Vademecum() {
   return categories.map(function (categoryName, i) {
     return dom("div", {

package.json

@@ -21,7 +21,7 @@
   "scripts": {
     "start": "./node_modules/.bin/babel js/vademecum.js --watch --out-file lib/vademecum.js",
     "build": "./node_modules/.bin/babel js/vademecum.js --out-dir lib",
-    "pdf": "wkhtmltopdf.exe -B 0 -L 0 -R 0 -T 0 toc --xsl-style-sheet pdf/toc.xsl index.html pdf/vademecum.pdf"
+    "pdf": "node example.js"
   },
   "repository": {
     "type": "git",