})
16 | Buy me a coffee
17 |
15 |
19 |
20 |
21 | );
22 | };
23 |
24 | export default LandingPage;
25 |
--------------------------------------------------------------------------------
/src/transcription/french/parse-letters/parseP.ts:
--------------------------------------------------------------------------------
1 | import { ParseLetterProps, Phoneme } from '../../../constants/Interfaces';
2 | import IPA from '../../../constants/IPA';
3 | import transcribeFinalConsonant from '../parse-functions/transcribeFinalConsonant';
4 | import transcribeDoubleLetter from '../parse-functions/transcribeDoubleLetter';
5 | import transcribeLetter from '../parse-functions/transcribeLetter';
6 |
7 | const parseP = ({ nextletter, phoneme }: ParseLetterProps): Phoneme => {
8 | phoneme = transcribeLetter(phoneme, nextletter, 'p', IPA.P);
9 | phoneme = transcribeDoubleLetter(phoneme, nextletter);
10 | phoneme = transcribeFinalConsonant(phoneme, nextletter);
11 | return phoneme;
12 | };
13 |
14 | export default parseP;
15 |
--------------------------------------------------------------------------------
/src/components/landing-page/Hero.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import LanguageSelectionButtons from '../button-containers/LanguageSelectionButtons';
3 | import './Hero.scss';
4 |
5 | interface Props {}
6 |
7 | const Hero: React.FC
10 |
19 | );
20 | };
21 |
22 | export default Hero;
23 |
--------------------------------------------------------------------------------
/src/transcription/french/parse-functions/transcribeIntervocalic.ts:
--------------------------------------------------------------------------------
1 | import { Phoneme } from '../../../constants/Interfaces';
2 | import { isVowel } from '../../../util/Helper';
3 |
4 | const getRule = (letter: string, ipa: string): string => {
5 | return `Intervocalic '${letter}' consonants are transcribed as [${ipa}].`;
6 | };
7 |
8 | const transcribeIntervocalic = (
9 | phoneme: Phoneme,
10 | letters: string[],
11 | previousIPA: string,
12 | ipa: string
13 | ): Phoneme => {
14 | if (isVowel(previousIPA) && isVowel(letters[1])) {
15 | return {
16 | text: letters[0],
17 | ipa,
18 | rule: getRule(letters[0], ipa),
19 | };
20 | }
21 | return phoneme;
22 | };
23 |
24 | export default transcribeIntervocalic;
25 |
--------------------------------------------------------------------------------
/src/transcription/french/parse-functions/transcribeDoubleLetter.ts:
--------------------------------------------------------------------------------
1 | import { Phoneme } from '../../../constants/Interfaces';
2 |
3 | const getDoubleLetterRule = (letter: string, ipa: string): string => {
4 | return `Double '${letter +
5 | letter}' consonants are transcribed as a single [${ipa}].`;
6 | };
7 |
8 | const transcribeDoubleLetter = (
9 | phoneme: Phoneme,
10 | letters: string[],
11 | ipa?: string
12 | ): Phoneme => {
13 | if (letters[0] === letters[1]) {
14 | if (ipa === undefined) ipa = letters[0];
15 | return {
16 | text: letters[0] + letters[1],
17 | ipa,
18 | rule: getDoubleLetterRule(letters[0], ipa),
19 | };
20 | }
21 | return phoneme;
22 | };
23 |
24 | export default transcribeDoubleLetter;
25 |
--------------------------------------------------------------------------------
/src/transcription/french/parse-letters/parseD.ts:
--------------------------------------------------------------------------------
1 | import { ParseLetterProps, Phoneme } from '../../../constants/Interfaces';
2 | import IPA from '../../../constants/IPA';
3 | import transcribeFinalConsonant from '../parse-functions/transcribeFinalConsonant';
4 | import transcribeDefault from '../parse-functions/transcribeDefault';
5 | import transcribeDoubleLetter from '../parse-functions/transcribeDoubleLetter';
6 |
7 | const parseD = ({ nextletter, phoneme }: ParseLetterProps): Phoneme => {
8 | phoneme = transcribeDefault(nextletter, IPA.D);
9 | phoneme = transcribeDoubleLetter(phoneme, nextletter);
10 | phoneme = transcribeFinalConsonant(phoneme, nextletter);
11 |
12 | // --- Default ---
13 | return phoneme;
14 | };
15 |
16 | export default parseD;
17 |
--------------------------------------------------------------------------------
/src/transcription/french/parse-letters/parseL.ts:
--------------------------------------------------------------------------------
1 | import { ParseLetterProps, Phoneme } from '../../../constants/Interfaces';
2 | import IPA from '../../../constants/IPA';
3 | import transcribeFinalConsonant from '../parse-functions/transcribeFinalConsonant';
4 | import transcribeDefault from '../parse-functions/transcribeDefault';
5 | import transcribeDoubleLetter from '../parse-functions/transcribeDoubleLetter';
6 |
7 | const parseL = ({ nextletter, phoneme }: ParseLetterProps): Phoneme => {
8 | phoneme = transcribeDefault(nextletter, IPA.L);
9 | phoneme = transcribeDoubleLetter(phoneme, nextletter);
10 | phoneme = transcribeFinalConsonant(phoneme, nextletter);
11 |
12 | // --- Default ---
13 | return phoneme;
14 | };
15 |
16 | export default parseL;
17 |
--------------------------------------------------------------------------------
/src/transcription/french/parse-letters/parseM.ts:
--------------------------------------------------------------------------------
1 | import { ParseLetterProps, Phoneme } from '../../../constants/Interfaces';
2 | import IPA from '../../../constants/IPA';
3 | import transcribeFinalConsonant from '../parse-functions/transcribeFinalConsonant';
4 | import transcribeDefault from '../parse-functions/transcribeDefault';
5 | import transcribeDoubleLetter from '../parse-functions/transcribeDoubleLetter';
6 |
7 | const parseM = ({ nextletter, phoneme }: ParseLetterProps): Phoneme => {
8 | phoneme = transcribeDefault(nextletter, IPA.M);
9 | phoneme = transcribeDoubleLetter(phoneme, nextletter);
10 | phoneme = transcribeFinalConsonant(phoneme, nextletter);
11 |
12 | // --- Default ---
13 | return phoneme;
14 | };
15 |
16 | export default parseM;
17 |
--------------------------------------------------------------------------------
/src/transcription/french/parse-letters/parseN.ts:
--------------------------------------------------------------------------------
1 | import { ParseLetterProps, Phoneme } from '../../../constants/Interfaces';
2 | import IPA from '../../../constants/IPA';
3 | import transcribeFinalConsonant from '../parse-functions/transcribeFinalConsonant';
4 | import transcribeDefault from '../parse-functions/transcribeDefault';
5 | import transcribeDoubleLetter from '../parse-functions/transcribeDoubleLetter';
6 |
7 | const parseN = ({ nextletter, phoneme }: ParseLetterProps): Phoneme => {
8 | phoneme = transcribeDefault(nextletter, IPA.N);
9 | phoneme = transcribeDoubleLetter(phoneme, nextletter);
10 | phoneme = transcribeFinalConsonant(phoneme, nextletter);
11 |
12 | // --- Default ---
13 | return phoneme;
14 | };
15 |
16 | export default parseN;
17 |
--------------------------------------------------------------------------------
/src/transcription/french/parse-letters/parseV.ts:
--------------------------------------------------------------------------------
1 | import { ParseLetterProps, Phoneme } from '../../../constants/Interfaces';
2 | import IPA from '../../../constants/IPA';
3 | import transcribeFinalConsonant from '../parse-functions/transcribeFinalConsonant';
4 | import transcribeDefault from '../parse-functions/transcribeDefault';
5 | import transcribeDoubleLetter from '../parse-functions/transcribeDoubleLetter';
6 |
7 | const parseV = ({ nextletter, phoneme }: ParseLetterProps): Phoneme => {
8 | phoneme = transcribeDefault(nextletter, IPA.V);
9 | phoneme = transcribeDoubleLetter(phoneme, nextletter);
10 | phoneme = transcribeFinalConsonant(phoneme, nextletter);
11 |
12 | // --- Default ---
13 | return phoneme;
14 | };
15 |
16 | export default parseV;
17 |
--------------------------------------------------------------------------------
/src/transcription/french/parse-letters/parseZ.ts:
--------------------------------------------------------------------------------
1 | import { ParseLetterProps, Phoneme } from '../../../constants/Interfaces';
2 | import IPA from '../../../constants/IPA';
3 | import transcribeFinalConsonant from '../parse-functions/transcribeFinalConsonant';
4 | import transcribeDefault from '../parse-functions/transcribeDefault';
5 | import transcribeDoubleLetter from '../parse-functions/transcribeDoubleLetter';
6 |
7 | const parseZ = ({ nextletter, phoneme }: ParseLetterProps): Phoneme => {
8 | phoneme = transcribeDefault(nextletter, IPA.Z);
9 | phoneme = transcribeDoubleLetter(phoneme, nextletter);
10 | phoneme = transcribeFinalConsonant(phoneme, nextletter);
11 |
12 | // --- Default ---
13 | return phoneme;
14 | };
15 |
16 | export default parseZ;
17 |
--------------------------------------------------------------------------------
/src/transcription/french/parse-functions/transcribeFollowingBackVowel.ts:
--------------------------------------------------------------------------------
1 | import { Phoneme } from '../../../constants/Interfaces';
2 | import IPA from '../../../constants/IPA';
3 | import { isBackVowel } from '../../../util/Helper';
4 |
5 | const getRule = (letter: string, ipa: string): string => {
6 | return `'${letter}' consonants followed by a back vowel are transcribed as [${ipa}].`;
7 | };
8 |
9 | const transcribeFollowingBackVowel = (
10 | phoneme: Phoneme,
11 | letters: string[],
12 | ipa: IPA
13 | ): Phoneme => {
14 | if (isBackVowel(letters[1])) {
15 | return {
16 | text: letters[0],
17 | ipa,
18 | rule: getRule(letters[0], ipa),
19 | };
20 | }
21 | return phoneme;
22 | };
23 |
24 | export default transcribeFollowingBackVowel;
25 |
--------------------------------------------------------------------------------
/src/components/support-page/SupportCard.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './SupportCard.scss';
3 |
4 | interface Props {
5 | title: string;
6 | description: string;
7 | position: 'left' | 'right';
8 | }
9 |
10 | const SupportCard: React.FCOpen IPA
11 |12 | Free, informative IPA transcription for Lyric Diction 13 |
14 |15 | Get started with: 16 |
17 |
19 |
23 | );
24 | };
25 |
26 | export default SupportCard;
27 |
--------------------------------------------------------------------------------
/src/components/buttons/CheckboxButton.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import checkmark from '../../assets/checkmark.png';
3 | import './CheckboxButton.scss';
4 |
5 | interface Props {
6 | isChecked: boolean;
7 | setIsChecked: React.Dispatch{title}
20 |{description}
21 |{children}
22 |
11 |
16 | );
17 | };
18 |
19 | export default LanguageSelectionButtons;
20 |
--------------------------------------------------------------------------------
/src/transcription/french/parse-functions/transcribePrefix.ts:
--------------------------------------------------------------------------------
1 | import { Phoneme } from '../../../constants/Interfaces';
2 | import { isEndOfSentence } from '../../../util/Helper';
3 |
4 | const getRule = (text: string, ipa: string): string => {
5 | return `'${text}-' prefixes are transcribed as [${ipa}].`;
6 | };
7 |
8 | const transcribePrefix = (
9 | phoneme: Phoneme,
10 | letters: string[],
11 | prefix: string,
12 | previousIPA: string,
13 | ipa: string
14 | ): Phoneme => {
15 | let letterPrefix = '';
16 | for (let i = 0; i < prefix.length; i++) {
17 | letterPrefix += letters[i];
18 | }
19 | if (isEndOfSentence(previousIPA) && letterPrefix === prefix) {
20 | return {
21 | text: letterPrefix,
22 | ipa: ipa,
23 | rule: getRule(letterPrefix, ipa),
24 | };
25 | }
26 | return phoneme;
27 | };
28 |
29 | export default transcribePrefix;
30 |
--------------------------------------------------------------------------------
/src/components/SupportPage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import LeftCard from './support-page/LeftCard';
3 | import RightCard from './support-page/RightCard';
4 | import './SupportPage.scss';
5 |
6 | interface Props {}
7 |
8 | const SupportPage: React.FC
12 |
25 |
26 | );
27 | };
28 |
29 | export default SupportPage;
30 |
--------------------------------------------------------------------------------
/src/transcription/french/parse-letters/parseS.ts:
--------------------------------------------------------------------------------
1 | import { ParseLetterProps, Phoneme } from '../../../constants/Interfaces';
2 | import IPA from '../../../constants/IPA';
3 | import transcribeDoubleLetter from '../parse-functions/transcribeDoubleLetter';
4 | import transcribeFinalConsonant from '../parse-functions/transcribeFinalConsonant';
5 | import transcribeDefault from '../parse-functions/transcribeDefault';
6 | import transcribeIntervocalic from '../parse-functions/transcribeIntervocalic';
7 |
8 | const parseS = ({
9 | nextletter,
10 | previousIPA,
11 | phoneme,
12 | }: ParseLetterProps): Phoneme => {
13 | phoneme = transcribeDefault(nextletter, IPA.S);
14 | phoneme = transcribeDoubleLetter(phoneme, nextletter);
15 | phoneme = transcribeFinalConsonant(phoneme, nextletter);
16 | phoneme = transcribeIntervocalic(phoneme, nextletter, previousIPA, IPA.Z);
17 |
18 | return phoneme;
19 | };
20 |
21 | export default parseS;
22 |
--------------------------------------------------------------------------------
/src/styles/reset.scss:
--------------------------------------------------------------------------------
1 | /****** Elad Shechter's RESET *******/
2 | /*** box sizing border-box for all elements ***/
3 | *,
4 | *::before,
5 | *::after {
6 | box-sizing: border-box;
7 | }
8 | a {
9 | text-decoration: none;
10 | color: inherit;
11 | cursor: pointer;
12 | }
13 | button {
14 | background-color: transparent;
15 | color: inherit;
16 | border-width: 0;
17 | padding: 0;
18 | cursor: pointer;
19 | }
20 | figure {
21 | margin: 0;
22 | }
23 | input::-moz-focus-inner {
24 | border: 0;
25 | padding: 0;
26 | margin: 0;
27 | }
28 | ul,
29 | ol,
30 | dd {
31 | margin: 0;
32 | padding: 0;
33 | list-style: none;
34 | }
35 | h1,
36 | h2,
37 | h3,
38 | h4,
39 | h5,
40 | h6 {
41 | margin: 0;
42 | font-size: inherit;
43 | font-weight: inherit;
44 | }
45 | p {
46 | margin: 0;
47 | }
48 | cite {
49 | font-style: normal;
50 | }
51 | fieldset {
52 | border-width: 0;
53 | padding: 0;
54 | margin: 0;
55 | }
56 |
--------------------------------------------------------------------------------
/src/components/buttons/LanguageSelectButton.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Languages } from '../../constants/Interfaces';
3 | import { Link } from 'react-router-dom';
4 | import './LanguageSelectButton.scss';
5 | import { capitalizeFirstLetter } from '../../util/StringHelper';
6 |
7 | interface Props {
8 | language: Languages;
9 | status: 'active' | 'caution' | 'inactive';
10 | }
11 |
12 | const LanguageSelectButton: React.FC
13 |
20 | 14 | Want to support Open IPA? 15 |
16 |17 | There are two ways to do it: 18 |
19 |
21 |
24 | {capitalizeFirstLetter(language)}
;
23 | };
24 |
25 | export default LanguageSelectButton;
26 |
--------------------------------------------------------------------------------
/src/util/CopyResult.ts:
--------------------------------------------------------------------------------
1 | import { Result } from '../constants/Interfaces';
2 |
3 | const copyResult = (result: Result) => {
4 | let textToCopy = ``;
5 | result.lines.forEach(line => {
6 | let textLine = '';
7 | let ipaLine = '';
8 | line.words.forEach(word => {
9 | word.syllables.forEach(syllable => {
10 | if (syllable.text !== '\n') {
11 | textLine += syllable.text;
12 | ipaLine += syllable.ipa;
13 | }
14 | });
15 | });
16 | textToCopy += textLine + '\n';
17 | textToCopy += ipaLine + '\n';
18 | });
19 | if (!navigator.clipboard) {
20 | const textArea = document.createElement('textarea');
21 | textArea.value = textToCopy;
22 | document.body.appendChild(textArea);
23 | textArea.select();
24 | document.execCommand('copy');
25 | document.body.removeChild(textArea);
26 | } else {
27 | navigator.clipboard.writeText(textToCopy);
28 | }
29 | };
30 |
31 | export default copyResult;
32 |
--------------------------------------------------------------------------------
/src/transcription/french/parse-functions/transcribeLetter.ts:
--------------------------------------------------------------------------------
1 | import { Phoneme } from '../../../constants/Interfaces';
2 |
3 | const getRule = (text: string, ipa: string): string => {
4 | return `'${text}' letters are transcribed as [${ipa}].`;
5 | };
6 |
7 | const getRuleSilent = (text: string): string => {
8 | return `'${text}' letters are silent, so they are not transcribed.`;
9 | };
10 |
11 | const transcribeLetter = (
12 | phoneme: Phoneme,
13 | letters: string[],
14 | letter: string,
15 | ipa: string
16 | ): Phoneme => {
17 | if (ipa === '') {
18 | if (letters[0] === letter) {
19 | return {
20 | text: letters[0],
21 | ipa: ipa,
22 | rule: getRuleSilent(letters[0]),
23 | };
24 | }
25 | }
26 | if (letters[0] === letter) {
27 | return {
28 | text: letters[0],
29 | ipa: ipa,
30 | rule: getRule(letters[0], ipa),
31 | };
32 | }
33 | return phoneme;
34 | };
35 |
36 | export default transcribeLetter;
37 |
--------------------------------------------------------------------------------
/src/transcription/french/parse-functions/transcribeSuffix.ts:
--------------------------------------------------------------------------------
1 | import { Phoneme } from '../../../constants/Interfaces';
2 | import { isEndOfSentence } from '../../../util/Helper';
3 |
4 | const getRule = (text: string, ipa: string): string => {
5 | return `Final '-${text}' letter groups are transcribed as [${ipa}].`;
6 | };
7 |
8 | const transcribeSuffix = (
9 | phoneme: Phoneme,
10 | letters: string[],
11 | suffixes: string[],
12 | ipa: string,
13 | text?: string
14 | ): Phoneme => {
15 | suffixes.forEach(suffix => {
16 | let letterSuffix = '';
17 | for (let i = 0; i < suffix.length; i++) {
18 | letterSuffix += letters[i];
19 | }
20 | if (letterSuffix === suffix && isEndOfSentence(letters[suffix.length])) {
21 | if (text === undefined) text = suffix;
22 | phoneme = {
23 | text,
24 | ipa: ipa,
25 | rule: getRule(letterSuffix, ipa),
26 | };
27 | }
28 | });
29 | return phoneme;
30 | };
31 |
32 | export default transcribeSuffix;
33 |
--------------------------------------------------------------------------------
/src/transcription/french/parse-letters/parseX.ts:
--------------------------------------------------------------------------------
1 | import { ParseLetterProps, Phoneme } from '../../../constants/Interfaces';
2 | import IPA from '../../../constants/IPA';
3 | import transcribeDefault from '../parse-functions/transcribeDefault';
4 | import transcribeFollowingVowel from '../parse-functions/transcribeFollowingVowel';
5 | import transcribeFollowingLetter from '../parse-functions/transcribeFollowingLetter';
6 | import transcribeFollowingConsonant from '../parse-functions/transcribeFollowingConsonant';
7 |
8 | const parseX = ({ nextletter, phoneme }: ParseLetterProps): Phoneme => {
9 | phoneme = transcribeDefault(nextletter, IPA.K + IPA.S);
10 | phoneme = transcribeFollowingConsonant(phoneme, nextletter, IPA.K + IPA.S);
11 | phoneme = transcribeFollowingVowel(phoneme, nextletter, IPA.G + IPA.Z);
12 | phoneme = transcribeFollowingLetter(
13 | phoneme,
14 | nextletter,
15 | ['h'],
16 | IPA.G + IPA.Z
17 | );
18 |
19 | return phoneme;
20 | };
21 |
22 | export default parseX;
23 |
--------------------------------------------------------------------------------
/src/constants/IPA.ts:
--------------------------------------------------------------------------------
1 | enum IPA {
2 | CLOSED_I = 'i',
3 | OPEN_I = 'I',
4 | CLOSED_E = 'e',
5 | OPEN_E = 'ɛ',
6 | NASAL_E = 'ɛ̃',
7 | CLOSED_U = 'u',
8 | OPEN_U = 'ʊ',
9 | CLOSED_O = 'o',
10 | NASAL_O = 'õ',
11 | OPEN_O = 'ɔ',
12 | BRIGHT_A = 'a',
13 | DARK_A = 'ɑ',
14 | NASAL_A = 'ɑ̃',
15 | OPEN_Y = 'Y',
16 | CLOSED_Y = 'y',
17 | CLOSED_MIXED_O = 'ø',
18 | OPEN_MIXED_O = 'œ',
19 | NASAL_MIXED_O = 'œ̃',
20 | J_GLIDE = 'j',
21 | Y_GLIDE = 'ɥ',
22 | W_GLIDE = 'w',
23 | FLIPPED_R = 'ɾ',
24 | ROLLED_R = 'r',
25 | SCHWA = 'ə',
26 | R_SCHWA = 'ʁ',
27 | ICH_LAUT = 'ç',
28 | ACH_LAUT = 'x',
29 | K = 'k',
30 | G = 'g',
31 | T = 't',
32 | D = 'd',
33 | Z = 'z',
34 | F = 'f',
35 | P = 'p',
36 | S = 's',
37 | L = 'l',
38 | B = 'b',
39 | GLI = 'ʎ',
40 | V = 'v',
41 | M = 'm',
42 | N = 'n',
43 | FRICATIVE_C = 'ʃ',
44 | FRICATIVE_G = 'ʒ',
45 | BACK_SWOOP_N = 'ɲ',
46 | FRONT_SWOOP_N = 'ŋ',
47 | UNDERTIE = '‿',
48 | }
49 |
50 | export default IPA;
51 |
--------------------------------------------------------------------------------
/src/transcription/french/parse-letters/parseB.ts:
--------------------------------------------------------------------------------
1 | import { ParseLetterProps, Phoneme } from '../../../constants/Interfaces';
2 | import IPA from '../../../constants/IPA';
3 | import transcribeFollowingLetter from '../parse-functions/transcribeFollowingLetter';
4 | import transcribeDoubleLetter from '../parse-functions/transcribeDoubleLetter';
5 | import transcribeFinalConsonant from '../parse-functions/transcribeFinalConsonant';
6 | import transcribeDefault from '../parse-functions/transcribeDefault';
7 |
8 | const parseB = ({ nextletter, phoneme }: ParseLetterProps): Phoneme => {
9 | phoneme = transcribeDefault(nextletter, IPA.B);
10 | phoneme = transcribeDoubleLetter(phoneme, nextletter);
11 | phoneme = transcribeFinalConsonant(phoneme, nextletter);
12 |
13 | // --- bst ---
14 | phoneme = transcribeFollowingLetter(
15 | phoneme,
16 | nextletter,
17 | ['t', 's'],
18 | IPA.P,
19 | 'b'
20 | );
21 | console.log(phoneme);
22 |
23 | return phoneme;
24 | };
25 |
26 | export default parseB;
27 |
--------------------------------------------------------------------------------
/src/components/landing-page/Hero.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/colors';
2 | @import '../../styles/variables';
3 |
4 | .ipa__landing-page__hero {
5 | background: linear-gradient(
6 | to left bottom,
7 | $darkgray-gradient,
8 | $lightgray-gradient
9 | );
10 |
11 | padding-top: 70px + $navbar-height;
12 | padding-bottom: 90px;
13 |
14 | @extend %side-padding;
15 | }
16 |
17 | .ipa__landing-page__hero__title {
18 | color: $primary;
19 | text-align: center;
20 | font-size: 72px;
21 | font-weight: 700;
22 | @media screen and (max-width: 800px) {
23 | font-size: 60px;
24 | }
25 | transition: all 0.3s ease-in-out;
26 | }
27 |
28 | .ipa__landing-page__hero__subtitle {
29 | margin-top: 5px;
30 |
31 | color: $offwhite;
32 | text-align: center;
33 | font-size: 24px;
34 | font-weight: 200;
35 | }
36 |
37 | .ipa__landing-page__hero__call-to-action {
38 | margin-top: 60px;
39 |
40 | color: $offwhite;
41 | text-align: center;
42 | font-size: 24px;
43 | font-weight: 300;
44 | }
45 |
--------------------------------------------------------------------------------
/src/constants/Letters.ts:
--------------------------------------------------------------------------------
1 | import IPA from './IPA';
2 |
3 | const Letters = {
4 | vowels: [
5 | 'a',
6 | 'à',
7 | 'â',
8 | 'e',
9 | 'é',
10 | 'è',
11 | 'ê',
12 | 'ë',
13 | 'i',
14 | 'î',
15 | 'ï',
16 | 'o',
17 | 'ô',
18 | 'u',
19 | 'û',
20 | 'y',
21 | 'œ',
22 | 'æ',
23 | IPA.CLOSED_MIXED_O,
24 | IPA.OPEN_MIXED_O,
25 | IPA.OPEN_Y,
26 | IPA.OPEN_E,
27 | ],
28 | consonants: [
29 | 'q',
30 | 'w',
31 | 'r',
32 | IPA.FRICATIVE_C,
33 | IPA.FRICATIVE_G,
34 | IPA.FLIPPED_R,
35 | IPA.J_GLIDE,
36 | IPA.W_GLIDE,
37 | IPA.Y_GLIDE,
38 | 't',
39 | 'p',
40 | 's',
41 | 'd',
42 | 'f',
43 | 'g',
44 | 'h',
45 | 'j',
46 | 'k',
47 | 'l',
48 | 'z',
49 | 'x',
50 | 'c',
51 | 'v',
52 | 'b',
53 | 'n',
54 | 'm',
55 | ],
56 | middlepunctuation: ["'", '(', ')', '’'],
57 | endingpunctuation: ['.', ';', '!', '?', ',', '-'],
58 | };
59 |
60 | export default Letters;
61 |
--------------------------------------------------------------------------------
/src/components/input/TextInput.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/colors';
2 |
3 | .ipa__text-input--light {
4 | -webkit-appearance: none;
5 | border: none;
6 | overflow: auto;
7 | outline: none;
8 | resize: none;
9 | height: 320px;
10 | width: 100%;
11 | padding: 20px;
12 | border: none;
13 | border-radius: 10px;
14 | box-shadow: 0px 5px 10px 3px rgba(0, 0, 0, 0.2);
15 | font-size: 20px;
16 | font-family: 'Roboto', Arial, Helvetica, sans-serif;
17 | resize: none;
18 |
19 | background: $white;
20 | color: $darkgray;
21 | }
22 |
23 | .ipa__text-input--dark {
24 | -webkit-appearance: none;
25 | border: none;
26 | overflow: auto;
27 | outline: none;
28 | resize: none;
29 | height: 320px;
30 | width: 100%;
31 | padding: 20px;
32 | border: none;
33 | border-radius: 10px;
34 | box-shadow: 0px 5px 10px 3px rgba(0, 0, 0, 0.2);
35 | font-size: 20px;
36 | font-family: 'Roboto', Arial, Helvetica, sans-serif;
37 | resize: none;
38 | overflow: hidden;
39 |
40 | background: $darkgray;
41 | color: $white;
42 | }
43 |
--------------------------------------------------------------------------------
/src/components/TranscriptionPage.scss:
--------------------------------------------------------------------------------
1 | @import '../styles/colors';
2 | @import '../styles/variables';
3 |
4 | .ipa__transcription__container {
5 | padding-top: $navbar-height;
6 |
7 | background: $gray;
8 | min-height: 100vh;
9 |
10 | display: flex;
11 | flex-direction: column;
12 | overflow: hidden;
13 |
14 | padding-top: 20px + $navbar-height;
15 | padding-bottom: 20px;
16 |
17 | @media screen and (min-width: 1000px) {
18 | padding-top: 60px + $navbar-height;
19 | padding-bottom: 80px;
20 | }
21 | @media screen and (max-width: 1000px) {
22 | padding-top: 40px + $navbar-height;
23 | padding-bottom: 60px;
24 | }
25 | @media screen and (max-width: 800px) {
26 | padding-top: 20px + $navbar-height;
27 | padding-bottom: 40px;
28 | }
29 | @media screen and (max-width: 600px) {
30 | padding-top: 20px + $navbar-height;
31 | padding-bottom: 20px;
32 | }
33 |
34 | transition: padding-top, padding-bottom, padding-right,
35 | padding-left 0.3s ease-in-out;
36 |
37 | @extend %side-padding;
38 | }
39 |
--------------------------------------------------------------------------------
/src/transcription/french/parse-letters/parseY.ts:
--------------------------------------------------------------------------------
1 | import { ParseLetterProps, Phoneme } from '../../../constants/Interfaces';
2 | import IPA from '../../../constants/IPA';
3 | import { isConsonant, isEndOfSentence, isVowel } from '../../../util/Helper';
4 | import { isNasalCanceling } from '../FrenchHelper';
5 | import Rules from '../FrenchRules';
6 |
7 | const parseY = ({ nextletter, phoneme }: ParseLetterProps): Phoneme => {
8 | // yn and ym nasal
9 | if (
10 | (nextletter[1] === 'm' || nextletter[1] === 'n') &&
11 | ((isConsonant(nextletter[2]) && !isNasalCanceling(nextletter[2])) ||
12 | isEndOfSentence(nextletter[2]))
13 | ) {
14 | phoneme = {
15 | text: 'y' + nextletter[1],
16 | ipa: IPA.NASAL_E,
17 | rule: Rules.NASAL_IY,
18 | };
19 | } else if (isVowel(nextletter[1])) {
20 | phoneme = {
21 | text: 'y',
22 | ipa: IPA.J_GLIDE,
23 | rule: Rules.IY_VOWEL,
24 | };
25 | } else {
26 | phoneme = {
27 | text: 'y',
28 | ipa: IPA.CLOSED_I,
29 | rule: Rules.SINGLE_I_OR_Y,
30 | };
31 | }
32 |
33 | // --- Default ---
34 | return phoneme;
35 | };
36 |
37 | export default parseY;
38 |
--------------------------------------------------------------------------------
/src/transcription/french/parse-letters/parseF.ts:
--------------------------------------------------------------------------------
1 | import { ParseLetterProps, Phoneme } from '../../../constants/Interfaces';
2 | import IPA from '../../../constants/IPA';
3 | import transcribeFinalConsonant from '../parse-functions/transcribeFinalConsonant';
4 | import transcribeDefault from '../parse-functions/transcribeDefault';
5 | import { isVowel } from '../../../util/Helper';
6 | import Rules from '../FrenchRules';
7 | import transcribeDoubleLetter from '../parse-functions/transcribeDoubleLetter';
8 |
9 | const parseF = ({ nextletter, phoneme }: ParseLetterProps): Phoneme => {
10 | phoneme = transcribeDefault(nextletter, IPA.F);
11 | phoneme = transcribeDoubleLetter(phoneme, nextletter);
12 | phoneme = transcribeFinalConsonant(phoneme, nextletter);
13 |
14 | // --- 'fais' + vowel ---
15 | if (
16 | nextletter[1] === 'a' &&
17 | nextletter[2] === 'i' &&
18 | nextletter[3] === 's' &&
19 | isVowel(nextletter[4])
20 | ) {
21 | phoneme = {
22 | text: 'fais',
23 | ipa: IPA.F + IPA.SCHWA + IPA.Z,
24 | rule: Rules.FAIS_VOWEL,
25 | };
26 | }
27 |
28 | // --- Default ---
29 | return phoneme;
30 | };
31 |
32 | export default parseF;
33 |
--------------------------------------------------------------------------------
/src/transcription/french/parse-letters/parseT.ts:
--------------------------------------------------------------------------------
1 | import { ParseLetterProps, Phoneme } from '../../../constants/Interfaces';
2 | import IPA from '../../../constants/IPA';
3 | import transcribeSuffix from '../parse-functions/transcribeSuffix';
4 | import transcribeFollowingLetter from '../parse-functions/transcribeFollowingLetter';
5 | import transcribeDoubleLetter from '../parse-functions/transcribeDoubleLetter';
6 | import transcribeFinalConsonant from '../parse-functions/transcribeFinalConsonant';
7 | import transcribeDefault from '../parse-functions/transcribeDefault';
8 |
9 | const parseT = ({ nextletter, phoneme }: ParseLetterProps): Phoneme => {
10 | phoneme = transcribeDefault(nextletter, IPA.T);
11 | phoneme = transcribeDoubleLetter(phoneme, nextletter);
12 | phoneme = transcribeFinalConsonant(phoneme, nextletter);
13 |
14 | // --- th ---
15 | phoneme = transcribeFollowingLetter(phoneme, nextletter, ['h'], IPA.T);
16 |
17 | // --- t + ion/iel/ieux ---
18 | phoneme = transcribeSuffix(
19 | phoneme,
20 | nextletter,
21 | ['tion', 'tiel', 'tieux'],
22 | IPA.S,
23 | 't'
24 | );
25 |
26 | return phoneme;
27 | };
28 |
29 | export default parseT;
30 |
--------------------------------------------------------------------------------
/src/transcription/german/ParseGerman.ts:
--------------------------------------------------------------------------------
1 | import { getCharArray, isConsonant } from '../../util/Helper';
2 | import IPA from '../../constants/IPA';
3 |
4 | const ParseGerman = (text: string) => {
5 | const charArray = getCharArray(text);
6 | let parsedIPA = '';
7 | const firstLetter = charArray[0];
8 | const lastLetter = charArray[charArray.length - 1];
9 | for (let index = 0; index < charArray.length; index += 1) {
10 | const letter = charArray[index];
11 | let ipaToAdd = letter;
12 |
13 | let previousLetter = '';
14 | if (index > 0) {
15 | previousLetter = charArray[index - 1];
16 | }
17 |
18 | let nextLetter = '';
19 | if (index < charArray.length - 1) {
20 | nextLetter = charArray[index + 1];
21 | }
22 |
23 | let nextlettersecond = '';
24 | if (index < charArray.length - 2) {
25 | nextlettersecond = charArray[index + 2];
26 | }
27 |
28 | switch (letter) {
29 | case 'e':
30 | if (isConsonant(nextLetter) && isConsonant(nextlettersecond)) {
31 | ipaToAdd = IPA.OPEN_E;
32 | } else {
33 | ipaToAdd = IPA.CLOSED_E;
34 | }
35 | }
36 |
37 | parsedIPA += ipaToAdd;
38 | }
39 | return parsedIPA;
40 | };
41 |
42 | export default ParseGerman;
43 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "openipa",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@types/jest": "24.0.23",
7 | "@types/jspdf": "^1.3.3",
8 | "@types/node": "12.12.11",
9 | "@types/react": "16.9.11",
10 | "@types/react-dom": "16.9.4",
11 | "@types/react-router-dom": "^5.1.3",
12 | "@typescript-eslint/eslint-plugin": "^2.8.0",
13 | "jspdf": "^1.5.3",
14 | "node-sass": "^4.13.1",
15 | "normalize.css": "^8.0.1",
16 | "react": "^16.12.0",
17 | "react-dom": "^16.12.0",
18 | "react-ga": "^2.7.0",
19 | "react-router-dom": "^5.1.2",
20 | "react-scripts": "^3.4.0",
21 | "react-spinners": "^0.6.1",
22 | "react-spring": "^8.0.27",
23 | "typescript": "3.7.2"
24 | },
25 | "scripts": {
26 | "start": "react-scripts start",
27 | "build": "react-scripts build",
28 | "test": "react-scripts test",
29 | "eject": "react-scripts eject"
30 | },
31 | "eslintConfig": {
32 | "extends": "react-app"
33 | },
34 | "browserslist": {
35 | "production": [
36 | ">0.2%",
37 | "not dead",
38 | "not op_mini all"
39 | ],
40 | "development": [
41 | "last 1 chrome version",
42 | "last 1 firefox version",
43 | "last 1 safari version"
44 | ]
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/components/transcription-page/TranscriptionEditor.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/colors';
2 | @import '../../styles/variables';
3 |
4 | .ipa__transcription__input-container-top {
5 | display: flex;
6 | align-items: center;
7 | justify-content: space-between;
8 |
9 | margin-bottom: 0px;
10 | @media screen and (max-width: 800px) {
11 | margin-bottom: 2px;
12 | }
13 | }
14 |
15 | .ipa__transcription__input-title {
16 | color: $offwhite;
17 | font-size: 24px;
18 | font-weight: 200;
19 |
20 | margin-bottom: 5px;
21 | }
22 |
23 | .ipa__transcription__input-hide-button:hover {
24 | transform: scale(1.025);
25 | box-shadow: 0px 5px 10px 3px rgba(0, 0, 0, 0.3);
26 | }
27 |
28 | .ipa__transcription__input-container {
29 | margin-top: 25px;
30 | display: flex;
31 |
32 | @extend %flex-direction;
33 | }
34 |
35 | .ipa__transcription__input-container-left {
36 | flex: 2;
37 |
38 | margin-right: 10px;
39 | margin-bottom: 0px;
40 | @media screen and (max-width: 800px) {
41 | margin-right: 0;
42 | margin-bottom: 10px;
43 | }
44 | }
45 |
46 | .ipa__transcription__input-container-right {
47 | flex: 3;
48 |
49 | margin-left: 10px;
50 | margin-top: 0;
51 | @media screen and (max-width: 800px) {
52 | margin-left: 0;
53 | margin-top: 10px;
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/src/components/landing-page/Description.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/colors';
2 | @import '../../styles/variables';
3 |
4 | .ipa__landing-page__description {
5 | display: flex;
6 | flex-direction: column;
7 | padding-top: 80px;
8 | padding-bottom: 80px;
9 |
10 | @extend %side-padding;
11 | }
12 |
13 | .ipa__landing-page__description__overview-container {
14 | display: flex;
15 | align-items: flex-start;
16 | justify-content: center;
17 |
18 | margin-top: 0px;
19 | margin-bottom: 0px;
20 | @media screen and (max-width: 1000px) {
21 | margin-top: -20px;
22 | margin-bottom: -20px;
23 | }
24 | @media screen and (max-width: 800px) {
25 | margin-top: -40px;
26 | margin-bottom: -40px;
27 | }
28 | @media screen and (max-width: 600px) {
29 | margin-top: -50px;
30 | margin-bottom: -50px;
31 | }
32 |
33 | @extend %flex-direction;
34 | }
35 |
36 | .ipa__landing-page__description__overview-content {
37 | flex: 1;
38 | }
39 |
40 | .ipa__landing-page__description__overview-title {
41 | color: $darkgray;
42 | font-size: 30px;
43 | font-weight: 500;
44 | }
45 |
46 | .ipa__landing-page__description__overview-paragraph {
47 | margin-top: 20px;
48 |
49 | color: black;
50 | font-size: 17px;
51 | font-weight: 300;
52 | word-spacing: 3px;
53 | line-height: 25px;
54 | }
55 |
--------------------------------------------------------------------------------
/src/components/SupportPage.scss:
--------------------------------------------------------------------------------
1 | @import '../styles/colors';
2 | @import '../styles/variables';
3 |
4 | .ipa__support__container {
5 | padding-top: $navbar-height;
6 | background: $darkgray;
7 | min-height: 100vh;
8 | @extend %side-padding, %bottom-padding;
9 | }
10 |
11 | .ipa__support__hero-container {
12 | margin-top: 40px;
13 | display: flex;
14 | flex-direction: column;
15 | align-items: center;
16 | justify-content: center;
17 | margin-bottom: 60px;
18 | @media screen and (max-width: 800px) {
19 | margin-bottom: 20px;
20 | }
21 | transition: all 0.3s ease-in-out;
22 | }
23 |
24 | .ipa__support__hero-title {
25 | color: $primary;
26 | text-align: center;
27 | font-size: 48px;
28 | font-weight: 700;
29 | @media screen and (max-width: 800px) {
30 | font-size: 36px;
31 | }
32 | transition: all 0.3s ease-in-out;
33 | }
34 |
35 | .ipa__support__hero-subtitle {
36 | margin-top: 5px;
37 |
38 | color: $offwhite;
39 | text-align: center;
40 | font-size: 24px;
41 | font-weight: 200;
42 | @media screen and (max-width: 800px) {
43 | font-size: 20px;
44 | }
45 | }
46 |
47 | .ipa__support__card-container {
48 | display: flex;
49 | width: 100%;
50 | height: auto;
51 | align-items: center;
52 | justify-content: space-between;
53 | @media screen and (max-width: 1000px) {
54 | flex-direction: column;
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/src/transcription/french/parse-functions/transcribeFinalConsonant.ts:
--------------------------------------------------------------------------------
1 | import { Phoneme } from '../../../constants/Interfaces';
2 | import { isEndOfSentence } from '../../../util/Helper';
3 | import {
4 | areNoMorePronouncedConsonants,
5 | isPronouncedConsonant,
6 | } from '../FrenchHelper';
7 |
8 | const getRulePronounced = (letter: string, ipa: string): string => {
9 | return `Final 'c', 'r', 'f', and 'l' consonants are pronounced. '${letter}' consonants are transcribed as [${ipa}].`;
10 | };
11 | const getRuleSilent = (letter: string): string => {
12 | return `Final '${letter}' consonants are silent.`;
13 | };
14 |
15 | const transcribeFinalConsonant = (
16 | phoneme: Phoneme,
17 | letters: string[],
18 | ipa?: string
19 | ): Phoneme => {
20 | if (
21 | isPronouncedConsonant(letters[0], isEndOfSentence(letters[1])) &&
22 | isEndOfSentence(letters[1])
23 | ) {
24 | if (ipa === undefined) ipa = letters[0];
25 | return {
26 | text: letters[0],
27 | ipa,
28 | rule: getRulePronounced(letters[0], ipa),
29 | };
30 | } else if (
31 | isEndOfSentence(letters[1]) ||
32 | areNoMorePronouncedConsonants(letters, 0)
33 | ) {
34 | return {
35 | text: letters[0],
36 | ipa: '',
37 | rule: getRuleSilent(letters[0]),
38 | };
39 | }
40 | return phoneme;
41 | };
42 |
43 | export default transcribeFinalConsonant;
44 |
--------------------------------------------------------------------------------
/src/transcription/french/parse-letters/parseG.ts:
--------------------------------------------------------------------------------
1 | import { ParseLetterProps, Phoneme } from '../../../constants/Interfaces';
2 | import IPA from '../../../constants/IPA';
3 | import transcribeDoubleLetter from '../parse-functions/transcribeDoubleLetter';
4 | import transcribeFollowingBackVowel from '../parse-functions/transcribeFollowingBackVowel';
5 | import transcribeFollowingFrontVowel from '../parse-functions/transcribeFollowingFrontVowel';
6 | import transcribeFinalConsonant from '../parse-functions/transcribeFinalConsonant';
7 | import transcribeFollowingLetter from '../parse-functions/transcribeFollowingLetter';
8 | import transcribeDefault from '../parse-functions/transcribeDefault';
9 |
10 | const parseG = ({ phoneme, nextletter }: ParseLetterProps): Phoneme => {
11 | phoneme = transcribeDefault(nextletter, IPA.G);
12 | phoneme = transcribeDoubleLetter(phoneme, nextletter);
13 | phoneme = transcribeFollowingFrontVowel(phoneme, nextletter, IPA.FRICATIVE_G);
14 | phoneme = transcribeFollowingBackVowel(phoneme, nextletter, IPA.G);
15 | phoneme = transcribeFinalConsonant(phoneme, nextletter);
16 |
17 | // --- 'gn' ---
18 | phoneme = transcribeFollowingLetter(
19 | phoneme,
20 | nextletter,
21 | ['n'],
22 | IPA.BACK_SWOOP_N
23 | );
24 |
25 | // --- 'gu' ---
26 | phoneme = transcribeFollowingLetter(phoneme, nextletter, ['u'], IPA.G);
27 |
28 | return phoneme;
29 | };
30 |
31 | export default parseG;
32 |
--------------------------------------------------------------------------------
/src/components/transcription-page/ExportButtons.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import ExportButton from '../buttons/ExportButton';
3 | import { Result, Languages } from '../../constants/Interfaces';
4 | import createPDFFromResult from '../../util/CreatePDF';
5 | import copyResult from '../../util/CopyResult';
6 | import './ExportButtons.scss';
7 |
8 | interface Props {
9 | language: string;
10 | result: Result;
11 | }
12 |
13 | const ExportButtons: React.FC
29 | createPDF()}
32 | isLoading={!isPDFCreated}
33 | >
34 |
35 | copyResult(result)}
38 | >
39 |
40 | );
41 | };
42 |
43 | export default ExportButtons;
44 |
--------------------------------------------------------------------------------
/src/components/header/Navbar.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useCallback } from 'react';
2 | import logo from '../../assets/logo.png';
3 | import './Navbar.scss';
4 | import { NavLink } from 'react-router-dom';
5 |
6 | interface Props {
7 | location: string;
8 | }
9 |
10 | const Navbar: React.FC setNavbarRef(div ? div : navbarRef)}
28 | >
29 |
30 | 
31 |
33 |
42 | );
43 | };
44 |
45 | export default Navbar;
46 |
--------------------------------------------------------------------------------
/src/components/support-page/RightCard.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import SupportCard from './SupportCard';
3 | import CoffeeButton from '../buttons/CoffeeButton';
4 | import questionmark from '../../assets/question-mark-white.png';
5 |
6 | interface Props {}
7 |
8 | const RightCard: React.FCOpen IPA
32 |
34 |
38 | Support
39 |
40 |
41 |
26 | 
31 | Coming Soon!
32 |
33 |