24 | {t ? t('styleguide/TeaserFeed/InternalOnlyTag') : 'Internal'}
25 |
26 | )
27 | }
28 |
29 | export default InternalOnlyTag
30 |
--------------------------------------------------------------------------------
/src/components/TeaserFeed/Lead.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import { css } from 'glamor'
4 | import { mUp } from '../../theme/mediaQueries'
5 | import { serifRegular17, serifRegular19 } from '../Typography/styles'
6 | import { convertStyleToRem } from '../Typography/utils'
7 |
8 | const styles = {
9 | main: css({
10 | ...convertStyleToRem(serifRegular17),
11 | margin: '0 0 5px 0',
12 | [mUp]: {
13 | ...convertStyleToRem(serifRegular19)
14 | }
15 | })
16 | }
17 |
18 | const Lead = ({ children }) => {
19 | return (
17 |
18 |
26 | )
27 | }
28 | />
29 | ```
30 |
--------------------------------------------------------------------------------
/src/components/TeaserMyMagazine/index.js:
--------------------------------------------------------------------------------
1 | export { default as TeaserMyMagazine } from './TeaserMyMagazine'
2 |
--------------------------------------------------------------------------------
/src/components/TeaserShared/SectionTitle.js:
--------------------------------------------------------------------------------
1 | import { css } from 'glamor'
2 | import React from 'react'
3 | import { ChevronRightIcon } from '../Icons'
4 | import { mUp } from '../TeaserFront/mediaQueries'
5 | import {
6 | sansSerifMedium16,
7 | sansSerifMedium22,
8 | sansSerifRegular30
9 | } from '../Typography/styles'
10 |
11 | const styles = {
12 | container: css({
13 | display: 'block',
14 | marginBottom: 15,
15 | ...sansSerifMedium22,
16 | textDecoration: 'none',
17 | '& svg': {
18 | width: 22,
19 | height: 22,
20 | marginLeft: 8
21 | },
22 | [mUp]: {
23 | ...sansSerifRegular30,
24 | '& svg': {
25 | width: 30,
26 | height: 30
27 | },
28 | marginBottom: 25
29 | },
30 | color: 'inherit'
31 | }),
32 | small: css({
33 | color: 'inherit',
34 | ...sansSerifMedium16,
35 | textDecoration: 'none',
36 | '& svg': {
37 | marginTop: -1,
38 | width: 16,
39 | height: 16,
40 | marginLeft: 4
41 | }
42 | })
43 | }
44 |
45 | const SectionTitle = React.forwardRef(
46 | ({ children, small, onClick, href }, ref) => {
47 | const style = small ? styles.small : styles.container
48 | return href ? (
49 |
50 | {children}
51 | {
53 | ) : (
54 |
55 | {children}
56 |
57 | )
58 | }
59 | )
60 |
61 | export default SectionTitle
62 |
--------------------------------------------------------------------------------
/src/components/TeaserShared/docs.md:
--------------------------------------------------------------------------------
1 | ## ` {}}
13 | >
14 | Alle Serien
15 |
16 | ```
17 |
18 | ```react|span-3
19 | {}}
22 | >
23 | Aktive Debatten
24 |
25 | ```
26 |
27 | ```react
28 | {}}
32 | >
33 | Alle Beiträge im Feed
34 |
35 | ```
--------------------------------------------------------------------------------
/src/components/TeaserShared/index.js:
--------------------------------------------------------------------------------
1 | export { default as TeaserSectionTitle } from './SectionTitle'
2 |
--------------------------------------------------------------------------------
/src/components/TitleBlock/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import {
4 | PADDED_MAX_WIDTH,
5 | PADDED_MAX_WIDTH_BREAKOUT,
6 | MAX_WIDTH,
7 | PADDING,
8 | BREAKOUT
9 | } from '../Center'
10 | import { css, merge } from 'glamor'
11 | import { mUp } from '../../theme/mediaQueries'
12 |
13 | const styles = {
14 | container: css({
15 | maxWidth: PADDED_MAX_WIDTH,
16 | margin: '0 auto',
17 | paddingTop: 30,
18 | paddingLeft: PADDING,
19 | paddingRight: PADDING,
20 | [mUp]: {
21 | paddingTop: 40,
22 | margin: '0 auto'
23 | }
24 | }),
25 | containerMargin: css({
26 | marginBottom: 40,
27 | [mUp]: {
28 | marginBottom: 70
29 | }
30 | })
31 | }
32 |
33 | const TitleBlock = ({ children, attributes, center, margin, breakout }) => {
34 | return (
35 |
50 | )
51 | }
52 |
53 | TitleBlock.propTypes = {
54 | children: PropTypes.node.isRequired,
55 | attributes: PropTypes.object,
56 | center: PropTypes.bool
57 | }
58 |
59 | export default TitleBlock
60 |
--------------------------------------------------------------------------------
/src/components/Typography/Scribble.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import * as styles from './styles'
3 | import { css } from 'glamor'
4 | import { mUp } from '../../theme/mediaQueries'
5 | import { convertStyleToRem } from './utils'
6 | import { useColorContext } from '../Colors/useColorContext'
7 |
8 | export {
9 | List,
10 | UnorderedList as UL,
11 | OrderedList as OL,
12 | ListItem as LI
13 | } from '../List'
14 |
15 | const headline = css({
16 | ...convertStyleToRem(styles.cursiveTitle30),
17 | margin: '0 0 12px 0',
18 | [mUp]: {
19 | ...convertStyleToRem(styles.cursiveTitle58),
20 | margin: '0 0 12px 0'
21 | },
22 | ':first-child': {
23 | marginTop: 0
24 | },
25 | ':last-child': {
26 | marginBottom: 0
27 | }
28 | })
29 |
30 | export const Headline = ({ children, attributes, ...props }) => {
31 | const [colorScheme] = useColorContext()
32 | return (
33 |
39 | {children}
40 |
41 | )
42 | }
43 |
--------------------------------------------------------------------------------
/src/components/Typography/fontRules.js:
--------------------------------------------------------------------------------
1 | import { css } from 'glamor'
2 | import { fontStyles } from '../../theme/fonts'
3 | import colors from '../../theme/colors'
4 |
5 | export const editorialFontRule = css({
6 | ...fontStyles.serifRegular,
7 | '& em, & i': fontStyles.serifItalic,
8 | '& strong, & b': fontStyles.serifBold,
9 | '& strong em, & em strong, & b i, & i b': fontStyles.serifBoldItalic
10 | })
11 |
12 | export const interactionFontRule = css({
13 | ...fontStyles.sansSerifRegular,
14 | '& em, & i': fontStyles.sansSerifItalic,
15 | '& strong, & b': fontStyles.sansSerifMedium,
16 | '& strong em, & em strong, & b i, & i b': {
17 | textDecoration: `underline wavy ${colors.error}`
18 | }
19 | })
20 |
--------------------------------------------------------------------------------
/src/components/Typography/utils.js:
--------------------------------------------------------------------------------
1 | export const DEFAULT_FONT_SIZE = 16
2 |
3 | export const pxToRem = pxSize => {
4 | return pxSize && `${parseInt(pxSize, 10) / DEFAULT_FONT_SIZE}rem`
5 | }
6 |
7 | export const convertStyleToRem = cssRules => {
8 | return {
9 | ...cssRules,
10 | fontSize: pxToRem(cssRules.fontSize),
11 | lineHeight: pxToRem(cssRules.lineHeight)
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/Variables/index.js:
--------------------------------------------------------------------------------
1 | import React, { useContext, Children } from 'react'
2 |
3 | export const VariableContext = React.createContext({})
4 |
5 | export const Variable = ({ variable, fallback }) => {
6 | const vars = useContext(VariableContext)
7 | if (vars._mergeTags) {
8 | return fallback
9 | ? `*|IF:${vars[variable]}|* *|${vars[variable]}|* *|ELSE:|* ${fallback} *|END:IF|*`
10 | : `*|${vars[variable]}|*`
11 | }
12 | return vars[variable] || fallback || null
13 | }
14 |
15 | export const If = ({ present, children }) => {
16 | const vars = useContext(VariableContext)
17 | if (vars._mergeTags) {
18 | return (
19 | <>
20 | {`*|IF:${vars[present] || present}|*`}
21 | {children}
22 | {'*|END:IF|*'}
23 |
24 | )
25 | }
26 |
27 | const childs = Children.toArray(children)
28 | if (vars[present]) {
29 | return <>{childs.filter(child => child.type !== Else)}
30 | }
31 | return <>{childs.filter(child => child.type === Else)}
32 | }
33 |
34 | export const Else = ({ children }) => {
35 | const vars = useContext(VariableContext)
36 | return (
37 | <>
38 | {vars._mergeTags && '*|ELSE:|*'}
39 | {children}
40 |
41 | )
42 | }
43 |
--------------------------------------------------------------------------------
/src/components/Video/index.js:
--------------------------------------------------------------------------------
1 | export { default as Video } from './Video'
2 |
--------------------------------------------------------------------------------
/src/components/VideoPlayer/Icons/Fullscreen.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { FullscreenIcon, FullscreenExitIcon } from '../../Icons'
3 |
4 | const Icon = ({ size, fill, off }) => {
5 | if (off) {
6 | return (
7 |
7 |
9 | )
10 |
11 | Play.defaultProps = {
12 | width: 26,
13 | fill: '#fff'
14 | }
15 |
16 | export default Play
17 |
--------------------------------------------------------------------------------
/src/components/VideoPlayer/Icons/Rewind.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Rewind = ({ size, fill, disabled }) => (
4 |
5 |
11 | )
12 |
13 | Rewind.defaultProps = {
14 | size: 24,
15 | fill: '#fff',
16 | disabled: true
17 | }
18 |
19 | export default Rewind
20 |
--------------------------------------------------------------------------------
/src/components/VideoPlayer/Icons/Subtitles.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Icon = ({ size, fill, off }) => (
4 |
5 | {off ? (
6 |
7 |
20 | ) : (
21 |
29 | )
30 |
31 | Icon.defaultProps = {
32 | size: 24,
33 | fill: '#fff',
34 | off: false
35 | }
36 |
37 | export default Icon
38 |
--------------------------------------------------------------------------------
/src/components/VideoPlayer/Icons/Volume.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Icon = ({ size, fill, off }) => (
4 |
5 |
14 | )
15 |
16 | Icon.defaultProps = {
17 | size: 24,
18 | fill: '#fff',
19 | off: false
20 | }
21 |
22 | export default Icon
23 |
--------------------------------------------------------------------------------
/src/components/VideoPlayer/index.js:
--------------------------------------------------------------------------------
1 | export { default as VideoPlayer } from './Player'
2 |
--------------------------------------------------------------------------------
/src/components/globalMediaState.js:
--------------------------------------------------------------------------------
1 | const state = {
2 | playingRef: undefined,
3 | muted: false, // video only
4 | subtitles: false, // currently video only
5 | instances: [],
6 | setTime: time => {
7 | state.instances.forEach(setter => {
8 | setter.setTime && setter.setTime(time)
9 | })
10 | }
11 | }
12 |
13 | export const parseTimeHash = hash => {
14 | const matches = hash && hash.match(/t=(\d+)/)
15 | const time = matches && +matches[1]
16 | if (time && time > -1) {
17 | return time
18 | }
19 | return false
20 | }
21 |
22 | if (typeof window !== 'undefined') {
23 | window.addEventListener('hashchange', () => {
24 | const time = parseTimeHash(window.location.hash)
25 | if (time !== false) {
26 | state.setTime(time)
27 | }
28 | })
29 | }
30 |
31 | export default state
32 |
--------------------------------------------------------------------------------
/src/development/process.docs.md:
--------------------------------------------------------------------------------
1 | ## Goals
2 |
3 | - empower the developers to be fast
4 | - document the available components
5 | - keep styles and interaction behaviour consistent
6 | - even between different code bases
7 | - enable division of labor
8 | - isolate the implementation and documentation of components
9 | - e.g. a new teaser can be implemented without knowing all the inner workings of the CMS
10 |
11 | ## General
12 |
13 | 1. All development should happen in branches and merged via a pull request.
14 | 2. Follow the [commit message format](/#commit-message-format) for proper versioning
15 |
16 | ## Adding a New Component
17 |
18 | ### Criteria for new components
19 |
20 | - Generically useable
21 | - Has been designed
22 | - Has been used in more than one place
23 | + Same app, two places can count too
24 |
25 | ### General flow
26 |
27 | 1. Start a new branch
28 | 2. Develop the component
29 | - Document the public API with/in a catalog page
30 | - Export in `src/lib.ts`
31 | 3. Create a pull request with screenshots
32 | 4. Review by another developer
33 | 5. Merge into master
34 | - Will be auto released
35 |
--------------------------------------------------------------------------------
/src/editor.ts:
--------------------------------------------------------------------------------
1 | export {
2 | default as ChartEditor
3 | } from './components/Chart/Editor'
4 |
--------------------------------------------------------------------------------
/src/global.css:
--------------------------------------------------------------------------------
1 | *, *:before, *:after {
2 | box-sizing: inherit;
3 | }
4 | * {
5 | -webkit-tap-highlight-color: transparent;
6 | }
7 | html {
8 | box-sizing: border-box;
9 | }
--------------------------------------------------------------------------------
/src/lib/globalMediaState.js:
--------------------------------------------------------------------------------
1 | const state = {
2 | playingRef: undefined,
3 | muted: false, // video only
4 | subtitles: false, // currently video only
5 | instances: [],
6 | setTime: time => {
7 | state.instances.forEach(setter => {
8 | setter.setTime && setter.setTime(time)
9 | })
10 | }
11 | }
12 |
13 | export const parseTimeHash = hash => {
14 | const matches = hash && hash.match(/t=(\d+)/)
15 | const time = matches && +matches[1]
16 | if (time && time > -1) {
17 | return time
18 | }
19 | return false
20 | }
21 |
22 | if (typeof window !== 'undefined') {
23 | window.addEventListener('hashchange', () => {
24 | const time = parseTimeHash(window.location.hash)
25 | if (time !== false) {
26 | state.setTime(time)
27 | }
28 | })
29 | }
30 |
31 | export default state
32 |
--------------------------------------------------------------------------------
/src/lib/helpers.js:
--------------------------------------------------------------------------------
1 | export const intersperse = (list, separator) => {
2 | if (list.length === 0) {
3 | return []
4 | }
5 |
6 | return list.slice(1).reduce(
7 | (items, item, i) => {
8 | return items.concat([separator(item, i), item])
9 | },
10 | [list[0]]
11 | )
12 | }
13 |
14 | export const rafDebounce = fn => {
15 | let next
16 |
17 | return (...args) => {
18 | if (!next) {
19 | next = window.requestAnimationFrame(() => {
20 | next = undefined
21 | fn(...args)
22 | })
23 | }
24 | return next
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/lib/inQuotes.docs.md:
--------------------------------------------------------------------------------
1 | Utility function for wrapping a string in quotation marks and avoiding double quoting. Ignores already quoted strings of the same quotation marks pattern and replaces nested quotation marks. No support for third level nested quotation marks or transformations between different quotation mark patterns.
2 |
3 | ```code|lang-js
4 | import {inQuotes} from '@project-r/styleguide'
5 |
6 | const quotedTitle = inQuotes('My title') // '«My title»'
7 | ```
8 |
9 |
10 | ```react
11 | {inQuotes('An der Bar')}
12 | ```
13 |
14 | ```react
15 | {inQuotes('«An der Bar»')}
16 | ```
17 |
18 | ```react
19 | {inQuotes('«An der Bar» mit Carla Del Ponte')}
20 | ```
21 |
22 | ```react
23 | {inQuotes('An der «Republik-Bar» mit Carla Del Ponte')}
24 | ```
25 |
26 | ```react
27 | {inQuotes('An der «Republik-Bar» und «zu Hause» mit Carla Del Ponte')}
28 | ```
29 |
30 | ```react
31 |
32 | {inQuotes(
33 | 'An der „Republik-Bar“ mit Carla Del Ponte',
34 | {
35 | outerOpening: '„',
36 | outerClosing: '“',
37 | innerOpening: '‚',
38 | innerClosing: '‘'
39 | }
40 | )}
41 |
42 | ```
43 |
--------------------------------------------------------------------------------
/src/lib/inQuotes.js:
--------------------------------------------------------------------------------
1 | const defaultMarks = {
2 | outerOpening: '«',
3 | outerClosing: '»',
4 | innerOpening: '‹',
5 | innerClosing: '›'
6 | }
7 |
8 | export const inQuotes = (str, marks = defaultMarks) => {
9 | let quotedStr = str.trim()
10 | if (
11 | quotedStr.startsWith(marks.outerOpening) &&
12 | quotedStr.endsWith(marks.outerClosing)
13 | ) {
14 | return quotedStr
15 | }
16 | quotedStr = quotedStr
17 | .replace(new RegExp(marks.outerOpening, 'g'), marks.innerOpening)
18 | .replace(new RegExp(marks.outerClosing, 'g'), marks.innerClosing)
19 | return marks.outerOpening + quotedStr + marks.outerClosing
20 | }
21 |
--------------------------------------------------------------------------------
/src/lib/slug.docs.md:
--------------------------------------------------------------------------------
1 | Utility function for converting a string to a slug.
2 |
3 | ```code|lang-js
4 | import {slug} from '@project-r/styleguide'
5 |
6 | const nameSlug = slug('Johnny Weißmüller') // 'johnny-weissmueller'
7 | ```
8 |
--------------------------------------------------------------------------------
/src/lib/slug.js:
--------------------------------------------------------------------------------
1 | const diacritics = [
2 | { base: 'a', letters: ['â', 'à'] },
3 | { base: 'c', letters: ['ç'] },
4 | { base: 'e', letters: ['é', 'ê', 'è', 'ë'] },
5 | { base: 'i', letters: ['î', 'ï'] },
6 | { base: 'o', letters: ['ô'] },
7 | { base: 'u', letters: ['ù', 'û'] },
8 | { base: 'ss', letters: ['ß'] },
9 | { base: 'ae', letters: ['ä'] },
10 | { base: 'ue', letters: ['ü'] },
11 | { base: 'oe', letters: ['ö'] }
12 | ]
13 |
14 | const diacriticsMap = diacritics.reduce((map, diacritic) => {
15 | diacritic.letters.forEach(letter => {
16 | map[letter] = diacritic.base
17 | })
18 | return map
19 | }, {})
20 |
21 | export const slug = string =>
22 | string
23 | .toLowerCase()
24 | // eslint-disable-next-line no-control-regex
25 | .replace(/[^\u0000-\u007E]/g, a => diacriticsMap[a] || a)
26 | .replace(/\u00ad/g, '')
27 | .replace(/[^0-9a-z]+/g, ' ')
28 | .trim()
29 | .replace(/\s+/g, '-')
30 |
--------------------------------------------------------------------------------
/src/lib/slug.test.js:
--------------------------------------------------------------------------------
1 | import { slug } from './slug'
2 |
3 | describe('lib.utils.slug - test suite', function() {
4 | test('lower case and no spaces', function() {
5 | expect(slug('John Doe')).toEqual('john-doe')
6 | })
7 | test('trim', function() {
8 | expect(slug(' John Doe ')).toEqual('john-doe')
9 | })
10 |
11 | test('double space', function() {
12 | expect(slug('John Doe')).toEqual('john-doe')
13 | })
14 |
15 | test('invalid chars', function() {
16 | expect(slug('@~John,.?-+=|/Doe!')).toEqual('john-doe')
17 | })
18 |
19 | test('umlaut german', function() {
20 | expect(slug('äüöß')).toEqual('aeueoess')
21 | })
22 |
23 | test('umlaut french', function() {
24 | expect(slug('âàçéêèëîïôùû')).toEqual('aaceeeeiiouu')
25 | })
26 |
27 | test('soft hyphen', function() {
28 | expect(slug('um\u00adwelt\u00adschmerz')).toEqual('umweltschmerz')
29 | })
30 | })
31 |
--------------------------------------------------------------------------------
/src/lib/styleMixins.js:
--------------------------------------------------------------------------------
1 | export const ellipsize = {
2 | whiteSpace: 'nowrap',
3 | overflow: 'hidden',
4 | textOverflow: 'ellipsis'
5 | }
6 |
7 | export const underline = {
8 | textDecoration: 'underline',
9 | textDecorationSkip: 'ink'
10 | }
11 |
--------------------------------------------------------------------------------
/src/lib/textGauger.js:
--------------------------------------------------------------------------------
1 | import memoize from 'lodash/memoize'
2 |
3 | const measurementDiv = memoize(
4 | () => {
5 | const div = document.createElement('div')
6 | div.className = 'DOMMEASUREMENTOUTLET'
7 | div.style.position = 'fixed'
8 | div.style.top = '-100%'
9 | div.style.visibility = 'hidden'
10 | div.style.pointerEvents = 'none'
11 | document.body.appendChild(div)
12 | return div
13 | },
14 | () => ''
15 | )
16 |
17 | export const createTextGauger = memoize(
18 | ({ fontFamily, fontSize, lineHeight }, { dimension, html }) => {
19 | if (typeof document === 'undefined') {
20 | return text => {
21 | // SSR approximation
22 | return fontSize * 0.6 * String(text).length
23 | }
24 | }
25 | const element = document.createElement('span')
26 | element.style.fontFamily = fontFamily
27 | element.style.fontSize = `${fontSize}px`
28 | element.style.lineHeight = lineHeight
29 | measurementDiv().appendChild(element)
30 | if (html) {
31 | return memoize(text => {
32 | element.innerHTML = text
33 | return element.getBoundingClientRect()[dimension]
34 | })
35 | }
36 | return memoize(text => {
37 | element.textContent = text
38 | return element.getBoundingClientRect()[dimension]
39 | })
40 | },
41 | ({ fontFamily, fontSize, lineHeight }, { dimension, html }) =>
42 | [fontFamily, fontSize, lineHeight, dimension, html].join()
43 | )
44 |
--------------------------------------------------------------------------------
/src/lib/timeFormat.js:
--------------------------------------------------------------------------------
1 | import { timeFormatLocale } from 'd3-time-format'
2 | import timeDefinition from 'd3-time-format/locale/de-CH'
3 |
4 | const locale = timeFormatLocale(timeDefinition)
5 |
6 | export const timeFormat = locale.format
7 | export const timeParse = locale.parse
8 |
--------------------------------------------------------------------------------
/src/lib/timeago.js:
--------------------------------------------------------------------------------
1 | const specs = [
2 | { n: 60, key: 'timeago/justNow' },
3 | { n: 60, key: 'timeago/minutes' },
4 | { n: 24, key: 'timeago/hours' },
5 | { n: 7, key: 'timeago/days' },
6 | { n: 365 / 7 / 12, key: 'timeago/weeks' },
7 | { n: 12, key: 'timeago/months', fn: 'round' },
8 | { n: 1, key: 'timeago/years' }
9 | ]
10 |
11 | // diff is in seconds, positive.
12 | export default (t, diff) => {
13 | let i = 0
14 | for (; i < specs.length && diff >= specs[i].n; i++) {
15 | diff /= specs[i].n
16 | }
17 |
18 | const spec = specs[Math.min(i, specs.length - 1)]
19 | return t.pluralize(spec.key, {
20 | count: Math[spec.fn || 'floor'](diff)
21 | })
22 | }
23 |
--------------------------------------------------------------------------------
/src/lib/timeahead.js:
--------------------------------------------------------------------------------
1 | const specs = [
2 | { n: 60, key: 'timeAhead/justNow' },
3 | { n: 60, key: 'timeAhead/minutes' },
4 | { n: 24, key: 'timeAhead/hours' },
5 | { n: 7, key: 'timeAhead/days' },
6 | { n: 365 / 7 / 12, key: 'timeAhead/weeks' },
7 | { n: 12, key: 'timeAhead/months', fn: 'round' },
8 | { n: 1, key: 'timeAhead/years' }
9 | ]
10 |
11 | // diff is in seconds.
12 | export default (t, diff) => {
13 | diff = Math.abs(diff)
14 | let i = 0
15 | for (; i < specs.length && diff >= specs[i].n; i++) {
16 | diff /= specs[i].n
17 | }
18 |
19 | const spec = specs[Math.min(i, specs.length - 1)]
20 | return t.pluralize(spec.key, {
21 | count: Math[spec.fn || 'floor'](diff)
22 | })
23 | }
24 |
--------------------------------------------------------------------------------
/src/lib/timeduration.js:
--------------------------------------------------------------------------------
1 | const specs = [
2 | { n: 60, key: 'timeduration/seconds' },
3 | { n: 60, key: 'timeduration/minutes' },
4 | { n: 24, key: 'timeduration/hours' },
5 | { n: 7, key: 'timeduration/days' },
6 | { n: 365 / 7, key: 'timeduration/weeks' },
7 | { n: 52, key: 'timeduration/years' }
8 | ]
9 |
10 | // diff is in seconds, positive.
11 | export default (t, diff) => {
12 | let i = 0
13 | for (; i < specs.length && diff >= specs[i].n; i++) {
14 | diff /= specs[i].n
15 | }
16 |
17 | const spec = specs[Math.min(i, specs.length - 1)]
18 | return t(spec.key, {
19 | count: Math[spec.fn || 'floor'](diff)
20 | })
21 | }
22 |
--------------------------------------------------------------------------------
/src/lib/useBoundingClientRect.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | /**
4 | * const [ref, { width, height }] = useBoundingClientRect([text])
5 | * {text}
6 | *
7 | * Make sure to pass any dependencies to the hook which may change the bounding
8 | * client rect. Without the deps this hook will only measure the initial size.
9 | */
10 | export const useBoundingClientRect = (deps = []) => {
11 | const [rect, setRect] = React.useState({})
12 |
13 | return [
14 | React.useCallback(el => {
15 | if (el) {
16 | setRect(el.getBoundingClientRect())
17 | }
18 | }, deps), // eslint-disable-line react-hooks/exhaustive-deps
19 | rect
20 | ]
21 | }
22 |
--------------------------------------------------------------------------------
/src/lib/useCurrentMinute.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react'
2 |
3 | let setters = []
4 |
5 | let timeout = null
6 | const startTimer = () => {
7 | const currentTime = new Date()
8 | const msLeft = 1000 - currentTime.getMilliseconds()
9 | const msToNextMinute = (60 - currentTime.getSeconds()) * 1000 + msLeft
10 | // ensure timer runs in new minute and with at least 5 seconds in between runs
11 | const msToNextRun = Math.max(msToNextMinute + 500, 5 * 1000)
12 | clearTimeout(timeout)
13 | timeout = setTimeout(() => {
14 | const now = Date.now()
15 | setters.forEach(setter => setter(now))
16 | startTimer()
17 | }, msToNextRun)
18 | }
19 |
20 | const addSetter = setter => {
21 | setters.push(setter)
22 | if (timeout === null) {
23 | startTimer()
24 | }
25 | }
26 | const rmSetter = setter => {
27 | setters = setters.filter(s => s !== setter)
28 | if (!setter.length) {
29 | clearTimeout(timeout)
30 | timeout = null
31 | }
32 | }
33 |
34 | export const useCurrentMinute = () => {
35 | const [now, setNow] = useState(() => Date.now())
36 | useEffect(() => {
37 | addSetter(setNow)
38 | return () => {
39 | rmSetter(setNow)
40 | }
41 | }, [])
42 | return now
43 | }
44 |
--------------------------------------------------------------------------------
/src/lib/useDebounce.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export const useDebounce = (fastValue, ms = 400) => {
4 | const [slowValue, setSlowValue] = React.useState(fastValue)
5 |
6 | React.useEffect(() => {
7 | if (slowValue === fastValue) {
8 | return
9 | }
10 | const timer = setTimeout(() => setSlowValue(fastValue), ms)
11 | return () => {
12 | clearTimeout(timer)
13 | }
14 | }, [slowValue, fastValue, ms])
15 |
16 | return [slowValue]
17 | }
18 |
--------------------------------------------------------------------------------
/src/lib/useHeaderHeight.docs.md:
--------------------------------------------------------------------------------
1 | Utility hook passing the height of the header to its children by way of a context payload. Additionally, a list of media queries is provided to generate CSS rules.
2 |
3 | The hook requires a `HeaderHeightProvider` instance configured with a list of breakpoints (`minWidth`) and and height values (`headerHeight`) .
4 |
5 | Example using the `headerHeight` value programmatically:
6 |
7 | ```react
8 | const Child = () => {
9 |
10 | const [ headerHeight ] = useHeaderHeight()
11 |
12 | return (
13 |
14 | Lorem ipsum dolor sit amet.
15 |
16 | )
17 | }
18 |
19 |
20 |
22 | ```
23 |
24 | Example using the `mediaQuery`/`value` pairs to generate CSS:
25 |
26 | ```react
27 | const Child = () => {
28 |
29 | const [ _, rules ] = useHeaderHeight()
30 |
31 | const style = css(rules.reduce((acc, { mediaQuery, headerHeight }) =>
32 | Object.assign(
33 | acc,
34 | {[mediaQuery]: {paddingTop: headerHeight}}
35 | ), {})
36 | )
37 |
38 | return (
39 |
40 | Lorem ipsum dolor sit amet.
41 |
42 | )
43 | }
44 |
45 |
46 |
48 | ```
49 |
50 |
--------------------------------------------------------------------------------
/src/lib/useMediaQuery.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | /**
4 | * const matches = useMediaQuery("(min-width: 700px)")
5 | *
6 | * @param {string} queryInput
7 | * @returns {boolean}
8 | */
9 | export const useMediaQuery = queryInput => {
10 | /**
11 | * This is purely for convenience, so we can pass strings that start
12 | * with "@media ".
13 | */
14 | const query = queryInput.replace(/^@media /, '')
15 |
16 | const [matches, setMatches] = React.useState(() => {
17 | if (typeof window !== 'undefined') {
18 | return window.matchMedia(query).matches
19 | } else {
20 | return undefined
21 | }
22 | })
23 |
24 | React.useEffect(() => {
25 | const mql = window.matchMedia(query)
26 | setMatches(mql.matches)
27 |
28 | const onChange = ({ matches }) => {
29 | setMatches(matches)
30 | }
31 | mql.addListener(onChange)
32 | return () => {
33 | mql.removeListener(onChange)
34 | }
35 | }, [query, setMatches])
36 |
37 | return matches
38 | }
39 |
--------------------------------------------------------------------------------
/src/lib/usePrevious.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | /**
4 | * Gives you access to the previous value, used during the previous rendering of
5 | * the component.
6 | *
7 | * const MyComponent = ({ value }) => {
8 | * const previousValue = usePrevious(value)
9 | * return {value} - {previousValue}
10 | * }
11 | */
12 | export const usePrevious = value => {
13 | const ref = React.useRef()
14 |
15 | React.useEffect(() => {
16 | ref.current = value
17 | }, [value])
18 |
19 | return ref.current
20 | }
21 |
--------------------------------------------------------------------------------
/src/lib/warn.js:
--------------------------------------------------------------------------------
1 | export default (...args) => {
2 | try {
3 | console.warn(...args)
4 | } catch (e) {}
5 | }
6 |
--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// {children}
8 | )
9 | }
10 |
11 | export default ArticleContainer
12 |
--------------------------------------------------------------------------------
/src/templates/Article/email/docs.md:
--------------------------------------------------------------------------------
1 | ```react|noSource
2 |
3 |
15 | {fixtures.BaB153Stub}
16 |
17 |
18 |
19 | {fixtures.ArticleStub}
20 |
21 |
22 | ```
--------------------------------------------------------------------------------
/src/templates/Article/email/index.js:
--------------------------------------------------------------------------------
1 | import { matchType } from 'mdast-react-render/lib/utils'
2 | import Container from '../../EditorialNewsletter/email/Container'
3 | import { editorialParagraphRule } from '../../shared/email/rules/paragraphRule'
4 | import centerRule from '../../shared/email/rules/centerRule'
5 | import {
6 | coverRule,
7 | edgeToEdgeFigureRule
8 | } from '../../shared/email/rules/figureRule'
9 | import titleBlockRule from '../../shared/email/rules/titleBlockRule'
10 |
11 | const articleEmailSchema = {
12 | rules: [
13 | {
14 | matchMdast: matchType('root'),
15 | component: Container,
16 | props: node => ({
17 | meta: node.meta || {},
18 | variableContext: {
19 | firstName: 'FNAME',
20 | lastName: 'LNAME',
21 | _mergeTags: true
22 | }
23 | }),
24 | rules: [
25 | editorialParagraphRule,
26 | titleBlockRule,
27 | centerRule,
28 | coverRule,
29 | edgeToEdgeFigureRule
30 | ]
31 | }
32 | ]
33 | }
34 |
35 | export default articleEmailSchema
36 |
--------------------------------------------------------------------------------
/src/templates/Article/test/render.test.js:
--------------------------------------------------------------------------------
1 | import { BaB153Stub, ArticleStub } from './article.stub'
2 | import { renderEmail } from 'mdast-react-render/lib/email'
3 | import { renderMdast } from 'mdast-react-render'
4 | import { parse } from '@orbiting/remark-preset'
5 | import articleEmailSchema from '../email'
6 | import createSchema from '../index'
7 |
8 | const babStub = parse(BaB153Stub)
9 | const articleStub = parse(ArticleStub)
10 |
11 | describe('chart utils test-suite', () => {
12 | it('templates/article: render web', () => {
13 | expect(() => {
14 | renderMdast(babStub, createSchema(), { MissingNode: false })
15 | }).not.toThrow()
16 | })
17 |
18 | it('templates/article: render bab as email', () => {
19 | expect(() => {
20 | renderEmail(babStub, articleEmailSchema, { MissingNode: false })
21 | }).not.toThrow()
22 | })
23 |
24 | it('templates/article: render article as email', () => {
25 | expect(() => {
26 | renderEmail(articleStub, articleEmailSchema, { MissingNode: false })
27 | }).not.toThrow()
28 | })
29 | })
30 |
--------------------------------------------------------------------------------
/src/templates/Comment/email.js:
--------------------------------------------------------------------------------
1 | import createCommentSchema from './schema'
2 |
3 | import {
4 | BlockCode,
5 | BlockQuote,
6 | BlockQuoteNested,
7 | BlockQuoteParagraph,
8 | Code,
9 | Container,
10 | Definition,
11 | Heading,
12 | Link,
13 | List,
14 | ListItem,
15 | Paragraph,
16 | StrikeThrough
17 | } from '../../components/CommentBody/email'
18 |
19 | const createCommentEmailSchema = ({ ...args } = {}) => {
20 | return createCommentSchema({
21 | BlockCode,
22 | BlockQuote,
23 | BlockQuoteNested,
24 | BlockQuoteParagraph,
25 | Code,
26 | Container,
27 | Definition,
28 | Heading,
29 | Link,
30 | List,
31 | ListItem,
32 | Paragraph,
33 | StrikeThrough,
34 | ...args
35 | })
36 | }
37 |
38 | export default createCommentEmailSchema
39 |
--------------------------------------------------------------------------------
/src/templates/Comment/index.js:
--------------------------------------------------------------------------------
1 | import schema from './web'
2 |
3 | export default schema
4 |
--------------------------------------------------------------------------------
/src/templates/Comment/web.js:
--------------------------------------------------------------------------------
1 | import createCommentSchema from './schema'
2 |
3 | import {
4 | CommentBodyBlockCode,
5 | CommentBodyBlockQuote,
6 | CommentBodyBlockQuoteNested,
7 | CommentBodyBlockQuoteParagraph,
8 | CommentBodyCode,
9 | CommentBodyDefinition,
10 | CommentBodyContainer,
11 | CommentBodyHeading,
12 | CommentBodyList,
13 | CommentBodyListItem,
14 | CommentBodyParagraph
15 | } from '../../components/CommentBody/web'
16 | import { Editorial } from '../../components/Typography'
17 |
18 | const createCommentWebSchema = ({ ...args } = {}) => {
19 | return createCommentSchema({
20 | BlockCode: CommentBodyBlockCode,
21 | BlockQuote: CommentBodyBlockQuote,
22 | BlockQuoteNested: CommentBodyBlockQuoteNested,
23 | BlockQuoteParagraph: CommentBodyBlockQuoteParagraph,
24 | Code: CommentBodyCode,
25 | Container: CommentBodyContainer,
26 | Definition: CommentBodyDefinition,
27 | Heading: CommentBodyHeading,
28 | Link: Editorial.A,
29 | List: CommentBodyList,
30 | ListItem: CommentBodyListItem,
31 | Paragraph: CommentBodyParagraph,
32 | StrikeThrough: Editorial.StrikeThrough,
33 | ...args
34 | })
35 | }
36 |
37 | export default createCommentWebSchema
38 |
--------------------------------------------------------------------------------
/src/templates/Discussion/docs.md:
--------------------------------------------------------------------------------
1 | A preconfigured article template for discussion pages.
2 |
3 | ```code|lang-jsx
4 | import createDiscussionSchema from '@project-r/styleguide/lib/templates/Discussion'
5 |
6 | const schema = createDiscussionSchema()
7 | ```
8 |
9 | `createDiscussionSchema` take the same keys as the article template.
10 |
11 | Defaults:
12 | - `repoPrefix`, `discussion-`
13 | - `getPath`, `/YYYY/MM/DD/:slug/diskussion`
14 | - `customMetaFields`, repo refs for `format`, `dossier` and `discussion` settings with a `commentsMaxLength`, `commentsMinInterval` and `discussionAnonymity` field.
15 |
--------------------------------------------------------------------------------
/src/templates/Dossier/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import { DossierTag } from '../../components/Dossier'
4 |
5 | import createArticleSchema from '../Article'
6 |
7 | const DefaultLink = ({ children }) => children
8 |
9 | const createDossierSchema = ({
10 | dossierLabel = 'Dossier',
11 | dossierHref = '/dossier',
12 | customMetaFields = [],
13 | series = false,
14 | darkMode,
15 | paynotes = true,
16 | Link = DefaultLink,
17 | titleBlockPrepend = null,
18 | getPath = ({ slug }) => `/dossier/${(slug || '').split('/').pop()}`,
19 | hasEmailTemplate = false,
20 | ...args
21 | } = {}) => {
22 | return createArticleSchema({
23 | repoPrefix: 'dossier-',
24 | getPath,
25 | hasEmailTemplate,
26 | titleBlockPrepend: [
27 | titleBlockPrepend,
28 |
29 | {dossierLabel}
30 |
31 | ],
32 | customMetaFields: [
33 | {
34 | label: 'Diskussion',
35 | key: 'discussion',
36 | ref: 'repo'
37 | },
38 | ...customMetaFields
39 | ],
40 | series,
41 | darkMode,
42 | paynotes,
43 | Link,
44 | ...args
45 | })
46 | }
47 |
48 | export default createDossierSchema
49 |
--------------------------------------------------------------------------------
/src/templates/EditorialNewsletter/email/Blockquote.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { fontFamilies } from '../../../theme/fonts'
3 |
4 | const blockquoteStyle = {
5 | marginBottom: '30px'
6 | }
7 |
8 | const textStyle = {
9 | color: '#000',
10 | fontSize: '28px',
11 | lineHeight: '33px',
12 | fontFamily: fontFamilies.serifBold
13 | }
14 |
15 | const sourceStyle = {
16 | color: '#000',
17 | fontSize: '15px',
18 | lineHeight: '158%',
19 | fontFamily: fontFamilies.sansSerifRegular,
20 | fontStyle: 'normal'
21 | }
22 |
23 | export default ({ children }) => (
24 | {children}
25 | )
26 |
27 | export const BlockquoteText = ({ children }) => (
28 | {children}
29 | )
30 |
31 | export const BlockquoteSource = ({ children }) => (
32 | {children}
33 | )
34 |
--------------------------------------------------------------------------------
/src/templates/EditorialNewsletter/email/Center.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { fontFamilies } from '../../../theme/fonts'
3 | import { Mso } from 'mdast-react-render/lib/email'
4 |
5 | export default ({ children }) => {
6 | return (
7 |
8 |
9 |
10 | {`
11 |
12 |
13 |
14 | `}
15 |
16 |
29 |
30 |
31 |
32 | {children}
33 |
34 |
35 |
36 |
37 |
38 | {`
39 |
40 |
41 |
42 | `}
43 |
44 |
45 |
46 | )
47 | }
48 |
--------------------------------------------------------------------------------
/src/templates/EditorialNewsletter/email/Cover.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export const CoverImage = ({ src, alt }) => {
4 | // skip rendering empty cover images
5 | // - some email clients show a prominent error when rendering an img tag without a src
6 | // - this happens for covers all the time because they currently can't be removed in publikator-frontend
7 | if (!src && !alt) {
8 | return null
9 | }
10 |
11 | return (
12 |
29 |
30 | {children}
31 |
32 |
33 | )
34 |
--------------------------------------------------------------------------------
/src/templates/EditorialNewsletter/email/Figure.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { fontFamilies } from '../../../theme/fonts'
3 | import { imageResizeUrl } from 'mdast-react-render/lib/utils'
4 |
5 | export const Image = ({ src, alt, plain }) => (
6 |
34 | {children}
35 |
36 | )
37 |
38 | export const Byline = ({ children, data }) => (
39 |
46 | {children}
47 |
48 | )
49 |
50 | export default ({ children }) => {children}
51 |
--------------------------------------------------------------------------------
/src/templates/EditorialNewsletter/email/HR.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import colors from '../../../theme/colors'
3 |
4 | const hrStyle = {
5 | border: 0,
6 | height: 1,
7 | color: colors.divider,
8 | backgroundColor: colors.divider,
9 | marginTop: 30,
10 | marginBottom: 30
11 | }
12 |
13 | export default () => {children}
12 |
--------------------------------------------------------------------------------
/src/templates/EditorialNewsletter/email/List.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export const ListItem = ({ children }) => {children}
4 |
5 | export default ({ children, data }) =>
6 | data.ordered ? {children} :
7 |
--------------------------------------------------------------------------------
/src/templates/EditorialNewsletter/email/Paragraph.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { fontFamilies } from '../../../theme/fonts'
3 | import { Editorial } from '../../../components/Typography'
4 | import colors from '../../../theme/colors'
5 |
6 | export const paragraphStyle = {
7 | color: colors.text,
8 | fontSize: '19px',
9 | lineHeight: '158%',
10 | fontFamily: fontFamilies.serifRegular
11 | }
12 |
13 | export const linkStyle = {
14 | color: colors.text,
15 | textDecoration: 'underline',
16 | textDecorationSkip: 'ink'
17 | }
18 |
19 | export const Br = () =>
22 | {children}
23 |
24 | )
25 |
26 | // emails normally don't do glamor but
27 | // Editorial.fontRule is manually injected in ./Container
28 | export default ({ children }) => (
29 |
30 | {children}
31 |
32 | )
33 |
--------------------------------------------------------------------------------
/src/templates/EditorialNewsletter/email/SubSup.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export const Sub = ({ children }) => (
4 | {children}
5 | )
6 | export const Sup = ({ children }) => (
7 | {children}
8 | )
9 |
--------------------------------------------------------------------------------
/src/templates/EditorialNewsletter/email/index.js:
--------------------------------------------------------------------------------
1 | import createNewsletterSchema from '../schema'
2 |
3 | import { H2 } from './Headlines'
4 | import Paragraph, { A } from './Paragraph'
5 | import Container from './Container'
6 | import Cover, { CoverImage } from './Cover'
7 | import Center from './Center'
8 | import Figure, { Image, Caption, Byline } from './Figure'
9 | import { Sub, Sup } from './SubSup'
10 | import { Button } from './Button'
11 | import List, { ListItem } from './List'
12 |
13 | const createNewsletterEmailSchema = ({ ...args } = {}) => {
14 | return createNewsletterSchema({
15 | H2,
16 | Paragraph,
17 | Container,
18 | Cover,
19 | CoverImage,
20 | Center,
21 | Figure,
22 | Image,
23 | Caption,
24 | Byline,
25 | Sub,
26 | Sup,
27 | Button,
28 | List,
29 | ListItem,
30 | A,
31 | ...args,
32 | variableContext: args.variableContext || {
33 | firstName: 'FNAME',
34 | lastName: 'LNAME',
35 | _mergeTags: true
36 | }
37 | })
38 | }
39 |
40 | export default createNewsletterEmailSchema
41 |
--------------------------------------------------------------------------------
/src/templates/EditorialNewsletter/index.js:
--------------------------------------------------------------------------------
1 | import schema from './web'
2 |
3 | export default schema
4 |
--------------------------------------------------------------------------------
/src/templates/EditorialNewsletter/web/Button.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Button from '../../../components/Button'
3 |
4 | export default ({
5 | children,
6 | href,
7 | title,
8 | target,
9 | primary,
10 | block,
11 | attributes
12 | }) => (
13 | <>
14 |
23 | {children}
24 |
25 | {!block &&
26 | {children}
27 |
28 | )
29 | }
30 |
--------------------------------------------------------------------------------
/src/templates/EditorialNewsletter/web/Figure.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Figure } from '../../../components/Figure'
3 |
4 | const StyledFigure = ({ children, plain }) => (
5 |
14 | {children}
15 |
16 | )
17 |
18 | export default StyledFigure
19 |
--------------------------------------------------------------------------------
/src/templates/EditorialNewsletter/web/ListP.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default ({ children, attributes = {} }) => (
4 | {children}
5 | )
6 |
--------------------------------------------------------------------------------
/src/templates/EditorialNewsletter/web/index.js:
--------------------------------------------------------------------------------
1 | import createNewsletterSchema from '../schema'
2 |
3 | import Container from './Container'
4 | import StyledFigure from './Figure'
5 | import Button from './Button'
6 | import ListP from './ListP'
7 |
8 | import Center from '../../../components/Center'
9 | import {
10 | FigureCover,
11 | FigureImage,
12 | FigureCaption,
13 | FigureByline
14 | } from '../../../components/Figure'
15 | import { Sub, Sup } from '../../../components/Typography'
16 | import { P, Subhead, A } from '../../../components/Typography/Editorial'
17 | import { List, ListItem } from '../../../components/List'
18 |
19 | const createNewsletterWebSchema = ({ ...args } = {}) => {
20 | return createNewsletterSchema({
21 | H2: Subhead,
22 | Paragraph: P,
23 | Container,
24 | Cover: FigureCover,
25 | CoverImage: FigureImage,
26 | Center,
27 | Figure: StyledFigure,
28 | Image: FigureImage,
29 | Caption: FigureCaption,
30 | Byline: FigureByline,
31 | Sub,
32 | Sup,
33 | Button: Button,
34 | List,
35 | ListItem,
36 | ListP,
37 | A,
38 | ...args
39 | })
40 | }
41 |
42 | export default createNewsletterWebSchema
43 |
--------------------------------------------------------------------------------
/src/templates/Format/docs.md:
--------------------------------------------------------------------------------
1 | A preconfigured article template for format pages.
2 |
3 | ```code|lang-jsx
4 | import createFormatSchema from '@project-r/styleguide/lib/templates/Format'
5 |
6 | const schema = createFormatSchema()
7 | ```
8 |
9 | `createFormatSchema` take the same keys as the article template.
10 |
11 | Defaults:
12 | - `repoPrefix`, `format-`
13 | - `getPath`, `/format/:slug`
14 | - `customMetaFields`, always adds repo refs for `discussion`, `dossier` and `format` settings with a `kind` (font) and `color` field.
15 | - `series`, false
16 | - `darkMode`, false
17 | - `metaBody`, true
18 |
19 | # Example
20 |
21 | ```react|noSource
22 | {`
23 |
24 | FIGURE
25 |
26 | \`\`\`
27 | {
28 | "size": "tiny"
29 | }
30 | \`\`\`
31 |
32 |  
33 |
34 | TITLE
37 |
38 | # Dada
39 |
40 | CENTER
43 |
44 | Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel?
45 |
46 | Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte! Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früchte seiner Arbeit zu erleichtern?
47 |
48 |
51 | ```
52 |
--------------------------------------------------------------------------------
/src/templates/Page/index.js:
--------------------------------------------------------------------------------
1 | import createArticleSchema from '../Article'
2 |
3 | const DefaultLink = ({ children }) => children
4 |
5 | const createPageSchema = ({
6 | documentEditorOptions,
7 | customMetaFields = [],
8 | series = false,
9 | darkMode,
10 | paynotes = true,
11 | Link = DefaultLink,
12 | titleBlockPrepend = null,
13 | getPath = ({ slug }) => `/${(slug || '').split('/').pop()}`,
14 | metaHeadlines = true,
15 | skipContainer = false,
16 | skipCenter = false,
17 | hasEmailTemplate = false,
18 | ...args
19 | } = {}) => {
20 | return createArticleSchema({
21 | documentEditorOptions: {
22 | skipCredits: true,
23 | titleCenter: true
24 | },
25 | repoPrefix: 'page-',
26 | getPath,
27 | hasEmailTemplate,
28 | customMetaFields: [
29 | {
30 | label: 'Diskussion',
31 | key: 'discussion',
32 | ref: 'repo'
33 | },
34 | {
35 | label: 'Action Bar ausblenden',
36 | key: 'disableActionBar',
37 | ref: 'bool'
38 | },
39 | ...customMetaFields
40 | ],
41 | series,
42 | darkMode,
43 | paynotes,
44 | Link,
45 | metaHeadlines,
46 | skipContainer,
47 | skipCenter,
48 | ...args
49 | })
50 | }
51 |
52 | export default createPageSchema
53 |
--------------------------------------------------------------------------------
/src/templates/Section/docs.md:
--------------------------------------------------------------------------------
1 | A preconfigured article template for section pages.
2 |
3 | ```code|lang-jsx
4 | import createSectionSchema from '@project-r/styleguide/lib/templates/Section'
5 |
6 | const schema = createSectionSchema()
7 | ```
8 |
9 | `createSectionSchema` take the same keys as the article template.
10 |
11 | Defaults:
12 | - `repoPrefix`, `section-`
13 | - `getPath`, `/:slug`
14 | - `customMetaFields`, always adds repo refs for `discussion`, `dossier` and `format` settings with a `kind` (font) and `color` field.
15 | - `series`, false
16 | - `darkMode`, false
17 | - `metaBody`, true
18 |
19 | # Example
20 |
21 | ```react|noSource
22 | {`
23 |
24 | TITLE
25 |
26 | # Dada
27 |
28 | CENTER
31 |
32 | Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel?
33 |
34 | Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte! Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früchte seiner Arbeit zu erleichtern?
35 |
36 |
39 | ```
40 |
--------------------------------------------------------------------------------
/src/templates/docs.js:
--------------------------------------------------------------------------------
1 | import { renderMdast } from 'mdast-react-render'
2 | import { parse } from '@orbiting/remark-preset'
3 |
4 | export const Markdown = ({ children, schema, rootData }) => {
5 | return renderMdast(
6 | {
7 | ...parse(children),
8 | ...rootData
9 | },
10 | schema
11 | )
12 | }
13 |
--------------------------------------------------------------------------------
/src/templates/shared/email/components/BlockQuote.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { fontStyles } from '../../../../theme/fonts'
3 |
4 | const BlockQuote = ({ children }) => {children}
5 |
6 | export default BlockQuote
7 |
8 | export const ParagraphWrapper = ({ children }) => (
9 |
14 | {children}
15 |
16 | )
17 |
18 | export const Paragraph = ({ children }) => (
19 |
30 | {children}
31 |
32 | )
33 |
--------------------------------------------------------------------------------
/src/templates/shared/email/components/Caption.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { fontFamilies } from '../../../../theme/fonts'
3 |
4 | export const Caption = ({ children }) => (
5 |
15 | {children}
16 |
17 | )
18 |
19 | export const Byline = ({ children }) => (
20 |
28 | {children}
29 |
30 | )
31 |
--------------------------------------------------------------------------------
/src/templates/shared/email/components/Center.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Mso } from 'mdast-react-render/lib/email'
3 | import { fontFamilies } from '../../../../theme/fonts'
4 |
5 | const Center = ({ children }) => {
6 | return (
7 |
8 |
9 |
10 | {`
11 |
12 |
13 |
14 | `}
15 |
16 |
29 |
30 |
31 |
32 | {children}
33 |
34 |
35 |
36 |
37 |
38 | {`
39 |
40 |
41 |
42 | `}
43 |
44 |
45 |
46 | )
47 | }
48 |
49 | export default Center
50 |
--------------------------------------------------------------------------------
/src/templates/shared/email/components/Figure.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { imageResizeUrl } from 'mdast-react-render/lib/utils'
3 |
4 | export const Figure = ({ children }) => (
5 | {children}
6 | )
7 |
8 | export const Image = ({ src, alt, width, resize }) => (
9 |
13 | {children}
14 |
15 | )
16 |
--------------------------------------------------------------------------------
/src/templates/shared/email/components/HorizontalRule.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const HorizontalRule = () => (
4 |
14 | {children}
15 |
16 | )
17 |
--------------------------------------------------------------------------------
/src/templates/shared/email/components/List.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { fontStyles } from '../../../../theme/fonts'
3 |
4 | const List = ({ children, ordered, start }) => {
5 | if (ordered) return {children}
6 | return
7 | }
8 |
9 | export default List
10 |
11 | export const ListItem = ({ children }) => {children}
12 |
13 | export const ListParagraph = ({ children }) => (
14 |
22 | {children}
23 |
24 | )
25 |
--------------------------------------------------------------------------------
/src/templates/shared/email/components/Note.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Interaction } from '../../../../components/Typography'
3 | import colors from '../../../../theme/colors'
4 | import { fontStyles } from '../../../../theme/fonts'
5 |
6 | export const Note = ({ children }) => <>{children}
7 |
8 | export const NoteParagraph = ({ children, attributes, ...props }) => (
9 |
21 | {children}
22 |
23 | )
24 |
25 | export default NoteParagraph
26 |
--------------------------------------------------------------------------------
/src/templates/shared/email/components/Paragraph.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import colors from '../../../../theme/colors'
3 | import { fontStyles } from '../../../../theme/fonts'
4 | import { Editorial, Interaction } from '../../../../components/Typography'
5 |
6 | const baseParagraphStyle = {
7 | color: colors.text,
8 | fontSize: '19px',
9 | lineHeight: '30px',
10 | margin: '30px 0'
11 | }
12 |
13 | export const EditorialParagraph = ({ children }) => (
14 |
18 | {children}
19 |
20 | )
21 |
22 | export const InteractionParagraph = ({ children }) => (
23 |
27 | {children}
28 |
29 | )
30 |
--------------------------------------------------------------------------------
/src/templates/shared/email/components/Sub.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Sub = ({ children }) => (
4 | {children}
5 | )
6 |
7 | export default Sub
8 |
--------------------------------------------------------------------------------
/src/templates/shared/email/components/Sup.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Sup = ({ children }) => (
4 | {children}
5 | )
6 |
7 | export default Sup
8 |
--------------------------------------------------------------------------------
/src/templates/shared/email/rules/articleCollectionRule.js:
--------------------------------------------------------------------------------
1 | import { matchZone } from 'mdast-react-render/lib/utils'
2 |
3 | const articleCollectionRule = {
4 | matchMdast: matchZone('ARTICLECOLLECTION'),
5 | component: () => null,
6 | isVoid: true
7 | }
8 |
9 | export default articleCollectionRule
10 |
--------------------------------------------------------------------------------
/src/templates/shared/email/rules/blockQuoteRule.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import BlockQuote, {
3 | Paragraph,
4 | ParagraphWrapper
5 | } from '../components/BlockQuote'
6 | import {
7 | matchParagraph,
8 | matchType,
9 | matchZone
10 | } from 'mdast-react-render/lib/utils'
11 | import legendRule from './legendRules'
12 | import { inlineInteractionParagraphRules } from './paragraphRule'
13 |
14 | const blockQuoteRule = {
15 | matchMdast: matchZone('BLOCKQUOTE'),
16 | props: node => {
17 | return {
18 | isEmpty:
19 | node.children &&
20 | node.children.length === 1 &&
21 | !node.children[0].children
22 | }
23 | },
24 | component: ({ children, isEmpty }) => {
25 | if (isEmpty) return null
26 | return {children}
27 | },
28 | rules: [
29 | {
30 | matchMdast: matchType('blockquote'),
31 | component: ParagraphWrapper,
32 | rules: [
33 | {
34 | matchMdast: matchParagraph,
35 | component: Paragraph,
36 | rules: inlineInteractionParagraphRules
37 | }
38 | ]
39 | },
40 | legendRule
41 | ]
42 | }
43 |
44 | export default blockQuoteRule
45 |
--------------------------------------------------------------------------------
/src/templates/shared/email/rules/centerRule.js:
--------------------------------------------------------------------------------
1 | import { matchZone } from 'mdast-react-render/lib/utils'
2 | import { editorialParagraphRule } from './paragraphRule'
3 | import inlineHeadingsRules from './inlineHeadingsRule'
4 | import blockQuoteRule from './blockQuoteRule'
5 | import hrRule from './hrRule'
6 | import Center from '../components/Center'
7 | import { figureRule } from './figureRule'
8 | import figureGroupRule from './figureGroupRule'
9 | import noteRule from './noteRule'
10 | import articleCollectionRule from './articleCollectionRule'
11 | import listRule from './listRule'
12 | import pullQuoteRule from './pullQuoteRule'
13 | import infoBoxRule from './infoBoxRule'
14 |
15 | const centerRule = {
16 | matchMdast: matchZone('CENTER'),
17 | component: Center,
18 | rules: [
19 | editorialParagraphRule,
20 | ...inlineHeadingsRules,
21 | hrRule,
22 | figureRule,
23 | figureGroupRule,
24 | listRule,
25 | blockQuoteRule,
26 | pullQuoteRule,
27 | noteRule,
28 | infoBoxRule,
29 | articleCollectionRule
30 | ]
31 | }
32 |
33 | export default centerRule
34 |
--------------------------------------------------------------------------------
/src/templates/shared/email/rules/figureGroupRule.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { matchZone } from 'mdast-react-render/lib/utils'
3 | import { figureRule } from './figureRule'
4 | import legendRule from './legendRules'
5 |
6 | const figureGroupRule = {
7 | matchMdast: matchZone('FIGUREGROUP'),
8 | component: ({ children }) => {children}
,
9 | rules: [figureRule, legendRule]
10 | }
11 |
12 | export default figureGroupRule
13 |
--------------------------------------------------------------------------------
/src/templates/shared/email/rules/hrRule.js:
--------------------------------------------------------------------------------
1 | import { matchType } from 'mdast-react-render/lib/utils'
2 | import HorizontalRule from '../components/HorizontalRule'
3 |
4 | const hrRule = {
5 | matchMdast: matchType('thematicBreak'),
6 | component: HorizontalRule
7 | }
8 |
9 | export default hrRule
10 |
--------------------------------------------------------------------------------
/src/templates/shared/email/rules/inlineHeadingsRule.js:
--------------------------------------------------------------------------------
1 | import { matchHeading } from 'mdast-react-render/lib/utils'
2 | import { Heading2 } from '../components/Heading'
3 | import inlineRules from './inlineRules'
4 |
5 | const inlineHeadingsRules = [
6 | {
7 | matchMdast: matchHeading(2),
8 | component: Heading2,
9 | rules: inlineRules
10 | }
11 | ]
12 |
13 | export default inlineHeadingsRules
14 |
--------------------------------------------------------------------------------
/src/templates/shared/email/rules/inlineRules.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { matchType } from 'mdast-react-render/lib/utils'
3 | import Sup from '../components/Sup'
4 | import Sub from '../components/Sub'
5 |
6 | const inlineRules = [
7 | {
8 | matchMdast: matchType('sup'),
9 | component: Sup
10 | },
11 | {
12 | matchMdast: matchType('sub'),
13 | component: Sub
14 | },
15 | {
16 | matchMdast: matchType('break'),
17 | component: () =>