🎉 Move existing translations to new repo

GLOSSARY.md

@@ -0,0 +1,43 @@
+# Glossary / Sanasto
+
+## React specific
+
+- **React hook**: React hookki, koukku
+- **props**: propsit
+- **prop drilling**: propsien poraus
+- **reducer**: reducer
+- **dispatch**: dispatch, lähettää
+- **pure component**: puhdas komponentti
+- **fragment**: fragment
+- **Strict Mode**: strict mode
+
+## General
+
+- **branching logic**: haaralogiikka
+- **control flow**: ohjausvirta
+- **destructuring**: (taulukon / olion) levityssyntaksi
+- **spread**: (taulukon / olion) levityssyntaksi
+- **shortcut**: lyhytoperaatio
+- **expression**: lause
+- **linting**: lintteri
+- **frontend**: frontend
+- **backend**: backend, taustajärjestelmä
+- **pipeline**: putki
+- **bundler**: bundler
+- **container**: container
+- **wrapper**: wrapper
+- **to wrap smth**: kääriä, wräpätä
+- **minify**: minifioida, pienentää
+- **preprocessor**: esikääntäjä
+- **repository**: repository, repo
+- **trigger**: käynnistää
+- **export**: exportata, viedä
+- **import**: importata, tuoda
+- **build tool**: käännöstyökalu
+- **setter function**: setter funktio. (Asetin kuulostaa tyhmältä)
+- **hover**: (as in a user hovering over a button): hoverointi. (Leijuminen ei ehkä ole kovin itsestäänselvää mitä sillä tarkoitetaan.)
+- **focus**: (as in a user focusing over a button): focusointi. (^)
+- **framework**: ohjelmistokehys
+- **codebase**: koodipohja
+- **property**: en keksinyt järkevää suomennosta, property
+- **scope**: käyttöalue

src/components/Layout/Feedback.tsx

