From f6817b0059e1b4763980c6c62a14e1fae75d29fb Mon Sep 17 00:00:00 2001 From: waldronmatt Date: Sun, 26 Mar 2023 00:20:23 -0400 Subject: [PATCH] fix(global): revamp demo site to include document section examples --- src/404.html | 54 +++++++++++++++++-- src/index.html | 114 +++++++++++++++++++++++++++++++++++++-- src/scss/base/_base.scss | 63 ++++++++++++++++++++-- src/scss/index.scss | 2 - src/ts/footer.ts | 5 ++ src/ts/header.ts | 12 +++++ src/ts/index.ts | 22 +------- 7 files changed, 236 insertions(+), 36 deletions(-) create mode 100644 src/ts/footer.ts create mode 100644 src/ts/header.ts diff --git a/src/404.html b/src/404.html index 77de38b..293565d 100644 --- a/src/404.html +++ b/src/404.html @@ -5,11 +5,57 @@ <%= htmlWebpackPlugin.options.title %> +
+

Webpack Template

+ +
-

404 - Page Not Found

-
-

© Copyright

-
+

404 - Page Not Found

+ diff --git a/src/index.html b/src/index.html index fd81062..11dce3e 100644 --- a/src/index.html +++ b/src/index.html @@ -46,12 +46,116 @@ } +
+

Webpack Template

+ +
-

Welcome to Webpack Template!

-
-

© Copyright

-
-
+

Lorem ipsum dolor

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at + pulvinar ligula. Praesent eget elit venenatis, elementum sapien id, + aliquam lorem. Suspendisse auctor eu justo eu pellentesque. Donec + gravida quam eu leo congue venenatis. Sed consectetur nunc justo, et + mattis arcu interdum id. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. Donec a mi id massa cursus vehicula. +

+

Nunc laoreet aliquet

+

+ Nunc laoreet aliquet orci, a sollicitudin neque convallis non. + Pellentesque ac nulla eget orci ornare fermentum ut in arcu. In nisl + velit, pretium quis pulvinar et, porta sit amet neque. Fusce sagittis + dui purus, nec pharetra risus egestas vitae. Suspendisse semper nisl sed + euismod scelerisque. Praesent dapibus commodo ligula, id varius diam + vulputate id. Sed pharetra egestas erat quis sodales. Aenean ut faucibus + neque, imperdiet semper leo. Nullam pharetra elit vel pellentesque + rutrum. Donec pulvinar leo vel iaculis sodales. Phasellus vel rhoncus + nibh. Donec convallis nec ipsum vitae mattis. Nullam at urna laoreet, + vulputate enim et, aliquet massa. Vestibulum in porttitor nunc. +

+

Nullam fermentum magna

+

+ Nullam fermentum magna ut lacus egestas aliquam. Aliquam accumsan tellus + tellus, ornare maximus dui suscipit sed. Suspendisse potenti. Cras vel + interdum risus. Sed rutrum a odio ut rutrum. Suspendisse potenti. + Maecenas venenatis laoreet ante in cursus. Etiam malesuada volutpat + euismod. +

+

Vivamus et luctus

+

+ Vivamus et luctus sem, vel aliquam ipsum. Donec elementum iaculis augue + nec tempus. Integer massa quam, euismod nec lectus sed, luctus gravida + sapien. Duis dignissim tempor orci, a accumsan est consectetur at. + Suspendisse potenti. Aenean imperdiet lectus in nibh mollis, sed + facilisis eros semper. Aliquam eu odio turpis. Aliquam efficitur finibus + tortor, id ornare dolor commodo posuere. Aenean vulputate sed felis + vitae euismod. Phasellus pellentesque at felis vitae vestibulum. Nunc + ultrices enim leo, ut pharetra mauris lobortis et. Ut at luctus velit, + non fermentum leo. +

+

Phasellus fringilla diam

+

