FIX: favicons plugin
Tony Air
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 917 B |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 115 KiB |
|
After Width: | Height: | Size: 8.3 KiB |
|
After Width: | Height: | Size: 9.0 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 137 KiB |
|
After Width: | Height: | Size: 66 KiB |
|
After Width: | Height: | Size: 152 KiB |
|
After Width: | Height: | Size: 155 KiB |
|
After Width: | Height: | Size: 84 KiB |
|
After Width: | Height: | Size: 193 KiB |
|
After Width: | Height: | Size: 208 KiB |
|
After Width: | Height: | Size: 216 KiB |
|
After Width: | Height: | Size: 217 KiB |
|
After Width: | Height: | Size: 95 KiB |
|
After Width: | Height: | Size: 194 KiB |
|
After Width: | Height: | Size: 282 KiB |
|
After Width: | Height: | Size: 209 KiB |
|
After Width: | Height: | Size: 154 KiB |
|
After Width: | Height: | Size: 217 KiB |
|
After Width: | Height: | Size: 218 KiB |
|
After Width: | Height: | Size: 138 KiB |
|
After Width: | Height: | Size: 157 KiB |
|
After Width: | Height: | Size: 284 KiB |
|
After Width: | Height: | Size: 66 KiB |
|
After Width: | Height: | Size: 84 KiB |
|
After Width: | Height: | Size: 96 KiB |
|
|
@ -0,0 +1,15 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<browserconfig>
|
||||
<msapplication>
|
||||
<tile>
|
||||
<square70x70logo src="mstile-70x70.png"/>
|
||||
<square150x150logo src="mstile-150x150.png"/>
|
||||
<wide310x150logo src="mstile-310x150.png"/>
|
||||
<square310x310logo src="mstile-310x310.png"/>
|
||||
<TileColor>#fff</TileColor>
|
||||
|
||||
</tile>
|
||||
|
||||
</msapplication>
|
||||
|
||||
</browserconfig>
|
||||
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 321 B |
|
After Width: | Height: | Size: 751 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 76 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
|
@ -0,0 +1,59 @@
|
|||
{
|
||||
"name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react",
|
||||
"short_name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react",
|
||||
"description": "This UI Kit allows you to build Bootstrap 5 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",
|
||||
"dir": "auto",
|
||||
"lang": "en-US",
|
||||
"display": "standalone",
|
||||
"orientation": "any",
|
||||
"start_url": "/?homescreen=1",
|
||||
"background_color": "#fff",
|
||||
"theme_color": "#fff",
|
||||
"icons": [
|
||||
{
|
||||
"src": "android-chrome-36x36.png",
|
||||
"sizes": "36x36",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "android-chrome-48x48.png",
|
||||
"sizes": "48x48",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "android-chrome-72x72.png",
|
||||
"sizes": "72x72",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "android-chrome-96x96.png",
|
||||
"sizes": "96x96",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "android-chrome-144x144.png",
|
||||
"sizes": "144x144",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "android-chrome-256x256.png",
|
||||
"sizes": "256x256",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "android-chrome-384x384.png",
|
||||
"sizes": "384x384",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "android-chrome-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"version": "3.0.3",
|
||||
"name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react",
|
||||
"description": "This UI Kit allows you to build Bootstrap 5 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",
|
||||
"icons": {
|
||||
"60": "firefox_app_60x60.png",
|
||||
"128": "firefox_app_128x128.png",
|
||||
"512": "firefox_app_512x512.png"
|
||||
},
|
||||
"developer": {
|
||||
"name": "Tony Air",
|
||||
"url": null
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"version": "3.0.3",
|
||||
"api_version": 1,
|
||||
"layout": {
|
||||
"logo": "yandex-browser-50x50.png",
|
||||
"color": "#fff",
|
||||
"show_title": true
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<!doctype html><html lang="en"><head><title>Webpack Bootstrap 4 UI Demo</title><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="description" content="UI Kit"/><meta name="author" content="Tony Air <tony@twma.pro>"/><meta name="ping" content="/Security/ping"/><meta name="api_url" content="http://127.0.0.1/graphql"/><meta name="api_static_domain" content="http://127.0.0.1"/><meta name="swversion" content="sw-1613904049437"/><base href="http://127.0.0.1:3001"/><script defer="defer" src="js/app.js"></script><script defer="defer" src="js/app_sw.js"></script><link href="css/app.css" rel="stylesheet"></head><body data-default-lng="0" data-default-lat="0"><div class="wrapper"><style>@keyframes lds-ellipsis1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0,0)}100%{transform:translate(19px,0)}}body,html{font-size:14px;margin:0;padding:0;background:#fff;color:#333;overflow-x:hidden}#PageLoading{position:fixed;left:0;top:0;margin:0;width:100%!important;height:100%!important;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:2000;will-change:opacity;background:#212529;color:#212529}#PageLoading .logo{filter:invert(1);margin-left:20px}.main-bn{position:fixed;top:0;left:0;width:100%;z-index:99999999;padding:.5rem 1rem;text-align:center;color:#fff;background:red}iframe,img{max-width:100%}.loading-spinner{text-align:center}.lds-ellipsis{display:inline-block;position:relative;width:64px;height:64px;color:#fff}.lds-ellipsis div{position:absolute;top:27px;width:11px;height:11px;border-radius:50%;background:#888;animation-timing-function:cubic-bezier(0,1,1,0)}.lds-ellipsis div:nth-child(1){left:6px;animation:lds-ellipsis1 .6s infinite}.lds-ellipsis div:nth-child(2){left:6px;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(3){left:26px;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(4){left:45px;animation:lds-ellipsis3 .6s infinite}@keyframes lds-text{from{font-size:1em}to{font-size:1.5em}}.lds-text{position:absolute;top:50%;left:50%;margin-left:-5rem;margin-top:8rem;font-size:.8rem;letter-spacing:.25em;color:#fff}.lds-text b{font-weight:300;animation:lds-text 5s ease infinite alternate}.lds-text b:nth-child(1){animation-delay:.5s}.lds-text b:nth-child(2){animation-delay:1s}.lds-text b:nth-child(3){animation-delay:1.5s}.lds-text b:nth-child(4){animation-delay:2s}.lds-text b:nth-child(5){animation-delay:2.5s}.lds-text b:nth-child(6){animation-delay:3s}.lds-text b:nth-child(7){animation-delay:3.5s}.lds-text b:nth-child(8){animation-delay:4s}.lds-text b:nth-child(9){animation-delay:4.5s}.lds-text b:nth-child(10){animation-delay:5s}</style><div id="PageLoading"><div class="loading-spinner"><img class="logo" src="../fonts/logo.svg" width="200" alt="UI Kit"/><br/><div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div><br/><div class="lds-placeholder">LOADING...</div><div class="lds-text"><b>L</b> <b>O</b> <b>A</b> <b>D</b> <b>I</b> <b>N</b> <b>G</b> <b>.</b> <b>.</b> <b>.</b></div></div></div><div id="SiteWideAlerts" class="offline-message"><div class="alert alert-danger alert-offline alert-dismissible fade show" role="alert"><div class="typography">The Internet connection is missing right now, but you're able to browse previously opened pages offline.</div><button type="button" class="btn btn-danger btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="fas fa-times"></i></button></div><noscript><div class="main-bn alert alert-fixed-top alert-danger" role="alert">Please, enable javascript.</div></noscript><!--[if lt IE 11
|
||||
<!doctype html><html lang="en"><head><title>Webpack Bootstrap 4 UI Demo</title><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="description" content="UI Kit"/><meta name="author" content="Tony Air <tony@twma.pro>"/><meta name="ping" content="/Security/ping"/><meta name="api_url" content="http://127.0.0.1/graphql"/><meta name="api_static_domain" content="http://127.0.0.1"/><meta name="swversion" content="sw-1613930247179"/><base href="http://127.0.0.1:3001"/><script defer="defer" src="js/app.js"></script><script defer="defer" src="js/app_sw.js"></script><link href="css/app.css" rel="stylesheet"></head><body data-default-lng="0" data-default-lat="0"><div class="wrapper"><style>@keyframes lds-ellipsis1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0,0)}100%{transform:translate(19px,0)}}body,html{font-size:14px;margin:0;padding:0;background:#fff;color:#333;overflow-x:hidden}#PageLoading{position:fixed;left:0;top:0;margin:0;width:100%!important;height:100%!important;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:2000;will-change:opacity;background:#212529;color:#212529}#PageLoading .logo{filter:invert(1);margin-left:20px}.main-bn{position:fixed;top:0;left:0;width:100%;z-index:99999999;padding:.5rem 1rem;text-align:center;color:#fff;background:red}iframe,img{max-width:100%}.loading-spinner{text-align:center}.lds-ellipsis{display:inline-block;position:relative;width:64px;height:64px;color:#fff}.lds-ellipsis div{position:absolute;top:27px;width:11px;height:11px;border-radius:50%;background:#888;animation-timing-function:cubic-bezier(0,1,1,0)}.lds-ellipsis div:nth-child(1){left:6px;animation:lds-ellipsis1 .6s infinite}.lds-ellipsis div:nth-child(2){left:6px;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(3){left:26px;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(4){left:45px;animation:lds-ellipsis3 .6s infinite}@keyframes lds-text{from{font-size:1em}to{font-size:1.5em}}.lds-text{position:absolute;top:50%;left:50%;margin-left:-5rem;margin-top:8rem;font-size:.8rem;letter-spacing:.25em;color:#fff}.lds-text b{font-weight:300;animation:lds-text 5s ease infinite alternate}.lds-text b:nth-child(1){animation-delay:.5s}.lds-text b:nth-child(2){animation-delay:1s}.lds-text b:nth-child(3){animation-delay:1.5s}.lds-text b:nth-child(4){animation-delay:2s}.lds-text b:nth-child(5){animation-delay:2.5s}.lds-text b:nth-child(6){animation-delay:3s}.lds-text b:nth-child(7){animation-delay:3.5s}.lds-text b:nth-child(8){animation-delay:4s}.lds-text b:nth-child(9){animation-delay:4.5s}.lds-text b:nth-child(10){animation-delay:5s}</style><div id="PageLoading"><div class="loading-spinner"><img class="logo" src="../fonts/logo.svg" width="200" alt="UI Kit"/><br/><div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div><br/><div class="lds-placeholder">LOADING...</div><div class="lds-text"><b>L</b> <b>O</b> <b>A</b> <b>D</b> <b>I</b> <b>N</b> <b>G</b> <b>.</b> <b>.</b> <b>.</b></div></div></div><div id="SiteWideAlerts" class="offline-message"><div class="alert alert-danger alert-offline alert-dismissible fade show" role="alert"><div class="typography">The Internet connection is missing right now, but you're able to browse previously opened pages offline.</div><button type="button" class="btn btn-danger btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="fas fa-times"></i></button></div><noscript><div class="main-bn alert alert-fixed-top alert-danger" role="alert">Please, enable javascript.</div></noscript><!--[if lt IE 11
|
||||
]><div class="main-bn alert alert-danger" role="alert">
|
||||
<a
|
||||
href="https://www.google.com/chrome/browser/desktop/"
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
experience, upgrade for free today.
|
||||
</a>
|
||||
</div><!
|
||||
[endif]--></div><noscript><div class="main-bn">Please, enable javascript.</div></noscript><div id="PageTopAnchor"></div><div class="flyout-FlyoutUI"><i class="fas fa-times flyout-FlyoutUI__close"></i><h2 class="flyout-FlyoutUI__title"><i class="fas fa-asterisk"></i> Flyout Demo</h2><div class="flyout-FlyoutUI__content typography"><p>Lipsum .... .... ....</p></div></div><header id="Header" class="stiky-top"><nav id="Navigation" class="navbar navbar-expand-lg"><div class="container"><a class="navbar-brand" href="#">UI Kit</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#NavbarResponsive" aria-controls="NavbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><i class="navbar-toggler-icon fa fas fa-bars"></i></button><div id="NavbarResponsive" class="collapse navbar-collapse"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link js-scrollTo" href="#PageTopAnchor">Home <span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link js-scrollTo" href="#Slider">Slider</a></li><li class="nav-item dropdown dropdown-hover"><a id="NavbarDropdown" class="nav-link dropdown-toggle-fl dropdown-toggle-notouch" href="#">Dropdown </a><button class="nav-link dropdown-toggle dropdown-toggle-sm dropdown-toggle-touch" role="button" data-bs-toggle="dropdown" aria-expanded="false" type="button">Dropdown</button><div class="dropdown-menu" aria-labelledby="NavbarDropdown"><a class="dropdown-item" href="#">Action</a> <a class="dropdown-item js-scrollTo" href="#AccordionList">Scroll to AccordionList</a><div class="dropdown-divider"></div><a class="dropdown-item" href="https://google.com" target="_blank" rel="nofollow">Go to Google.com</a><div class="dropdown-divider"></div><a class="dropdown-item graphql-page" href="/home">Test dropdown hide on GraphQL</a></div></li><li class="nav-item"><a id="LoadGraphQL" class="nav-link graphql-page" href="/home">Load GraphQL</a></li><li class="nav-item"><a class="nav-link graphql-page" href="/aquascaping">Load GraphQL #2</a></li><li class="nav-item"><a class="nav-link js-scrollTo" href="#AccordionList">Accordion List</a></li><li><form class="form-inline my-2 my-lg-0"><input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"/> <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><i class="fas fa-search"></i> <span class="sr-only">Search</span></button></form></li></ul></div></div></nav></header><main id="MainContent" class="page-content"><div class="elemental-area"><div class="element page-header-element"><div class="element-container container"><h1 class="page-header">Webpack Bootstrap 4 UI Demo</h1></div></div><section id="Slider" class="element site__elements__sliderelement"><div class="element-container container-fluid"><div id="Carousel{$ID}" class="carousel slide js-carousel d-none d-sm-block" data-indicators="true" data-arrows="true"><div class="carousel-inner"><div class="carousel-item active"><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn-primary"><img class="d-block w-100" src="https://placehold.it/1200x600" alt="$Headline"></a><div class="carousel-caption"><div class="carousel-caption-container"><h2 class="carousel-title">$Headline #1</h2><p class="carousel-content">$Description</p><p><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn btn-default btn-lg"><i class="fas fa-bars"></i> Learn More</a></p></div></div></div><div class="carousel-item"><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn-primary"><img class="d-block w-100" src="https://placehold.it/1200x600" alt="$Headline"></a><div class="carousel-caption"><div class="carousel-caption-container"><h2 class="carousel-title">$Headline #2</h2><p class="carousel-content">$Description</p><p><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn btn-default btn-lg"><i class="fas fa-bars"></i> Learn More</a></p></div></div></div><div class="carousel-item"><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn-primary"><img class="d-block w-100" src="https://placehold.it/1200x600" alt="$Headline"></a><div class="carousel-caption"><div class="carousel-caption-container"><h2 class="carousel-title">$Headline #3</h2><p class="carousel-content">$Description</p><p><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn btn-default btn-lg"><i class="fas fa-bars"></i> Learn More</a></p></div></div></div></div></div></div></section><section id="Lightbox" class="element dnadesign__elemental__models__elementcontent"><div class="element-container container"><div class="content-element__content"><h2 class="content-element__title">Lightbox Demo</h2><style>[data-toggle=lightbox]:focus,[data-toggle=lightbox]:hover{text-decoration:underline}</style><div id="MetaLightboxContainer"><div class="typography"><h2>Loading data</h2><p><a href="../src/img/photo1.png" data-toggle="lightbox" data-gallery="demo" data-title="That's first link">Load an Image</a><br/><a href="../src/test.json" data-toggle="lightbox">Load JSON</a></p><style>[data-toggle=lightbox]:focus,[data-toggle=lightbox]:hover{text-decoration:underline}</style><br/><a href="../src/test-pajax.html" data-toggle="lightbox">Load Partial AJAX HTML</a><br/><a href="../src/not-found.html" data-toggle="lightbox">Not Found test</a><p></p><h2>Embeds</h2><p><a href="https://www.youtube.com/watch?v=WYvZZYthDRI" data-toggle="lightbox" data-embed="true">Embed Youtube link</a><br/><a href="https://vimeo.com/26216129" data-toggle="lightbox" data-embed="true">Embed Vimeo link</a><br/><a href="https://soundcloud.com/littlenapoleon/led-zeppelin-vs-rolling-stones" data-toggle="lightbox" data-embed="true">Embed SoundCloud link</a><br/><a href="https://www.instagram.com/p/CKl5n87hf7R/" data-toggle="lightbox" data-embed="true">Embed Instagram</a></p><h2>Other</h2><p><a href="../src/img/photo2.jpg" data-toggle="lightbox" data-gallery="demo">Use [data-toggle="lightbox"] attribute to attach lightbox action and [href] to specify URL.</a></p><p><a href="../src/img/photo1.png" data-toggle="lightbox" data-gallery="demo" data-title="Use data-title attribute to specify lightbox title">Use [data-gallery="YOUR_GALLERY_NAME"] to group ligthboxes with next/prev arrows</a></p><p data-toggle="lightbox" data-href="https://youtu.be/GgnClrx8N2k" data-gallery="demo" data-title="Yes you can link vimeo and youtube videos as long as AJAX content">Use [data-toggle="lightbox"] + [data-href] attribute to toggle lightbox on regular elements. <b>Click me!</b></p></div><div id="MetaLightboxApp"></div></div></div></div></section><section id="Content" class="element dnadesign__elemental__models__elementcontent"><div class="element-container container"><div class="content-element__content"><h2 class="content-element__title">Content Demo</h2><div class="typography"><h3><i class="fas fa-search"></i> Quick start</h3><ol><li><p>Clone quick start repository</p><pre>
|
||||
[endif]--></div><noscript><div class="main-bn">Please, enable javascript.</div></noscript><div id="PageTopAnchor"></div><div class="flyout-FlyoutUI"><i class="fas fa-times flyout-FlyoutUI__close"></i><h2 class="flyout-FlyoutUI__title"><i class="fas fa-asterisk"></i> Flyout Demo</h2><div class="flyout-FlyoutUI__content typography"><p>Lipsum .... .... ....</p></div></div><header id="Header" class="stiky-top"><nav id="Navigation" class="navbar navbar-expand-lg"><div class="container"><a class="navbar-brand" href="#">UI Kit</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#NavbarResponsive" aria-controls="NavbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><i class="navbar-toggler-icon fa fas fa-bars"></i></button><div id="NavbarResponsive" class="collapse navbar-collapse"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link js-scrollTo" href="#PageTopAnchor" data-text="Home">Home <span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link js-scrollTo" href="#Slider" data-text="Slider">Slider</a></li><li class="nav-item dropdown dropdown-hover"><a id="NavbarDropdown" class="nav-link dropdown-toggle-fl dropdown-toggle-notouch" href="#" data-text="Dropdown">Dropdown </a><button class="nav-link dropdown-toggle dropdown-toggle-sm dropdown-toggle-touch" role="button" data-bs-toggle="dropdown" aria-expanded="false" type="button">Dropdown</button><div class="dropdown-menu" aria-labelledby="NavbarDropdown"><a class="dropdown-item" href="#">Action</a> <a class="dropdown-item js-scrollTo" href="#AccordionList">Scroll to AccordionList</a><div class="dropdown-divider"></div><a class="dropdown-item" href="https://google.com" target="_blank" rel="nofollow">Go to Google.com</a><div class="dropdown-divider"></div><a class="dropdown-item graphql-page" href="/home">Test dropdown hide on GraphQL</a></div></li><li class="nav-item"><a id="LoadGraphQL" class="nav-link graphql-page" href="/home">Load GraphQL</a></li><li class="nav-item"><a class="nav-link graphql-page" href="/en/aquascaping">Load GraphQL #2</a></li><li class="nav-item"><a class="nav-link js-scrollTo" href="#AccordionList">Accordion List</a></li><li><form class="form-inline my-2 my-lg-0"><input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"/> <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><i class="fas fa-search"></i> <span class="sr-only">Search</span></button></form></li></ul></div></div></nav></header><main id="MainContent" class="page-content"><div class="elemental-area"><div class="element page-header-element"><div class="element-container container"><h1 class="page-header">Webpack Bootstrap 4 UI Demo</h1></div></div><section id="Slider" class="element site__elements__sliderelement"><div class="element-container container-fluid"><div id="Carousel{$ID}" class="carousel slide js-carousel d-none d-sm-block" data-indicators="true" data-arrows="true"><div class="carousel-inner"><div class="carousel-item active"><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn-primary"><img class="d-block w-100" src="https://placehold.it/1200x600" alt="$Headline"></a><div class="carousel-caption"><div class="carousel-caption-container"><h2 class="carousel-title">$Headline #1</h2><p class="carousel-content">$Description</p><p><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn btn-default btn-lg"><i class="fas fa-bars"></i> Learn More</a></p></div></div></div><div class="carousel-item"><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn-primary"><img class="d-block w-100" src="https://placehold.it/1200x600" alt="$Headline"></a><div class="carousel-caption"><div class="carousel-caption-container"><h2 class="carousel-title">$Headline #2</h2><p class="carousel-content">$Description</p><p><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn btn-default btn-lg"><i class="fas fa-bars"></i> Learn More</a></p></div></div></div><div class="carousel-item"><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn-primary"><img class="d-block w-100" src="https://placehold.it/1200x600" alt="$Headline"></a><div class="carousel-caption"><div class="carousel-caption-container"><h2 class="carousel-title">$Headline #3</h2><p class="carousel-content">$Description</p><p><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn btn-default btn-lg"><i class="fas fa-bars"></i> Learn More</a></p></div></div></div></div></div></div></section><section id="Lightbox" class="element dnadesign__elemental__models__elementcontent"><div class="element-container container"><div class="content-element__content"><h2 class="content-element__title">Lightbox Demo</h2><style>[data-toggle=lightbox]:focus,[data-toggle=lightbox]:hover{text-decoration:underline}</style><div id="MetaLightboxContainer"><div class="typography"><h2>Loading data</h2><p><a href="../src/img/photo1.png" data-toggle="lightbox" data-gallery="demo" data-title="That's first link">Load an Image</a><br/><a href="../src/test.json" data-toggle="lightbox">Load JSON</a></p><style>[data-toggle=lightbox]:focus,[data-toggle=lightbox]:hover{text-decoration:underline}</style><br/><a href="../src/test-pajax.html" data-toggle="lightbox">Load Partial AJAX HTML</a><br/><a href="../src/not-found.html" data-toggle="lightbox">Not Found test</a><p></p><h2>Embeds</h2><p><a href="https://www.youtube.com/watch?v=WYvZZYthDRI" data-toggle="lightbox" data-embed="true">Embed Youtube link</a><br/><a href="https://vimeo.com/26216129" data-toggle="lightbox" data-embed="true">Embed Vimeo link</a><br/><a href="https://soundcloud.com/littlenapoleon/led-zeppelin-vs-rolling-stones" data-toggle="lightbox" data-embed="true">Embed SoundCloud link</a><br/><a href="https://www.instagram.com/p/CKl5n87hf7R/" data-toggle="lightbox" data-embed="true">Embed Instagram</a></p><h2>Other</h2><p><a href="../src/img/photo2.jpg" data-toggle="lightbox" data-gallery="demo">Use [data-toggle="lightbox"] attribute to attach lightbox action and [href] to specify URL.</a></p><p><a href="../src/img/photo1.png" data-toggle="lightbox" data-gallery="demo" data-title="Use data-title attribute to specify lightbox title">Use [data-gallery="YOUR_GALLERY_NAME"] to group ligthboxes with next/prev arrows</a></p><p data-toggle="lightbox" data-href="https://youtu.be/GgnClrx8N2k" data-gallery="demo" data-title="Yes you can link vimeo and youtube videos as long as AJAX content">Use [data-toggle="lightbox"] + [data-href] attribute to toggle lightbox on regular elements. <b>Click me!</b></p></div><div id="MetaLightboxApp"></div></div></div></div></section><section id="Content" class="element dnadesign__elemental__models__elementcontent"><div class="element-container container"><div class="content-element__content"><h2 class="content-element__title">Content Demo</h2><div class="typography"><h3><i class="fas fa-search"></i> Quick start</h3><ol><li><p>Clone quick start repository</p><pre>
|
||||
git clone https://github.com/a2nt/webpack-bootstrap-ui-kit-quick-start.git</pre></li><li><p>Install npm packages</p><pre>
|
||||
cd ./webpack-bootstrap-ui-kit-quick-start.git
|
||||
npm install
|
||||
|
|
|
|||
|
|
@ -118,7 +118,8 @@
|
|||
"fast-json-stable-stringify": "^2.1.0",
|
||||
"fast-levenshtein": "^3.0.0",
|
||||
"fastest-levenshtein": "^1.0.12",
|
||||
"favicons-webpack-plugin": "github:jantimon/favicons-webpack-plugin#benkostr-webpack-5",
|
||||
"favicons": "^6.2.1",
|
||||
"favicons-webpack-plugin": "5.0.1",
|
||||
"file-loader": "^6.2.0",
|
||||
"graphql-tag": "^2.11.0",
|
||||
"hoist-non-react-statics": "^3.3.2",
|
||||
|
|
|
|||
|
|
@ -17,18 +17,27 @@
|
|||
<div id="NavbarResponsive" class="collapse navbar-collapse">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link js-scrollTo" href="#PageTopAnchor"
|
||||
<a
|
||||
class="nav-link js-scrollTo"
|
||||
href="#PageTopAnchor"
|
||||
data-text="Home"
|
||||
>Home <span class="sr-only">(current)</span></a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link js-scrollTo" href="#Slider">Slider</a>
|
||||
<a
|
||||
class="nav-link js-scrollTo"
|
||||
href="#Slider"
|
||||
data-text="Slider"
|
||||
>Slider</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover">
|
||||
<a
|
||||
id="NavbarDropdown"
|
||||
class="nav-link dropdown-toggle-fl dropdown-toggle-notouch"
|
||||
href="#"
|
||||
data-text="Dropdown"
|
||||
>
|
||||
Dropdown
|
||||
</a>
|
||||
|
|
@ -73,7 +82,7 @@
|
|||
>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link graphql-page" href="/aquascaping"
|
||||
<a class="nav-link graphql-page" href="/en/aquascaping"
|
||||
>Load GraphQL #2</a
|
||||
>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -133,6 +133,10 @@ const MainUILinks = ((W) => {
|
|||
|
||||
el.classList.add('loading');
|
||||
|
||||
el.classList.remove('response-404');
|
||||
el.classList.remove('response-500');
|
||||
el.classList.remove('response-523');
|
||||
|
||||
SpinnerUI.show();
|
||||
BODY.classList.add('ajax-loading');
|
||||
|
||||
|
|
|
|||
|
|
@ -80,13 +80,16 @@ export default ((W) => {
|
|||
|
||||
// current browser online state
|
||||
|
||||
if (typeof navigator.onLine !== 'undefined') {
|
||||
if (!navigator.onLine) {
|
||||
UPDATE_ONLINE_STATUS(false);
|
||||
} else {
|
||||
UPDATE_ONLINE_STATUS(true);
|
||||
|
||||
const navigatorStateUpdate = () => {
|
||||
if (typeof navigator.onLine !== 'undefined') {
|
||||
if (!navigator.onLine) {
|
||||
UPDATE_ONLINE_STATUS(false);
|
||||
} else {
|
||||
UPDATE_ONLINE_STATUS(true);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
W.addEventListener(`${Events.OFFLINE}`, () => {
|
||||
UPDATE_ONLINE_STATUS(false);
|
||||
|
|
@ -96,7 +99,11 @@ export default ((W) => {
|
|||
UPDATE_ONLINE_STATUS(true);
|
||||
});
|
||||
|
||||
/*W.addEventListener(`${Events.LOADED}`, () => {
|
||||
UPDATE_ONLINE_STATUS(true);
|
||||
});*/
|
||||
W.addEventListener(`${Events.LOADED}`, () => {
|
||||
navigatorStateUpdate();//UPDATE_ONLINE_STATUS(true);
|
||||
});
|
||||
|
||||
W.addEventListener(`${Events.AJAX}`, () => {
|
||||
navigatorStateUpdate();
|
||||
});
|
||||
})(window);
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ class Page extends Component {
|
|||
Summary: null,
|
||||
Link: null,
|
||||
URL: null,
|
||||
HTML: null,
|
||||
Elements: [],
|
||||
page: null,
|
||||
};
|
||||
|
|
@ -57,9 +58,8 @@ class Page extends Component {
|
|||
return BODY.classList.contains('is-online');
|
||||
};
|
||||
|
||||
load = (link) => {
|
||||
load = (url_segment) => {
|
||||
const ui = this;
|
||||
const url_segment = link.split('/').pop();
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
const query = gql(`
|
||||
|
|
@ -76,6 +76,7 @@ class Page extends Component {
|
|||
Summary
|
||||
Link
|
||||
URLSegment
|
||||
HTML
|
||||
Elements {
|
||||
edges {
|
||||
node {
|
||||
|
|
@ -178,6 +179,7 @@ class Page extends Component {
|
|||
CSSClass: page.CSSClass,
|
||||
Summary: page.Summary,
|
||||
Link: page.Link,
|
||||
HTML: page.HTML,
|
||||
Elements: page.Elements.edges,
|
||||
loading: false,
|
||||
});
|
||||
|
|
@ -204,7 +206,10 @@ class Page extends Component {
|
|||
);
|
||||
|
||||
let html = '';
|
||||
if (ui.state.Elements.length) {
|
||||
if(ui.state.HTML) {
|
||||
console.log(`${ui.name}: HTML only`);
|
||||
html = ui.state.HTML;
|
||||
}else if (ui.state.Elements.length) {
|
||||
console.log(`${ui.name}: render`);
|
||||
ui.state.Elements.map((el) => {
|
||||
html += el.node.Render;
|
||||
|
|
@ -212,7 +217,9 @@ class Page extends Component {
|
|||
} else if (ui.state.Summary && ui.state.Summary.length) {
|
||||
console.log(`${ui.name}: summary only`);
|
||||
html = `<div class="summary">${ui.state.Summary}</div>`;
|
||||
} else {
|
||||
}
|
||||
|
||||
if(ui.state.loading){
|
||||
const spinner = D.getElementById('PageLoading');
|
||||
html = `<div class="loading">Loading ...</div>`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -137,7 +137,7 @@ if (filesystem.existsSync(indexPath)) {
|
|||
);
|
||||
}
|
||||
|
||||
/*const faviconPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'favicon.png');
|
||||
const faviconPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'favicon.png');
|
||||
if (filesystem.existsSync(faviconPath)) {
|
||||
plugins.push(
|
||||
new FaviconsWebpackPlugin({
|
||||
|
|
@ -202,7 +202,7 @@ commonVariables.themes.forEach((theme) => {
|
|||
}),
|
||||
);
|
||||
}
|
||||
});*/
|
||||
});
|
||||
|
||||
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
|
||||
.BundleAnalyzerPlugin;
|
||||
|
|
|
|||