Skip to content

Commit ad6364f

Browse files
nirmalkcnirmalkc
committed
Merge remote-tracking branch 'origin/main' into accessibility-issues
2 parents 4f8c33c + 35cc4a9 commit ad6364f

12 files changed

Lines changed: 3791 additions & 265 deletions

File tree

‎.all-contributorsrc‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
{
2+
"files": [
3+
"README.md"
4+
],
5+
"imageSize": 100,
6+
"commit": false,
7+
"contributors": [
8+
{
9+
"login": "atapas",
10+
"name": "Tapas Adhikary",
11+
"avatar_url": "https://avatars.githubusercontent.com/u/3633137?v=4",
12+
"profile": "https://tapasadhikary.com",
13+
"contributions": [
14+
"code",
15+
"infra",
16+
"test"
17+
]
18+
},
19+
{
20+
"login": "nirmalkc",
21+
"name": "Nirmal Kumar",
22+
"avatar_url": "https://avatars.githubusercontent.com/u/6359059?v=4",
23+
"profile": "https://github.com/nirmalkc",
24+
"contributions": [
25+
"test",
26+
"code"
27+
]
28+
},
29+
{
30+
"login": "williamzhu17",
31+
"name": "William Zhu",
32+
"avatar_url": "https://avatars.githubusercontent.com/u/77871333?v=4",
33+
"profile": "https://github.com/williamzhu17",
34+
"contributions": [
35+
"test",
36+
"code"
37+
]
38+
},
39+
{
40+
"login": "saviomartin",
41+
"name": "Savio Martin",
42+
"avatar_url": "https://avatars.githubusercontent.com/u/61895712?v=4",
43+
"profile": "https://savio.xyz/",
44+
"contributions": [
45+
"test",
46+
"code"
47+
]
48+
}
49+
],
50+
"contributorsPerLine": 7,
51+
"projectName": "tryshape",
52+
"projectOwner": "TryShape",
53+
"repoType": "github",
54+
"repoHost": "https://github.com",
55+
"skipCi": true
56+
}

‎README.md‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11

2-
2+
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
3+
[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)
4+
<!-- ALL-CONTRIBUTORS-BADGE:END -->
35
<p align="center">
46
<a href="https://tryshape.vercel.app/" target="_blank">
57
<img src="./public/readme/TryShape-GitHub-icon-only.png" alt="logo" width="125"/>
@@ -215,3 +217,26 @@ If you found the app helpful, consider supporting us with a coffee.
215217
A ⭐️ to <b>TryShape</b> is to build its triceps 💪 stronger.
216218
</h3>
217219

220+
221+
## Contributors ✨
222+
223+
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
224+
225+
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
226+
<!-- prettier-ignore-start -->
227+
<!-- markdownlint-disable -->
228+
<table>
229+
<tr>
230+
<td align="center"><a href="https://tapasadhikary.com"><img src="https://avatars.githubusercontent.com/u/3633137?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tapas Adhikary</b></sub></a><br /><a href="https://github.com/TryShape/tryshape/commits?author=atapas" title="Code">💻</a> <a href="#infra-atapas" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/TryShape/tryshape/commits?author=atapas" title="Tests">⚠️</a></td>
231+
<td align="center"><a href="https://github.com/nirmalkc"><img src="https://avatars.githubusercontent.com/u/6359059?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Nirmal Kumar</b></sub></a><br /><a href="https://github.com/TryShape/tryshape/commits?author=nirmalkc" title="Tests">⚠️</a> <a href="https://github.com/TryShape/tryshape/commits?author=nirmalkc" title="Code">💻</a></td>
232+
<td align="center"><a href="https://github.com/williamzhu17"><img src="https://avatars.githubusercontent.com/u/77871333?v=4?s=100" width="100px;" alt=""/><br /><sub><b>William Zhu</b></sub></a><br /><a href="https://github.com/TryShape/tryshape/commits?author=williamzhu17" title="Tests">⚠️</a> <a href="https://github.com/TryShape/tryshape/commits?author=williamzhu17" title="Code">💻</a></td>
233+
<td align="center"><a href="https://savio.xyz/"><img src="https://avatars.githubusercontent.com/u/61895712?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Savio Martin</b></sub></a><br /><a href="https://github.com/TryShape/tryshape/commits?author=saviomartin" title="Tests">⚠️</a> <a href="https://github.com/TryShape/tryshape/commits?author=saviomartin" title="Code">💻</a></td>
234+
</tr>
235+
</table>
236+
237+
<!-- markdownlint-restore -->
238+
<!-- prettier-ignore-end -->
239+
240+
<!-- ALL-CONTRIBUTORS-LIST:END -->
241+
242+
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

