This code is a clone of this page.
This is a project template for Svelte apps. Hopefully you've cloned this into storytelling-studio-apps, which handles most deployment and testing tasks.
Note that you will need to have Node.js installed.
To create a new project based on this template using degit:
npx degit GannettDigital/s2-apps-template storytelling-studio-apps/<new-project-slug>
cd <new-project-slug>
Please note: Your project directory will become the project slug used for deployment, so choose carefully. Calling your project election is bad, election-2018 is slightly better, election-faq-2020 is much better.
Install the dependencies...
cd <new-project-slug>
npm install
...then start Rollup:
npm run dev
The dev server will listen on $PORT
(5000 by default). Navigate to localhost:5000. You should see your app running. Edit a component file in src
, save it. The page should reload with your changes.
You should be doing this any time there's an editor or reporter involved. Which is to say, almost every project. We use gootenberg to pull files from Google Drive. We use a shared Google service account and JWT authentication. If you don't have credentials, please ask.
You will need:
- An environment variable,
$GOOGLE_AUTH_FILE
, pointing to the location of a credentials file (again, ask if you don't have this) - a spreadsheet or document key, or both, or many of those, depending on the project
Run gulp auth
to ensure you can authenticate with Google. From there, follow the Gootenberg docs to download and parse documents with ArchieML or spreadsheets as JSON. These usually live in a data
task in gulpfile.js
.
We can fetch data about Presto assets, which can save us the trouble of managing media or large text files. You'll need $CONTENT_API_KEY
defined. See past projects for example GraphQL code.
For the most part, we're dealing with small amounts of data for each project. By the time it reaches us, whatever data we need should be clean and well-organized. If it's not, we should be talking to the reporters and editors we're working with and/or building in time to do that work.
For small data files, it's often easiest to simply import a JSON (or CSV) file into our codebase. That way everything is available immediately, without waiting for an AJAX call. We don't need a loading state because the data is already loaded.
In these cases, data should live in the src/content
directory. One plugin, rollup-plugin-json
is already installed. For CSV, install rollup-plugin-dsv
.
If that doesn't work, or if we need to load data asynchronously, data can live in public
and be loaded via fetch()
. Just remember to handle cases where requests take longer than expected or fail entirely.
For the most part, this is automated. The include Makefile
runs two commands on every pull request and merge: install
and build
. Running those commands should put a fully rendered app in public/
, which Jenkins will upload to the CDN.
If you need to build more frequently, or without going through a PR process, a deploy.sh
script is included. Please use this judiciously.
You'll need to have Google Cloud configured locally, plus two environment variables for this to work:
$CDN_AUTH
$USAT_AUTH
Both variables allow you to cache bust assets on deploy. Again, use wisely.
Event | Category | Action | Label |
---|---|---|---|
Nav link is clicked/tapped | navigation |
Big page of help category |
Jump to category |
An "off-platform" link found at bottom is used | {internal/outbound} links |
Big page of help off-platform link |
to: {url} |
Story link in a question/answer is clicked | {internal/outbound} links |
Big page of help answer link |
to: {url} |
Social share | Outbound links |
Big Page of Help share |
{network} share |
Social button: page URL is copied | content |
Copy URL clicked copy |
{URL copied} |