BibleUp 소개: 성경 참조를 위한 웹 도구 💡

BibleUp은 웹 페이지의 성경 참조를 액세스 가능한 팝오버로 변환합니다.

Playground | Demo | Github

목차

What is BibleUp 💡

How it works 🔌

Code Playground

Features

What's next 🌟

Conclusion

BibleUp은 무엇입니까 💡

If you have ever read a christian or biblical article online, then you would, most likely, have encountered plain Bible references conventionally written in brackets (Matthew 1:21)

These references are not in any way linked to their corresponding text except they are otherwise written out by the author.

BibleUp was created as a solution to this.

---

라이브 데모 보기
here

BibleUp은 웹 페이지의 일반 성경 참조를 하이퍼링크로 변환하는 구성 가능한 웹 도구입니다( <a> ).

이 링크에 마우스를 올리거나 클릭하면 유연하고 사용자 정의가 가능한 팝오버를 통해 성경 텍스트에 액세스할 수 있습니다.

작동 방식 🔌

BibleUp searches through all text nodes in the DOM, moving from one element to the next and transforming all valid references to links. The popover which houses the text is constructed based on the config options and appended to document.body .

Under the hood, BibleUp uses an internal API to fetch the Bible text and they are cached so subsequent requests are delivered fast.

Special thanks to api.bible

참조 일치 방법

유효한 모든 참조는 2단계 검증 프로세스를 거칩니다.

첫 번째는 정규식 테스트입니다. 이는 모든 참조가 공통 구조( book chapter : verse - verseEnd )를 갖기 때문에 가능합니다.

// variable 'books' are all 66 books separated by '|'

let regex = `(?:(?:(${books})\\.?\\s?(\\d{1,3}))(?:(?=\\:)\\:\\s?(\\d{1,3}(?:\\s?\\-\\s?\\d{1,3})?)|))|(?<=(?:(${books})\\.?\\s?(\\d{1,3}))\\:\\s?\\d{1,3}(?:\\s?\\-\\s?\\d{1,3})?(?:\\,|\\&)\\s?(?:\\d{1,3}(?:\\,|\\&)\\s?|\\d{1,3}\\s?\\-\\s?\\d{1,3}(?:\\,|\\&))*)(\\d{1,3}(?!\\s?\\-\\s?)|\\d{1,3}\\s?\\-\\s?\\d{1,3})`;

let bible_regex = new RegExp(regex, 'g');

bible_regex.test('John 3:16') //returns true

그러나 John 53:112와 같이 유효한 참조가 아닌 문자열은 일치할 수 있으며 이것이 다음 확인 단계에서 성경의 각 책에 있는 장과 절의 수를 저장하는 개체를 사용하는 이유입니다.

/* variable 'bibleData' is an array of objects containing all 66 books
* the total number of verses in a chapter is listed in the 'chapters:[]' array
*/

const bible = {
 book: 'John',
 chapter: 3,
 verse: 16
}

for (const data of bibleData) {
   if (data.book == bible.book) {
      if (bible.chapter <= data.chapters.length &&
         data.chapters[bible.chapter - 1] != undefined &&
         bible.verse <= data.chapters[bible.chapter - 1]) {
         if (bible.verseEnd == undefined) {
            return JSON.stringify(bible)
         } else if (bible.verseEnd <= data.chapters[bible.chapter - 1]) {
            return JSON.stringify(bible)
         } else {
            return false
         }
      } else {
         return false
      }
   }
}

These examples only show part of the codes where the match is done. Check the full code on Github.

You can test the regex here on regExr

BibleUp은 의존성이 전혀 없는 바닐라 JavaScript로 작성되었으며 스타일링을 위한 CSS가 적습니다. 모든 최신 브라우저의 마지막 두 버전이 지원됩니다 😉

코드 놀이터

특징

BibleUp과 같은 멋진 도구가 꽤 많이 있습니다. 이 중 하나는 FaithLife Reftagger 입니다.

이러한 도구는 핵심 기능이 훌륭하고 잘 통합됩니다.

그러나 BibleUp은 커뮤니티 개발, 유연성 및 높은 사용자 정의 옵션을 활용합니다.

BibleUp은 모든 웹사이트나 테마에 완벽하게 맞도록 완벽하게 스타일을 지정할 수 있습니다.

다음은 무엇입니까 🌟

이 도구는 현재 최종 베타 버전이므로 앞으로 더 많은 기능이 제공될 것입니다.

다음으로 다가올 것 중 가장 중요한 것은 더 많은 버전을 사용할 수 있도록 하는 것입니다(허가/저작권 프로세스가 어렵지만 매우 가능함).

기타는 WordPress(플러그인) 및 기타 환경(브라우저 확장)과의 통합 및 '소리내어 읽기' 및 공유 버튼과 같은 추가 기능입니다.

결론

BibleUp은 기여 및 기능 요청에 열려 있습니다.

Github에서 소스 코드를 확인하고 도움을 주거나 리뷰를 남겨주세요.

자세한 내용은 website을 방문하거나 docs을 확인하십시오.

고맙습니다!