indyspensable
v1.6.2
Published
## Configuration EN
Downloads
399
Readme
MyWay
Configuration EN
1. Create an npm Account
- Go to npmjs.com.
- Click on "Sign Up."
- Fill in the required information (username, email, password).
- Confirm your registration via the confirmation email sent by npm.
2. Configure npm on Your Machine
Install Node.js and npm:
If you haven't already, download and install Node.js, which includes npm.
Log in to npm via the Terminal: Open your terminal and run the following command:
npm login(You will be prompted to enter your username, password, and email associated with your npm account.)
3. Prepare the Package for Publication
In your widget's directory, run:
npm initFill in the required information. @your-domain/package-name
Configure the Package as Private: In the
package.jsonfile, add or modify the "private" field:{ "name": "@your-username/package-name", "version": "1.0.0", "private": true // important // other configurations }
4. Publish the Private Package
Run the following command in your project's directory:
```bash
npm publish --access=restricted
```This command publishes the package as private, restricting access to authorized users.
Usage
The package consists of 3 components:
The widget:
<indyspensable-widget lang="en" defaultWidgetPosition="left" ></indyspensable-widget>You can specify the language and the position of the widget.
The banner:
<indyspensable-banner url="url_to_accessibility_page" lang="en" ></indyspensable-banner>For the banner, you can specify the URL where the user will land if they click the "Read more" button. If you do not specify a URL, a modal will open with the different cards.
You can also specify the language of the component by giving it a "lang" prop ( fr, en )
The accessibility component:
<indyspensable-accessibility></indyspensable-accessibility>
1. Pure JavaScript
npm install @your-domain/package-name
Import the widget into your project:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Using the Widget</title>
</head>
<body>
<widget-name></widget-name>
<script type="module">
import '@your-domain/package-name';
</script>
</body>
</html>
```Then use the components listed above in any file of your project.
2. Vue.js
npm install @your-domain/package-name
Configuration: In your main file (e.g., main.js):
```javascript
import { createApp } from 'vue';
import App from './App.vue';
import '@your-domain/package-name';
createApp(App).mount('#app');
```Usage in a Component:
```vue
<template>
<div>
<indyspensable-banner></indyspensable-banner>
</div>
</template>
<script>
export default {
name: 'MyComponent',
};
</script>
```3. Angular
npm install @your-domain/package-name
- Configuration: In your
angular.jsonfile, ensure that the scripts are included if necessary.
You can also import the package into your main module:
```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import AppComponent from './app.component';
import '@your-domain/package-name';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```Usage in a Component:
<!-- app.component.html --> <indyspensable-widget></indyspensable-widget>
4. React
npm install @your-domain/package-name
- Import the Widget into Your Project
Ensure you import the widget into your main file, such as index.js or App.js:
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import '@your-domain/package-name';
ReactDOM.render(<App />, document.getElementById('root'));
```- Use the Widget in a Component
You can now use the widget as a native HTML element in any React component. Here’s an example of usage in a component:
```javascript
import React from 'react';
const MyComponent = () => {
return (
<div>
<indyspensable-banner></indyspensable-banner>
<indyspensable-widget></indyspensable-widget>
<indyspensable-accessibility></indyspensable-accessibility>
</div>
);
};
export default MyComponent;
```MyWay
Configuration FR
1. Créer un Compte npm
- Rendez-vous sur npmjs.com.
- Cliquez sur "Sign Up" (S'inscrire).
- Remplissez les informations requises (nom d'utilisateur, email, mot de passe).
- Validez votre inscription via l'email de confirmation envoyé par npm.
2. Configurer npm sur votre Machine
- Installer Node.js et npm :
- Si ce n'est pas déjà fait, téléchargez et installez Node.js qui inclut npm.
- Se Connecter à npm via le Terminal : Ouvrez votre terminal et exécutez la commande suivante :
npm login( Vous serez invité à entrer votre nom d'utilisateur, mot de passe et email associés à votre compte npm. )
3. Préparer le Package pour la Publication
- Dans le répertoire de votre widget, exécutez :
npm init- Remplissez les informations requises. @votre-domaine/nom-du-package
- Configurer le Package comme Privé : Dans le fichier package.json, ajoutez ou modifiez le champ "private" :
{
"name": "@votre-utilisateur/nom-du-package",
"version": "1.0.0",
"private": true, // important
// autres configurations
}4. Publier le Package Privé
Exécutez la commande suivante dans le répertoire de votre projet :
npm publish --access=restrictedCette commande publie le package en tant que privé, restreignant l'accès aux utilisateurs autorisés.
Utilisation
Le package est constitué de 3 compostant, le widget:
<indyspensable-widget></indyspensable-widget>La banner:
<indyspensable-banner url="url_to_accessibility_page"></indyspensable-banner>Pour la banniere, vous pouvez specifier l'url dans laquel l'utilisatueur va atteririsi il clique sur le boutton "Read more". Si vous ne specifie pas de url, un modal s'ouvrira avec les differentes cartes.
Le composant accessibilté:
<indyspensable-accessibility></indyspensable-accessibility>1. JavaScript Pur
npm install @votre-domaine/nom-du-package
Importez le widget dans votre projet :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Utilisation du Widget</title>
</head>
<body>
<nom-du-widget></nom-du-widget>
<script type="module">
import '@votre-domaine/nom-du-package';
</script>
</body>
</html>Ensuite utilisez les composants listés au dessus dans n'importe quel fichier de votre projet.
2. Vue.js
npm install @votre-domaine/nom-du-package
Configuration : Dans votre fichier principal (par exemple, main.js) :
import { createApp } from 'vue';
import App from './App.vue';
import '@votre-domaine/nom-du-package';
createApp(App).mount('#app');Utilisation dans un Composant :
<template>
<div>
<indyspensable-banner></indyspensable-banner>
</div>
</template>
<script>
export default {
name: 'MonComposant',
};
</script>3. Angular
npm install @votre-domaine/nom-du-package
- Configuration : Dans votre fichier angular.json, assurez-vous que les scripts sont inclus si nécessaire.
Vous pouvez également importer le package dans votre module principal :
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import AppComponent from './app.component';
import '@votre-domaine/nom-du-package';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
- Utilisation dans un Composant :
<!-- app.component.html -->
<indyspensable-widget></indyspensable-widget>
4. React
npm install @votre-domaine/nom-du-package
- Importer le Widget dans Votre Projet
Assurez-vous d'importer le widget dans votre fichier principal, par exemple index.js ou App.js :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import '@votre-domaine/nom-du-package';
ReactDOM.render(<App />, document.getElementById('root'));
- Utiliser le Widget dans un Composant
Vous pouvez maintenant utiliser le widget comme un élément HTML natif dans n'importe quel composant React. Voici un exemple d'utilisation dans un composant :
import React from 'react';
const MonComposant = () => {
return (
<div>
<indyspensable-banner></indyspensable-banner>
<indyspensable-widget></indyspensable-widget>
<indyspensable-accessibility></indyspensable-accessibility>
</div>
);
};
export default MonComposant;