1 module uim.bootstrap.bs5.demos.examples.blog; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("examples/blog", new class DH5AppPage { 7 this() { 8 super(); 9 this 10 .created(DateTime(2020, 12, 20, 10, 10, 0)) 11 .changed(timeLastModified(__FILE_FULL_PATH__)) 12 .parameters([ 13 "pageTitle": "Album Page - Bootstrap 5 Demo", 14 ]).styles(` .bd-placeholder-img { 15 font-size: 1.125rem; 16 text-anchor: middle; 17 -webkit-user-select: none; 18 -moz-user-select: none; 19 user-select: none; 20 } 21 22 @media (min-width: 768px) { 23 .bd-placeholder-img-lg { 24 font-size: 3.5rem; 25 } 26 } 27 28 /* stylelint-disable selector-list-comma-newline-after */ 29 30 .blog-header { 31 line-height: 1; 32 border-bottom: 1px solid #e5e5e5; 33 } 34 35 .blog-header-logo { 36 font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/; 37 font-size: 2.25rem; 38 } 39 40 .blog-header-logo:hover { 41 text-decoration: none; 42 } 43 44 h1, h2, h3, h4, h5, h6 { 45 font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/; 46 } 47 48 .display-4 { 49 font-size: 2.5rem; 50 } 51 @media (min-width: 768px) { 52 .display-4 { 53 font-size: 3rem; 54 } 55 } 56 57 .nav-scroller { 58 position: relative; 59 z-index: 2; 60 height: 2.75rem; 61 overflow-y: hidden; 62 } 63 64 .nav-scroller .nav { 65 display: flex; 66 flex-wrap: nowrap; 67 padding-bottom: 1rem; 68 margin-top: -1px; 69 overflow-x: auto; 70 text-align: center; 71 white-space: nowrap; 72 -webkit-overflow-scrolling: touch; 73 } 74 75 .nav-scroller .nav-link { 76 padding-top: .75rem; 77 padding-bottom: .75rem; 78 font-size: .875rem; 79 } 80 81 .card-img-right { 82 height: 100%; 83 border-radius: 0 3px 3px 0; 84 } 85 86 .flex-auto { 87 flex: 0 0 auto; 88 } 89 90 .h-250 { height: 250px; } 91 @media (min-width: 768px) { 92 .h-md-250 { height: 250px; } 93 } 94 95 /* Pagination */ 96 .blog-pagination { 97 margin-bottom: 4rem; 98 } 99 .blog-pagination > .btn { 100 border-radius: 2rem; 101 } 102 103 /* 104 * Blog posts 105 */ 106 .blog-post { 107 margin-bottom: 4rem; 108 } 109 .blog-post-title { 110 margin-bottom: .25rem; 111 font-size: 2.5rem; 112 } 113 .blog-post-meta { 114 margin-bottom: 1.25rem; 115 color: #727272; 116 } 117 118 /* 119 * Footer 120 */ 121 .blog-footer { 122 padding: 2.5rem 0; 123 color: #727272; 124 text-align: center; 125 background-color: #f9f9f9; 126 border-top: .05rem solid #e5e5e5; 127 } 128 .blog-footer p:last-child { 129 margin-bottom: 0; 130 }`) 131 .styles([ 132 ["href":"https://fonts.googleapis.com/css?family=Playfair+Display:700,900&display=swap", "rel":"stylesheet"], 133 ["href":"/css/blog.css", "rel":"stylesheet"]]); 134 } 135 136 override string content() { 137 auto header = BS5Container( 138 H5Header(["blog-header py-3"], 139 H5Div(["row flex-nowrap justify-content-between align-items-center"], 140 H5Div(["col-4 pt-1"], 141 H5A(["link-secondary"], ["href":"#"], "Subscribe") 142 ), 143 H5Div(["col-4 text-center"], 144 H5A(["blog-header-logo text-dark"], ["href":"#"], "Large"), 145 ), 146 H5Div(["col-4 d-flex justify-content-end align-items-center"], 147 H5A(["link-secondary"], ["href":"#", "aria-label":"Search"], 148 `<svg xmlns="http://www.w3.org/2000/svg" "width":"20" "height":"20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-"width":"2" class="mx-3" "role":"img" viewBox="0 0 24 24"><title>Search</title><circle cx="10.5" cy="10.5" r="7.5"/><path d="M21 21l-5.2-5.2"/></svg>` 149 ), 150 H5A(["btn btn-sm btn-outline-secondary"], ["href":"#"], "Sign up") 151 ))), 152 H5Div(["nav-scroller py-1 mb-2"], 153 BS5Nav(["d-flex justify-content-between"], 154 H5A(["p-2 link-secondary"], ["href":"#"], "U.S."), 155 H5A(["p-2 link-secondary"], ["href":"#"], "World"), 156 H5A(["p-2 link-secondary"], ["href":"#"], "Technology"), 157 H5A(["p-2 link-secondary"], ["href":"#"], "Design"), 158 H5A(["p-2 link-secondary"], ["href":"#"], "Culture"), 159 H5A(["p-2 link-secondary"], ["href":"#"], "Business"), 160 H5A(["p-2 link-secondary"], ["href":"#"], "Politics"), 161 H5A(["p-2 link-secondary"], ["href":"#"], "Opinion"), 162 H5A(["p-2 link-secondary"], ["href":"#"], "Science"), 163 H5A(["p-2 link-secondary"], ["href":"#"], "Health"), 164 H5A(["p-2 link-secondary"], ["href":"#"], "Style"), 165 H5A(["p-2 link-secondary"], ["href":"#"], "Travel") 166 ) 167 ) 168 ).toString; 169 170 auto footer = H5Footer(["blog-footer"], 171 H5P("Blog template built for "), 172 H5P(H5A(["href":"#"], "Back to top")) 173 ).toString; 174 175 return 176 header~ 177 178 H5Main(["container"], 179 H5Div(["p-4 p-md-5 mb-4 text-white rounded bg-dark"], 180 H5Div(["col-md-6 px-0"], 181 H5H1(["display-4 font-italic"], "Title of a longer featured blog post"), 182 H5P(["lead my-3"], "Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents."), 183 H5P(["lead mb-0"], H5A(["text-white fw-bold"], ["href":"#"], "Continue reading...")) 184 ) 185 ), 186 H5Div(["row mb-2"], 187 H5Div(["col-md-6"], 188 H5Div(["row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"], 189 H5Div(["col p-4 d-flex flex-column position-static"], 190 H5Strong(["d-inline-block mb-2 text-primary"], "World"), 191 H5H3(["mb-0"], "Featured post"), 192 H5Div(["mb-1 text-muted"], "Nov 12"), 193 H5P(["card-text mb-auto"], "This is a wider card with supporting text below as a natural lead-in to additional content."), 194 H5A(["stretched-link"], ["href":"#"], "Continue reading") 195 ), 196 H5Div(["col-auto d-none d-lg-block"], 197 /* H5Svg(["bd-placeholder-img" "width":"200" "height":"250" xmlns="http://www.w3.org/2000/svg" "role":"img", "aria-label":"Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect "width":"100%" "height":"100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> 198 */ 199 ) 200 ) 201 ), 202 H5Div(["col-md-6"], 203 H5Div(["row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"], 204 H5Div(["col p-4 d-flex flex-column position-static"], 205 H5Strong(["d-inline-block mb-2 text-success"], "Design"), 206 H5H3(["mb-0"], "Post title"), 207 H5Div(["mb-1 text-muted"], "Nov 11"), 208 H5P(["mb-auto"], "This is a wider card with supporting text below as a natural lead-in to additional content."), 209 H5A(["stretched-link"], ["href":"#"], "Continue reading") 210 ), 211 H5Div(["col-auto d-none d-lg-block"], 212 H5Svg(["bd-placeholder-img"], ["width":"200", "height":"250", "xmlns":"http://www.w3.org/2000/svg", "role":"img", "aria-label":"Placeholder: Thumbnail", "preserveAspectRatio":"xMidYMid slice", "focusable":"false"], 213 /* <title>Placeholder</title><rect "width":"100%" "height":"100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> */ 214 ) 215 ) 216 ) 217 ), 218 BS5Row( 219 H5Div(["col-md-8"], 220 H5H3(["pb-4 mb-4 font-italic border-bottom"], "From the Firehose"), 221 H5Article(["blog-post"], 222 H5H2(["blog-post-title"], "Sample blog post"), 223 H5P(["blog-post-meta"], H5String("January 1, 2014 by "), H5A(["href":"#"], "Mark")), 224 H5P("This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, images, and code are all supported."), 225 H5Hr, 226 H5P("Cum sociis natoque penatibus et magnis"), 227 H5Blockquote( 228 H5P("Curabitur blandit tempus porttitor.") 229 ), 230 H5P("Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur."), 231 H5H2("Heading"), 232 H5P("Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros."), 233 H5H3("Sub-heading"), 234 H5P("Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."), 235 H5Pre(`<code>Example code block</code>`), 236 H5P("Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa."), 237 H5H3("Sub-heading"), 238 H5P("Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus."), 239 H5Ul 240 .item("Praesent commodo cursus magna, vel scelerisque nisl consectetur et.") 241 .item("Donec id elit non mi porta gravida at eget metus.") 242 .item("Nulla vitae elit libero, a pharetra augue."), 243 H5P("Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue."), 244 H5Ol 245 .item("Vestibulum id ligula porta felis euismod semper.") 246 .item("Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.") 247 .item("Maecenas sed diam eget risus varius blandit sit amet non magna."), 248 H5P("Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.") 249 ), 250 H5Article(["blog-post"], 251 H5H2(["blog-post-title"], "Another blog post"), 252 H5P(["blog-post-meta"], H5String("December 23, 2013 by "), H5A(["href":"#"], "Jacob")), 253 H5P(H5String("Cum sociis natoque penatibus et magnis "), H5A(["href":"#"], "dis parturient montes")), 254 H5Blockquote(H5P("Curabitur blandit tempus porttitor.")), 255 H5P("Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur."), 256 H5P("Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.") 257 ), 258 H5Article(["blog-post"], 259 H5H2(["blog-post-title"], "New feature"), 260 H5P(["blog-post-meta"], H5String("December 14, 2013 by "), H5A(["href":"#"], "Chris")), 261 H5P("Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus."), 262 H5Blockquote( 263 H5Ul( 264 H5Li("Praesent commodo cursus magna, vel scelerisque nisl consectetur et."), 265 H5Li("elit non mi porta gravida at eget metus."), 266 H5Li("Nulla vitae elit libero, a pharetra augue.") 267 ) 268 ), 269 H5P("Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur."), 270 H5P("Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.") 271 ), 272 H5Nav(["blog-pagination"], ["aria-label":"Pagination"], 273 H5A(["btn btn-outline-primary"], ["href":"#"], "Older"), 274 H5A(["btn btn-outline-secondary disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Newer") 275 ) 276 ), 277 H5Blockquote( 278 H5Div( 279 H5Div(["p-4 mb-3 bg-light rounded"], 280 H5H4(["font-italic"], "About"), 281 H5P(["mb-0"], "Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.") 282 )), 283 H5Div(["p-4"], 284 H5H4(["font-italic"], "Archives"), 285 H5Ol(["list-unstyled mb-0"], 286 H5Li(H5A(["href":"#"], "March 2014")), 287 H5Li(H5A(["href":"#"], "February 2014")), 288 H5Li(H5A(["href":"#"], "January 2014")), 289 H5Li(H5A(["href":"#"], "December 2013")), 290 H5Li(H5A(["href":"#"], "November 2013")), 291 H5Li(H5A(["href":"#"], "October 2013")), 292 H5Li(H5A(["href":"#"], "September 2013")), 293 H5Li(H5A(["href":"#"], "August 2013")), 294 H5Li(H5A(["href":"#"], "July 2013")), 295 H5Li(H5A(["href":"#"], "June 2013")), 296 H5Li(H5A(["href":"#"], "May 2013")), 297 H5Li(H5A(["href":"#"], "April 2013")) 298 ) 299 ), 300 H5Div(["p-4"], 301 H5H4(["font-italic"], "Elsewhere"), 302 H5Ol(["list-unstyled"]) 303 .item(H5A(["href":"#"], "GitHub")) 304 .item(H5A(["href":"#"], "Twitter")) 305 .item(H5A(["href":"#"], "Facebook")) 306 ) 307 ) 308 ) 309 ) 310 ).toString~ 311 footer; 312 313 } 314 }); 315 } 316