@inglorious/logo 2.0.11 → 2.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +71 -71
- package/package.json +4 -4
- package/src/style.css +44 -44
package/README.md
CHANGED
|
@@ -1,71 +1,71 @@
|
|
|
1
|
-
# @inglorious/logo
|
|
2
|
-
|
|
3
|
-
The Inglorious Logo component — a small, dependency-light package that provides the 3D logo render and interactive handlers for Inglorious Web.
|
|
4
|
-
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
## Install
|
|
8
|
-
|
|
9
|
-
Add the package to your project:
|
|
10
|
-
|
|
11
|
-
```bash
|
|
12
|
-
pnpm add @inglorious/logo
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
---
|
|
16
|
-
|
|
17
|
-
## Usage
|
|
18
|
-
|
|
19
|
-
Import the package and its stylesheet, and (optionally) the types for TypeScript.
|
|
20
|
-
|
|
21
|
-
Then, register the `logo` type in your store, create an entity of that type, and use `api.render(entityId)` inside your templates (see the [`web-logo`](https://github.com/IngloriousCoderz/inglorious-forge/tree/main/examples/apps/web-logo) demo app).
|
|
22
|
-
|
|
23
|
-
```js
|
|
24
|
-
import { createStore } from "@inglorious/web"
|
|
25
|
-
import { logo } from "@inglorious/logo"
|
|
26
|
-
import "@inglorious/logo/style.css"
|
|
27
|
-
|
|
28
|
-
const entities = {
|
|
29
|
-
logo: {
|
|
30
|
-
type: "logo",
|
|
31
|
-
size: 256,
|
|
32
|
-
faces: [
|
|
33
|
-
{ image: "I", reverse: false, eye: true },
|
|
34
|
-
{ image: "W", reverse: false, eye: false },
|
|
35
|
-
],
|
|
36
|
-
isInteractive: false,
|
|
37
|
-
isScrollPrevented: true,
|
|
38
|
-
},
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
const store = createStore({
|
|
42
|
-
types: { logo },
|
|
43
|
-
entities,
|
|
44
|
-
})
|
|
45
|
-
|
|
46
|
-
// app render function receives `api` from mount()
|
|
47
|
-
const app = {
|
|
48
|
-
render(api) {
|
|
49
|
-
return api.render("logo")
|
|
50
|
-
},
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
// TypeScript: import the entity type if you want to annotate entity shapes
|
|
54
|
-
// import type { LogoEntity } from "@inglorious/logo"
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
---
|
|
58
|
-
|
|
59
|
-
## License
|
|
60
|
-
|
|
61
|
-
**MIT License - Free and open source**
|
|
62
|
-
|
|
63
|
-
Created by [Matteo Antony Mistretta](https://github.com/IngloriousCoderz)
|
|
64
|
-
|
|
65
|
-
You're free to use, modify, and distribute this software. See [LICENSE](./LICENSE) for details.
|
|
66
|
-
|
|
67
|
-
---
|
|
68
|
-
|
|
69
|
-
## Contributing
|
|
70
|
-
|
|
71
|
-
Contributions welcome! Please read our [Contributing Guidelines](../../CONTRIBUTING.md) first.
|
|
1
|
+
# @inglorious/logo
|
|
2
|
+
|
|
3
|
+
The Inglorious Logo component — a small, dependency-light package that provides the 3D logo render and interactive handlers for Inglorious Web.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
Add the package to your project:
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
pnpm add @inglorious/logo
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
## Usage
|
|
18
|
+
|
|
19
|
+
Import the package and its stylesheet, and (optionally) the types for TypeScript.
|
|
20
|
+
|
|
21
|
+
Then, register the `logo` type in your store, create an entity of that type, and use `api.render(entityId)` inside your templates (see the [`web-logo`](https://github.com/IngloriousCoderz/inglorious-forge/tree/main/examples/apps/web-logo) demo app).
|
|
22
|
+
|
|
23
|
+
```js
|
|
24
|
+
import { createStore } from "@inglorious/web"
|
|
25
|
+
import { logo } from "@inglorious/logo"
|
|
26
|
+
import "@inglorious/logo/style.css"
|
|
27
|
+
|
|
28
|
+
const entities = {
|
|
29
|
+
logo: {
|
|
30
|
+
type: "logo",
|
|
31
|
+
size: 256,
|
|
32
|
+
faces: [
|
|
33
|
+
{ image: "I", reverse: false, eye: true },
|
|
34
|
+
{ image: "W", reverse: false, eye: false },
|
|
35
|
+
],
|
|
36
|
+
isInteractive: false,
|
|
37
|
+
isScrollPrevented: true,
|
|
38
|
+
},
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
const store = createStore({
|
|
42
|
+
types: { logo },
|
|
43
|
+
entities,
|
|
44
|
+
})
|
|
45
|
+
|
|
46
|
+
// app render function receives `api` from mount()
|
|
47
|
+
const app = {
|
|
48
|
+
render(api) {
|
|
49
|
+
return api.render("logo")
|
|
50
|
+
},
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// TypeScript: import the entity type if you want to annotate entity shapes
|
|
54
|
+
// import type { LogoEntity } from "@inglorious/logo"
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
---
|
|
58
|
+
|
|
59
|
+
## License
|
|
60
|
+
|
|
61
|
+
**MIT License - Free and open source**
|
|
62
|
+
|
|
63
|
+
Created by [Matteo Antony Mistretta](https://github.com/IngloriousCoderz)
|
|
64
|
+
|
|
65
|
+
You're free to use, modify, and distribute this software. See [LICENSE](./LICENSE) for details.
|
|
66
|
+
|
|
67
|
+
---
|
|
68
|
+
|
|
69
|
+
## Contributing
|
|
70
|
+
|
|
71
|
+
Contributions welcome! Please read our [Contributing Guidelines](../../CONTRIBUTING.md) first.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@inglorious/logo",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.12",
|
|
4
4
|
"description": "The Inglorious Coderz logo, remade to be compatible with Inglorious Web.",
|
|
5
5
|
"author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
|
|
6
6
|
"license": "MIT",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"access": "public"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@inglorious/web": "4.0.
|
|
44
|
+
"@inglorious/web": "4.0.5"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"prettier": "^3.6.2",
|
|
@@ -53,8 +53,8 @@
|
|
|
53
53
|
},
|
|
54
54
|
"types": "types/index.d.ts",
|
|
55
55
|
"scripts": {
|
|
56
|
-
"format": "prettier --write
|
|
57
|
-
"lint": "eslint .
|
|
56
|
+
"format": "prettier --write .",
|
|
57
|
+
"lint": "eslint .",
|
|
58
58
|
"test:watch": "vitest",
|
|
59
59
|
"test": "vitest run"
|
|
60
60
|
}
|
package/src/style.css
CHANGED
|
@@ -1,44 +1,44 @@
|
|
|
1
|
-
.iw-logo {
|
|
2
|
-
width: var(--size);
|
|
3
|
-
height: var(--size);
|
|
4
|
-
perspective: var(--size);
|
|
5
|
-
user-select: none;
|
|
6
|
-
|
|
7
|
-
> .iw-logo-cube {
|
|
8
|
-
height: var(--size);
|
|
9
|
-
transform-style: preserve-3d;
|
|
10
|
-
transform: var(--transform);
|
|
11
|
-
transition: ease-out 0.2s;
|
|
12
|
-
|
|
13
|
-
> .iw-logo-cube-face {
|
|
14
|
-
position: absolute;
|
|
15
|
-
width: 100%;
|
|
16
|
-
height: 100%;
|
|
17
|
-
transform-origin: bottom center;
|
|
18
|
-
|
|
19
|
-
> img {
|
|
20
|
-
position: absolute;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
&.left {
|
|
24
|
-
transform: rotateY(0deg) translateZ(var(--z-translation)) skew(12deg);
|
|
25
|
-
|
|
26
|
-
> img {
|
|
27
|
-
transform: var(--left-face-flip);
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
&.right {
|
|
32
|
-
transform: rotateY(90deg) translateZ(var(--z-translation)) skew(-12deg);
|
|
33
|
-
|
|
34
|
-
> img {
|
|
35
|
-
transform: var(--right-face-flip);
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
> .iw-logo-cube-face-eye {
|
|
39
|
-
transform: rotateY(180deg);
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
}
|
|
1
|
+
.iw-logo {
|
|
2
|
+
width: var(--size);
|
|
3
|
+
height: var(--size);
|
|
4
|
+
perspective: var(--size);
|
|
5
|
+
user-select: none;
|
|
6
|
+
|
|
7
|
+
> .iw-logo-cube {
|
|
8
|
+
height: var(--size);
|
|
9
|
+
transform-style: preserve-3d;
|
|
10
|
+
transform: var(--transform);
|
|
11
|
+
transition: ease-out 0.2s;
|
|
12
|
+
|
|
13
|
+
> .iw-logo-cube-face {
|
|
14
|
+
position: absolute;
|
|
15
|
+
width: 100%;
|
|
16
|
+
height: 100%;
|
|
17
|
+
transform-origin: bottom center;
|
|
18
|
+
|
|
19
|
+
> img {
|
|
20
|
+
position: absolute;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&.left {
|
|
24
|
+
transform: rotateY(0deg) translateZ(var(--z-translation)) skew(12deg);
|
|
25
|
+
|
|
26
|
+
> img {
|
|
27
|
+
transform: var(--left-face-flip);
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&.right {
|
|
32
|
+
transform: rotateY(90deg) translateZ(var(--z-translation)) skew(-12deg);
|
|
33
|
+
|
|
34
|
+
> img {
|
|
35
|
+
transform: var(--right-face-flip);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
> .iw-logo-cube-face-eye {
|
|
39
|
+
transform: rotateY(180deg);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|