Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

RNGS archives/editions structure #1

Closed
hobbes7878 opened this issue Mar 28, 2021 · 9 comments
Closed

RNGS archives/editions structure #1

hobbes7878 opened this issue Mar 28, 2021 · 9 comments
Labels
Discussion Ideas to thinking face

Comments

@hobbes7878
Copy link
Member

Imagine a project that has a single page for graphics.reuters.com and two embeds published in two locales.

RNGS archives/editions

Here's a minimal example of the edition structure:

馃搧 public.zip
interactive/
  - index.html
  - embeds/
    - en/
      - chart/
        index.html
      - map/
        index.html
    - de/
      - chart/
        index.html
      - map/
        index.html

馃搧 media-en-chart.zip
media-interactive/
  - _gfxpreview.png
  - README.txt
  - host/
    - index.html

馃搧 media-en-map.zip
media-interactive/
  - _gfxpreview.png
  - README.txt
  - host/
    - index.html

馃搧 media-de-chart.zip
media-interactive/
  - _gfxpreview.png
  - README.txt
  - host/
    - index.html

馃搧 media-de-map.zip
media-interactive/
  - _gfxpreview.png
  - README.txt
  - host/
    - index.html

馃搧 media-code.zip
media-interactive/
  - _gfxpreview.png
  - app.zip
  - README.txt

public archive

All publicly hosted files go into a single archive, public.zip.

The archive only includes HTML documents. All page assets -- js, css, imgs -- are published to a separate CDN. That lets us absolutely reference them for easier self-hosting without needing to re-route relative src paths when the folder structure changes in the embeds.

media archives

馃搧 media-en-map.zip
media-interactive/
  - _gfxpreview.png
  - README.txt
  - host/
    - index.html
  • _gfxpreview.png is a screen-grab of the embeddable graphic, generated during the publish process.
  • README.txt includes the pym.js embed code referencing the page published in the public.zip/interactive archive.
  • host/index.html is a duplication of the HTML document for the embed published in the public.zip/interactive archive.

code archive

馃搧 media-code.zip
media-interactive/
  - _gfxpreview.png
  - app.zip
  - README.txt
  • _gfxpreview.png is the page's share card.
  • app.zip is the git archive of the entire development project.
  • README.txt includes instructions on how to start up the development server, customise src files and build a dist/ directory that can be uploaded to client's servers.
@hobbes7878 hobbes7878 added the Discussion Ideas to thinking face label Mar 28, 2021
@hobbes7878
Copy link
Member Author

hobbes7878 commented Mar 28, 2021

Open question: AI files

One option could be to put AI files -- .eps / .jpg -- into a folder in the dev directory that directly maps to the embed archives.

So something like...

media-assets/
  - en/
    - map/
      - map.eps
      - map.jpg

... in the development directory is ...

馃搧 media-en-map.zip
media-interactive/
  - _gfxpreview.png
  - README.txt
  - host/
    - index.html
eps/
  - map.eps
jpg/
  - map.jpg

... added onto the media archive for that embed.

Any AI files that don't map to an embed archive would then be uploaded directly to the RNGS server the usual way.

@hobbes7878
Copy link
Member Author

This would be the dist structure built out of sveltekit in this example:

馃搧 dist
cdn/
  - chunks/
    - js/css/etc. ...
  - pages/
    - js ...
  - images/
    - jpg/png/etc.
  - {{ some other stuff }}
  - start.xyz123.js
interactive/
  - index.html
  - embeds/
    - en/
      - chart/
        index.html
      - map/
        index.html
    - de/
      - chart/
        index.html
      - map/
        index.html

cdn/ gets uploaded to AWS directly.

interactive/ gets re-packed based on the directory structure (embeds/) before uploading to RNGS.

A client using our code archive would publish both to their own servers.

@hobbes7878
Copy link
Member Author

@MatthewWeberTR's map of Connect and dotcom/future arc outputs.

image

@hobbes7878
Copy link
Member Author

hobbes7878 commented Mar 30, 2021

I think the individual things above make sense in general...

... EXCEPT to clarify I think "raw code" is not src files, because those assets aren't really separable for each embed.

So I'm suggesting we push a separate edition to Connect which is just src code for clients who want to customize any part of the graphic project all the way down (including translating it) with clear instructions on how to customize paths and publish to their own servers.

