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:
parent
8b984e301f
commit
f99d45e8ab
GPG Key ID:
BD7789E705CB8DCA
|
|
@ -8,9 +8,8 @@ environment:
|
|||
sdk: '>=2.7.0 <3.0.0'
|
||||
|
||||
dependencies:
|
||||
html: '^0.14.0+3'
|
||||
|
||||
dev_dependencies:
|
||||
build_runner: ^1.8.0
|
||||
build_runner: ^1.10.1
|
||||
build_web_compilers: ^2.9.0
|
||||
pedantic: ^1.9.0
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@ import './theme.dart' show enableThemeChanger, setTheme;
|
|||
|
||||
Future<void> main() async {
|
||||
await setTheme();
|
||||
await reorganizeHtml()
|
||||
.then((_) => enableThemeChanger())
|
||||
.then((_) => createSitemap());
|
||||
await reorganizeHtml().then((_) {
|
||||
enableThemeChanger();
|
||||
createSitemap();
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import 'dart:html';
|
||||
import 'dart:svg';
|
||||
import 'dart:html' show querySelector, Element, window;
|
||||
import 'dart:svg' show SvgElement;
|
||||
|
||||
// You will see here and there some 'tabindex' attributes added to various HTML
|
||||
// elements, and I’m sure you will ask "Why? They don’t 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>'),
|
||||
'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>'),
|
||||
'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 page’s title
|
||||
|
|
@ -117,7 +111,7 @@ Future<Element> makeShare() async {
|
|||
|
||||
// Create the theme changer
|
||||
Future<Element> makeThemeChanger() async {
|
||||
Element makeThemeItem(String t_btnId, [Element t_icon]) {
|
||||
Element makeThemeItem(String t_btnId) {
|
||||
return Element.li()
|
||||
..classes.add('dropdown-item')
|
||||
..append(Element.span()..attributes['id'] = t_btnId);
|
||||
|
|
@ -135,9 +129,9 @@ Future<Element> makeThemeChanger() async {
|
|||
..append(Element.ul()
|
||||
..classes.add('dropdown')
|
||||
..attributes['id'] = 'theme-dropdown'
|
||||
..append(makeThemeItem('lightBtn', makeIcon(icons['sun'])))
|
||||
..append(makeThemeItem('darkBtn', makeIcon(icons['lightbulb'])))
|
||||
..append(makeThemeItem('blackBtn', makeIcon(icons['moon']))));
|
||||
..append(makeThemeItem('lightBtn'))
|
||||
..append(makeThemeItem('darkBtn'))
|
||||
..append(makeThemeItem('blackBtn')));
|
||||
}
|
||||
|
||||
// Create the dropdown table of contents
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
import 'dart:html' as html show HttpRequest, Element, querySelector;
|
||||
|
||||
import 'package:html/parser.dart' show parse;
|
||||
import 'package:html/dom.dart' as dom show Element;
|
||||
import 'dart:html' show HttpRequest, Element, querySelector;
|
||||
|
||||
final excluded_keywords = {'index', 'CONTRIBUTING', 'LICENSE', 'README'};
|
||||
|
||||
|
|
@ -9,7 +6,7 @@ final excluded_keywords = {'index', 'CONTRIBUTING', 'LICENSE', 'README'};
|
|||
Future<String> fetchRemoteSitemap() async {
|
||||
const path = '/sitemap.html';
|
||||
try {
|
||||
return await html.HttpRequest.getString(path);
|
||||
return await HttpRequest.getString(path);
|
||||
} catch (e) {
|
||||
print('Couldn’t open $path');
|
||||
}
|
||||
|
|
@ -17,7 +14,7 @@ Future<String> fetchRemoteSitemap() async {
|
|||
}
|
||||
|
||||
// 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]) {
|
||||
t_links ??= <String, String>{};
|
||||
|
||||
|
|
@ -47,17 +44,18 @@ Map<String, String> detectPages(List<dom.Element> t_sitemap,
|
|||
// from the sitemap.
|
||||
Future<Map<String, String>> parseSitemap() async {
|
||||
final content = await fetchRemoteSitemap();
|
||||
final sitemap = parse(content).getElementsByClassName('org-ul')[0].children;
|
||||
return detectPages(sitemap);
|
||||
final sitemap = Element.ul()..innerHtml = content;
|
||||
final sitemapNodes = sitemap.querySelector('ul').children;
|
||||
return detectPages(sitemapNodes);
|
||||
}
|
||||
|
||||
Future<void> createSitemap() async {
|
||||
final sitemap = await parseSitemap();
|
||||
final pages = html.querySelector('#drop-page');
|
||||
final pages = querySelector('#drop-page');
|
||||
sitemap.forEach((url, name) {
|
||||
final link = html.Element.li()
|
||||
final link = Element.li()
|
||||
..classes.add('dropdown-item')
|
||||
..append(html.Element.a()
|
||||
..append(Element.a()
|
||||
..attributes['href'] = url
|
||||
..innerText = name);
|
||||
pages.append(link);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import 'dart:html';
|
||||
import 'dart:html' show DivElement, Element, querySelector, querySelectorAll;
|
||||
|
||||
import './navbar.dart' show makeNavbar;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,53 +1,23 @@
|
|||
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;
|
||||
|
||||
Future<void> setTheme([String theme]) async {
|
||||
final currentTheme = theme ?? localStorage['theme'] ??
|
||||
() {
|
||||
final devicePrefersDark =
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
return devicePrefersDark ? 'dark' : 'light';
|
||||
}();
|
||||
localStorage['theme'] = currentTheme;
|
||||
querySelector('body')
|
||||
..classes.clear()
|
||||
..classes.add(currentTheme);
|
||||
}
|
||||
|
||||
void enableThemeChanger() {
|
||||
final darkBtn = querySelector('#darkBtn');
|
||||
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 =
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
return themes[devicePrefersDark ? 'dark' : 'light'];
|
||||
}();
|
||||
querySelector('body')
|
||||
..classes.clear()
|
||||
..classes.add(currentTheme.getName());
|
||||
}
|
||||
|
||||
void switchTheme(Theme currentTheme) {
|
||||
// Set HTML theme
|
||||
querySelector('body')
|
||||
..classes.clear()
|
||||
..classes.add(currentTheme.getName());
|
||||
// Set storage theme
|
||||
localStorage['theme'] = currentTheme.getName();
|
||||
final themes = <String>['light', 'dark', 'black'];
|
||||
themes.forEach((theme) =>
|
||||
querySelector('#${theme}Btn').onClick.listen((_) => setTheme(theme))
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Reference in New Issue