11import { cache } from '../connection/cache.js' ;
22
3- const urlAosCss = 'https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css' ;
4- const urlAosJs = 'https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js' ;
5- const urlConfetti = 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.js' ;
6-
73/**
84 * @param {ReturnType<typeof cache> } c
95 * @returns {Promise<void> }
106 */
117const loadAOS = ( c ) => {
128
9+ const urlCss = 'https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css' ;
10+ const urlJs = 'https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js' ;
11+
1312 /**
1413 * @returns {Promise<void> }
1514 */
16- const loadCss = ( ) => c . get ( urlAosCss ) . then ( ( uri ) => new Promise ( ( res , rej ) => {
15+ const loadCss = ( ) => c . get ( urlCss ) . then ( ( uri ) => new Promise ( ( res , rej ) => {
1716 const link = document . createElement ( 'link' ) ;
1817 link . onload = res ;
1918 link . onerror = rej ;
@@ -26,7 +25,7 @@ const loadAOS = (c) => {
2625 /**
2726 * @returns {Promise<void> }
2827 */
29- const loadJs = ( ) => c . get ( urlAosJs ) . then ( ( uri ) => new Promise ( ( res , rej ) => {
28+ const loadJs = ( ) => c . get ( urlJs ) . then ( ( uri ) => new Promise ( ( res , rej ) => {
3029 const sc = document . createElement ( 'script' ) ;
3130 sc . onload = res ;
3231 sc . onerror = rej ;
@@ -48,28 +47,137 @@ const loadAOS = (c) => {
4847 * @param {ReturnType<typeof cache> } c
4948 * @returns {Promise<void> }
5049 */
51- const loadConfetti = ( c ) => c . get ( urlConfetti ) . then ( ( uri ) => new Promise ( ( res , rej ) => {
52- const sc = document . createElement ( 'script' ) ;
53- sc . onerror = rej ;
54- sc . onload = ( ) => {
55- typeof window . confetti === 'undefined' ? rej ( new Error ( 'Confetti library failed to load' ) ) : res ( ) ;
56- } ;
50+ const loadConfetti = ( c ) => {
51+ const url = 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.js' ;
52+
53+ return c . get ( url ) . then ( ( uri ) => new Promise ( ( res , rej ) => {
54+ const sc = document . createElement ( 'script' ) ;
55+ sc . onerror = rej ;
56+ sc . onload = ( ) => {
57+ typeof window . confetti === 'undefined' ? rej ( new Error ( 'Confetti library failed to load' ) ) : res ( ) ;
58+ } ;
59+
60+ sc . src = uri ;
61+ document . head . appendChild ( sc ) ;
62+ } ) ) ;
63+ } ;
64+
65+ /**
66+ * @param {ReturnType<typeof cache> } c
67+ * @returns {Promise<void> }
68+ */
69+ const loadBootstrap = ( c ) => {
70+ const url = 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js' ;
71+
72+ return c . get ( url ) . then ( ( uri ) => new Promise ( ( res , rej ) => {
73+ const sc = document . createElement ( 'script' ) ;
74+ sc . onerror = rej ;
75+ sc . onload = ( ) => {
76+ typeof window . bootstrap === 'undefined' ? rej ( new Error ( 'Bootstrap library failed to load' ) ) : res ( ) ;
77+ } ;
78+
79+ sc . src = uri ;
80+ document . head . appendChild ( sc ) ;
81+ } ) ) ;
82+ } ;
83+
84+ /**
85+ * @param {ReturnType<typeof cache> } c
86+ * @returns {Promise<void> }
87+ */
88+ const loadFont = ( c ) => {
89+
90+ const font = 'https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap' ;
91+
92+ return c . get ( font ) . then ( ( uri ) => new Promise ( ( res , rej ) => {
93+ const link = document . createElement ( 'link' ) ;
94+ link . onload = res ;
95+ link . onerror = rej ;
96+
97+ link . rel = 'stylesheet' ;
98+ link . href = uri ;
99+ document . head . appendChild ( link ) ;
100+ } ) ) ;
101+ } ;
102+
103+ /**
104+ * @param {ReturnType<typeof cache> } c
105+ * @returns {Promise<void> }
106+ */
107+ const loadAdditionalFont = ( c ) => {
108+
109+ const fonts = [
110+ 'https://fonts.googleapis.com/css2?family=Sacramento&display=swap' ,
111+ 'https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic&display=swap' ,
112+ ] ;
113+
114+ /**
115+ * @param {string } font
116+ * @returns {Promise<void> }
117+ */
118+ const loadCss = ( font ) => c . get ( font ) . then ( ( uri ) => new Promise ( ( res , rej ) => {
119+ const link = document . createElement ( 'link' ) ;
120+ link . onload = res ;
121+ link . onerror = rej ;
122+
123+ link . rel = 'stylesheet' ;
124+ link . href = uri ;
125+ document . head . appendChild ( link ) ;
126+ } ) ) ;
127+
128+ return Promise . all ( fonts . map ( loadCss ) ) ;
129+ } ;
130+
131+ /**
132+ * @param {ReturnType<typeof cache> } c
133+ * @returns {Promise<void> }
134+ */
135+ const loadIcon = ( c ) => {
136+
137+ const url = 'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.0.0' ;
138+
139+ return c . get ( `${ url } )
140+ . then ( window . fetch )
141+ . then ( ( r ) => r . text ( ) )
142+ . then ( ( txt ) => {
143+ const urls = [ ...new Set ( [ ...txt . matchAll ( / u r l \( [ " ' ] ? ( [ ^ " ' ) ] + ) [ " ' ] ? \) / g) ] ) ] ;
144+
145+ return Promise . all ( urls . map ( ( m ) => {
146+ const orig = m [ 0 ] ;
147+ const rel = m [ 1 ] . replace ( '..' , '' ) ;
148+
149+ return c . get ( url + rel ) . then ( ( abs ) => ( { orig, abs } ) ) ;
150+ } ) ) . then ( ( res ) => {
151+ for ( const { orig, abs } of res ) {
152+ txt = txt . replaceAll ( orig , `url(${ abs } ) ;
153+ }
57154
58- sc . src = uri ;
59- document . head . appendChild ( sc ) ;
60- } ) ) ;
155+ return txt ;
156+ } ) ;
157+ } )
158+ . then ( ( txt ) => new Promise ( ( res , rej ) => {
159+ const link = document . createElement ( 'link' ) ;
160+ link . onload = res ;
161+ link . onerror = rej ;
162+
163+ link . rel = 'stylesheet' ;
164+ link . href = URL . createObjectURL ( new Blob ( [ txt ] ) ) ;
165+ document . head . appendChild ( link ) ;
166+ } ) ) ;
167+ } ;
61168
62169/**
63170 * @param {Object } [opt]
64171 * @param {boolean } [opt.aos=true] - Load AOS library
65172 * @param {boolean } [opt.confetti=true] - Load Confetti library
173+ * @param {boolean } [opt.additionalFont=true] - Load Additional Font
66174 * @returns {Promise<void> }
67175 */
68176export const loader = ( opt = { } ) => {
69177 const c = cache ( 'libs' ) ;
70178
71179 return c . open ( ) . then ( ( ) => {
72- const promises = [ ] ;
180+ const promises = [ loadFont ( c ) , loadIcon ( c ) , loadBootstrap ( c ) ] ;
73181
74182 if ( opt ?. aos ?? true ) {
75183 promises . push ( loadAOS ( c ) ) ;
@@ -79,6 +187,10 @@ export const loader = (opt = {}) => {
79187 promises . push ( loadConfetti ( c ) ) ;
80188 }
81189
190+ if ( opt ?. additionalFont ?? true ) {
191+ promises . push ( loadAdditionalFont ( c ) ) ;
192+ }
193+
82194 return Promise . all ( promises ) ;
83195 } ) ;
84196} ;
0 commit comments