frontend moved to webpack #3

Merged
vilor merged 1 commits from dev into master 2 years ago
  1. 11
      .drone.yml
  2. 5
      .gitignore
  3. 58
      Makefile
  4. 23
      config.mk
  5. 7
      frontend/.editorconfig
  6. 2
      frontend/.gitignore
  7. 1
      frontend/.nvmrc
  8. 3883
      frontend/package-lock.json
  9. 30
      frontend/package.json
  10. 0
      frontend/public/robots.txt
  11. 0
      frontend/src/assets/images/chicken.png
  12. 0
      frontend/src/assets/images/under-construction.png
  13. 8
      frontend/src/components/backend-selectable-option.scm
  14. 2
      frontend/src/components/footer.scm
  15. 10
      frontend/src/components/header.scm
  16. 1
      frontend/src/main.js
  17. 28
      frontend/src/pages/contacts/markup.sxml
  18. 0
      frontend/src/pages/contacts/script.js
  19. 32
      frontend/src/pages/index/markup.sxml
  20. 3
      frontend/src/pages/index/script.js
  21. 15
      frontend/src/pages/webapps/index/markup.sxml
  22. 0
      frontend/src/pages/webapps/index/script.js
  23. 42
      frontend/src/pages/webapps/scrollbar/inline.scss
  24. 210
      frontend/src/pages/webapps/scrollbar/markup.sxml
  25. 4
      frontend/src/pages/webapps/scrollbar/script.js
  26. 87
      frontend/src/pages/webapps/scrollbar/style.scss
  27. 21
      frontend/src/styles/_vars.scss
  28. 126
      frontend/src/styles/main.scss
  29. 56
      frontend/src/templates/clean.scm
  30. 52
      frontend/src/templates/default.scm
  31. 122
      frontend/webpack.config.js
  32. 1
      scripts/minify-html.sed
  33. 233
      src/pages/webapps/scrollbar.scm
  34. 108
      src/styles/style.scm
  35. 79
      src/styles/webapps/scrollbar.scm
  36. 69
      src/templates/clean.scm

11
.drone.yml

@ -10,11 +10,12 @@ trigger:
- master - master
steps: steps:
- name: build - name: build-frontend
image: plotter/chicken-scheme:5.3.0-alpine image: node:14-alpine
commands: commands:
- chicken-install sxml-serializer scss - cd fontend
- make - npm i
- npm run build
- name: deploy - name: deploy
image: drillster/drone-rsync image: drillster/drone-rsync
@ -27,4 +28,4 @@ steps:
from_secret: deploy_ssh_key from_secret: deploy_ssh_key
target: target:
from_secret: deploy_target from_secret: deploy_target
source: dist/ source: frontend/dist/

5
.gitignore vendored

@ -1,7 +1,4 @@
dist/ .DS_Store
deploy*.sh
*~ *~
*#* *#*
.#* .#*

58
Makefile

