Devectus

Devectus (Alpha): une application de composante de code hors ligne

Prudence

Ce projet est à un stade assez précoce du développement et est l'une de nos premières tentatives d'ouvrir un projet

Une application de bibliothèque de composants hors ligne qui permet aux développeurs d'enregistrer les composants / extraits de code sur le lecteur local. Pas de complexités, une simple pâte de code enregistrée pour une utilisation ultérieure.

Contenu

• Nos objectifs
• Caractéristiques actuelles
• Contributif
• Installation et démarrage
• En utilisant l'application

Bande-annonce de Devectus (cliquez sur l'image) -

Avertissement

Bien que le projet soit sous la licence CC BY-NC 4.0 pour l'instant, nous sommes ouverts aux suggestions et pouvons reconsidérer la licence à l'avenir en fonction des commentaires des contributeurs.

Nos objectifs

• Pour faciliter la réutilisation des composants de code pour les développeurs.
• Pour assurer la sécurité des créations de code et 100% hors ligne.
• Pour augmenter l'efficacité du développement du projet.
• Pour rester simple, aucune amélioration de l'IA ou de la LLM pour promouvoir la vie privée "tranquillité d'esprit".
• Gardez le design propre et moderne.

Caractéristiques actuelles

• Ajouter un composant avec; nom , balises (max de 3 en ce moment), langues (max de 3 en ce moment) et coder les boîtes d'entrée
• Modifier un composant; Nom , balises , langues et boîtes d'entrée de code
• Supprimer un composant
• Composants de la broche
• Sélectionnez des composants pour afficher toutes les informations entrées par l'utilisateur
• Rechercher les composants par nom ou balises
• Zone de balises récentes pour un meilleur accès aux composants
• Langauges Tags Zone pour la liste de 5 Langauges dans la bibliothèque des composants
• Zone de réglages avec des thèmes sombres et clairs pour l'application
• Bouton de rafraîchissement de l'application
• Logos de code attribués automatiquement pour les composants de "Devicons"

Contributif

Nous avons beaucoup de fonctionnalités, d'idées et de problèmes sur lesquels travailler (voir les problèmes), si vous pensez que vous pouvez contribuer, consultez la zone Contribution.MD et faites-le nous savoir!

Caractéristiques souhaitées

• Rechargement de composant / application de réact dyanamique Lorsque les interactions se produisent, c'est-à-dire une fois qu'un nouveau composant est ajouté, la zone du composant est actualisée pour afficher le nouveau composant instantanément
• Recherche dynamique qui affiche les résultats disponibles automatiquement en fonction de l'entrée active
• Capacités de traitement / sortie de code supérieures (actuellement uniquement HTML, CSS, JavaScript); Cela pourrait être impliqué en utilisant peut-être des éditeurs de Monaco (ouvert aux suggestions)
• Nettoyage et optimisations de code
• Meilleure structure de fichiers et de dossiers

Idées de fonctionnalités futures

• Meilleure responsabilité pour tous les appareils (style)
• Plus d'impliments de réponse alerte
• Politique de sécurité et de contenu Implimentation de la politique de sécurité
• Faites glisser les sections ajustées, c'est-à-dire les largeurs d'organisation du conteneur des composants ou de la zone des détails du code
• Timestamps sur les composants automatiquement ("Date créée", "Date modifiée")
• Zones de code de code de style entièrement personnalisées pour correspondre aux thèmes sombres / légers (éditeur de code)
• Animations et effets de transition (style)
• Thèmes plus sélectionnables
• La connexion de l'application à une extension en code vs pour ajouter plus facilement le code composant dans les projets
• Intergration / compatibilité de l'obsidienne pour connecter un composant aux notes

Voir toutes les fonctionnalités planifiées ici

Nous sommes toujours ouverts à plus de suggestions qui correspondent aux objectifs du projet

Installation et démarrage

À l'heure actuelle, le projet n'est disponible que pour installer à partir de ce référentiel GitHub -

Veuillez vous assurer que votre version Nodejs est v20.15.1 ou version ultérieure

Suivez le guide de Github Docs

Commencer

Installer des packages -

 npm install

Démarrez l'application -

 npm start

Prudence

Nous ignorons actuellement la compatibilité croisée de cette application sur les systèmes d'exploitation autres que Windows 11, veuillez nous faire part de tout problème que vous pourriez trouver!

En utilisant l'application

• Ajout d'un composant

  Une fois que Devectus est démarré et ouvert, vous pouvez commencer par créer un nouveau composant en sélectionnant le bouton "Ajouter" dans la zone des outils, suivez les instructions de formulaire à l'écran pour créer votre composant.

• Sélectionnez et affichez les informations du composant

  Cliquez sur un composant de la liste / zone des composants pour afficher toutes les informations entrées pour ce composant sélectionné, y compris le nom, les balises, les langauges et le code entré, ainsi qu'une sortie (HTML, CSS et JavaScript uniquement).

• Modifier un composant

  Vous pouvez modifier les informations des composants en sélectionnant un composant, puis en sélectionnant le bouton "Modifier" dans la zone des outils, puis apporter des modifications dans le formulaire en conséquence.

• Supprimer un composant

  Vous pouvez supprimer un composant en sélectionnant un composant puis en sélectionnant le bouton "Supprimer" dans la zone des outils, puis cliquez sur Confirmer la suppression.

• Épingler un composant

  Vous pouvez épingler des composants que vous pouvez considérer comme plus importants en sélectionnant le composant, puis en sélectionnant le bouton "PIN" dans la zone des outils.

• Rechercher un composant

  Vous pouvez rechercher un composant en tapant votre recherche dans la barre de recherche au-dessus des boutons / zone des outils et en sélectionnant l'icône de recherche ou en appuyant sur la touche "Entrer".

• Modifier le thème de l'application

  Sélectionnez le bouton Paramètres en haut à gauche de l'application, puis sélectionnez le thème préféré (clair / sombre).

• Actualiser l'application

  Sélectionnez le bouton Rafraîchissement à côté du logo en haut à gauche de l'application et le composant nouvellement créé doit apparaître.

Note

Nous espérons bientôt implémenter un rafraîchissement automatique ou un rafraîchissement dynamique dans certains composants React pour remplacer la nécessité de se rafraîchir par le bouton.