feat(frontend): replace forkawesome with bootstrap icons

These icon replace fork awesome. A linter informs the user about the deprecation.

See https://github.com/hedgedoc/hedgedoc/issues/2929

Co-authored-by: Philip Molares <philip.molares@udo.edu>
Co-authored-by: Tilman Vatteroth <git@tilmanvatteroth.de>
Signed-off-by: Philip Molares <philip.molares@udo.edu>
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Philip Molares 2023-02-05 22:05:02 +01:00 committed by Tilman Vatteroth
parent e7246f1484
commit 1c16e25e14
179 changed files with 4974 additions and 1943 deletions

View file

@ -1,84 +0,0 @@
SIL OPEN FONT LICENSE
Version 1.1 - 26 February 2007
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide development
of collaborative font projects, to support the font creation efforts of academic
and linguistic communities, and to provide a free and open framework in which
fonts may be shared and improved in partnership with others.
The OFL allows the licensed fonts to be used, studied, modified and redistributed
freely as long as they are not sold by themselves. The fonts, including any
derivative works, can be bundled, embedded, redistributed and/or sold with
any software provided that any reserved names are not used by derivative works.
The fonts and derivatives, however, cannot be released under any other type
of license. The requirement for fonts to remain under this license does not
apply to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright Holder(s)
under this license and clearly marked as such. This may include source files,
build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the copyright
statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting, or
substituting — in part or in whole — any of the components of the Original
Version, by changing formats or by porting the Font Software to a new environment.
"Author" refers to any designer, engineer, programmer, technical writer or
other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining a copy
of the Font Software, to use, study, copy, merge, embed, modify, redistribute,
and sell modified and unmodified copies of the Font Software, subject to the
following conditions:
1) Neither the Font Software nor any of its individual components, in Original
or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled, redistributed
and/or sold with any software, provided that each copy contains the above
copyright notice and this license. These can be included either as stand-alone
text files, human-readable headers or in the appropriate machine-readable
metadata fields within text or binary files as long as those fields can be
easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font Name(s)
unless explicit written permission is granted by the corresponding Copyright
Holder. This restriction only applies to the primary font name as presented
to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software
shall not be used to promote, endorse or advertise any Modified Version, except
to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s)
or with their explicit written permission.
5) The Font Software, modified or unmodified, in part or in whole, must be
distributed entirely under this license, and must not be distributed under
any other license. The requirement for fonts to remain under this license
does not apply to any document created using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT,
TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE
FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL,
INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT
SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.

View file

@ -88,7 +88,7 @@ If some text is selected it will either put that as the link, if it thinks that
inserting `name=$YourName`, a time by inserting `time=$time` or a color by inserting `color=#FFFFFF` in the `[]`.
Please note that you can only specify one of those per `[]`, but you can use multiple `[]`.
5. **Emoji Picker**
This button opens the emoji picker, where you can choose an emoji or a fork awesome icon to insert into your note.
This button opens the emoji picker, where you can choose an emoji to insert into your note.
![Emoji Picker](../images/interface/toolbar/emoji.png)
## Settings

View file

