From 78bd1e4a4eba37558d583b2516a780e8df147f54 Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Mon, 13 Mar 2023 21:06:45 -0700 Subject: [PATCH] Japanese flashcards! --- assets/styles/root.css | 8 +- config/_default/languages.yaml | 5 + content/nihongo/flashcards/index.jp.md | 6 ++ content/nihongo/flashcards/index.md | 6 ++ content/nihongo/flashcards/old_index.html | 18 ++++ content/nihongo/flashcards/script.js | 49 ++++++++++ content/nihongo/flashcards/style.css | 110 ++++++++++++++++++++++ data/nihongo/flashcards/all.json | 64 +++++++++++++ layouts/_default/single.html | 25 +---- layouts/nihongo/flashcards.html | 25 +++++ layouts/partials/content_header.html | 2 +- layouts/partials/single_scripts.html | 31 +++--- layouts/partials/single_styles.html | 4 + 13 files changed, 315 insertions(+), 38 deletions(-) create mode 100644 content/nihongo/flashcards/index.jp.md create mode 100644 content/nihongo/flashcards/index.md create mode 100644 content/nihongo/flashcards/old_index.html create mode 100644 content/nihongo/flashcards/script.js create mode 100644 content/nihongo/flashcards/style.css create mode 100644 data/nihongo/flashcards/all.json create mode 100644 layouts/nihongo/flashcards.html create mode 100644 layouts/partials/single_styles.html diff --git a/assets/styles/root.css b/assets/styles/root.css index 506975a..f6c49f9 100644 --- a/assets/styles/root.css +++ b/assets/styles/root.css @@ -17,6 +17,8 @@ --purple: 161, 49, 232; --lilac: 187, 121, 245; + --background: var(--white); + --site-nav-link-color: rgb(var(--mid-blue)); --separator-color: rgb(var(--lt-gray)); @@ -42,7 +44,7 @@ --heading-color: rgb(var(--black)); --header-series-arrow-foreground-color: rgb(var(--sub-dk-gray)); - --html-background-color: rgb(var(--white)); + --html-background-color: rgb(var(--background)); --html-color: rgba(var(--black), 0.8); --nav-bulleted-spacing: 0.75rem; @@ -69,6 +71,8 @@ } @media (prefers-color-scheme: dark) { :root { + --background: var(--black); + --separator-color: rgb(var(--dk-gray)); --box-shadow-color: rgba(var(--dk-gray), 0.8); --body-code-background-color: rgb(var(--dk-gray)); @@ -76,7 +80,7 @@ --heading-color: rgb(var(--white)); --header-series-arrow-foreground-color: rgb(var(--super-dk-gray)); - --html-background-color: rgb(var(--black)); + --html-background-color: rgb(var(--background)); --html-color: rgba(var(--white), 0.8); --platter-background-color: rgba(var(--black), var(--platter-background-opacity)); diff --git a/config/_default/languages.yaml b/config/_default/languages.yaml index 7b9bc90..e0da1ed 100644 --- a/config/_default/languages.yaml +++ b/config/_default/languages.yaml @@ -1,4 +1,9 @@ en: + languageName: English weight: 1 es: + languageName: Español weight: 2 +jp: + languageName: 日本語 + weight: 3 diff --git a/content/nihongo/flashcards/index.jp.md b/content/nihongo/flashcards/index.jp.md new file mode 100644 index 0000000..a86452f --- /dev/null +++ b/content/nihongo/flashcards/index.jp.md @@ -0,0 +1,6 @@ +--- +title: 私の日本語 +layout: flashcards +--- + +日本語学生です。 diff --git a/content/nihongo/flashcards/index.md b/content/nihongo/flashcards/index.md new file mode 100644 index 0000000..51e0353 --- /dev/null +++ b/content/nihongo/flashcards/index.md @@ -0,0 +1,6 @@ +--- +title: My Japanese +layout: flashcards +--- + +I am a Japanese language student. diff --git a/content/nihongo/flashcards/old_index.html b/content/nihongo/flashcards/old_index.html new file mode 100644 index 0000000..dc47d91 --- /dev/null +++ b/content/nihongo/flashcards/old_index.html @@ -0,0 +1,18 @@ + + + + + Ruby + + + + +
+

Flash Cards

+
+ + +
+
+ + diff --git a/content/nihongo/flashcards/script.js b/content/nihongo/flashcards/script.js new file mode 100644 index 0000000..c43dd64 --- /dev/null +++ b/content/nihongo/flashcards/script.js @@ -0,0 +1,49 @@ +// Eryn Wells + +document.addEventListener("DOMContentLoaded", (event) => { + const furiganaRegex = /(「(.*?)『(.*?)』」)|.*/g; + + let parseFlashcardString = str => { + let innerHTML = ""; + + for (let match of str.matchAll(furiganaRegex)) { + if (match[2] && match[3]) { + const mainText = match[2]; + const furiganaText = match[3]; + console.debug(`${mainText} is ${mainText.length} characters long`); + innerHTML += `${mainText}(${furiganaText})`; + } else { + innerHTML += match[0]; + } + } + + return innerHTML; + }; + + let cardsContainer = document.querySelector("section.flashcards > ul"); + if (!cardsContainer) { + console.error("Can't find flashcards