tek-ms-header 1.0.3
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 +73 -0
- package/dist/assets/index-vDL6lUWX.js +5 -0
- package/dist/assets/mama_solution_icon-C3CyFw6W.svg +36 -0
- package/dist/index.html +13 -0
- package/package.json +32 -0
package/README.md
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
# ms-header-tek
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
A lightweight **Vanilla TypeScript** component that renders a header into any DOM element.
|
|
7
|
+
|
|
8
|
+
## Installation
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install ms-header-tek
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Usage
|
|
15
|
+
|
|
16
|
+
```ts
|
|
17
|
+
import { Header } from 'ms-header-tek';
|
|
18
|
+
|
|
19
|
+
const mountPoint = document.getElementById('header') as HTMLElement;
|
|
20
|
+
|
|
21
|
+
const header = new Header(mountPoint);
|
|
22
|
+
header.render();
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## API
|
|
26
|
+
|
|
27
|
+
### `new Header(mountPoint: HTMLElement)`
|
|
28
|
+
|
|
29
|
+
Creates a new `Header` instance.
|
|
30
|
+
|
|
31
|
+
| Parameter | Type | Description |
|
|
32
|
+
|--------------|---------------|----------------------------------------------------------|
|
|
33
|
+
| `mountPoint` | `HTMLElement` | The DOM element where the header will be rendered |
|
|
34
|
+
|
|
35
|
+
### `render(): void`
|
|
36
|
+
|
|
37
|
+
Injects the header HTML into the mount point element.
|
|
38
|
+
|
|
39
|
+
**Result:**
|
|
40
|
+
|
|
41
|
+
```html
|
|
42
|
+
<header>
|
|
43
|
+
<span class="text-lg">Mon Header</span>
|
|
44
|
+
</header>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## Example
|
|
48
|
+
|
|
49
|
+
```html
|
|
50
|
+
<!DOCTYPE html>
|
|
51
|
+
<html>
|
|
52
|
+
<body>
|
|
53
|
+
<div id="header"></div>
|
|
54
|
+
|
|
55
|
+
<script type="module">
|
|
56
|
+
import { Header } from 'ms-header-tek';
|
|
57
|
+
|
|
58
|
+
const mountPoint = document.getElementById('header');
|
|
59
|
+
const header = new Header(mountPoint);
|
|
60
|
+
header.render();
|
|
61
|
+
</script>
|
|
62
|
+
</body>
|
|
63
|
+
</html>
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## Requirements
|
|
67
|
+
|
|
68
|
+
- Vanilla TypeScript / JavaScript
|
|
69
|
+
- A DOM environment (browser)
|
|
70
|
+
|
|
71
|
+
## License
|
|
72
|
+
|
|
73
|
+
MIT
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
(function(){let e=document.createElement(`link`).relList;if(e&&e.supports&&e.supports(`modulepreload`))return;for(let e of document.querySelectorAll(`link[rel="modulepreload"]`))n(e);new MutationObserver(e=>{for(let t of e)if(t.type===`childList`)for(let e of t.addedNodes)e.tagName===`LINK`&&e.rel===`modulepreload`&&n(e)}).observe(document,{childList:!0,subtree:!0});function t(e){let t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin===`use-credentials`?t.credentials=`include`:e.crossOrigin===`anonymous`?t.credentials=`omit`:t.credentials=`same-origin`,t}function n(e){if(e.ep)return;e.ep=!0;let n=t(e);fetch(e.href,n)}})(),new class{el;constructor(e){this.el=e}render(){this.el.innerHTML=`
|
|
2
|
+
<header>
|
|
3
|
+
<span class="text-lg">Mon Header</span>
|
|
4
|
+
</header>
|
|
5
|
+
`}}(document.querySelector(`#app`)).render();
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
<svg width="100%" viewBox="0 0 680 680" role="img" xmlns="http://www.w3.org/2000/svg" style="">
|
|
2
|
+
<title style="fill:rgb(0, 0, 0);stroke:none;color:rgb(0, 0, 0);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;opacity:1;font-family:"Anthropic Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:16px;font-weight:400;text-anchor:start;dominant-baseline:auto">Mama Solution icon</title>
|
|
3
|
+
<desc style="fill:rgb(0, 0, 0);stroke:none;color:rgb(0, 0, 0);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;opacity:1;font-family:"Anthropic Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:16px;font-weight:400;text-anchor:start;dominant-baseline:auto">A warm, friendly icon representing Mama Solution — a heart-shaped home with nurturing colors and the letter M</desc>
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
<circle cx="340" cy="310" r="260" style="fill:rgb(59, 32, 22);stroke:none;color:rgb(0, 0, 0);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;opacity:1;font-family:"Anthropic Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:16px;font-weight:400;text-anchor:start;dominant-baseline:auto"/>
|
|
8
|
+
|
|
9
|
+
<g transform="translate(340, 300)" style="fill:rgb(0, 0, 0);stroke:none;color:rgb(0, 0, 0);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;opacity:1;font-family:"Anthropic Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:16px;font-weight:400;text-anchor:start;dominant-baseline:auto">
|
|
10
|
+
<path d="M0,-140 C-10,-180 -80,-200 -120,-150 C-160,-100 -160,-40 0,80 C160,-40 160,-100 120,-150 C80,-200 10,-180 0,-140 Z" style="fill:rgb(232, 114, 74);stroke:none;color:rgb(0, 0, 0);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;opacity:1;font-family:"Anthropic Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:16px;font-weight:400;text-anchor:start;dominant-baseline:auto"/>
|
|
11
|
+
</g>
|
|
12
|
+
|
|
13
|
+
<polygon points="340,130 210,250 470,250" style="fill:rgb(192, 73, 43);stroke:none;color:rgb(0, 0, 0);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;opacity:1;font-family:"Anthropic Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:16px;font-weight:400;text-anchor:start;dominant-baseline:auto"/>
|
|
14
|
+
|
|
15
|
+
<rect x="295" y="250" width="90" height="130" rx="8" style="fill:rgb(232, 114, 74);stroke:none;color:rgb(0, 0, 0);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;opacity:1;font-family:"Anthropic Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:16px;font-weight:400;text-anchor:start;dominant-baseline:auto"/>
|
|
16
|
+
<rect x="303" y="258" width="74" height="114" rx="5" fill="#C0492B" opacity="0.3" style="fill:rgb(192, 73, 43);stroke:none;color:rgb(0, 0, 0);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;opacity:0.3;font-family:"Anthropic Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:16px;font-weight:400;text-anchor:start;dominant-baseline:auto"/>
|
|
17
|
+
<rect x="303" y="258" width="34" height="50" rx="3" style="fill:rgb(253, 246, 237);stroke:rgb(192, 73, 43);color:rgb(0, 0, 0);stroke-width:3px;stroke-linecap:butt;stroke-linejoin:miter;opacity:1;font-family:"Anthropic Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:16px;font-weight:400;text-anchor:start;dominant-baseline:auto"/>
|
|
18
|
+
<rect x="343" y="258" width="34" height="50" rx="3" style="fill:rgb(253, 246, 237);stroke:rgb(192, 73, 43);color:rgb(0, 0, 0);stroke-width:3px;stroke-linecap:butt;stroke-linejoin:miter;opacity:1;font-family:"Anthropic Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:16px;font-weight:400;text-anchor:start;dominant-baseline:auto"/>
|
|
19
|
+
<rect x="310" y="318" width="60" height="62" rx="6" fill="#7B2D12" style="fill:rgb(123, 45, 18);stroke:none;color:rgb(0, 0, 0);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;opacity:1;font-family:"Anthropic Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:16px;font-weight:400;text-anchor:start;dominant-baseline:auto"/>
|
|
20
|
+
<circle cx="358" cy="352" r="4" fill="#F5B942" style="fill:rgb(245, 185, 66);stroke:none;color:rgb(0, 0, 0);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;opacity:1;font-family:"Anthropic Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:16px;font-weight:400;text-anchor:start;dominant-baseline:auto"/>
|
|
21
|
+
|
|
22
|
+
<text x="340" y="220" text-anchor="middle" opacity="0" style="fill:rgb(253, 246, 237);stroke:none;color:rgb(0, 0, 0);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;opacity:0;font-family:Georgia, serif;font-size:88px;font-weight:700;text-anchor:middle;dominant-baseline:auto">M</text>
|
|
23
|
+
|
|
24
|
+
<circle cx="220" cy="155" r="10" opacity="0.85" style="fill:rgb(245, 185, 66);stroke:none;color:rgb(0, 0, 0);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;opacity:0.85;font-family:"Anthropic Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:16px;font-weight:400;text-anchor:start;dominant-baseline:auto"/>
|
|
25
|
+
<circle cx="460" cy="155" r="7" opacity="0.7" style="fill:rgb(245, 185, 66);stroke:none;color:rgb(0, 0, 0);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;opacity:0.7;font-family:"Anthropic Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:16px;font-weight:400;text-anchor:start;dominant-baseline:auto"/>
|
|
26
|
+
<circle cx="190" cy="300" r="5" opacity="0.6" style="fill:rgb(245, 185, 66);stroke:none;color:rgb(0, 0, 0);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;opacity:0.6;font-family:"Anthropic Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:16px;font-weight:400;text-anchor:start;dominant-baseline:auto"/>
|
|
27
|
+
<circle cx="490" cy="280" r="8" opacity="0.75" style="fill:rgb(245, 185, 66);stroke:none;color:rgb(0, 0, 0);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;opacity:0.75;font-family:"Anthropic Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:16px;font-weight:400;text-anchor:start;dominant-baseline:auto"/>
|
|
28
|
+
<circle cx="240" cy="430" r="6" opacity="0.55" style="fill:rgb(245, 185, 66);stroke:none;color:rgb(0, 0, 0);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;opacity:0.55;font-family:"Anthropic Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:16px;font-weight:400;text-anchor:start;dominant-baseline:auto"/>
|
|
29
|
+
<circle cx="440" cy="440" r="9" opacity="0.65" style="fill:rgb(245, 185, 66);stroke:none;color:rgb(0, 0, 0);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;opacity:0.65;font-family:"Anthropic Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:16px;font-weight:400;text-anchor:start;dominant-baseline:auto"/>
|
|
30
|
+
|
|
31
|
+
<path d="M215,150 L222,143 L229,150 L222,157 Z" opacity="0.9" style="fill:rgb(245, 185, 66);stroke:none;color:rgb(0, 0, 0);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;opacity:0.9;font-family:"Anthropic Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:16px;font-weight:400;text-anchor:start;dominant-baseline:auto"/>
|
|
32
|
+
<path d="M455,148 L462,141 L469,148 L462,155 Z" opacity="0.8" style="fill:rgb(245, 185, 66);stroke:none;color:rgb(0, 0, 0);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;opacity:0.8;font-family:"Anthropic Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:16px;font-weight:400;text-anchor:start;dominant-baseline:auto"/>
|
|
33
|
+
|
|
34
|
+
<text x="340" y="620" text-anchor="middle" style="fill:rgb(240, 201, 168);stroke:none;color:rgb(0, 0, 0);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;opacity:1;font-family:sans-serif;font-size:28px;font-weight:500;text-anchor:middle;dominant-baseline:auto">Mama Solution</text>
|
|
35
|
+
<text x="340" y="648" text-anchor="middle" style="fill:rgb(201, 146, 106);stroke:none;color:rgb(0, 0, 0);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;opacity:1;font-family:sans-serif;font-size:18px;font-weight:400;text-anchor:middle;dominant-baseline:auto">Votre maison, notre mission</text>
|
|
36
|
+
</svg>
|
package/dist/index.html
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<link rel="icon" type="image/svg+xml" href="/assets/mama_solution_icon-C3CyFw6W.svg" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>ms-header</title>
|
|
8
|
+
<script type="module" crossorigin src="/assets/index-vDL6lUWX.js"></script>
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<div id="app"></div>
|
|
12
|
+
</body>
|
|
13
|
+
</html>
|
package/package.json
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "tek-ms-header",
|
|
3
|
+
"private": false,
|
|
4
|
+
"version": "v1.0.3",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"files": [
|
|
7
|
+
"dist/"
|
|
8
|
+
],
|
|
9
|
+
"scripts": {
|
|
10
|
+
"dev": "vite",
|
|
11
|
+
"build": "tsc && vite build",
|
|
12
|
+
"test": "npx vitest run",
|
|
13
|
+
"test -- --coverage": "npx vitest run --coverage",
|
|
14
|
+
"preview": "vite preview",
|
|
15
|
+
"lint": "eslint src/**/*.ts",
|
|
16
|
+
"format": "prettier --write src/**/*.ts"
|
|
17
|
+
},
|
|
18
|
+
"devDependencies": {
|
|
19
|
+
"@types/jest": "^30.0.0",
|
|
20
|
+
"@types/mocha": "^10.0.10",
|
|
21
|
+
"@typescript-eslint/eslint-plugin": "^8.61.1",
|
|
22
|
+
"@typescript-eslint/parser": "^8.61.1",
|
|
23
|
+
"@vitest/coverage-v8": "^4.1.9",
|
|
24
|
+
"eslint": "^10.5.0",
|
|
25
|
+
"eslint-config-prettier": "^10.1.8",
|
|
26
|
+
"jsdom": "^29.1.1",
|
|
27
|
+
"prettier": "^3.8.4",
|
|
28
|
+
"typescript": "~6.0.2",
|
|
29
|
+
"vite": "^8.0.12",
|
|
30
|
+
"vitest": "^4.1.9"
|
|
31
|
+
}
|
|
32
|
+
}
|