support-kurdistan 1.0.0 → 1.1.1

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.
Files changed (2) hide show
  1. package/README.md +183 -0
  2. package/package.json +5 -2
package/README.md ADDED
@@ -0,0 +1,183 @@
1
+ # Support Kurdistan Banner
2
+
3
+ A custom HTML element that displays a banner showing support for Kurdistan.
4
+
5
+ ## Features
6
+
7
+ - Multi-language support (English, Kurdish, Arabic)
8
+ - Multiple themes (light, dark, subtle)
9
+ - Responsive design
10
+ - Customizable text
11
+ - Social media integration with hashtags
12
+
13
+ ## Usage
14
+
15
+ Include the JavaScript file in your HTML:
16
+
17
+ ```html
18
+ <script src="src/support-kurdistan.js"></script>
19
+ ```
20
+
21
+ Then use the element:
22
+
23
+ ```html
24
+ <support-kurdistan></support-kurdistan>
25
+ ```
26
+
27
+ ## Attributes
28
+
29
+ - `locale`: Language code (en, ku, ckb, ar). Default: en
30
+ - `theme`: Theme (light, dark, subtle). Default: light
31
+ - `text`: Custom message. If provided, replaces the default message.
32
+ - `mode`: Position (top, footer). Default: top
33
+
34
+ ## Examples
35
+
36
+ ### Default banner
37
+
38
+ ```html
39
+ <support-kurdistan></support-kurdistan>
40
+ ```
41
+
42
+ ### Dark theme in Kurdish
43
+
44
+ ```html
45
+ <support-kurdistan locale="ku" theme="dark"></support-kurdistan>
46
+ ```
47
+
48
+ ### Custom text in footer
49
+
50
+ ```html
51
+ <support-kurdistan
52
+ text="Custom support message"
53
+ mode="footer"
54
+ ></support-kurdistan>
55
+ ```
56
+
57
+ ### Arabic with subtle theme
58
+
59
+ ```html
60
+ <support-kurdistan locale="ar" theme="subtle"></support-kurdistan>
61
+ ```
62
+
63
+ ## Framework Integration
64
+
65
+ **Note:** This custom element is framework-agnostic and works with any JavaScript framework. Make sure to include the `support-kurdistan.js` script before using the component. For frameworks with server-side rendering (like Next.js), the component will only render on the client side.
66
+
67
+ This custom element can be used in various JavaScript frameworks. Below are examples for React, Vue, and Next.js.
68
+
69
+ ### React
70
+
71
+ First, include the script in your HTML (e.g., in `public/index.html`):
72
+
73
+ ```html
74
+ <script src="%PUBLIC_URL%/src/support-kurdistan.js"></script>
75
+ ```
76
+
77
+ Then use it in your React component:
78
+
79
+ ```jsx
80
+ import React from "react";
81
+
82
+ function App() {
83
+ return (
84
+ <div className="App">
85
+ <support-kurdistan locale="en" theme="light"></support-kurdistan>
86
+ </div>
87
+ );
88
+ }
89
+
90
+ export default App;
91
+ ```
92
+
93
+ If you encounter TypeScript issues, declare the element:
94
+
95
+ ```typescript
96
+ declare global {
97
+ namespace JSX {
98
+ interface IntrinsicElements {
99
+ "support-kurdistan": any;
100
+ }
101
+ }
102
+ }
103
+ ```
104
+
105
+ ### Vue
106
+
107
+ Include the script in your `index.html`:
108
+
109
+ ```html
110
+ <script src="./src/support-kurdistan.js"></script>
111
+ ```
112
+
113
+ Then use it in your Vue component:
114
+
115
+ ```vue
116
+ <template>
117
+ <div id="app">
118
+ <support-kurdistan locale="ku" theme="dark" />
119
+ </div>
120
+ </template>
121
+
122
+ <script>
123
+ export default {
124
+ name: "App",
125
+ };
126
+ </script>
127
+ ```
128
+
129
+ In Vue 3, you may need to configure it in `main.js`:
130
+
131
+ ```javascript
132
+ import { createApp } from "vue";
133
+ import App from "./App.vue";
134
+
135
+ const app = createApp(App);
136
+ app.config.compilerOptions.isCustomElement = (tag) =>
137
+ tag === "support-kurdistan";
138
+ app.mount("#app");
139
+ ```
140
+
141
+ ### Next.js
142
+
143
+ Include the script in your `_document.js` or use `next/script`:
144
+
145
+ ```jsx
146
+ import { Html, Head, Main, NextScript } from "next/document";
147
+
148
+ export default function Document() {
149
+ return (
150
+ <Html>
151
+ <Head>
152
+ <script src="/src/support-kurdistan.js" />
153
+ </Head>
154
+ <body>
155
+ <Main />
156
+ <NextScript />
157
+ </body>
158
+ </Html>
159
+ );
160
+ }
161
+ ```
162
+
163
+ Then use it in your pages:
164
+
165
+ ```jsx
166
+ export default function Home() {
167
+ return (
168
+ <div>
169
+ <support-kurdistan locale="ar" theme="subtle" />
170
+ </div>
171
+ );
172
+ }
173
+ ```
174
+
175
+ For TypeScript support, add to `types.d.ts`:
176
+
177
+ ```typescript
178
+ declare namespace JSX {
179
+ interface IntrinsicElements {
180
+ "support-kurdistan": any;
181
+ }
182
+ }
183
+ ```
package/package.json CHANGED
@@ -1,7 +1,10 @@
1
1
  {
2
2
  "name": "support-kurdistan",
3
- "version": "1.0.0",
3
+ "version": "1.1.1",
4
4
  "main": "support-kurdistan.js",
5
5
  "type": "module",
6
- "author": "Abdulsamad Zuhair"
6
+ "author": "Abdulsamad Zuhair",
7
+ "exports": {
8
+ "./support-kurdistan": "./src/support-kurdistan.js"
9
+ }
7
10
  }