Second Lunch is a set of tools used to create shareable social media cards. Currently, it only contains Quotable, a tool for creating quote cards.
Second Lunch is based off of NPR's Lunchbox, but is a complete rewrite of the technology. The goal is to package it with all the trappings of modern Javascript, and use that to create reusable components that make customization far easier.
To customize Second Lunch for your purposes, first follow the development instructions to get the app running locally.
Then, you can customize your themes in src/js/themes.json
. Each object in JSON file contains a theme. Write your themes like this:
- The key to the object is the name of the theme. This will display in the theme selection dropdown.
- Each of the nested "styles" objects lets you write any CSS property to override the defaults of a particular piece of the card. For example
quoteStyles
lets you override the quote on the page, whilesourceStyles
lets you override the source line. - Set
branding
to the name of the brand React component the theme should use. Read more about this below.
Here is an example theme:
"Magazine": {
"branding": "Mag",
"brandStyles": {
"color": "#dc0228",
},
"posterStyles": {
"backgroundColor": "rgb(28, 32, 49)",
},
"quoteStyles": {
"color": "rgba(255,255,255,0.85)",
"fontFamily": "jubilat",
"fontWeight": "bold",
"letterSpacing": "0.03em",
},
"sourceStyles": {
"color": "rgba(255,255,255,0.85)",
"fontFamily": "georgia"
},
"attributionStyles": {
"fontFamily": "georgia",
},
"leftQuoteStyles": {
"marginLeft": "-0.57em",
"color": "rgba(255,255,255,0.85)",
"fontFamily": "jubilat",
"fontWeight": "bold",
"letterSpacing": "0.03em",
},
}
The bottom right of every card contains branding for the card. At POLITICO, we have multiple brands that we need cards for, so this piece needed to be flexible.
To get your branding into the card, create a new file in src/js/components/branding/
. In this file, create a React component that defines the markup you want. Use any of the other files as an example.
Then, open src/js/components/branding/index.js
, import your new component, and attach it to the exported object.
Now, if you define a new theme in src/js/themes.json
, you should be able to use the name of your component as the value for branding
. When you select the theme in the editor, the branding should appear as you defined it in your React component.
To start developing with this repository, run the following:
$ npm install
$ npm run start
Then, visit http://localhost:3000 in your browser. You should see the page load.
$ npm run build
$ npm run build:gitpage
-
Make sure you have AWS credentials stored in your user profile.
-
Configure AWS settings in package.json.
-
Run publish command:
$ npm run publish:aws