phundrak/langue-phundrak-com
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Dart backend update and upgrade, visual overhaul, additionally some Ñyqy updates that were meant for master branch #1

Merged
phundrak merged 38 commits from develop into master 2020-05-05 11:44:27 +00:00
Conversation 2 Commits 38 Files Changed 44 +148 -59
4 changed files with 148 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 1ab53daa10 - Show all commits

24
TODOs.org
View File

@ -1,14 +1,22 @@
* TODO Organization of HTML [1/3] * TODO Organization of HTML [2/3]
** DONE Add button to display TOC ** DONE Add button to display TOC
CLOSED: [2020-04-28 mar. 22:30] CLOSED: [2020-04-28 mar. 22:30]
** TODO Add link to images that don’t have any ** TODO Add link to images that don’t have any
** TODO Add share links [0/3] ** DONE Add share links [5/5]
*** TODO Add Twitter share CLOSED: [2020-04-29 mer. 00:03]
*** TODO Add Email share *** DONE Add Twitter share
*** TODO Add LinkedIn share CLOSED: [2020-04-28 mar. 23:22]
*** TODO Add Facebook share *** DONE Add Reddit share
* TODO Styling [1/3] CLOSED: [2020-04-28 mar. 23:23]
*** DONE Add Facebook share
CLOSED: [2020-04-28 mar. 23:23]
*** DONE Add LinkedIn share
CLOSED: [2020-04-29 mer. 00:03]
*** DONE Add Email share
CLOSED: [2020-04-29 mer. 00:03]
* TODO Styling [2/3]
** TODO Tables ** TODO Tables
** DONE Hint bubbles for phonetics (Ñyqy) ** DONE Hint bubbles for phonetics (Ñyqy)
CLOSED: [2020-04-28 mar. 22:31] CLOSED: [2020-04-28 mar. 22:31]
** TODO Links ** DONE Links
CLOSED: [2020-04-29 mer. 00:03]

61
web/dart/reorganize_html.dart
View File

