Skip to content

Commit 55bd872

Browse files
astururasturur
authored
feat(): Add a reference on the home to the latest release and link to the repo in resources (#208)
1 parent 4b2c1ae commit 55bd872

File tree

20 files changed

+325
-247
lines changed

20 files changed

+325
-247
lines changed

‎src/components/Header/Header.astro‎

Lines changed: 36 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,33 @@
11
<header id="site-header">
2-
<a id="logo" href="/">
3-
<img alt="Fabric.js logo" src="/logo.svg" width="200" height="63" />
4-
</a>
5-
<slot />
6-
<nav>
7-
<ul>
8-
<li>
9-
<a href="/">
10-
Home
11-
</a>
12-
</li>
13-
<li>
14-
<a href="/demos">
15-
Demos
16-
</a>
17-
</li>
18-
<li>
19-
<a href="/docs">
20-
Docs
21-
</a>
22-
</li>
23-
<li>
24-
<a href="/api">
25-
Api specs
26-
</a>
27-
</li>
28-
<li>
29-
<a href="/resources">
30-
Resources
31-
</a>
32-
</li>
33-
<li>
34-
<a href="/team">
35-
Team
36-
</a>
37-
</li>
38-
</ul>
39-
</nav>
40-
</header>
2+
<a id="logo" href="/">
3+
<img alt="Fabric.js logo" src="/logo.svg" width="200" height="63" />
4+
</a>
5+
<slot />
6+
<nav>
7+
<ul>
8+
<li>
9+
<a href="/"> Home </a>
10+
</li>
11+
<li>
12+
<a href="/demos"> Demos </a>
13+
</li>
14+
<li>
15+
<a href="/docs"> Docs </a>
16+
</li>
17+
<li>
18+
<a href="/api"> Api specs </a>
19+
</li>
20+
<li>
21+
<a href="/resources"> Resources </a>
22+
</li>
23+
<li>
24+
<a href="/team"> Team </a>
25+
</li>
26+
</ul>
27+
</nav>
28+
</header>
4129

42-
<style>
30+
<style>
4331
#site-header {
4432
display: flex;
4533
align-items: center;
@@ -55,7 +43,7 @@
5543
text-align: center;
5644
align-self: flex-start;
5745
}
58-
46+
5947
#site-header > nav {
6048
position: fixed;
6149
bottom: 0;
@@ -92,7 +80,7 @@
9280
z-index: -1;
9381
pointer-events: none;
9482
}
95-
83+
9684
#site-header > nav > ul {
9785
width: 100%;
9886
display: flex;
@@ -106,7 +94,7 @@
10694
padding: 0px;
10795
}
10896
/*#site-header>nav>ul>li{display:inline-block;width:25%}*/
109-
97+
11098
#site-header > nav > ul > li > a {
11199
color: var(--font-color-normal);
112100
display: block;
@@ -121,7 +109,7 @@
121109
#site-header > nav > ul > li > a:hover {
122110
color: var(--primary-color);
123111
}
124-
112+
125113
@media (orientation: landscape) {
126114
#site-header > nav {
127115
width: 300px;
@@ -137,13 +125,13 @@
137125
flex-flow: row nowrap;
138126
align-items: center; /*vertical alignment; 'stretch' will give full height*/
139127
justify-content: space-between;
140-
128+
141129
position: fixed;
142130
top: 0;
143131
left: 0;
144132
width: 100%;
145133
height: var(--header-height);
146-
padding: 0 var(--padding-left-right);
134+
padding: 0 1rem;
147135
background: #fff;
148136
/*border-bottom:1px solid #eee;/*#eaeaea*/
149137
z-index: 9;
@@ -164,9 +152,8 @@
164152
border-radius: unset;
165153
padding: 0;
166154
box-shadow: unset;
167-
margin-left: 16px;
168155
}
169-
156+
170157
#site-header > nav > ul > li > a {
171158
height: var(--header-height);
172159
padding: 24px 0;
@@ -177,4 +164,4 @@
177164
box-shadow: 0 -3px 0 0 var(--primary-color) inset;
178165
}
179166
}
180-
</style>
167+
</style>

‎src/components/Header/HeaderWithSearch.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,5 @@ import Header from './Header.astro';
44
---
55

66
<Header>
7-
<Search {...Astro.props} />
8-
</Header>
7+
<Search {...Astro.props} />
8+
</Header>