@ -1,58 +0,0 @@
# Copyright (C) 2022 Ivan Polyakov
#
# This file is part of vilor's website.
#
# Vilor's website is free software: you can redistribute it and/or modify
# it under the terms of the GNU General Public License as published by
# the Free Software Foundation, either version 3 of the License, or
# (at your option) any later version.
#
# Vilor's website is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
# GNU General Public License for more details.
#
# You should have received a copy of the GNU General Public License
# along with this program. If not, see <https://www.gnu.org/licenses/>.
include config.mk
DIRS := $(shell find $(SRCDIR)/pages/* -type d | sed 's/$(SRCDIR)\/pages/$(OUTDIR)/')
SRCPAGES := $(shell find $(SRCDIR)/pages/* -name '*.scm')
SRCSTYLES := $(shell find $(SRCDIR)/styles/* -name '*.scm')
SRCJS := $(shell find $(SRCDIR)/scripts/* -name '*.js')
BUILDTIME=$(shell date "+%s")
all: $(OUTDIR) $(STATICDIR) pages styles js
pages: $(SRCPAGES)
for page in $(SRCPAGES) ; do \
$(SCHEME) $(SCHEMEFLAGS) -e "(define build-time $(BUILDTIME))" -s $$page \
| sed -f scripts/minify-html.sed \
> $$(echo $$page | sed 's/.*\/pages/dist/' | sed 's/scm/xhtml/') \
; done
styles: $(SRCSTYLES)
for style in $(SRCSTYLES) ; do \
$(SCHEME) $(SCHEMEFLAGS) -e "(define build-time $(BUILDTIME))" -s $$style \
> $$(echo $$style | sed 's/.*\/styles/dist/' | sed 's/scm/$(BUILDTIME).css/') \
; done
js: $(SRCJS)
for script in $(SRCJS) ; do \
cp $$script $$(echo $$script | sed 's/.*\/scripts/dist/' | sed 's/js/$(BUILDTIME).js/') \
; done
$(OUTDIR):
mkdir -p $(OUTDIR)
mkdir -p $(DIRS)
$(STATICDIR): $(OUTDIR)
cp -rf $@/* $< || echo $(STATICDIR) "dir is empty"
cp COPYING dist/
clean:
rm -rf $(OUTDIR)
.PHONY: all $(OUTDIR) $(STATICDIR) clean

23
config.mk

@ -1,23 +0,0 @@
# Copyright (C) 2022 Ivan Polyakov
#
# This file is part of vilor's website.
#
# Vilor's website is free software: you can redistribute it and/or modify
# it under the terms of the GNU General Public License as published by
# the Free Software Foundation, either version 3 of the License, or
# (at your option) any later version.
#
# Vilor's website is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
# GNU General Public License for more details.
#
# You should have received a copy of the GNU General Public License
# along with this program. If not, see <https://www.gnu.org/licenses/>.
SCHEME=csi
SCHEMEFLAGS=
SRCDIR=src
STATICDIR=public
OUTDIR=dist

7
frontend/.editorconfig

@ -0,0 +1,7 @@
[*.{js,jsx,ts,tsx,*css}]
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 80

2
frontend/.gitignore vendored

@ -0,0 +1,2 @@
dist
node_modules

1
frontend/.nvmrc

@ -0,0 +1 @@
v14

3883
frontend/package-lock.json generated

File diff suppressed because it is too large Load Diff

30
frontend/package.json

@ -0,0 +1,30 @@
{
"name": "website",
"version": "1.0.0",
"description": "Vilor's personal website",
"private": true,
"main": "src/index.js",
"scripts": {
"serve": "webpack serve --mode=development",
"build": "webpack --mode=production"
},
"author": "Ivan Polyakov",
"license": "GPL-3.0-or-later",
"devDependencies": {
"@babel/core": "^7.19.3",
"babel-loader": "^8.2.5",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.7.1",
"glob": "^8.0.3",
"html-loader": "^4.2.0",
"html-webpack-plugin": "^5.5.0",
"mini-css-extract-plugin": "^2.6.1",
"sass": "^1.55.0",
"sass-loader": "^13.1.0",
"style-loader": "^3.3.1",
"sxml-loader": "^0.3.0",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
}
}

0
public/robots.txt → frontend/public/robots.txt

0
public/img/chicken.png → frontend/src/assets/images/chicken.png

Before

Width:  |  Height:  |  Size: 78 KiB

After

Width:  |  Height:  |  Size: 78 KiB

0
public/img/under-construction.png → frontend/src/assets/images/under-construction.png

Before

Width:  |  Height:  |  Size: 6.7 KiB

After

Width:  |  Height:  |  Size: 6.7 KiB

8
frontend/src/components/backend-selectable-option.scm

@ -0,0 +1,8 @@
(define (backend-selectable-option value name)
`("{% if thumbbstl == \"" ,value "\" %}"
(option (@ (value ,value) (selected "selected")) ,name)
"{% else %}"
(option (@ (value ,value)) ,name)
"{% endif %}"))
'()

2
src/components/footer.scm → frontend/src/components/footer.scm

@ -36,3 +36,5 @@
`(,(if (> idx 0) '(" | ") '()) `(,(if (> idx 0) '(" | ") '())
(a (@ (href ,(car l))) ,(cdr l)))) (a (@ (href ,(car l))) ,(cdr l))))
footer-links))))) footer-links)))))
'()

10
src/components/header.scm → frontend/src/components/header.scm

@ -16,10 +16,10 @@
;; along with this program. If not, see <https://www.gnu.org/licenses/>. ;; along with this program. If not, see <https://www.gnu.org/licenses/>.
(define header-links (define header-links
'(("/index.xhtml" "Home") '(("/" "Home")
("/webapps/index.xhtml" "Web Apps") ("/webapps/index.html" "Web Apps")
("http://git.vilor.one:8079/" "Git") ("http://git.vilor.one/vilor/" "Git")
("/contacts.xhtml" "Contacts"))) ("/contacts.html" "Contacts")))
(define header (define header
`(header (@ (class "header")) `(header (@ (class "header"))
@ -32,3 +32,5 @@
`(,(if (> idx 0) '(" | ") '()) `(,(if (> idx 0) '(" | ") '())
(a (@ (href ,(car l))) ,(cdr l)))) (a (@ (href ,(car l))) ,(cdr l))))
header-links)))))) header-links))))))
'()

1
frontend/src/main.js

@ -0,0 +1 @@
import '@/styles/main.scss';

28
src/pages/contacts.scm → frontend/src/pages/contacts/markup.sxml

@ -15,22 +15,14 @@
;; You should have received a copy of the GNU General Public License ;; You should have received a copy of the GNU General Public License
;; along with this program. If not, see <https://www.gnu.org/licenses/>. ;; along with this program. If not, see <https://www.gnu.org/licenses/>.
(import sxml-serializer) `(,(load "./src/templates/default.scm")
,(default-tpl
"vilor/contacts"
"contacts"
'()
(load "./src/general.scm") '(ul (@ (class "contacts"))
(li "E-mail: " (a (@ (href "mailto:https://v1lor@protonmail.com"))
(define title "vilor/contacts") "v1lor at protonmail dot com"))
(define page-name "contacts") (li "Matrix: " (a (@ (href "https://matrix.to/#/@vilor:matrix.org"))
(define page-desc '()) "vilor at matrix dot org")))))
(define content
'(ul (@ (class "contacts"))
(li "E-mail: " (a (@ (href "mailto:https://v1lor@protonmail.com"))
"v1lor at protonmail dot com"))
(li "Matrix: " (a (@ (href "https://matrix.to/#/@vilor:matrix.org"))
"vilor at matrix dot org"))))
(load "./src/templates/default.scm")
(display xhtml-1.0-doctype)
(display (serialize-sxml
(default-tpl title content page-name page-desc)))

0
frontend/src/pages/contacts/script.js

32
src/pages/webapps/index.scm → frontend/src/pages/index/markup.sxml

@ -15,25 +15,17 @@
;; You should have received a copy of the GNU General Public License ;; You should have received a copy of the GNU General Public License
;; along with this program. If not, see <https://www.gnu.org/licenses/>. ;; along with this program. If not, see <https://www.gnu.org/licenses/>.
(import sxml-serializer) `(,(load "./src/templates/default.scm")
,(default-tpl
"vilor"
"home"
'()
(load "./src/general.scm") '(div (@ (class "under-construction"))
(img (@ (src "../../assets/images/under-construction.png") (alt "under construction")))
(h2 "Under construction."))
(define title "vilor/webapps") '()
(define page-name "webapps") '()
(define page-desc '()) '(((name "description") (content "Vilor's personal website"))
((name "keywords") (content "vilor")))))
(define webapps-links
'(("scrollbar.xhtml" "Scrollbar styling")))
(define content
`(div (@ (class "webapps"))
(ul
,(map (lambda (l)
`(li (a (@ (href ,(car l))) ,(cdr l))))
webapps-links))))
(load "./src/templates/default.scm")
(display xhtml-1.0-doctype)
(display (serialize-sxml
(default-tpl title content page-name page-desc)))

3
frontend/src/pages/index/script.js

@ -0,0 +1,3 @@
import '@/styles/main.scss';
console.log('bla');

15
src/general.scm → frontend/src/pages/webapps/index/markup.sxml

@ -11,9 +11,18 @@
;; but WITHOUT ANY WARRANTY; without even the implied warranty of ;; but WITHOUT ANY WARRANTY; without even the implied warranty of
;; MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the ;; MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
;; GNU General Public License for more details. ;; GNU General Public License for more details.
;; ;;
;; You should have received a copy of the GNU General Public License ;; You should have received a copy of the GNU General Public License
;; along with this program. If not, see <https://www.gnu.org/licenses/>. ;; along with this program. If not, see <https://www.gnu.org/licenses/>.
(define xhtml-1.0-doctype `(,(load "src/templates/default.scm")
"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">") ,(default-tpl
"vilor/webapps"
"webapps"
'()
`(div (@ (class "webapps"))
(ul
,(map (lambda (l)
`(li (a (@ (href ,(car l))) ,(cdr l))))
'(("scrollbar.html" "Scrollbar styling")))))))

0
frontend/src/pages/webapps/index/script.js

42
frontend/src/pages/webapps/scrollbar/inline.scss

@ -0,0 +1,42 @@
/*
* Copyright (C) 2022 Ivan Polyakov
*
* This file is part of vilor's website.
*
* Vilor's website is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* Vilor's website is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
.scrollbar-app__demo {
scrollbar-width: "{{ sbw }}";
scrollbar-color: "{{ thumbclr }} {{ trackclr }}";
&::-webkit-scrollbar {
width: "{{ sbw }}";
}
&::-webkit-scrollbar-thumb {
background-color: "{{ thumbclr }}";
border-width: "{{ thumbbw }}";
border-style: "{{ thumbbstl }}";
border-color: "{{ thumbbclr }}";
border-radius: "{{ thumbbrad }}";
}
&::-webkit-scrollbar-track {
background-color: "{{ trackclr }}";
border-radius: "{{ trackbrad }}";
margin-top: "{{ trackmt }}";
margin-bottom: "{{ trackmb }}";
}
}

210
frontend/src/pages/webapps/scrollbar/markup.sxml

@ -0,0 +1,210 @@
;; Copyright (C) 2022 Ivan Polyakov
;;
;; This file is part of vilor's website.
;;
;; Vilor's website is free software: you can redistribute it and/or modify
;; it under the terms of the GNU General Public License as published by
;; the Free Software Foundation, either version 3 of the License, or
;; (at your option) any later version.
;;
;; Vilor's website is distributed in the hope that it will be useful,
;; but WITHOUT ANY WARRANTY; without even the implied warranty of
;; MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
;; GNU General Public License for more details.
;;
;; You should have received a copy of the GNU General Public License
;; along with this program. If not, see <https://www.gnu.org/licenses/>.
`(,(load "src/templates/default.scm")
,(load "src/components/backend-selectable-option.scm")
,(default-tpl
"vilor/webapps/scrollbar"
"Scrollbar styling demo"
'((p "Demonstration of possible customization of the scrollbar.")
(p (@ (class "note"))
(b "Note")
": The result will look different in different browsers, try checking the result in browsers based on different engines."))
`(div (@ (class "scrollbar-app"))
(form (@ (method "GET") (action "/webapps/scrollbar.xhtml"))
(fieldset (@ (class "scrollbar-app__panel"))
(h3 "Bar:")
(div (@ (class "scrollbar-app__input"))
(label (@ (for "sbw")) "Width: ")
(input (@
(type "text")
(id "sbw")
(name "sbw")
(value "{{ sbw }}")
(pattern "\\d+px")
(title "Size in pixels with format: \"<NUMBER>px\"")))))
(fieldset (@ (class "scrollbar-app__panel"))
(h3 "Thumbnail:")
(div (@ (class "scrollbar-app__input"))
(label (@ (for "thumbclr")) "Color: ")
(input (@
(type "color")
(id "thumbclr")
(name "thumbclr")
(value "{{ thumbclr }}")))
(input (@
(type "text")
(id "thumbclrtxt")
(name "thumbclrtxt")
(value "{{ thumbclr }}")
(pattern "#[0-9A-Fa-f]{6}")
(title "Hexadecimal RGB color with \"#\" at the beginning"))))
(fieldset
(h4 "Border:")
(div (@ (class "scrollbar-app__input"))
(label (@ (for "thumbbstl")) "Style: ")
(select (@ (id "thumbbstl") (name "thumbbstl"))
,(map
(lambda (l) (backend-selectable-option l l))
'("none" "hidden" "solid" "dotted" "dashed"
"double" "groove" "ridge" "inset" "outset"))))
(div (@ (class "scrollbar-app__input"))
(label (@ (for "thumbbrad")) "Radius: ")
(input (@
(type "text")
(id "thumbbrad")
(name "thumbbrad")
(value "{{ thumbbrad }}")
(pattern "\\d+(px|%)")
(title "Radius in pixels or percents with format: \"<NUMBER>px\" or \"<NUMBER>%\""))))
(div (@ (class "scrollbar-app__input"))
(label (@ (for "thumbbw")) "Width: ")
(input (@
(type "text")
(id "thumbbw")
(name "thumbbw")
(value "{{ thumbbw }}")
(pattern "\\d+px")
(title "Size in pixels with format: \"<NUMBER>px\""))))
(div (@ (class "scrollbar-app__input"))
(label (@ (for "thumbbclr")) "Color: ")
(input (@
(type "color")
(id "thumbbclr")
(name "thumbbclr")
(value "{{ thumbbclr }}")))
(input (@
(type "text")
(id "thumbbclrtxt")
(name "thumbbclrtxt")
(value "{{ thumbbclr }}")
(pattern "#[0-9A-Fa-f]{6}")
(title "Hexadecimal RGB color with \"#\" at the beginning"))))))
(fieldset (@ (class "scrollbar-app__panel"))
(h3 "Track:")
(div (@ (class "scrollbar-app__input"))
(label (@ (for "trackclr")) "Color: ")
(input (@
(type "color")
(id "trackclr")
(name "trackclr")
(value "{{ trackclr }}")))
(input (@
(type "text")
(id "trackclrtxt")
(name "trackclrtxt")
(value "{{ trackclr }}")
(pattern "#[0-9A-Fa-f]{6}")
(title "Hexadecimal RGB color with \"#\" at the beginning"))))
(div (@ (class "scrollbar-app__input"))
(label (@ (for "trackbrad")) "Border radius: ")
(input (@
(type "text")
(id "trackbrad")
(name "trackbrad")
(value "{{ trackbrad }}")
(pattern "\\d+(px|%)")
(title "Radius in pixels or percents with format: \"<NUMBER>px\" or \"<NUMBER>%\""))))
(div (@ (class "scrollbar-app__input"))
(label (@ (for "trackmt")) "Margin top: ")
(input (@
(type "text")
(id "trackmt")
(name "trackmt")
(value "{{ trackmt }}")
(pattern "\\d+px")
(title "Size in pixels with format: \"<NUMBER>px\""))))
(div (@ (class "scrollbar-app__input"))
(label (@ (for "trackmb")) "Margin bottom: ")
(input (@
(type "text")
(id "trackmb")
(name "trackmb")
(value "{{ trackmb }}")
(pattern "\\d+px")
(title "Size in pixels with format: \"<NUMBER>px\"")))))
(div (@ (class "scrollbar-app__buttons") (id "sbBtns"))
(button (@ (type "submit") (id "sbUpdBtn")) "update")))
(pre (@ (class "scrollbar-app__panel") (id "sbScssOut"))
"
.selector {
scrollbar-color: {{ thumbclr }} {{ trackclr }};
&::-webkit-scrollbar {
width: {{ sbw }};
}
&::-webkit-scrollbar-track {
background-color: {{ trackclr }};
border-radius: {{ trackbrad }};
margin-top: {{ trackmt }};
margin-bottom: {{ trackmb }};
}
&::-webkit-scrollbar-thumb {
background-color: {{ thumbclr }};
border: {{ thumbbw }} {{ thumbbstl }} {{ thumbbclr }};
border-radius: {{ thumbbrad }};
}
}")
(textarea (@ (class "scrollbar-app__demo")
(readonly "readonly")
(rows 5)
(cols 30))
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."))
;;"/src/styles/webapps/scrollbar-inline.scss"
'()
'()
'(((name "description")
(content "Demonstration of possible customization of the scrollbar."))
((name "keywords")
(content "CSS, SCSS, scrollbar styling, constructor")))))
;;;(define page-embedded-style
;;; '(css+
;;; (.scrollbar-app__demo
;;; (scrollbar-width "{{ sbw }}")
;;; (scrollbar-color "{{ thumbclr }} {{ trackclr }}")
;;;
;;; ((& ::-webkit-scrollbar)
;;; (width "{{ sbw }}"))
;;;
;;; ((& ::-webkit-scrollbar-thumb)
;;; (background-color "{{ thumbclr }}")
;;; (border-width "{{ thumbbw }}")
;;; (border-style "{{ thumbbstl }}")
;;; (border-color "{{ thumbbclr }}")
;;; (border-radius "{{ thumbbrad }}"))
;;;
;;; ((& ::-webkit-scrollbar-track)
;;; (background-color "{{ trackclr }}")
;;; (border-radius "{{ trackbrad }}")
;;; (margin-top "{{ trackmt }}")
;;; (margin-bottom "{{ trackmb }}")))))

4
src/scripts/webapps/scrollbar.js → frontend/src/pages/webapps/scrollbar/script.js

@ -13,6 +13,8 @@
You should have received a copy of the GNU General Public License You should have received a copy of the GNU General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>. along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
import './style.scss';
(function() { (function() {
var scssOut = document.getElementById("sbScssOut"); var scssOut = document.getElementById("sbScssOut");
scssOut.style = "display:none"; scssOut.style = "display:none";
@ -49,7 +51,7 @@
printBtn.onclick = function() { printBtn.onclick = function() {
scssOut.style = ""; scssOut.style = "";
}; };
var clearBtn = document.createElement("button"); var clearBtn = document.createElement("button");
clearBtn.type = "button"; clearBtn.type = "button";
clearBtn.textContent = "hide scss"; clearBtn.textContent = "hide scss";

87
frontend/src/pages/webapps/scrollbar/style.scss

@ -0,0 +1,87 @@
/*
* Copyright (C) 2022 Ivan Polyakov
*
* This file is part of vilor's website.
*
* Vilor's website is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* Vilor's website is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
.scrollbar-app {
form {
margin-bottom: 10px;
fieldset {
border: none;
padding: 0;
margin: 0;
}
.scrollbar-app__panel {
margin-bottom: 16px;
}
h3 {
font-size: 24px;
margin: 0;
}
h4 {
font-size: 20px;
margin: 12px 0 0 0;
}
.scrollbar-app__input {
display: inline-block;
display: inline-flex;
align-items: center;
padding: 8px;
}
}
.scrollbar-app__panel {
background-color: "#585f70";
padding: 12px;
}
.scrollbar-app__demo {
height: 300px;
width: 100%;
font-size: 32px;
overflow-y: scroll;
margin-top: 60px;
&::-webkit-scrollbar {
margin-bottom: 5px;
}
}
.scrollbar-app__buttons {
margin-top: 24px;
button {
min-width: 149px;
font-size: 18px;
background-color: "#ced9f3";
padding: 14px 25px;
border: none;
border-radius: 4px;
outline: none;
margin-right: 16px;
&:hover {
background-color: "#a2b8ed";
}
}
}
}

21
frontend/src/styles/_vars.scss

@ -0,0 +1,21 @@
/*
* Copyright (C) 2022 Ivan Polyakov
*
* This file is part of vilor's website.
*
* Vilor's website is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* Vilor's website is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
$bg-primary: #3b4252;
$bg-secondary: #262d3e;

126
frontend/src/styles/main.scss

@ -0,0 +1,126 @@
/*
* Copyright (C) 2022 Ivan Polyakov
*
* This file is part of vilor's website.
*
* Vilor's website is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* Vilor's website is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
@import './vars';
html,
body {
height: 100%;
margin: 0;
}
body {
font-family: 'Arial', sans-serif;
color: white;
background: $bg-primary;
}
a {
color: white;
&:hover {
text-decoration: none;
}
&:visited {
color: #bbb;
}
}
.wrapper {
position: relative;
min-height: 100%;
hr {
display: none;
}
}
.container {
max-width: 937px;
padding: 0 16px;
margin: 0 auto;
}
.under-construction {
max-width: 300px;
text-align: center;
margin: 0 auto;
}
.header {
background: $bg-secondary;
&__logo {
display: inline-block;
font-size: 24px;
padding: 8px 0;
margin: 0;
}
&__nav {
display: inline-block;
float: right;
list-style: none;
font-size: 16px;
padding: 12px 0;
margin: 0;
}
}
.content {
padding: 32px 16px 138px 16px;
&__title {
font-size: 36px;
margin-top: 0;
margin-bottom: 12px;
}
&__description {
font-size: 16px;
margin-bottom: 24px;
.note {
font-size: 16px;
margin-top: 16px;
}
p {
margin: 0;
}
}
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
background: $bg-secondary;
padding: 14px 0;
&__authors {
margin-bottom: 15px;
a {
margin: 0 5px;
}
}
}

56
src/templates/default.scm → frontend/src/templates/clean.scm

@ -15,35 +15,39 @@
;; You should have received a copy of the GNU General Public License ;; You should have received a copy of the GNU General Public License
;; along with this program. If not, see <https://www.gnu.org/licenses/>. ;; along with this program. If not, see <https://www.gnu.org/licenses/>.
(load "./src/components/header.scm") ;;(import scss)
(load "./src/components/footer.scm")
(load "./src/templates/clean.scm")
(define (default-tpl
(define* (clean-tpl
page-title page-title
page-content page-content
page-name
page-desc
#!optional #:optional
(page-embedded-style '()) (page-inline-style '())
(page-styles '())
(page-scripts '()) (page-scripts '())
(page-meta '())) (page-meta '()))
(clean-tpl `(html (@ (lang "en"))
page-title (head
`(div (@ (class "wrapper")) (meta (@ (name "author") (content "Ivan Polyakov")))
,header (meta (@ (name "viewport")
(hr) (content "width=device-width, initial-scale=1")))
(main (@ (class "content container")) (meta (@ (name "robots") (content "noindex,nofollow")))
(h1 (@ (class "content__title")) ,page-name)
(div (@ (class "content__description")) ,page-desc) ,(map (lambda (args)
,page-content) `(meta ,(append '(@) args))) page-meta)
(hr) (title ,page-title)
,footer)
page-embedded-style ,(if (not (null? page-inline-style))
(append '("/style.css") page-styles) `(link (@ (rel "stylesheet") (href ,page-inline-style)))
page-scripts '()))
page-meta)) (body
,page-content
,(map
(lambda (l)
`(script (@ (src ,l) (type "text/javascript")) " "))
page-scripts))))
'()

52
src/pages/index.scm → frontend/src/templates/default.scm

@ -11,33 +11,39 @@
;; but WITHOUT ANY WARRANTY; without even the implied warranty of ;; but WITHOUT ANY WARRANTY; without even the implied warranty of
;; MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the ;; MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
;; GNU General Public License for more details. ;; GNU General Public License for more details.
;; ;;
;; You should have received a copy of the GNU General Public License ;; You should have received a copy of the GNU General Public License
;; along with this program. If not, see <https://www.gnu.org/licenses/>. ;; along with this program. If not, see <https://www.gnu.org/licenses/>.
(import sxml-serializer) (load "../components/header.scm")
(load "../components/footer.scm")
(load "clean.scm")
(define* (default-tpl
page-title
page-name
page-desc
page-content
(load "./src/general.scm") #:optional
(page-inline-style '())
(page-scripts '())
(page-meta '()))
(clean-tpl
page-title
`(div (@ (class "wrapper"))
,header
(hr)
(define title "vilor") (main (@ (class "content container"))
(define page-name "home") (h1 (@ (class "content__title")) ,page-name)
(define page-desc '()) (div (@ (class "content__description")) ,page-desc)
,page-content)
(define content (hr)
'(div (@ (class "under-construction")) ,footer)
(img (@ (src "img/under-construction.png") (alt "under construction"))) page-inline-style
(h2 "Under construction."))) page-scripts
page-meta))
(load "./src/templates/default.scm") '()
(display xhtml-1.0-doctype)
(display (serialize-sxml
(default-tpl
title
content
page-name
page-desc
'()
'()
'()
'(((name "description") (content "Vilor's personal website"))
((name "keywords") (content "vilor"))))))

122
frontend/webpack.config.js

@ -0,0 +1,122 @@
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const path = require('path');
const glob = require('glob');
const isDev = process.argv.includes('--mode=development');
const pages = glob.sync(__dirname + '/src/pages/**/markup.sxml');
module.exports = {
target: 'web',
entry: pages.reduce((entries, pagePath) => {
const pathSegments = pagePath.split('/');
const pageName = pathSegments[pathSegments.length - 2];
const scriptPath = pagePath.replace('markup.sxml', 'script.js');
entries[pageName] = ['./src/main.js', scriptPath];
return entries;
}, {}),
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
devtool: false,
devServer: {
static: {
directory: './dist/',
publicPath: '/',
},
client: {
overlay: {
errors: true,
warnings: false,
}
},
hot: true,
compress: false,
},
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
},
{
test: /\.sxml$/,
use: [
{
loader: 'html-loader',
options: {
minimize: false,
},
},
{
loader: 'sxml-loader',
},
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
},
},
{
test: /\.(png|jpg|svg|jpeg|gif|webp)/i,
type: 'asset/resource',
generator: {
filename: '[name][ext]',
outputPath: 'assets',
publicPath: 'assets/',
},
},
{
test: /\.(ttf|woff|woff2)/i,
type: 'asset/resource',
generator: {
filename: '[name][ext]',
outputPath: 'assets',
publicPath: 'assets/',
},
},
]
},
plugins: [
new CopyPlugin({
patterns: [
{
from: path.resolve(__dirname, 'public'),
}
]
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
}),
...pages.map((fpath) => {
const pagePath = fpath.split('/pages/')[1];
const pagePathSegs = pagePath.split('/');
const pageName = pagePathSegs[pagePathSegs.length - 2];
return new HtmlWebpackPlugin({
inject: 'body',
scriptLoading: 'blocking',
template: fpath,
filename: pagePath.replace('/markup.sxml', '.html'),
minify: false,
chunks: [pageName],
});
}),
],
}

