Simplify code, remove html dependency

This commit removes the `html' package dependency, speeding up the
compile time of the Dart code.

It also simplifies the code and removes some unused code. For instance
the sun, moon, and lightbulb icons is removed, the `Theme' class is
removed, and the `switchTheme' function is now merged into the
`setTheme' function. The `makeThemeItem' function has also had its
second argument removed.
This commit is contained in:
Lucien Cartier-Tilet 2020-08-25 03:34:55 +02:00
parent 8b984e301f
commit f99d45e8ab
Signed by: phundrak
GPG Key ID: BD7789E705CB8DCA
6 changed files with 38 additions and 76 deletions

View File

@ -8,9 +8,8 @@ environment:
sdk: '>=2.7.0 <3.0.0' sdk: '>=2.7.0 <3.0.0'
dependencies: dependencies:
html: '^0.14.0+3'
dev_dependencies: dev_dependencies:
build_runner: ^1.8.0 build_runner: ^1.10.1
build_web_compilers: ^2.9.0 build_web_compilers: ^2.9.0
pedantic: ^1.9.0 pedantic: ^1.9.0

View File

@ -4,7 +4,8 @@ import './theme.dart' show enableThemeChanger, setTheme;
Future<void> main() async { Future<void> main() async {
await setTheme(); await setTheme();
await reorganizeHtml() await reorganizeHtml().then((_) {
.then((_) => enableThemeChanger()) enableThemeChanger();
.then((_) => createSitemap()); createSitemap();
});
} }

View File

