bidi2pdf-rails 0.0.1.pre.alpha

data/spec/dummy/app/assets/stylesheets/screen.css

@@ -0,0 +1,281 @@
+/* CSS for Paged.js interface – v0.4 */
+
+/* Change the look */
+:root {
+    --color-background: whitesmoke;
+    --color-pageSheet: #cfcfcf;
+    --color-pageBox: violet;
+    --color-paper: white;
+    --color-marginBox: transparent;
+    --pagedjs-crop-color: black;
+    --pagedjs-crop-shadow: white;
+    --pagedjs-crop-stroke: 1px;
+}
+
+/* To define how the book look on the screen: */
+@media screen, pagedjs-ignore {
+    body {
+        background-color: var(--color-background);
+    }
+
+    .pagedjs_pages {
+        display: flex;
+        width: calc(var(--pagedjs-width) * 2);
+        flex: 0;
+        flex-wrap: wrap;
+        margin: 0 auto;
+    }
+
+    .pagedjs_page {
+        background-color: var(--color-paper);
+        box-shadow: 0 0 0 1px var(--color-pageSheet);
+        margin: 0;
+        flex-shrink: 0;
+        flex-grow: 0;
+        margin-top: 10mm;
+    }
+
+    .pagedjs_first_page {
+        margin-left: var(--pagedjs-width);
+    }
+
+    .pagedjs_page:last-of-type {
+        margin-bottom: 10mm;
+    }
+
+    .pagedjs_pagebox{
+        box-shadow: 0 0 0 1px var(--color-pageBox);
+    }
+
+    .pagedjs_left_page{
+        z-index: 20;
+        width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width))!important;
+    }
+
+    .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop {
+        border-color: transparent;
+    }
+
+    .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
+        width: 0;
+    }
+
+    .pagedjs_right_page{
+        z-index: 10;
+        position: relative;
+        left: calc(var(--pagedjs-bleed-left)*-1);
+    }
+
+    /* show the margin-box */
+
+    .pagedjs_margin-top-left-corner-holder,
+    .pagedjs_margin-top,
+    .pagedjs_margin-top-left,
+    .pagedjs_margin-top-center,
+    .pagedjs_margin-top-right,
+    .pagedjs_margin-top-right-corner-holder,
+    .pagedjs_margin-bottom-left-corner-holder,
+    .pagedjs_margin-bottom,
+    .pagedjs_margin-bottom-left,
+    .pagedjs_margin-bottom-center,
+    .pagedjs_margin-bottom-right,
+    .pagedjs_margin-bottom-right-corner-holder,
+    .pagedjs_margin-right,
+    .pagedjs_margin-right-top,
+    .pagedjs_margin-right-middle,
+    .pagedjs_margin-right-bottom,
+    .pagedjs_margin-left,
+    .pagedjs_margin-left-top,
+    .pagedjs_margin-left-middle,
+    .pagedjs_margin-left-bottom {
+        box-shadow: 0 0 0 1px inset var(--color-marginBox);
+    }
+
+    /* uncomment this part for recto/verso book : ------------------------------------ */
+
+    /*
+    .pagedjs_pages {
+        flex-direction: column;
+        width: 100%;
+    }
+
+    .pagedjs_first_page {
+        margin-left: 0;
+    }
+
+    .pagedjs_page {
+        margin: 0 auto;
+        margin-top: 10mm;
+    }
+
+    .pagedjs_left_page{
+        width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width) + var(--pagedjs-bleed-left))!important;
+    }
+
+    .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop{
+        border-color: var(--pagedjs-crop-color);
+    }
+
+    .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
+        width: var(--pagedjs-cross-size)!important;
+    }
+
+    .pagedjs_right_page{
+        left: 0;
+    }
+    */
+
+
+
+    /*--------------------------------------------------------------------------------------*/
+
+
+
+    /* uncomment this par to see the baseline : -------------------------------------------*/
+
+
+    /* .pagedjs_pagebox {
+        --pagedjs-baseline: 22px;
+        --pagedjs-baseline-position: 5px;
+        --pagedjs-baseline-color: cyan;
+        background: linear-gradient(transparent 0%, transparent calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) var(--pagedjs-baseline)), transparent;
+        background-size: 100% var(--pagedjs-baseline);
+        background-repeat: repeat-y;
+        background-position-y: var(--pagedjs-baseline-position);
+    }  */
+
+
+    /*--------------------------------------------------------------------------------------*/
+}
+
+
+
+
+
+/* Marks (to delete when merge in paged.js) */
+
+.pagedjs_marks-crop{
+    z-index: 999999999999;
+
+}
+
+.pagedjs_bleed-top .pagedjs_marks-crop,
+.pagedjs_bleed-bottom .pagedjs_marks-crop{
+    box-shadow: 1px 0px 0px 0px var(--pagedjs-crop-shadow);
+}
+
+.pagedjs_bleed-top .pagedjs_marks-crop:last-child,
+.pagedjs_bleed-bottom .pagedjs_marks-crop:last-child{
+    box-shadow: -1px 0px 0px 0px var(--pagedjs-crop-shadow);
+}
+
+.pagedjs_bleed-left .pagedjs_marks-crop,
+.pagedjs_bleed-right .pagedjs_marks-crop{
+    box-shadow: 0px 1px 0px 0px var(--pagedjs-crop-shadow);
+}
+
+.pagedjs_bleed-left .pagedjs_marks-crop:last-child,
+.pagedjs_bleed-right .pagedjs_marks-crop:last-child{
+    box-shadow: 0px -1px 0px 0px var(--pagedjs-crop-shadow);
+}
+
+body{
+    --header-w-close: 78px;
+    --header-w-open: 220px;
+    --color-icon-select: rgb(8, 38, 92);
+    --color-icon: rgb(85, 109, 175);
+}
+
+
+#header-pagedjs{
+    display: none;
+}
+
+
+
+#header-pagedjs{
+    font-family: Arial, Helvetica, sans-serif;
+    position: fixed;
+    box-sizing: border-box;
+    top: 10px;
+    right: 40px;
+    z-index: 999;
+}
+
+
+
+
+#header-pagedjs button {
+    display: flex;
+    width: 48px;
+    height: 48px;
+    background-color: transparent;
+    border: none;
+    align-items: center;
+    justify-content: flex-start;
+    margin-top: 18px;
+    margin-bottom: 18px;
+    cursor: pointer;
+    color: var(--color-icon);
+    background-color: rgb(225, 225, 225);
+    border: 3px solid rgb(225, 225, 225);
+    border-radius: 10px;
+
+}
+
+
+#header-pagedjs button svg {
+    width: 100%;
+    fill: var(--color-icon);
+}
+
+
+#header-pagedjs button::before{
+    content: attr(data-text);
+    color: var(--color-icon-select)!important;
+    position: absolute;
+    width: 200px;
+    left: -216px;
+    text-align: right;
+    font-size: 18px;
+    display: none;
+    font-weight: bold;
+    /* background-color:  rgba(225, 225, 225, 0.3);
+    padding: 3px 8px; */
+}
+
+/* checked */
+#input-screen:checked ~ #button-screen,
+#input-print:checked ~ #button-print-preview { border: 3px solid var(--color-icon); }
+
+/* disabled */
+button:disabled { cursor: none; }
+#button-print:disabled svg{ cursor: none; fill: #bbb!important; }
+
+/* hover */
+#header-pagedjs button:hover svg{ fill: var(--color-icon-select); }
+#header-pagedjs button:hover{ border: 3px solid var(--color-icon-select)!important; }
+#header-pagedjs button:hover::before{ display: block!important; }
+
+
+@media screen, pagedjs-ignore {
+    #header-pagedjs{ display: block; }
+}
+
+@media screen, pagedjs-ignore {
+
+    .pagedjs_pages {
+        flex-direction: column;
+        width: 100%;
+    }
+
+    .pagedjs_first_page {
+        margin-left: 0;
+    }
+
+    .pagedjs_page {
+        margin: 0 auto;
+        margin-top: 10mm;
+    }
+
+}