‎src/components/LatestRelease/LatestRelease.astro‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
---
2+
export interface Props {
3+
version?: string;
4+
url?: string;
5+
subtitle?: string;
6+
}
7+
const {
8+
version = '6.9.0',
9+
url = 'https://github.com/fabricjs/fabric.js/releases',
10+
subtitle = 'Download latest release from GitHub',
11+
} = Astro.props as Props;
12+
---
13+
14+
<a
15+
class="release-card"
16+
href={url}
17+
target="_blank"
18+
rel="noopener noreferrer"
19+
aria-label="Fabric.js latest releases on GitHub"
20+
>
21+
<span class="icon" aria-hidden="true">
22+
<!-- GitHub Mark (simple) -->
23+
<svg
24+
width="28"
25+
height="28"
26+
viewBox="0 0 16 16"
27+
fill="currentColor"
28+
xmlns="http://www.w3.org/2000/svg"
29+
aria-hidden="true"
30+
>
31+
<path
32+
fill-rule="evenodd"
33+
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.2 1.87.86 2.33.66.07-.52.28-.86.51-1.06-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
34+
></path>
35+
</svg>
36+
</span>
37+
<span class="content">
38+
<strong class="title">Latest release {version}</strong>
39+
<span class="subtitle">{subtitle}</span>
40+
</span>
41+
</a>
42+
43+
<style>
44+
.release-card {
45+
display: flex;
46+
align-items: center;
47+
gap: 12px;
48+
padding: 0.75rem;
49+
border-radius: 8px;
50+
border: 1px solid rgba(0, 0, 0, 0.08);
51+
color: var(--color-text, #111);
52+
text-decoration: none;
53+
max-width: fit-content;
54+
margin: 20px auto;
55+
transition:
56+
transform 0.12s ease,
57+
box-shadow 0.12s ease;
58+
}
59+
.release-card .icon {
60+
display: inline-flex;
61+
align-items: center;
62+
justify-content: center;
63+
width: 38px;
64+
height: 38px;
65+
border-radius: 8px;
66+
}
67+
.release-card .subtitle {
68+
display: block;
69+
font-size: 0.75rem
70+
color: rgba(0, 0, 0, 0.6);
71+
}
72+
</style>

‎src/components/Resources/Resources.astro‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
---
22
import './resources.css';
33
const links = [
4+
{
5+
link: 'https://github.com/fabricjs/fabric.js',
6+
name: '@fabricjs/fabric.js',
7+
description: ' - The powerful and simple javascript HTML Canvas library',
8+
},
49
{
510
link: 'https://github.com/cs-open/react-fabric',
611
description:
@@ -18,8 +23,8 @@ const links = [
1823
<li>
1924
<a href={link.link} target="_blank" class="resource-label">
2025
{link.name}
21-
</a>{' '}
22-
&nbsp;<span class="resource-value">{link.description}</span>
26+
</a>
27+
<span class="resource-value">{link.description}</span>
2328
</li>
2429
))
2530
}

‎src/components/Resources/resources.css‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,19 @@
11
#resources {
2-
display: flex;
3-
flex-direction: column;
4-
align-items: center;
5-
justify-items: center;
6-
7-
}
8-
#resources .resource-label{
9-
color: var(--primary-color)
10-
}
2+
display: flex;
3+
flex-direction: column;
4+
align-items: center;
5+
justify-items: center;
6+
}
7+
#resources ul {
8+
display: flex;
9+
flex-direction: column;
10+
row-gap: 1rem;
11+
}
12+
#resources li {
13+
display: flex;
14+
flex-direction: row;
15+
gap: 1rem;
16+
}
17+
#resources .resource-label {
18+
color: var(--primary-color);
19+
}

