added german translation

and moved headlines from sub-components into App.js

src/App.js

@@ -11,10 +11,10 @@ import empty_1x1 from './empty_1x1.png'
 
 import 'intl-pluralrules'
 import { AppLocalizationProvider } from './l10n.js'
-import { Localized } from './Localized.js'
+import { withLocalization, Localized } from './Localized.js'
 
-// const userLocales = ['de'] || navigator.languages
-const userLocales = navigator.languages
+const userLocales = ['de'] || navigator.languages
+// const userLocales = navigator.languages
 
 const frameSize = 1080
 
@@ -73,7 +73,7 @@ function trigger_download(name, data){
     a.remove()
 }
 
-function App() {
+function App({ getString }) {    
     const [frameURL, setFrameURL] = useState(null)
     const [hashtagURL, setHashtagURL] = useState(null)
     const [originalPhoto, setOriginalPhoto] = useState(null)
@@ -285,30 +285,33 @@ function App() {
 
 
     return (
-        <AppLocalizationProvider key="AppLocalizationProvider" userLocales={userLocales}>
         <div className="App" {...getRootProps()}>
             <img src={HeaderImage} className="HeaderImage" alt="Volt Logo" />
 
             <div className={isDragActive ? 'droparea active' : 'droparea'}>
-                Drop your photo here ...
+                <Localized id="title_drop_photo_here" />
             </div>
 
-                <h2><Localized id="choose_your_photo" /></h2>
-            <p>It should best be a square image or your face in the middle. The photo is not saved and never leaves your computer.</p>
+            <h2><Localized id="title_choose_photo" /></h2>
+            <p>
+                <Localized id="text_choose_photo_info" />
+            </p>
 
             <label className="labelButton" tabIndex="0" style={{outline:'none'}}>
                 {!!originalPhoto ? <img src={originalPhoto} alt="Preview" /> : null}
-                <span>{!!originalPhoto ? 'Change Photo' : 'Load Photo'}</span>
+                <span>{!!originalPhoto ? getString('button_change_photo') : getString('button_load_photo') }</span>
                 <input onChange={handleImage} type="file" accept="image/*" style={{display: 'none'}} />
             </label>
 
             {!!originalPhoto ? (<>
+                <h2><Localized id="title_choose_frame" /></h2>
                 <FrameChooser onChange={handleFrameURL} />
+                <h2><Localized id="title_choose_hashtag" /></h2>
                 <HashtagChooser onChange={handleHashtagURL} />
             </>) : null}
 
             {!!originalPhoto && !!frameURL ? (<>
-                <h2>Reposition your Photo:</h2>
+                <h2><Localized id="title_reposition_photo" /></h2>
                 {/*
                 <h2>Edit your Photo:</h2>
                 <p>Your can reposition the image and scale it. Use pinch-to-zoom or scroll to scale.</p>
@@ -322,19 +325,32 @@ function App() {
                     onChange={handleCordsChange}
                 />
 
-                <button onClick={handleDownload}>Download Profile Picture</button>
+                <button onClick={handleDownload}><Localized id="button_download" /></button>
             </>) : null}
 
             <footer>
-                <a href="https://www.voltdeutschland.org/impressum">Imprint</a>
+                <a href="https://www.voltdeutschland.org/impressum">
+                    <Localized id="link_imprint" />
+                </a>
                 &nbsp; • &nbsp;
-                <a href="https://www.voltdeutschland.org/datenschutz">Privacy Policy</a>
+                <a href="https://www.voltdeutschland.org/datenschutz">
+                    <Localized id="link_privacy_policy" />
+                </a>
                 &nbsp; • &nbsp;
-                <a href="https://github.com/voltbonn/profile-picture-generator">Source Code</a>
+                <a href="https://github.com/voltbonn/profile-picture-generator">
+                    <Localized id="link_source_code" />
+                </a>
             </footer>
         </div>
-        </AppLocalizationProvider>
     )
 }
+const AppLocalized = withLocalization(App)
+
+
+function AppWrapper() {
+    return <AppLocalizationProvider key="AppLocalizationProvider" userLocales={userLocales}>
+        <AppLocalized />
+    </AppLocalizationProvider>
+}
+export default withLocalization(AppWrapper)
 
-export default App

src/FrameChooser.js

@@ -42,7 +42,6 @@ function FrameChooser({onChange}) {
 
     return (
         <div className="FrameChooser">
-            <h2>Choose a frame:</h2>
             {
                 frames.map(frame => {
                     const frame_src_path = frame.src.default

src/HashtagChooser.js

@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from 'react'
+import { withLocalization } from './Localized.js'
 
-function HashtagChooser({ onChange }) {
+function HashtagChooser({ onChange, getString }) {
     const [frames, setFrames] = useState([])
     const [choosenFrame, setChoosenFrame] = useState(null)
 
@@ -46,13 +47,12 @@ function HashtagChooser({ onChange }) {
 
     return (
         <div className="HashtagChooser">
-            <h2>Choose a Hashtag:</h2>
             {
                 frames.map(frame => {
                     const frame_src_path = frame.src.default
                     const isChoosen = choosenFrame === frame_src_path
                     return <button key={frame_src_path} data-src={frame_src_path} className={isChoosen ? 'hashtag_button choosen' : 'hashtag_button'} onClick={handleImageChoosing}>
-                        {frame.name === '' ? 'No Hashtag' : '#'+frame.name}
+                        {frame.name === '' ? getString('button_no_hashtag') : '#'+frame.name}
                     </button>
                 })
             }
@@ -60,4 +60,4 @@ function HashtagChooser({ onChange }) {
     )
 }
 
-export default HashtagChooser
+export default withLocalization(HashtagChooser)

src/locales/de.ftl

@@ -1 +1,18 @@
-choose_your_photo = Wähl dein Bild:
+
+title_drop_photo_here = Leg hier dein Foto ab ...
+title_choose_photo = Wähl Dein Foto:
+text_choose_photo_info = Das Foto wird nicht gespeichert und verlässt nie Deinen Computer.
+button_load_photo = Foto auswählen
+button_change_photo = Foto ändern
+
+title_choose_frame = Wähl einen Rahmen:
+
+title_choose_hashtag = Wähl einen Hashtag:
+button_no_hashtag = Kein Hashtag
+
+title_reposition_photo = Foto bearbeiten:
+button_download = Profilbild herunterladen
+
+link_imprint = Impressum
+link_privacy_policy = Datenschutz
+link_source_code = Quellcode

src/locales/en.ftl

@@ -1 +1,18 @@
-choose_your_photo = Choose your Photo:
+
+title_drop_photo_here = Drop your photo here ...
+title_choose_photo = Choose your Photo:
+text_choose_photo_info = The photo is not saved and never leaves your computer.
+button_load_photo = Load Photo
+button_change_photo = Change Photo
+
+title_choose_frame = Choose a frame:
+
+title_choose_hashtag = Choose a hashtag:
+button_no_hashtag = No Hashtag
+
+title_reposition_photo = Reposition your photo:
+button_download = Download Profile Picture
+
+link_imprint = Imprint
+link_privacy_policy = Privacy Policy
+link_source_code = Source Code