@ -1,13 +1,12 @@
# HedgeDoc Flavored Markdown
HedgeDoc has its own markdown dialect which supports many features from [CommonMark][commonmark] and [Github Flavored Markdown][gfm]. It also adds some new extensions and is missing some.
HedgeDoc has its own markdown dialect which supports many features from [CommonMark][commonmark]
and [Github Flavored Markdown][gfm]. It also adds some new extensions and is missing some.
These tables tell you what exactly we support in HedgeDoc 1.x (HFM 1) and HedgeDoc 2 (HFM 2).
## Typography
| Feature | HFM 1 | HFM 2 | CommonMark | GFM |
| ------------- | :---: | :---: | :---------------: | :---------------: |
| bold | ☑️ | ☑️ | ☑️ | ☑️ |
@ -36,7 +35,8 @@ These tables tell you what exactly we support in HedgeDoc 1.x (HFM 1) and HedgeD
| task list | ☑️ | ☑️ | | ☑️ |
| defition list | ☑️ | ☑️ | | |
| emoji | [Unicode 6.1][unicode-6] | [Unicode 13][unicode-13] | | |
| [ForkAwesome][fa] | ☑️ with `<i class='fa'>` | ☑️ with shortcodes | | |
| [ForkAwesome][fa] | ☑️ with `<i class='fa'>` | removed | | |
| [Bootstrap Icons][bootstrap-icons] | | ☑️ with shortcodes | | |
| LaTeX | ☑️[^mj] | ☑️[^kt] | | |
[^highlight]: Code blocks with a given language are rendered using syntax highlighting.
@ -59,7 +59,6 @@ These tables tell you what exactly we support in HedgeDoc 1.x (HFM 1) and HedgeD
| image with given size | ☑️ | ☑️ | (☑️ with `<img>`) | (☑️ with `<img>`) |
| table of contents | ☑️ | ☑️ | | |
## Structural elements
| Feature | HFM 1 | HFM 2 | CommonMark | GFM |
@ -70,7 +69,9 @@ These tables tell you what exactly we support in HedgeDoc 1.x (HFM 1) and HedgeD
| Alerts | ☑️ | ☑️ | | |
## Embeddings
HFM 1 includes support for certain embeddings of external content by using the `{%keyword parameter %}` syntax. To increase the readability of the markdown code we decided that HFM 2 should just use plain links if possible.
HFM 1 includes support for certain embeddings of external content by using the `{%keyword parameter %}` syntax. To
increase the readability of the markdown code we decided that HFM 2 should just use plain links if possible.
| Feature | HFM 1 | HFM 2 | CommonMark | GFM |
| --------------------------------------------------- | :---: | :---------------------: | :--------: | :---: |
@ -81,10 +82,13 @@ HFM 1 includes support for certain embeddings of external content by using the `
| [Speakerdeck][speakerdeck] (`{%speakerdeck ... %}`) | ☑️ | removed | | |
| [GitHub Gist][gist] (`{%gist ... %}`) | ☑️ | with plain link[^embed] | | |
[^embed]: The special syntax from HFM 1 is deprecated, but will still work in HFM 2. However, a plain link to the content should be used.
[^embed]: The special syntax from HFM 1 is deprecated, but will still work in HFM 2. However, a plain link to the
content should be used.
## HTML
Besides the basic HTML typography elements (`<p>`, `<a>`, `<b>`, `<ins>`, `<del>`) the following more special HTML elements are supported by some specification.
Besides the basic HTML typography elements (`<p>`, `<a>`, `<b>`, `<ins>`, `<del>`) the following more special HTML
elements are supported by some specification.
| Feature | HedgeDocMark 1 | HedgeDocMark 2 | CommonMark | GFM |
| :-----------: | :------------: | :------------: | :--------: | :---: |
@ -99,14 +103,27 @@ Besides the basic HTML typography elements (`<p>`, `<a>`, `<b>`, `<ins>`, `<del>
| `<plaintext>` | | ☑️ | ☑️ | |
[fa]: https://forkaweso.me/
[bootstrap-icons]: https://icons.getbootstrap.com/
[youtube]: https://www.youtube.com/
[vimeo]: https://vimeo.com/
[slideshare]: https://www.slideshare.net/
[speakerdeck]: https://speakerdeck.com/
[gist]: https://gist.github.com/
[mathjax]: https://www.mathjax.org/
[katex]: https://katex.org/
[gfm]: https://github.github.com/gfm/
[commonmark]: https://spec.commonmark.org/
[unicode-6]: https://unicode.org/versions/Unicode6.1.0/
[unicode-13]: https://unicode.org/versions/Unicode13.0.0/

View file

