@twreporter/dual-channel

Dual-channel

The repo will be a bundler for new template on Narwhale in the future. Now is for 2018-vote project and need manual build-deploy process.

Install

Install dependencies:

yarn
# or
npm install

Install deploy tools:

# Setup fede
fede build-config

# Then edit the `fede-config.json`

Dev

npm run dev

If images are blocked due to the request origin, you may need to add a rule to host file to browse localhost as it is under twreporter.org domain:

# twreporter testing
127.0.0.1 testtest.twreporter.org

Data

The data is in src/data

The article text and embedded items detail:

const text = {
  chapters: [
    {
      id: 'kaosiung-chapter', // `id` should be unique in the page (html ele id)
      label: '高雄市', // The text of label will appear at TOC (sidebar)
      content: [ // An array of sections
        {
          id: 'kaosiung-section-1', // `id` should be unique in the page (html ele id)
          content: [ // An array of article elements
            {
              type: 'header-two', // Supported types are listed in `_renderElements` of src/components/text/index.js 
              content: [
                '・高雄市'
              ]
            },
            {
              type: 'header-two',
              content: [
                '選前一個月高雄市候選人網路聲量比例'
              ]
            },
            {
              type: 'paragraph',
              content: [
                '高雄市候選人韓國瑜近一個月的網路聲量，幾乎是六都縣市長候選人之最。韓國瑜的空戰策略在這次的選戰中確實有目共睹，與民進黨候選人陳其邁相比，聲量幾乎差了1.7倍。',
              ],
            },
          ],
        },
        // ...other sections
      ]
    },
    // ...other chapters
  ]
}

const embeddedItems = [
  // a chapter contains multiple sections
  // the chapters and sections of embedded items are correspond to chapters and sections in text
  [
    ['<picture><source type="image/png" media="(max-width: 1023px)" srcset="https://www.twreporter.org/images/responsive/20181125075620-53a211b449.png" /><source type="image/png" media="(min-width: 1024px)" srcset="https://www.twreporter.org/images/responsive/20181125075620-c87ffc3c12.png" /><img alt="選前一個月高雄市候選人網路聲量比例" src="https://www.twreporter.org/images/responsive/20181125075620-53a211b449.png" style="height:100%;width:auto;" /></picture>'],
    ['<picture><source type="image/png" media="(max-width: 1023px)" srcset="https://www.twreporter.org/images/responsive/20181124154828-fafbf63f2f.png" /><source type="image/png" media="(min-width: 1024px)" srcset="https://www.twreporter.org/images/responsive/20181124154828-557b0daa32.png" /><img alt="選前一個月韓、陳的網路聲量趨勢" src="https://www.twreporter.org/images/responsive/20181124154828-fafbf63f2f.png" style="height:100%;width:auto;" /></picture>'],
    ['<picture><source type="image/png" media="(max-width: 1023px)" srcset="https://www.twreporter.org/images/responsive/20181124154736-d2e7c8d7b3.png" /><source type="image/png" media="(min-width: 1024px)" srcset="https://www.twreporter.org/images/responsive/20181124154736-2185e3a50e.png" /><img alt="選前一個月高雄市選情關鍵字" src="https://www.twreporter.org/images/responsive/20181124154736-d2e7c8d7b3.png" style="height:100%;width:auto;" /></picture>'],
    ['<picture><source type="image/png" media="(max-width: 1023px)" srcset="https://www.twreporter.org/images/responsive/20181125060048-71fd1ca44e.png" /><source type="image/png" media="(min-width: 1024px)" srcset="https://www.twreporter.org/images/responsive/20181125060048-1889cf3d17.png" /><img alt="高雄市聲量與得票率比較" src="https://www.twreporter.org/images/responsive/20181125060048-71fd1ca44e.png" style="height:100%;width:auto;" /></picture>'],
  ],
  // ...other chapters
]

Deploy to Staging

# build
BASE_URL="https://storage.googleapis.com/twreporter-infographics/staging-{project-folder-name}-gcs/" npm run build

# build 2018-vote
BASE_URL="https://storage.googleapis.com/twreporter-infographics/staging-2018-election-report-sharevoice-gcs/" npm run build

# deploy all files to staging
fede deploy
# update dist folder to staging
fede deploy dist

See more about fede

Deploy to Production

# build
npm run build

# build 2018vote
BASE_URL="https://storage.googleapis.com/twreporter-infographics/2018-election-report-sharevoice-gcs/" npm run build

# deploy all files to production
fede deploy --production
# update dist folder to production
fede deploy dist --production

See more about fede