‎src/content/docs/api/classes/Canvas.md‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1354,6 +1354,27 @@ Defined in: [src/canvas/Canvas.ts:898](https://github.com/fabricjs/fabric.js/blo
13541354

13551355
***
13561356

1357+
### \_chooseObjectsToRender()
1358+
1359+
> **\_chooseObjectsToRender**(): [`FabricObject`](/api/classes/fabricobject/)\<`Partial`\<[`FabricObjectProps`](/api/interfaces/fabricobjectprops/)\>, [`SerializedObjectProps`](/api/interfaces/serializedobjectprops/), [`ObjectEvents`](/api/interfaces/objectevents/)\>[]
1360+
1361+
Defined in: [src/canvas/SelectableCanvas.ts:376](https://github.com/fabricjs/fabric.js/blob/9a792f4b7b8031f02ec7ea4ce8c99f810e45cfec/src/canvas/SelectableCanvas.ts#L376)
1362+
1363+
Divides objects in two groups, one to render immediately
1364+
and one to render as activeGroup.
1365+
1366+
#### Returns
1367+
1368+
[`FabricObject`](/api/classes/fabricobject/)\<`Partial`\<[`FabricObjectProps`](/api/interfaces/fabricobjectprops/)\>, [`SerializedObjectProps`](/api/interfaces/serializedobjectprops/), [`ObjectEvents`](/api/interfaces/objectevents/)\>[]
1369+
1370+
objects to render immediately and pushes the other in the activeGroup.
1371+
1372+
#### Inherited from
1373+
1374+
`SelectableCanvas._chooseObjectsToRender`
1375+
1376+
***
1377+
13571378
### \_discardActiveObject()
13581379

13591380
> **\_discardActiveObject**(`e?`, `object?`): `this is { _activeObject: undefined }`
@@ -1390,27 +1411,6 @@ true if the active object has been discarded
13901411

13911412
***
13921413

1393-
### \_chooseObjectsToRender()
1394-
1395-
> **\_chooseObjectsToRender**(): [`FabricObject`](/api/classes/fabricobject/)\<`Partial`\<[`FabricObjectProps`](/api/interfaces/fabricobjectprops/)\>, [`SerializedObjectProps`](/api/interfaces/serializedobjectprops/), [`ObjectEvents`](/api/interfaces/objectevents/)\>[]
1396-
1397-
Defined in: [src/canvas/SelectableCanvas.ts:376](https://github.com/fabricjs/fabric.js/blob/9a792f4b7b8031f02ec7ea4ce8c99f810e45cfec/src/canvas/SelectableCanvas.ts#L376)
1398-
1399-
Divides objects in two groups, one to render immediately
1400-
and one to render as activeGroup.
1401-
1402-
#### Returns
1403-
1404-
[`FabricObject`](/api/classes/fabricobject/)\<`Partial`\<[`FabricObjectProps`](/api/interfaces/fabricobjectprops/)\>, [`SerializedObjectProps`](/api/interfaces/serializedobjectprops/), [`ObjectEvents`](/api/interfaces/objectevents/)\>[]
1405-
1406-
objects to render immediately and pushes the other in the activeGroup.
1407-
1408-
#### Inherited from
1409-
1410-
`SelectableCanvas._chooseObjectsToRender`
1411-
1412-
***
1413-
14141414
### \_onStackOrderChanged()
14151415

14161416
> **\_onStackOrderChanged**(): `void`

‎src/content/docs/api/classes/FabricText.md‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -377,6 +377,21 @@ when being scaled via the controls.
377377

378378
***
379379

380+
### charSpacing
381+
382+
> **charSpacing**: `number`
383+
384+
Defined in: [src/shapes/Text/Text.ts:347](https://github.com/fabricjs/fabric.js/blob/9a792f4b7b8031f02ec7ea4ce8c99f810e45cfec/src/shapes/Text/Text.ts#L347)
385+
386+
additional space between characters
387+
expressed in thousands of em unit
388+
389+
#### Implementation of
390+
391+
`UniqueTextProps.charSpacing`
392+
393+
***
394+
380395
### clipPath?
381396

382397
> `optional` **clipPath**: [`BaseFabricObject`](/api/classes/basefabricobject/)\<`Partial`\<`ObjectProps`\>, [`SerializedObjectProps`](/api/interfaces/serializedobjectprops/), [`ObjectEvents`](/api/interfaces/objectevents/)\>
@@ -843,21 +858,6 @@ null
843858

844859
***
845860

846-
### charSpacing
847-
848-
> **charSpacing**: `number`
849-
850-
Defined in: [src/shapes/Text/Text.ts:347](https://github.com/fabricjs/fabric.js/blob/9a792f4b7b8031f02ec7ea4ce8c99f810e45cfec/src/shapes/Text/Text.ts#L347)
851-
852-
additional space between characters
853-
expressed in thousands of em unit
854-
855-
#### Implementation of
856-
857-
`UniqueTextProps.charSpacing`
858-
859-
***
860-
861861
### includeDefaultValues
862862

863863
> **includeDefaultValues**: `boolean`

0 commit comments

Comments
 (0)