+ Phasellus fringilla diam eget dui venenatis ullamcorper. Phasellus lorem + magna, vulputate sed nibh id, pellentesque venenatis orci. Maecenas + rhoncus, urna eget pellentesque venenatis, nibh felis convallis est, nec + euismod odio magna in est. Sed dignissim metus ac consectetur luctus. + Nulla id bibendum neque. Etiam imperdiet auctor diam at ultricies. + Praesent condimentum justo urna, eget facilisis nisi elementum non. + Morbi sed nisi convallis, sagittis magna at, facilisis purus. Class + aptent taciti sociosqu ad litora torquent per conubia nostra, per + inceptos himenaeos. Aliquam rutrum, turpis a bibendum aliquam, sapien + tellus tincidunt nulla, eget interdum risus arcu sed tellus. Quisque in + libero malesuada, pellentesque lectus vitae, consectetur mauris. Cras + diam mi, condimentum sit amet imperdiet eu, accumsan quis libero. + Vestibulum sed pulvinar augue. Nunc rutrum purus a erat fermentum, ac + blandit lorem sagittis. Quisque vitae suscipit velit. Nunc non dolor + iaculis, ullamcorper odio ultrices, blandit ante. +

+ diff --git a/src/scss/base/_base.scss b/src/scss/base/_base.scss index 4962b87..cfd0ba9 100644 --- a/src/scss/base/_base.scss +++ b/src/scss/base/_base.scss @@ -1,10 +1,63 @@ body { font-family: Tajawal, Arial, Helvetica, sans-serif; - margin: 2rem; + margin: 1rem; } -img { - // https://web.dev/optimize-cls/#modern-best-practice - aspect-ratio: attr(width) / attr(height); - margin-top: 1rem; +header, +footer { + align-items: center; + /* stylelint-disable plugin/no-unsupported-browser-features */ + column-gap: 2rem; + display: flex; + flex-wrap: wrap; + row-gap: 1rem; +} + +header { + border-bottom: 2px solid #d3d3d3; + padding-bottom: 1rem; + + h1 { + flex-grow: 1; + margin: 0; + } +} + +nav { + ul { + align-items: center; + display: flex; + gap: 2rem; + justify-content: flex-end; + } +} + +a, +button { + padding: 0.5rem; + + &:focus { + border: 2px solid #00f; + } +} + +main { + h2 { + font-size: larger; + font-weight: bold; + margin: 1rem 0; + } + + :last-child { + margin-bottom: 1rem; + } +} + +footer { + border-top: 2px solid #d3d3d3; + padding-top: 1rem; + + small { + flex-grow: 1; + } } diff --git a/src/scss/index.scss b/src/scss/index.scss index 8454688..c48b66f 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -1,7 +1,5 @@ @charset 'UTF-8'; -/* Vendors */ @import 'vendors/reset', 'vendors/sanitize'; -/* Base styles */ @import 'base/base', 'base/fonts'; diff --git a/src/ts/footer.ts b/src/ts/footer.ts new file mode 100644 index 0000000..db9b516 --- /dev/null +++ b/src/ts/footer.ts @@ -0,0 +1,5 @@ +document + ?.querySelector('#footer-copyright') + ?.append( + document.createTextNode(new Date().getFullYear() as unknown as string) + ); diff --git a/src/ts/header.ts b/src/ts/header.ts new file mode 100644 index 0000000..f3e3164 --- /dev/null +++ b/src/ts/header.ts @@ -0,0 +1,12 @@ +import '@/scss/index.scss'; +// @PERFORMANCE-COMMENT +// tells webpack to map generated webp to jpg +import webpackLogo from '@/images/icon-square-small.jpg?as=webp'; + +const logo = document.createElement('img'); +const header = document.querySelector('header'); +header?.prepend(logo); +logo.src = webpackLogo; +logo.alt = 'Webpack Logo'; +logo.height = 50; +logo.width = 50; diff --git a/src/ts/index.ts b/src/ts/index.ts index a0d407e..3ac3fe3 100644 --- a/src/ts/index.ts +++ b/src/ts/index.ts @@ -1,24 +1,6 @@ -/* global document */ -// eslint-disable-next-line import/no-unresolved -import '@/scss/index.scss'; - -// Test webp generation from jpg source image -import webpackLogo from '@/images/icon-square-small.jpg?as=webp'; - -document - .querySelector('#copyright') - ?.appendChild(document.createTextNode(new Date().getFullYear().toString())); - -const logo = document.createElement('img'); -logo.src = webpackLogo; -logo.alt = 'Webpack Logo'; -logo.height = 200; -logo.width = 200; - -const app = document.querySelector('#root'); -app?.append(logo); +import './header'; +import './footer'; // jest testing export const sum = (...a: number[]) => a.reduce((accumulator, value) => accumulator + value, 0); -console.log(sum(1, 2, 3));