‎components/core/CreateShape.js‎

Lines changed: 69 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -247,21 +247,57 @@ const CreateShape = (props) => {
247247

248248
if (clipPathType === "polygon") {
249249
let formulaNumbers = formula.slice(formula.indexOf("(") + 1, formula.indexOf(")"));
250-
formulaNumbers = formulaNumbers.split(", ");
250+
formulaNumbers = formulaNumbers.split(",");
251251
newVerticeCoordinates = formulaNumbers.map(x => {
252-
let percentageArray = x.split(" ");
253-
return {
254-
"x": percentageArray[0],
255-
"y": percentageArray[1],
256-
}
252+
let values = x.trim();
253+
let xValue = "";
254+
let yValue = "";
255+
256+
// If the formula includes both percentage and px
257+
// Figure out which one comes first and use that index of find it
258+
if (values.includes("%") && values.includes("px")) {
259+
260+
let indexOfPX = values.indexOf("px");
261+
let indexOfPercentage = values.indexOf("%");
262+
263+
if (indexOfPX < indexOfPercentage) {
264+
xValue = values.substring(0, values.indexOf("px") + 2).trim();
265+
yValue = values.substring(values.indexOf("px") + 2).trim();
266+
}
267+
268+
if (indexOfPercentage < indexOfPX) {
269+
xValue = values.substring(0, values.indexOf("%") + 1).trim();
270+
yValue = values.substring(values.indexOf("%") + 1).trim();
271+
}
272+
273+
} else if (values.includes("%")) {
274+
xValue = values.substring(0, values.indexOf("%") + 1).trim();
275+
yValue = values.substring(values.indexOf("%") + 1).trim();
276+
} else if (values.includes("px")) {
277+
xValue = values.substring(0, values.indexOf("px") + 2).trim();
278+
yValue = values.substring(values.indexOf("px") + 2).trim();
279+
}
280+
281+
if (!(xValue.includes("px") || xValue.includes("%")) || xValue.includes(" ")) {
282+
xValue = "0%";
283+
}
284+
285+
if (!(yValue.includes("px") || yValue.includes("%")) || yValue === "") {
286+
yValue = "0%";
287+
}
288+
289+
return {
290+
"x": xValue,
291+
"y": yValue,
292+
}
257293
});
258294
}
259295

260296
setShapeInformation(prevState => {
261297
return {
262298
...prevState,
263299
"formula": formula.includes("(") && formula.includes(")") ? formula : prevState.formula,
264-
"clipPathType": clipPathType === null ? prevState.clipPathType : clipPathType,
300+
"clipPathType": clipPathType === undefined ? prevState.clipPathType : clipPathType,
265301
"vertices": edgeVerticeNumber,
266302
"edges": edgeVerticeNumber,
267303
"verticeCoordinates": newVerticeCoordinates,
@@ -271,13 +307,35 @@ const CreateShape = (props) => {
271307

272308
// Returns an array that has a new verticeCoordinate
273309
const addNewVerticeCoordinates = (x ,y, number) => {
274-
const xPercentage = Math.round((x / 280.0) * 100.0);
275-
const yPercentage = Math.round((y / 280.0) * 100.0);
310+
311+
let xValue;
312+
let yValue;
313+
314+
// If there is a new coordinate
315+
if (shapeInformation.verticeCoordinates.length === number) {
316+
xValue = Math.round((x / 280.0) * 100.0) + "%";
317+
yValue = Math.round((y / 280.0) * 100.0) + "%";
318+
} else {
319+
320+
// Determines whether previous x coordinate was in percentage or px and adjusts value to maintain same unit of measurement
321+
if (shapeInformation.verticeCoordinates[number].x.includes("%")) {
322+
xValue = Math.round((x / 280.0) * 100.0) + "%";
323+
} else if (shapeInformation.verticeCoordinates[number].x.includes("px")) {
324+
xValue = Math.round(x) + "px";
325+
}
326+
327+
// Determines whether previous y coordinate was in percentage or px and adjusts value to maintain same unit of measurement
328+
if (shapeInformation.verticeCoordinates[number].y.includes("%")) {
329+
yValue = Math.round((y / 280.0) * 100.0) + "%";
330+
} else if (shapeInformation.verticeCoordinates[number].y.includes("px")) {
331+
yValue = Math.round(y) + "px";
332+
}
333+
}
276334

277335
let newVerticeCoordinates = shapeInformation.verticeCoordinates;
278336
newVerticeCoordinates[number] = {
279-
"x": xPercentage + "%",
280-
"y": yPercentage + "%"
337+
"x": xValue,
338+
"y": yValue
281339
}
282340

283341
return newVerticeCoordinates;

‎components/core/MetaTags.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
// head
2+
import Head from "next/head";
3+
4+
const MetaTags = () => {
5+
return (
6+
<Head>
7+
<meta
8+
name="apple-mobile-web-app-status-bar-style"
9+
content="black-translucent"
10+
/>
11+
<meta name="theme-color" content="#645AD3" />
12+
13+
<title>TryShape - Create, Export, Share, and Use any Shapes of your choice.</title>
14+
<meta
15+
name="description"
16+
content="TryShape is an opensource platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS."
17+
/>
18+
<meta
19+
name="keywords"
20+
content="tryshape, tryshape tapas, tyshape github, css, css clip path, shapes, css shapes, github shapes, clippy, clip path shapes, types of shapes, css clip path shape, shape tool, generate css shapes, tyshape easy"
21+
/>
22+
<link rel="canonical" href="https://tryshape.now.sh/" />
23+
<link rel="apple-touch-icon" href="/favicon.ico" />
24+
<link rel="icon" href="/favicon.ico" />
25+
26+
{/* Primary Meta Tags */}
27+
<meta
28+
name="title"
29+
content="TryShape - Create, Export, Share, and Use any Shapes of your choice."
30+
/>
31+
<meta
32+
name="description"
33+
content="TryShape is an opensource platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS."
34+
/>
35+
36+
{/* Open Graph / Facebook */}
37+
<meta property="og:type" content="website" />
38+
<meta property="og:url" content="https://tryshape.now.sh/" />
39+
<meta
40+
property="og:title"
41+
content="TryShape - Create, Export, Share, and Use any Shapes of your choice."
42+
/>
43+
<meta
44+
property="og:description"
45+
content="TryShape is an opensource platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS."
46+
/>
47+
<meta
48+
property="og:image"
49+
content="https://tryshape.vercel.app/readme/landing.png"
50+
/>
51+
52+
{/* Twitter */}
53+
<meta property="twitter:card" content="summary_large_image" />
54+
<meta property="twitter:url" content="https://tryshape.now.sh/" />
55+
<meta
56+
property="twitter:title"
57+
content="TryShape - Create, Export, Share, and Use any Shapes of your choice."
58+
/>
59+
<meta
60+
property="twitter:description"
61+
content="TryShape is an opensource platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS."
62+
/>
63+
<meta
64+
property="twitter:image"
65+
content="https://tryshape.vercel.app/readme/landing.png"
66+
/>
67+
</Head>
68+
);
69+
};
70+
71+
export default MetaTags;

‎components/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ export { default as ExportShape } from "./core/ExportShape";
66
export { default as CreateShape } from "./core/CreateShape";
77
export { default as CopyShapeSource } from "./core/CopyShapeSource";
88
export { default as DeleteShape } from "./core/DeleteShape";
9+
export { default as MetaTags } from "./core/MetaTags";
910

1011
// utils
1112
export { default as Header } from "./utils/Header";

0 commit comments

Comments
 (0)