44 |
52 |
53 | {plainText ? (
54 |
code[class*='language-'], pre[class*='language-']`]: {
63 | background: `rgb(${red}, ${green}, ${blue}, 0.1)`,
64 | },
65 | },
66 | ]}
67 | dangerouslySetInnerHTML={{ __html: html }}
68 | />
69 | ) : (
70 | No release notes.
71 | )}
72 |
73 |
81 |
85 | windowPopup(
86 | `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
87 | shareableUrl
88 | )}`,
89 | 500,
90 | 300
91 | )
92 | }
93 | />
94 |
98 | windowPopup(
99 | `https://twitter.com/intent/tweet?url=${encodeURIComponent(
100 | shareableUrl
101 | )}`,
102 | 500,
103 | 300
104 | )
105 | }
106 | />
107 |
111 | windowPopup(
112 | `https://www.linkedin.com/shareArticle?url=${encodeURIComponent(
113 | shareableUrl
114 | )}&mini=true`,
115 | 500,
116 | 300
117 | )
118 | }
119 | />
120 | copyToClipboard(shareableUrl)}
124 | />
125 |
126 |
127 | )
128 | }
129 | )
130 |
--------------------------------------------------------------------------------
/site/src/components/Release/ReleaseHeader.js:
--------------------------------------------------------------------------------
1 | import {
2 | differenceInDays,
3 | distanceInWordsToNow,
4 | format,
5 | isThisYear,
6 | } from 'date-fns'
7 | import { Link } from 'gatsby'
8 | import React from 'react'
9 | import { theme } from '../../styles/theme'
10 | import { CHANGECAST_LOCALSTORAGE_KEY } from '../../utils/constants'
11 | import { Tag } from '../Tag'
12 |
13 | export const ReleaseHeader = ({
14 | title,
15 | tagName,
16 | publishedAt,
17 | isWidget,
18 | primaryColor: [red, green, blue],
19 | url,
20 | ...rest
21 | }) => {
22 | const lastViewed =
23 | typeof window !== 'undefined' &&
24 | window.localStorage.getItem(CHANGECAST_LOCALSTORAGE_KEY)
25 | const isNew = lastViewed && new Date(lastViewed) < new Date(publishedAt)
26 |
27 | return (
28 |
39 |
40 |
45 | {isWidget ? (
46 |
52 | {title}
53 |
54 | ) : (
55 |
59 | {title}
60 |
61 | )}
62 |
63 | {isNew && (
64 |
70 | New
71 |
72 | )}
73 |
74 |
75 | {typeof window !== 'undefined' && (
76 |
83 | {differenceInDays(Date.now(), publishedAt) < 30
84 | ? distanceInWordsToNow(publishedAt, {
85 | addSuffix: true,
86 | })
87 | : isThisYear(publishedAt)
88 | ? format(publishedAt, 'MMM D')
89 | : format(publishedAt, 'MMMM Do, YYYY')}
90 |
91 | )}
92 |
93 | )
94 | }
95 |
--------------------------------------------------------------------------------
/site/src/components/Release/SocialButton.js:
--------------------------------------------------------------------------------
1 | import Tooltip from '@reach/tooltip'
2 | import '@reach/tooltip/styles.css'
3 | import VisuallyHidden from '@reach/visually-hidden'
4 | import React from 'react'
5 | import { theme } from '../../styles/theme'
6 | import { Button } from '../Button/Button'
7 |
8 | export const SocialButton = ({ label, icon: Icon, ...rest }) => (
9 |
17 |
27 |
28 | )
29 |
--------------------------------------------------------------------------------
/site/src/components/SiteWrapper.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { theme } from '../styles/theme'
3 |
4 | export const SiteWrapper = React.forwardRef(({ children }, ref) => (
5 |
17 | {children}
18 |
19 | ))
20 |
--------------------------------------------------------------------------------
/site/src/components/Tag.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export const Tag = ({ children, ...rest }) => (
4 |
20 | {children}
21 |
22 | )
23 |
--------------------------------------------------------------------------------
/site/src/components/WidgetWrapper.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { WidgetContext } from '../providers/WidgetProvider'
3 | import { theme } from '../styles/theme'
4 |
5 | export const WidgetWrapper = ({ children }) => {
6 | const isOpen = React.useContext(WidgetContext)
7 |
8 | return (
9 |
21 | {children}
22 |
23 | )
24 | }
25 |
--------------------------------------------------------------------------------
/site/src/hooks/useSiteSetup.js:
--------------------------------------------------------------------------------
1 | import { graphql, useStaticQuery } from 'gatsby'
2 | import {
3 | getFaviconElements,
4 | getLogoSrc,
5 | getPrimaryColor,
6 | getTitle,
7 | } from '../utils/data'
8 |
9 | export const useSiteSetup = () => {
10 | const data = useStaticQuery(graphql`
11 | query SiteSetupQuery {
12 | site {
13 | siteMetadata {
14 | title
15 | primaryColor
16 | url
17 | }
18 | }
19 | repository: allGithubRepo {
20 | edges {
21 | node {
22 | name
23 | description
24 | homepage
25 | htmlUrl
26 | avatarImageFile: childFile {
27 | fields {
28 | colorPalette
29 | }
30 | childImageSharp {
31 | original {
32 | src
33 | }
34 | }
35 | childFavicon {
36 | faviconElements {
37 | props
38 | type
39 | }
40 | }
41 | }
42 | }
43 | }
44 | }
45 | logo: allFile(filter: { name: { eq: "logo" } }) {
46 | edges {
47 | node {
48 | fields {
49 | colorPalette
50 | }
51 | childImageSharp {
52 | original {
53 | src
54 | }
55 | }
56 | childFavicon {
57 | faviconElements {
58 | props
59 | type
60 | }
61 | }
62 | }
63 | }
64 | }
65 | }
66 | `)
67 |
68 | const {
69 | site: {
70 | siteMetadata: { url },
71 | },
72 | repository: {
73 | edges: [
74 | {
75 | node: { description, homepage, htmlUrl },
76 | },
77 | ],
78 | },
79 | } = data
80 |
81 | const primaryColor = getPrimaryColor(data)
82 | const logoSrc = getLogoSrc(data)
83 | const title = getTitle(data)
84 | const faviconElements = getFaviconElements(data)
85 |
86 | return {
87 | faviconElements,
88 | primaryColor,
89 | logoSrc,
90 | title,
91 | description,
92 | homepage,
93 | htmlUrl,
94 | url,
95 | }
96 | }
97 |
--------------------------------------------------------------------------------
/site/src/providers/SiteProvider.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { CHANGECAST_LOCALSTORAGE_KEY } from '../utils/constants'
3 |
4 | export const SiteProvider = ({ children }) => {
5 | React.useEffect(() => {
6 | window.localStorage.setItem(
7 | CHANGECAST_LOCALSTORAGE_KEY,
8 | new Date().toISOString()
9 | )
10 | }, [])
11 |
12 | return children
13 | }
14 |
--------------------------------------------------------------------------------
/site/src/providers/WidgetProvider.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { CHANGECAST_LOCALSTORAGE_KEY } from '../utils/constants'
3 |
4 | export function onClose() {
5 | window.parent.postMessage('close', '*')
6 | }
7 |
8 | function closeOnEscape(e) {
9 | if (e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27) {
10 | e.preventDefault()
11 | onClose()
12 | }
13 | }
14 |
15 | export const WidgetContext = React.createContext(true)
16 |
17 | export const WidgetProvider = ({ children }) => {
18 | const [isOpen, setOpen] = React.useState(false)
19 | const handleMessage = React.useCallback(event => {
20 | if (event.data === 'open') {
21 | setOpen(true)
22 | window.localStorage.setItem(
23 | CHANGECAST_LOCALSTORAGE_KEY,
24 | new Date().toISOString()
25 | )
26 | } else if (event.data === 'close') {
27 | setOpen(false)
28 | }
29 | })
30 |
31 | React.useEffect(() => {
32 | window.addEventListener('keydown', closeOnEscape, false)
33 | window.addEventListener('message', handleMessage, true)
34 |
35 | return () => {
36 | window.removeEventListener('keydown', closeOnEscape)
37 | window.removeEventListener('message', handleMessage)
38 | }
39 | })
40 |
41 | return (
42 |
{children}
43 | )
44 | }
45 |
--------------------------------------------------------------------------------
/site/src/styles/global.js:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/core'
2 | import '@reach/menu-button/styles.css'
3 | import { theme } from './theme'
4 | import { fonts } from './typography'
5 |
6 | export const globalStyles = css`
7 | * {
8 | box-sizing: border-box;
9 | }
10 |
11 | html,
12 | body {
13 | font-family: ${fonts.regular}, sans-serif;
14 | font-size: 16px;
15 | font-weight: 400;
16 | font-style: normal;
17 | color: ${theme.color.text};
18 | background: #f7f7f7;
19 | text-rendering: optimizeLegibility;
20 | -webkit-font-smoothing: antialiased;
21 | -webkit-tap-highlight-color: transparent;
22 | -ms-overflow-style: scrollbar;
23 | }
24 |
25 | a {
26 | text-decoration: none;
27 |
28 | &:hover {
29 | text-decoration: underline;
30 | }
31 | }
32 | `
33 |
--------------------------------------------------------------------------------
/site/src/styles/markdown.js:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/core'
2 | import { theme } from './theme'
3 |
4 | export const markdownStyles = css`
5 | word-break: break-word;
6 |
7 | a {
8 | text-decoration: none;
9 |
10 | &:hover {
11 | text-decoration: underline;
12 | }
13 | }
14 |
15 | img {
16 | width: 100%;
17 | border-radius: 3px;
18 | }
19 |
20 | table {
21 | display: block;
22 | overflow: auto;
23 | width: 100%;
24 | border-collapse: collapse;
25 | border-spacing: 0;
26 | }
27 |
28 | table th {
29 | font-weight: 600;
30 | }
31 |
32 | table td,
33 | table th {
34 | border: 1px solid ${theme.markdown.color.accent};
35 | padding: 6px 13px;
36 | }
37 |
38 | table tr {
39 | border-top: 1px solid ${theme.markdown.color.accent};
40 | }
41 |
42 | table tr:nth-child(2n) {
43 | background-color: ${theme.markdown.color.background};
44 | }
45 |
46 | blockquote {
47 | padding: 0 1em;
48 | color: ${theme.markdown.color.blockquote};
49 | border-left: 0.25em solid ${theme.markdown.color.accent};
50 | font-size: 1.20112rem;
51 | line-height: 1.75rem;
52 | color: inherit;
53 | font-style: italic;
54 | opacity: 0.8;
55 | }
56 |
57 | // prism styles
58 | code[class*='language-'],
59 | pre[class*='language-'] {
60 | font-size: 0.9rem;
61 | text-shadow: 0 1px white;
62 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
63 | text-align: left;
64 | white-space: pre;
65 | word-spacing: normal;
66 | word-break: normal;
67 | word-wrap: normal;
68 |
69 | -moz-tab-size: 4;
70 | -o-tab-size: 4;
71 | tab-size: 4;
72 |
73 | -webkit-hyphens: none;
74 | -moz-hyphens: none;
75 | -ms-hyphens: none;
76 | hyphens: none;
77 | }
78 |
79 | @media print {
80 | code[class*='language-'],
81 | pre[class*='language-'] {
82 | text-shadow: none;
83 | }
84 | }
85 |
86 | /* Code blocks */
87 | pre[class*='language-'] {
88 | padding: 1em;
89 | margin: 0.5em 0;
90 | overflow: auto;
91 | border-radius: 3px;
92 | }
93 |
94 | /* Inline code */
95 | *:not(pre) > code[class*='language-'] {
96 | padding: 0.1em;
97 | font-size: 0.9em;
98 | border-radius: 0.3em;
99 | white-space: normal;
100 | word-break: break-word;
101 | }
102 |
103 | .token.comment,
104 | .token.prolog,
105 | .token.doctype,
106 | .token.cdata {
107 | color: ${theme.code.color.comment};
108 | }
109 |
110 | .token.punctuation {
111 | color: ${theme.code.color.punctuation};
112 | }
113 |
114 | .namespace {
115 | opacity: 0.7;
116 | }
117 |
118 | .token.property,
119 | .token.tag,
120 | .token.boolean,
121 | .token.number,
122 | .token.constant,
123 | .token.symbol,
124 | .token.deleted {
125 | color: ${theme.code.color.deleted};
126 | }
127 |
128 | .token.selector,
129 | .token.attr-name,
130 | .token.string,
131 | .token.char,
132 | .token.builtin,
133 | .token.inserted {
134 | color: ${theme.code.color.inserted};
135 | }
136 |
137 | .token.operator,
138 | .token.entity,
139 | .token.url,
140 | .language-css .token.string,
141 | .style .token.string {
142 | color: ${theme.code.color.string};
143 | background: hsla(0, 0%, 100%, 0.5);
144 | }
145 |
146 | .token.atrule,
147 | .token.attr-value,
148 | .token.keyword {
149 | color: ${theme.code.color.keyword};
150 | }
151 |
152 | .token.function,
153 | .token.class-name {
154 | color: ${theme.code.color.keyword};
155 | }
156 |
157 | .token.regex,
158 | .token.important,
159 | .token.variable {
160 | color: ${theme.code.color.variable};
161 | }
162 |
163 | .token.important,
164 | .token.bold {
165 | font-weight: bold;
166 | }
167 | .token.italic {
168 | font-style: italic;
169 | }
170 |
171 | .token.entity {
172 | cursor: help;
173 | }
174 | `
175 |
--------------------------------------------------------------------------------
/site/src/styles/theme.js:
--------------------------------------------------------------------------------
1 | const fontSize = '16px'
2 |
3 | const color = {
4 | text: '#24292e',
5 | accent: '#586069',
6 | }
7 |
8 | const breakpoint = {
9 | small: 400,
10 | medium: 800,
11 | large: 1200,
12 | xlarge: 1600,
13 | }
14 |
15 | const media = {
16 | small: `@media(min-width: ${breakpoint.small}px)`,
17 | medium: `@media(min-width: ${breakpoint.medium}px)`,
18 | large: `@media(min-width: ${breakpoint.large}px)`,
19 | xlarge: `@media(min-width: ${breakpoint.xlarge}px)`,
20 | }
21 |
22 | const markdown = {
23 | color: {
24 | blockquote: '#24292e',
25 | accent: '#d6d6d6',
26 | background: 'white',
27 | text: '#24292e',
28 | },
29 | }
30 |
31 | const code = {
32 | color: {
33 | background: 'initial',
34 | comment: 'gray',
35 | punctuation: 'black',
36 | deleted: 'red',
37 | inserted: 'green',
38 | string: 'black',
39 | keyword: 'black',
40 | function: 'black',
41 | variable: 'black',
42 | },
43 | }
44 |
45 | export const theme = {
46 | fontSize,
47 | color,
48 | breakpoint,
49 | media,
50 | markdown,
51 | code,
52 | }
53 |
--------------------------------------------------------------------------------
/site/src/styles/typography.js:
--------------------------------------------------------------------------------
1 | import Typography from 'typography'
2 | import '../../../fonts/fonts.css'
3 |
4 | export const fonts = {
5 | regular: 'Inter Regular',
6 | regularItalic: 'Inter Italic',
7 | semibold: 'Inter Semibold',
8 | semiboldItalic: 'Inter Semibold Italic',
9 | bold: 'Inter Bold',
10 | boldItalic: 'Inter Bold Italic',
11 | }
12 |
13 | const typography = new Typography({
14 | baseFontSize: '18px',
15 | baseLineHeight: 1.55,
16 | headerLineHeight: 1.4,
17 | headerFontFamily: [fonts.bold, 'sans-serif'],
18 | bodyFontFamily: [fonts.regular, 'sans-serif'],
19 | headerColor: 'hsla(0,0%,0%,0.9)',
20 | bodyColor: 'hsla(0,0%,0%,0.8)',
21 |
22 | overrideStyles: ({ rhythm }) => ({
23 | h1: {
24 | color: 'hsla(0,0%,0%,0.75)',
25 | },
26 | h2: {
27 | color: 'hsla(0,0%,0%,0.775)',
28 | },
29 | h3: {
30 | color: 'hsla(0,0%,0%,0.8)',
31 | },
32 | 'h1,h2,h3,h4,h5,h6': {
33 | lineHeight: 1,
34 | },
35 | 'h1,h2,h3,h4': {
36 | lineHeight: 1.4,
37 | marginTop: rhythm(1),
38 | marginBottom: rhythm(1 / 2),
39 | },
40 | }),
41 | })
42 | // Hot reload typography in development.
43 | if (process.env.NODE_ENV !== 'production') {
44 | typography.injectStyles()
45 | }
46 |
47 | export default typography
48 | export const rhythm = typography.rhythm
49 | export const scale = typography.scale
50 |
--------------------------------------------------------------------------------
/site/src/templates/ReleaseTemplate.js:
--------------------------------------------------------------------------------
1 | import { Global } from '@emotion/core'
2 | import { graphql } from 'gatsby'
3 | import { ChevronLeft } from 'icons/ChevronLeft'
4 | import debounce from 'just-debounce-it'
5 | import Mark from 'mark.js'
6 | import React from 'react'
7 | import Helmet from 'react-helmet'
8 | import { LinkButton } from '../components/Button/LinkButton'
9 | import { Favicons } from '../components/Favicons'
10 | import { FocusStyles } from '../components/FocusStyles'
11 | import { Header } from '../components/Header'
12 | import { Release } from '../components/Release/Release'
13 | import { SiteWrapper } from '../components/SiteWrapper'
14 | import { useSiteSetup } from '../hooks/useSiteSetup'
15 | import { globalStyles } from '../styles/global'
16 | import { getOgImageSrc } from '../utils/data'
17 |
18 | const ReleaseTemplate = ({
19 | data,
20 | data: {
21 | release: {
22 | name: releaseName,
23 | tagName,
24 | publishedAt,
25 | childGithubReleaseBody: {
26 | childMarkdownRemark: { html, plainText },
27 | },
28 | },
29 | },
30 | pageContext: { isWidget },
31 | }) => {
32 | const tagOgImageSrc = getOgImageSrc(data)
33 |
34 | const [searchValue, setSearchValue] = React.useState('')
35 | const mark = React.useRef()
36 | const search = React.useRef(null)
37 | function getReleaseSearch() {
38 | if (search.current !== null) {
39 | return search.current
40 | }
41 |
42 | const debouncedMark = debounce(value => {
43 | if (mark.current) {
44 | mark.current.unmark()
45 | }
46 | mark.current = new Mark(document.querySelectorAll('.release'))
47 | mark.current.mark(value)
48 | }, 100)
49 |
50 | search.current = value => {
51 | setSearchValue(value)
52 | debouncedMark(value)
53 | }
54 |
55 | return search.current
56 | }
57 |
58 | const {
59 | faviconElements,
60 | primaryColor,
61 | logoSrc,
62 | title,
63 | description,
64 | homepage,
65 | url,
66 | htmlUrl,
67 | } = useSiteSetup()
68 |
69 | const siteTitle = `${title} ${tagName}`
70 | return (
71 | <>
72 |
73 |
74 |
75 |
100 |
108 |
109 |
110 | All Releases
111 |
112 |
122 |
123 |
124 | )
125 | }
126 |
127 | export const query = graphql`
128 | query ReleaseTemplateQuery($tagName: String!, $ogText: String!) {
129 | repository: allGithubRepo {
130 | edges {
131 | node {
132 | avatarImageFile: childFile {
133 | childOgImage {
134 | ogImageWithText(text: $ogText) {
135 | src
136 | }
137 | }
138 | }
139 | }
140 | }
141 | }
142 | logo: allFile(filter: { name: { eq: "logo" } }) {
143 | edges {
144 | node {
145 | childOgImage {
146 | ogImageWithText(text: $ogText) {
147 | src
148 | }
149 | }
150 | }
151 | }
152 | }
153 | release: githubRelease(tagName: { eq: $tagName }) {
154 | name
155 | tagName
156 | publishedAt
157 | childGithubReleaseBody {
158 | childMarkdownRemark {
159 | html
160 | plainText
161 | }
162 | }
163 | }
164 | }
165 | `
166 |
167 | export default ReleaseTemplate
168 |
--------------------------------------------------------------------------------
/site/src/templates/ReleasesTemplate.js:
--------------------------------------------------------------------------------
1 | import { Global } from '@emotion/core'
2 | import { graphql } from 'gatsby'
3 | import { Search, UnorderedSearchIndex } from 'js-search'
4 | import debounce from 'just-debounce-it'
5 | import Mark from 'mark.js'
6 | import React from 'react'
7 | import Helmet from 'react-helmet'
8 | import Waypoint from 'react-waypoint'
9 | import { Favicons } from '../components/Favicons'
10 | import { FocusStyles } from '../components/FocusStyles'
11 | import { Header } from '../components/Header'
12 | import { Release } from '../components/Release/Release'
13 | import { SiteWrapper } from '../components/SiteWrapper'
14 | import { WidgetWrapper } from '../components/WidgetWrapper'
15 | import { useSiteSetup } from '../hooks/useSiteSetup'
16 | import { SiteProvider } from '../providers/SiteProvider'
17 | import { WidgetContext, WidgetProvider } from '../providers/WidgetProvider'
18 | import { globalStyles } from '../styles/global'
19 | import { getOgImageSrc } from '../utils/data'
20 |
21 | const ReleasesTemplate = ({
22 | data,
23 | data: {
24 | releases: { edges },
25 | },
26 | pageContext: { isWidget },
27 | }) => {
28 | const Provider = isWidget ? WidgetProvider : SiteProvider
29 | const Wrapper = isWidget ? WidgetWrapper : SiteWrapper
30 |
31 | const ogImageSrc = getOgImageSrc(data)
32 |
33 | const [releases, setReleases] = React.useState(edges)
34 | const [releasesShown, setReleasesShown] = React.useState(10)
35 |
36 | const [searchValue, setSearchValue] = React.useState('')
37 | const search = React.useRef(null)
38 | function getReleaseSearch() {
39 | if (search.current !== null) {
40 | return search.current
41 | }
42 | const releaseSearch = new Search(['node', 'id'])
43 | releaseSearch.searchIndex = new UnorderedSearchIndex()
44 | releaseSearch.addIndex(['node', 'name'])
45 | releaseSearch.addIndex(['node', 'tagName'])
46 | releaseSearch.addIndex([
47 | 'node',
48 | 'childGithubReleaseBody',
49 | 'childMarkdownRemark',
50 | 'plainText',
51 | ])
52 | releaseSearch.addDocuments(edges)
53 |
54 | const debouncedReleaseSearch = debounce(value => {
55 | setReleases(!!value ? releaseSearch.search(value) : edges)
56 | }, 100)
57 |
58 | search.current = value => {
59 | setSearchValue(value)
60 | debouncedReleaseSearch(value)
61 | }
62 |
63 | return search.current
64 | }
65 |
66 | const mark = React.useRef()
67 | React.useEffect(() => {
68 | if (mark.current) {
69 | mark.current.unmark()
70 | }
71 | mark.current = new Mark(document.querySelectorAll('.release'))
72 | mark.current.mark(searchValue)
73 | }, [releases])
74 |
75 | const {
76 | faviconElements,
77 | primaryColor,
78 | logoSrc,
79 | title,
80 | description,
81 | homepage,
82 | url,
83 | htmlUrl,
84 | } = useSiteSetup()
85 |
86 | const siteTitle = `${title} changelog`
87 | const ogImage = `${url}${ogImageSrc}`
88 |
89 | return (
90 |
91 |
92 |
93 |
94 |
119 |
128 |
129 | {releases.length === 0 ? (
130 |
138 | We couldn't find any releases, try a different search query.
139 |
140 | ) : (
141 | releases
142 | .slice(0, releasesShown)
143 | .map(
144 | ({
145 | node: {
146 | id,
147 | name,
148 | tagName,
149 | publishedAt,
150 | childGithubReleaseBody: {
151 | childMarkdownRemark: { html, plainText },
152 | },
153 | },
154 | }) => (
155 |
168 | )
169 | )
170 | )}
171 |
172 | {isOpen =>
173 | isOpen &&
174 | releasesShown < releases.length && (
175 | setReleasesShown(count => count + 10)}
177 | bottomOffset="-100%"
178 | />
179 | )
180 | }
181 |
182 |
183 |
184 | )
185 | }
186 |
187 | export const query = graphql`
188 | query ReleasesTemplateQuery($ogText: String!) {
189 | repository: allGithubRepo {
190 | edges {
191 | node {
192 | avatarImageFile: childFile {
193 | childOgImage {
194 | ogImageWithText(text: $ogText) {
195 | src
196 | }
197 | }
198 | }
199 | }
200 | }
201 | }
202 | logo: allFile(filter: { name: { eq: "logo" } }) {
203 | edges {
204 | node {
205 | childOgImage {
206 | ogImageWithText(text: $ogText) {
207 | src
208 | }
209 | }
210 | }
211 | }
212 | }
213 | releases: allGithubRelease(filter: { draft: { eq: false } }) {
214 | edges {
215 | node {
216 | id
217 | name
218 | tagName
219 | publishedAt
220 | childGithubReleaseBody {
221 | childMarkdownRemark {
222 | html
223 | plainText
224 | }
225 | }
226 | }
227 | }
228 | }
229 | }
230 | `
231 |
232 | export default ReleasesTemplate
233 |
--------------------------------------------------------------------------------
/site/src/utils/constants.js:
--------------------------------------------------------------------------------
1 | export const CHANGECAST_LOCALSTORAGE_KEY = 'changecast'
2 |
--------------------------------------------------------------------------------
/site/src/utils/copyToClipboard.js:
--------------------------------------------------------------------------------
1 | export const copyToClipboard = str => {
2 | const el = document.createElement('textarea') // Create a
3 | ![\\"test\\"](\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" "\\\"\\\"")
21 | "
22 | `;
23 |
24 | exports[`it leaves images that are already linked alone 1`] = `
25 | "
29 |
33 | ![\\"img\\"](\\"not-a-real-dir/image/my-image.jpg\\" "\\\"\\\"")
42 | "
43 | `;
44 |
45 | exports[`it leaves linked HTML img tags alone 1`] = `
46 | "
47 |
48 |
49 | ![\\"my](\\"not-a-real-dir/image/my-image.jpeg\\" "\\\"\\\"")
66 |
67 | "
68 | `;
69 |
70 | exports[`it transforms image references in markdown 1`] = `
71 | "
78 |
82 |
86 | ![\\"alt](\\"not-a-real-dir/images/my-image.jpeg\\" "\\\"Ref")
95 |
96 | "
97 | `;
98 |
99 | exports[`it transforms images in markdown 1`] = `
100 | "
107 |
111 |
115 |