Skip to content

Commit 4948a90

Browse files
author
Vic Shóstak
committed
Add more beautify pages
1 parent ced2a23 commit 4948a90

11 files changed

Lines changed: 4542 additions & 4483 deletions

File tree

‎package-lock.json‎

Lines changed: 4383 additions & 4382 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
11
{
2-
"name": "my-app",
3-
"version": "0.0.0",
4-
"scripts": {
5-
"dev": "vite",
6-
"build": "tsc && vite build",
7-
"serve": "vite preview"
8-
},
9-
"dependencies": {
10-
"preact": "^10.5.13"
11-
},
12-
"devDependencies": {
13-
"@headlessui/react": "^1.0.0",
14-
"@preact/preset-vite": "^2.1.0",
15-
"@prefresh/vite": "^2.2.1",
16-
"@tailwindcss/aspect-ratio": "^0.2.0",
17-
"@tailwindcss/forms": "^0.3.2",
18-
"@tailwindcss/line-clamp": "^0.2.0",
19-
"@tailwindcss/typography": "^0.4.0",
20-
"@types/node": "^14.14.41",
21-
"@types/react": "^17.0.3",
22-
"@types/react-router-dom": "^5.1.7",
23-
"@types/tailwindcss": "^2.0.2",
24-
"autoprefixer": "^10.2.5",
25-
"postcss": "^8.2.12",
26-
"react-router-dom": "^5.2.0",
27-
"tailwindcss": "^2.1.1",
28-
"typescript": "^4.2.4",
29-
"vite": "^2.2.1",
30-
"vite-plugin-html": "^2.0.7"
31-
}
2+
"name": "my-app",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"dev": "vite",
6+
"build": "tsc && vite build",
7+
"serve": "vite preview"
8+
},
9+
"dependencies": {
10+
"preact": "^10.5.13"
11+
},
12+
"devDependencies": {
13+
"@headlessui/react": "^1.0.0",
14+
"@preact/preset-vite": "^2.1.0",
15+
"@prefresh/vite": "^2.2.1",
16+
"@tailwindcss/aspect-ratio": "^0.2.0",
17+
"@tailwindcss/forms": "^0.3.2",
18+
"@tailwindcss/line-clamp": "^0.2.0",
19+
"@tailwindcss/typography": "^0.4.0",
20+
"@types/node": "^14.14.41",
21+
"@types/react": "^17.0.3",
22+
"@types/react-router-dom": "^5.1.7",
23+
"@types/tailwindcss": "^2.0.2",
24+
"autoprefixer": "^10.2.5",
25+
"postcss": "^8.2.12",
26+
"react-router-dom": "^5.2.0",
27+
"tailwindcss": "^2.1.2",
28+
"typescript": "^4.2.4",
29+
"vite": "^2.2.1",
30+
"vite-plugin-html": "^2.0.7"
31+
}
3232
}

‎src/Components/bottom_menu.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Link } from 'react-router-dom';
2+
3+
export const BottomMenu = () => {
4+
return (
5+
<>
6+
<p className="space-x-4">
7+
<Link to="/">Home</Link>
8+
<Link to="/hi/Friends">Greetings page</Link>
9+
</p>
10+
</>
11+
);
12+
};

‎src/Components/logo.tsx‎

