Version 3.9 (#114)

* localization setup

* Update image-modal.tsx

* localization strings

* update

* update

* Update package.json

extension/manifest.json

@@ -1,8 +1,9 @@
 {
+  "name": "__MSG_appName__",
+  "description": "__MSG_appDesc__",
+  "default_locale": "en",
   "manifest_version": 2,
-  "name": "SVG Gobbler",
-  "version": "3.8.3",
-  "description": "Download and optimize icons, logos, and vector SVGs.",
+  "version": "3.9.0",
   "homepage_url": "https://github.com/rossmoody/svg-gobbler",
   "icons": {
     "16": "icons/icon16.png",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svg-gobbler",
-  "version": "3.8.3",
+  "version": "3.9.0",
   "author": "rossmoody <[email protected]>",
   "description": "Download and optimize icons, logos, and vector SVGs.",
   "license": "apache-2.0",

src/build/components/card/card-action-cors.tsx

@@ -3,6 +3,7 @@ import { Button, Grid, useColorModeValue } from '@chakra-ui/react'
 import { FaExternalLinkAlt } from 'react-icons/fa'
 
 import Tooltip from '../generic/tooltip'
+import loc from '../utils/localization'
 
 function sendMessage(callback: any) {
   chrome.tabs.query({ active: true, currentWindow: true }, (tabArray) => {
@@ -67,7 +68,7 @@ const CardActionCors = ({ forwardingUrl }: { forwardingUrl: string }) => {
           onClick={() => handleCorsTab(forwardingUrl)}
           rightIcon={<FaExternalLinkAlt />}
         >
-          Open in new tab
+          {loc('card_open')}
         </Button>
       </Tooltip>
     </Grid>

src/build/components/card/card-action-footer.tsx

@@ -5,6 +5,7 @@ import Drawer from '../drawer'
 import FilenameModal from '../modals/filename-modal'
 import ImageModal from '../modals/image-modal'
 import handle from '../utils/actions'
+import loc from '../utils/localization'
 
 import CardActionMenu from './card-action-menu'
 
@@ -48,13 +49,12 @@ const CardActionFooter = ({
         onClick={() => {
           handle.copyToClipboard(svgString)
           toast({
-            title: 'Copied to clipboard',
-            description:
-              'The SVG has been copied to your clipboard and is ready to be pasted.',
+            title: loc('card_copy_title'),
+            description: loc('card_copy_desc'),
           })
         }}
       >
-        Copy
+        {loc('card_copy_action')}
       </Button>
 
       <CardActionMenu
@@ -65,15 +65,15 @@ const CardActionFooter = ({
       />
 
       <FilenameModal
-        title="Download original"
+        title={loc('card_dl_orig')}
         download={handle.downloadOriginal}
         svgString={svgString}
         callback={setShowOgModal}
         showModal={showOgModal}
       />
 
       <FilenameModal
-        title="Download optimized"
+        title={loc('card_dl_opt')}
         download={handle.downloadOptimized}
         svgString={svgString}
         callback={setShowOptimizedModal}

src/build/components/card/card-action-menu.tsx

@@ -17,6 +17,7 @@ import {
 } from 'react-icons/fi'
 
 import handle from '../utils/actions'
+import loc from '../utils/localization'
 
 interface CardActionMenu {
   setShowOptimizedModal: any
@@ -51,32 +52,32 @@ const CardActionMenu = ({
           icon={<FiDownload />}
           onClick={() => setShowOptimizedModal(true)}
         >
-          Download optimized
+          {loc('card_dl_opt')}
         </MenuItem>
 
         <MenuItem
           icon={<FiCopy />}
           onClick={() => {
             handle.copyOptimized(svgString)
             toast({
-              title: 'Copied to clipboard',
-              description:
-                "The SVG has been successfully optimized using SVGO's default settings and is available in your clipboard.",
+              title: loc('card_menu_toast_optTitle'),
+              description: loc('card_menu_toast_optDesc'),
             })
           }}
         >
-          Copy optimized
+          {loc('card_menu_copy_opt')}
         </MenuItem>
 
         <MenuDivider />
 
         <MenuItem icon={<FiImage />} onClick={() => setShowModal(true)}>
-          Export as PNG…
+          {loc('card_menu_exportPng')}
         </MenuItem>
 
         <MenuDivider />
+
         <MenuItem icon={<FiCode />} onClick={() => setShowDrawer(true)}>
-          View code…
+          {loc('card_menu_viewCode')}
         </MenuItem>
       </MenuList>
     </Menu>

src/build/components/card/card-footer.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import { Box, SimpleGrid } from '@chakra-ui/react'
 
+import loc from '../utils/localization'
+
 import Subhead from './card-footer-subhead'
 import Body from './card-footer-body'
 
@@ -13,11 +15,11 @@ const CardFooter = ({ size, type }: CardFooter) => {
   return (
     <SimpleGrid minChildWidth="30px" spacing={2}>
       <Box>
-        <Subhead>Type</Subhead>
+        <Subhead>{loc('card_menu_type')}</Subhead>
         <Body>{type.charAt(0).toUpperCase() + type.slice(1)}</Body>
       </Box>
       <Box>
-        <Subhead>Size</Subhead>
+        <Subhead>{loc('card_menu_size')}</Subhead>
         <Body>{size}</Body>
       </Box>
     </SimpleGrid>

src/build/components/drawer/code-view-header.tsx

@@ -9,6 +9,8 @@ import {
 } from '@chakra-ui/react'
 import prettyBytes from 'pretty-bytes'
 
+import loc from '../utils/localization'
+
 const getStringSize = (string: string) => {
   const bytes = new Blob([string]).size
   return prettyBytes(bytes)
@@ -44,15 +46,15 @@ function CodeViewHeader({
               onClick={() => setIsReact(false)}
               variant="outline"
             >
-              SVG
+              {loc('drawer_svg')}
             </Button>
             <Button
               size="xs"
               isActive={isReact}
               onClick={() => setIsReact(true)}
               variant="outline"
             >
-              React
+              {loc('drawer_react')}
             </Button>
           </ButtonGroup>
         </Box>
@@ -71,7 +73,7 @@ function CodeViewHeader({
           }, 1500)
         }}
       >
-        Copy
+        {loc('drawer_copy')}
       </Button>
     </Flex>
   )

src/build/components/drawer/drawer-content.tsx

@@ -9,6 +9,7 @@ import {
 } from '@chakra-ui/react'
 
 import { SVGOConfig } from '../../types'
+import loc from '../utils/localization'
 
 import { SVGHighlighter } from './syntax-highlighter'
 import { runSvgo, defaultConfig } from './svgo/svgo-configs'
@@ -88,14 +89,14 @@ function DrawerContent({ svgString }: DrawerContent) {
               overflow="auto"
             >
               <Box px={5} paddingTop={4} paddingBottom={6} marginBottom={12}>
-                <Subhead>Quick Configuration</Subhead>
+                <Subhead>{loc('drawer_quick')}</Subhead>
                 <QuickConfiguration
                   setConfig={setConfig}
                   setRadioGroup={setRadioGroup}
                   radioGroup={radioGroup}
                 />
                 <Divider my={8} />
-                <Subhead>Optimizations</Subhead>
+                <Subhead>{loc('drawer_optim')}</Subhead>
                 <Stack spacing="4">
                   {optionsData.map((option) => (
                     <Option

src/build/components/drawer/index.tsx

@@ -8,6 +8,8 @@ import {
   Divider,
 } from '@chakra-ui/react'
 
+import loc from '../utils/localization'
+
 import { DrawerContent as DrawerCodeContent } from './drawer-content'
 
 interface CodeDrawer {
@@ -29,7 +31,7 @@ function CodeDrawer({ callback, svgString, showDrawer }: CodeDrawer) {
       <DrawerOverlay />
       <DrawerContent>
         <DrawerCloseButton />
-        <DrawerHeader>Code details</DrawerHeader>
+        <DrawerHeader>{loc('drawer_details')}</DrawerHeader>
         <Divider />
         <DrawerCodeContent svgString={svgString} />
       </DrawerContent>

src/build/components/drawer/svgo/quick-configurations.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
-import { RadioGroup, Radio, Stack, FormLabel } from '@chakra-ui/react'
+import { RadioGroup, Stack } from '@chakra-ui/react'
 
 import { SVGOConfig } from '../../../types'
+import loc from '../../utils/localization'
 
 import { defaultConfig, allFalseConfig } from './svgo-configs'
 import { RadioOption } from './radio-option'
@@ -43,9 +44,9 @@ export function QuickConfiguration({
       colorScheme="red"
     >
       <Stack direction="row" spacing={4}>
-        <RadioOption label="None" value="none" />
-        <RadioOption label="SVGO Default" value="default" />
-        <RadioOption label="Custom" value="custom" />
+        <RadioOption label={loc('drawer_labelNone')} value="none" />
+        <RadioOption label={loc('drawer_labelSvgo')} value="default" />
+        <RadioOption label={loc('drawer_labelCustom')} value="custom" />
       </Stack>
     </RadioGroup>
   )