feat: add feat to open word on papago

esteves-esta · Dec 16, 2023 · 5e048c3 · 5e048c3
1 parent 78bae3c
commit 5e048c3
Show file tree

Hide file tree

Showing 13 changed files with 201 additions and 56 deletions.
diff --git a/README.md b/README.md
@@ -35,6 +35,7 @@ Formatting Humans of Seoul RSS feed to be to practice reading in koreand and be
   - [x] Toggle translation by paragraph
   - [x] Select word from the korean original
   - [x] Show count of words in total
+  - [x] on word try to select or menu open link to papgo  https://papago.naver.com/?sk=ko&tk=en&st=미국
 - [x] Settings for customization
   - [x] Change fonts
   - [x] Change bg and font color
@@ -44,12 +45,9 @@ Formatting Humans of Seoul RSS feed to be to practice reading in koreand and be
 - [x] Style / Follow the prototype
 
 ### ✍️ Todo
-- [ ] List of fonts - have weight available to put on slider
 - [ ] responsive - mobile
 - [x] Post features
   - [ ] Export X words selected
-  - [ ] ?? Export ready to export as anki card ??
-  - [ ] ?? Consume dictionary api to get translation of word selected ??
 
 ---
 

diff --git a/app/package.json b/app/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slider": "^1.1.2",

diff --git a/app/src/components/Header/Header.tsx b/app/src/components/Header/Header.tsx
@@ -26,6 +26,22 @@ function Header() {
     themeReset
   } = React.useContext(ThemeContext);
 
