Devectus

Devectus (Alpha) : 오프라인 코드 구성 요소 응용 프로그램

주의

이 프로젝트는 개발의 초기 단계에 있으며 프로젝트를 Opensourcing하려는 첫 번째 시도 중 하나입니다.

개발자가 로컬 드라이브에서 코드 구성 요소/스 니펫을 저장할 수있는 오프라인 구성 요소 라이브러리 응용 프로그램. 복잡성이없고 나중에 사용하기 위해 절약 된 간단한 코드 페이스트.

내용물

• 우리의 목표
• 현재 기능
• 기여
• 설치 및 시작
• 응용 프로그램 사용

Devectus 트레일러 (이미지를 클릭) -

경고

이 프로젝트는 현재 CC By-NC 4.0 라이센스에 따라 있지만 제안에 열려 있으며 기고자 피드백을 기반으로 향후 라이센스를 재고 할 수 있습니다.

우리의 목표

• 개발자가 코드 구성 요소를 더 쉽게 재사용 할 수 있도록합니다.
• 개발자는 크리에이션 코드를 안전하고 100% 오프라인으로 유지합니다.
• 프로젝트 개발 효율성을 높이기 위해.
• 간단하게 유지하기 위해 개인 정보 보호 "마음의 평화"를 촉진하기위한 AI 또는 LLM 개선 사항은 없습니다.
• 디자인을 깨끗하고 현대적으로 유지하십시오.

현재 기능

• 구성 요소를 추가하십시오. 이름 , 태그 (현재 최대 3), 언어 (현재 최대 3) 및 코드 입력 상자
• 구성 요소 편집; 이름 , 태그 , 언어 및 코드 입력 상자
• 구성 요소를 삭제하십시오
• 핀 구성 요소
• 사용자가 입력 한 모든 정보를 표시하려면 구성 요소를 선택하십시오
• 이름 또는 태그로 구성 요소를 검색합니다
• 구성 요소에 더 잘 액세스하기위한 최근 태그 영역
• 구성 요소 라이브러리에있는 5 개의 랑 가우스 목록에 대한 Langauges 태그 영역
• 앱에 대한 어둡고 가벼운 테마가있는 설정 영역
• 앱 새로 고침 버튼
• "Devicons"의 구성 요소에 대한 자동 할당 된 코드 로고

기여

우리는 많은 기능, 아이디어 및 작업 할 문제가 있습니다 (문제 참조).

원하는 기능

• Dyanamic React 구성 요소/응용 프로그램 재 장전 상호 작용이 발생하면 새로운 구성 요소가 추가되면 구성 요소 영역이 새로 고침되어 새 구성 요소를 즉시 표시합니다.
• 활성 입력을 기반으로 사용 가능한 결과를 자동으로 표시하는 동적 검색
• 더 큰 코드 처리/출력 기능 (현재 HTML, CSS, JavaScript 만); 이것은 모나코 편집자를 사용하여 명시 될 수 있습니다 (제안에 오픈)
• 코드 정리 및 최적화
• 더 나은 파일 및 폴더 구조

미래의 기능 아이디어

• 모든 장치에 대한 더 나은 책임 (스타일링)
• 더 경고 반응 구현
• 보안 및 컨텐츠 보안 정책 구현
• 조정 가능한 섹션 드래그, 즉 구성 요소 컨테이너 또는 코드 세부 사항 영역의 너비 정리
• 구성 요소의 타임 스탬프 ( "날짜가 생성 된 날짜", "날짜 수정")
• 다크/라이트 테마 (코드 편집기) 일치하는 완전 커스텀 스타일 코드 미러 영역
• 애니메이션 및 전환 효과 (스타일링)
• 선택 가능한 테마
• 응용 프로그램을 CODE의 확장에 연결하여 구성 요소 코드를 프로젝트에보다 쉽게 ​​추가합니다.
• Obsidian Intergration/호환성 구성 요소를 메모에 연결합니다

여기에서 계획된 모든 기능을 참조하십시오

우리는 항상 프로젝트 목표와 일치하는 더 많은 제안에 열려 있습니다.

설치 및 시작

현재이 프로젝트는이 Github 저장소에서만 설치할 수 있습니다.

Nodejs 버전이 v20.15.1 이상인지 확인하십시오

Github Docs의 가이드를 따르십시오

시작하기

패키지 설치 -

 npm install

응용 프로그램 시작 -

 npm start

주의

우리는 현재 Windows 11 이외의 운영 체제 에서이 응용 프로그램의 교차 호환성을 알지 못합니다. 찾을 수있는 문제를 알려주십시오!

응용 프로그램 사용

• 구성 요소 추가

  Devectus가 시작되고 열리면 도구 영역에서 "추가"버튼을 선택하여 새 구성 요소를 만들고 화면 양식 지침을 따라 구성 요소를 작성하여 시작할 수 있습니다.

• 구성 요소 정보를 선택하고보십시오

  구성 요소 목록/영역의 구성 요소를 클릭하여 이름, 태그, langauges 및 입력 된 코드 (HTML, CSS 및 JavaScript 만)를 포함하여 선택한 구성 요소에 입력 된 모든 정보를 표시하십시오.

• 구성 요소를 편집하십시오

  구성 요소를 선택한 다음 도구 영역에서 "편집"버튼을 선택하여 구성 요소 정보를 편집 한 다음 그에 따라 양식을 변경할 수 있습니다.

• 구성 요소를 삭제하십시오

  구성 요소를 선택한 다음 도구 영역에서 "삭제"버튼을 선택한 다음 삭제 확인을 클릭하여 구성 요소를 삭제할 수 있습니다.

• 구성 요소를 고정하십시오

  구성 요소를 선택한 다음 도구 영역에서 "핀"버튼을 선택하여 더 중요한 구성 요소를 고정 할 수 있습니다.

• 구성 요소를 검색하십시오

  도구 버튼/영역 위의 검색 표시 줄에 검색을 입력하고 검색 아이콘을 선택하거나 "Enter"키를 누르면 구성 요소를 검색 할 수 있습니다.

• 응용 프로그램 테마를 변경하십시오

  응용 프로그램의 왼쪽 상단에서 설정 버튼을 선택한 다음 선호하는 테마 (Light/Dark)를 선택하십시오.

• 응용 프로그램을 새로 고치십시오

  응용 프로그램의 왼쪽 상단에있는 로고 옆에 새로 고침 버튼을 선택하면 새로 생성 된 구성 요소가 나타나야합니다.

메모

특정 React 구성 요소의 자동 새로 고침 또는 동적 새로 고침을 구체화하여 버튼으로 새로 고침해야 할 필요성을 교체하기를 희망합니다.