1
scripts/minify-html.sed

@ -1 +0,0 @@
:a;N;$!ba;s/>\s*</></g

233
src/pages/webapps/scrollbar.scm

@ -1,233 +0,0 @@
;; Copyright (C) 2022 Ivan Polyakov
;;
;; This file is part of vilor's website.
;;
;; Vilor's website is free software: you can redistribute it and/or modify
;; it under the terms of the GNU General Public License as published by
;; the Free Software Foundation, either version 3 of the License, or
;; (at your option) any later version.
;;
;; Vilor's website is distributed in the hope that it will be useful,
;; but WITHOUT ANY WARRANTY; without even the implied warranty of
;; MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
;; GNU General Public License for more details.
;;
;; You should have received a copy of the GNU General Public License
;; along with this program. If not, see <https://www.gnu.org/licenses/>.
(import sxml-serializer)
(import scss)
(load "./src/general.scm")
(define title "vilor/webapps/scrollbar")
(define page-name "Scrollbar styling")
(define page-desc
'((p "Demonstration of possible customization of the scrollbar.")
(p (@ (class "note"))
(b "Note")
": The result will look different in different browsers, try checking the result in browsers based on different engines.")))
(define page-styles '("scrollbar.css"))
(define page-scripts '("scrollbar.js"))
(define (backend-selectable-option value name)
`("{% if thumbbstl == \"" ,value "\" %}"
(option (@ (value ,value) (selected "selected")) ,name)
"{% else %}"
(option (@ (value ,value)) ,name)
"{% endif %}"))
(define page-embedded-style
'(css+
(.scrollbar-app__demo
(scrollbar-width "{{ sbw }}")
(scrollbar-color "{{ thumbclr }} {{ trackclr }}")
((& ::-webkit-scrollbar)
(width "{{ sbw }}"))
((& ::-webkit-scrollbar-thumb)
(background-color "{{ thumbclr }}")
(border-width "{{ thumbbw }}")
(border-style "{{ thumbbstl }}")
(border-color "{{ thumbbclr }}")
(border-radius "{{ thumbbrad }}"))
((& ::-webkit-scrollbar-track)
(background-color "{{ trackclr }}")
(border-radius "{{ trackbrad }}")
(margin-top "{{ trackmt }}")
(margin-bottom "{{ trackmb }}")))))
(define example-text "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
(define content
`(div (@ (class "scrollbar-app"))
(form (@ (method "GET") (action "/webapps/scrollbar.xhtml"))
(fieldset (@ (class "scrollbar-app__panel"))
(h3 "Bar:")
(div (@ (class "scrollbar-app__input"))
(label (@ (for "sbw")) "Width: ")
(input (@
(type "text")
(id "sbw")
(name "sbw")
(value "{{ sbw }}")
(pattern "\\d+px")
(title "Size in pixels with format: \"<NUMBER>px\"")))))
(fieldset (@ (class "scrollbar-app__panel"))
(h3 "Thumbnail:")
(div (@ (class "scrollbar-app__input"))
(label (@ (for "thumbclr")) "Color: ")
(input (@
(type "color")
(id "thumbclr")
(name "thumbclr")
(value "{{ thumbclr }}")))
(input (@
(type "text")
(id "thumbclrtxt")
(name "thumbclrtxt")
(value "{{ thumbclr }}")
(pattern "#[0-9A-Fa-f]{6}")
(title "Hexadecimal RGB color with \"#\" at the beginning"))))
(fieldset
(h4 "Border:")
(div (@ (class "scrollbar-app__input"))
(label (@ (for "thumbbstl")) "Style: ")
(select (@ (id "thumbbstl") (name "thumbbstl"))
,(map
(lambda (l) (backend-selectable-option l l))
'("none" "hidden" "solid" "dotted" "dashed"
"double" "groove" "ridge" "inset" "outset"))))
(div (@ (class "scrollbar-app__input"))
(label (@ (for "thumbbrad")) "Radius: ")
(input (@
(type "text")
(id "thumbbrad")
(name "thumbbrad")
(value "{{ thumbbrad }}")
(pattern "\\d+(px|%)")
(title "Radius in pixels or percents with format: \"<NUMBER>px\" or \"<NUMBER>%\""))))
(div (@ (class "scrollbar-app__input"))
(label (@ (for "thumbbw")) "Width: ")
(input (@
(type "text")
(id "thumbbw")
(name "thumbbw")
(value "{{ thumbbw }}")
(pattern "\\d+px")
(title "Size in pixels with format: \"<NUMBER>px\""))))
(div (@ (class "scrollbar-app__input"))
(label (@ (for "thumbbclr")) "Color: ")
(input (@
(type "color")
(id "thumbbclr")
(name "thumbbclr")
(value "{{ thumbbclr }}")))
(input (@
(type "text")
(id "thumbbclrtxt")
(name "thumbbclrtxt")
(value "{{ thumbbclr }}")
(pattern "#[0-9A-Fa-f]{6}")
(title "Hexadecimal RGB color with \"\#\" at the beginning"))))))
(fieldset (@ (class "scrollbar-app__panel"))
(h3 "Track:")
(div (@ (class "scrollbar-app__input"))
(label (@ (for "trackclr")) "Color: ")
(input (@
(type "color")
(id "trackclr")
(name "trackclr")
(value "{{ trackclr }}")))
(input (@
(type "text")
(id "trackclrtxt")
(name "trackclrtxt")
(value "{{ trackclr }}")
(pattern "#[0-9A-Fa-f]{6}")
(title "Hexadecimal RGB color with \"#\" at the beginning"))))
(div (@ (class "scrollbar-app__input"))
(label (@ (for "trackbrad")) "Border radius: ")
(input (@
(type "text")
(id "trackbrad")
(name "trackbrad")
(value "{{ trackbrad }}")
(pattern "\\d+(px|%)")
(title "Radius in pixels or percents with format: \"<NUMBER>px\" or \"<NUMBER>%\""))))
(div (@ (class "scrollbar-app__input"))
(label (@ (for "trackmt")) "Margin top: ")
(input (@
(type "text")
(id "trackmt")
(name "trackmt")
(value "{{ trackmt }}")
(pattern "\\d+px")
(title "Size in pixels with format: \"<NUMBER>px\""))))
(div (@ (class "scrollbar-app__input"))
(label (@ (for "trackmb")) "Margin bottom: ")
(input (@
(type "text")
(id "trackmb")
(name "trackmb")
(value "{{ trackmb }}")
(pattern "\\d+px")
(title "Size in pixels with format: \"<NUMBER>px\"")))))
(div (@ (class "scrollbar-app__buttons") (id "sbBtns"))
(button (@ (type "submit") (id "sbUpdBtn")) "update")))
(pre (@ (class "scrollbar-app__panel") (id "sbScssOut"))
"
.selector {
scrollbar-color: {{ thumbclr }} {{ trackclr }};
&::-webkit-scrollbar {
width: {{ sbw }};
}
&::-webkit-scrollbar-track {
background-color: {{ trackclr }};
border-radius: {{ trackbrad }};
margin-top: {{ trackmt }};
margin-bottom: {{ trackmb }};
}
&::-webkit-scrollbar-thumb {
background-color: {{ thumbclr }};
border: {{ thumbbw }} {{ thumbbstl }} {{ thumbbclr }};
border-radius: {{ thumbbrad }};
}
}")
(textarea (@ (class "scrollbar-app__demo")
(readonly "readonly")
(rows 5)
(cols 30))
,example-text)))
(load "./src/templates/default.scm")
(display xhtml-1.0-doctype)
(display (serialize-sxml
(default-tpl
title
content
page-name
page-desc
page-embedded-style
page-styles
page-scripts
`(((name "description")
(content "Demonstration of possible customization of the scrollbar."))
((name "keywords")
(content "CSS, SCSS, scrollbar, styling, constructor"))))))

108
src/styles/style.scm

@ -1,108 +0,0 @@
;; Copyright (C) 2022 Ivan Polyakov
;;
;; This file is part of vilor's website.
;;
;; Vilor's website is free software: you can redistribute it and/or modify
;; it under the terms of the GNU General Public License as published by
;; the Free Software Foundation, either version 3 of the License, or
;; (at your option) any later version.
;;
;; Vilor's website is distributed in the hope that it will be useful,
;; but WITHOUT ANY WARRANTY; without even the implied warranty of
;; MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
;; GNU General Public License for more details.
;;
;; You should have received a copy of the GNU General Public License
;; along with this program. If not, see <https://www.gnu.org/licenses/>.
(import scss)
(define global-styles
`(css+
(|html, body|
(height 100%)
(margin 0))
(|body|
(font-family "Arial, sans-serif")
(color white)
(background-color "#3b4252"))
(a
(color white)
((& :hover)
(text-decoration none))
((& :visited)
(color "#bbb")))
(.wrapper
(position relative)
(min-height 100%)
((// > hr)
(display none)))
(.container
(max-width 937px)
(padding 0 16px)
(margin 0 auto))
(.under-construction
(max-width 300px)
(text-align center)
(margin 0 auto))
(.header
(background-color "#262d3e")
((// .header__logo)
(display inline-block)
(font-size 24px)
(padding 8px 0)
(margin 0))
((// .header__nav)
(display inline-block)
(float right)
(list-style none)
(fonst-size 16px)
(padding 12px 0)
(margin 0)))
(.content
(padding 32px 16px 138px 16px)
((// .content__title)
(font-size 36px)
(margin-top 0)
(margin-bottom 12px))
((// .content__description)
(font-size 20px)
(margin-bottom 24px)
((// .note)
(font-size 16px)
(margin-top 16px))
((// p)
(margin 0))))
(.footer
(position absolute)
(bottom 0)
(width 100%)
(text-align center)
(background-color "#262d3e")
(padding 14px 0)
((// .footer__authors)
(margin-bottom 15px)
((// a)
(margin 0 5px))))))
(write-css global-styles)
(newline)

79
src/styles/webapps/scrollbar.scm

@ -1,79 +0,0 @@
;; Copyright (C) 2022 Ivan Polyakov
;;
;; This file is part of vilor's website.
;;
;; Vilor's website is free software: you can redistribute it and/or modify
;; it under the terms of the GNU General Public License as published by
;; the Free Software Foundation, either version 3 of the License, or
;; (at your option) any later version.
;;
;; Vilor's website is distributed in the hope that it will be useful,
;; but WITHOUT ANY WARRANTY; without even the implied warranty of
;; MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
;; GNU General Public License for more details.
;;
;; You should have received a copy of the GNU General Public License
;; along with this program. If not, see <https://www.gnu.org/licenses/>.
(import scss)
(define scrollbar-styles
`(css+
(.scrollbar-app
((// form)
(margin-bottom 10px)
((// fieldset)
(border none)
(padding 0)
(margin 0))
((// .scrollbar-app__panel)
(margin-bottom 16px))
((// h3)
(font-size 24px)
(margin 0))
((// h4)
(font-size 20px)
(margin 12px 0 0 0))
((// .scrollbar-app__input)
(display inline-block)
(display inline-flex)
(align-items center)
(padding 8px)))
((// .scrollbar-app__panel)
(background-color "#585f70")
(padding 12px))
((// .scrollbar-app__demo)
(height 300px)
(width 100%)
(font-size 32px)
(overflow-y scroll)
(margin-top 60px)
((& ::-webkit-scrollbar)
(margin-bottom 5px)))
((// .scrollbar-app__buttons)
(margin-top 24px)
((// button)
(min-width 149px)
(font-size 18px)
(background-color "#ced9f3")
(padding 14px 25px)
(border none)
(border-radius 4px)
(outline none)
(margin-right 16px)
((& :hover)
(background-color "#a2b8ed")))))))
(write-css scrollbar-styles)
(newline)

69
src/templates/clean.scm

@ -1,69 +0,0 @@
;; Copyright (C) 2022 Ivan Polyakov
;;
;; This file is part of vilor's website.
;;
;; Vilor's website is free software: you can redistribute it and/or modify
;; it under the terms of the GNU General Public License as published by
;; the Free Software Foundation, either version 3 of the License, or
;; (at your option) any later version.
;;
;; Vilor's website is distributed in the hope that it will be useful,
;; but WITHOUT ANY WARRANTY; without even the implied warranty of
;; MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
;; GNU General Public License for more details.
;;
;; You should have received a copy of the GNU General Public License
;; along with this program. If not, see <https://www.gnu.org/licenses/>.
(import scss)
(import (chicken string))
(define (path-with-build-time path suffix)
(string-translate* path
`((,suffix . ,(string-intersperse
`("." ,(number->string build-time) ,suffix)
"")))))
(define (clean-tpl
page-title
page-content
#!optional
(page-embedded-style '())
(page-styles '())
(page-scripts '())
(page-meta '()))
`(html (@ (xmlns "http://www.w3.org/1999/xhtml")
(xml:lang "en")
(lang "en"))
(head
(meta (@ (http-equiv "Content-Type")
(content "text/html; charset=ascii")))
(meta (@ (name "author") (content "Ivan Polyakov (vilor)")))
(meta (@ (name "viewport")
(content "width=device-width, initial-scale=1")))
(meta (@ (name "robots") (content "noindex,nofollow")))
,(map (lambda (args)
`(meta ,(append '(@) args))) page-meta)
,(map (lambda (l)
`(link (@ (rel "stylesheet")
(href ,(path-with-build-time l ".css")))))
page-styles)
(title ,page-title)
,(if (not (null? page-embedded-style))
`(style ,(scss->css page-embedded-style))
'()))
(body
,page-content
,(map
(lambda (l)
`(script (@ (src ,(path-with-build-time l ".js"))
(type "text/javascript"))
" "))
page-scripts))))
Loading…
Cancel
Save