Lines changed: 60 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,62 @@
11
export const Logo = () => (
2-
<svg
3-
class="logo"
4-
height="180px"
5-
viewBox="-256 -256 1800 512"
6-
title="Preact"
7-
style="
8-
display: inline-block;
9-
margin: -0.25em 0px 0px;
10-
vertical-align: middle;
11-
"
12-
>
13-
<path
14-
d="M0,-256 221.7025033688164,-128 221.7025033688164,128 0,256 -221.7025033688164,128 -221.7025033688164,-128z"
15-
fill="white"
16-
></path>
17-
<ellipse
18-
cx="0"
19-
cy="0"
20-
rx="75px"
21-
ry="196px"
22-
stroke-width="16px"
23-
stroke-dasharray="365.2604060943886 81.7395939056114"
24-
stroke-dashoffset="1131.9689975248618"
25-
fill="none"
26-
stroke="#673ab8"
27-
transform="rotate(52)"
28-
></ellipse>
29-
<ellipse
30-
cx="0"
31-
cy="0"
32-
rx="75px"
33-
ry="196px"
34-
stroke-width="16px"
35-
stroke-dasharray="403.1225208830963 43.87747911690373"
36-
stroke-dashoffset="-963.0079812482553"
37-
fill="none"
38-
stroke="#673ab8"
39-
transform="rotate(-52)"
40-
></ellipse>
41-
<circle cx="0" cy="0" r="34" fill="#673ab8"></circle>
42-
<path
43-
fill="white"
44-
d="M289.85 25.25L289.85 125L272 125L272-122.63L335.88-122.63Q379.45-122.63 401.59-103.55Q423.73-84.48 423.73-49.13Q423.73-32.85 417.69-19.20Q411.65-5.55 400.27 4.34Q388.90 14.22 372.63 19.74Q356.35 25.25 335.88 25.25L289.85 25.25M289.85 10.90L335.88 10.90Q352.33 10.90 365.27 6.35Q378.23 1.80 387.24-6.25Q396.25-14.30 401.06-25.24Q405.88-36.18 405.88-49.13Q405.88-77.65 388.29-93.05Q370.70-108.45 335.88-108.45L289.85-108.45L289.85 10.90ZM497.58 13.00L497.58 125L479.73 125L479.73-122.63L542.90-122.63Q585.78-122.63 606.95-106.09Q628.13-89.55 628.13-57.53Q628.13-43.35 623.23-31.63Q618.33-19.90 609.14-11.06Q599.95-2.23 587 3.46Q574.05 9.15 557.78 10.90Q561.98 13.52 565.30 17.90L650.53 125L634.95 125Q632.15 125 630.14 123.95Q628.13 122.90 626.20 120.45L546.93 20.00Q543.95 16.15 540.54 14.57Q537.13 13.00 529.95 13.00L497.58 13.00M497.58-0.30L540.63-0.30Q557.08-0.30 570.11-4.24Q583.15-8.18 592.16-15.53Q601.18-22.88 605.90-33.20Q610.63-43.53 610.63-56.48Q610.63-82.90 593.30-95.68Q575.98-108.45 542.90-108.45L497.58-108.45L497.58-0.30ZM843.73-122.63L843.73-107.75L713.35-107.75L713.35-7.65L821.85-7.65L821.85 6.87L713.35 6.87L713.35 110.13L843.73 110.13L843.73 125L695.33 125L695.33-122.63L843.73-122.63ZM1088.55 125L1074.73 125Q1072.28 125 1070.70 123.69Q1069.13 122.38 1068.25 120.28L1039.03 48.35L917.40 48.35L888.35 120.28Q887.65 122.20 885.90 123.60Q884.15 125 881.70 125L868.05 125L969.38-122.63L987.23-122.63L1088.55 125M922.83 35.05L1033.78 35.05L983.20-90.08Q981.98-93.05 980.75-96.81Q979.53-100.58 978.30-104.78Q977.08-100.58 975.85-96.81Q974.63-93.05 973.40-89.90L922.83 35.05ZM1302.40 83.35Q1304.15 83.35 1305.38 84.57L1312.38 92.10Q1304.67 100.33 1295.58 106.89Q1286.47 113.45 1275.71 118.09Q1264.95 122.72 1252.09 125.26Q1239.22 127.80 1223.83 127.80Q1198.10 127.80 1176.66 118.79Q1155.22 109.78 1139.91 93.24Q1124.60 76.70 1116.03 53.25Q1107.45 29.80 1107.45 1.10Q1107.45-27.08 1116.29-50.35Q1125.13-73.63 1141.14-90.34Q1157.15-107.05 1179.46-116.24Q1201.78-125.43 1228.72-125.43Q1242.20-125.43 1253.40-123.41Q1264.60-121.40 1274.31-117.64Q1284.03-113.88 1292.60-108.28Q1301.17-102.68 1309.40-95.33L1303.97-87.45Q1302.58-85.35 1299.60-85.35Q1298.03-85.35 1295.58-87.19Q1293.13-89.03 1289.36-91.74Q1285.60-94.45 1280.26-97.69Q1274.92-100.93 1267.58-103.64Q1260.22-106.35 1250.60-108.19Q1240.97-110.03 1228.72-110.03Q1206.15-110.03 1187.25-102.24Q1168.35-94.45 1154.70-80.01Q1141.05-65.58 1133.44-45.01Q1125.83-24.45 1125.83 1.10Q1125.83 27.35 1133.35 48.00Q1140.88 68.65 1154.17 82.91Q1167.47 97.17 1185.59 104.79Q1203.70 112.40 1224.88 112.40Q1238.17 112.40 1248.59 110.65Q1259 108.90 1267.75 105.40Q1276.50 101.90 1284.03 96.82Q1291.55 91.75 1298.90 84.92Q1299.78 84.22 1300.56 83.79Q1301.35 83.35 1302.40 83.35ZM1530.42-122.63L1530.42-107.40L1443.45-107.40L1443.45 125L1425.60 125L1425.60-107.40L1338.10-107.40L1338.10-122.63L1530.42-122.63Z"
45-
></path>
46-
</svg>
2+
<>
3+
<p className="aspect-w-4 aspect-h-2">
4+
<svg
5+
x="0px"
6+
y="0px"
7+
width="600px"
8+
height="600px"
9+
viewBox="0 0 600 600"
10+
enable-background="new 0 0 600 600"
11+
>
12+
<g id="Layer_2">
13+
<path
14+
fill="none"
15+
stroke="#E91E63"
16+
stroke-width="24"
17+
stroke-miterlimit="10"
18+
d="M371.987,227.641
19+
c47.628,47.628,85.039,98.708,106.914,143.552c26.358,54.033,30.096,99.722,11.103,118.714
20+
c-19.793,19.793-68.267,15.884-125.731-12.979c-43.445-21.821-92.031-59.119-137.242-104.331
21+
c-46.354-46.354-84.95-95.545-106.667-139.816c-27.48-56.023-30.057-103.743-10.643-123.157
22+
c18.838-18.839,63.248-16.056,116.694,9.757C271.574,141.193,323.895,179.548,371.987,227.641z"
23+
/>
24+
<path
25+
fill="none"
26+
stroke="#E91E63"
27+
stroke-width="24"
28+
stroke-miterlimit="10"
29+
d="M272.931,201.125
30+
c65.052-17.465,127.989-24.354,177.767-20.902c59.974,4.16,101.42,23.747,108.385,49.688
31+
c7.259,27.033-20.345,67.073-74.054,102.434c-40.608,26.733-97.189,50.188-158.941,66.769
32+
c-63.312,16.998-125.207,25.858-174.408,22.553c-62.26-4.181-104.884-25.789-112.004-52.306
33+
c-6.907-25.731,17.688-62.811,66.75-96.214C147.879,244.923,207.243,218.761,272.931,201.125z"
34+
/>
35+
<path
36+
fill="none"
37+
stroke="#E91E63"
38+
stroke-width="24"
39+
stroke-miterlimit="10"
40+
d="M200.469,273.707
41+
c17.357-65.081,42.82-123.05,70.671-164.45c33.556-49.882,71.225-76.008,97.178-69.086c27.045,7.212,47.949,51.123,51.76,115.315
42+
c2.883,48.533-5.055,109.266-21.531,171.046c-16.892,63.341-40.126,121.389-67.562,162.365
43+
c-34.716,51.852-74.723,77.988-101.252,70.913c-25.743-6.865-45.584-46.692-50.021-105.881
44+
C175.963,403.92,182.944,339.424,200.469,273.707z"
45+
/>
46+
</g>
47+
<g id="Layer_3">
48+
<path
49+
fill="#E91E63"
50+
d="M300,349.369c-1.019,0-1.881-0.353-2.586-1.058l-36.679-35.386c-0.392-0.313-0.931-0.822-1.617-1.528
51+
c-0.686-0.705-1.773-1.988-3.262-3.851c-1.489-1.86-2.822-3.771-3.997-5.73s-2.224-4.33-3.145-7.112
52+
c-0.92-2.782-1.381-5.486-1.381-8.111c0-8.621,2.488-15.361,7.465-20.221c4.977-4.859,11.854-7.289,20.631-7.289
53+
c2.43,0,4.909,0.421,7.436,1.264c2.527,0.843,4.879,1.979,7.054,3.41c2.174,1.43,4.046,2.772,5.613,4.026s3.057,2.586,4.467,3.997
54+
c1.411-1.411,2.899-2.743,4.467-3.997c1.568-1.254,3.438-2.596,5.614-4.026c2.175-1.431,4.525-2.567,7.054-3.41
55+
c2.527-0.842,5.006-1.264,7.435-1.264c8.778,0,15.655,2.43,20.632,7.289c4.978,4.859,7.466,11.6,7.466,20.221
56+
c0,8.66-4.487,17.477-13.461,26.451l-36.619,35.268C301.881,349.017,301.019,349.369,300,349.369z"
57+
/>
58+
</g>
59+
</svg>
60+
</p>
61+
</>
4762
);