+  const fonts = {
+    "Nanum Myeongjo": [400, 700,800],
+    "Gothic A1": [100,200,300,400,500,600,700,800,900],
+    "Noto Sans KR": [100, 200, 300, 400, 500, 600, 700, 800, 900],
+    "Noto Serif KR": [ 200, 300, 400, 500, 600, 700, 800, 900],
+    "Nanum Gothic Coding": [400, 700],
+    "Gowun Batang": [400, 700],
+    "Cute Font": [400],
+    "Diphylleia": [400],
+    "Gowun Dodum": [400],
+    "Song Myung": [400],
+    "Stylish": [400],
+  }
+
+  const fontFamilies = Object.keys(fonts)
+
   return (
     <header className={classes.header}>
       <h1 className={classes.title}>
@@ -92,19 +108,7 @@ function Header() {
             onValueChange={setFont}
             placeholder="Choose a font"
             label="Theme"
-            options={[
-              "Cute Font",
-              "Diphylleia",
-              "Gothic A1",
-              "Gowun Batang",
-              "Gowun Dodum",
-              "Nanum Gothic Coding",
-              "Nanum Myeongjo",
-              "Noto Sans KR",
-              "Noto Serif KR",
-              "Song Myung",
-              "Stylish"
-            ]}
+            options={fontFamilies}
           />
         </div>
 
@@ -120,17 +124,17 @@ function Header() {
           />
         </div>
 
-        <div className={classes.Field}>
+        {fonts[font].length > 1 && <div className={classes.Field}>
           <label htmlFor="fontWeight">Font Weight</label>
           <SliderCustom
             id="fontWeight"
             value={fontWeight}
             onValueChange={setFontWeight}
-            max={900}
-            min={300}
+            max={fonts[font].at(-1)}
+            min={fonts[font].at(0)}
             step={100}
           />{" "}
-        </div>
+        </div>}
 
         <div className={classes.Field}>
           <label htmlFor="lineHeight">Line spacing</label>

diff --git a/app/src/components/Home/Home.tsx b/app/src/components/Home/Home.tsx
@@ -8,8 +8,8 @@ import PostsNavigation from "../PostsNavigation";
 import { ThemeContext } from "../ThemeProvider";
 
 function Home() {
-  const { color } = React.useContext(ThemeContext);
-  const [container, setContainer] = React.useState(null);
+  const { color, setContainer } = React.useContext(ThemeContext);
+
   const { postOnDisplay } = React.useContext<FeedState>(FeedContext);
   const [openPostsList, setOpenList] = React.useState(false);
   return (
@@ -21,13 +21,12 @@ function Home() {
       >
         <Header />
 
-        {postOnDisplay && <Post />}
+        {postOnDisplay && <Post/>}
       </div>
 
       <PostsNavigation
         setOpen={setOpenList}
         open={openPostsList}
-        container={container}
       />
     </main>
   );

diff --git a/app/src/components/LateralModal/Styles.module.css b/app/src/components/LateralModal/Styles.module.css
@@ -15,10 +15,10 @@
   min-height: 100vh;
   padding: 25px;
   position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(155%, -50%);
-  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  top: 0px;
+  right: 0px;
+  /* transform: translateX(300px); */
+  /* animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1); */
   display: flex;
   flex-direction: column;
   gap: 1.6em;
@@ -38,14 +38,14 @@
   }
 }
 
-@keyframes contentShow {
+/* @keyframes contentShow {
   from {
     opacity: 0;
     transform: translate(200%, -50%);
   }
 
   to {
     opacity: 1;
-    transform: translate(155%, -50%);
+    transform: translate(135%, -50%);
   }
-}
+} */
diff --git a/app/src/components/Post/ParagraphLine.tsx b/app/src/components/Post/ParagraphLine.tsx
@@ -2,7 +2,9 @@ import React, { ForwardedRef } from "react";
 import classes from "./Post.module.css";
 import { FeedContext } from "../FeedProvider";
 import FeedState from "../../interfaces/feedState";
-
+import * as HoverCard from '@radix-ui/react-hover-card';
+import { ExternalLink } from 'lucide-react'
+import { ThemeContext } from "../ThemeProvider";
 interface ParagraphLineProps {
   value: string[];
   hasVisibilityToogle?: boolean;
@@ -96,6 +98,7 @@ function Word({
   onWordPress,
   lineIndex
 }: WordProps) {
+  const { container } = React.useContext(ThemeContext);
   const { setWordsSelected, wordsSelected } =
     React.useContext<FeedState>(FeedContext);
 
@@ -121,29 +124,39 @@ function Word({
     setWordsSelected(newWords);
   };
 
-  const lineClasseDefault = `${classes.word} ${
-    hasWordSelection ? classes.wordPadding : ""
-  }`;
+  const lineClasseDefault = `${classes.word} ${hasWordSelection ? classes.wordPadding : ""
+    }`;
   return (
     <>
       {value.map((word, index) => {
         const isSelected = lineSelected.includes(index);
         const lineClasses =
           isSelected && hasWordSelection ? `${classes.selected}` : "";
         return (
-          <span
-            tabIndex={hasWordSelection && 0}
-            key={`${id}${index}`}
-            onClick={() => toogleSelection(index)}
-            onKeyDown={(event) => {
-              onWordPress && onWordPress(event);
-              if (event.key !== "Tab" && event.key !== "Shift")
-                toogleSelection(index);
-            }}
-            className={`${lineClasseDefault} ${lineClasses}`}
-          >
-            {word}{" "}
-          </span>
+          <HoverCard.Root key={`${id}${index}`}>
+            <HoverCard.Trigger asChild>
+              <span
+                tabIndex={hasWordSelection && 0}
+                onClick={() => toogleSelection(index)}
+                onKeyDown={(event) => {
+                  onWordPress && onWordPress(event);
+                  if (event.key !== "Tab" && event.key !== "Shift")
+                    toogleSelection(index);
+                }}
+                className={`${lineClasseDefault} ${lineClasses}`}
+              >
+                {word}{" "}
+              </span>
+            </HoverCard.Trigger>
+            <HoverCard.Portal container={container}>
+              {hasWordSelection && <HoverCard.Content className={classes.HoverCardContent} sideOffset={5}>
+                <button onClick={() => window.open(` https://papago.naver.com/?sk=ko&tk=en&st=${word} `, '_blank')}>
+                  <ExternalLink /> search on papago
+                </button>
+                <HoverCard.Arrow className={classes.HoverCardArrow} />
+              </HoverCard.Content>}
+            </HoverCard.Portal>
+          </HoverCard.Root>
         );
       })}
     </>

diff --git a/app/src/components/Post/Post.module.css b/app/src/components/Post/Post.module.css
@@ -74,4 +74,101 @@
   font-weight: 900;
   color: var(--color-accent);
   filter: blur(1px)
+}
+
+/* --------------------- */
+
+.HoverCardContent {
+  border-radius: 6px;
+  padding: 20px;
+  width: fit-content;
+  background-color: var(--color-accent);
+  box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+}
+
+.HoverCardContent button {
+  color: var(--color-text);
+  border: 1px solid rgba(68, 68, 68, 0.356);
+  padding: .8em 1.5em;
+  border-radius: 0.2em;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+}
+
+.HoverCardContent button:hover,
+.HoverCardContent button:focus {
+  filter: brightness(29);
+}
+
+.HoverCardContent[data-side='top'] {
+  animation-name: slideDownAndFade;
+}
+
+.HoverCardContent[data-side='right'] {
+  animation-name: slideLeftAndFade;
+}
+
+.HoverCardContent[data-side='bottom'] {
+  animation-name: slideUpAndFade;
+}
+
+.HoverCardContent[data-side='left'] {
+  animation-name: slideRightAndFade;
+}
+
+.HoverCardArrow {
+  fill: var(--color-accent);
+}
+
+@keyframes slideUpAndFade {
+  0% {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideRightAndFade {
+  0% {
+    opacity: 0;
+    transform: translateX(-2px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideDownAndFade {
+  0% {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideLeftAndFade {
+  0% {
+    opacity: 0;
+    transform: translateX(2px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
diff --git a/app/src/components/Post/Post.tsx b/app/src/components/Post/Post.tsx
@@ -6,7 +6,7 @@ import { ThemeContext } from "../ThemeProvider";
 // import { formatDate } from "../../helper/format";
 import ParagraphLine from "./ParagraphLine";
 
-function Post() {
+function Post({ container }) {
   const { postOnDisplay } = React.useContext<FeedState>(FeedContext);
 
   const { korSplit, kor, engSplit, id } = postOnDisplay;

diff --git a/app/src/components/PostsNavigation/PostsNavigation.tsx b/app/src/components/PostsNavigation/PostsNavigation.tsx
@@ -4,10 +4,12 @@ import { FeedContext } from "../FeedProvider";
 import FeedState from "../../interfaces/feedState";
 import classes from "./Styles.module.css";
 import { Slash } from "lucide-react";
+import { ThemeContext } from "../ThemeProvider";
 
 
 
-function PostsNavigation({ container, setOpen, open }) {
+function PostsNavigation({ setOpen, open }) {
+  const {  container } = React.useContext(ThemeContext);
   const { postOnDisplay, setPostOnDisplay, posts, wordsSelected } =
     React.useContext<FeedState>(FeedContext);
 

diff --git a/app/src/components/SelectBox/Select.module.css b/app/src/components/SelectBox/Select.module.css
@@ -16,11 +16,10 @@
 .SelectContent {
   font-family: 'Noto Sans', sans-serif !important;
   text-transform: capitalize;
-  width: 29vw;
+  width: 250px;
   border-radius: 0.2em;
   /* width: 100%; */
-  /* max-height: 80px; */
-
+  max-height:200px;
   background-color: white;
   border: 1px solid rgba(68, 68, 68, 0.356);
 }
@@ -57,4 +56,10 @@
   background-color: rgba(68, 68, 68, 0.2);
 }
 
+.ScrollBtn {
+  display: flex;
+  justify-content: center;
+  color: #444
+}
+
 .SelectItemIndicator {}