@ -19,7 +19,6 @@ SPDX-License-Identifier: CC-BY-SA-4.0
- `{%pdf https://example.org/example-pdf.pdf %}` -> Embedding removed
- The use of `sequence` as code block language ([Why?](https://github.com/hedgedoc/react-client/issues/488#issuecomment-683262875))
- Comma-separated definition of tags in the yaml-frontmatter
- Fork Awesome Icons will be removed in a future release
### Removed
@ -43,6 +42,7 @@ SPDX-License-Identifier: CC-BY-SA-4.0
- F9 shortcut to sort lines
- Highlight.JS language support for `1c` was removed.
- Support for tag definitions in headings
- Fork Awesome has been replaced with [Bootstrap Icons](https://icons.getbootstrap.com/)
### Added
@ -54,9 +54,9 @@ SPDX-License-Identifier: CC-BY-SA-4.0
- HedgeDoc instances can be branded either with a '@ \<custom string\>' or '@ \<custom logo\>' after the HedgeDoc logo and text
- Images will be loaded via proxy if an image proxy is configured in the backend
- Asciinema videos may be embedded by pasting the URL of one video into a single line
- The toolbar includes an emoji and fork-awesome icon picker.
- The toolbar includes an emoji picker.
- Collapsible blocks can be added via a toolbar button or via autocompletion of "<details"
- Added shortcodes for [fork-awesome icons](https://forkaweso.me/Fork-Awesome/icons/) (e.g. `:fa-picture-o:`)
- Added shortcodes for icons (e.g. `:bi-picture:`)
- The code button now adds code fences even if the user selected nothing beforehand
- Code blocks with 'csv' as language render as tables.
- All images can be clicked to show them in full screen.

View file

@ -10,7 +10,6 @@
@import '~react-bootstrap-typeahead/css/Typeahead';
@import "~@fontsource/source-sans-pro/index.css";
@import "~twemoji-colr-font/twemoji";
@import '~fork-awesome/css/fork-awesome.min.css';
@import '~firacode/distr/fira_code';
@import "typeahead";
@import "./button-inside";
@ -79,16 +78,6 @@ body {
cursor: zoom-out;
}
.faded-fa {
.fa, &::after {
opacity: 0.5;
}
&:hover .fa, &:hover::after {
opacity: 1;
}
}
.dropup .dropdown-toggle, .dropdown-toggle {
&.no-arrow::after {
content: initial;

View file

@ -23,6 +23,16 @@ const customJestConfig = {
testEnvironment: 'jsdom',
testPathIgnorePatterns: ['/node_modules/', '/cypress/']
}
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig)
module.exports = async () => {
const nextJestConfig = await createJestConfig(customJestConfig)()
return {
...nextJestConfig,
moduleNameMapper: {
...nextJestConfig.moduleNameMapper,
'^.+\\.(svg)$': '<rootDir>/src/test-utils/svg-mock.tsx',
'^react-bootstrap-icons$': '<rootDir>/src/test-utils/bootstrap-icon-mocks.tsx',
'^react-bootstrap-icons/dist/icons/.*$': '<rootDir>/src/test-utils/svg-mock.tsx'
}
}
}

View file

@ -223,7 +223,7 @@
"shortcode": "The {{shortcode}} short-code is deprecated and will be removed in a future release. Use a single line URL instead.",
"frontmatter": "The yaml-metadata is invalid.",
"frontmatter-tags": "The comma-separated definition of tags in the yaml-metadata is deprecated. Use a yaml-array instead.",
"fork-awesome": "Fork Awesome is deprecated and will be removed in a future release. Please use bootstrap icons instead. See {{link}} for more information."
"fork-awesome": "The usage of Fork Awesome is deprecated and has been removed. Please use bootstrap icons instead. See {{link}} for more information."
},
"upload": {
"uploadFile": {

View file

@ -31,29 +31,33 @@ if (isMockMode) {
`)
}
/** @type {import('@svgr/webpack').LoaderOptions} */
const svgrConfig = {
svgoConfig: {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
removeViewBox: false
}
}
}
]
}
}
/** @type {import('next').NextConfig} */
const rawNextConfig = {
webpack: (config) => {
config.module.rules.push({
test: /\.svg$/i,
issuer: /\.[jt]sx?$/,
use: [
{
loader: '@svgr/webpack',
options: {
svgoConfig: {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
removeViewBox: false
}
}
}
]
}
}
options: svgrConfig
}
]
})

View file

@ -74,7 +74,6 @@
"fast-deep-equal": "3.1.3",
"firacode": "6.2.0",
"flowchart.js": "1.17.1",
"fork-awesome": "1.2.0",
"highlight.js": "11.7.0",
"htmlparser2": "8.0.1",
"i18next": "22.4.10",
@ -102,6 +101,7 @@
"next": "13.1.6",
"react": "18.2.0",
"react-bootstrap": "2.7.2",
"react-bootstrap-icons": "1.10.2",
"react-bootstrap-typeahead": "6.0.0",
"react-diff-viewer": "3.1.1",
"react-dom": "18.2.0",

View file

@ -43,8 +43,8 @@
z-index: 1000;
position: relative;
font-size: 3em;
height: 240px;
width: 203px;
height: 5em;
width: 5em;
color: #ffffff;
text-shadow: 4px 4px 0 #3b4045;
@ -55,10 +55,11 @@
animation: fill 6s infinite;
width: 100%;
&, :global(.fa) {
& > * {
position: absolute;
bottom: 0;
left: 0;
z-index: 1001;
}
}
}

View file

@ -3,11 +3,13 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
import { UiIcon } from '../../common/icons/ui-icon'
import { createNumberRangeArray } from '../../common/number-range/number-range'
import styles from './animations.module.scss'
import { IconRow } from './icon-row'
import React, { useMemo } from 'react'
import { Pencil as IconPencil } from 'react-bootstrap-icons'
import { PencilFill as IconPencilFill } from 'react-bootstrap-icons'
export interface HedgeDocLogoProps {
error: boolean
@ -25,10 +27,10 @@ export const LoadingAnimation: React.FC<HedgeDocLogoProps> = ({ error }) => {
<div className={`position-relative ${error ? styles.error : ''}`}>
<div className={styles.logo}>
<div>
<ForkAwesomeIcon icon={'pencil'} className={styles.background} size={'5x'}></ForkAwesomeIcon>
<UiIcon icon={IconPencilFill} className={styles.background} size={5} />
</div>
<div className={`${styles.overlay}`}>
<ForkAwesomeIcon icon={'pencil'} size={'5x'}></ForkAwesomeIcon>
<UiIcon icon={IconPencil} size={5} />
</div>
</div>
<div className={styles.pulse}></div>

View file

@ -3,28 +3,39 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
import type { IconName } from '../../common/fork-awesome/types'
import styles from './animations.module.scss'
import React, { useEffect, useState } from 'react'
import React, { Fragment, useEffect, useState } from 'react'
import type { Icon } from 'react-bootstrap-icons'
import { FileText as IconFileText } from 'react-bootstrap-icons'
import { File as IconFile } from 'react-bootstrap-icons'
import { Fonts as IconFonts } from 'react-bootstrap-icons'
import { Gear as IconGear } from 'react-bootstrap-icons'
import { KeyboardFill as IconKeyboardFill } from 'react-bootstrap-icons'
import { ListCheck as IconListCheck } from 'react-bootstrap-icons'
import { Markdown as IconMarkdown } from 'react-bootstrap-icons'
import { Pencil as IconPencil } from 'react-bootstrap-icons'
import { Person as IconPerson } from 'react-bootstrap-icons'
import { Tag as IconTag } from 'react-bootstrap-icons'
import { TypeBold as IconTypeBold } from 'react-bootstrap-icons'
import { TypeItalic as IconTypeItalic } from 'react-bootstrap-icons'
const elements: IconName[] = [
'file-text',
'markdown',
'pencil',
'bold',
'italic',
'align-justify',
'tag',
'user',
'file',
'keyboard-o',
'cog',
'font'
const elements: Icon[] = [
IconFileText,
IconMarkdown,
IconPencil,
IconTypeBold,
IconTypeItalic,
IconListCheck,
IconTag,
IconPerson,
IconFile,
IconKeyboardFill,
IconGear,
IconFonts
]
/**
* Chooses a random fork awesome icon from a predefined set and renders it.
* Chooses a random icon from a predefined set and renders it.
*
* The component uses a static icon in the first rendering and will choose the random icon after that.
* This is done because if the loading screen is prepared using SSR and then hydrated in the client, the rendered css class isn't the expected one from the SSR. (It's random. d'uh).
@ -33,13 +44,12 @@ const elements: IconName[] = [
* See https://nextjs.org/docs/messages/react-hydration-error
*/
export const RandomIcon: React.FC = () => {
const [icon, setIcon] = useState<number | undefined>()
const [icon, setIcon] = useState<JSX.Element | undefined>()
useEffect(() => {
setIcon(Math.floor(Math.random() * elements.length))
const index = Math.floor(Math.random() * elements.length)
setIcon(React.createElement(elements[index], { className: styles.particle }))
}, [])
return icon === undefined ? null : (
<ForkAwesomeIcon icon={elements[icon]} className={styles.particle}></ForkAwesomeIcon>
)
return <Fragment>{icon}</Fragment>
}

View file

@ -5,9 +5,7 @@ exports[`Async loading boundary shows a waiting spinner if loading 1`] = `
<div
class="m-3 d-flex align-items-center justify-content-center"
>
<i
class="fa fa-spinner fa-spin "
/>
BootstrapIconMock_ArrowRepeat
</div>
</div>
`;

View file

@ -7,9 +7,7 @@ exports[`Copy to clipboard button show an error text if clipboard api isn't avai
title="renderer.highlightCode.copyCode"
type="button"
>
<i
class="fa fa-files-o "
/>
BootstrapIconMock_Files
</button>
</div>
`;
@ -22,9 +20,7 @@ exports[`Copy to clipboard button show an error text if clipboard api isn't avai
title="renderer.highlightCode.copyCode"
type="button"
>
<i
class="fa fa-files-o "
/>
BootstrapIconMock_Files
</button>
</div>
`;
@ -36,9 +32,7 @@ exports[`Copy to clipboard button shows an error text if writing failed 1`] = `
title="renderer.highlightCode.copyCode"
type="button"
>
<i
class="fa fa-files-o "
/>
BootstrapIconMock_Files
</button>
</div>
`;
@ -51,9 +45,7 @@ exports[`Copy to clipboard button shows an error text if writing failed 2`] = `
title="renderer.highlightCode.copyCode"
type="button"
>
<i
class="fa fa-files-o "
/>
BootstrapIconMock_Files
</button>
</div>
`;
@ -65,9 +57,7 @@ exports[`Copy to clipboard button shows an success text if writing succeeded 1`]
title="renderer.highlightCode.copyCode"
type="button"
>
<i
class="fa fa-files-o "
/>
BootstrapIconMock_Files
</button>
</div>
`;
@ -80,9 +70,7 @@ exports[`Copy to clipboard button shows an success text if writing succeeded 2`]
title="renderer.highlightCode.copyCode"
type="button"
>
<i
class="fa fa-files-o "
/>
BootstrapIconMock_Files
</button>
</div>
`;

View file

@ -5,10 +5,11 @@
*/
import type { PropsWithDataCypressId } from '../../../../utils/cypress-attribute'
import { cypressId } from '../../../../utils/cypress-attribute'
import { ForkAwesomeIcon } from '../../fork-awesome/fork-awesome-icon'
import { UiIcon } from '../../icons/ui-icon'
import { useCopyOverlay } from '../hooks/use-copy-overlay'
import React, { Fragment, useRef } from 'react'
import { Button } from 'react-bootstrap'
import { Files as IconFiles } from 'react-bootstrap-icons'
import type { Variant } from 'react-bootstrap/types'
import { useTranslation } from 'react-i18next'
@ -46,7 +47,7 @@ export const CopyToClipboardButton: React.FC<CopyToClipboardButtonProps> = ({
title={t('renderer.highlightCode.copyCode') ?? undefined}
onClick={copyToClipboard}
{...cypressId(props)}>
<ForkAwesomeIcon icon='files-o' />
<UiIcon icon={IconFiles} />
</Button>
{overlayElement}
</Fragment>

View file

@ -5,11 +5,12 @@
*/
import { isClientSideRendering } from '../../../../utils/is-client-side-rendering'
import { Logger } from '../../../../utils/logger'
import { ForkAwesomeIcon } from '../../fork-awesome/fork-awesome-icon'
import { UiIcon } from '../../icons/ui-icon'
import { ShowIf } from '../../show-if/show-if'
import { CopyToClipboardButton } from '../copy-to-clipboard-button/copy-to-clipboard-button'
import React, { useCallback, useMemo } from 'react'
import { Button, FormControl, InputGroup } from 'react-bootstrap'
import { Share as IconShare } from 'react-bootstrap-icons'
import { useTranslation } from 'react-i18next'
export interface CopyableFieldProps {
@ -57,7 +58,7 @@ export const CopyableField: React.FC<CopyableFieldProps> = ({ content, shareOrig
<ShowIf condition={sharingSupported}>
<InputGroup.Text>
<Button variant='secondary' title={'Share'} onClick={doShareAction}>
<ForkAwesomeIcon icon='share-alt' />
<UiIcon icon={IconShare} />
</Button>
</InputGroup.Text>
</ShowIf>

View file

@ -1,65 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[` 1`] = `
<div>
<i
class="fa fa-heart fa-stack-1x"
/>
</div>
`;
exports[`ForkAwesomeIcon renders a heart correctly 1`] = `
<div>
<i
class="fa fa-heart "
/>
</div>
`;
exports[`ForkAwesomeIcon renders in size 2x 1`] = `
<div>
<i
class="fa fa-heart fa-2x"
/>
</div>
`;
exports[`ForkAwesomeIcon renders in size 3x 1`] = `
<div>
<i
class="fa fa-heart fa-3x"
/>
</div>
`;
exports[`ForkAwesomeIcon renders in size 4x 1`] = `
<div>
<i
class="fa fa-heart fa-4x"
/>
</div>
`;
exports[`ForkAwesomeIcon renders in size 5x 1`] = `
<div>
<i
class="fa fa-heart fa-5x"
/>
</div>
`;
exports[`ForkAwesomeIcon renders with additional className 1`] = `
<div>
<i
class="fa fa-heart testClass "
/>
</div>
`;
exports[`ForkAwesomeIcon renders with fixed width icon 1`] = `
<div>
<i
class="fa fa-fw fa-heart "
/>
</div>
`;

View file

@ -1,76 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ForkAwesomeStack renders a heart and a download icon stack 1`] = `
<div>
<span
class="fa-stack "
>
<i
class="fa fa-heart fa-stack-1x"
/>
<i
class="fa fa-download fa-stack-1x"
/>
</span>
</div>
`;
exports[`ForkAwesomeStack renders in size 2x 1`] = `
<div>
<span
class="fa-stack fa-2x"
>
<i
class="fa fa-heart fa-stack-1x"
/>
<i
class="fa fa-download fa-stack-1x"
/>
</span>
</div>
`;
exports[`ForkAwesomeStack renders in size 3x 1`] = `
<div>
<span
class="fa-stack fa-3x"
>
<i
class="fa fa-heart fa-stack-1x"
/>
<i
class="fa fa-download fa-stack-1x"
/>
</span>
</div>
`;
exports[`ForkAwesomeStack renders in size 4x 1`] = `
<div>
<span
class="fa-stack fa-4x"
>
<i
class="fa fa-heart fa-stack-1x"
/>
<i
class="fa fa-download fa-stack-1x"
/>
</span>
</div>
`;
exports[`ForkAwesomeStack renders in size 5x 1`] = `
<div>
<span
class="fa-stack fa-5x"
>
<i
class="fa fa-heart fa-stack-1x"
/>
<i
class="fa fa-download fa-stack-1x"
/>
</span>
</div>
`;

View file

@ -1,46 +0,0 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { ForkAwesomeIcon } from './fork-awesome-icon'
import type { IconName } from './types'
import { render } from '@testing-library/react'
describe('ForkAwesomeIcon', () => {
const icon: IconName = 'heart'
it('renders a heart correctly', () => {
const view = render(<ForkAwesomeIcon icon={icon} />)
expect(view.container).toMatchSnapshot()
})
it('renders with fixed width icon', () => {
const view = render(<ForkAwesomeIcon icon={icon} fixedWidth={true} />)
expect(view.container).toMatchSnapshot()
})
it('renders with additional className', () => {
const view = render(<ForkAwesomeIcon icon={icon} className={'testClass'} />)
expect(view.container).toMatchSnapshot()
})
describe('renders in size', () => {
it('2x', () => {
const view = render(<ForkAwesomeIcon icon={icon} size={'2x'} />)
expect(view.container).toMatchSnapshot()
})
it('3x', () => {
const view = render(<ForkAwesomeIcon icon={icon} size={'3x'} />)
expect(view.container).toMatchSnapshot()
})
it('4x', () => {
const view = render(<ForkAwesomeIcon icon={icon} size={'4x'} />)
expect(view.container).toMatchSnapshot()
})
it('5x', () => {
const view = render(<ForkAwesomeIcon icon={icon} size={'5x'} />)
expect(view.container).toMatchSnapshot()
})
})
describe('renders in stack', () => {
const view = render(<ForkAwesomeIcon icon={icon} stacked={true} />)
expect(view.container).toMatchSnapshot()
})
})

View file

@ -1,39 +0,0 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { IconName, IconSize } from './types'
import React from 'react'
export interface ForkAwesomeIconProps {
icon: IconName
className?: string
fixedWidth?: boolean
size?: IconSize
stacked?: boolean
}
/**
* Renders a fork awesome icon.
*
* @param icon The icon that should be rendered.
* @param fixedWidth If the icon should be rendered with a fixed width.
* @param size The size class the icon should be rendered in.
* @param className Additional classes the icon should get.
* @param stacked If the icon is part of a {@link ForkAwesomeStack stack}.
* @see https://forkaweso.me
*/
export const ForkAwesomeIcon: React.FC<ForkAwesomeIconProps> = ({
icon,
fixedWidth = false,
size,
className,
stacked = false
}) => {
const fixedWithClass = fixedWidth ? 'fa-fw' : ''
const sizeClass = size ? `-${size}` : stacked ? '-1x' : ''
const stackClass = stacked ? '-stack' : ''
const extraClasses = `${className ?? ''} ${sizeClass || stackClass ? `fa${stackClass}${sizeClass}` : ''}`
return <i className={`fa ${fixedWithClass} fa-${icon} ${extraClasses}`} />
}

View file

@ -1,804 +0,0 @@
/*
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
export const ForkAwesomeIcons = [
'500px',
'activitypub',
'address-book-o',
'address-book',
'address-card-o',
'address-card',
'adjust',
'adn',
'align-center',
'align-justify',
'align-left',
'align-right',
'amazon',
'ambulance',
'american-sign-language-interpreting',
'anchor',
'android',
'angellist',
'angle-double-down',
'angle-double-left',
'angle-double-right',
'angle-double-up',
'angle-down',
'angle-left',
'angle-right',
'angle-up',
'apple',
'archive-org',
'archive',
'archlinux',
'area-chart',
'arrow-circle-down',
'arrow-circle-left',
'arrow-circle-o-down',
'arrow-circle-o-left',
'arrow-circle-o-right',
'arrow-circle-o-up',
'arrow-circle-right',
'arrow-circle-up',
'arrow-down',
'arrow-left',
'arrow-right',
'arrows-alt',
'arrows-h',
'arrows',
'arrows-v',
'arrow-up',
'artstation',
'askfm',
'assistive-listening-systems',
'asterisk',
'at',
'att',
'audio-description',
'backward',
'balance-scale',
'bandcamp',
'ban',
'bar-chart',
'barcode',
'bars',
'bath',
'battery-empty',
'battery-full',
'battery-half',
'battery-quarter',
'battery-three-quarters',
'bed',
'beer',
'behance-square',
'behance',
'bell-o',
'bell-rigning-o',
'bell-ringing',
'bell-slash-o',
'bell-slash',
'bell',
'bicycle',
'binoculars',
'biometric',
'birthday-cake',
'bitbucket-square',
'bitbucket',
'black-tie',
'blind',
'blockstack',
'bluetooth-b',
'bluetooth',
'boardgamegeek',
'bold',
'bolt',
'bomb',
'bookmark-o',
'bookmark',
'book',
'bootstrap',
'braille',
'briefcase',
'btc',
'bug',
'building-o',
'building',
'bullhorn',
'bullseye',
'bunny',
'bus',
'buymeacoffee',
'buysellads',
'calculator',
'calendar-check-o',
'calendar-minus-o',
'calendar-o',
'calendar-plus-o',
'calendar',
'calendar-times-o',
'camera-retro',
'camera',
'caret-down',
'caret-left',
'caret-right',
'caret-square-o-down',
'caret-square-o-left',
'caret-square-o-right',
'caret-square-o-up',
'caret-up',
'car',
'cart-arrow-down',
'cart-plus',
'cc-amex',
'cc-by',
'cc-cc',
'cc-diners-club',
'cc-discover',
'cc-jcb',
'cc-mastercard',
'cc-nc-eu',
'cc-nc-jp',
'cc-nc',
'cc-nd',
'cc-paypal',
'cc-pd',
'cc-remix',
'cc-sa',
'cc-share',
'cc-stripe',
'cc',
'cc-visa',
'cc-zero',
'certificate',
'chain-broken',
'check-circle-o',
'check-circle',
'check-square-o',
'check-square',
'check',
'chevron-circle-down',
'chevron-circle-left',
'chevron-circle-right',
'chevron-circle-up',
'chevron-down',
'chevron-left',
'chevron-right',
'chevron-up',
'child',
'chrome',
'circle-o-notch',
'circle-o',
'circle',
'circle-thin',
'classicpress-circle',
'classicpress',
'clipboard',
'clock-o',
'clone',
'cloud-download',
'cloud',
'cloud-upload',
'code-fork',
'codepen',
'code',
'codiepie',
'coffee',
'cogs',
'cog',
'columns',
'commenting-o',
'commenting',
'comment-o',
'comments-o',
'comments',
'comment',
'compass',
'compress',
'connectdevelop',
'contao',
'conway-glider',
'copyright',
'creative-commons',
'credit-card-alt',
'credit-card',
'crop',
'crosshairs',
'csharp',
'css3',
'c',
'cubes',
'cube',
'cutlery',
'dashcube',
'database',
'deaf',
'debian',
'delicious',
'desktop',
'deviantart',
'dev-to',
'diamond',
'diaspora',
'digg',
'digitalocean',
'discord-alt',
'discord',
'dogmazic',
'dot-circle-o',
'download',
'dribbble',
'dropbox',
'drupal',
'edge',
'eercast',
'eject',
'ellipsis-h',
'ellipsis-v',
'email-bulk-o',
'email-bulk',
'emby',
'empire',
'envelope-open-o',
'envelope-open',
'envelope-o',
'envelope-square',
'envelope',
'envira',
'eraser',
'ethereum',
'etsy',
'eur',
'exchange',
'exclamation-circle',
'exclamation',
'exclamation-triangle',
'expand',
'expeditedssl',
'external-link-square',
'external-link',
'eyedropper',
'eye-slash',
'eye',
'facebook-messenger',
'facebook-official',
'facebook-square',
'facebook',
'fast-backward',
'fast-forward',
'fax',
'f-droid',
'female',
'ffmpeg',
'fighter-jet',
'file-archive-o',
'file-audio-o',
'file-code-o',
'file-epub',
'file-excel-o',
'file-image-o',
'file-o',
'file-pdf-o',
'file-powerpoint-o',
'files-o',
'file',
'file-text-o',
'file-text',
'file-video-o',
'file-word-o',
'film',
'filter',
'fire-extinguisher',
'firefox',
'fire',
'first-order',
'flag-checkered',
'flag-o',
'flag',
'flask',
'flickr',
'floppy-o',
'folder-open-o',
'folder-open',
'folder-o',
'folder',
'font-awesome',
'fonticons',
'font',
'fork-awesome',
'fort-awesome',
'forumbee',
'forward',
'foursquare',
'free-code-camp',
'freedombox',
'friendica',
'frown-o',
'funkwhale',
'futbol-o',
'gamepad',
'gavel',
'gbp',
'genderless',
'get-pocket',
'gg-circle',
'gg',
'gift',
'gimp',
'gitea',
'github-alt',
'github-square',
'github',
'gitlab',
'git-square',
'git',
'glass',
'glide-g',
'glide',
'globe-e',
'globe',
'globe-w',
'gnupg',
'gnu-social',
'gnu',
'google-play',
'google-plus-official',
'google-plus-square',
'google-plus',
'google',
'google-wallet',
'graduation-cap',
'gratipay',
'grav',
'hackaday',
'hacker-news',
'hackster',
'hal',
'hand-lizard-o',
'hand-o-down',
'hand-o-left',
'hand-o-right',
'hand-o-up',
'hand-paper-o',
'hand-peace-o',
'hand-pointer-o',
'hand-rock-o',
'hand-scissors-o',
'handshake-o',
'hand-spock-o',
'hashnode',
'hashtag',
'hdd-o',
'header',
'headphones',
'heartbeat',
'heart-o',
'heart',
'heroku',
'history',
'home-assistant',
'home',
'hospital-o',
'hourglass-end',
'hourglass-half',
'hourglass-o',
'hourglass-start',
'hourglass',
'houzz',
'h-square',
'html5',
'hubzilla',
'i-cursor',
'id-badge',
'id-card-o',
'id-card',
'ils',
'imdb',
'inbox',
'indent',
'industry',
'info-circle',
'info',
'inkscape',
'inr',
'instagram',
'internet-explorer',
'ioxhost',
'italic',
'java',
'jirafeau',
'joomla',
'joplin',
'jpy',
'jsfiddle',
'julia',
'jupyter',
'keybase',
'keyboard-o',
'key-modern',
'key',
'krw',
'language',
'laptop',
'laravel',
'lastfm-square',
'lastfm',
'leaf',
'leanpub',
'lemon-o',
'level-down',
'level-up',
'liberapay-square',
'liberapay',
'life-ring',
'lightbulb-o',
'line-chart',
'linkedin-square',
'linkedin',
'link',
'linode',
'linux',
'list-alt',
'list-ol',
'list',
'list-ul',
'location-arrow',
'lock',
'long-arrow-down',
'long-arrow-left',
'long-arrow-right',
'long-arrow-up',
'low-vision',
'magic',
'magnet',
'male',
'map-marker',
'map-o',
'map-pin',
'map-signs',
'map',
'mariadb',
'markdown',
'mars-double',
'mars-stroke-h',
'mars-stroke',
'mars-stroke-v',
'mars',
'mastodon-alt',
'mastodon-square',
'mastodon',
'matrix-org',
'maxcdn',
'meanpath',
'medium-square',
'medium',
'medkit',
'meetup',
'meh-o',
'mercury',
'microchip',
'microphone-slash',
'microphone',
'minus-circle',
'minus-square-o',
'minus-square',
'minus',
'mixcloud',
'mobile',
'modx',
'money',
'moon-o',
'moon',
'motorcycle',
'mouse-pointer',
'music',
'mysql',
'neuter',
'newspaper-o',
'nextcloud-square',
'nextcloud',
'nodejs',
'nordcast',
'object-group',
'object-ungroup',
'odnoklassniki-square',
'odnoklassniki',
'opencart',
'open-collective',
'openid',
'opera',
'optin-monster',
'orcid',
'outdent',
'pagelines',
'paint-brush',
'paperclip',
'paper-plane-o',
'paper-plane',
'paragraph',
'patreon',
'pause-circle-o',
'pause-circle',
'pause',
'paw',
'paypal',
'peertube',
'pencil-square-o',
'pencil-square',
'pencil',
'percent',
'phone-square',
'phone',
'php',
'picture-o',
'pie-chart',
'pinterest-p',
'pinterest-square',
'pinterest',
'pixelfed',
'plane',
'play-circle-o',
'play-circle',
'play',
'pleroma',
'plug',
'plume',
'plus-circle',
'plus-square-o',
'plus-square',
'plus',
'podcast',
'postgresql',
'power-off',
'print',
'product-hunt',
'puzzle-piece',
'python',
'qq',
'qrcode',
'question-circle-o',
'question-circle',
'question',
'quora',
'quote-left',
'quote-right',
'random',
'ravelry',
'react',
'rebel',
'recycle',
'reddit-alien',
'reddit-square',
'reddit',
'refresh',
'registered',
'renren',
'repeat',
'reply-all',
'reply',
'researchgate',
'retweet',
'road',
'rocket',
'rss-square',
'rss',
'rub',
'safari',
'sass-alt',
'sass',
'scissors',
'scribd',
'scuttlebutt',
'search-minus',
'search-plus',
'search',
'sellsy',
'server',
'shaarli-o',
'shaarli',
'share-alt-square',
'share-alt',
'share-square-o',
'share-square',
'share',
'shield',
'ship',
'shirtsinbulk',
'shopping-bag',
'shopping-basket',
'shopping-cart',
'shower',
'signalapp',
'signal',
'sign-in',
'sign-language',
'sign-out',
'simplybuilt',
'sitemap',
'skate',