‎src/Indexes/components.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
import { Logo } from '__/Components/logo';
2+
import { BottomMenu } from '__/Components/bottom_menu';
23

3-
export { Logo };
4+
export { Logo, BottomMenu };

‎src/Indexes/views.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { NoMatch } from '__/Views/no_match';
2-
import { Hello } from '__/Views/hello';
2+
import { Welcome } from '__/Views/welcome';
3+
import { Greetings } from '__/Views/greetings';
34

4-
export { NoMatch, Hello };
5+
export { NoMatch, Welcome, Greetings };

‎src/Views/greetings.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { useParams } from 'react-router-dom';
2+
import { Logo, BottomMenu } from '__/Indexes/components';
3+
4+
export const Greetings = () => {
5+
let { name }: any = useParams();
6+
7+
return (
8+
<>
9+
<div className="container prose mx-auto py-4 text-center max-w-lg">
10+
<Logo />
11+
<h1>👋 Greetings, {name}!</h1>
12+
<p>
13+
Yep, with <strong>full backward compatibility</strong> to all of React.js ecosystem, but
14+
without its overhead!
15+
</p>
16+
<BottomMenu />
17+
</div>
18+
</>
19+
);
20+
};

‎src/Views/hello.tsx‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎src/Views/no_match.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
1+
import { Logo, BottomMenu } from '__/Indexes/components';
2+
13
export const NoMatch = () => {
24
return (
35
<>
4-
<div className="container prose mx-auto py-4">
5-
<h1>404 Not Found</h1>
6+
<div className="container prose mx-auto py-4 text-center max-w-lg">
7+
<Logo />
8+
<h1>😕 Oops...</h1>
9+
<p>Sorry, but this page is not found!</p>
10+
<BottomMenu />
611
</div>
712
</>
813
);

‎src/Views/welcome.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Logo, BottomMenu } from '__/Indexes/components';
2+
3+
export const Welcome = () => {
4+
return (
5+
<>
6+
<div className="container prose mx-auto py-4 text-center max-w-lg">
7+
<Logo />
8+
<h1>✨ Welcome to Reactless.ts!</h1>
9+
<p>
10+
A handy production-ready template for <strong>rapidly</strong> frontend development that
11+
you've often dreamed of. Included awesome <strong>Preact</strong> framework with
12+
TypeScript, <strong>Tailwind CSS</strong> & <strong>Headless UI</strong> visual
13+
frameworks, and configured next generation frontend tooling called <strong>Vite</strong>.
14+
</p>
15+
<BottomMenu />
16+
</div>
17+
</>
18+
);
19+
};

0 commit comments

Comments
 (0)