data/spec/dummy/app/controllers/application_controller.rb

@@ -0,0 +1,4 @@
+class ApplicationController < ActionController::Base
+  # Only allow modern browsers supporting webp images, web push, badges, import maps, CSS nesting, and CSS :has.
+  allow_browser versions: :modern
+end

data/spec/dummy/app/controllers/reports_controller.rb

@@ -0,0 +1,8 @@
+class ReportsController < ApplicationController
+  def show
+    respond_to do |format|
+      format.html
+      format.pdf { render pdf: 'my-report', layout: 'pdf' }
+    end
+  end
+end

data/spec/dummy/app/helpers/application_helper.rb

@@ -0,0 +1,2 @@
+module ApplicationHelper
+end

data/spec/dummy/app/helpers/reports_helper.rb

@@ -0,0 +1,2 @@
+module ReportsHelper
+end

data/spec/dummy/app/views/layouts/application.html.erb

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title><%= content_for(:title) || "Dummy" %></title>
+  <%= csp_meta_tag %>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <%= yield :head %>
+
+  <link rel="manifest" href="/manifest.json">
+  <link rel="icon" href="/icon.png" type="image/png">
+  <link rel="icon" href="/icon.svg" type="image/svg+xml">
+  <link rel="apple-touch-icon" href="/icon.png">
+
+  <%= stylesheet_link_tag "stylesheets/reset", nonce: true %>
+  <%= stylesheet_link_tag "stylesheets/screen", nonce: true %>
+  <%= stylesheet_link_tag "stylesheets/pdf", nonce: true %>
+
+  <script>
+      window.loaded = false; // make it global
+
+      window.PagedConfig = {
+          auto: false,
+          after: (flow) => {  },
+      };
+
+      function initPaged() {
+          console.log("Paged library is ready");
+          // Initialize your Paged handlers here
+
+          class PageJsReadyHandler extends Paged.Handler {
+              constructor(chunker, polisher, caller) {
+                  super(chunker, polisher, caller);
+              }
+
+              afterRendered(pages) {
+                  window.loaded = true;
+                  console.info("✅ Paged.js has rendered everything!");
+              }
+          }
+
+          Paged.registerHandlers(PageJsReadyHandler);
+
+          window.PagedPolyfill.preview();
+      }
+  </script>
+
+  <%= javascript_include_tag "javascripts/paged.polyfill-4.3.js",  nonce: true, async: true, onload: "initPaged()" %>
+
+  <!-- No Favicon -->
+  <link rel="icon" href="data:,">
+
+  <link
+    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
+    rel="stylesheet"
+    crossorigin="anonymous"
+    />
+
+</head>
+
+<body>
+<%= yield %>
+</body>
+</html>

