diff --git a/pubspec.yaml b/pubspec.yaml index 3b48081..cf94c11 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -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 diff --git a/web/dart/main.dart b/web/dart/main.dart index eb182ef..8a78c18 100644 --- a/web/dart/main.dart +++ b/web/dart/main.dart @@ -4,7 +4,8 @@ import './theme.dart' show enableThemeChanger, setTheme; Future main() async { await setTheme(); - await reorganizeHtml() - .then((_) => enableThemeChanger()) - .then((_) => createSitemap()); + await reorganizeHtml().then((_) { + enableThemeChanger(); + createSitemap(); + }); } diff --git a/web/dart/navbar.dart b/web/dart/navbar.dart index 85d46ac..bda7124 100644 --- a/web/dart/navbar.dart +++ b/web/dart/navbar.dart @@ -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 = { ''), 'theme': SvgElement.svg( ''), - 'sun': SvgElement.svg( - ''), - 'lightbulb': SvgElement.svg( - ''), - 'moon': SvgElement.svg( - ''), }; // Get the current page’s title @@ -117,7 +111,7 @@ Future makeShare() async { // Create the theme changer Future 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 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 diff --git a/web/dart/parse_sitemap.dart b/web/dart/parse_sitemap.dart index b38ab98..92d38ff 100644 --- a/web/dart/parse_sitemap.dart +++ b/web/dart/parse_sitemap.dart @@ -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 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 fetchRemoteSitemap() async { } // Parse the list of elements and detect pages from this list -Map detectPages(List t_sitemap, +Map detectPages(List t_sitemap, [String t_prefix, Map t_links]) { t_links ??= {}; @@ -47,17 +44,18 @@ Map detectPages(List t_sitemap, // from the sitemap. Future> 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 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); diff --git a/web/dart/reorganize_html.dart b/web/dart/reorganize_html.dart index 07b8046..72a5ce2 100644 --- a/web/dart/reorganize_html.dart +++ b/web/dart/reorganize_html.dart @@ -1,4 +1,4 @@ -import 'dart:html'; +import 'dart:html' show DivElement, Element, querySelector, querySelectorAll; import './navbar.dart' show makeNavbar; diff --git a/web/dart/theme.dart b/web/dart/theme.dart index 676bfd2..ec6c7e3 100644 --- a/web/dart/theme.dart +++ b/web/dart/theme.dart @@ -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 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 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 = ['light', 'dark', 'black']; + themes.forEach((theme) => + querySelector('#${theme}Btn').onClick.listen((_) => setTheme(theme)) + ); }