@@ -63,7 +63,7 @@ function SendFeedback({onSubmit}: {onSubmit: () => void}) {
   return (
     <div className="max-w-xs w-80 lg:w-auto py-3 shadow-lg rounded-lg m-4 bg-wash dark:bg-gray-95 px-4 flex">
       <p className="w-full font-bold text-primary dark:text-primary-dark text-lg mr-4">
-        {isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'}
+        {isSubmitted ? 'Kiitos palautteestasi!' : 'Onko tämä sivu hyödyllinen?'}
       </p>
       {!isSubmitted && (
         <button

src/components/Layout/Toc.tsx

@@ -16,7 +16,7 @@ export function Toc({headings}: {headings: Toc}) {
     <nav role="navigation" className="pt-20 sticky top-0 right-0">
       {headings.length > 0 && (
         <h2 className="mb-3 lg:mb-3 uppercase tracking-wide font-bold text-sm text-secondary dark:text-secondary-dark px-4 w-full">
-          On this page
+          Tällä sivulla
         </h2>
       )}
       <div

src/components/MDX/Challenges/Challenge.tsx

@@ -50,7 +50,7 @@ export function Challenge({
           className="text-xl text-primary dark:text-primary-dark mb-2 mt-0 font-medium"
           id={currentChallenge.id}>
           <div className="font-bold block md:inline">
-            {isRecipes ? 'Example' : 'Challenge'} {currentChallenge.order} of{' '}
+            {isRecipes ? 'Esimerkki' : 'Haaste'} {currentChallenge.order} /{' '}
             {totalChallenges}
             <span className="text-primary dark:text-primary-dark">: </span>
           </div>
@@ -63,14 +63,14 @@ export function Challenge({
           <div>
             <Button className="mr-2" onClick={toggleHint} active={showHint}>
               <IconHint className="mr-1.5" />{' '}
-              {showHint ? 'Hide hint' : 'Show hint'}
+              {showHint ? 'Piilota vihje' : 'Näytä vihje'}
             </Button>
             <Button
               className="mr-2"
               onClick={toggleSolution}
               active={showSolution}>
               <IconSolution className="mr-1.5" />{' '}
-              {showSolution ? 'Hide solution' : 'Show solution'}
+              {showSolution ? 'Piilota ratkaisu' : 'Näytä ratkaisu'}
             </Button>
           </div>
         ) : (
@@ -80,7 +80,7 @@ export function Challenge({
               onClick={toggleSolution}
               active={showSolution}>
               <IconSolution className="mr-1.5" />{' '}
-              {showSolution ? 'Hide solution' : 'Show solution'}
+              {showSolution ? 'Piilota ratkaisu' : 'Näytä ratkaisu'}
             </Button>
           )
         )}
@@ -94,7 +94,7 @@ export function Challenge({
             )}
             onClick={handleClickNextChallenge}
             active>
-            Next {isRecipes ? 'Example' : 'Challenge'}
+            Seuraava {isRecipes ? 'esimerkki' : 'haaste'}
             <IconArrowSmall displayDirection="right" className="block ml-1.5" />
           </Button>
         )}
@@ -104,12 +104,12 @@ export function Challenge({
       {showSolution && (
         <div className="mt-6">
           <h3 className="text-2xl font-bold text-primary dark:text-primary-dark">
-            Solution
+            Ratkaisu
           </h3>
           {currentChallenge.solution}
           <div className="flex justify-between items-center mt-4">
             <Button onClick={() => setShowSolution(false)}>
-              Close solution
+              Sulje ratkaisu
             </Button>
             {hasNextChallenge && (
               <Button
@@ -118,7 +118,7 @@ export function Challenge({
                 )}
                 onClick={handleClickNextChallenge}
                 active>
-                Next Challenge
+                Seuraava haaste
                 <IconArrowSmall
                   displayDirection="right"
                   className="block ml-1.5"

src/components/MDX/Challenges/Challenges.tsx

@@ -78,7 +78,7 @@ export function Challenges({
   children,
   isRecipes,
   noTitle,
-  titleText = isRecipes ? 'Try out some examples' : 'Try out some challenges',
+  titleText = isRecipes ? 'Kokeile esimerkkejä' : 'Kokeile haasteita',
   titleId = isRecipes ? 'examples' : 'challenges',
 }: ChallengesProps) {
   const challenges = parseChallengeContents(children);

src/components/MDX/ConsoleBlock.tsx

@@ -45,7 +45,7 @@ function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
         </div>
         <div className="flex text-sm px-4">
           <div className="border-b-2 border-gray-300 dark:border-gray-90 text-tertiary dark:text-tertiary-dark">
-            Console
+            Konsoli
           </div>
           <div className="px-4 py-2 flex">
             <Box className="mr-2 bg-gray-300 dark:bg-gray-70" />

src/components/MDX/ExpandableCallout.tsx

@@ -26,7 +26,7 @@ const variantMap = {
       'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
   },
   note: {
-    title: 'Note',
+    title: 'Huomaa',
     Icon: IconNote,
     containerClasses:
       'bg-green-5 dark:bg-green-60 dark:bg-opacity-20 text-primary dark:text-primary-dark text-lg',
@@ -35,15 +35,15 @@ const variantMap = {
       'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)',
   },
   pitfall: {
-    title: 'Pitfall',
+    title: 'Sudenkuoppa',
     Icon: IconPitfall,
     containerClasses: 'bg-yellow-5 dark:bg-yellow-60 dark:bg-opacity-20',
     textColor: 'text-yellow-50 dark:text-yellow-40',
     overlayGradient:
       'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
   },
   wip: {
-    title: 'Under Construction',
+    title: 'Kehitteillä',
     Icon: IconNote,
     containerClasses: 'bg-yellow-5 dark:bg-yellow-60 dark:bg-opacity-20',
     textColor: 'text-yellow-50 dark:text-yellow-40',

src/components/MDX/ExpandableExample.tsx

@@ -71,13 +71,13 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) {
           {isDeepDive && (
             <>
               <IconDeepDive className="inline mr-2 dark:text-purple-30 text-purple-40" />
-              Deep Dive
+              Syväsukellus
             </>
           )}
           {isExample && (
             <>
               <IconCodeBlock className="inline mr-2 dark:text-yellow-30 text-yellow-50" />
-              Example
+              Esimerkki
             </>
           )}
         </h5>
@@ -101,7 +101,7 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) {
           <span className="mr-1">
             <IconChevron displayDirection={isExpanded ? 'up' : 'down'} />
           </span>
-          {isExpanded ? 'Hide Details' : 'Show Details'}
+          {isExpanded ? 'Piilota' : 'Näytä'}
         </Button>
       </summary>
       <div

src/components/MDX/Heading.tsx

@@ -17,9 +17,9 @@ const Heading = forwardRefWithAs<HeadingProps, 'div'>(function Heading(
   {as: Comp = 'div', className, children, id, isPageAnchor = true, ...props},
   ref
 ) {
-  let label = 'Link for this heading';
+  let label = 'Linkki tähän otsikkoon';
   if (typeof children === 'string') {
-    label = 'Link for ' + children;
+    label = 'Linkki otsikkoon ' + children;
   }
 
   return (

src/components/MDX/MDXComponents.tsx

@@ -113,16 +113,16 @@ function LearnMore({
       <section className="p-8 mt-16 mb-16 flex flex-row shadow-inner-border dark:shadow-inner-border-dark justify-between items-center bg-card dark:bg-card-dark rounded-2xl">
         <div className="flex-col">
           <h2 className="text-primary font-display dark:text-primary-dark font-bold text-2xl leading-tight">
-            Ready to learn this topic?
+            Oletko valmis oppimaan tämän aiheen?
           </h2>
           {children}
           {path ? (
             <ButtonLink
               className="mt-1"
-              label="Read More"
+              label="Lue lisää"
               href={path}
               type="primary">
-              Read More
+              Lue lisää
               <IconNavArrow displayDirection="right" className="inline ml-1" />
             </ButtonLink>
           ) : null}
@@ -173,7 +173,7 @@ function YouWillLearn({
   children: any;
   isChapter?: boolean;
 }) {
-  let title = isChapter ? 'In this chapter' : 'You will learn';
+  let title = isChapter ? 'Tässä kappaleessa' : 'Tulet oppimaan';
   return <SimpleCallout title={title}>{children}</SimpleCallout>;
 }
 

src/components/MDX/Recap.tsx

@@ -13,7 +13,7 @@ function Recap({children}: RecapProps) {
   return (
     <section>
       <H2 isPageAnchor id="recap">
-        Recap
+        Kertaus
       </H2>
       {children}
     </section>

src/components/MDX/Sandpack/CustomPreset.tsx

@@ -119,7 +119,7 @@ const SandboxShell = memo(function SandboxShell({
                   className="inline mr-1.5 text-xl"
                   displayDirection={isExpanded ? 'up' : 'down'}
                 />
-                {isExpanded ? 'Show less' : 'Show more'}
+                {isExpanded ? 'Näytä vähemmän' : 'Näytä enemmän'}
               </span>
             </button>
           )}

src/components/MDX/Sandpack/DownloadButton.tsx

@@ -101,9 +101,9 @@ ${css}
     <button
       className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1"
       onClick={downloadHTML}
-      title="Download Sandbox"
+      title="Lataa hiekkalaatikko"
       type="button">
-      <IconDownload className="inline mr-1" /> Download
+      <IconDownload className="inline mr-1" /> Lataa
     </button>
   );
 }

src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx

@@ -9,13 +9,13 @@ export const OpenInCodeSandboxButton = () => {
   return (
     <UnstyledOpenInCodeSandboxButton
       className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1 ml-2 md:ml-1"
-      title="Open in CodeSandbox">
+      title="Avaa CodeSandbox:ssa">
       <IconNewPage
         className="inline ml-1 mr-1 relative top-[1px]"
         width="1em"
         height="1em"
       />
-      <span className="hidden md:block">Fork</span>
+      <span className="hidden md:block">Forkkaa</span>
     </UnstyledOpenInCodeSandboxButton>
   );
 };

src/components/MDX/Sandpack/ResetButton.tsx

@@ -13,9 +13,9 @@ export function ResetButton({onReset}: ResetButtonProps) {
     <button
       className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1"
       onClick={onReset}
-      title="Reset Sandbox"
+      title="Palauta hiekkalaatikko"
       type="button">
-      <IconRestart className="inline ml-1 mr-1 relative" /> Reset
+      <IconRestart className="inline ml-1 mr-1 relative" /> Palauta
     </button>
   );
 }

src/components/MDX/YouWillLearnCard.tsx

@@ -28,7 +28,7 @@ function YouWillLearnCard({title, path, children}: YouWillLearnCardProps) {
           type="primary"
           size="md"
           label={title}>
-          Read More
+          Lue lisää
           <IconNavArrow displayDirection="right" className="inline ml-1" />
         </ButtonLink>
       </div>

src/components/SocialBanner.tsx

@@ -7,9 +7,9 @@ import {useRef, useEffect} from 'react';
 import cn from 'classnames';
 import {ExternalLink} from './ExternalLink';
 
-const bannerText = 'Support Ukraine 🇺🇦';
+const bannerText = 'Tue Ukrainaa 🇺🇦';
 const bannerLink = 'https://opensource.fb.com/support-ukraine';
-const bannerLinkText = 'Help Provide Humanitarian Aid to Ukraine';
+const bannerLinkText = 'Auta toimittamaan humanitaarista apua Ukrainalle';
 
 export default function SocialBanner() {
   const ref = useRef<HTMLDivElement | null>(null);

src/components/Tag.tsx

@@ -7,23 +7,23 @@ import type {RouteTag} from './Layout/getRouteMeta';
 
 const variantMap = {
   foundation: {
-    name: 'Foundation',
+    name: 'Perusta',
     classes: 'bg-yellow-50 text-white',
   },
   intermediate: {
-    name: 'Intermediate',
+    name: 'Keskitaso',
     classes: 'bg-purple-40 text-white',
   },
   advanced: {
-    name: 'Advanced',
+    name: 'Edistynyt',
     classes: 'bg-green-40 text-white',
   },
   experimental: {
-    name: 'Experimental',
+    name: 'Kokeellinen',
     classes: 'bg-ui-orange text-white',
   },
   deprecated: {
-    name: 'Deprecated',
+    name: 'Käytöstä poistettu',
     classes: 'bg-red-40 text-white',
   },
 };

src/content/community/conferences.md

@@ -510,7 +510,7 @@ August 18 in Guangzhou, China
 
 [Website](https://react.w3ctech.com)
 
-### React Rally 2018{/*react-rally-2018*/}
+### React Rally 2018 {/*react-rally-2018*/}
 August 16-17 in Salt Lake City, Utah USA
 
 [Website](http://www.reactrally.com) - [Twitter](https://twitter.com/reactrally)

src/content/index.md

@@ -1,6 +1,6 @@
 ---
 id: home
-title: React – The library for web and native user interfaces
+title: React – Kirjasto web- ja natiivikäyttöliittymille
 permalink: index.html
 ---