data/spec/dummy/app/views/layouts/pdf.html.erb

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title><%= content_for(:title) || "Dummy" %></title>
+  <%= csp_meta_tag %>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <%= yield :head %>
+
+  <link rel="manifest" href="/manifest.json">
+  <link rel="icon" href="/icon.png" type="image/png">
+  <link rel="icon" href="/icon.svg" type="image/svg+xml">
+  <link rel="apple-touch-icon" href="/icon.png">
+
+  <%= stylesheet_link_tag "stylesheets/reset", nonce: true %>
+  <%= stylesheet_link_tag "stylesheets/screen", nonce: true %>
+  <%= stylesheet_link_tag "stylesheets/pdf", nonce: true %>
+
+  <script>
+      window.loaded = false; // make it global
+
+      window.PagedConfig = {
+          auto: false,
+          after: (flow) => {  },
+      };
+
+      function initPaged() {
+          console.log("Paged library is ready");
+          // Initialize your Paged handlers here
+
+          class PageJsReadyHandler extends Paged.Handler {
+              constructor(chunker, polisher, caller) {
+                  super(chunker, polisher, caller);
+              }
+
+              afterRendered(pages) {
+                  window.loaded = true;
+                  console.info("✅ Paged.js has rendered everything!");
+              }
+          }
+
+          Paged.registerHandlers(PageJsReadyHandler);
+
+          window.PagedPolyfill.preview();
+      }
+  </script>
+
+  <%= javascript_include_tag "javascripts/paged.polyfill-4.3.js",  nonce: true, async: true, onload: "initPaged()" %>
+
+  <!-- No Favicon -->
+  <link rel="icon" href="data:,">
+
+  <link
+    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
+    rel="stylesheet"
+    crossorigin="anonymous"
+    />
+
+</head>
+
+<body>
+<%= yield %>
+</body>
+</html>

data/spec/dummy/app/views/pwa/manifest.json.erb

