Skip to content

Commit bf6690a

Browse files
StartAutomatingStartAutomating
committed
feat: Shape README and example fixes ( Fixes #17 )
1 parent 543e4c5 commit bf6690a

3 files changed

Lines changed: 219 additions & 40 deletions

File tree

‎Commands/Get-Shape.ps1‎

Lines changed: 2 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -43,44 +43,7 @@ function Get-Shape {
4343
"body { max-width: 100vw; width: 100vh }"
4444
".tri { width: 100%; height: 100%; background: #4488ff; clip-path:$(shape polygon 50% 0% 100% 100% 0% 100%)}"
4545
"</style></head><body><div class='tri'></div></body></html>"
46-
) > ./tri.html
47-
.EXAMPLE
48-
# Make a page with a random conic gradient
49-
50-
$gradient = @(
51-
"conic"
52-
# Make 2 to 4 random colors
53-
foreach ($n in 1..(Get-Random -Min 2 -Max 4)) {
54-
"#{0:x6}" -f (Get-Random -Max 0xffffff)
55-
}
56-
) | gradient
57-
# Generate a minimal page with the gradient
58-
@(
59-
60-
"<html><head><style>"
61-
"body { max-width: 100vw; width: 100vh; background:$gradient}"
62-
"</style></head></html>"
63-
) > ./randomconicgradient.html
64-
.EXAMPLE
65-
# Make a page with a random linear gradient
66-
67-
$gradient = @(
68-
"linear"
69-
# Make 2 to 4 random colors
70-
foreach ($n in 1..(Get-Random -Min 2 -Max 4)) {
71-
"#{0:x6}" -f (Get-Random -Max 0xffffff)
72-
}
73-
) | gradient
74-
# Generate a minimal page with the gradient
75-
@(
76-
77-
"<html><head><style>"
78-
"body { max-width: 100vw; width: 100vh; background:$gradient}"
79-
"</style></head></html>"
80-
) > ./randomlineargradient.html
81-
.EXAMPLE
82-
'#4488ff', '#224488' | Gradient # We can pipe into gradient
83-
46+
) > ./tri.html
8447
#>
8548
[Alias('Shape',
8649
'circle','ellipse',
@@ -114,4 +77,4 @@ function Get-Shape {
11477
# This allows us to accept any input, and modify the gradient after it has been created.
11578

11679
# The implementation of the Gradient logic is in PowerShell extended types.
117-
}
80+
}

‎README.md‎

Lines changed: 103 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,104 @@
1+
12
# Shape
2-
CSS Shapes with PowerShell
3+
4+
## CSS Shapes with PowerShell
5+
6+
[CSS Shapes](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes) are pretty amazing!
7+
8+
There are 8 shape types:
9+
10+
* [circle](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/basic-shape/circle)
11+
* [ellipse](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/basic-shape/ellipse)
12+
* [inset](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/basic-shape/inset)
13+
* [path](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/basic-shape/path)
14+
* [polygon](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/basic-shape/polygon)
15+
* [rect](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/basic-shape/rect)
16+
* [shape](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/basic-shape/shape)
17+
* [xywh](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/basic-shape/xywh)
18+
Unfortunately, that also means there are 8 _slightly_ different ways to write a shape.
19+
20+
Polygons work in pairs. Paths must be quoted.
21+
22+
Most others need to be joined with spaces,
23+
but shape itself needs to be joined with spaces and commas before keywords.
24+
25+
This module exists in order to make it _slightly_ easier to generate shapes.
26+
27+
## Installing and Importing
28+
29+
You can install the module from the PowerShell Gallery:
30+
31+
~~~PowerShell
32+
Install-Module Shape
33+
~~~
34+
35+
After it is installed, you can simply import it:
36+
37+
~~~PowerShell
38+
Import-Module Shape -PassThru
39+
~~~
40+
41+
### Cloning and importing
42+
43+
You can also clone this repository and import the module locally:
44+
45+
~~~PowerShell
46+
git clone https://github.com/PowerShellWeb/Shape
47+
cd ./Shape
48+
Import-Module ./ -PassThru
49+
~~~
50+
51+
52+
## Getting Started
53+
54+
Shape tries to have simple syntax.
55+
56+
After importing, we can create any CSS shape with simple syntax
57+
58+
~~~PowerShell
59+
circle 50%
60+
ellipse 4rem 50% at right center
61+
~~~
62+
63+
64+
## Using Shapes
65+
66+
To use a shape in a page, we simply make it into a string.
67+
68+
~~~PowerShell
69+
".circle { width: 100%; height: 100%; clip-path:$(circle 50%) }"
70+
~~~
71+
72+
Here's a page with nothing but an ellipse.
73+
74+
We need to provide a background color to see the shape.
75+
76+
~~~PowerShell
77+
@(
78+
"<html>"
79+
"<head><style>"
80+
"body { max-width: 100vw; height: 100vh}"
81+
".ellipse { background-color: #4488ff;width: 100%; height:100%; clip-path:$(ellipse 50% 50%); }"
82+
"</style></head>"
83+
"<body><div class='ellipse'></div></body>"
84+
"</html>"
85+
) > ./ellipse.html
86+
~~~
87+
88+
Here's a page with nothing but an inset path:
89+
90+
~~~PowerShell
91+
@(
92+
"<html>"
93+
"<head><style>"
94+
"body { max-width: 100vw; height: 100vh}"
95+
".inset { background-color: #4488ff;width: 100%; height:100%; clip-path:$(inset 5%); }"
96+
"</style></head>"
97+
"<body><div class='inset'></div></body>"
98+
"</html>"
99+
) > ./inset.html
100+
~~~
101+
102+
You can use the shape module to generate any CSS shape.
103+
104+
Have Fun!

‎README.md.ps1‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
@"
2+
3+
# Shape
4+
5+
## CSS Shapes with PowerShell
6+
7+
[CSS Shapes](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes) are pretty amazing!
8+
9+
There are $((shape).Help.Count) shape types:
10+
11+
"@
12+
13+
$shapeHelp = (shape).Help
14+
foreach ($shapeType in $shapeHelp.Keys) {
15+
"* [$shapeType]($($shapeHelp[$shapeType]))"
16+
}
17+
18+
@"
19+
Unfortunately, that also means there are $($shapeHelp.Count) _slightly_ different ways to write a shape.
20+
21+
Polygons work in pairs. Paths must be quoted.
22+
23+
Most others need to be joined with spaces,
24+
but shape itself needs to be joined with spaces and commas before keywords.
25+
26+
This module exists in order to make it _slightly_ easier to generate shapes.
27+
"@
28+
29+
30+
@"
31+
32+
## Installing and Importing
33+
34+
You can install the module from the PowerShell Gallery:
35+
36+
~~~PowerShell
37+
Install-Module Shape
38+
~~~
39+
40+
After it is installed, you can simply import it:
41+
42+
~~~PowerShell
43+
Import-Module Shape -PassThru
44+
~~~
45+
46+
### Cloning and importing
47+
48+
You can also clone this repository and import the module locally:
49+
50+
~~~PowerShell
51+
git clone https://github.com/PowerShellWeb/Shape
52+
cd ./Shape
53+
Import-Module ./ -PassThru
54+
~~~
55+
"@
56+
57+
58+
@'
59+
60+
61+
## Getting Started
62+
63+
Shape tries to have simple syntax.
64+
65+
After importing, we can create any CSS shape with simple syntax
66+
67+
~~~PowerShell
68+
circle 50%
69+
ellipse 4rem 50% at right center
70+
~~~
71+
72+
73+
## Using Shapes
74+
75+
To use a shape in a page, we simply make it into a string.
76+
77+
~~~PowerShell
78+
".circle { width: 100%; height: 100%; clip-path:$(circle 50%) }"
79+
~~~
80+
81+
Here's a page with nothing but an ellipse.
82+
83+
We need to provide a background color to see the shape.
84+
85+
~~~PowerShell
86+
@(
87+
"<html>"
88+
"<head><style>"
89+
"body { max-width: 100vw; height: 100vh}"
90+
".ellipse { background-color: #4488ff;width: 100%; height:100%; clip-path:$(ellipse 50% 50%); }"
91+
"</style></head>"
92+
"<body><div class='ellipse'></div></body>"
93+
"</html>"
94+
) > ./ellipse.html
95+
~~~
96+
97+
Here's a page with nothing but an inset path:
98+
99+
~~~PowerShell
100+
@(
101+
"<html>"
102+
"<head><style>"
103+
"body { max-width: 100vw; height: 100vh}"
104+
".inset { background-color: #4488ff;width: 100%; height:100%; clip-path:$(inset 5%); }"
105+
"</style></head>"
106+
"<body><div class='inset'></div></body>"
107+
"</html>"
108+
) > ./inset.html
109+
~~~
110+
111+
You can use the shape module to generate any CSS shape.
112+
113+
Have Fun!
114+
'@

0 commit comments

Comments
 (0)