-
-
Notifications
You must be signed in to change notification settings - Fork 278
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'topic-landing' of https://github.com/Sefaria/Sefaria-Pr…
…oject into topic-landing
- Loading branch information
Showing
10 changed files
with
173 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import React from "react"; | ||
|
|
||
| export const RainbowLine = ({rainbowClassname}) => { | ||
| return ( | ||
| <div className={`categoryColorLineRainbow ${rainbowClassname}`}/> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import React from 'react'; | ||
| import {useEffect, useState} from "react"; | ||
| import {WordSalad} from "../WordSalad"; | ||
| import Sefaria from "../sefaria/sefaria"; | ||
| import {InterfaceText} from "../Misc"; | ||
| import {RainbowLine} from "../RainbowLine"; | ||
|
|
||
|
|
||
| export const TopicSalad = () => { | ||
|
|
||
| const [salad, setSalad] = useState([]); | ||
|
|
||
| const renderSaladItem = (item) => { | ||
| return(<a href={`/topics/${item.slug}`} className="topic-salad-item"> | ||
| <InterfaceText text={item.text}/> | ||
| </a>) | ||
| } | ||
|
|
||
| const fetchRandomSaladItems = async () => { | ||
| const poolName = Sefaria.getLangSpecificTopicPoolName('general'); | ||
| const topics = await Sefaria.getTopicsByPool(poolName, 50); | ||
| const saladItems = topics.map(topic=>({slug: topic.slug, text: topic.primaryTitle})); | ||
| return saladItems; | ||
| } | ||
|
|
||
| const loadSalad = async () => { | ||
| const saladItems = await fetchRandomSaladItems(); | ||
| setSalad(saladItems); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| loadSalad(); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <> | ||
| <RainbowLine rainbowClassname={"topic-landing-upper-rainbow"}/> | ||
| <div className='topic-salad'> | ||
| <WordSalad renderItem={renderSaladItem} | ||
| numLines={5} | ||
| salad={salad}/> | ||
| </div> | ||
| <RainbowLine rainbowClassname={"topic-landing-lower-rainbow"}/> | ||
| </> | ||
|
|
||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import React from 'react'; | ||
|
|
||
|
|
||
| export const WordSalad = ({ numLines, salad, renderItem }) => { | ||
| /** | ||
| * This component renders a collection of items, styled to fit within a specified | ||
| * number of lines. Each item can be rendered using a custom `renderItem` function, and | ||
| * spaces within the items are replaced with non-breaking spaces to ensure consistent | ||
| * line breaking behavior in CSS. | ||
| * | ||
| * @param {number} props.numLines - The number of lines the container should display. | ||
| * @param {Array} props.salad - An array of objects representing the items to display. | ||
| * @param {Function} props.renderItem - A function that receives an item from the `salad` array | ||
| * and returns a React element to render it. | ||
| */ | ||
|
|
||
| const renderItemWithSpacesForBreaks = (item)=>{ | ||
| // inner span to prevent wrapping on spaces mid-item, outer span with trailing space to allow wrapping between items | ||
| const trailingSpacedElement = <span><span className='no-wrapping-salad-item-container'>{renderItem(item)}</span> </span> | ||
| return trailingSpacedElement; | ||
| } | ||
|
|
||
|
|
||
| return ( | ||
| <div className="salad-container" style={{ '--num-lines': numLines }}> | ||
| {salad.map(renderItemWithSpacesForBreaks)} | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters