Merge pull request #17 from MarvNC:improve-list-styles

Improve Content List Styling

src/util/yomitan/readme.md → readme.md

@@ -14,6 +14,6 @@ This Yomitan dictionary is built off the free data provided by words.hk and is
 licensed under the Non-Commercial Open Data License 1.0 that
 [words.hk](https://words.hk/base/hoifong/) is.
 
-I took a lot of inspiration from
+I took a lot of inspiration (copied) design ideas and styling from
 [Stephenmk's Jitendex](https://github.com/stephenmk/Jitendex) in designing this
 dictionary.

src/util/yomitan/convertEntryToDetailedDefinition.js

@@ -21,7 +21,7 @@ function convertEntryToDetailedDefinition(entry) {
         },
         lang: 'yue',
         content: {
-          tag: 'ol',
+          tag: 'ul',
           data: {
             wordshk: 'sense-list',
           },

src/util/yomitan/convertSenseToSC.js

@@ -71,7 +71,7 @@ function convertSenseToLiSC(sense) {
         data: {
           wordshk: 'explanation',
         },
-        content: convertLanguageDataToUlSC(sense.explanation, false),
+        content: convertLanguageDataToLiSC(sense.explanation, true),
       },
       {
         tag: 'div',
@@ -98,29 +98,29 @@ function convertExampleToSC(
   exampleText,
   exampleEmoji
 ) {
-  return {
-    tag: 'div',
-    data: {
-      wordshk: exampleType,
+  return [
+    {
+      tag: 'li',
+      style: {
+        listStyleType: `"${exampleEmoji}"`,
+      },
+      data: {
+        wordshk: 'example-type-header',
+      },
+      content: exampleText,
     },
-    content: [
-      {
-        tag: 'ul',
-        content: {
-          tag: 'li',
-          content: [
-            exampleText,
-            ...languageDatas.map((languageData) => {
-              return convertLanguageDataToUlSC(languageData, false);
-            }),
-          ],
-        },
-        style: {
-          listStyleType: `"${exampleEmoji}"`,
-        },
+    {
+      tag: 'ul',
+      data: {
+        wordshk: exampleType,
       },
-    ],
-  };
+      content: [
+        ...languageDatas.map((languageData) => {
+          return convertLanguageDataToLiSC(languageData, false);
+        }),
+      ],
+    },
+  ];
 }
 
 /**
@@ -130,19 +130,18 @@ function convertExampleToSC(
  or an example
  * @returns {import('yomichan-dict-builder/dist/types/yomitan/termbank').StructuredContent}
  */
-function convertLanguageDataToUlSC(languageData, isExplanation) {
+function convertLanguageDataToLiSC(languageData, isExplanation) {
   /**
    * @type {import('yomichan-dict-builder/dist/types/yomitan/termbank').StructuredContent[]}
    */
-  const languageLiScArray = [];
+  const languageDivArray = [];
 
   for (const language of Object.keys(languageData)) {
-    languageLiScArray.push(
-      ...convertLanguageEntryToLi(
+    languageDivArray.push(
+      ...convertLanguageEntryToDiv(
         // @ts-ignore
         language,
-        languageData[language],
-        isExplanation
+        languageData[language]
       )
     );
   }
@@ -151,11 +150,16 @@ function convertLanguageDataToUlSC(languageData, isExplanation) {
    * @type {import('yomichan-dict-builder/dist/types/yomitan/termbank').StructuredContent}
    */
   const sc = {
-    tag: 'ul',
+    tag: 'li',
+    style: {
+      marginTop: '0.2em',
+      marginBottom: '0.5em',
+      listStyleType: isExplanation ? 'none' : 'circle',
+    },
     data: {
       wordshk: isExplanation ? 'explanation' : 'example',
     },
-    content: languageLiScArray,
+    content: languageDivArray,
   };
 
   return sc;
@@ -165,55 +169,56 @@ function convertLanguageDataToUlSC(languageData, isExplanation) {
  * Converts a single language entry to a li item
  * @param {Language} language
  * @param {string[]} languageTexts
- * @param {boolean} isExplanation
  * @returns {import('yomichan-dict-builder/dist/types/yomitan/termbank').StructuredContent[]}
  */
-function convertLanguageEntryToLi(language, languageTexts, isExplanation) {
+function convertLanguageEntryToDiv(language, languageTexts) {
   /**
    * @type {import('yomichan-dict-builder/dist/types/yomitan/termbank').StructuredContent[]}
    */
   const languageLiScArray = [];
   const languageInfo = languages[language];
   for (const languageText of languageTexts) {
-    // Span tag for language text
     /**
      * @type {import('yomichan-dict-builder/dist/types/yomitan/termbank').StructuredContent}
      */
-    const textSpan = {
+    const textContentSpan = {
       tag: 'span',
       data: {
         wordshk: 'langtext',
       },
       content: convertTextToSC(languageText, languageInfo.langCode),
     };
-    if (!isExplanation) {
-      // Change text size for selected languages
-      const cjkLangs = ['yue', 'zho', 'jpn', 'kor', 'lzh'];
-      const makeSmaller = ['eng'];
-      const isCJK = cjkLangs.includes(language);
-      textSpan.style = {
-        fontSize: isCJK ? '120%' : '80%',
-      };
+    // Change text size for selected languages
+    const cjkLangs = ['yue', 'zho', 'jpn', 'kor', 'lzh'];
+    const isCJK = cjkLangs.includes(language);
+    textContentSpan.style = {
+      fontSize: isCJK ? '120%' : '80%',
+    };
+
+    /**
+     * @type {import('yomichan-dict-builder/dist/types/yomitan/termbank').StructuredContent[]}
+     */
+    const liChildren = [textContentSpan];
+
+    // Only push lang tag if non yue/eng language
+    const noLanguageTagNecessaryLanguages = ['yue', 'eng'];
+    if (!noLanguageTagNecessaryLanguages.includes(language)) {
+      liChildren.unshift({
+        tag: 'span',
+        data: {
+          wordshk: 'langSignifier',
+        },
+        style: {
+          color: '#888',
+        },
+        content: `${languageInfo.name}› `,
+      });
     }
+
     languageLiScArray.push({
-      tag: 'li',
+      tag: 'div',
       lang: languageInfo.langCode,
-      content: [
-        // Span tag for language name/abbreviation
-        {
-          tag: 'span',
-          data: {
-            wordshk: 'lang',
-          },
-          style: {
-            color: '#666',
-          },
-          content: `<${
-            isExplanation ? languageInfo.name : languageInfo.shortName
-          }> `,
-        },
-        textSpan,
-      ],
+      content: liChildren,
       data: {
         wordshk: languageInfo.langCode,
       },
@@ -223,4 +228,4 @@ function convertLanguageEntryToLi(language, languageTexts, isExplanation) {
   return languageLiScArray;
 }
 
-export { convertSenseToLiSC, convertLanguageDataToUlSC };
+export { convertSenseToLiSC };

src/util/yomitan/createEntryAttribution.js

@@ -13,6 +13,8 @@ function createEntryAttribution(entry) {
     style: {
       fontSize: '0.7em',
       textAlign: 'right',
+      // The examples/definitions above have marginBottom set
+      marginTop: '-0.4em',
     },
     content: [
       {

src/util/yomitan/parseTextToSC.js

@@ -11,25 +11,26 @@ function convertTextToSC(rawText, languageCode) {
   if (!rubyTextLangs.includes(languageCode)) {
     return rawText;
   }
+  const cleanedText = cleanRawText(rawText);
   // Parse brackets for possible reading
   const bracketRegex = /(.+)\(([^\(\)]+)\)$/;
-  const [_, phrase, reading] = rawText.match(bracketRegex) || [];
+  const [_, phrase, reading] = cleanedText.match(bracketRegex) || [];
 
   if (!phrase || !reading) {
-    return rawText;
+    return cleanedText;
   }
 
   // If reading doesn't have alphanumeric characters, it's not a jyut reading
   const hasEnglishChars = /[a-zA-Z0-9]/.test(reading);
   if (!hasEnglishChars) {
-    return rawText;
+    return cleanedText;
   }
 
   try {
-    const readings = parseCantoneseReadings(cleanRawText(phrase), reading);
+    const readings = parseCantoneseReadings(phrase, reading);
     return readings.map(convertReadingToRubySC);
   } catch (error) {
-    return rawText;
+    return cleanedText;
   }
 }