Skip to content

Commit

Permalink
v3.3 (#93)
Browse files Browse the repository at this point in the history
* fix cycle dependency error

* checkpoint

* types and everything

* finish svgo funcitonality

* update version

* quick configuration

* updates
  • Loading branch information
rossmoody authored Jul 19, 2021
1 parent 259e97f commit 5cbae7a
Show file tree
Hide file tree
Showing 21 changed files with 690 additions and 164 deletions.
4 changes: 2 additions & 2 deletions extension/manifest.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"manifest_version": 2,
"name": "SVG Gobbler",
"version": "3.2",
"version": "3.3",
"description": "Download and optimize icons, logos, and vector SVGs from websites.",
"homepage_url": "https://github.com/rossmoody/svg-gobbler",
"icons": {
Expand All @@ -23,7 +23,7 @@
"persistent": false
},
"permissions": ["activeTab", "tabs"],
"content_security_policy": "script-src 'self' 'script-src-elem' https://feedback.fish/ff.js; object-src 'self'",
"content_security_policy": "script-src 'self' https://feedback.fish/ff.js; object-src 'self'",
"content_scripts": [
{
"matches": ["https://*/*"],
Expand Down
6 changes: 4 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "svg-gobbler",
"version": "3.2.0",
"version": "3.3.0",
"author": "rossmoody <[email protected]>",
"description": "SVG Gobbler is a simple browser extension that highlights any available SVG content in your current window and lets you download it.",
"license": "apache-2.0",
Expand All @@ -17,7 +17,8 @@
"eslint-config-rossmoody"
],
"ignorePatterns": [
"*.config.js"
"*.config.js",
"*.d.ts"
],
"env": {
"webextensions": true
Expand All @@ -41,6 +42,7 @@
"jszip": "^3.6.0",
"prettier": "^2.3.2",
"prettier-config-rossmoody": "^1.0.2",
"pretty-bytes": "^5.6.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
Expand Down
16 changes: 9 additions & 7 deletions src/build/components/card/card-action-cors.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,15 @@ function sendMessage(callback: any) {
if (changeInfo.status !== 'complete') return
chrome.tabs.onUpdated.removeListener(listener)

chrome.tabs.sendMessage(
tab,
{ message: 'start_gobbling' },
({ data }) => {
callback(data, tab)
}
)
setTimeout(() => {
chrome.tabs.sendMessage(
tab,
{ message: 'start_gobbling' },
({ data }) => {
callback(data, tab)
}
)
}, 200)
})
})
}
Expand Down
8 changes: 2 additions & 6 deletions src/build/components/card/card-action-footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,6 @@ const CardActionFooter = ({ svgString, height, width }: CardActionFooter) => {
<Button
onClick={() => {
handle.downloadOriginal(svgString)
toast({
title: 'Download successful',
description: 'The SVG is downloading now.',
})
}}
>
Download
Expand Down Expand Up @@ -89,7 +85,7 @@ const CardActionFooter = ({ svgString, height, width }: CardActionFooter) => {
toast({
title: 'Download successful',
description:
'The SVG has been successfully optimized using SVGO and is downloading now.',
"The SVG has been successfully optimized using SVGO's default settings and is downloading now.",
})
}}
>
Expand All @@ -102,7 +98,7 @@ const CardActionFooter = ({ svgString, height, width }: CardActionFooter) => {
toast({
title: 'Copied to clipboard',
description:
'The SVG has been successfully optimized using SVGO and is available in your clipboard.',
"The SVG has been successfully optimized using SVGO's default settings and is available in your clipboard.",
})
}}
>
Expand Down
45 changes: 45 additions & 0 deletions src/build/components/drawer/code-view-header.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import React from 'react'
import { Button, Box, Flex, Text } from '@chakra-ui/react'
import prettyBytes from 'pretty-bytes'

const getStringSize = (string: string) => {
const bytes = new Blob([string]).size
return prettyBytes(bytes)
}

interface CodeViewHeaderProps {
originalString: string
newString: string
}

function CodeViewHeader({ originalString, newString }: CodeViewHeaderProps) {
const originalSize = getStringSize(originalString)
const newSize = getStringSize(newString)

const sizeString =
originalSize === newSize ? originalSize : `${originalSize} -> ${newSize}`

return (
<Flex justifyContent="space-between" p={3} alignItems="center">
<Box w="32px" />
<Text color="gray.400" fontSize="12px">
{sizeString}
</Text>
<Button
size="xs"
onClick={(event) => {
navigator.clipboard.writeText(newString)
;(event.target as HTMLButtonElement).textContent = 'Copied'

setTimeout(() => {
;(event.target as HTMLButtonElement).textContent = 'Copy'
}, 1500)
}}
>
Copy
</Button>
</Flex>
)
}

