Giter Club home page Giter Club logo

translation-helps-print-preview's Introduction

Translation Helps Print Preview

The Need(s)

  1. Developers need an easy to use way to render Translation Helps resources as PDFs.
  2. Developers need an easy to use way to render Translation Helps resources in their apps that create a printed PDF.


The Solution

  1. Create a single solution to rendering to screen and PDF.
  2. Create an RCL that renders resources that are passed into it to screen compatible with a page layout.
  3. Use Paged.js to generate a PDF preview of the rendered resources.
  4. Use the browser's print function to create PDF file.


Separation of Concerns

The rendering of resources should not be convoluted by the fetching of resources. The fetching of data and rendering should be discrete layers. Applications may already have all the data required to render and just need to render it. Ie. translationCore Create, Gateway Edit, Gateway Admin. This also allows an app to include this funcitonality and be completely offline without fetching data.


Application

This includes Reference Implementation or other Apps.

  1. Use permalinks to get owner/repository/language/branch.
  2. Fetch required resources via Gitea React Toolkit or future Gitea React Hooks.
  3. Load resources offline from filesystem/indexedDB.
  4. Import React Component/Hook Library to render Print Preview.
  5. Pass resources to be rendered into Print Preview component/hook.
  6. Choose where to render Print Preview on screen in another component such as full page, modal, or new window/tab.

Print Preview React Component/Hook Library

The Print Preview React Component/Hook Library is focused on breaking down Resources into pieces and rendering them via Translation Helps RCL in a Layout that is a Print Preview via Paged.js.

  1. Import Translation Helps RCL for rendering pieces of resources.
  2. Use resources passed into library to render components in the Layout.
  3. Split resource content into pieces that Translation Helps RCL Components need to render.
  4. Use Paged.js to render Print Preview.

Translation Helps RCL

Translation Helps RCL is focused on rendering individual pieces of resources as React Components and providing necessary data for doing so.

  1. Render portions of a resource as a React component.
  2. Use props passed in to render.
  3. Provide hook to get a GL quote from OL quote and related scripture data.

Node.js script for headless rendering

The Node.js environment does not need to reacreate everything that the app or RCLs do to create a PDF.

  1. Generate data required to pass to an App that generates Print Preview.

    1. If the app requires .zip files of all resources, download and provide those.

    2. If the app requires a link to make permalinks load required data from server.

  2. Pass link into a headless browser and trigger Print function after the page renders.



Repository Structure

This repository is broken down into two parts:

  1. The React Component Library (React Styleguidist) that is published to NPM.
  2. The Reference Implementation (Create React App) that is deployed to Netlify.

translation-helps-print-preview's People

Contributors

abelpz avatar birchamp avatar klappy avatar richmahn avatar

Watchers

 avatar  avatar  avatar

translation-helps-print-preview's Issues

SPIKE: GL Quote retrieval

How does gE get GL Quotes in TWL?
How does Proskomma do it? - Proskomma will be able to do this but the time necessary to build this wasn't feasible for the collab week. Robert noted that this is only 97% functioning at this point, but that is sufficient for an initial release.

Build the permalink needed for print preview

This could be more useful if the user can navigate by org, repo, reference (branch or tag) and then Bible book code, but for now (MVP) getting the address of the file is sufficient.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.