-
Notifications
You must be signed in to change notification settings - Fork 30
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
WIP/POC: crossword page in DCR #12511
base: main
Are you sure you want to change the base?
Changes from all commits
f9a9b54
45546b0
d57540a
93bf549
b5c7e73
aff299e
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import type { GuardianCrossword } from 'mycrossword'; | ||
import { MyCrossword } from 'mycrossword/dist/cjs/components'; | ||
import xwCss from '!to-string-loader!css-loader!mycrossword/dist/index.css'; | ||
|
||
export type CrosswordProps = { | ||
id: string; | ||
crossword: GuardianCrossword; | ||
}; | ||
|
||
export const Crossword = ({ crossword, id }: CrosswordProps) => ( | ||
<> | ||
<style>{xwCss}</style> | ||
<MyCrossword id={id} data={crossword} /> | ||
</> | ||
); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import { css } from '@emotion/react'; | ||
import { | ||
textEgyptian17, | ||
textEgyptianBold17, | ||
} from '@guardian/source/foundations'; | ||
|
||
const instructionsStyles = css` | ||
${textEgyptian17}; | ||
white-space: pre-line; | ||
`; | ||
const headerStyles = css` | ||
${textEgyptianBold17}; | ||
white-space: pre-line; | ||
`; | ||
export const CrosswordInstructions = ({ | ||
instructions, | ||
className, | ||
}: { | ||
instructions: string; | ||
className?: string; | ||
}) => ( | ||
<div css={instructionsStyles} className={className}> | ||
<strong css={headerStyles}>Special instructions: </strong> | ||
{instructions} | ||
</div> | ||
); |
Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
@@ -0,0 +1,49 @@ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
import { css } from '@emotion/react'; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
import { textSans15 } from '@guardian/source/foundations'; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
import { palette } from '../palette'; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||
const crosswordLinkStyles = css` | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
${textSans15}; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||
a { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
color: ${palette('--standfirst-link-text')}; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
text-decoration: none; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
:hover { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
border-bottom: 1px solid ${palette('--standfirst-link-border')}; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
`; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||
export const CrosswordLinks = ({ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
crossword, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
className, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}: { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
crossword: GuardianCrossword; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
className?: string; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}) => { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
return ( | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<span css={crosswordLinkStyles} className={className}> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<a | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
target="_blank" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
href={`/crosswords/${crossword.crosswordType}/${crossword.number}/print`} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
rel="noreferrer" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
</a>{' '} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|{' '} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
{!!crossword.pdf && ( | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<a target="_blank" href={crossword.pdf} rel="noreferrer"> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Check warning Code scanning / CodeQL Client-side URL redirect Medium
Untrusted URL redirection depends on a
user-provided value Error loading related location Loading Untrusted URL redirection depends on a user-provided value Error loading related location Loading Untrusted URL redirection depends on a user-provided value Error loading related location Loading Untrusted URL redirection depends on a user-provided value Error loading related location Loading
Copilot Autofix AI 20 days ago To fix the problem, we need to ensure that the URL in
Suggested changeset
1
dotcom-rendering/src/components/CrosswordLinks.tsx
Copilot is powered by AI and may make mistakes. Always verify output.
Refresh and try again.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||
PDF version | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
</a>{' '} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|{' '} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
</> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
)} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<a | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
href={`/crosswords/accessible/${crossword.crosswordType}/${crossword.number}`} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Accessible version | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
</a> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
</span> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}; |
Check failure
Code scanning / CodeQL
Client-side cross-site scripting High
Copilot Autofix AI 20 days ago
To fix the problem, we need to ensure that the
crossword.pdf
value is properly sanitized before being used in thehref
attribute. This can be achieved by using a library likeDOMPurify
to sanitize the URL.DOMPurify
library.DOMPurify.sanitize
to clean thecrossword.pdf
value before using it in thehref
attribute.