export { CodeViewHeader }
97 changes: 97 additions & 0 deletions src/build/components/drawer/drawer-content.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
import React from 'react'
import { Box, Center, Flex, Stack, Divider } from '@chakra-ui/react'

import { SVGHighlighter } from './syntax-highlighter'
import { runSvgo, defaultConfig } from './process-strings'
import { SVGOConfig } from './svgo-types'
import { Option } from './option'
import { optionsData } from './options-data'
import { CodeViewHeader } from './code-view-header'
import { Subhead } from './form-category-subhead'
import { QuickConfiguration } from './quick-configurations'

interface DrawerContent {
svgString: string
}

function DrawerContent({ svgString }: DrawerContent) {
const svgoDefault: SVGOConfig = React.useMemo(
() => JSON.parse(JSON.stringify(defaultConfig)),
[]
)

const [originalString] = React.useState(svgString)
const [string, setString] = React.useState(svgString)
const [config, setConfig] = React.useState<SVGOConfig>(svgoDefault)
const [radioGroup, setRadioGroup] = React.useState('default')

React.useEffect(() => {
const newString = runSvgo(originalString, config)
setString(newString)
}, [originalString, config])

return (
<Box display="block" height="100%" width="100%">
<Flex height="100%">
<Flex flex={8} flexDir="column" maxW="65%" bg="rgb(40, 42, 54)">
<CodeViewHeader originalString={originalString} newString={string} />
<Box minHeight="100%" height="50px" overflow="auto">
<SVGHighlighter>{string}</SVGHighlighter>
</Box>
</Flex>
<Flex flex={4} flexDir="column">
<Center
minHeight="140px"
maxHeight="140px"
p={4}
dangerouslySetInnerHTML={{ __html: string }}
overflow="hidden"
sx={{
'& > svg': {
height: '90%',
width: '90%',
overflow: 'visible',
},
}}
/>
<Box position="relative" width="100%" height="100%">
<Box
position="absolute"
top={0}
right={0}
bottom={0}
left={0}
overflow="auto"
>
<Box px={5} paddingTop={4} paddingBottom={6} marginBottom={12}>
<Subhead>Quick Configuration</Subhead>
<QuickConfiguration
setConfig={setConfig}
setRadioGroup={setRadioGroup}
radioGroup={radioGroup}
/>
<Divider my={8} />
<Subhead>Optimizations</Subhead>
<Stack spacing="4">
{optionsData.map((option) => (
<Option
key={option.pluginName}
title={option.title}
pluginName={option.pluginName}
description={option.description}
setConfig={setConfig}
config={config}
setRadioGroup={setRadioGroup}
/>
))}
</Stack>
</Box>
</Box>
</Box>
</Flex>
</Flex>
</Box>
)
}

export { DrawerContent }
68 changes: 0 additions & 68 deletions src/build/components/drawer/drawer-tabs.tsx

This file was deleted.

20 changes: 20 additions & 0 deletions src/build/components/drawer/form-category-subhead.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React from 'react'
import { Box, Text } from '@chakra-ui/react'

const Subhead: React.FC = ({ children }) => {
return (
<Box mb="4">
<Text
as="h3"
fontWeight="bold"
fontSize="xs"
color="gray.400"
textTransform="uppercase"
>
{children}
</Text>
</Box>
)
}

export { Subhead }
33 changes: 11 additions & 22 deletions src/build/components/drawer/index.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,14 @@
import React from 'react'
import {
Drawer,
DrawerBody,
DrawerFooter,
DrawerHeader,
DrawerOverlay,
DrawerContent,
DrawerCloseButton,
Button,
Divider,
} from '@chakra-ui/react'

import { DrawerTabs } from './drawer-tabs'
import { prettifySvg, optimizeSvg } from './process-strings'
import { DrawerContent as DrawerCodeContent } from './drawer-content'

function CodeDrawer({
callback,
Expand All @@ -21,28 +17,21 @@ function CodeDrawer({
callback: any
svgString: string
}) {
const processedSVGString = {
prettySVG: prettifySvg(svgString),
optimizedSVG: optimizeSvg(svgString),
}

return (
<Drawer isOpen placement="right" size="lg" onClose={() => callback(false)}>
<Drawer
isOpen
placement="right"
size="2xl"
onClose={() => {
callback(false)
}}
>
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader>SVG Markup</DrawerHeader>
<DrawerHeader>Code details</DrawerHeader>
<Divider />

<DrawerBody>
<DrawerTabs svgString={processedSVGString} />
</DrawerBody>

<DrawerFooter>
<Button colorScheme="red" onClick={() => callback(false)}>
Done
</Button>
</DrawerFooter>
<DrawerCodeContent svgString={svgString} />
</DrawerContent>
</Drawer>
)
Expand Down
Loading

0 comments on commit 5cbae7a

Please sign in to comment.