Then I'm suggesting we group the "flats" and "interactive" embeds as above in a single edition so if a client buys any chart they get all of:

  1. embed code for a graphic hosted on our servers
  2. an HTML file they can host on their servers and embed elsewhere in their CMS
  3. an EPS file
  4. a JPG

... which looks like this in RNGS:

馃搧 media-en-map.zip
media-interactive/
  - _gfxpreview.png
  - README.txt
  - host/
    - index.html
eps/
  - map.eps
jpg/
  - map.jpg

I am suggesting we cutoff the route for folks who did weird things like customize the minified JS and CSS files. As we get into code-splitting (we basically already have...) that kind of editing of built files becomes impossible.

ALSO worth being upfront about this: Because JS and CSS assets are referenced using root paths (ie, /... not file relative ./...) in pages, we're just giving clients HTML, so even if they host an embed on their own servers, they're still calling our JS and CSS from our CDN.

@hobbes7878
Copy link
Member Author

hobbes7878 commented Mar 30, 2021

Also, Matt mentioned that what was missing from my editions mockup above was a full page embed.

... Kinda want to talk about how many clients actually embed that full page. If we start focusing on embeds that are parts of pages -- which to my mind seems more useful to a client, but maybe I'm wrong?? -- then we have a lot freer hand to design pages with more crazy parallax or whatever without needing to unwind it all for a page our clients would prefer was broken out in parts anyway.

BUT nothing I'm suggesting cuts off our path to continuing to publish that full embed. It's just another embed!

@hobbes7878
Copy link
Member Author

hobbes7878 commented Apr 1, 2021

Just to convey my understanding of terminology w/r/t RNGS...

image

@hobbes7878
Copy link
Member Author

First agreed draft of pack structure:

  • Statics assets published to RNGS public/interactive archive
  • Remove hosted embed option but add src app archive to each embed edition
  • Embed full-page is default
  • EPS/JPG editions packaged with single embed archive
馃搧 public.zip
interactive/
  - index.html
  - cdn/
    - js/ ...
    - css/ ... 
  - embeds/
    - en/
      - page/
        - index.html 
      - chart/
        - index.html
      - map/
        - index.html
    - de/
      - page/
        - index.html 
      - chart/
        - index.html
      - map/
        - index.html

馃搧 media-en-page.zip
media-interactive/
  - _gfxpreview.png
  - EMBED.txt
  - app.zip
  - README.txt

馃搧 media-en-chart.zip
media-interactive/
  - _gfxpreview.png
  - EMBED.txt
  - app.zip
  - README.txt
 eps/
  - chart.jpg
  - chart.eps
jpg/
  - chart.jpg

馃搧 media-en-map.zip
media-interactive/
  - _gfxpreview.png
  - EMBED.txt
  - app.zip
  - README.txt
eps/
  - map.jpg
  - map.eps
jpg/
  - map.jpg

馃搧 media-de-page.zip
media-interactive/
  - _gfxpreview.png
  - EMBED.txt
  - app.zip
  - README.txt

馃搧 media-de-chart.zip
media-interactive/
  - _gfxpreview.png
  - EMBED.txt
  - app.zip
  - README.txt
eps/
  - chart.jpg
  - chart.eps
jpg/
  - chart.jpg

馃搧 media-de-map.zip
media-interactive/
  - _gfxpreview.png
  - EMBED.txt
  - app.zip
  - README.txt
eps/
  - map.jpg
  - map.eps
jpg/
  - map.jpg

@hobbes7878
Copy link
Member Author

This structure is now built using reuters-graphics/graphics-kit-publisher.

@hobbes7878
Copy link
Member Author

hobbes7878 commented Aug 20, 2021

Note, released a version of the publisher-kit that now packages media archives with an interactive edition per reuters-graphics/graphics-kit-publisher#15.

So now media archives will go up with editions like this:

馃搧 media-de-map.zip
media-interactive/
  - _gfxpreview.png
  - EMBED.txt
  - app.zip
  - README.txt
interactive/ 馃憟
  - index.html 馃憟
eps/
  - map.jpg
  - map.eps
jpg/
  - map.jpg

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Discussion Ideas to thinking face
Projects
None yet
Development

No branches or pull requests

1 participant