@ -1,5 +1,5 @@
import 'dart:html'; import 'dart:html' show querySelector, Element, window;
import 'dart:svg'; import 'dart:svg' show SvgElement;
// You will see here and there some 'tabindex' attributes added to various HTML // You will see here and there some 'tabindex' attributes added to various HTML
// elements, and Im sure you will ask "Why? They dont serve any purpose, do // elements, and Im sure you will ask "Why? They dont serve any purpose, do
@ -32,12 +32,6 @@ final icons = {
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z" /></svg>'), '<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z" /></svg>'),
'theme': SvgElement.svg( 'theme': SvgElement.svg(
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M12,18V6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z" /></svg>'), '<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M12,18V6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z" /></svg>'),
'sun': SvgElement.svg(
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M3.55,18.54L4.96,19.95L6.76,18.16L5.34,16.74M11,22.45C11.32,22.45 13,22.45 13,22.45V19.5H11M12,5.5A6,6 0 0,0 6,11.5A6,6 0 0,0 12,17.5A6,6 0 0,0 18,11.5C18,8.18 15.31,5.5 12,5.5M20,12.5H23V10.5H20M17.24,18.16L19.04,19.95L20.45,18.54L18.66,16.74M20.45,4.46L19.04,3.05L17.24,4.84L18.66,6.26M13,0.55H11V3.5H13M4,10.5H1V12.5H4M6.76,4.84L4.96,3.05L3.55,4.46L5.34,6.26L6.76,4.84Z" /></svg>'),
'lightbulb': SvgElement.svg(
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63Z" /></svg>'),
'moon': SvgElement.svg(
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z" /></svg>'),
}; };
// Get the current pages title // Get the current pages title
@ -117,7 +111,7 @@ Future<Element> makeShare() async {
// Create the theme changer // Create the theme changer
Future<Element> makeThemeChanger() async { Future<Element> makeThemeChanger() async {
Element makeThemeItem(String t_btnId, [Element t_icon]) { Element makeThemeItem(String t_btnId) {
return Element.li() return Element.li()
..classes.add('dropdown-item') ..classes.add('dropdown-item')
..append(Element.span()..attributes['id'] = t_btnId); ..append(Element.span()..attributes['id'] = t_btnId);
@ -135,9 +129,9 @@ Future<Element> makeThemeChanger() async {
..append(Element.ul() ..append(Element.ul()
..classes.add('dropdown') ..classes.add('dropdown')
..attributes['id'] = 'theme-dropdown' ..attributes['id'] = 'theme-dropdown'
..append(makeThemeItem('lightBtn', makeIcon(icons['sun']))) ..append(makeThemeItem('lightBtn'))
..append(makeThemeItem('darkBtn', makeIcon(icons['lightbulb']))) ..append(makeThemeItem('darkBtn'))
..append(makeThemeItem('blackBtn', makeIcon(icons['moon'])))); ..append(makeThemeItem('blackBtn')));
} }
// Create the dropdown table of contents // Create the dropdown table of contents

View File

@ -1,7 +1,4 @@
import 'dart:html' as html show HttpRequest, Element, querySelector; import 'dart:html' show HttpRequest, Element, querySelector;
import 'package:html/parser.dart' show parse;
import 'package:html/dom.dart' as dom show Element;
final excluded_keywords = {'index', 'CONTRIBUTING', 'LICENSE', 'README'}; final excluded_keywords = {'index', 'CONTRIBUTING', 'LICENSE', 'README'};
@ -9,7 +6,7 @@ final excluded_keywords = {'index', 'CONTRIBUTING', 'LICENSE', 'README'};
Future<String> fetchRemoteSitemap() async { Future<String> fetchRemoteSitemap() async {
const path = '/sitemap.html'; const path = '/sitemap.html';
try { try {
return await html.HttpRequest.getString(path); return await HttpRequest.getString(path);
} catch (e) { } catch (e) {
print('Couldnt open $path'); print('Couldnt open $path');
} }
@ -17,7 +14,7 @@ Future<String> fetchRemoteSitemap() async {
} }
// Parse the list of elements and detect pages from this list // Parse the list of elements and detect pages from this list
Map<String, String> detectPages(List<dom.Element> t_sitemap, Map<String, String> detectPages(List<Element> t_sitemap,
[String t_prefix, Map<String, String> t_links]) { [String t_prefix, Map<String, String> t_links]) {
t_links ??= <String, String>{}; t_links ??= <String, String>{};
@ -47,17 +44,18 @@ Map<String, String> detectPages(List<dom.Element> t_sitemap,
// from the sitemap. // from the sitemap.
Future<Map<String, String>> parseSitemap() async { Future<Map<String, String>> parseSitemap() async {
final content = await fetchRemoteSitemap(); final content = await fetchRemoteSitemap();
final sitemap = parse(content).getElementsByClassName('org-ul')[0].children; final sitemap = Element.ul()..innerHtml = content;
return detectPages(sitemap); final sitemapNodes = sitemap.querySelector('ul').children;
return detectPages(sitemapNodes);
} }
Future<void> createSitemap() async { Future<void> createSitemap() async {
final sitemap = await parseSitemap(); final sitemap = await parseSitemap();
final pages = html.querySelector('#drop-page'); final pages = querySelector('#drop-page');
sitemap.forEach((url, name) { sitemap.forEach((url, name) {
final link = html.Element.li() final link = Element.li()
..classes.add('dropdown-item') ..classes.add('dropdown-item')
..append(html.Element.a() ..append(Element.a()
..attributes['href'] = url ..attributes['href'] = url
..innerText = name); ..innerText = name);
pages.append(link); pages.append(link);

View File

@ -1,4 +1,4 @@
import 'dart:html'; import 'dart:html' show DivElement, Element, querySelector, querySelectorAll;
import './navbar.dart' show makeNavbar; import './navbar.dart' show makeNavbar;

View File

@ -1,53 +1,23 @@
import 'dart:html'; import 'dart:html';
class Theme {
String _name;
String _icon;
Theme(String t_name, String t_icon) {
_name = t_name;
_icon = t_icon;
}
String getIcon() => _icon;
String getName() => _name;
}
final themes = {
'light': Theme('light', 'fa-sun'),
'dark': Theme('dark', 'fa-lightbulb'),
'black': Theme('black', 'fa-moon')
};
final localStorage = window.localStorage; final localStorage = window.localStorage;
void enableThemeChanger() { Future<void> setTheme([String theme]) async {
final darkBtn = querySelector('#darkBtn'); final currentTheme = theme ?? localStorage['theme'] ??
final lightBtn = querySelector('#lightBtn');
final blackBtn = querySelector('#blackBtn');
lightBtn.onClick.listen((_) => switchTheme(themes['light']));
darkBtn.onClick.listen((_) => switchTheme(themes['dark']));
blackBtn.onClick.listen((_) => switchTheme(themes['black']));
}
Future<void> setTheme() async {
final currentTheme = themes[localStorage['theme']] ??
() { () {
final devicePrefersDark = final devicePrefersDark =
window.matchMedia('(prefers-color-scheme: dark)').matches; window.matchMedia('(prefers-color-scheme: dark)').matches;
return themes[devicePrefersDark ? 'dark' : 'light']; return devicePrefersDark ? 'dark' : 'light';
}(); }();
localStorage['theme'] = currentTheme;
querySelector('body') querySelector('body')
..classes.clear() ..classes.clear()
..classes.add(currentTheme.getName()); ..classes.add(currentTheme);
} }
void switchTheme(Theme currentTheme) { void enableThemeChanger() {
// Set HTML theme final themes = <String>['light', 'dark', 'black'];
querySelector('body') themes.forEach((theme) =>
..classes.clear() querySelector('#${theme}Btn').onClick.listen((_) => setTheme(theme))
..classes.add(currentTheme.getName()); );
// Set storage theme
localStorage['theme'] = currentTheme.getName();
} }