diff --git a/docs/hello-world/about.html b/docs/hello-world/about.html deleted file mode 100644 index e74c4a5a..00000000 --- a/docs/hello-world/about.html +++ /dev/null @@ -1,3 +0,0 @@ -About
App demo
HomeContactAbout
Login

About

The pug-plugin makes using Pug very easy. Please see details on GitHub.
Copyleft 2022 @webdiscus. -Powered by Pug Plugin. -
\ No newline at end of file diff --git a/docs/hello-world/about/index.html b/docs/hello-world/about/index.html new file mode 100644 index 00000000..435e6070 --- /dev/null +++ b/docs/hello-world/about/index.html @@ -0,0 +1,5 @@ +About +
App demo
HomeContactAbout
Login

About

The pug-plugin makes using Pug very easy. Please see details on GitHub.
Copyleft 2024 @webdiscus. +Powered by Pug Plugin. +
\ No newline at end of file diff --git a/docs/hello-world/assets/css/main.d4a696c2.css.map b/docs/hello-world/assets/css/main.d4a696c2.css.map deleted file mode 100644 index 07959a39..00000000 --- a/docs/hello-world/assets/css/main.d4a696c2.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["webpack://./src/assets/styles/base/main.scss","webpack://./src/assets/styles/base/_typography.scss","webpack://./src/assets/styles/base/_icons.scss","webpack://./src/assets/styles/base/_layout.scss"],"names":[],"mappings":"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","sourcesContent":["@font-face{font-family:\"OpenSans\";src:url(\"~Fonts/OpenSans/open-sans-regular.svg\") format(\"svg\"),url(\"~Fonts/OpenSans/open-sans-regular.woff2\") format(\"woff2\");font-style:normal}body{font-family:OpenSans,sans-serif}a{color:#737373;text-decoration:none}a.link{color:#1993ff}a:hover{text-decoration:underline}h1{text-align:center}.teaser{color:#737373;text-align:center;font-size:18px}.copyleft{font-size:18px;display:inline-block;transform:scaleX(-1)}.copyleft:before{content:\"©\"}@font-face{font-family:\"GlyphIcons\";src:url(\"~Fonts/icons/GlyphIcons/glyphicons-halflings-regular.svg\") format(\"svg\"),url(\"~Fonts/icons/GlyphIcons/glyphicons-halflings-regular.woff2\") format(\"woff2\");font-style:normal}.glyphicon::before{font-family:\"Glyphicons\";font-style:normal;font-weight:400;font-size:24px;line-height:1;-moz-osx-font-smoothing:grayscale}.glyphicon-ok::before{content:\"\"}.glyphicon-picture::before{content:\"\"}.glyphicon-user::before{content:\"\"}.icon{max-width:32px;max-height:32px}.webicon{width:48px;height:48px;background-repeat:no-repeat;background-size:contain}.webicon-mac-svg{background-image:url(\"~Images/icons/webicons/webicon-mac.svg\")}.webicon-mac-png{background-image:url(\"~Images/icons/webicons/webicon-mac.png\")}.webicon-apple-svg{background-image:url(\"~Images/icons/webicons/webicon-apple.svg\")}.webicon-apple-png{background-image:url(\"~Images/icons/webicons/webicon-apple.png\")}.webicon-android{background-image:url(\"~Images/icons/webicons/webicon-android.svg\")}.webicon-windows{background-image:url(\"~Images/icons/webicons/webicon-windows.svg\")}.webicon-facebook{background-image:url(\"~Images/icons/webicons/webicon-facebook.svg\")}.webicon-twitter{background-image:url(\"~Images/icons/webicons/webicon-twitter.svg\")}.webicon-dropbox{background-image:url(\"~Images/icons/webicons/webicon-dropbox.svg\")}.webicon-github{background-image:url(\"~Images/icons/webicons/webicon-github.svg\")}.webicon-html5{background-image:url(\"~Images/icons/webicons/webicon-html5.svg\")}.webicon-skitch{background-image:url(\"~Images/icons/webicons/webicon-skitch.svg\")}.webicon-google{background-image:url(\"~Images/icons/webicons/webicon-google.svg\")}.webicon-evernote{background-image:url(\"~Images/icons/webicons/webicon-evernote.svg\")}.webicon-yahoo{background-image:url(\"~Images/icons/webicons/webicon-yahoo.svg\")}.webicon-picasa{background-image:url(\"~Images/icons/webicons/webicon-picasa.svg\")}.webicon-reddit{background-image:url(\"~Images/icons/webicons/webicon-reddit.svg\")}.webicon-f500px{background-image:url(\"~Images/icons/webicons/webicon-f500px.svg\")}html,body{margin:0;padding:0;min-height:100vh}body{display:flex;flex-direction:column;background-color:#f2f5f7}.header-container{display:flex;flex-direction:column;justify-content:center;align-items:center;position:sticky;top:-40px;min-height:100px;margin-bottom:20px;background-color:#fff;box-shadow:0 0 17px rgba(0,0,0,.3)}.header-container .header-content{position:sticky;display:flex;top:0;height:60px;width:100%;max-width:960px;margin-left:auto;margin-right:auto;padding-left:50px;padding-right:50px}.header-container .header-content>*{display:flex;flex-direction:row;justify-content:center;align-items:center}.header-container .header-content>:first-child,.header-container .header-content>:last-child{flex:0 0 18%;max-width:18%}.header-container .header-content>:first-child{justify-content:flex-start}.header-container .header-content>:last-child{justify-content:flex-end}.header-container .header-content>:not(:first-child):not(:last-child){flex-grow:1}.header-container .header-content>:not(:first-child):not(:last-child)>:not(:first-child){margin-left:20px}.main-container{display:flex;flex:1 0 auto}.main-content{display:flex;flex-direction:column;height:100%;width:100%;max-width:960px;margin-left:auto;margin-right:auto;padding-left:50px;padding-right:50px}.footer-container{margin-top:20px;padding:30px 50px;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-shrink:0;color:#b1c4d0;background-color:#15384f}.footer-container>:not(:first-child){margin-left:10px}.footer-container a{color:#b1c4d0}.app-logo{max-height:60px;min-height:40px;margin-right:20px}.teaser{margin-bottom:20px}section:not(:first-of-type){margin-top:20px}section .container{padding:20px 30px;background-color:#fff}.flex-column{display:flex;flex-direction:column;justify-content:flex-start;align-content:flex-start;align-items:stretch}.flex-column>:not(:first-child){margin-left:10px}.flex-column.center-x{align-items:center}.flex-column.center-y{justify-content:center}.flex-row{display:flex;flex-direction:row;justify-content:flex-start;align-content:flex-start;align-items:stretch}.flex-row>:not(:first-child){margin-left:10px}.flex-row.center-x{justify-content:center}.flex-row.center-y{align-items:center}.fit-max>:first-child{flex-basis:content}.fit-max>:not(:first-child){flex-grow:1}.mt-s{margin-top:5px}.mt-m{margin-top:10px}.mt-l{margin-top:20px}.mb-s{margin-bottom:5px}.mb-m{margin-bottom:10px}.mb-l{margin-bottom:20px}.ml-s{margin-left:5px}.ml-m{margin-left:10px}.ml-l{margin-left:20px}.mr-s{margin-right:5px}.mr-m{margin-right:10px}.mr-l{margin-right:20px}","@font-face {\n font-family: 'OpenSans';\n src:\n url('~Fonts/OpenSans/open-sans-regular.svg') format('svg'),\n url('~Fonts/OpenSans/open-sans-regular.woff2') format('woff2');\n font-style: normal;\n}\n\nbody {\n font-family: OpenSans, sans-serif;\n}\n\na {\n color: #737373;\n text-decoration: none;\n\n &.link {\n color: #1993ff;\n }\n\n &:hover {\n text-decoration: underline;\n }\n}\n\nh1 {\n text-align: center;\n}\n\n.teaser {\n color: #737373;\n text-align: center;\n font-size: 18px;\n}\n\n.copyleft {\n &:before {\n content: '\\00a9';\n }\n font-size: 18px;\n display: inline-block;\n transform: scaleX(-1);\n}\n","@font-face {\n font-family: 'GlyphIcons';\n src:\n url('~Fonts/icons/GlyphIcons/glyphicons-halflings-regular.svg') format('svg'),\n url('~Fonts/icons/GlyphIcons/glyphicons-halflings-regular.woff2') format('woff2');\n font-style: normal;\n}\n\n.glyphicon{\n &::before {\n font-family: 'Glyphicons';\n font-style: normal;\n font-weight: 400;\n font-size: 24px;\n line-height: 1;\n -moz-osx-font-smoothing: grayscale;\n }\n}\n\n.glyphicon-ok::before {\n content: \"\\e013\";\n}\n\n.glyphicon-picture::before {\n content: \"\\e060\";\n}\n\n.glyphicon-user::before {\n content: \"\\e008\";\n}\n\n.icon {\n max-width: 32px;\n max-height: 32px;\n}\n\n.webicon {\n width: 48px;\n height: 48px;\n background-repeat: no-repeat;\n background-size: contain;\n}\n\n// icons with size < 4 KB as data-URL\n\n.webicon-mac-svg {\n background-image: url('~Images/icons/webicons/webicon-mac.svg');\n}\n\n.webicon-mac-png {\n background-image: url('~Images/icons/webicons/webicon-mac.png');\n}\n\n.webicon-apple-svg {\n background-image: url('~Images/icons/webicons/webicon-apple.svg');\n}\n\n.webicon-apple-png {\n background-image: url('~Images/icons/webicons/webicon-apple.png');\n}\n\n.webicon-android {\n background-image: url('~Images/icons/webicons/webicon-android.svg');\n}\n\n.webicon-windows {\n background-image: url('~Images/icons/webicons/webicon-windows.svg');\n}\n\n.webicon-facebook {\n background-image: url('~Images/icons/webicons/webicon-facebook.svg');\n}\n\n.webicon-twitter {\n background-image: url('~Images/icons/webicons/webicon-twitter.svg');\n}\n\n.webicon-dropbox {\n background-image: url('~Images/icons/webicons/webicon-dropbox.svg');\n}\n\n.webicon-github {\n background-image: url('~Images/icons/webicons/webicon-github.svg');\n}\n\n.webicon-html5 {\n background-image: url('~Images/icons/webicons/webicon-html5.svg');\n}\n\n.webicon-skitch {\n background-image: url('~Images/icons/webicons/webicon-skitch.svg');\n}\n\n// icons with size > 4 KB as file\n\n.webicon-google {\n background-image: url('~Images/icons/webicons/webicon-google.svg');\n}\n\n.webicon-evernote {\n background-image: url('~Images/icons/webicons/webicon-evernote.svg');\n}\n\n.webicon-yahoo {\n background-image: url('~Images/icons/webicons/webicon-yahoo.svg');\n}\n\n.webicon-picasa {\n background-image: url('~Images/icons/webicons/webicon-picasa.svg');\n}\n\n.webicon-reddit {\n background-image: url('~Images/icons/webicons/webicon-reddit.svg');\n}\n\n.webicon-f500px {\n background-image: url('~Images/icons/webicons/webicon-f500px.svg');\n}\n","// spacers\n$gap-s: 5px;\n$gap-m: 10px;\n$gap-l: 20px;\n\n// sticky header height normal, no scrolling\n$header-max-height: 100px;\n// sticky header height by scrolling\n$header-min-height: 60px;\n\n// main content\n$content-max-width: 960px;\n$content-padding-x: 50px;\n\n// footer\n$footer-text-color: #b1c4d0;\n$footer-bg-color: #15384f;\n\nhtml,\nbody {\n margin: 0;\n padding: 0;\n min-height: 100vh;\n}\n\nbody {\n display: flex;\n flex-direction: column;\n background-color: #f2f5f7;\n}\n\n.header-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n position: sticky;\n top: $header-min-height - $header-max-height;\n min-height: $header-max-height;\n margin-bottom: $gap-l;\n background-color: #fff;\n box-shadow: 0 0 17px rgba(0,0,0,0.3);\n\n .header-content {\n position: sticky;\n display: flex;\n top: 0;\n height: $header-min-height;\n width: 100%;\n max-width: $content-max-width;\n margin-left: auto;\n margin-right: auto;\n padding-left: $content-padding-x;\n padding-right: $content-padding-x;\n\n > * {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n }\n\n > :first-child,\n > :last-child {\n flex: 0 0 18%;\n max-width: 18%;\n }\n\n > :first-child {\n justify-content: flex-start;\n }\n\n > :last-child {\n justify-content: flex-end;\n }\n\n > :not(:first-child):not(:last-child) {\n flex-grow: 1;\n > :not(:first-child) {\n margin-left: $gap-l;\n }\n }\n }\n}\n\n.main-container {\n display: flex;\n flex: 1 0 auto;\n}\n\n.main-content {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n max-width: $content-max-width;\n margin-left: auto;\n margin-right: auto;\n padding-left: $content-padding-x;\n padding-right: $content-padding-x;\n}\n\n.footer-container {\n margin-top: $gap-l;\n padding: 30px 50px;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n color: $footer-text-color;\n background-color: $footer-bg-color;\n\n > :not(:first-child) {\n margin-left: $gap-m;\n }\n\n a {\n color: $footer-text-color;\n }\n}\n\n.app-logo {\n max-height: 60px;\n min-height: 40px;\n margin-right: $gap-l;\n}\n\n.teaser {\n margin-bottom: $gap-l;\n}\n\nsection {\n &:not(:first-of-type) {\n margin-top: $gap-l;\n }\n .container {\n padding: $gap-l $gap-l * 1.5;\n background-color: #fff;\n }\n}\n\n.flex-column {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-content: flex-start;\n align-items: stretch;\n\n > :not(:first-child) {\n margin-left: $gap-m;\n }\n\n &.center-x {\n align-items: center;\n }\n\n &.center-y {\n justify-content: center;\n }\n}\n\n.flex-row {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-content: flex-start;\n align-items: stretch;\n\n > :not(:first-child) {\n margin-left: $gap-m;\n }\n\n &.center-x {\n justify-content: center;\n }\n\n &.center-y {\n align-items: center;\n }\n}\n\n.fit-max {\n > :first-child {\n flex-basis: content;\n }\n > :not(:first-child) {\n flex-grow: 1;\n }\n}\n\n.mt-s {\n margin-top: $gap-s;\n}\n.mt-m {\n margin-top: $gap-m;\n}\n.mt-l {\n margin-top: $gap-l;\n}\n\n.mb-s {\n margin-bottom: $gap-s;\n}\n.mb-m {\n margin-bottom: $gap-m;\n}\n.mb-l {\n margin-bottom: $gap-l;\n}\n\n.ml-s {\n margin-left: $gap-s;\n}\n.ml-m {\n margin-left: $gap-m;\n}\n.ml-l {\n margin-left: $gap-l;\n}\n\n.mr-s {\n margin-right: $gap-s;\n}\n.mr-m {\n margin-right: $gap-m;\n}\n.mr-l {\n margin-right: $gap-l;\n}\n"],"sourceRoot":""} \ No newline at end of file diff --git a/docs/hello-world/assets/css/main.d4a696c2.css b/docs/hello-world/assets/css/main.fa283440.css similarity index 99% rename from docs/hello-world/assets/css/main.d4a696c2.css rename to docs/hello-world/assets/css/main.fa283440.css index 3d7d6ce1..6081baf2 100644 --- a/docs/hello-world/assets/css/main.d4a696c2.css +++ b/docs/hello-world/assets/css/main.fa283440.css @@ -1,2 +1,2 @@ @font-face{font-family:"OpenSans";src:url(../fonts/open-sans-regular.svg) format("svg"),url(../fonts/open-sans-regular.woff2) format("woff2");font-style:normal}body{font-family:OpenSans,sans-serif}a{color:#737373;text-decoration:none}a.link{color:#1993ff}a:hover{text-decoration:underline}h1{text-align:center}.teaser{color:#737373;text-align:center;font-size:18px}.copyleft{font-size:18px;display:inline-block;transform:scaleX(-1)}.copyleft:before{content:"©"}@font-face{font-family:"GlyphIcons";src:url(../fonts/glyphicons-halflings-regular.svg) format("svg"),url(../fonts/glyphicons-halflings-regular.woff2) format("woff2");font-style:normal}.glyphicon::before{font-family:"Glyphicons";font-style:normal;font-weight:400;font-size:24px;line-height:1;-moz-osx-font-smoothing:grayscale}.glyphicon-ok::before{content:""}.glyphicon-picture::before{content:""}.glyphicon-user::before{content:""}.icon{max-width:32px;max-height:32px}.webicon{width:48px;height:48px;background-repeat:no-repeat;background-size:contain}.webicon-mac-svg{background-image:url("data:image/svg+xml, ")}.webicon-mac-png{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABZFJREFUeNrUWW1MU1cYfm9tcEBBDFBpAFPkYxaIFDoEkY+CAwFnImP6Z8vM4vZjyZItm4nux77+LMsyR7Isuk2N8/d+1CWYbWYqZY6CBVoctATGWlooH1I+Cy3Q9u7cA70tSqG05zb6Jm/uc8v5eJ/3fc97zrlQ8IT0j66cQg8pEJShgT64cukTjBOFQrh85Voow2kjd/NueV74HqAzL0uBAgVN02IgLOq2eyyWy48BHeJ4S8tuI01DQ/QLPC0m0GtySJHh94Gm4mjCxtvti9Cpus++1504Ce7QJxEDstdmd1ViAm43raAoiAMgbT7AX3ebWVwhr4KoqGg0DZF5kLNpBb/HYD+FxhPT5G3H0t3u9X55RRXyPtGJxHzkfSlwJPp/1DAz/Xht8SYKQZKdQ8r7rPBdtJsr+6G7o4XFx+teIZH7TxPgyn6HfQn6UQQ8UlZeSdz7mIDbzU3yax62bDA+MiqKdP6vE+Bo9faolSwukB0GrooEJwQmLMNYGWHKZr6sEBGgOSLgIj/wI3Uri0vL5Jx5fz0C5Acd1HWxuKRUzpn31wkEVoba7ipAdU+BcWqaBM68/fGm7SbHTDA3s1b7ExISIXW/OKAInDt7msXXb/5Cvgr5GoG2cPDXr7fLmz7SguByfyd9EIEgBqWZ89Pm7UYM/SwuOlIOTtfmDSl0+OJRJAigxk7XmnpkedU7KePpFScN/YNGUKlU+LeMOSfIJuxPDWadMMONa5cxjo3dA03CFLA7nAEZ0tzsPfTZllaBh9hRPgR5zAvlxfgVKd8wthTQBHMLi2C1WjGOn50D1yae1fe0sfjlmhNBL16mnyvA6sh3BbgG9iYmQ2ZuMcbJYgls1k+r+oPFVdX1Ozr7HC4u9UZ9B/2o7xTGz9HzMxIl7cIbh8C+OI9xh8YAMSiNuBa+y0XmNDf9eJQ1/qAkFwQxsZzW/x2n0LabV6+KxYVFR8NiPNHT6IhBx2JZ4VHg6pTLWQQsBj2Lsw7mgDtcESC1BizDXgIiUQrQz1sEHEvz6+lTEjbvEyMwOzUa9FHgmUih6ckRFnep2+ClXNG2fd559yOk55+NKhRMyiQx64RApIikUMRuAaRmFW7bzjzg/UqRLztCpNQSIRCf/CKc+eD6lm2W0SL//vzaeYfZpclFwOUOy2IbN3nvCZlZ5PYJYmV020pl9VaqjKxsYvsEjyHgT5mcbf/tB1wmt2oXiM5NWdhJowWxOALbaXenCt56vRYsFrPfNlum0APFNzBlGQD17z9CWq4csgpPgjinIuhLChuBTInfi75tYR4etN6Bn682wfjYWnm+8VMTXPz00s7KqBUZzhjvEUNvC9aIyBhMQpQuA3G2HL0LAiIwP+0TgejYDRXIZpuHnu52+BsZzhjPkNhwUUJ/82cn3+nnD3uSMuH0hV9B8+dVMPUpYcWxgH9fsS/AQGczViV8AYK9IhAdkOFnEnriGn+gYEsCgwN9MDZmhqFBPTZuaFDnd69489z7cLz+Nb8Vizr7Zce2NzLGaJNOCSZ9K5h1Ss4XfE19I9TUNUJeQTGZMrorIhrSpPVYVxw2MOuVMGHQIO2GxdmxkA3el5QCh/KLIA9pSVk1XuSeLyLEyyhDRpxXjxVHB6XW7PggJrSK8AzCjKwioh78pFTXNsI+UTIcyJBAekY2xkF/Fwp1H9gVIYD4/flYt5KWm+/BpFGD8YcXv9pocAg2IALh2Yl9nUryvsDJ5/VNCfgeK1B9FyYlP19HifjUPJga1rAEEoXkCGjDQcDXT0wGkbq18W5/Lb+FSqmRKadcKlO9PPLfv3pcIgmokb++qBqQQ5h/qcdxFQFBQjqLF9HRgcBCnqUAGngMuvPtMS1iU4nSyRjqqdOfRgiE7My9jx7iFApBjUgrX63N1v4vwACuqiXzVCOtMgAAAABJRU5ErkJggg==)}.webicon-apple-svg{background-image:url("data:image/svg+xml, ")}.webicon-apple-png{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA29JREFUeNrsWklII0EUfd0GETQxeBEVNCqigmDE9abjVcHkLogXT4Kg4HUG8ew1oKLibQyaAT24oJmQeDXx6Mq4gYqGuIF7pn9pBjN6SXVNaw0+KLq7ulP9XtWv/+tXR8FfsNvtDjrg4yKk4UfsQnlBnEiPfnDyMfzSipOUMAHl5eVE2qsVK+RBRCtf1OeLUcnI45mvR33ufTvkhM30+PjogMRQITmkF2CKRqOGvezq6gonJye4vLyEzWZDamqqfgFGkd/f30ckEmHnTqcTx8fHODs7k8OEjo6OYDKZMDY2hvPzc0xNTaGgoEAOE3p4eICqqvD5fCguLv5Tv7KyIsckph6fmZmJI7+9vS2PF6qsrERVVVVc3cTEhDgvpAWyfyqgubk57np+fh7j4+PiBOhtgDrg9PSUeZj7+3tWl5ycjPT0dFbKyspY3cXFBZvE3d3dr57LyMhg84QHSmlp6Tft+JXnx9fX19jZ2WEEWlpaaFXL6r1eLzweDzvv6elhNu/3+5GZmYm6urpXzxH5vLw8pKSkJC6gpKSES0CMfF9fH7q6umA2m+PuU48vLi5ib28PFouFEX85kV8+RyNDbeTn57NRMUTA5uYm3G43HA4xa8Hp6Wn09vYa44XI3oeHh4WRJ9TW1qKwsNCYQFZRUYG2tjZh5GmOtLa2IhwOGzMCHR0dQl1tZ2cnF3luATU1NcLIz83N6YrMXIEsOztbmIC1tTXoCabvntCEQiG5M7KsrCx9AsgLJVpEorq6mmVqPDyocI0AZVOiQLGElhiUNxhmQhSFRWJwcBC7u7u4ublJXAB5gETL0tKSUAGUL9Ay+/b2NmEuXCMQCASET+bGxkZsbW0ZY0IbGxtYXl4WLoKnY1Te2S8yq4qBdisM8UKEhYUFrK6uCiNPI0ptGhrIaP1OPlzEjh0lRoYFslhZX1/HwMCAbgHUBrXFwyHJarU2aG008L48GAyytLC+vv7N++RZ7u7ukJaW9ub92dlZ9Pf3v9+uBGFkZITlvpTk0Ke2w8NDtvM2NDTEPBahqKgITU1NbJuFMi8S5nK5MDk5qevdSm5uLveuxEfA5weO94ahHzg+R+B/FKDk5OTQN+KgtCNwcHBAWfVPSfmHYibUjqf/HsgE4tueRGfaUiBisVi+ax6JzMkmQ88riuIk6/ktwAAvipX5wFvqfAAAAABJRU5ErkJggg==)}.webicon-android{background-image:url("data:image/svg+xml, ")}.webicon-windows{background-image:url("data:image/svg+xml, ")}.webicon-facebook{background-image:url("data:image/svg+xml, ")}.webicon-twitter{background-image:url("data:image/svg+xml, ")}.webicon-dropbox{background-image:url("data:image/svg+xml, ")}.webicon-github{background-image:url("data:image/svg+xml, ")}.webicon-html5{background-image:url("data:image/svg+xml, ")}.webicon-skitch{background-image:url("data:image/svg+xml, ")}.webicon-google{background-image:url(../img/webicon-google.8a0d5887.svg)}.webicon-evernote{background-image:url(../img/webicon-evernote.c3004761.svg)}.webicon-yahoo{background-image:url(../img/webicon-yahoo.a88e3621.svg)}.webicon-picasa{background-image:url(../img/webicon-picasa.f396c5e6.svg)}.webicon-reddit{background-image:url(../img/webicon-reddit.03025488.svg)}.webicon-f500px{background-image:url(../img/webicon-f500px.8f5d4310.svg)}html,body{margin:0;padding:0;min-height:100vh}body{display:flex;flex-direction:column;background-color:#f2f5f7}.header-container{display:flex;flex-direction:column;justify-content:center;align-items:center;position:sticky;top:-40px;min-height:100px;margin-bottom:20px;background-color:#fff;box-shadow:0 0 17px rgba(0,0,0,.3)}.header-container .header-content{position:sticky;display:flex;top:0;height:60px;width:100%;max-width:960px;margin-left:auto;margin-right:auto;padding-left:50px;padding-right:50px}.header-container .header-content>*{display:flex;flex-direction:row;justify-content:center;align-items:center}.header-container .header-content>:first-child,.header-container .header-content>:last-child{flex:0 0 18%;max-width:18%}.header-container .header-content>:first-child{justify-content:flex-start}.header-container .header-content>:last-child{justify-content:flex-end}.header-container .header-content>:not(:first-child):not(:last-child){flex-grow:1}.header-container .header-content>:not(:first-child):not(:last-child)>:not(:first-child){margin-left:20px}.main-container{display:flex;flex:1 0 auto}.main-content{display:flex;flex-direction:column;height:100%;width:100%;max-width:960px;margin-left:auto;margin-right:auto;padding-left:50px;padding-right:50px}.footer-container{margin-top:20px;padding:30px 50px;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-shrink:0;color:#b1c4d0;background-color:#15384f}.footer-container>:not(:first-child){margin-left:10px}.footer-container a{color:#b1c4d0}.app-logo{max-height:60px;min-height:40px;margin-right:20px}.teaser{margin-bottom:20px}section:not(:first-of-type){margin-top:20px}section .container{padding:20px 30px;background-color:#fff}.flex-column{display:flex;flex-direction:column;justify-content:flex-start;align-content:flex-start;align-items:stretch}.flex-column>:not(:first-child){margin-left:10px}.flex-column.center-x{align-items:center}.flex-column.center-y{justify-content:center}.flex-row{display:flex;flex-direction:row;justify-content:flex-start;align-content:flex-start;align-items:stretch}.flex-row>:not(:first-child){margin-left:10px}.flex-row.center-x{justify-content:center}.flex-row.center-y{align-items:center}.fit-max>:first-child{flex-basis:content}.fit-max>:not(:first-child){flex-grow:1}.mt-s{margin-top:5px}.mt-m{margin-top:10px}.mt-l{margin-top:20px}.mb-s{margin-bottom:5px}.mb-m{margin-bottom:10px}.mb-l{margin-bottom:20px}.ml-s{margin-left:5px}.ml-m{margin-left:10px}.ml-l{margin-left:20px}.mr-s{margin-right:5px}.mr-m{margin-right:10px}.mr-l{margin-right:20px} -/*# sourceMappingURL=main.d4a696c2.css.map */ \ No newline at end of file +/*# sourceMappingURL=main.fa283440.css.map*/ \ No newline at end of file diff --git a/docs/hello-world/assets/css/main.fa283440.css.map b/docs/hello-world/assets/css/main.fa283440.css.map new file mode 100644 index 00000000..bb06e13e --- /dev/null +++ b/docs/hello-world/assets/css/main.fa283440.css.map @@ -0,0 +1 @@ +{"version":3,"file":"assets/css/main.fa283440.css","mappings":"AAAA,WCAA,sBACE,kHAEE,kBAEF,MAGF,+BACE,GAGF,aACE,qBACA,QAEA,aACE,SAGF,yBACE,IAIJ,iBACE,SAGF,aACE,kBACA,eACA,WAGF,cAIE,qBACA,qBACA,kBALA,WACE,YCrCJ,wBACE,kHAEE,kBAEF,oBAIA,wBACE,kBACA,gBACA,eACA,cACA,kCACA,uBAIJ,WACE,4BAGF,WACE,yBAGF,WACE,OAGF,cACE,gBACA,UAGF,UACE,YACA,4BACA,wBACA,kBAKF,wDACE,kBAGF,wDACE,oBAGF,wDACE,oBAGF,wDACE,kBAGF,wDACE,kBAGF,wDACE,mBAGF,yDACE,kBAGF,yDACE,kBAGF,yDACE,iBAGF,yDACE,gBAGF,yDACE,iBAGF,yDACE,iBAKF,yDACE,mBAGF,yDACE,gBAGF,yDACE,iBAGF,yDACE,iBAGF,yDACE,iBAGF,yDACE,WClGF,QAEE,UACA,iBACA,MAGF,YACE,sBACA,yBACA,mBAGF,YACE,sBACA,uBACA,mBACA,gBACA,UACA,iBA/BkB,mBAHZ,sBAqCN,mCACA,mCAEA,eACE,aACA,MACA,YAtCgB,WAwChB,gBArCgB,iBAuChB,kBACA,kBAvCgB,wDA2ChB,YACE,mBACA,uBACA,mBACA,8FAGF,YAEE,cACA,gDAGF,0BACE,+CAGF,wBACE,uEAGF,WACE,0FACA,gBA3EE,iBAkFR,YACE,cACA,eAGF,YACE,sBACA,YACA,WACA,gBAnFkB,iBAqFlB,kBACA,kBArFkB,sCA0FpB,eAnGQ,kBAqGN,aACA,mBACA,uBACA,mBACA,cACA,cA9FkB,yBACF,sCAiGhB,gBA/GM,qBAmHN,aAtGkB,WA2GpB,eACE,gBACA,kBAzHM,SA6HR,kBA7HQ,6BAkIN,eAlIM,oBAqIN,iBACE,sBACA,cAIJ,YACE,sBACA,2BACA,yBACA,oBACA,iCAEA,gBAnJM,uBAuJN,kBACE,uBAGF,sBACE,WAIJ,YACE,mBACA,2BACA,yBACA,oBACA,8BAEA,gBAvKM,oBA2KN,sBACE,oBAGF,kBACE,uBAKF,kBACE,6BAEF,WACE,OAIJ,cA9LQ,OAiMR,eAhMQ,OAmMR,eAlMQ,OAsMR,iBAxMQ,OA2MR,kBA1MQ,OA6MR,kBA5MQ,OAgNR,eAlNQ,OAqNR,gBApNQ,OAuNR,gBAtNQ,OA0NR,gBA5NQ,OA+NR,iBA9NQ,OAiOR,iBAhOQ","sources":["webpack://hello-world/./src/assets/styles/base/main.scss","webpack://hello-world/./src/assets/styles/base/_typography.scss","webpack://hello-world/./src/assets/styles/base/_icons.scss","webpack://hello-world/./src/assets/styles/base/_layout.scss"],"sourcesContent":["@font-face{font-family:\"OpenSans\";src:url(\"@fonts/OpenSans/open-sans-regular.svg\") format(\"svg\"),url(\"@fonts/OpenSans/open-sans-regular.woff2\") format(\"woff2\");font-style:normal}body{font-family:OpenSans,sans-serif}a{color:#737373;text-decoration:none}a.link{color:#1993ff}a:hover{text-decoration:underline}h1{text-align:center}.teaser{color:#737373;text-align:center;font-size:18px}.copyleft{font-size:18px;display:inline-block;transform:scaleX(-1)}.copyleft:before{content:\"©\"}@font-face{font-family:\"GlyphIcons\";src:url(\"@fonts/icons/GlyphIcons/glyphicons-halflings-regular.svg\") format(\"svg\"),url(\"@fonts/icons/GlyphIcons/glyphicons-halflings-regular.woff2\") format(\"woff2\");font-style:normal}.glyphicon::before{font-family:\"Glyphicons\";font-style:normal;font-weight:400;font-size:24px;line-height:1;-moz-osx-font-smoothing:grayscale}.glyphicon-ok::before{content:\"\"}.glyphicon-picture::before{content:\"\"}.glyphicon-user::before{content:\"\"}.icon{max-width:32px;max-height:32px}.webicon{width:48px;height:48px;background-repeat:no-repeat;background-size:contain}.webicon-mac-svg{background-image:url(\"@images/icons/webicons/webicon-mac.svg\")}.webicon-mac-png{background-image:url(\"@images/icons/webicons/webicon-mac.png\")}.webicon-apple-svg{background-image:url(\"@images/icons/webicons/webicon-apple.svg\")}.webicon-apple-png{background-image:url(\"@images/icons/webicons/webicon-apple.png\")}.webicon-android{background-image:url(\"@images/icons/webicons/webicon-android.svg\")}.webicon-windows{background-image:url(\"@images/icons/webicons/webicon-windows.svg\")}.webicon-facebook{background-image:url(\"@images/icons/webicons/webicon-facebook.svg\")}.webicon-twitter{background-image:url(\"@images/icons/webicons/webicon-twitter.svg\")}.webicon-dropbox{background-image:url(\"@images/icons/webicons/webicon-dropbox.svg\")}.webicon-github{background-image:url(\"@images/icons/webicons/webicon-github.svg\")}.webicon-html5{background-image:url(\"@images/icons/webicons/webicon-html5.svg\")}.webicon-skitch{background-image:url(\"@images/icons/webicons/webicon-skitch.svg\")}.webicon-google{background-image:url(\"@images/icons/webicons/webicon-google.svg\")}.webicon-evernote{background-image:url(\"@images/icons/webicons/webicon-evernote.svg\")}.webicon-yahoo{background-image:url(\"@images/icons/webicons/webicon-yahoo.svg\")}.webicon-picasa{background-image:url(\"@images/icons/webicons/webicon-picasa.svg\")}.webicon-reddit{background-image:url(\"@images/icons/webicons/webicon-reddit.svg\")}.webicon-f500px{background-image:url(\"@images/icons/webicons/webicon-f500px.svg\")}html,body{margin:0;padding:0;min-height:100vh}body{display:flex;flex-direction:column;background-color:#f2f5f7}.header-container{display:flex;flex-direction:column;justify-content:center;align-items:center;position:sticky;top:-40px;min-height:100px;margin-bottom:20px;background-color:#fff;box-shadow:0 0 17px rgba(0,0,0,.3)}.header-container .header-content{position:sticky;display:flex;top:0;height:60px;width:100%;max-width:960px;margin-left:auto;margin-right:auto;padding-left:50px;padding-right:50px}.header-container .header-content>*{display:flex;flex-direction:row;justify-content:center;align-items:center}.header-container .header-content>:first-child,.header-container .header-content>:last-child{flex:0 0 18%;max-width:18%}.header-container .header-content>:first-child{justify-content:flex-start}.header-container .header-content>:last-child{justify-content:flex-end}.header-container .header-content>:not(:first-child):not(:last-child){flex-grow:1}.header-container .header-content>:not(:first-child):not(:last-child)>:not(:first-child){margin-left:20px}.main-container{display:flex;flex:1 0 auto}.main-content{display:flex;flex-direction:column;height:100%;width:100%;max-width:960px;margin-left:auto;margin-right:auto;padding-left:50px;padding-right:50px}.footer-container{margin-top:20px;padding:30px 50px;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-shrink:0;color:#b1c4d0;background-color:#15384f}.footer-container>:not(:first-child){margin-left:10px}.footer-container a{color:#b1c4d0}.app-logo{max-height:60px;min-height:40px;margin-right:20px}.teaser{margin-bottom:20px}section:not(:first-of-type){margin-top:20px}section .container{padding:20px 30px;background-color:#fff}.flex-column{display:flex;flex-direction:column;justify-content:flex-start;align-content:flex-start;align-items:stretch}.flex-column>:not(:first-child){margin-left:10px}.flex-column.center-x{align-items:center}.flex-column.center-y{justify-content:center}.flex-row{display:flex;flex-direction:row;justify-content:flex-start;align-content:flex-start;align-items:stretch}.flex-row>:not(:first-child){margin-left:10px}.flex-row.center-x{justify-content:center}.flex-row.center-y{align-items:center}.fit-max>:first-child{flex-basis:content}.fit-max>:not(:first-child){flex-grow:1}.mt-s{margin-top:5px}.mt-m{margin-top:10px}.mt-l{margin-top:20px}.mb-s{margin-bottom:5px}.mb-m{margin-bottom:10px}.mb-l{margin-bottom:20px}.ml-s{margin-left:5px}.ml-m{margin-left:10px}.ml-l{margin-left:20px}.mr-s{margin-right:5px}.mr-m{margin-right:10px}.mr-l{margin-right:20px}","@font-face {\n font-family: 'OpenSans';\n src:\n url('@fonts/OpenSans/open-sans-regular.svg') format('svg'),\n url('@fonts/OpenSans/open-sans-regular.woff2') format('woff2');\n font-style: normal;\n}\n\nbody {\n font-family: OpenSans, sans-serif;\n}\n\na {\n color: #737373;\n text-decoration: none;\n\n &.link {\n color: #1993ff;\n }\n\n &:hover {\n text-decoration: underline;\n }\n}\n\nh1 {\n text-align: center;\n}\n\n.teaser {\n color: #737373;\n text-align: center;\n font-size: 18px;\n}\n\n.copyleft {\n &:before {\n content: '\\00a9';\n }\n font-size: 18px;\n display: inline-block;\n transform: scaleX(-1);\n}\n","@font-face {\n font-family: 'GlyphIcons';\n src:\n url('@fonts/icons/GlyphIcons/glyphicons-halflings-regular.svg') format('svg'),\n url('@fonts/icons/GlyphIcons/glyphicons-halflings-regular.woff2') format('woff2');\n font-style: normal;\n}\n\n.glyphicon{\n &::before {\n font-family: 'Glyphicons';\n font-style: normal;\n font-weight: 400;\n font-size: 24px;\n line-height: 1;\n -moz-osx-font-smoothing: grayscale;\n }\n}\n\n.glyphicon-ok::before {\n content: \"\\e013\";\n}\n\n.glyphicon-picture::before {\n content: \"\\e060\";\n}\n\n.glyphicon-user::before {\n content: \"\\e008\";\n}\n\n.icon {\n max-width: 32px;\n max-height: 32px;\n}\n\n.webicon {\n width: 48px;\n height: 48px;\n background-repeat: no-repeat;\n background-size: contain;\n}\n\n// icons with size < 4 KB as data-URL\n\n.webicon-mac-svg {\n background-image: url('@images/icons/webicons/webicon-mac.svg');\n}\n\n.webicon-mac-png {\n background-image: url('@images/icons/webicons/webicon-mac.png');\n}\n\n.webicon-apple-svg {\n background-image: url('@images/icons/webicons/webicon-apple.svg');\n}\n\n.webicon-apple-png {\n background-image: url('@images/icons/webicons/webicon-apple.png');\n}\n\n.webicon-android {\n background-image: url('@images/icons/webicons/webicon-android.svg');\n}\n\n.webicon-windows {\n background-image: url('@images/icons/webicons/webicon-windows.svg');\n}\n\n.webicon-facebook {\n background-image: url('@images/icons/webicons/webicon-facebook.svg');\n}\n\n.webicon-twitter {\n background-image: url('@images/icons/webicons/webicon-twitter.svg');\n}\n\n.webicon-dropbox {\n background-image: url('@images/icons/webicons/webicon-dropbox.svg');\n}\n\n.webicon-github {\n background-image: url('@images/icons/webicons/webicon-github.svg');\n}\n\n.webicon-html5 {\n background-image: url('@images/icons/webicons/webicon-html5.svg');\n}\n\n.webicon-skitch {\n background-image: url('@images/icons/webicons/webicon-skitch.svg');\n}\n\n// icons with size > 4 KB as file\n\n.webicon-google {\n background-image: url('@images/icons/webicons/webicon-google.svg');\n}\n\n.webicon-evernote {\n background-image: url('@images/icons/webicons/webicon-evernote.svg');\n}\n\n.webicon-yahoo {\n background-image: url('@images/icons/webicons/webicon-yahoo.svg');\n}\n\n.webicon-picasa {\n background-image: url('@images/icons/webicons/webicon-picasa.svg');\n}\n\n.webicon-reddit {\n background-image: url('@images/icons/webicons/webicon-reddit.svg');\n}\n\n.webicon-f500px {\n background-image: url('@images/icons/webicons/webicon-f500px.svg');\n}\n","// spacers\n$gap-s: 5px;\n$gap-m: 10px;\n$gap-l: 20px;\n\n// sticky header height normal, no scrolling\n$header-max-height: 100px;\n// sticky header height by scrolling\n$header-min-height: 60px;\n\n// main content\n$content-max-width: 960px;\n$content-padding-x: 50px;\n\n// footer\n$footer-text-color: #b1c4d0;\n$footer-bg-color: #15384f;\n\nhtml,\nbody {\n margin: 0;\n padding: 0;\n min-height: 100vh;\n}\n\nbody {\n display: flex;\n flex-direction: column;\n background-color: #f2f5f7;\n}\n\n.header-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n position: sticky;\n top: $header-min-height - $header-max-height;\n min-height: $header-max-height;\n margin-bottom: $gap-l;\n background-color: #fff;\n box-shadow: 0 0 17px rgba(0,0,0,0.3);\n\n .header-content {\n position: sticky;\n display: flex;\n top: 0;\n height: $header-min-height;\n width: 100%;\n max-width: $content-max-width;\n margin-left: auto;\n margin-right: auto;\n padding-left: $content-padding-x;\n padding-right: $content-padding-x;\n\n > * {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n }\n\n > :first-child,\n > :last-child {\n flex: 0 0 18%;\n max-width: 18%;\n }\n\n > :first-child {\n justify-content: flex-start;\n }\n\n > :last-child {\n justify-content: flex-end;\n }\n\n > :not(:first-child):not(:last-child) {\n flex-grow: 1;\n > :not(:first-child) {\n margin-left: $gap-l;\n }\n }\n }\n}\n\n.main-container {\n display: flex;\n flex: 1 0 auto;\n}\n\n.main-content {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n max-width: $content-max-width;\n margin-left: auto;\n margin-right: auto;\n padding-left: $content-padding-x;\n padding-right: $content-padding-x;\n}\n\n.footer-container {\n margin-top: $gap-l;\n padding: 30px 50px;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n color: $footer-text-color;\n background-color: $footer-bg-color;\n\n > :not(:first-child) {\n margin-left: $gap-m;\n }\n\n a {\n color: $footer-text-color;\n }\n}\n\n.app-logo {\n max-height: 60px;\n min-height: 40px;\n margin-right: $gap-l;\n}\n\n.teaser {\n margin-bottom: $gap-l;\n}\n\nsection {\n &:not(:first-of-type) {\n margin-top: $gap-l;\n }\n .container {\n padding: $gap-l $gap-l * 1.5;\n background-color: #fff;\n }\n}\n\n.flex-column {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-content: flex-start;\n align-items: stretch;\n\n > :not(:first-child) {\n margin-left: $gap-m;\n }\n\n &.center-x {\n align-items: center;\n }\n\n &.center-y {\n justify-content: center;\n }\n}\n\n.flex-row {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-content: flex-start;\n align-items: stretch;\n\n > :not(:first-child) {\n margin-left: $gap-m;\n }\n\n &.center-x {\n justify-content: center;\n }\n\n &.center-y {\n align-items: center;\n }\n}\n\n.fit-max {\n > :first-child {\n flex-basis: content;\n }\n > :not(:first-child) {\n flex-grow: 1;\n }\n}\n\n.mt-s {\n margin-top: $gap-s;\n}\n.mt-m {\n margin-top: $gap-m;\n}\n.mt-l {\n margin-top: $gap-l;\n}\n\n.mb-s {\n margin-bottom: $gap-s;\n}\n.mb-m {\n margin-bottom: $gap-m;\n}\n.mb-l {\n margin-bottom: $gap-l;\n}\n\n.ml-s {\n margin-left: $gap-s;\n}\n.ml-m {\n margin-left: $gap-m;\n}\n.ml-l {\n margin-left: $gap-l;\n}\n\n.mr-s {\n margin-right: $gap-s;\n}\n.mr-m {\n margin-right: $gap-m;\n}\n.mr-l {\n margin-right: $gap-l;\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/hello-world/assets/css/style.2c4f572d.css b/docs/hello-world/assets/css/style.2c4f572d.css new file mode 100644 index 00000000..8e081137 --- /dev/null +++ b/docs/hello-world/assets/css/style.2c4f572d.css @@ -0,0 +1,2 @@ +h1{color:#3cb371}.about-logo{height:125px} +/*# sourceMappingURL=style.2c4f572d.css.map*/ \ No newline at end of file diff --git a/docs/hello-world/assets/css/style.2c4f572d.css.map b/docs/hello-world/assets/css/style.2c4f572d.css.map new file mode 100644 index 00000000..a05d4b14 --- /dev/null +++ b/docs/hello-world/assets/css/style.2c4f572d.css.map @@ -0,0 +1 @@ +{"version":3,"file":"assets/css/style.2c4f572d.css","mappings":"AAAA,GACE,cAGF,YACE","sources":["webpack://hello-world/./src/views/pages/about/style.scss"],"sourcesContent":["h1 {\n color: mediumseagreen;\n}\n\n.about-logo {\n height: 125px;\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/hello-world/assets/css/style.510da095.css b/docs/hello-world/assets/css/style.510da095.css new file mode 100644 index 00000000..5a6c56bd --- /dev/null +++ b/docs/hello-world/assets/css/style.510da095.css @@ -0,0 +1,2 @@ +h1{color:#1993ff}.contact-logo{height:125px} +/*# sourceMappingURL=style.510da095.css.map*/ \ No newline at end of file diff --git a/docs/hello-world/assets/css/style.510da095.css.map b/docs/hello-world/assets/css/style.510da095.css.map new file mode 100644 index 00000000..cf557f5c --- /dev/null +++ b/docs/hello-world/assets/css/style.510da095.css.map @@ -0,0 +1 @@ +{"version":3,"file":"assets/css/style.510da095.css","mappings":"AAAA,GACE,cAGF,cACE","sources":["webpack://hello-world/./src/views/pages/contact/style.scss"],"sourcesContent":["h1 {\n color: #1993ff;\n}\n\n.contact-logo {\n height: 125px;\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/hello-world/assets/css/styles.2c099df0.css b/docs/hello-world/assets/css/style.ef8df873.css similarity index 97% rename from docs/hello-world/assets/css/styles.2c099df0.css rename to docs/hello-world/assets/css/style.ef8df873.css index 52ed2969..764f575c 100644 --- a/docs/hello-world/assets/css/styles.2c099df0.css +++ b/docs/hello-world/assets/css/style.ef8df873.css @@ -1,2 +1,2 @@ code[class*=language-],pre[class*=language-]{color:#ccc;background:0 0;font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}pre[class*=language-]{padding:5px 10px}pre[class*=language-],code[class*=language-]{font-size:13px;line-height:inherit}h1{color:coral}.pug-logo{width:200px}.image-size{width:100px;min-width:100px;max-width:100px;height:100%}.iconfont-image-size::before{font-size:100px}.icon-bar{min-height:64px}.icon-bar>*{transition:all .3s;transform-origin:center bottom}.icon-bar>*:hover{transform:scale(1.5);margin:0 10px}.icon-bar>*:hover+.icon{margin:0} -/*# sourceMappingURL=styles.2c099df0.css.map */ \ No newline at end of file +/*# sourceMappingURL=style.ef8df873.css.map*/ \ No newline at end of file diff --git a/docs/hello-world/assets/css/style.ef8df873.css.map b/docs/hello-world/assets/css/style.ef8df873.css.map new file mode 100644 index 00000000..bd324f25 --- /dev/null +++ b/docs/hello-world/assets/css/style.ef8df873.css.map @@ -0,0 +1 @@ +{"version":3,"file":"assets/css/style.ef8df873.css","mappings":"AAAA,iyCCKA,sBACE,iBAEF,6CAEE,eACA,oBCRF,GACE,YAGF,UACE,YAGF,YACE,YACA,gBACA,gBACA,YAIA,6BACE,gBAIJ,UACE,gBACA,YAUE,mBACA,+BAVA,kBACE,qBACA,cAEA,wBACE","sources":["webpack://hello-world/./node_modules/prismjs/themes/prism-tomorrow.min.css","webpack://hello-world/./src/assets/styles/modules/highlight.scss","webpack://hello-world/./src/views/pages/home/style.scss"],"sourcesContent":["code[class*=language-],pre[class*=language-]{color:#ccc;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}","// import default prismjs styles from installed npm package\n// important: omit the file extension, e.g. .scss, .css\n@use 'prismjs/themes/prism-tomorrow.min';\n\n// override default styles of prismjs\npre[class*=\"language-\"] {\n padding: 5px 10px;\n}\npre[class*=\"language-\"],\ncode[class*=\"language-\"] {\n font-size: 13px;\n line-height: inherit;\n}\n","@use '@styles/modules/highlight';\n\n// page styles\nh1 {\n color: coral;\n}\n\n.pug-logo {\n width: 200px;\n}\n\n.image-size {\n width: 100px;\n min-width: 100px;\n max-width: 100px;\n height: 100%;\n}\n\n.iconfont-image-size {\n &::before {\n font-size: 100px;\n }\n}\n\n.icon-bar {\n min-height: 64px;\n > * {\n &:hover {\n transform: scale(1.5);\n margin: 0 10px;\n\n & + .icon {\n margin: 0;\n }\n }\n\n transition: all 0.3s;\n transform-origin: center bottom;\n }\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/hello-world/assets/css/styles.2c099df0.css.map b/docs/hello-world/assets/css/styles.2c099df0.css.map deleted file mode 100644 index d98c6f9e..00000000 --- a/docs/hello-world/assets/css/styles.2c099df0.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["webpack://./node_modules/prismjs/themes/prism-tomorrow.min.css","webpack://./src/assets/styles/modules/highlight.scss","webpack://./src/views/pages/home/styles.scss"],"names":[],"mappings":"AAAA,6CAAA,UAAA,CAAA,cAAA,CAAA,iEAAA,CAAA,aAAA,CAAA,eAAA,CAAA,eAAA,CAAA,mBAAA,CAAA,iBAAA,CAAA,gBAAA,CAAA,eAAA,CAAA,eAAA,CAAA,aAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,iBAAA,CAAA,gBAAA,CAAA,YAAA,CAAA,sBAAA,WAAA,CAAA,aAAA,CAAA,aAAA,CAAA,uDAAA,kBAAA,CAAA,iCAAA,YAAA,CAAA,kBAAA,CAAA,kBAAA,CAAA,8EAAA,UAAA,CAAA,mBAAA,UAAA,CAAA,4DAAA,aAAA,CAAA,qBAAA,aAAA,CAAA,6CAAA,aAAA,CAAA,gEAAA,aAAA,CAAA,6EAAA,aAAA,CAAA,yEAAA,aAAA,CAAA,yCAAA,aAAA,CAAA,6BAAA,eAAA,CAAA,cAAA,iBAAA,CAAA,cAAA,WAAA,CAAA,gBAAA,WAAA,CCKA,sBACE,gBAAA,CAEF,6CAEE,cAAA,CACA,mBAAA,CCRF,GACE,WAAA,CAGF,UACE,WAAA,CAGF,YACE,WAAA,CACA,eAAA,CACA,eAAA,CACA,WAAA,CAIA,6BACE,eAAA,CAIJ,UACE,eAAA,CACA,YAUE,kBAAA,CACA,8BAAA,CAVA,kBACE,oBAAA,CACA,aAAA,CAEA,wBACE,QAAA","sourcesContent":["code[class*=language-],pre[class*=language-]{color:#ccc;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}","// import default prismjs styles from installed npm package\n// important: omit the file extension, e.g. .scss, .css\n@use 'prismjs/themes/prism-tomorrow.min';\n\n// override default styles of prismjs\npre[class*=\"language-\"] {\n padding: 5px 10px;\n}\npre[class*=\"language-\"],\ncode[class*=\"language-\"] {\n font-size: 13px;\n line-height: inherit;\n}\n","@use '~Styles/modules/highlight';\n\n// page styles\nh1 {\n color: coral;\n}\n\n.pug-logo {\n width: 200px;\n}\n\n.image-size {\n width: 100px;\n min-width: 100px;\n max-width: 100px;\n height: 100%;\n}\n\n.iconfont-image-size {\n &::before {\n font-size: 100px;\n }\n}\n\n.icon-bar {\n min-height: 64px;\n > * {\n &:hover {\n transform: scale(1.5);\n margin: 0 10px;\n\n & + .icon {\n margin: 0;\n }\n }\n\n transition: all 0.3s;\n transform-origin: center bottom;\n }\n}\n"],"sourceRoot":""} \ No newline at end of file diff --git a/docs/hello-world/assets/css/styles.6bf44b5c.css b/docs/hello-world/assets/css/styles.6bf44b5c.css deleted file mode 100644 index aff593bf..00000000 --- a/docs/hello-world/assets/css/styles.6bf44b5c.css +++ /dev/null @@ -1,2 +0,0 @@ -h1{color:#000}.about-logo{height:125px} -/*# sourceMappingURL=styles.6bf44b5c.css.map */ \ No newline at end of file diff --git a/docs/hello-world/assets/css/styles.6bf44b5c.css.map b/docs/hello-world/assets/css/styles.6bf44b5c.css.map deleted file mode 100644 index 3f235d26..00000000 --- a/docs/hello-world/assets/css/styles.6bf44b5c.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["webpack://./src/views/pages/about/styles.scss"],"names":[],"mappings":"AAAA,GACE,UAAA,CAGF,YACE,YAAA","sourcesContent":["h1 {\n color: #000;\n}\n\n.about-logo {\n height: 125px;\n}\n"],"sourceRoot":""} \ No newline at end of file diff --git a/docs/hello-world/assets/css/styles.f264980e.css b/docs/hello-world/assets/css/styles.f264980e.css deleted file mode 100644 index 6b695469..00000000 --- a/docs/hello-world/assets/css/styles.f264980e.css +++ /dev/null @@ -1,2 +0,0 @@ -h1{color:#1993ff}.contact-logo{height:125px} -/*# sourceMappingURL=styles.f264980e.css.map */ \ No newline at end of file diff --git a/docs/hello-world/assets/css/styles.f264980e.css.map b/docs/hello-world/assets/css/styles.f264980e.css.map deleted file mode 100644 index 0fc9c344..00000000 --- a/docs/hello-world/assets/css/styles.f264980e.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["webpack://./src/views/pages/contact/styles.scss"],"names":[],"mappings":"AAAA,GACE,aAAA,CAGF,cACE,YAAA","sourcesContent":["h1 {\n color: #1993ff;\n}\n\n.contact-logo {\n height: 125px;\n}\n"],"sourceRoot":""} \ No newline at end of file diff --git a/docs/hello-world/assets/js/common.85caf25e.js b/docs/hello-world/assets/js/common.85caf25e.js new file mode 100644 index 00000000..4f2baaaa --- /dev/null +++ b/docs/hello-world/assets/js/common.85caf25e.js @@ -0,0 +1,2 @@ +console.log(">> Global script"); +//# sourceMappingURL=common.85caf25e.js.map \ No newline at end of file diff --git a/docs/hello-world/assets/js/common.85caf25e.js.map b/docs/hello-world/assets/js/common.85caf25e.js.map new file mode 100644 index 00000000..ee994be9 --- /dev/null +++ b/docs/hello-world/assets/js/common.85caf25e.js.map @@ -0,0 +1 @@ +{"version":3,"file":"assets/js/common.85caf25e.js","mappings":"AAAAA,QAAQC,IAAI","sources":["webpack://hello-world/./src/assets/scripts/common.js"],"sourcesContent":["console.log('>> Global script');\n"],"names":["console","log"],"sourceRoot":""} \ No newline at end of file diff --git a/docs/hello-world/assets/js/common.d4eda587.js b/docs/hello-world/assets/js/common.d4eda587.js deleted file mode 100644 index 8d621f0e..00000000 --- a/docs/hello-world/assets/js/common.d4eda587.js +++ /dev/null @@ -1,2 +0,0 @@ -console.log(">> Global loaded script."); -//# sourceMappingURL=common.d4eda587.js.map \ No newline at end of file diff --git a/docs/hello-world/assets/js/common.d4eda587.js.map b/docs/hello-world/assets/js/common.d4eda587.js.map deleted file mode 100644 index 8ae1b97d..00000000 --- a/docs/hello-world/assets/js/common.d4eda587.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"assets/js/common.d4eda587.js","mappings":"AAAAA,QAAQC,IAAI","sources":["webpack://hello-world/./src/assets/scripts/common.js"],"sourcesContent":["console.log('>> Global loaded script.');\n"],"names":["console","log"],"sourceRoot":""} \ No newline at end of file diff --git a/docs/hello-world/assets/js/main.1.221276c2.js b/docs/hello-world/assets/js/main.1.221276c2.js deleted file mode 100644 index 9fadc79d..00000000 --- a/docs/hello-world/assets/js/main.1.221276c2.js +++ /dev/null @@ -1,2 +0,0 @@ -console.log("\n>> Contact page"); -//# sourceMappingURL=main.1.221276c2.js.map \ No newline at end of file diff --git a/docs/hello-world/assets/js/main.1.6e4bc4a2.js b/docs/hello-world/assets/js/main.1.6e4bc4a2.js new file mode 100644 index 00000000..8d76c093 --- /dev/null +++ b/docs/hello-world/assets/js/main.1.6e4bc4a2.js @@ -0,0 +1,2 @@ +console.log("\n>> About page"); +//# sourceMappingURL=main.1.6e4bc4a2.js.map \ No newline at end of file diff --git a/docs/hello-world/assets/js/main.2.b24463ed.js.map b/docs/hello-world/assets/js/main.1.6e4bc4a2.js.map similarity index 74% rename from docs/hello-world/assets/js/main.2.b24463ed.js.map rename to docs/hello-world/assets/js/main.1.6e4bc4a2.js.map index 53dee4ff..c1aa1341 100644 --- a/docs/hello-world/assets/js/main.2.b24463ed.js.map +++ b/docs/hello-world/assets/js/main.1.6e4bc4a2.js.map @@ -1 +1 @@ -{"version":3,"file":"assets/js/main.2.b24463ed.js","mappings":"AAAAA,QAAQC,IAAI","sources":["webpack://hello-world/./src/views/pages/about/main.js"],"sourcesContent":["console.log('\\n>> About page');\n"],"names":["console","log"],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"assets/js/main.1.6e4bc4a2.js","mappings":"AAAAA,QAAQC,IAAI","sources":["webpack://hello-world/./src/views/pages/about/main.js"],"sourcesContent":["console.log('\\n>> About page');\n"],"names":["console","log"],"sourceRoot":""} \ No newline at end of file diff --git a/docs/hello-world/assets/js/main.2.3812f4ec.js b/docs/hello-world/assets/js/main.2.3812f4ec.js new file mode 100644 index 00000000..d655a8c9 --- /dev/null +++ b/docs/hello-world/assets/js/main.2.3812f4ec.js @@ -0,0 +1,2 @@ +console.log("\n>> Contact page"); +//# sourceMappingURL=main.2.3812f4ec.js.map \ No newline at end of file diff --git a/docs/hello-world/assets/js/main.1.221276c2.js.map b/docs/hello-world/assets/js/main.2.3812f4ec.js.map similarity index 74% rename from docs/hello-world/assets/js/main.1.221276c2.js.map rename to docs/hello-world/assets/js/main.2.3812f4ec.js.map index fd2c37ba..1d33b2cc 100644 --- a/docs/hello-world/assets/js/main.1.221276c2.js.map +++ b/docs/hello-world/assets/js/main.2.3812f4ec.js.map @@ -1 +1 @@ -{"version":3,"file":"assets/js/main.1.221276c2.js","mappings":"AAAAA,QAAQC,IAAI","sources":["webpack://hello-world/./src/views/pages/contact/main.js"],"sourcesContent":["console.log('\\n>> Contact page');\n"],"names":["console","log"],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"assets/js/main.2.3812f4ec.js","mappings":"AAAAA,QAAQC,IAAI","sources":["webpack://hello-world/./src/views/pages/contact/main.js"],"sourcesContent":["console.log('\\n>> Contact page');\n"],"names":["console","log"],"sourceRoot":""} \ No newline at end of file diff --git a/docs/hello-world/assets/js/main.2.b24463ed.js b/docs/hello-world/assets/js/main.2.b24463ed.js deleted file mode 100644 index 4b7e5023..00000000 --- a/docs/hello-world/assets/js/main.2.b24463ed.js +++ /dev/null @@ -1,2 +0,0 @@ -console.log("\n>> About page"); -//# sourceMappingURL=main.2.b24463ed.js.map \ No newline at end of file diff --git a/docs/hello-world/contact.html b/docs/hello-world/contact.html deleted file mode 100644 index 4a99dc2f..00000000 --- a/docs/hello-world/contact.html +++ /dev/null @@ -1,3 +0,0 @@ -Contact
App demo
HomeContactAbout
Login

Contact

Ask how we can help you on GitHub.
Copyleft 2022 @webdiscus. -Powered by Pug Plugin. -
\ No newline at end of file diff --git a/docs/hello-world/contact/index.html b/docs/hello-world/contact/index.html new file mode 100644 index 00000000..9326af97 --- /dev/null +++ b/docs/hello-world/contact/index.html @@ -0,0 +1,5 @@ +Contact +
App demo
HomeContactAbout
Login

Contact

Ask how we can help you on GitHub.
Copyleft 2024 @webdiscus. +Powered by Pug Plugin. +
\ No newline at end of file diff --git a/docs/hello-world/index.html b/docs/hello-world/index.html index 86f26fd8..d396f35e 100644 --- a/docs/hello-world/index.html +++ b/docs/hello-world/index.html @@ -1,7 +1,7 @@ -Home
App demo
HomeContactAbout
Login

Hello Pug World!

Very simple web app to demonstrate how to easy include resources in Pug, -using the pug-plugin.
- -Home +
App demo
HomeContactAbout
Login

Hello World!

Very simple web app to demonstrate how to easy include resources in Pug, +using the pug-plugin.
-
Use a source file of an image in Pug:
img(src=require('~Images/delphin.jpeg'))
-
Generated HTML:
<img src="/assets/img/delphin.f78b30f4.jpeg">
-
Use a source file of a font or background image in SCSS:
@font-face {
+
Use an image source file in Pug with the @images webpack alias:
img(src='@images/delphin.jpeg')
+
Generated HTML:
<img src="assets/img/delphin.f78b30f4.jpeg">
+
Use a font source file or background image in SCSS:
@font-face {
   font-family: 'GlyphIcons';
-  src: url('~Fonts/GlyphIcons/glyphicons-halflings-regular.woff2') format('woff2');
+  src: url('@fonts/GlyphIcons/glyphicons-halflings-regular.woff2') format('woff2');
 }
 .header-bg {
-  background-image: url('~Images/header-bg.png');
+  background-image: url('@images/header-bg.png');
 }
Generated CSS:
@font-face {
   font-family: 'GlyphIcons';
-  src: url(/assets/fonts/glyphicons-halflings-regular.woff2) format("woff2");
+  src: url(assets/fonts/glyphicons-halflings-regular.woff2) format("woff2");
 }
 .header-bg {
-  background-image: url(/assets/img/header-bg.30f4f78b.png);
+  background-image: url(assets/img/header-bg.30f4f78b.png);
 }
-
- - -
Supports the inline SVG in HTML.
Pug:
img.logo(src=require('~Images/webpack.svg'))
+
Supports the inline SVG in HTML.
Pug:
img.logo(src='@images/webpack.svg')
Generated HTML:
<svg viewBox="0 0 200 200" class="logo">
   <path d="m600 0 530.3 300v600l-530.3 300-530.3-300v-600z" fill="#fff"></path>
   ...
 </svg>
-
Supports the inline images as data-URL in HTML.
Pug:
img(src=require('~Images/icons/Premium.png'))
+
Supports the inline images as data-URL in HTML.
Pug:
img(src='@images/icons/Premium.png')
Generated HTML:
<img src="data:image/png;base64,iVBORw0K...ABJRU5ErkJggg==">
Supports the inline SVG as data-URL in CSS.
SCSS:
.webicon-mac-svg {
-  background-image: url('~Images/icons/webicons/webicon-mac.svg');
+  background-image: url('@images/icons/webicons/webicon-mac.svg');
 }
Generated CSS:
.webicon-mac-svg {
   background-image: url("data:image/svg+xml,<svg>...</svg>");
 }
Supports the inline images as data-URL in CSS.
SCSS:
.webicon-apple-png {
-  background-image: url('~Images/icons/webicons/webicon-apple.png');
+  background-image: url('@images/icons/webicons/webicon-apple.png');
 }
Generated CSS:
.webicon-apple-png {
   background-image: url(data:image/png;base64,iVBORw0K...ABJRU5ErkJggg==);
 }
-
Icons as background image in CSS.
Copyleft 2022 @webdiscus. +

Icons as background image in CSS

Copyleft 2024 @webdiscus. Powered by Pug Plugin. -
\ No newline at end of file + \ No newline at end of file diff --git a/docs/multi-language-i18next/assets/css/main.12a9cf45.css b/docs/multi-language-i18next/assets/css/main.190a6d83.css similarity index 96% rename from docs/multi-language-i18next/assets/css/main.12a9cf45.css rename to docs/multi-language-i18next/assets/css/main.190a6d83.css index 5bcdb3e3..2ffd7bca 100644 --- a/docs/multi-language-i18next/assets/css/main.12a9cf45.css +++ b/docs/multi-language-i18next/assets/css/main.190a6d83.css @@ -1 +1,2 @@ -body{font-family:Helvetica,sans-serif}a{color:#737373;text-decoration:none}a.link{color:#1993ff}a:hover{text-decoration:underline}h1{text-align:center}.teaser{color:#737373;text-align:center;font-size:18px}.copyleft{font-size:18px;display:inline-block;transform:scaleX(-1)}.copyleft:before{content:"©"}html,body{margin:0;padding:0;min-height:100vh}body{display:flex;flex-direction:column;background-color:#f2f5f7}.header-container{display:flex;flex-direction:column;justify-content:center;align-items:center;position:sticky;top:-40px;min-height:100px;margin-bottom:20px;background-color:#fff;box-shadow:0 0 17px rgba(0,0,0,.3)}.header-container .header-content{position:sticky;display:flex;top:0;height:60px;width:100%;max-width:960px;margin-left:auto;margin-right:auto;padding-left:50px;padding-right:50px}.header-container .header-content>*{display:flex;flex-direction:row;justify-content:center;align-items:center}.header-container .header-content>:first-child,.header-container .header-content>:last-child{flex:0 0 18%;max-width:18%}.header-container .header-content>:first-child{justify-content:flex-start}.header-container .header-content>:last-child{justify-content:flex-end}.header-container .header-content>:not(:first-child):not(:last-child){flex-grow:1}.header-container .header-content>:not(:first-child):not(:last-child)>:not(:first-child){margin-left:20px}.main-container{display:flex;flex:1 0 auto}.main-content{display:flex;flex-direction:column;height:100%;width:100%;max-width:960px;margin-left:auto;margin-right:auto;padding-left:50px;padding-right:50px}.footer-container{margin-top:20px;padding:30px 50px;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-shrink:0;color:#b1c4d0;background-color:#15384f}.footer-container>:not(:first-child){margin-left:10px}.footer-container a{color:#b1c4d0}.app-logo{max-height:60px;min-height:40px;margin-right:20px}.teaser{margin-bottom:20px}section:not(:first-of-type){margin-top:20px}section .container{padding:20px 30px;background-color:#fff}.flex-column{display:flex;flex-direction:column;justify-content:flex-start;align-content:flex-start;align-items:stretch}.flex-column>:not(:first-child){margin-left:10px}.flex-column.center-x{align-items:center}.flex-column.center-y{justify-content:center}.flex-row{display:flex;flex-direction:row;justify-content:flex-start;align-content:flex-start;align-items:stretch}.flex-row>:not(:first-child){margin-left:10px}.flex-row.center-x{justify-content:center}.flex-row.center-y{align-items:center}.fit-max>:first-child{flex-basis:content}.fit-max>:not(:first-child){flex-grow:1} \ No newline at end of file +body{font-family:Helvetica,sans-serif}a{color:#737373;text-decoration:none}a.link{color:#1993ff}a:hover{text-decoration:underline}h1{text-align:center}.teaser{color:#737373;text-align:center;font-size:18px}.copyleft{font-size:18px;display:inline-block;transform:scaleX(-1)}.copyleft:before{content:"©"}html,body{margin:0;padding:0;min-height:100vh}body{display:flex;flex-direction:column;background-color:#f2f5f7}.header-container{display:flex;flex-direction:column;justify-content:center;align-items:center;position:sticky;top:-40px;min-height:100px;margin-bottom:20px;background-color:#fff;box-shadow:0 0 17px rgba(0,0,0,.3)}.header-container .header-content{position:sticky;display:flex;top:0;height:60px;width:100%;max-width:960px;margin-left:auto;margin-right:auto;padding-left:50px;padding-right:50px}.header-container .header-content>*{display:flex;flex-direction:row;justify-content:center;align-items:center}.header-container .header-content>:first-child,.header-container .header-content>:last-child{flex:0 0 18%;max-width:18%}.header-container .header-content>:first-child{justify-content:flex-start}.header-container .header-content>:last-child{justify-content:flex-end}.header-container .header-content>:not(:first-child):not(:last-child){flex-grow:1}.header-container .header-content>:not(:first-child):not(:last-child)>:not(:first-child){margin-left:20px}.main-container{display:flex;flex:1 0 auto}.main-content{display:flex;flex-direction:column;height:100%;width:100%;max-width:960px;margin-left:auto;margin-right:auto;padding-left:50px;padding-right:50px}.footer-container{margin-top:20px;padding:30px 50px;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-shrink:0;color:#b1c4d0;background-color:#15384f}.footer-container>:not(:first-child){margin-left:10px}.footer-container a{color:#b1c4d0}.app-logo{max-height:60px;min-height:40px;margin-right:20px}.teaser{margin-bottom:20px}section:not(:first-of-type){margin-top:20px}section .container{padding:20px 30px;background-color:#fff}.flex-column{display:flex;flex-direction:column;justify-content:flex-start;align-content:flex-start;align-items:stretch}.flex-column>:not(:first-child){margin-left:10px}.flex-column.center-x{align-items:center}.flex-column.center-y{justify-content:center}.flex-row{display:flex;flex-direction:row;justify-content:flex-start;align-content:flex-start;align-items:stretch}.flex-row>:not(:first-child){margin-left:10px}.flex-row.center-x{justify-content:center}.flex-row.center-y{align-items:center}.fit-max>:first-child{flex-basis:content}.fit-max>:not(:first-child){flex-grow:1} +/*# sourceMappingURL=main.190a6d83.css.map*/ \ No newline at end of file diff --git a/docs/multi-language-i18next/assets/css/main.190a6d83.css.map b/docs/multi-language-i18next/assets/css/main.190a6d83.css.map new file mode 100644 index 00000000..d214dd70 --- /dev/null +++ b/docs/multi-language-i18next/assets/css/main.190a6d83.css.map @@ -0,0 +1 @@ +{"version":3,"file":"assets/css/main.190a6d83.css","mappings":"AAAA,KCAA,gCACE,GAGF,aACE,qBACA,QAEA,aACE,SAGF,yBACE,IAIJ,iBACE,SAGF,aACE,kBACA,eACA,WAGF,cAIE,qBACA,qBACA,kBALA,WACE,WCXJ,QAEE,UACA,iBACA,MAGF,YACE,sBACA,yBACA,mBAGF,YACE,sBACA,uBACA,mBACA,gBACA,UACA,iBA/BkB,mBAHZ,sBAqCN,mCACA,mCAEA,eACE,aACA,MACA,YAtCgB,WAwChB,gBArCgB,iBAuChB,kBACA,kBAvCgB,wDA2ChB,YACE,mBACA,uBACA,mBACA,8FAGF,YAEE,cACA,gDAGF,0BACE,+CAGF,wBACE,uEAGF,WACE,0FACA,gBA3EE,iBAkFR,YACE,cACA,eAGF,YACE,sBACA,YACA,WACA,gBAnFkB,iBAqFlB,kBACA,kBArFkB,sCA0FpB,eAnGQ,kBAqGN,aACA,mBACA,uBACA,mBACA,cACA,cA9FkB,yBACF,sCAiGhB,gBA/GM,qBAmHN,aAtGkB,WA2GpB,eACE,gBACA,kBAzHM,SA6HR,kBA7HQ,6BAkIN,eAlIM,oBAqIN,iBACE,sBACA,cAIJ,YACE,sBACA,2BACA,yBACA,oBACA,iCAEA,gBAnJM,uBAuJN,kBACE,uBAGF,sBACE,WAIJ,YACE,mBACA,2BACA,yBACA,oBACA,8BAEA,gBAvKM,oBA2KN,sBACE,oBAGF,kBACE,uBAKF,kBACE,6BAEF,WACE","sources":["webpack://multi-language-i18next/./src/assets/styles/main.scss","webpack://multi-language-i18next/./src/assets/styles/_typography.scss","webpack://multi-language-i18next/./src/assets/styles/_layout.scss"],"sourcesContent":["body{font-family:Helvetica,sans-serif}a{color:#737373;text-decoration:none}a.link{color:#1993ff}a:hover{text-decoration:underline}h1{text-align:center}.teaser{color:#737373;text-align:center;font-size:18px}.copyleft{font-size:18px;display:inline-block;transform:scaleX(-1)}.copyleft:before{content:\"©\"}html,body{margin:0;padding:0;min-height:100vh}body{display:flex;flex-direction:column;background-color:#f2f5f7}.header-container{display:flex;flex-direction:column;justify-content:center;align-items:center;position:sticky;top:-40px;min-height:100px;margin-bottom:20px;background-color:#fff;box-shadow:0 0 17px rgba(0,0,0,.3)}.header-container .header-content{position:sticky;display:flex;top:0;height:60px;width:100%;max-width:960px;margin-left:auto;margin-right:auto;padding-left:50px;padding-right:50px}.header-container .header-content>*{display:flex;flex-direction:row;justify-content:center;align-items:center}.header-container .header-content>:first-child,.header-container .header-content>:last-child{flex:0 0 18%;max-width:18%}.header-container .header-content>:first-child{justify-content:flex-start}.header-container .header-content>:last-child{justify-content:flex-end}.header-container .header-content>:not(:first-child):not(:last-child){flex-grow:1}.header-container .header-content>:not(:first-child):not(:last-child)>:not(:first-child){margin-left:20px}.main-container{display:flex;flex:1 0 auto}.main-content{display:flex;flex-direction:column;height:100%;width:100%;max-width:960px;margin-left:auto;margin-right:auto;padding-left:50px;padding-right:50px}.footer-container{margin-top:20px;padding:30px 50px;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-shrink:0;color:#b1c4d0;background-color:#15384f}.footer-container>:not(:first-child){margin-left:10px}.footer-container a{color:#b1c4d0}.app-logo{max-height:60px;min-height:40px;margin-right:20px}.teaser{margin-bottom:20px}section:not(:first-of-type){margin-top:20px}section .container{padding:20px 30px;background-color:#fff}.flex-column{display:flex;flex-direction:column;justify-content:flex-start;align-content:flex-start;align-items:stretch}.flex-column>:not(:first-child){margin-left:10px}.flex-column.center-x{align-items:center}.flex-column.center-y{justify-content:center}.flex-row{display:flex;flex-direction:row;justify-content:flex-start;align-content:flex-start;align-items:stretch}.flex-row>:not(:first-child){margin-left:10px}.flex-row.center-x{justify-content:center}.flex-row.center-y{align-items:center}.fit-max>:first-child{flex-basis:content}.fit-max>:not(:first-child){flex-grow:1}","body {\n font-family: Helvetica, sans-serif;\n}\n\na {\n color: #737373;\n text-decoration: none;\n\n &.link {\n color: #1993ff;\n }\n\n &:hover {\n text-decoration: underline;\n }\n}\n\nh1 {\n text-align: center;\n}\n\n.teaser {\n color: #737373;\n text-align: center;\n font-size: 18px;\n}\n\n.copyleft {\n &:before {\n content: '\\00a9';\n }\n font-size: 18px;\n display: inline-block;\n transform: scaleX(-1);\n}\n","// spacers\n$gap-s: 5px;\n$gap-m: 10px;\n$gap-l: 20px;\n\n// sticky header height normal, no scrolling\n$header-max-height: 100px;\n// sticky header height by scrolling\n$header-min-height: 60px;\n\n// main content\n$content-max-width: 960px;\n$content-padding-x: 50px;\n\n// footer\n$footer-text-color: #b1c4d0;\n$footer-bg-color: #15384f;\n\nhtml,\nbody {\n margin: 0;\n padding: 0;\n min-height: 100vh;\n}\n\nbody {\n display: flex;\n flex-direction: column;\n background-color: #f2f5f7;\n}\n\n.header-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n position: sticky;\n top: $header-min-height - $header-max-height;\n min-height: $header-max-height;\n margin-bottom: $gap-l;\n background-color: #fff;\n box-shadow: 0 0 17px rgba(0,0,0,0.3);\n\n .header-content {\n position: sticky;\n display: flex;\n top: 0;\n height: $header-min-height;\n width: 100%;\n max-width: $content-max-width;\n margin-left: auto;\n margin-right: auto;\n padding-left: $content-padding-x;\n padding-right: $content-padding-x;\n\n > * {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n }\n\n > :first-child,\n > :last-child {\n flex: 0 0 18%;\n max-width: 18%;\n }\n\n > :first-child {\n justify-content: flex-start;\n }\n\n > :last-child {\n justify-content: flex-end;\n }\n\n > :not(:first-child):not(:last-child) {\n flex-grow: 1;\n > :not(:first-child) {\n margin-left: $gap-l;\n }\n }\n }\n}\n\n.main-container {\n display: flex;\n flex: 1 0 auto;\n}\n\n.main-content {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n max-width: $content-max-width;\n margin-left: auto;\n margin-right: auto;\n padding-left: $content-padding-x;\n padding-right: $content-padding-x;\n}\n\n.footer-container {\n margin-top: $gap-l;\n padding: 30px 50px;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n color: $footer-text-color;\n background-color: $footer-bg-color;\n\n > :not(:first-child) {\n margin-left: $gap-m;\n }\n\n a {\n color: $footer-text-color;\n }\n}\n\n.app-logo {\n max-height: 60px;\n min-height: 40px;\n margin-right: $gap-l;\n}\n\n.teaser {\n margin-bottom: $gap-l;\n}\n\nsection {\n &:not(:first-of-type) {\n margin-top: $gap-l;\n }\n .container {\n padding: $gap-l $gap-l * 1.5;\n background-color: #fff;\n }\n}\n\n.flex-column {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-content: flex-start;\n align-items: stretch;\n\n > :not(:first-child) {\n margin-left: $gap-m;\n }\n\n &.center-x {\n align-items: center;\n }\n\n &.center-y {\n justify-content: center;\n }\n}\n\n.flex-row {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-content: flex-start;\n align-items: stretch;\n\n > :not(:first-child) {\n margin-left: $gap-m;\n }\n\n &.center-x {\n justify-content: center;\n }\n\n &.center-y {\n align-items: center;\n }\n}\n\n.fit-max {\n > :first-child {\n flex-basis: content;\n }\n > :not(:first-child) {\n flex-grow: 1;\n }\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/multi-language-i18next/assets/css/styles.0d06110e.css b/docs/multi-language-i18next/assets/css/styles.0d06110e.css deleted file mode 100644 index 3aed25fc..00000000 --- a/docs/multi-language-i18next/assets/css/styles.0d06110e.css +++ /dev/null @@ -1 +0,0 @@ -h1{color:coral} \ No newline at end of file diff --git a/docs/multi-language-i18next/assets/css/styles.9167d8cc.css b/docs/multi-language-i18next/assets/css/styles.9167d8cc.css new file mode 100644 index 00000000..c39ae255 --- /dev/null +++ b/docs/multi-language-i18next/assets/css/styles.9167d8cc.css @@ -0,0 +1,2 @@ +h1{color:#2e8b57} +/*# sourceMappingURL=styles.9167d8cc.css.map*/ \ No newline at end of file diff --git a/docs/multi-language-i18next/assets/css/styles.9167d8cc.css.map b/docs/multi-language-i18next/assets/css/styles.9167d8cc.css.map new file mode 100644 index 00000000..714bad3c --- /dev/null +++ b/docs/multi-language-i18next/assets/css/styles.9167d8cc.css.map @@ -0,0 +1 @@ +{"version":3,"file":"assets/css/styles.9167d8cc.css","mappings":"AAAA,GACE","sources":["webpack://multi-language-i18next/./src/views/pages/about/styles.scss"],"sourcesContent":["h1 {\n color: seagreen;\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/multi-language-i18next/assets/css/styles.b6a6da36.css b/docs/multi-language-i18next/assets/css/styles.b6a6da36.css deleted file mode 100644 index 9e149ba8..00000000 --- a/docs/multi-language-i18next/assets/css/styles.b6a6da36.css +++ /dev/null @@ -1 +0,0 @@ -h1{color:#2e8b57} \ No newline at end of file diff --git a/docs/multi-language-i18next/assets/css/styles.dfe7c8b1.css b/docs/multi-language-i18next/assets/css/styles.dfe7c8b1.css new file mode 100644 index 00000000..e15f873e --- /dev/null +++ b/docs/multi-language-i18next/assets/css/styles.dfe7c8b1.css @@ -0,0 +1,2 @@ +h1{color:coral} +/*# sourceMappingURL=styles.dfe7c8b1.css.map*/ \ No newline at end of file diff --git a/docs/multi-language-i18next/assets/css/styles.dfe7c8b1.css.map b/docs/multi-language-i18next/assets/css/styles.dfe7c8b1.css.map new file mode 100644 index 00000000..2ff9d78e --- /dev/null +++ b/docs/multi-language-i18next/assets/css/styles.dfe7c8b1.css.map @@ -0,0 +1 @@ +{"version":3,"file":"assets/css/styles.dfe7c8b1.css","mappings":"AAAA,GACE","sources":["webpack://multi-language-i18next/./src/views/pages/home/styles.scss"],"sourcesContent":["h1 {\n color: coral;\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/multi-language-i18next/assets/js/common.76c5cc6f.js b/docs/multi-language-i18next/assets/js/common.76c5cc6f.js deleted file mode 100644 index a2dfa4ba..00000000 --- a/docs/multi-language-i18next/assets/js/common.76c5cc6f.js +++ /dev/null @@ -1 +0,0 @@ -console.log(">> Global script"); \ No newline at end of file diff --git a/docs/multi-language-i18next/assets/js/common.85caf25e.js b/docs/multi-language-i18next/assets/js/common.85caf25e.js new file mode 100644 index 00000000..4f2baaaa --- /dev/null +++ b/docs/multi-language-i18next/assets/js/common.85caf25e.js @@ -0,0 +1,2 @@ +console.log(">> Global script"); +//# sourceMappingURL=common.85caf25e.js.map \ No newline at end of file diff --git a/docs/multi-language-i18next/assets/js/common.85caf25e.js.map b/docs/multi-language-i18next/assets/js/common.85caf25e.js.map new file mode 100644 index 00000000..f60a3401 --- /dev/null +++ b/docs/multi-language-i18next/assets/js/common.85caf25e.js.map @@ -0,0 +1 @@ +{"version":3,"file":"assets/js/common.85caf25e.js","mappings":"AAAAA,QAAQC,IAAI","sources":["webpack://multi-language-i18next/./src/assets/scripts/common.js"],"sourcesContent":["console.log('>> Global script');\n"],"names":["console","log"],"sourceRoot":""} \ No newline at end of file diff --git a/docs/multi-language-i18next/assets/js/main.0f0b43b3.js b/docs/multi-language-i18next/assets/js/main.0f0b43b3.js deleted file mode 100644 index d6868c5b..00000000 --- a/docs/multi-language-i18next/assets/js/main.0f0b43b3.js +++ /dev/null @@ -1 +0,0 @@ -console.log("\n>> About page"); \ No newline at end of file diff --git a/docs/multi-language-i18next/assets/js/main.1.6e4bc4a2.js b/docs/multi-language-i18next/assets/js/main.1.6e4bc4a2.js new file mode 100644 index 00000000..8d76c093 --- /dev/null +++ b/docs/multi-language-i18next/assets/js/main.1.6e4bc4a2.js @@ -0,0 +1,2 @@ +console.log("\n>> About page"); +//# sourceMappingURL=main.1.6e4bc4a2.js.map \ No newline at end of file diff --git a/docs/multi-language-i18next/assets/js/main.1.6e4bc4a2.js.map b/docs/multi-language-i18next/assets/js/main.1.6e4bc4a2.js.map new file mode 100644 index 00000000..72cb4c1e --- /dev/null +++ b/docs/multi-language-i18next/assets/js/main.1.6e4bc4a2.js.map @@ -0,0 +1 @@ +{"version":3,"file":"assets/js/main.1.6e4bc4a2.js","mappings":"AAAAA,QAAQC,IAAI","sources":["webpack://multi-language-i18next/./src/views/pages/about/main.js"],"sourcesContent":["console.log('\\n>> About page');\n"],"names":["console","log"],"sourceRoot":""} \ No newline at end of file diff --git a/docs/multi-language-i18next/assets/js/main.1.8840a974.js b/docs/multi-language-i18next/assets/js/main.1.8840a974.js deleted file mode 100644 index 038f39f0..00000000 --- a/docs/multi-language-i18next/assets/js/main.1.8840a974.js +++ /dev/null @@ -1 +0,0 @@ -console.log("\n>> Home page"); \ No newline at end of file diff --git a/docs/multi-language-i18next/assets/js/main.2.8840a974.js b/docs/multi-language-i18next/assets/js/main.2.8840a974.js deleted file mode 100644 index 038f39f0..00000000 --- a/docs/multi-language-i18next/assets/js/main.2.8840a974.js +++ /dev/null @@ -1 +0,0 @@ -console.log("\n>> Home page"); \ No newline at end of file diff --git a/docs/multi-language-i18next/assets/js/main.a4fc6eb1.js b/docs/multi-language-i18next/assets/js/main.a4fc6eb1.js new file mode 100644 index 00000000..f3882b24 --- /dev/null +++ b/docs/multi-language-i18next/assets/js/main.a4fc6eb1.js @@ -0,0 +1,2 @@ +console.log("\n>> Home page"); +//# sourceMappingURL=main.a4fc6eb1.js.map \ No newline at end of file diff --git a/docs/multi-language-i18next/assets/js/main.a4fc6eb1.js.map b/docs/multi-language-i18next/assets/js/main.a4fc6eb1.js.map new file mode 100644 index 00000000..5e905c90 --- /dev/null +++ b/docs/multi-language-i18next/assets/js/main.a4fc6eb1.js.map @@ -0,0 +1 @@ +{"version":3,"file":"assets/js/main.a4fc6eb1.js","mappings":"AAAAA,QAAQC,IAAI","sources":["webpack://multi-language-i18next/./src/views/pages/home/main.js"],"sourcesContent":["console.log('\\n>> Home page');\n"],"names":["console","log"],"sourceRoot":""} \ No newline at end of file diff --git a/docs/multi-language-i18next/de_DE/about.html b/docs/multi-language-i18next/de_DE/about.html index b092ce4a..b306b461 100644 --- a/docs/multi-language-i18next/de_DE/about.html +++ b/docs/multi-language-i18next/de_DE/about.html @@ -1,3 +1,3 @@ -Über
StartseiteÜber
en | de

Über

Beispiel für die Verwendung von Multi-Language mit dem Pug-Plugin und i18next.
Copyleft 2022 @webdiscus. +Über
StartseiteÜber
en | de

Über

Beispiel für die Verwendung von Multi-Language mit dem Pug-Plugin und i18next.
Copyleft 2024 @webdiscus. Powered by Pug Plugin. -
\ No newline at end of file +
\ No newline at end of file diff --git a/docs/multi-language-i18next/de_DE/index.html b/docs/multi-language-i18next/de_DE/index.html index 5082d8b9..159fef87 100644 --- a/docs/multi-language-i18next/de_DE/index.html +++ b/docs/multi-language-i18next/de_DE/index.html @@ -1,3 +1,3 @@ -Startseite
StartseiteÜber
en | de

Hallo mehrsprachige Welt!

Copyleft 2022 @webdiscus. +Startseite
StartseiteÜber
en | de

Hallo mehrsprachige Welt!

Copyleft 2024 @webdiscus. Powered by Pug Plugin. -
\ No newline at end of file +
\ No newline at end of file diff --git a/docs/multi-language-i18next/en_US/about.html b/docs/multi-language-i18next/en_US/about.html index 7add895b..65f8d3bb 100644 --- a/docs/multi-language-i18next/en_US/about.html +++ b/docs/multi-language-i18next/en_US/about.html @@ -1,3 +1,3 @@ -About
HomeAbout
en | de

About

Example how to use multi-language with the pug-plugin and i18next.
Copyleft 2022 @webdiscus. +About
HomeAbout
en | de

About

Example how to use multi-language with the pug-plugin and i18next.
Copyleft 2024 @webdiscus. Powered by Pug Plugin. -
\ No newline at end of file +
\ No newline at end of file diff --git a/docs/multi-language-i18next/en_US/index.html b/docs/multi-language-i18next/en_US/index.html index cb0bf7ef..84ac4f5d 100644 --- a/docs/multi-language-i18next/en_US/index.html +++ b/docs/multi-language-i18next/en_US/index.html @@ -1,3 +1,3 @@ -Home
HomeAbout
en | de

Hello multi-language world!

Copyleft 2022 @webdiscus. +Home
HomeAbout
en | de

Hello multi-language world!

Copyleft 2024 @webdiscus. Powered by Pug Plugin. -
\ No newline at end of file +
\ No newline at end of file diff --git a/docs/responsive-image/assets/css/main.070c6c08.css.map b/docs/responsive-image/assets/css/main.070c6c08.css.map deleted file mode 100644 index fa513b4e..00000000 --- a/docs/responsive-image/assets/css/main.070c6c08.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["webpack://./src/assets/styles/main.scss","webpack://./node_modules/prismjs/themes/prism-tomorrow.min.css"],"names":[],"mappings":"AAAA,6CCAA,UAAA,CAAA,cAAA,CAAA,iEAAA,CAAA,aAAA,CAAA,eAAA,CAAA,eAAA,CAAA,mBAAA,CAAA,iBAAA,CAAA,gBAAA,CAAA,eAAA,CAAA,eAAA,CAAA,aAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,iBAAA,CAAA,gBAAA,CAAA,YAAA,CAAA,sBAAA,WAAA,CAAA,aAAA,CAAA,aAAA,CAAA,uDAAA,kBAAA,CAAA,iCAAA,YAAA,CAAA,kBAAA,CAAA,kBAAA,CAAA,8EAAA,UAAA,CAAA,mBAAA,UAAA,CAAA,4DAAA,aAAA,CAAA,qBAAA,aAAA,CAAA,6CAAA,aAAA,CAAA,gEAAA,aAAA,CAAA,6EAAA,aAAA,CAAA,yEAAA,aAAA,CAAA,yCAAA,aAAA,CAAA,6BAAA,eAAA,CAAA,cAAA,iBAAA,CAAA,cAAA,WAAA,CAAA,gBAAA,WAAA,CAAA,sBDgBA,gBACE,CAAA,6CAEF,cAEE,CAAA,eACA,CAAA,gDAGF,iBAEE,CAAA,KAGF,QACE,CAAA,SACA,CAAA,4BACA,CAAA,eACA,CAAA,EAGF,aACE,CAAA,oBACA,CAAA,OAEA,aACE,CAAA,QAGF,yBACE,CAAA,OAIJ,UACE,CAAA,yBACA,CAAA,aAEA,aACE,CAAA,kBAKJ,UACE,CAAA,YACA,CAAA,gBACA,CAAA,eACA,CAAA,qBACA,CAAA,wDAGA,CAAA,yBACA,CAAA,sBAGA,UACE,CAAA,WACA,CAAA,gBACA,CAAA,uBACA,CAAA,kBAIJ,UACE,CAAA,kCAEA,iBACE,CAAA,YACA,CAAA,eA7EgB,CAAA,gBA+EhB,CAAA,iBACA,CAAA,iBA/EgB,CAAA,kBAAA,CAAA,sBAkFhB,CAAA,wBAGF,iBACE,CAAA,iBACA,CAAA,cACA,CAAA,aACA,CAAA,wBACA,CAAA,UACA,CAAA,yBAEA,wBARF,cASI,CAAA,CAAA,yBAEF,wBAXF,cAYI,CAAA,CAAA,gBAKN,YACE,CAAA,aACA,CAAA,cAGF,YACE,CAAA,qBACA,CAAA,WACA,CAAA,eA/GkB,CAAA,gBAkHlB,CAAA,iBACA,CAAA,iBAlHkB,CAAA,kBAAA,CAAA,sBAwHlB,eA5HM,CAAA,mBA+HN,iBACE,CAAA,qBACA,CAAA,SAIJ,QAEE,CAAA,gBACA,CAAA,wBACA,CAAA,qDAEA,QACE,CAAA,uBAKF,kBACE,CAAA,SACA,CAAA,qCAEF,gBACE,CAAA,oCAEF,kBACE,CAAA,GAIJ,gBACE,CAAA,UAGF,cAIE,CAAA,oBACA,CAAA,oBACA,CAAA,iBALA,WACE,CAAA,kBAOJ,eA1KQ,CAAA,iBA4KN,CAAA,YACA,CAAA,kBACA,CAAA,sBACA,CAAA,kBACA,CAAA,aACA,CAAA,aA1KkB,CAAA,wBACF,CAAA,qCA6KhB,gBAtLM,CAAA,oBA0LN,aAlLkB,CAAA,yBAoLhB,CAAA,YAOJ,WACE,CAAA,YACA,CAAA,wDACA","sourcesContent":["@use 'prismjs/themes/prism-tomorrow.min';\n\n// spacers\n$gap-s: 5px;\n$gap-m: 10px;\n$gap-l: 20px;\n\n// main content\n$content-max-width: 960px;\n$content-padding-x: 50px;\n\n// footer\n$footer-text-color: #b1c4d0;\n$footer-bg-color: #15384f;\n\n// override default styles of prismjs\npre[class*=\"language-\"] {\n padding: 5px 10px;\n}\npre[class*=\"language-\"],\ncode[class*=\"language-\"] {\n font-size: 13px;\n line-height: 1.3;\n}\n\n:not(pre) > code,\n:not(pre) > code[class*=\"language-\"] {\n padding: 0.1em 0.4em;\n}\n\nbody {\n margin: 0;\n padding: 0;\n font-family: Arial, sans-serif;\n line-height: 1.3;\n}\n\na {\n color: #235e84;\n text-decoration: none;\n\n &.link {\n color: #1993ff;\n }\n\n &:hover {\n text-decoration: underline;\n }\n}\n\ncode a {\n color: #aaa;\n text-decoration: underline;\n\n &:hover {\n color: #95cef8;\n }\n}\n\n// placeholder for responsive image in header\n.header-container {\n width: 100%;\n height: 300px;\n max-height: 300px;\n overflow: hidden;\n background-size: cover;\n // placeholder of responsive image\n // 2 ways to define placeholder: one is in Pug via style attribute, other is in CSS\n background-image: url('Images/abstract.webp?prop=placeholder&placeholder=true&placeholderSize=100');\n background-position: 0 35%;\n\n // responsive image\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: 50% 40%;\n }\n}\n\n.header-container {\n color: white;\n\n .header-content {\n position: relative;\n display: flex;\n max-width: $content-max-width;\n margin-left: auto;\n margin-right: auto;\n padding-left: $content-padding-x;\n padding-right: $content-padding-x;\n justify-content: center;\n }\n\n .text {\n position: absolute;\n width: fit-content;\n font-size: 40px;\n color: #d6b729;\n text-transform: uppercase;\n z-index: 10;\n\n @media (max-width: 760px) {\n font-size: 30px;\n }\n @media (max-width: 360px) {\n font-size: 24px;\n }\n }\n}\n\n.main-container {\n display: flex;\n flex: 1 0 auto;\n}\n\n.main-content {\n display: flex;\n flex-direction: column;\n height: 100%;\n //width: 100%;\n max-width: $content-max-width;\n margin-left: auto;\n margin-right: auto;\n padding-left: $content-padding-x;\n padding-right: $content-padding-x;\n}\n\nsection {\n &:first-of-type {\n margin-top: $gap-l;\n }\n .container {\n padding: $gap-l $gap-l * 1.5;\n background-color: #fff;\n }\n}\n\ntable,\ntd {\n border: 0;\n border-spacing: 0;\n border-collapse: collapse;\n\n pre[class*=\"language-\"] {\n margin: 0;\n }\n}\n\ntable.image-preview {\n td {\n vertical-align: top;\n padding: 0;\n }\n td:first-of-type {\n text-align: right;\n }\n td:last-of-type {\n padding: 0 0 0 10px;\n }\n}\n\nul {\n margin: 5px 0 0 0;\n}\n\n.copyleft {\n &:before {\n content: '\\00a9';\n }\n font-size: 18px;\n display: inline-block;\n transform: scaleX(-1);\n}\n\n.footer-container {\n margin-top: $gap-l;\n padding: 30px 50px;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n color: $footer-text-color;\n background-color: $footer-bg-color;\n\n > :not(:first-child) {\n margin-left: $gap-m;\n }\n\n a {\n color: $footer-text-color;\n text-decoration: underline;\n }\n}\n\n// styles for demo on page\n$width: 200;\n$height: 145;\n.demo-image {\n width: #{$width}px;\n height: #{$height}px;\n background-image: url('~Images/image.webp?size=#{$width}');\n}\n","code[class*=language-],pre[class*=language-]{color:#ccc;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}"],"sourceRoot":""} \ No newline at end of file diff --git a/docs/responsive-image/assets/css/main.070c6c08.css b/docs/responsive-image/assets/css/main.dfbc03b6.css similarity index 98% rename from docs/responsive-image/assets/css/main.070c6c08.css rename to docs/responsive-image/assets/css/main.dfbc03b6.css index 29b11a9a..77821841 100644 --- a/docs/responsive-image/assets/css/main.070c6c08.css +++ b/docs/responsive-image/assets/css/main.dfbc03b6.css @@ -1,2 +1,2 @@ -code[class*=language-],pre[class*=language-]{color:#ccc;background:0 0;font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}pre[class*=language-]{padding:5px 10px}pre[class*=language-],code[class*=language-]{font-size:13px;line-height:1.3}:not(pre)>code,:not(pre)>code[class*=language-]{padding:.1em .4em}body{margin:0;padding:0;font-family:Arial,sans-serif;line-height:1.3}a{color:#235e84;text-decoration:none}a.link{color:#1993ff}a:hover{text-decoration:underline}code a{color:#aaa;text-decoration:underline}code a:hover{color:#95cef8}.header-container{width:100%;height:300px;max-height:300px;overflow:hidden;background-size:cover;background-image:url(data:image/webp;base64,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);background-position:0 35%}.header-container img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}.header-container{color:#fff}.header-container .header-content{position:relative;display:flex;max-width:960px;margin-left:auto;margin-right:auto;padding-left:50px;padding-right:50px;justify-content:center}.header-container .text{position:absolute;width:fit-content;font-size:40px;color:#d6b729;text-transform:uppercase;z-index:10}@media(max-width: 760px){.header-container .text{font-size:30px}}@media(max-width: 360px){.header-container .text{font-size:24px}}.main-container{display:flex;flex:1 0 auto}.main-content{display:flex;flex-direction:column;height:100%;max-width:960px;margin-left:auto;margin-right:auto;padding-left:50px;padding-right:50px}section:first-of-type{margin-top:20px}section .container{padding:20px 30px;background-color:#fff}table,td{border:0;border-spacing:0;border-collapse:collapse}table pre[class*=language-],td pre[class*=language-]{margin:0}table.image-preview td{vertical-align:top;padding:0}table.image-preview td:first-of-type{text-align:right}table.image-preview td:last-of-type{padding:0 0 0 10px}ul{margin:5px 0 0 0}.copyleft{font-size:18px;display:inline-block;transform:scaleX(-1)}.copyleft:before{content:"©"}.footer-container{margin-top:20px;padding:30px 50px;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-shrink:0;color:#b1c4d0;background-color:#15384f}.footer-container>:not(:first-child){margin-left:10px}.footer-container a{color:#b1c4d0;text-decoration:underline}.demo-image{width:200px;height:145px;background-image:url(../img/image.c120f84035c22949adbbf14dc02fa14e-200w.webp)} -/*# sourceMappingURL=main.070c6c08.css.map */ \ No newline at end of file +code[class*=language-],pre[class*=language-]{color:#ccc;background:0 0;font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}pre[class*=language-]{padding:5px 10px}pre[class*=language-],code[class*=language-]{font-size:13px;line-height:1.3}:not(pre)>code,:not(pre)>code[class*=language-]{padding:.1em .4em}body{margin:0;padding:0;font-family:Arial,sans-serif;line-height:1.3}a{color:#235e84;text-decoration:none}a.link{color:#1993ff}a:hover{text-decoration:underline}code a{color:#aaa;text-decoration:underline}code a:hover{color:#95cef8}.header-container{width:100%;height:300px;max-height:300px;overflow:hidden;background-size:cover;background-image:url(data:image/webp;base64,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);background-position:0 35%}.header-container img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}.header-container{color:#fff}.header-container .header-content{position:relative;display:flex;max-width:960px;margin-left:auto;margin-right:auto;padding-left:50px;padding-right:50px;justify-content:center}.header-container .text{position:absolute;width:fit-content;font-size:40px;color:#d6b729;text-transform:uppercase;z-index:10}@media(max-width: 760px){.header-container .text{font-size:30px}}@media(max-width: 360px){.header-container .text{font-size:24px}}.main-container{display:flex;flex:1 0 auto}.main-content{display:flex;flex-direction:column;height:100%;max-width:960px;margin-left:auto;margin-right:auto;padding-left:50px;padding-right:50px}section:first-of-type{margin-top:20px}section .container{padding:20px 30px;background-color:#fff}table,td{border:0;border-spacing:0;border-collapse:collapse}table pre[class*=language-],td pre[class*=language-]{margin:0}table.image-preview td{vertical-align:top;padding:0}table.image-preview td:first-of-type{text-align:right}table.image-preview td:last-of-type{padding:0 0 0 10px}ul{margin:5px 0 0 0}.copyleft{font-size:18px;display:inline-block;transform:scaleX(-1)}.copyleft:before{content:"©"}.footer-container{margin-top:20px;padding:30px 50px;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-shrink:0;color:#b1c4d0;background-color:#15384f}.footer-container>:not(:first-child){margin-left:10px}.footer-container a{color:#b1c4d0;text-decoration:underline}.demo-image{width:200px;height:145px;background-image:url(../img/image.783fdaa6-200w.webp)} +/*# sourceMappingURL=main.dfbc03b6.css.map*/ \ No newline at end of file diff --git a/docs/responsive-image/assets/css/main.dfbc03b6.css.map b/docs/responsive-image/assets/css/main.dfbc03b6.css.map new file mode 100644 index 00000000..90bcdc2e --- /dev/null +++ b/docs/responsive-image/assets/css/main.dfbc03b6.css.map @@ -0,0 +1 @@ +{"version":3,"file":"assets/css/main.dfbc03b6.css","mappings":"AAAA,6CCAA,0wCDgBA,gBACE,8CAEF,cAEE,gBACA,iDAGF,iBAEE,MAGF,QACE,UACA,6BACA,gBACA,GAGF,aACE,qBACA,QAEA,aACE,SAGF,yBACE,QAIJ,UACE,0BACA,cAEA,aACE,mBAKJ,UACE,aACA,iBACA,gBACA,sBACA,yDAGA,0BACA,uBAGA,UACE,YACA,iBACA,wBACA,mBAIJ,UACE,mCAEA,iBACE,aACA,gBA7EgB,iBA+EhB,kBACA,kBA/EgB,0CAkFhB,yBAGF,iBACE,kBACA,eACA,cACA,yBACA,WACA,0BAEA,wBARF,cASI,2BAEF,wBAXF,cAYI,kBAKN,YACE,cACA,eAGF,YACE,sBACA,YACA,gBA/GkB,iBAkHlB,kBACA,kBAlHkB,0CAwHlB,eA5HM,oBA+HN,iBACE,sBACA,UAIJ,QAEE,iBACA,yBACA,sDAEA,QACE,wBAKF,kBACE,UACA,sCAEF,gBACE,qCAEF,kBACE,IAIJ,gBACE,WAGF,cAIE,qBACA,qBACA,kBALA,WACE,mBAOJ,eA1KQ,kBA4KN,aACA,mBACA,uBACA,mBACA,cACA,cA1KkB,yBACF,sCA6KhB,gBAtLM,qBA0LN,aAlLkB,0BAoLhB,aAOJ,WACE,aACA,yDACA","sources":["webpack://responsive-image/./src/assets/styles/main.scss","webpack://responsive-image/./node_modules/prismjs/themes/prism-tomorrow.min.css"],"sourcesContent":["@use 'prismjs/themes/prism-tomorrow.min';\n\n// spacers\n$gap-s: 5px;\n$gap-m: 10px;\n$gap-l: 20px;\n\n// main content\n$content-max-width: 960px;\n$content-padding-x: 50px;\n\n// footer\n$footer-text-color: #b1c4d0;\n$footer-bg-color: #15384f;\n\n// override default styles of prismjs\npre[class*=\"language-\"] {\n padding: 5px 10px;\n}\npre[class*=\"language-\"],\ncode[class*=\"language-\"] {\n font-size: 13px;\n line-height: 1.3;\n}\n\n:not(pre) > code,\n:not(pre) > code[class*=\"language-\"] {\n padding: 0.1em 0.4em;\n}\n\nbody {\n margin: 0;\n padding: 0;\n font-family: Arial, sans-serif;\n line-height: 1.3;\n}\n\na {\n color: #235e84;\n text-decoration: none;\n\n &.link {\n color: #1993ff;\n }\n\n &:hover {\n text-decoration: underline;\n }\n}\n\ncode a {\n color: #aaa;\n text-decoration: underline;\n\n &:hover {\n color: #95cef8;\n }\n}\n\n// placeholder for responsive image in header\n.header-container {\n width: 100%;\n height: 300px;\n max-height: 300px;\n overflow: hidden;\n background-size: cover;\n // placeholder of responsive image\n // 2 ways to define placeholder: one is in Pug via style attribute, other is in CSS\n background-image: url('Images/abstract.webp?prop=placeholder&placeholder=true&placeholderSize=100');\n background-position: 0 35%;\n\n // responsive image\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: 50% 40%;\n }\n}\n\n.header-container {\n color: white;\n\n .header-content {\n position: relative;\n display: flex;\n max-width: $content-max-width;\n margin-left: auto;\n margin-right: auto;\n padding-left: $content-padding-x;\n padding-right: $content-padding-x;\n justify-content: center;\n }\n\n .text {\n position: absolute;\n width: fit-content;\n font-size: 40px;\n color: #d6b729;\n text-transform: uppercase;\n z-index: 10;\n\n @media (max-width: 760px) {\n font-size: 30px;\n }\n @media (max-width: 360px) {\n font-size: 24px;\n }\n }\n}\n\n.main-container {\n display: flex;\n flex: 1 0 auto;\n}\n\n.main-content {\n display: flex;\n flex-direction: column;\n height: 100%;\n //width: 100%;\n max-width: $content-max-width;\n margin-left: auto;\n margin-right: auto;\n padding-left: $content-padding-x;\n padding-right: $content-padding-x;\n}\n\nsection {\n &:first-of-type {\n margin-top: $gap-l;\n }\n .container {\n padding: $gap-l $gap-l * 1.5;\n background-color: #fff;\n }\n}\n\ntable,\ntd {\n border: 0;\n border-spacing: 0;\n border-collapse: collapse;\n\n pre[class*=\"language-\"] {\n margin: 0;\n }\n}\n\ntable.image-preview {\n td {\n vertical-align: top;\n padding: 0;\n }\n td:first-of-type {\n text-align: right;\n }\n td:last-of-type {\n padding: 0 0 0 10px;\n }\n}\n\nul {\n margin: 5px 0 0 0;\n}\n\n.copyleft {\n &:before {\n content: '\\00a9';\n }\n font-size: 18px;\n display: inline-block;\n transform: scaleX(-1);\n}\n\n.footer-container {\n margin-top: $gap-l;\n padding: 30px 50px;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n color: $footer-text-color;\n background-color: $footer-bg-color;\n\n > :not(:first-child) {\n margin-left: $gap-m;\n }\n\n a {\n color: $footer-text-color;\n text-decoration: underline;\n }\n}\n\n// styles for demo on page\n$width: 200;\n$height: 145;\n.demo-image {\n width: #{$width}px;\n height: #{$height}px;\n background-image: url('Images/image.webp?size=#{$width}');\n}\n","code[class*=language-],pre[class*=language-]{color:#ccc;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/responsive-image/assets/img/abstract.0f0137bf-800w.png b/docs/responsive-image/assets/img/abstract.0f0137bf-800w.png new file mode 100644 index 00000000..3c4d3531 Binary files /dev/null and b/docs/responsive-image/assets/img/abstract.0f0137bf-800w.png differ diff --git a/docs/responsive-image/assets/img/abstract.0f90d239db49ba1f223c430be9fc9522-1450w.png b/docs/responsive-image/assets/img/abstract.0f90d239db49ba1f223c430be9fc9522-1450w.png deleted file mode 100644 index 4056d1d0..00000000 Binary files a/docs/responsive-image/assets/img/abstract.0f90d239db49ba1f223c430be9fc9522-1450w.png and /dev/null differ diff --git a/docs/responsive-image/assets/img/abstract.2fd33a2d5638d5b89c225302b834cdc4-1024w.png b/docs/responsive-image/assets/img/abstract.2fd33a2d5638d5b89c225302b834cdc4-1024w.png deleted file mode 100644 index efc25aac..00000000 Binary files a/docs/responsive-image/assets/img/abstract.2fd33a2d5638d5b89c225302b834cdc4-1024w.png and /dev/null differ diff --git a/docs/responsive-image/assets/img/abstract.3d25a164f00b520596b181560f397692-800w.png b/docs/responsive-image/assets/img/abstract.3d25a164f00b520596b181560f397692-800w.png deleted file mode 100644 index 3d7d3329..00000000 Binary files a/docs/responsive-image/assets/img/abstract.3d25a164f00b520596b181560f397692-800w.png and /dev/null differ diff --git a/docs/responsive-image/assets/img/abstract.3fead7a9-640w.png b/docs/responsive-image/assets/img/abstract.3fead7a9-640w.png new file mode 100644 index 00000000..7e703b41 Binary files /dev/null and b/docs/responsive-image/assets/img/abstract.3fead7a9-640w.png differ diff --git a/docs/responsive-image/assets/img/abstract.488539fd-1920w.png b/docs/responsive-image/assets/img/abstract.488539fd-1920w.png new file mode 100644 index 00000000..e5daa1e7 Binary files /dev/null and b/docs/responsive-image/assets/img/abstract.488539fd-1920w.png differ diff --git a/docs/responsive-image/assets/img/abstract.4d85e4530eb3d0abdd9c867a95045e75-480w.png b/docs/responsive-image/assets/img/abstract.4d85e4530eb3d0abdd9c867a95045e75-480w.png deleted file mode 100644 index 5fc8de0d..00000000 Binary files a/docs/responsive-image/assets/img/abstract.4d85e4530eb3d0abdd9c867a95045e75-480w.png and /dev/null differ diff --git a/docs/responsive-image/assets/img/abstract.fa7483cc5c764887a287037976ef7384-1920w.webp b/docs/responsive-image/assets/img/abstract.7fa56b36-1920w.webp similarity index 100% rename from docs/responsive-image/assets/img/abstract.fa7483cc5c764887a287037976ef7384-1920w.webp rename to docs/responsive-image/assets/img/abstract.7fa56b36-1920w.webp diff --git a/docs/responsive-image/assets/img/abstract.9a1f48b35ea09798b0184472a3fdb265-640w.png b/docs/responsive-image/assets/img/abstract.9a1f48b35ea09798b0184472a3fdb265-640w.png deleted file mode 100644 index a40c574d..00000000 Binary files a/docs/responsive-image/assets/img/abstract.9a1f48b35ea09798b0184472a3fdb265-640w.png and /dev/null differ diff --git a/docs/responsive-image/assets/img/abstract.bf1ac12c-1024w.png b/docs/responsive-image/assets/img/abstract.bf1ac12c-1024w.png new file mode 100644 index 00000000..f1afa83b Binary files /dev/null and b/docs/responsive-image/assets/img/abstract.bf1ac12c-1024w.png differ diff --git a/docs/responsive-image/assets/img/abstract.c0524103-480w.png b/docs/responsive-image/assets/img/abstract.c0524103-480w.png new file mode 100644 index 00000000..95d477da Binary files /dev/null and b/docs/responsive-image/assets/img/abstract.c0524103-480w.png differ diff --git a/docs/responsive-image/assets/img/abstract.d3b8da174e1bff9e6a701d66ee618bbd-1920w.png b/docs/responsive-image/assets/img/abstract.d3b8da174e1bff9e6a701d66ee618bbd-1920w.png deleted file mode 100644 index eb299404..00000000 Binary files a/docs/responsive-image/assets/img/abstract.d3b8da174e1bff9e6a701d66ee618bbd-1920w.png and /dev/null differ diff --git a/docs/responsive-image/assets/img/abstract.e16308e9-1450w.png b/docs/responsive-image/assets/img/abstract.e16308e9-1450w.png new file mode 100644 index 00000000..2ff1921b Binary files /dev/null and b/docs/responsive-image/assets/img/abstract.e16308e9-1450w.png differ diff --git a/docs/responsive-image/assets/img/favicon.a55b042b-64w.png b/docs/responsive-image/assets/img/favicon.a55b042b-64w.png new file mode 100644 index 00000000..b123f649 Binary files /dev/null and b/docs/responsive-image/assets/img/favicon.a55b042b-64w.png differ diff --git a/docs/responsive-image/assets/img/favicon.aa8599af084ede86a90d1733e9947111-64w.png b/docs/responsive-image/assets/img/favicon.aa8599af084ede86a90d1733e9947111-64w.png deleted file mode 100644 index 25814e33..00000000 Binary files a/docs/responsive-image/assets/img/favicon.aa8599af084ede86a90d1733e9947111-64w.png and /dev/null differ diff --git a/docs/responsive-image/assets/img/image.a1a8bc363980a818d9ad284742ee41bb-100w.webp b/docs/responsive-image/assets/img/image.1e7c25d0-100w.webp similarity index 100% rename from docs/responsive-image/assets/img/image.a1a8bc363980a818d9ad284742ee41bb-100w.webp rename to docs/responsive-image/assets/img/image.1e7c25d0-100w.webp diff --git a/docs/responsive-image/assets/img/image.c120f84035c22949adbbf14dc02fa14e-200w.webp b/docs/responsive-image/assets/img/image.783fdaa6-200w.webp similarity index 100% rename from docs/responsive-image/assets/img/image.c120f84035c22949adbbf14dc02fa14e-200w.webp rename to docs/responsive-image/assets/img/image.783fdaa6-200w.webp diff --git a/docs/responsive-image/assets/img/image.7da7231faa97de0636d1cd3dc4d12c22-140w.jpg b/docs/responsive-image/assets/img/image.be705e13-140w.jpg similarity index 100% rename from docs/responsive-image/assets/img/image.7da7231faa97de0636d1cd3dc4d12c22-140w.jpg rename to docs/responsive-image/assets/img/image.be705e13-140w.jpg diff --git a/docs/responsive-image/assets/img/image.c356e00b-120w.png b/docs/responsive-image/assets/img/image.c356e00b-120w.png new file mode 100644 index 00000000..0a9c82d4 Binary files /dev/null and b/docs/responsive-image/assets/img/image.c356e00b-120w.png differ diff --git a/docs/responsive-image/assets/img/image.c53ee3baf6b2e4a34f5c507083d372e9-120w.png b/docs/responsive-image/assets/img/image.c53ee3baf6b2e4a34f5c507083d372e9-120w.png deleted file mode 100644 index 3eee15b4..00000000 Binary files a/docs/responsive-image/assets/img/image.c53ee3baf6b2e4a34f5c507083d372e9-120w.png and /dev/null differ diff --git a/docs/responsive-image/index.html b/docs/responsive-image/index.html index 4db575aa..e05f13e3 100644 --- a/docs/responsive-image/index.html +++ b/docs/responsive-image/index.html @@ -1,9 +1,9 @@ -Responsive image

Responsive image

responsive image

How to use responsive images with Pug

For responsive images is recommended to use the responsive-loader. +Responsive image

Responsive image

responsive image

How to use responsive images with Pug

For responsive images is recommended to use the responsive-loader. This is a very fast, high-quality and powerful module.

Setup

Firstly, install and configure the pug-plugin, then install modules:

npm install responsive-loader sharp --save-dev

Add to Webpack module rules the following configuration:

{
-  test: /.(gif|png|jpe?g|svg|webp)$/i,
+  test: /\.(gif|png|jpe?g|svg|webp)$/i,
   type: 'asset/resource',
   use: {
     loader: 'responsive-loader',
@@ -13,12 +13,12 @@
     },
   },
 },
-
Note:
  • the type must be defined as asset/resource
  • in responsible-loader version >= 3.0.4 the default adapter is sharp
  • define in the name option both public path and output filename

Usage of image with fixed size

Defaults, an image without queries will stay in its original size and format.

To resize an single image use the size query parameter:

img(src=require('./image.jpg?size=200'))
-

To convert an image in other format, e.g. webp, use the format query parameter:

img(src=require('./image.jpg?size=200&format=webp'))
+
Note:
  • the type must be defined as asset/resource
  • in responsible-loader version >= 3.0.4 the default adapter is sharp
  • define in the name option both public path and output filename

Usage of image with fixed size

Defaults, an image without queries will stay in its original size and format.

To resize an single image use the size query parameter:

img(src='./image.jpg?size=200')
+

To convert an image in other format, e.g. webp, use the format query parameter:

img(src='./image.jpg?size=200&format=webp')

Usage of the image in SCSS as the background-image:

.image {
   background-image: url('./image.jpg?size=200');
 }
-

Examples

fix image
img(src=require('./image.webp?size=100'))
fix image
img(src=require('./image.webp?size=120&format=png'))
fix image
img(src=require('./image.webp?size=140&format=jpg'))
// scss
+

Examples

fix image
img(src='./image.webp?size=100')
fix image
img(src='./image.webp?size=120&format=png')
fix image
img(src='./image.webp?size=140&format=jpg')
// scss
 $width: 200;
 $height: 145;
 .demo-image {
@@ -74,10 +74,8 @@
 - const width = 200
 - const height = require("./image.jpg?prop=height&emitFile=false&size=" + width)
 .box(style=`background-image: url(${placeholder}); width:${width}px; height:${height}px; background-size:cover;`)
-
Note: Don't use require() directly in the style property, the image file will not be resolved.

The generated HTML:
<div
-  class="box"
-  style="background-image: url(data:image/jpeg;base64,...); width:200px; height:110px; background-size:cover;">
-</div>
+
Note: Don't use require() directly in the style property, the image file will not be resolved.

The generated HTML:
<div class="box"
+     style="background-image: url(data:image/jpeg;base64,...); width:200px; height:110px; background-size:cover;">

What you see in the browser:

Extract property

To extract any single property from the responsible-loader processing result, use the prop=PROP_NAME query parameter.
Supported properties: srcSet src width height and placeholder.
For example: @@ -85,7 +83,10 @@ p src webp: #{require("./image.jpg?prop=src&format=webp&size=200")} p placeholder: #{require("./image.jpg?prop=placeholder&emitFile=false&placeholder=true&placeholderSize=50")} p width of original image size: #{require("./image.jpg?prop=width&emitFile=false")} -p height of resised image: #{require("./image.jpg?prop=height&size=200")}
Copyleft 2022 @webdiscus. +p height of resised image: #{require("./image.jpg?prop=height&size=200")} +

Notes

  • To resolve a source image file in the src attribute of the img tag is not need to use the require() function:
    img(src='./image.jpg?size=200')
+
  • Use the require() function only to resolve a source file in a Pug code or in text:
    - const imageSrc = require('./image.jpg?size=640')
+img(src=imageSrc)
Copyleft 2024 @webdiscus. Powered by Pug Plugin and Responsive Loader.
\ No newline at end of file diff --git a/examples/hello-world/package.json b/examples/hello-world/package.json index 7a47c901..012ccd02 100644 --- a/examples/hello-world/package.json +++ b/examples/hello-world/package.json @@ -12,7 +12,7 @@ "css-loader": "^6.10.0", "http-server": "^14.1.1", "prismjs": "^1.29.0", - "pug-plugin": "^4.9.9", + "pug-plugin": "^5.0.0", "sass": "^1.71.1", "sass-loader": "^14.1.1", "webpack": "^5.90.3", diff --git a/examples/hello-world/src/assets/styles/base/_icons.scss b/examples/hello-world/src/assets/styles/base/_icons.scss index 4cfb50ce..50054ce3 100644 --- a/examples/hello-world/src/assets/styles/base/_icons.scss +++ b/examples/hello-world/src/assets/styles/base/_icons.scss @@ -1,8 +1,8 @@ @font-face { font-family: 'GlyphIcons'; src: - url('Fonts/icons/GlyphIcons/glyphicons-halflings-regular.svg') format('svg'), - url('Fonts/icons/GlyphIcons/glyphicons-halflings-regular.woff2') format('woff2'); + url('@fonts/icons/GlyphIcons/glyphicons-halflings-regular.svg') format('svg'), + url('@fonts/icons/GlyphIcons/glyphicons-halflings-regular.woff2') format('woff2'); font-style: normal; } @@ -44,75 +44,75 @@ // icons with size < 4 KB as data-URL .webicon-mac-svg { - background-image: url('Images/icons/webicons/webicon-mac.svg'); + background-image: url('@images/icons/webicons/webicon-mac.svg'); } .webicon-mac-png { - background-image: url('Images/icons/webicons/webicon-mac.png'); + background-image: url('@images/icons/webicons/webicon-mac.png'); } .webicon-apple-svg { - background-image: url('Images/icons/webicons/webicon-apple.svg'); + background-image: url('@images/icons/webicons/webicon-apple.svg'); } .webicon-apple-png { - background-image: url('Images/icons/webicons/webicon-apple.png'); + background-image: url('@images/icons/webicons/webicon-apple.png'); } .webicon-android { - background-image: url('Images/icons/webicons/webicon-android.svg'); + background-image: url('@images/icons/webicons/webicon-android.svg'); } .webicon-windows { - background-image: url('Images/icons/webicons/webicon-windows.svg'); + background-image: url('@images/icons/webicons/webicon-windows.svg'); } .webicon-facebook { - background-image: url('Images/icons/webicons/webicon-facebook.svg'); + background-image: url('@images/icons/webicons/webicon-facebook.svg'); } .webicon-twitter { - background-image: url('Images/icons/webicons/webicon-twitter.svg'); + background-image: url('@images/icons/webicons/webicon-twitter.svg'); } .webicon-dropbox { - background-image: url('Images/icons/webicons/webicon-dropbox.svg'); + background-image: url('@images/icons/webicons/webicon-dropbox.svg'); } .webicon-github { - background-image: url('Images/icons/webicons/webicon-github.svg'); + background-image: url('@images/icons/webicons/webicon-github.svg'); } .webicon-html5 { - background-image: url('Images/icons/webicons/webicon-html5.svg'); + background-image: url('@images/icons/webicons/webicon-html5.svg'); } .webicon-skitch { - background-image: url('Images/icons/webicons/webicon-skitch.svg'); + background-image: url('@images/icons/webicons/webicon-skitch.svg'); } // icons with size > 4 KB as file .webicon-google { - background-image: url('Images/icons/webicons/webicon-google.svg'); + background-image: url('@images/icons/webicons/webicon-google.svg'); } .webicon-evernote { - background-image: url('Images/icons/webicons/webicon-evernote.svg'); + background-image: url('@images/icons/webicons/webicon-evernote.svg'); } .webicon-yahoo { - background-image: url('Images/icons/webicons/webicon-yahoo.svg'); + background-image: url('@images/icons/webicons/webicon-yahoo.svg'); } .webicon-picasa { - background-image: url('Images/icons/webicons/webicon-picasa.svg'); + background-image: url('@images/icons/webicons/webicon-picasa.svg'); } .webicon-reddit { - background-image: url('Images/icons/webicons/webicon-reddit.svg'); + background-image: url('@images/icons/webicons/webicon-reddit.svg'); } .webicon-f500px { - background-image: url('Images/icons/webicons/webicon-f500px.svg'); + background-image: url('@images/icons/webicons/webicon-f500px.svg'); } diff --git a/examples/hello-world/src/assets/styles/base/_typography.scss b/examples/hello-world/src/assets/styles/base/_typography.scss index 0f17d492..f0c569f1 100644 --- a/examples/hello-world/src/assets/styles/base/_typography.scss +++ b/examples/hello-world/src/assets/styles/base/_typography.scss @@ -1,8 +1,8 @@ @font-face { font-family: 'OpenSans'; src: - url('Fonts/OpenSans/open-sans-regular.svg') format('svg'), - url('Fonts/OpenSans/open-sans-regular.woff2') format('woff2'); + url('@fonts/OpenSans/open-sans-regular.svg') format('svg'), + url('@fonts/OpenSans/open-sans-regular.woff2') format('woff2'); font-style: normal; } diff --git a/examples/hello-world/src/assets/styles/inline-style.scss b/examples/hello-world/src/assets/styles/inline-style.scss new file mode 100644 index 00000000..a95f6748 --- /dev/null +++ b/examples/hello-world/src/assets/styles/inline-style.scss @@ -0,0 +1,5 @@ +$fontSize: 28px; + +h1 { + font-size: $fontSize; +} diff --git a/examples/hello-world/src/assets/styles/inline-styles.scss b/examples/hello-world/src/assets/styles/inline-styles.scss deleted file mode 100644 index 0d20906b..00000000 --- a/examples/hello-world/src/assets/styles/inline-styles.scss +++ /dev/null @@ -1,5 +0,0 @@ -$color: crimson; - -h1 { - color: $color; -} diff --git a/examples/hello-world/src/views/layouts/default.pug b/examples/hello-world/src/views/layouts/default.pug index fc2c6cb7..2bd57c3e 100644 --- a/examples/hello-world/src/views/layouts/default.pug +++ b/examples/hello-world/src/views/layouts/default.pug @@ -13,35 +13,35 @@ html(lang='en' dir='ltr') meta(property='description' content='Hello world') //- Favicons - link(rel='icon' href=require('Images/favicons/favicon.svg') type='image/svg+xml' sizes='any') - link(rel='icon' href=require('Images/favicons/favicon-32px.png') type='image/png' sizes='32x32') + link(href='@images/favicons/favicon.svg' rel='icon' type='image/svg+xml' sizes='any') + link(href='@images/favicons/favicon-32px.png' rel='icon' type='image/png' sizes='32x32') //- Page title title= title //- Page styles block style - //- common used styles - link(rel='stylesheet' href=require('Styles/base/main.scss')) + //- Common styles + link(href='@styles/base/main.scss' rel='stylesheet') //- Additional head block, e.g. for preload scripts in head block head - script(src=require('Scripts/common.js') defer) + script(src='@scripts/common.js' defer) - // Demo how to inline CSS - style=require('Styles/inline-styles.scss?inline') + // Demo how to inline single CSS file using the `?inline` query + link(href='@styles/inline-style.scss?inline' rel='stylesheet') body //- Main header .header-container .header-content a(href="index.html").header-left - img.app-logo(src=require('Images/app-logo.svg')) + img.app-logo(src='@images/app-logo.svg') span App demo .header-middle - a(href="index.html") Home - a(href="contact.html") Contact - a(href="about.html") About + a(href="/index.html") Home + a(href="/contact/index.html") Contact + a(href="/about/index.html") About .header-right span.glyphicon.glyphicon-user.mr-m span Login diff --git a/examples/hello-world/src/views/pages/about/index.pug b/examples/hello-world/src/views/pages/about/index.pug index 47449714..4695feb9 100644 --- a/examples/hello-world/src/views/pages/about/index.pug +++ b/examples/hello-world/src/views/pages/about/index.pug @@ -1,4 +1,4 @@ -extends Views/layouts/default.pug +extends @views/layouts/default.pug //- set variables used in layout block variables @@ -6,15 +6,15 @@ block variables //- add page specifically styles append style - link(href=require('./styles.scss') rel='stylesheet') + link(href='./style.scss' rel='stylesheet') //- add page specifically scripts append script - script(src=require('./main.js') defer='') + script(src='./main.js' defer='') block content section .container.flex-column.center-x h1 About .teaser The pug-plugin makes using Pug very easy. Please see details on GitHub. - img.about-logo(src=require('Images/about-logo.png')) + img.about-logo(src='@images/about-logo.png') diff --git a/examples/hello-world/src/views/pages/about/styles.scss b/examples/hello-world/src/views/pages/about/style.scss similarity index 62% rename from examples/hello-world/src/views/pages/about/styles.scss rename to examples/hello-world/src/views/pages/about/style.scss index 29f27969..ddcf80f2 100644 --- a/examples/hello-world/src/views/pages/about/styles.scss +++ b/examples/hello-world/src/views/pages/about/style.scss @@ -1,5 +1,5 @@ h1 { - color: #000; + color: mediumseagreen; } .about-logo { diff --git a/examples/hello-world/src/views/pages/contact/index.pug b/examples/hello-world/src/views/pages/contact/index.pug index d29c4f4b..0442b8c7 100644 --- a/examples/hello-world/src/views/pages/contact/index.pug +++ b/examples/hello-world/src/views/pages/contact/index.pug @@ -1,4 +1,4 @@ -extends Views/layouts/default.pug +extends @views/layouts/default.pug //- set variables used in layout block variables @@ -6,15 +6,15 @@ block variables //- add page specifically styles append style - link(href=require('./styles.scss') rel='stylesheet') + link(href='./style.scss' rel='stylesheet') //- add page specifically scripts append script - script(src=require('./main.js') defer='') + script(src='./main.js' defer='') block content section .container.flex-column.center-x h1 Contact .teaser Ask how we can help you on GitHub. - img.contact-logo(src=require('Images/contact-logo.png')) + img.contact-logo(src='@images/contact-logo.png') diff --git a/examples/hello-world/src/views/pages/contact/styles.scss b/examples/hello-world/src/views/pages/contact/style.scss similarity index 100% rename from examples/hello-world/src/views/pages/contact/styles.scss rename to examples/hello-world/src/views/pages/contact/style.scss diff --git a/examples/hello-world/src/views/pages/home/styles.scss b/examples/hello-world/src/views/pages/home/style.scss similarity index 93% rename from examples/hello-world/src/views/pages/home/styles.scss rename to examples/hello-world/src/views/pages/home/style.scss index 195fd9eb..1ed7e7d5 100644 --- a/examples/hello-world/src/views/pages/home/styles.scss +++ b/examples/hello-world/src/views/pages/home/style.scss @@ -1,4 +1,4 @@ -@use 'Styles/modules/highlight'; +@use '@styles/modules/highlight'; // page styles h1 { diff --git a/examples/hello-world/src/views/pages/home/index.pug b/examples/hello-world/src/views/pages/index.pug similarity index 74% rename from examples/hello-world/src/views/pages/home/index.pug rename to examples/hello-world/src/views/pages/index.pug index ff651798..d05e6ae4 100644 --- a/examples/hello-world/src/views/pages/home/index.pug +++ b/examples/hello-world/src/views/pages/index.pug @@ -1,4 +1,4 @@ -extends Views/layouts/default.pug +extends @views/layouts/default.pug //- set variables used in layout block variables @@ -6,49 +6,49 @@ block variables //- add page specifically styles append style - link(href=require('./styles.scss') rel='stylesheet') + link(href='./home/style.scss' rel='stylesheet') //- add page specifically scripts append script - script(src=require('./main.js') defer) + script(src='./home/main.js' defer) block content section .container.flex-column.center-x - h1 Hello Pug World! + h1 Hello World! .teaser. Very simple web app to demonstrate how to easy include resources in Pug, using the pug-plugin. //- override original attribute `viewBox` for inline SVG to reduce padding top/bottom in SVG - img.pug-logo(src=require('Images/pug-logo.svg?inline') viewBox='0 25 128 80') + img.pug-logo(src='@images/pug-logo.svg?inline' viewBox='0 25 128 80') section .container .flex-row.fit-max - img.image-size(src=require('Images/delphin.jpeg')) - div Use a source file of an image in Pug: + img.image-size(src='@images/delphin.jpeg') + div Use an image source file in Pug with the #[:code() @images] webpack alias: pre.language-pug: code :highlight(pug) - img(src=require('Images/delphin.jpeg')) + img(src='@images/delphin.jpeg') div Generated HTML: pre.language-html: code :highlight(html) - + section .container .flex-row.fit-max span.glyphicon.glyphicon-picture.iconfont-image-size - div Use a source file of a font or background image in SCSS: + div Use a font source file or background image in SCSS: pre.language-css: code :highlight(css) @font-face { font-family: 'GlyphIcons'; - src: url('Fonts/GlyphIcons/glyphicons-halflings-regular.woff2') format('woff2'); + src: url('@fonts/GlyphIcons/glyphicons-halflings-regular.woff2') format('woff2'); } .header-bg { - background-image: url('Images/header-bg.png'); + background-image: url('@images/header-bg.png'); } div Generated CSS: @@ -56,20 +56,20 @@ block content :highlight(css) @font-face { font-family: 'GlyphIcons'; - src: url(/assets/fonts/glyphicons-halflings-regular.woff2) format("woff2"); + src: url(assets/fonts/glyphicons-halflings-regular.woff2) format("woff2"); } .header-bg { - background-image: url(/assets/img/header-bg.30f4f78b.png); + background-image: url(assets/img/header-bg.30f4f78b.png); } section .container .flex-row.fit-max - img.pug-logo.image-size(src=require('Images/icons/webpack.svg')) + img.pug-logo.image-size(src='@images/icons/webpack.svg') div Supports the inline SVG in HTML.
Pug: pre.language-pug: code :highlight(pug) - img.logo(src=require('Images/webpack.svg')) + img.logo(src='@images/webpack.svg') div Generated HTML: pre.language-html: code @@ -90,11 +90,11 @@ block content .flex-row.fit-max div.image-size each icon in icons - img.icon(src=require('Images/icons/' + icon)) + img.icon(src='@images/icons/' + icon) div Supports the inline images as data-URL in HTML.
Pug: pre.language-pug: code :highlight(pug) - img(src=require('Images/icons/Premium.png')) + img(src='@images/icons/Premium.png') div Generated HTML: pre.language-html: code @@ -110,7 +110,7 @@ block content pre.language-css: code :highlight(css) .webicon-mac-svg { - background-image: url('Images/icons/webicons/webicon-mac.svg'); + background-image: url('@images/icons/webicons/webicon-mac.svg'); } div Generated CSS: @@ -129,7 +129,7 @@ block content pre.language-css: code :highlight(css) .webicon-apple-png { - background-image: url('Images/icons/webicons/webicon-apple.png'); + background-image: url('@images/icons/webicons/webicon-apple.png'); } div Generated CSS: @@ -141,7 +141,7 @@ block content section .container - .flex-row.center-x Icons as background image in CSS. + h2.flex-row.center-x Icons as background image in CSS .icon-bar.flex-row.center-x.center-y.mt-m //- icons with size < 4 KB as data-URL .webicon.webicon-mac-svg diff --git a/examples/hello-world/webpack.config.js b/examples/hello-world/webpack.config.js index fea05df6..d8070202 100644 --- a/examples/hello-world/webpack.config.js +++ b/examples/hello-world/webpack.config.js @@ -2,162 +2,130 @@ const path = require('path'); const PugPlugin = require('pug-plugin'); -//const PugPlugin = require('../../'); // for local development only -module.exports = (env, argv) => { - const isProd = argv.mode === 'production'; - - return { - mode: isProd ? 'production' : 'development', - devtool: isProd ? 'source-map' : 'inline-source-map', - //devtool: 'source-map', - stats: 'minimal', - - entry: { - // !!! ATTENTION !!! - // - // The pug-plugin enable to use script and style source files directly in Pug, so easy: - // - // link(href=require('./styles.scss') rel='stylesheet') - // script(src=require('./main.js')) - // - // Don't define styles and js files in entry. You can require source files of js and scss directly in Pug. - // Don't use `html-webpack-plugin` to render Pug files in HTML. Pug plugin do it directly from here and much faster. - // Don't use `mini-css-extract-plugin` to extract CSS from styles. Pug plugin extract CSS from style sources required in Pug. - - // Please, see more details under https://github.com/webdiscus/pug-plugin - - // Yes, You can define Pug files directly in entry, so easy: - index: 'src/views/pages/home/index.pug', - contact: 'src/views/pages/contact/index.pug', - about: 'src/views/pages/about/index.pug', +module.exports = { + mode: 'production', + devtool: 'source-map', + stats: 'minimal', + + output: { + path: path.join(__dirname, 'dist'), + clean: true, + }, + + resolve: { + alias: { + // use Webpack aliases instead of relative paths like `../../` + '@views': path.join(__dirname, 'src/views/'), + '@images': path.join(__dirname, 'src/assets/images/'), + '@fonts': path.join(__dirname, 'src/assets/fonts/'), + '@styles': path.join(__dirname, 'src/assets/styles/'), + '@scripts': path.join(__dirname, 'src/assets/scripts/'), }, - - output: { - path: path.join(__dirname, 'dist'), - publicPath: 'auto', - clean: true, - }, - - resolve: { - alias: { - Views: path.join(__dirname, 'src/views/'), - Images: path.join(__dirname, 'src/assets/images/'), - Fonts: path.join(__dirname, 'src/assets/fonts/'), - Styles: path.join(__dirname, 'src/assets/styles/'), - Scripts: path.join(__dirname, 'src/assets/scripts/'), + }, + + plugins: [ + new PugPlugin({ + // auto precessing all Pug templates in the directory + entry: 'src/views/pages/', + // OR you can define the templates manually + // entry: { + // index: 'src/views/pages/index.pug', // => dist/index.html + // 'contact/index': 'src/views/pages/contact/index.pug', // => dist/contact/index.html + // 'about/index': 'src/views/pages/about/index.pug', // => dist/about/index.html + // }, + js: { + // JS output filename + filename: 'assets/js/[name].[contenthash:8].js', }, - }, - - plugins: [ - // enable processing of Pug files from entry - new PugPlugin({ - //verbose: !isProd, // output information about the process to console - pretty: !isProd, // formatting of HTML - js: { - // output name of a generated JS file - filename: 'assets/js/[name].[contenthash:8].js', - }, - css: { - // output filename of styles - filename: 'assets/css/[name].[contenthash:8].css', - }, - }), - ], - - module: { - rules: [ - { - test: /\.pug$/, - loader: PugPlugin.loader, - options: { - // enable filters only those used in pug - embedFilters: { - // :escape - escape: true, - // :code - code: { - className: 'language-', - }, - // :highlight - highlight: { - verbose: !isProd, - use: 'prismjs', // name of a highlighting npm package, must be extra installed - }, - }, - }, - }, - - // styles - { - test: /\.(css|sass|scss)$/, - use: ['css-loader', 'sass-loader'], - }, - - // fonts - { - test: /\.(woff2?|ttf|otf|eot|svg)$/, - type: 'asset/resource', - include: /assets[\\/]fonts/, // fonts from `assets/fonts` directory only, match posix and win paths - generator: { - // output filename of fonts - filename: 'assets/fonts/[name][ext][query]', + css: { + // CSS output filename + filename: 'assets/css/[name].[contenthash:8].css', + }, + // Pug preprocessor options + preprocessorOptions: { + // enable filters only those used in pug + embedFilters: { + // :escape + escape: true, + // :code + code: { + className: 'language-', }, - }, - - // images - { - test: /\.(png|svg|jpe?g|webp)$/i, - resourceQuery: { not: [/inline/] }, // ignore images with `?inline` query - type: 'asset/resource', - include: /assets[\\/]images/, // images from `assets/images` directory only, match posix and win paths - generator: { - // output filename of images - filename: 'assets/img/[name].[hash:8][ext]', + // :highlight + highlight: { + use: 'prismjs', // name of a highlighting npm package, must be extra installed }, }, - - // inline images: png or svg icons with size < 4 KB - { - test: /\.(png|svg)$/i, - type: 'asset', - include: /assets[\\/]images/, - exclude: /favicon/, // don't inline favicon - parser: { - dataUrlCondition: { - maxSize: 4 * 1024, - }, - }, + }, + verbose: 'auto', // output to console the information about the processing + }), + ], + + module: { + rules: [ + { + test: /\.(s?css|sass)$/, + use: ['css-loader', 'sass-loader'], + }, + { + test: /\.(woff2?|ttf|otf|eot|svg)$/, + type: 'asset/resource', + include: /assets[\\/]fonts/, // fonts from `assets/fonts` directory only, match posix and win paths + generator: { + // output filename of fonts + filename: 'assets/fonts/[name][ext][query]', }, - - // force inline svg file containing `?inline` query - { - test: /\.(svg)$/i, - resourceQuery: /inline/, - type: 'asset/inline', + }, + { + test: /\.(png|svg|jpe?g|webp)$/i, + resourceQuery: { not: [/inline/] }, // ignore images with `?inline` query + type: 'asset/resource', + include: /assets[\\/]images/, // images from `assets/images` directory only, match posix and win paths + generator: { + // output filename of images + filename: 'assets/img/[name].[hash:8][ext]', }, - ], - }, - - performance: { - hints: isProd ? 'error' : 'warning', - // in development mode the size of assets is bigger than in production - maxEntrypointSize: isProd ? 1024000 : 4096000, - maxAssetSize: isProd ? 1024000 : 4096000, - }, - - devServer: { - static: { - directory: path.join(__dirname, 'dist'), }, - compress: true, - open: true, // open in default browser - watchFiles: { - paths: ['src/**/*.*'], - options: { - usePolling: true, + // inline images: png or svg icons with size < 4 KB + { + test: /\.(png|svg)$/i, + type: 'asset', + include: /assets[\\/]images/, + exclude: /favicon/, // don't inline favicon + parser: { + dataUrlCondition: { + maxSize: 4 * 1024, + }, }, }, + // force inline svg file containing `?inline` query + { + test: /\.(svg)$/i, + resourceQuery: /inline/, + type: 'asset/inline', + }, + ], + }, + + // performance: { + // hints: isProd ? 'error' : 'warning', + // // in development mode the size of assets is bigger than in production + // maxEntrypointSize: isProd ? 1024000 : 4096000, + // maxAssetSize: isProd ? 1024000 : 4096000, + // }, + + devServer: { + static: { + directory: path.join(__dirname, 'dist'), + }, + compress: true, + open: true, // open in default browser + watchFiles: { + paths: ['src/**/*.*'], + options: { + usePolling: true, + }, }, - }; + }, }; diff --git a/examples/multi-language-i18next/package.json b/examples/multi-language-i18next/package.json index 329a725f..9254be14 100644 --- a/examples/multi-language-i18next/package.json +++ b/examples/multi-language-i18next/package.json @@ -13,7 +13,7 @@ "http-server": "^14.1.1", "i18next": "^21.10.0", "prismjs": "^1.29.0", - "pug-plugin": "^4.9.9", + "pug-plugin": "^5.0.0", "sass": "^1.71.1", "sass-loader": "^14.1.1", "webpack": "^5.90.3", diff --git a/examples/multi-language-i18next/src/views/layouts/default.pug b/examples/multi-language-i18next/src/views/layouts/default.pug index fd431474..f478857e 100644 --- a/examples/multi-language-i18next/src/views/layouts/default.pug +++ b/examples/multi-language-i18next/src/views/layouts/default.pug @@ -19,16 +19,16 @@ html(lang='en' dir='ltr') title= title //- Favicons - link(rel='icon' href=require('Images/favicons/favicon.svg') type='image/svg+xml' sizes='any') + link(rel='icon' href='@images/favicons/favicon.svg' type='image/svg+xml' sizes='any') //- Page styles block style //- common used styles - link(rel='stylesheet' href=require('Styles/main.scss')) + link(href='@styles/main.scss' rel='stylesheet') //- Additional head block, e.g. for preload scripts in head block head - script(src=require('Scripts/common.js') defer) + script(src='@scripts/common.js' defer) body //- Main header diff --git a/examples/multi-language-i18next/src/views/pages/about/index.pug b/examples/multi-language-i18next/src/views/pages/about/index.pug index 0e58748e..4636395e 100644 --- a/examples/multi-language-i18next/src/views/pages/about/index.pug +++ b/examples/multi-language-i18next/src/views/pages/about/index.pug @@ -1,4 +1,4 @@ -extends Views/layouts/default.pug +extends @views/layouts/default.pug //- set variables used in layout block variables @@ -8,11 +8,11 @@ block variables //- add page specifically styles append style - link(href=require('./styles.scss') rel='stylesheet') + link(href='./styles.scss' rel='stylesheet') //- add page specifically scripts append script - script(src=require('./main.js') defer='') + script(src='./main.js' defer='') block content section diff --git a/examples/multi-language-i18next/src/views/pages/home/index.pug b/examples/multi-language-i18next/src/views/pages/home/index.pug index 1a7b161e..c01162ea 100644 --- a/examples/multi-language-i18next/src/views/pages/home/index.pug +++ b/examples/multi-language-i18next/src/views/pages/home/index.pug @@ -1,4 +1,4 @@ -extends Views/layouts/default.pug +extends @views/layouts/default.pug //- set variables used in layout block variables @@ -8,11 +8,11 @@ block variables //- add page specifically styles append style - link(href=require('./styles.scss') rel='stylesheet') + link(href='./styles.scss' rel='stylesheet') //- add page specifically scripts append script - script(src=require('./main.js') defer='') + script(src='./main.js' defer='') block content section diff --git a/examples/multi-language-i18next/src/views/partials/locales.pug b/examples/multi-language-i18next/src/views/partials/locales.pug index 0d59e8bb..7df13a4d 100644 --- a/examples/multi-language-i18next/src/views/partials/locales.pug +++ b/examples/multi-language-i18next/src/views/partials/locales.pug @@ -13,8 +13,8 @@ fallbackLng: 'en', supportedLngs: ['de', 'en'], resources: { - en: { translation: require('Locales/en_US.json') }, - de: { translation: require('Locales/de_DE.json') }, + en: { translation: require('@locales/en_US.json') }, + de: { translation: require('@locales/de_DE.json') }, }, }); diff --git a/examples/multi-language-i18next/webpack.config.js b/examples/multi-language-i18next/webpack.config.js index cd1ac2ff..e49e49e4 100644 --- a/examples/multi-language-i18next/webpack.config.js +++ b/examples/multi-language-i18next/webpack.config.js @@ -9,98 +9,84 @@ const langPath = { de: 'de_DE/', }; -module.exports = (env, argv) => { - const isProd = argv.mode === 'production'; +module.exports = { + mode: 'production', + devtool: 'source-map', + stats: 'minimal', - return { - mode: isProd ? 'production' : 'development', - stats: 'minimal', + output: { + path: path.join(__dirname, 'dist'), + clean: true, + }, - entry: { - // default index page redirect to `en_US/index.html` - index: 'src/views/pages/index.pug', + entry: { + // default index page redirect to `en_US/index.html` + index: 'src/views/pages/index.pug', - // en pages, pass the variable `lang=en` into Pug via URL query - 'en_US/index': 'src/views/pages/home/index.pug?lang=en', - 'en_US/about': 'src/views/pages/about/index.pug?lang=en', + // en pages, pass the variable `lang=en` into Pug via URL query + 'en_US/index': 'src/views/pages/home/index.pug?lang=en', + 'en_US/about': 'src/views/pages/about/index.pug?lang=en', - // de pages, pass the variable `lang=de` into Pug via URL query - 'de_DE/index': 'src/views/pages/home/index.pug?lang=de', - 'de_DE/about': 'src/views/pages/about/index.pug?lang=de', - }, + // de pages, pass the variable `lang=de` into Pug via URL query + 'de_DE/index': 'src/views/pages/home/index.pug?lang=de', + 'de_DE/about': 'src/views/pages/about/index.pug?lang=de', + }, - output: { - path: path.join(__dirname, 'dist'), - publicPath: 'auto', - clean: true, + resolve: { + alias: { + // use Webpack aliases instead of relative paths like `../../` + '@views': path.join(__dirname, 'src/views/'), + '@images': path.join(__dirname, 'src/assets/images/'), + '@styles': path.join(__dirname, 'src/assets/styles/'), + '@scripts': path.join(__dirname, 'src/assets/scripts/'), + '@locales': path.join(__dirname, 'src/locales/'), }, + }, - resolve: { - alias: { - Images: path.join(__dirname, 'src/assets/images/'), - Views: path.join(__dirname, 'src/views/'), - Styles: path.join(__dirname, 'src/assets/styles/'), - Scripts: path.join(__dirname, 'src/assets/scripts/'), - Locales: path.join(__dirname, 'src/locales/'), + plugins: [ + new PugPlugin({ + js: { + // output name of a generated JS file + filename: 'assets/js/[name].[contenthash:8].js', }, - }, + css: { + // output filename of styles + filename: 'assets/css/[name].[contenthash:8].css', + }, + // pass global variables into all templates + data: { + langPath, + }, + }), + ], - plugins: [ - // enable processing of Pug files from entry - new PugPlugin({ - pretty: !isProd, // formatting of HTML - js: { - // output name of a generated JS file - filename: 'assets/js/[name].[contenthash:8].js', - }, - css: { - // output filename of styles - filename: 'assets/css/[name].[contenthash:8].css', + module: { + rules: [ + { + test: /\.(s?css|sass)$/, + use: ['css-loader', 'sass-loader'], + }, + { + test: /\.(png|svg|jpe?g|webp)$/i, + type: 'asset/resource', + generator: { + filename: 'assets/img/[name].[hash:8][ext]', }, - }), + }, ], + }, - module: { - rules: [ - { - test: /\.pug$/, - loader: PugPlugin.loader, - options: { - data: { - langPath, - }, - }, - }, - - // styles - { - test: /\.(css|sass|scss)$/, - use: ['css-loader', 'sass-loader'], - }, - - // images - { - test: /\.(png|svg|jpe?g|webp)$/i, - type: 'asset/resource', - generator: { - filename: 'assets/img/[name].[hash:8][ext]', - }, - }, - ], + devServer: { + static: { + directory: path.join(__dirname, 'dist'), }, - - devServer: { - static: { - directory: path.join(__dirname, 'dist'), - }, - compress: true, - open: 'en_US/index.html', - watchFiles: { - paths: ['src/**/*.*'], - options: { - usePolling: true, - }, + compress: true, + //open: 'en_US/index.html', + watchFiles: { + paths: ['src/**/*.*'], + options: { + usePolling: true, }, }, - }; + }, }; diff --git a/examples/responsive-image/package.json b/examples/responsive-image/package.json index 3060a948..6484e01d 100644 --- a/examples/responsive-image/package.json +++ b/examples/responsive-image/package.json @@ -13,7 +13,7 @@ "css-loader": "^6.10.0", "http-server": "^14.1.1", "prismjs": "^1.29.0", - "pug-plugin": "^4.9.9", + "pug-plugin": "^5.0.0", "responsive-loader": "^3.1.2", "sass": "^1.71.1", "sass-loader": "^14.1.1", diff --git a/examples/responsive-image/src/views/index.pug b/examples/responsive-image/src/views/index.pug index 5fae71b9..5b7d167e 100644 --- a/examples/responsive-image/src/views/index.pug +++ b/examples/responsive-image/src/views/index.pug @@ -19,7 +19,6 @@ block header placeholder: require('Images/abstract.webp?prop=placeholder&placeholder=true&placeholderSize=100') } - //-.header-container(style=`background-image: url(${responsiveImage.placeholder})`) .header-container .header-content h1.text Responsive image @@ -68,11 +67,11 @@ block body p To resize an single image use the #[:code size] query parameter: +code: :highlight(pug) - img(src=require('./image.jpg?size=200')) + img(src='./image.jpg?size=200') p To convert an image in other format, e.g. #[:code webp], use the #[:code format] query parameter: +code: :highlight(pug) - img(src=require('./image.jpg?size=200&format=webp')) + img(src='./image.jpg?size=200&format=webp') p Usage of the image in SCSS as the background-image: +code: :highlight(scss) @@ -84,14 +83,14 @@ block body table.image-preview tr - td: img(src=require('Images/image.webp?size=100') alt="fix image") - td: +code: :highlight(pug) img(src=require('./image.webp?size=100')) + td: img(src='Images/image.webp?size=100' alt="fix image") + td: +code: :highlight(pug) img(src='./image.webp?size=100') tr - td: img(src=require('Images/image.webp?size=120&format=png') alt="fix image") - td: +code: :highlight(pug) img(src=require('./image.webp?size=120&format=png')) + td: img(src='Images/image.webp?size=120&format=png' alt="fix image") + td: +code: :highlight(pug) img(src='./image.webp?size=120&format=png') tr - td: img(src=require('Images/image.webp?size=140&format=jpg') alt="fix image") - td: +code: :highlight(pug) img(src=require('./image.webp?size=140&format=jpg')) + td: img(src='Images/image.webp?size=140&format=jpg' alt="fix image") + td: +code: :highlight(pug) img(src='./image.webp?size=140&format=jpg') tr //- see the styles for this demo in `main.scss` @@ -199,10 +198,8 @@ block body p div The generated HTML: +code: :highlight(html) -
-
+
p div What you see in the browser: @@ -223,3 +220,17 @@ block body p placeholder: #{require("./image.jpg?prop=placeholder&emitFile=false&placeholder=true&placeholderSize=50")} p width of original image size: #{require("./image.jpg?prop=width&emitFile=false")} p height of resised image: #{require("./image.jpg?prop=height&size=200")} + + h3 Notes + + ul + li + div To resolve a source image file in the #[:code src] attribute of the #[:code img] tag is not need to use the #[:code require()] function: + +code: :highlight(pug) + img(src='./image.jpg?size=200') + + li + div Use the #[:code require()] function only to resolve a source file in a Pug code or in text: + +code: :highlight(pug) + - const imageSrc = require('./image.jpg?size=640') + img(src=imageSrc) diff --git a/examples/responsive-image/src/views/layouts/default.pug b/examples/responsive-image/src/views/layouts/default.pug index e663734f..96dc7af8 100644 --- a/examples/responsive-image/src/views/layouts/default.pug +++ b/examples/responsive-image/src/views/layouts/default.pug @@ -13,10 +13,10 @@ html(lang="en", dir="ltr") //- Page title title= title - link(rel="icon" type="image/png" sizes="64x64" href=require('Images/favicon.png?size=64')) + link(rel="icon" type="image/png" sizes="64x64" href='Images/favicon.png?size=64') block style - link(rel="stylesheet", href=require('Styles/main.scss')) + link(href='Styles/main.scss' rel="stylesheet") body //- page header @@ -36,4 +36,4 @@ html(lang="en", dir="ltr") //- scripts block script - script(src=require('Scripts/main.js')) + script(src='Scripts/main.js') diff --git a/examples/responsive-image/webpack.config.js b/examples/responsive-image/webpack.config.js index 7c506855..5f224959 100644 --- a/examples/responsive-image/webpack.config.js +++ b/examples/responsive-image/webpack.config.js @@ -2,108 +2,97 @@ const path = require('path'); const PugPlugin = require('pug-plugin'); -//const PugPlugin = require('../../'); // for local development only -module.exports = (env, argv) => { - const isProd = argv.mode === 'production'; +module.exports = { + mode: 'production', + devtool: 'source-map', + stats: 'minimal', - return { - mode: isProd ? 'production' : 'development', - devtool: isProd ? 'source-map' : 'inline-source-map', - stats: 'minimal', + output: { + path: path.resolve(__dirname, 'dist'), + clean: true, + }, - entry: { - index: path.resolve(__dirname, 'src/views/index.pug'), + resolve: { + alias: { + Views: path.join(__dirname, 'src/views/'), + Images: path.join(__dirname, 'src/assets/images/'), + Fonts: path.join(__dirname, 'src/assets/fonts/'), + Styles: path.join(__dirname, 'src/assets/styles/'), + Scripts: path.join(__dirname, 'src/assets/scripts/'), }, + }, - output: { - path: path.resolve(__dirname, 'dist'), - publicPath: 'auto', - clean: true, - }, - - resolve: { - alias: { - Views: path.join(__dirname, 'src/views/'), - Images: path.join(__dirname, 'src/assets/images/'), - Fonts: path.join(__dirname, 'src/assets/fonts/'), - Styles: path.join(__dirname, 'src/assets/styles/'), - Scripts: path.join(__dirname, 'src/assets/scripts/'), + plugins: [ + new PugPlugin({ + // define templates here + entry: { + index: 'src/views/index.pug', // => dist/index.html }, - }, - - plugins: [ - new PugPlugin({ - verbose: !isProd, - js: { - // output name of a generated JS file - filename: 'assets/js/[name].[contenthash:8].js', - }, - css: { - // output filename of styles - filename: 'assets/css/[name].[contenthash:8].css', - }, - }), - ], - - module: { - rules: [ - { - test: /\.(pug)$/, - loader: PugPlugin.loader, - options: { - // enable filters only those used in pug - embedFilters: { - // :escape - escape: true, - // :code - code: { - className: 'language-', - }, - // :highlight - highlight: { - verbose: !isProd, - use: 'prismjs', // name of a highlighting npm package, must be extra installed - }, - }, + js: { + // JS output filename + filename: 'assets/js/[name].[contenthash:8].js', + }, + css: { + // CSS output filename + filename: 'assets/css/[name].[contenthash:8].css', + }, + // Pug preprocessor options + preprocessorOptions: { + // enable filters only those used in pug + embedFilters: { + // :escape + escape: true, + // :code + code: { + className: 'language-', + }, + // :highlight + highlight: { + use: 'prismjs', // name of a highlighting npm package, must be extra installed }, }, + }, + verbose: 'auto', // output to console the information about the processing + }), + ], - { - test: /\.(css|sass|scss)$/, - use: ['css-loader', 'sass-loader'], - }, + module: { + rules: [ + { + test: /\.(s?css|sass)$/, + use: ['css-loader', 'sass-loader'], + }, - { - test: /\.(gif|png|jpe?g|ico|svg|webp)$/i, - type: 'asset/resource', - include: /assets[\\/]images/, // images from `assets/images` directory only, match posix and win paths - use: { - loader: 'responsive-loader', - options: { - // note: by version >= 3.0.4 default adapter is `sharp` - // output filename of images - name: 'assets/img/[name].[hash:8]-[width]w.[ext]', - //sizes: [320, 640, 960], // use the query `?sizes[]=320,sizes[]=640,sizes[]=960&format=webp` - //format: 'webp', // use the query `?format=webp` by images where is needed - }, + { + test: /\.(gif|png|jpe?g|ico|svg|webp)$/i, + type: 'asset/resource', + include: /assets[\\/]images/, // images from `assets/images` directory only, match posix and win paths + use: { + loader: 'responsive-loader', + options: { + // note: by version >= 3.0.4 default adapter is `sharp` + // output filename of images + name: 'assets/img/[name].[hash:8]-[width]w.[ext]', + //sizes: [320, 640, 960], // use the query `?sizes[]=320,sizes[]=640,sizes[]=960&format=webp` + //format: 'webp', // use the query `?format=webp` by images where is needed }, }, - ], - }, - - devServer: { - static: { - directory: path.join(__dirname, 'dist'), }, - compress: true, - open: true, // open in default browser - watchFiles: { - paths: ['src/**/*.*'], - options: { - usePolling: true, - }, + ], + }, + + devServer: { + static: { + directory: path.join(__dirname, 'dist'), + }, + compress: true, + open: true, // open in default browser + watchFiles: { + paths: ['src/**/*.*'], + options: { + usePolling: true, }, }, - }; + }, }; diff --git a/examples/simple-multipage/package.json b/examples/simple-multipage/package.json index e538a6c8..371b3200 100644 --- a/examples/simple-multipage/package.json +++ b/examples/simple-multipage/package.json @@ -11,7 +11,7 @@ "css-loader": "^6.10.0", "http-server": "^14.1.1", "prismjs": "^1.29.0", - "pug-plugin": "^4.9.9", + "pug-plugin": "^5.0.0", "sass": "^1.71.1", "sass-loader": "^14.1.1", "webpack": "^5.90.3", diff --git a/examples/simple-multipage/src/views/about/index.pug b/examples/simple-multipage/src/views/about/index.pug index c7a3a6af..f809d777 100644 --- a/examples/simple-multipage/src/views/about/index.pug +++ b/examples/simple-multipage/src/views/about/index.pug @@ -2,14 +2,14 @@ doctype html html head title About - link(rel='icon' href=require('Images/favicon.svg') type='image/svg+xml' sizes='any') - link(href=require('./styles.scss') rel='stylesheet') - script(src=require('./main.js') defer) + link(rel='icon' href='@images/favicon.svg' type='image/svg+xml' sizes='any') + link(href='./styles.scss' rel='stylesheet') + script(src='./main.js' defer) body h1 About div.nav - a(href="index.html") Home + a(href="/") Home span  |  - a(href="contact.html") Contact - img(src=require('Images/apple.png') alt="apple") + a(href="/contact/") Contact + img(src='@images/apple.png' alt="apple") diff --git a/examples/simple-multipage/src/views/contact/index.pug b/examples/simple-multipage/src/views/contact/index.pug index c4c82118..eb8915f7 100644 --- a/examples/simple-multipage/src/views/contact/index.pug +++ b/examples/simple-multipage/src/views/contact/index.pug @@ -2,14 +2,14 @@ doctype html html head title Contact - link(rel='icon' href=require('Images/favicon.svg') type='image/svg+xml' sizes='any') - link(href=require('./styles.scss') rel='stylesheet') - script(src=require('./main.js') defer) + link(rel='icon' href='@images/favicon.svg' type='image/svg+xml' sizes='any') + link(href='./styles.scss' rel='stylesheet') + script(src='./main.js' defer) body h1 Contact div.nav - a(href="index.html") Home + a(href="/") Home span  |  - a(href="about.html") About - img(src=require('Images/apple.png') alt="apple") + a(href="/about/") About + img(src='@images/apple.png' alt="apple") diff --git a/examples/simple-multipage/src/views/home/index.pug b/examples/simple-multipage/src/views/home/index.pug deleted file mode 100644 index c9c34ac1..00000000 --- a/examples/simple-multipage/src/views/home/index.pug +++ /dev/null @@ -1,15 +0,0 @@ -doctype html -html - head - title Home - link(rel='icon' href=require('Images/favicon.svg') type='image/svg+xml' sizes='any') - link(href=require('./styles.scss') rel='stylesheet') - script(src=require('./main.js') defer) - -body - h1 Home - div.nav - a(href="about.html") About - span  |  - a(href="contact.html") Contact - img(src=require('Images/apple.png') alt="apple") diff --git a/examples/simple-multipage/src/views/index.pug b/examples/simple-multipage/src/views/index.pug new file mode 100644 index 00000000..1a59afda --- /dev/null +++ b/examples/simple-multipage/src/views/index.pug @@ -0,0 +1,15 @@ +doctype html +html + head + title Home + link(rel='icon' href='@images/favicon.svg' type='image/svg+xml' sizes='any') + link(href='./home/styles.scss' rel='stylesheet') + script(src='./home/main.js' defer) + +body + h1 Home + div.nav + a(href="/about/") About + span  |  + a(href="/contact/") Contact + img(src='@images/apple.png' alt="apple") diff --git a/examples/simple-multipage/webpack.config.js b/examples/simple-multipage/webpack.config.js index 7ee2d8af..66f1fa5b 100644 --- a/examples/simple-multipage/webpack.config.js +++ b/examples/simple-multipage/webpack.config.js @@ -1,81 +1,71 @@ const path = require('path'); const PugPlugin = require('pug-plugin'); -module.exports = (env, argv) => { - const isDev = argv.mode === 'development'; +module.exports = { + mode: 'production', + devtool: 'source-map', + stats: 'minimal', - return { - mode: isDev ? 'development' : 'production', - devtool: isDev ? 'inline-source-map' : 'source-map', + output: { + path: path.join(__dirname, 'dist'), + clean: true, + }, - output: { - path: path.join(__dirname, 'dist'), + resolve: { + alias: { + // use Webpack aliases instead of relative paths like `../../` + '@images': path.join(__dirname, 'src/assets/images/'), }, + }, - entry: { - // Define your Pug templates here - index: 'src/views/home/index.pug', // => dist/index.html - contact: 'src/views/contact/index.pug', // => dist/contact.html - about: 'src/views/about/index.pug', // => dist/about.html - }, - - resolve: { - alias: { - // use Webpack aliases instead of relative paths like ../../ - Images: path.join(__dirname, 'src/assets/images/'), + plugins: [ + new PugPlugin({ + // auto precessing all Pug templates in the directory + entry: 'src/views/', + // OR you can define the templates manually + // entry: { + // index: 'src/views/pages/index.pug', // => dist/index.html + // 'contact/index': 'src/views/pages/contact/index.pug', // => dist/contact/index.html + // 'about/index': 'src/views/pages/about/index.pug', // => dist/about/index.html + // }, + js: { + // JS output filename + filename: 'assets/js/[name].[contenthash:8].js', }, - }, + css: { + // CSS output filename + filename: 'assets/css/[name].[contenthash:8].css', + }, + }), + ], - plugins: [ - new PugPlugin({ - js: { - // output name of a generated JS file - filename: 'assets/js/[name].[contenthash:8].js', - }, - css: { - // output name of a generated CSS file - filename: 'assets/css/[name].[contenthash:8].css', + module: { + rules: [ + { + test: /\.(s?css|sass)$/, + use: ['css-loader', 'sass-loader'], + }, + { + test: /\.(png|svg|jpe?g|webp)$/i, + type: 'asset/resource', + generator: { + filename: 'assets/img/[name].[hash:8][ext]', }, - }), + }, ], + }, - module: { - rules: [ - // templates - { - test: /\.pug$/, - loader: PugPlugin.loader, - }, - - // styles - { - test: /\.(css|sass|scss)$/, - use: ['css-loader', 'sass-loader'], - }, - - // images - { - test: /[\\/]images[\\/].+\.(png|svg|jpe?g|webp)$/i, - type: 'asset/resource', - generator: { - filename: 'assets/img/[name].[hash:8][ext]', - }, - }, - ], + devServer: { + static: { + directory: path.join(__dirname, 'dist'), }, - - devServer: { - static: { - directory: path.join(__dirname, 'dist'), - }, - compress: true, - //open: true, // open in default browser - watchFiles: { - paths: ['src/**/*.*'], - options: { - usePolling: true, - }, + compress: true, + open: true, // open in default browser + watchFiles: { + paths: ['src/**/*.*'], + options: { + usePolling: true, }, }, - }; + }, };