@ -15,7 +15,7 @@ Element makeIcon(List<String> classes, [String id]) {
return icon; return icon;
} }
Future<Element> addLanguages(Element navbar) async { Future<Element> makeLanguages() async {
// Languages // Languages
var languages = Element.ul() var languages = Element.ul()
..attributes['id'] = 'drop-lang' ..attributes['id'] = 'drop-lang'
@ -32,14 +32,12 @@ Future<Element> addLanguages(Element navbar) async {
languages.insertAdjacentElement('beforeEnd', link); languages.insertAdjacentElement('beforeEnd', link);
}) })
}); });
navbar.append(Element.li() return Element.li()
..append(Element.a() ..append(Element.a()
..attributes['href'] = 'javascript:void(0)' ..attributes['href'] = 'javascript:void(0)'
..append(makeIcon(['fas', 'fa-language']))) ..append(makeIcon(['fas', 'fa-language'])))
// ..innerText = 'Langues')
..classes.addAll(['nav-item', 'has-dropdown']) ..classes.addAll(['nav-item', 'has-dropdown'])
..insertAdjacentElement('beforeEnd', languages)); ..insertAdjacentElement('beforeEnd', languages);
return navbar;
} }
Element makeTocDropDown() { Element makeTocDropDown() {
@ -65,20 +63,58 @@ Element makeThemeChanger() {
..classes.addAll(['nav-item', 'has-dropdown']) ..classes.addAll(['nav-item', 'has-dropdown'])
..append(Element.a() ..append(Element.a()
..attributes['href'] = 'javascript:void(0)' ..attributes['href'] = 'javascript:void(0)'
..append(makeIcon(['fas', 'fa-sun'])) ..append(Element.span()
..append(makeIcon(['fas', 'fa-moon']))) ..classes.add('fa-stack')
..style.verticalAlign = 'top'
..append(makeIcon(['fas', 'fa-sun', 'fa-stack-1x'])..style.fontSize = '0.9em')
..append(makeIcon(['fas', 'fa-moon', 'fa-stack-1x']))))
..append(Element.ul() ..append(Element.ul()
..classes.add('dropdown') ..classes.add('dropdown')
..attributes['id'] = 'theme-dropdown' ..attributes['id'] = 'theme-dropdown'
..append(makeThemeItem('lightBtn', makeIcon(['fas', 'fa-sun']), 'Clair')) ..append(makeThemeItem('lightBtn', makeIcon(['fas', 'fa-sun']), 'Clair'))
..append(makeThemeItem('darkBtn', makeIcon(['fas', 'fa-lightbulb']), 'Sombre')) ..append(
..append(makeThemeItem('blackBtn', makeIcon(['fas', 'fa-moon']), 'Noir'))); makeThemeItem('darkBtn', makeIcon(['fas', 'fa-lightbulb']), 'Sombre'))
..append(
makeThemeItem('blackBtn', makeIcon(['fas', 'fa-moon']), 'Noir')));
} }
// Add a navbar atop of the HTML body, containing two buttons: // Add a navbar atop of the HTML body, containing two buttons:
// - One back to home // - One back to home
// - A dropdown to each language detected in the sitemap // - A dropdown to each language detected in the sitemap
Future<Element> makeNavbar() async { Future<Element> makeNavbar() async {
Element makeShare() {
Element makeShareLink(Element icon, String url) {
return Element.li()
..classes.add('dropdown-item')
..append(Element.a()
..attributes['href'] = url
..attributes['target'] = '_blank'
..append(icon));
}
return Element.li()
..classes.addAll(['nav-item', 'has-dropdown'])
..append(Element.a()
..attributes['href'] = 'javascript:void(0)'
..append(makeIcon(['fas', 'fa-share-alt'])))
..append(Element.ul()
..classes.add('dropdown')
..append(makeShareLink(
makeIcon(['fab', 'fa-twitter-square']),
'https://twitter.com/share?text=${getPageTitle()}'
'&url=${window.location.href}'))
..append(makeShareLink(makeIcon(['fab', 'fa-reddit-square']),
'https://www.reddit.com/submit?title=${getPageTitle()}s&url=${window.location.href}'))
..append(makeShareLink(makeIcon(['fas', 'fa-envelope-square']),
'mailto:?subject=${getPageTitle}&body=${window.location.href}'))
..append(makeShareLink(
makeIcon(['fab', 'fa-linkedin']),
'https://www.linkedin.com/shareArticle?mini=true&url=${window.location.href}'
'&title=${getPageTitle()}'))
..append(makeShareLink(makeIcon(['fab', 'fa-facebook-square']),
'https://www.facebook.com/sharer/sharer.php?u=${window.location.href}')));
}
var navbar_content = Element.ul()..classes.add('navbar-nav'); var navbar_content = Element.ul()..classes.add('navbar-nav');
// Home // Home
@ -94,15 +130,12 @@ Future<Element> makeNavbar() async {
navbar_content.append(makeTocDropDown()); navbar_content.append(makeTocDropDown());
// Add languages // Add languages
navbar_content = await addLanguages(navbar_content); navbar_content.append(await makeLanguages());
// Share icon // Share icon
// TODO Add dropdown for sharing on multiple platforms navbar_content.append(makeShare());
navbar_content = addIcon(navbar_content, ['fas', 'fa-share-alt'], 'shareBtn');
// Theme changer // Theme changer
var theme = window.localStorage['theme'];
theme = (theme == null || theme == 'light') ? 'fa-moon' : 'fa-sun';
navbar_content.append(makeThemeChanger()); navbar_content.append(makeThemeChanger());
// Navbar content added to navbar // Navbar content added to navbar

2
web/headers
View File

@ -34,7 +34,7 @@
#+HTML_HEAD_EXTRA: <link rel="shortcut icon" href="https://cdn.phundrak.com/img/mahakala-128x128.png" type="img/png" media="screen" /> #+HTML_HEAD_EXTRA: <link rel="shortcut icon" href="https://cdn.phundrak.com/img/mahakala-128x128.png" type="img/png" media="screen" />
#+HTML_HEAD_EXTRA: <link rel="shortcut icon" href="https://cdn.phundrak.com/img/favicon.ico" type="image/x-icon" media="screen" /> #+HTML_HEAD_EXTRA: <link rel="shortcut icon" href="https://cdn.phundrak.com/img/favicon.ico" type="image/x-icon" media="screen" />
#+HTML_HEAD_EXTRA: <script defer src="dart/main.dart.js"></script> #+HTML_HEAD_EXTRA: <script defer src="dart/main.dart.js"></script>
#+HTML_HEAD_EXTRA: <script defer src="https://kit.fontawesome.com/4d42d0c8c5.js"></script> #+HTML_HEAD_EXTRA: <script src="https://kit.fontawesome.com/4d42d0c8c5.js" crossorigin="anonymous"></script>
# ### MACROS ################################################################### # ### MACROS ###################################################################
#+MACRO: newline @@latex:\hspace{0pt}\\@@ @@html:<br>@@ #+MACRO: newline @@latex:\hspace{0pt}\\@@ @@html:<br>@@

120
web/style/style.scss
View File

@ -32,34 +32,34 @@ $grey6: #12181b;
// Accent 1 // Accent 1
// Black // Black
$gradient-accent1-black-left: linear-gradient(to left, $black, $accent1, $accent1); $gradient-accent1-black-left: linear-gradient(to left, $black, $accent1, $accent1);
$gradient-accent1-black-right: linear-gradient(to right, $black, $accent1, $accent1); $gradient-accent1-black-right: linear-gradient(to right, $black, $accent1, $accent1);
// Dark // Dark
$gradient-accent1-dark-left: linear-gradient(to left, $dark, $accent1); $gradient-accent1-dark-left: linear-gradient(to left, $dark, $accent1);
$gradient-accent1-dark-right: linear-gradient(to right, $dark, $accent1); $gradient-accent1-dark-right: linear-gradient(to right, $dark, $accent1);
// Light // Light
$gradient-accent1-light-left: linear-gradient(to left, $light, $accent1); $gradient-accent1-light-left: linear-gradient(to left, $light, $accent1);
$gradient-accent1-light-right: linear-gradient(to right, $light, $accent1); $gradient-accent1-light-right: linear-gradient(to right, $light, $accent1);
// Accent 2 // Accent 2
// Black // Black
$gradient-accent2-black-left: linear-gradient(to left, $black, $accent2, $accent2); $gradient-accent2-black-left: linear-gradient(to left, $black, $accent2, $accent2);
$gradient-accent2-black-right: linear-gradient(to right, $black, $accent2, $accent2); $gradient-accent2-black-right: linear-gradient(to right, $black, $accent2, $accent2);
// Dark // Dark
$gradient-accent2-dark-left: linear-gradient(to left, $dark, $accent2); $gradient-accent2-dark-left: linear-gradient(to left, $dark, $accent2);
$gradient-accent2-dark-right: linear-gradient(to right, $dark, $accent2); $gradient-accent2-dark-right: linear-gradient(to right, $dark, $accent2);
// Light // Light
$gradient-accent2-light-left: linear-gradient(to left, $light, $accent2); $gradient-accent2-light-left: linear-gradient(to left, $light, $accent2);
$gradient-accent2-light-right: linear-gradient(to right, $light, $accent2); $gradient-accent2-light-right: linear-gradient(to right, $light, $accent2);
// Accent 3 // Accent 3
// Black // Black
$gradient-accent3-black-left: linear-gradient(to left, $black, $accent3, $accent3); $gradient-accent3-black-left: linear-gradient(to left, $black, $accent3, $accent3);
$gradient-accent3-black-right: linear-gradient(to right, $black, $accent3, $accent3); $gradient-accent3-black-right: linear-gradient(to right, $black, $accent3, $accent3);
// Dark // Dark
$gradient-accent3-dark-left: linear-gradient(to left, $dark, $accent3); $gradient-accent3-dark-left: linear-gradient(to left, $dark, $accent3);
$gradient-accent3-dark-right: linear-gradient(to right, $dark, $accent3); $gradient-accent3-dark-right: linear-gradient(to right, $dark, $accent3);
// Light // Light
$gradient-accent3-light-left: linear-gradient(to left, $light, $accent3); $gradient-accent3-light-left: linear-gradient(to left, $light, $accent3);
$gradient-accent3-light-right: linear-gradient(to right, $light, $accent3); $gradient-accent3-light-right: linear-gradient(to right, $light, $accent3);
$navbar-height: 70px; $navbar-height: 70px;
$postamble-height: 55px; $postamble-height: 55px;
@ -99,6 +99,18 @@ $postamble-height: 55px;
background: $accent3; background: $accent3;
color: $dark; color: $dark;
} }
#content {
a {
box-shadow: inset 0 -3px 0 $accent3;
transition: box-shadow 300ms ease-in-out;
&:hover {
box-shadow: inset 0 -23px 0 $accent3;
transition: box-shadow 300ms ease-in-out;
}
}
}
} }
.dark, .black { .dark, .black {
@ -136,6 +148,18 @@ $postamble-height: 55px;
background: $accent3; background: $accent3;
color: $dark; color: $dark;
} }
#content {
a {
box-shadow: inset 0 -3px 0 $accent2;
transition: box-shadow 300ms ease-in-out;
&:hover {
box-shadow: inset 0 -23px 0 $accent2;
transition: box-shadow 300ms ease-in-out;
}
}
}
} }
.black { .black {
@ -155,6 +179,18 @@ $postamble-height: 55px;
background: $dark; background: $dark;
color: $light; color: $light;
} }
#content {
a {
box-shadow: inset 0 -3px 0 $accent1;
transition: box-shadow 300ms ease-in-out;
&:hover {
box-shadow: inset 0 -23px 0 $accent1;
transition: box-shadow 300ms ease-in-out;
}
}
}
} }
/* Style *********************************************************************/ /* Style *********************************************************************/
@ -215,7 +251,7 @@ header {
.dropdown { .dropdown {
position: absolute; position: absolute;
opacity: 0; opacity: 0;
z-index: 5; z-index: -1;
border-bottom-right-radius: 8px; border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px; border-bottom-left-radius: 8px;
@ -226,11 +262,31 @@ header {
min-height: 3rem; min-height: 3rem;
margin-top: 1rem; margin-top: 1rem;
padding: 0.5rem; padding: 0.5rem;
top: 0;
box-shadow: rgba(2, 8, 20, 0.1) 0px 0.175em 0.5em; box-shadow: rgba(2, 8, 20, 0.1) 0px 0.175em 0.5em;
transform: translateX(-40%); transform: translateX(-40%);
transition: opacity .15s ease-out; transition: opacity 500ms ease-in-out, top 500ms ease-in-out;
}
.has-dropdown {
&:focus-within {
.dropdown {
opacity: 1;
top: $navbar-height / 1.5;
z-index: 5;
pointer-events: auto;
}
#table-of-contents {
opacity: 1;
top: $navbar-height / 1.5;
z-index: 5;
height: 500%;
pointer-events: auto;
}
}
} }
#theme-dropdown { #theme-dropdown {
@ -244,21 +300,6 @@ header {
transform: translateX(-40%); transform: translateX(-40%);
} }
.has-dropdown {
&:focus-within {
.dropdown {
opacity: 1;
pointer-events: auto;
}
#table-of-contents {
opacity: 1;
height: 500%;
pointer-events: auto;
}
}
}
.dropdown-item { .dropdown-item {
cursor: pointer; cursor: pointer;
@ -297,8 +338,11 @@ header {
padding-top: 0; padding-top: 0;
max-width: 700px; max-width: 700px;
margin: 0 auto; margin: 0 auto;
text-align: justify; text-align: justify;
a {
font-style: italic;
}
} }
#postamble { #postamble {
@ -374,3 +418,7 @@ h4 {
} }
} }
} }
blockquote {
font-style: italic;
}