www/index.html

<!DOCTYPE html>
<html>
    <head>
        <link
            rel='apple-touch-icon'
            sizes='180x180'
            href='/favicon/apple-touch-icon.png'
        />
        <link
            rel='icon'
            type='image/png'
            sizes='32x32'
            href='/favicon/favicon-32x32.png'
        />
        <link
            rel='icon'
            type='image/png'
            sizes='16x16'
            href='/favicon/favicon-16x16.png'
        />
        <link
            rel='mask-icon'
            href='/favicon/safari-pinned-tab.svg'
            color='#000000'
        />
        <link rel='shortcut icon' href='/favicon/favicon.ico' />

        <title>Spoken Sounds Highlighter</title>
        <meta name='description' content="Highlights English sounds in the provided text" />
        <meta name='keywords' content="english, sounds, highlighter, rust, wasm, webassembly, grammar, teaching, learning" />
        <meta name='author' content="Roman Ponomarev" />
        <meta name='robots' content='follow, index' />
        <link rel='canonical' href="https://spokensoundshighlighter.com" />
        <link rel='manifest' href='/site.webmanifest' />

        <meta name='msapplication-config' content='browserconfig.xml' />
        <meta name='msapplication-TileColor' content='#ffffff' />
        <meta name='theme-color' content='#ffffff' />

        <meta property='og:title' content="Spoken Sounds Highlighter" />
        <meta property='og:description' content="Highlights English sounds in the provided text" />
        <meta property='og:image' content="https://spokensoundshighlighter.com/og/image.png" />
        <meta property='og:url' content="https://spokensoundshighlighter.com" />
        <meta property='og:site_name' content="spokensoundshighlighter.com" />
        <meta property='og:type' content="website" />

        <meta property='twitter:title' content="Spoken Sounds Highlighter" />
        <meta property='twitter:description' content="Highlights English sounds in the provided text" />
        <meta
            property='twitter:image'
            content="https://spokensoundshighlighter.com/og/image.png"
        />
        <meta
            property='twitter:url'
            content="https://spokensoundshighlighter.com"
        />
        <meta property='twitter:card' content='summary_large_image' />
        <meta property='twitter:site' content='@maksugr' />

        <meta name='key' content="spokensoundshighlighter.com" />

        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet" />

        <link rel="stylesheet" href="./styles.css" />
    </head>
    <body>
        <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
        <h1>Spoken Sounds Highlighter</h1>
        <main id="contenteditable" contenteditable="true"></main>
        <div id="max-length-text" class="hidden">Sorry, max text length exceeded 🤷</div>
        <footer>
            This project aims to be education only. It highlights English sounds in the provided text. Just it. Under the hood a couple of the not stable enough technologies like <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable" target="_blank" rel="noopener noreferrer">contenteditable</a> or <a href="https://developer.mozilla.org/en-US/docs/WebAssembly" target="_blank" rel="noopener noreferrer">wasm</a>. Hence, if you have some troubles, sorry about that, try to use the last Google Chrome. However, there are many known issues: 1. cursor carriage always moves to the end of the line. 2. there are no new lines. 3. there is a max text length limitation — 10000 characters. You may be interested in a <a href="https://github.com/maksugr/text-to-sounds" target="_blank" rel="noopener noreferrer">github repo</a> with the source code of the rust crate and this website.
        </footer>
        <script src="./bootstrap.js"></script>
    </body>
</html>