@@ -0,0 +1,22 @@
+{
+  "name": "Dummy",
+  "icons": [
+    {
+      "src": "/icon.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    },
+    {
+      "src": "/icon.png",
+      "type": "image/png",
+      "sizes": "512x512",
+      "purpose": "maskable"
+    }
+  ],
+  "start_url": "/",
+  "display": "standalone",
+  "scope": "/",
+  "description": "Dummy.",
+  "theme_color": "red",
+  "background_color": "red"
+}

data/spec/dummy/app/views/pwa/service-worker.js

@@ -0,0 +1,26 @@
+// Add a service worker for processing Web Push notifications:
+//
+// self.addEventListener("push", async (event) => {
+//   const { title, options } = await event.data.json()
+//   event.waitUntil(self.registration.showNotification(title, options))
+// })
+//
+// self.addEventListener("notificationclick", function(event) {
+//   event.notification.close()
+//   event.waitUntil(
+//     clients.matchAll({ type: "window" }).then((clientList) => {
+//       for (let i = 0; i < clientList.length; i++) {
+//         let client = clientList[i]
+//         let clientPath = (new URL(client.url)).pathname
+//
+//         if (clientPath == event.notification.data.path && "focus" in client) {
+//           return client.focus()
+//         }
+//       }
+//
+//       if (clients.openWindow) {
+//         return clients.openWindow(event.notification.data.path)
+//       }
+//     })
+//   )
+// })

data/spec/dummy/app/views/reports/show.html.erb

@@ -0,0 +1,153 @@
+<header class="page-header">
+  <h1>PDF Rendering Sample</h1>
+  <p class="text-muted">Styled with Bootstrap &amp; custom CSS</p>
+</header>
+<!-- don't know why, but it has to be placed here -->
+<footer class="page-footer text-center">
+  <p class="small text-muted">Generated with ❤️ by Bidi2PDF – Page </p>
+</footer>
+
+
+<main class="page-content container mt-4">
+  <section>
+    <h2 class="section-heading">Section One</h2>
+    <p>This is the first page. Add enough text here to push to the next page.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a ullamcorper purus. Nulla facilisi.
+      Cras pretium risus ac ligula dignissim, ut dictum justo fermentum. Donec dapibus purus vitae malesuada
+      bibendum.</p>
+    <p>Vestibulum quis velit at augue tincidunt egestas. Integer non dolor a nisl consequat gravida. Sed vitae
+      fermentum sapien. Suspendisse potenti.</p>
+    <p class="break-after"></p>
+  </section>
+  <section>
+    <h2 class="section-heading">Section Two (New Page)</h2>
+    <p>This content appears on a second page.</p>
+
+    <h3>Sample Table</h3>
+    <table class="table table-bordered">
+      <thead class="table-light">
+      <tr>
+        <th>#</th>
+        <th>Item</th>
+        <th>Description</th>
+        <th>Qty</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr>
+        <td>1</td>
+        <td>Widget A</td>
+        <td>High-quality widget</td>
+        <td>2</td>
+      </tr>
+      <tr>
+        <td>2</td>
+        <td>Widget B</td>
+        <td>Durable widget for long-term use</td>
+        <td>1</td>
+      </tr>
+      <tr>
+        <td>3</td>
+        <td>Gadget C</td>
+        <td>Great for productivity</td>
+        <td>3</td>
+      </tr>
+      <tr>
+        <td>4</td>
+        <td>Thingamajig D</td>
+        <td>Essential thingy</td>
+        <td>4</td>
+      </tr>
+      <tr>
+        <td>5</td>
+        <td>Whatchamacallit E</td>
+        <td>Mysterious and useful</td>
+        <td>1</td>
+      </tr>
+      </tbody>
+    </table>
+    <p class="content">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a ullamcorper purus. Nulla facilisi.
+      Cras pretium risus ac ligula dignissim, ut dictum justo fermentum. Donec dapibus purus vitae malesuada
+      bibendum.
+    </p>
+    <p class="content">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a ullamcorper purus. Nulla facilisi.
+      Cras pretium risus ac ligula dignissim, ut dictum justo fermentum. Donec dapibus purus vitae malesuada
+      bibendum.
+    </p>
+
+    <div class="float-start">
+      <%= image_tag 'images/img.jpg', class: "img-fluid my-3 me-3", style: "max-width:10cm;" %>
+    </div>
+
+    <div class="float-end">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a ullamcorper purus.</p>
+      <p>Vestibulum quis velit at augue tincidunt egestas.</p>
+    </div>
+
+    <div class="clearfix"></div>
+
+    <blockquote class="blockquote border-start border-primary ps-3 my-4">
+      <p>"Good design is obvious. Great design is transparent."</p>
+      <footer class="blockquote-footer">Joe Sparano</footer>
+    </blockquote>
+
+    <div class="alert alert-info my-4" role="alert">
+      <strong>Note:</strong> This document demonstrates advanced pagination with HTML and CSS.
+    </div>
+
+    <svg width="120" height="120" viewBox="0 0 32 32" class="my-4">
+      <circle r="16" cx="16" cy="16" fill="#f3f3f3"/>
+      <circle r="16" cx="16" cy="16" fill="transparent"
+              stroke="#4a90e2" stroke-width="32" stroke-dasharray="75 25"
+              transform="rotate(-90) translate(-32)"/>
+      <text x="16" y="20" text-anchor="middle" fill="#333" font-size="5">75%</text>
+    </svg>
+
+    <div class="row my-4">
+      <div class="col-md-6">
+        <h4>Column One</h4>
+        <p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
+      </div>
+      <div class="col-md-6">
+        <h4>Column Two</h4>
+        <p>Suspendisse potenti. Nullam eget neque id sem laoreet convallis.</p>
+      </div>
+    </div>
+
+    <p class="content">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a ullamcorper purus. Nulla facilisi.
+      Cras pretium risus ac ligula dignissim, ut dictum justo fermentum. Donec dapibus purus vitae malesuada
+      bibendum.
+    </p>
+    <p class="content">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a ullamcorper purus. Nulla facilisi.
+      Cras pretium risus ac ligula dignissim, ut dictum justo fermentum. Donec dapibus purus vitae malesuada
+      bibendum.
+    </p>
+    <p class="content">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a ullamcorper purus. Nulla facilisi.
+      Cras pretium risus ac ligula dignissim, ut dictum justo fermentum. Donec dapibus purus vitae malesuada
+      bibendum.
+    </p>
+    <p class="content">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a ullamcorper purus. Nulla facilisi.
+      Cras pretium risus ac ligula dignissim, ut dictum justo fermentum. Donec dapibus purus vitae malesuada
+      bibendum.
+    </p>
+    <p class="content">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a ullamcorper purus. Nulla facilisi.
+      Cras pretium risus ac ligula dignissim, ut dictum justo fermentum. Donec dapibus purus vitae malesuada
+      bibendum.
+    </p>
+  </section>
+  <section class="signature-section my-5 pt-5 text-center">
+    <p>Prepared by:</p>
+    <p><strong>Your Name or Company</strong></p>
+    <div class="border-top w-25 mx-auto my-2"></div>
+    <p class="small text-muted">Signature</p>
+  </section>
+</main>
+
+

data/spec/dummy/bin/rails

@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+APP_PATH = File.expand_path("../config/application", __dir__)
+require_relative "../config/boot"
+require "rails/commands"

data/spec/dummy/bin/rake

@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+require_relative "../config/boot"
+require "rake"
+Rake.application.run

data/spec/dummy/bin/setup

@@ -0,0 +1,29 @@
+#!/usr/bin/env ruby
+require "fileutils"
+
+APP_ROOT = File.expand_path("..", __dir__)
+APP_NAME = "dummy"
+
+def system!(*args)
+  system(*args, exception: true)
+end
+
+FileUtils.chdir APP_ROOT do
+  # This script is a way to set up or update your development environment automatically.
+  # This script is idempotent, so that you can run it at any time and get an expectable outcome.
+  # Add necessary setup steps to this file.
+
+  puts "== Installing dependencies =="
+  system! "gem install bundler --conservative"
+  system("bundle check") || system!("bundle install")
+
+  puts "\n== Removing old logs and tempfiles =="
+  system! "bin/rails log:clear tmp:clear"
+
+  puts "\n== Restarting application server =="
+  system! "bin/rails restart"
+
+  # puts "\n== Configuring puma-dev =="
+  # system "ln -nfs #{APP_ROOT} ~/.puma-dev/#{APP_NAME}"
+  # system "curl -Is https://#{APP_NAME}.test/up | head -n 1"
+end