OpenSource/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated mode select

Browse Source
This commit is contained in:
Staples1010 2024-08-08 19:10:42 +01:00
parent 2bf62d1d78
commit 260088a5eb
2 changed files with 61 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
docs/widgets/services/linkwarden.md
View File

@ -14,17 +14,14 @@ widget:
key: myApiKeyHere # On your Linkwarden install, go to Settings > Access Tokens. Generate a token. key: myApiKeyHere # On your Linkwarden install, go to Settings > Access Tokens. Generate a token.
``` ```
Use `mode` to show the stats found in the fields and/or the recent bookmarks. Use `mode` to show a list of recent bookmarks.
Examples:
`mode: ["stats", "recent"]` or `mode: ["stats"]` or `mode: ["recent"]`
```yaml ```yaml
widget: widget:
type: linkwarden type: linkwarden
url: http://linkwarden.host.or.ip url: http://linkwarden.host.or.ip
key: myApiKeyHere key: myApiKeyHere
mode: ["stats", "recent"] mode: ["recent"]
``` ```
Use `params` to set which collections and/or tags to display links from. Use `params` to set which collections and/or tags to display links from.

116
src/widgets/linkwarden/component.jsx
View File

@ -10,7 +10,7 @@ export default function Component({ service }) {
// Assign icons. Assign recent/collections/tags to query by id(s) // Assign icons. Assign recent/collections/tags to query by id(s)
const bookmarkTypes = useMemo( const bookmarkTypes = useMemo(
() => ({ () => ({
recent: { ids: widget.mode.includes("recent") ? ["0"] : [] }, // "0" Is a made-up number used to allow looping in processBookmarks() recent: { ids: widget.mode?.includes("recent") ? ["0"] : [] }, // "0" Is a made-up number used to allow looping in processBookmarks()
collection: { collection: {
ids: widget.params?.collectionIds ? widget.params.collectionIds : [], ids: widget.params?.collectionIds ? widget.params.collectionIds : [],
}, },
@ -195,64 +195,66 @@ export default function Component({ service }) {
// Render when data is available // Render when data is available
return ( return (
<> <>
{widget.mode.includes("stats") && ( <Container service={service}>
<Container service={service}> <Block label="linkwarden.links" value={stats.totalLinks} />
<Block label="linkwarden.links" value={stats.totalLinks} /> <Block label="linkwarden.collections" value={stats.collections.total} />
<Block label="linkwarden.collections" value={stats.collections.total} /> <Block label="linkwarden.tags" value={stats.tags.total} />
<Block label="linkwarden.tags" value={stats.tags.total} /> </Container>
</Container>
)}
{Object.keys(bookmarks).map((type) => ( {Object.keys(bookmarks).map((type) => {
<div const dataAvailable = Object.keys(bookmarks[type].data).length > 0;
key={type}
className="service-container grid gap-2 p-1" return dataAvailable ? (
style={{ <div
gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", key={type}
}} className="service-container grid gap-2 p-1"
> style={{
{Object.values(bookmarks[type].data).map((bookmarkList) => ( gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
<div key={bookmarkList.id} className="relative w-full text-left"> }}
<div className="flex text-sm mb-2"> >
<a href={bookmarkList.url} target="_blank" rel="noopener noreferrer" className="grow font-bold"> {Object.values(bookmarks[type].data).map((bookmarkList) => (
{`${bookmarks[type].icon} ${bookmarkList.title}`} <div key={bookmarkList.id} className="relative w-full text-left">
</a> <div className="flex text-sm mb-2">
<span>{`(${bookmarkList.total})`}</span> <a href={bookmarkList.url} target="_blank" rel="noopener noreferrer" className="grow font-bold">
{`${bookmarks[type].icon} ${bookmarkList.title}`}
</a>
<span>{`(${bookmarkList.total})`}</span>
</div>
<ul
className="max-h-[17em] overflow-scroll flex flex-col gap-2"
onScroll={(e) => handleScroll(e, bookmarkList.id, type, bookmarkList.cursor)}
>
{Object.values(bookmarkList.bookmarks).map(({ id, url, name, description }) => (
<li id={id} key={`${bookmarkList.title}-${type}-${id}`}>
<a
href={url}
target="_blank"
rel="noopener noreferrer"
className="bg-theme-200/50 dark:bg-theme-900/20 hover:bg-theme-200/75 hover:dark:bg-theme-900/50 flex-1 flex gap-2 rounded p-2 service-block"
>
<span className="w-8 min-w-8 flex items-center justify-center">🔗</span>
<div className="flex flex-col grow">
<div className="font-bold text-xs uppercase break-all overflow-hidden line-clamp-1 overflow-ellipsis">
{name || description}
</div>
<div className="font-thin text-xs break-all overflow-hidden line-clamp-1 overflow-ellipsis">
{url}
</div>
</div>
</a>
</li>
))}
{fetchingMore[type][bookmarkList.id] && (
<li className="text-center">
<span className="text-sm">Loading more...</span>
</li>
)}
</ul>
</div> </div>
<ul ))}
className="max-h-[17em] overflow-scroll flex flex-col gap-2" </div>
onScroll={(e) => handleScroll(e, bookmarkList.id, type, bookmarkList.cursor)} ) : null; // Render nothing if there's no data
> })}
{Object.values(bookmarkList.bookmarks).map(({ id, url, name, description }) => (
<li id={id} key={`${bookmarkList.title}-${type}-${id}`}>
<a
href={url}
target="_blank"
rel="noopener noreferrer"
className="bg-theme-200/50 dark:bg-theme-900/20 hover:bg-theme-200/75 hover:dark:bg-theme-900/50 flex-1 flex gap-2 rounded p-2 service-block"
>
<span className="w-8 min-w-8 flex items-center justify-center">🔗</span>
<div className="flex flex-col grow">
<div className="font-bold text-xs uppercase break-all overflow-hidden line-clamp-1 overflow-ellipsis">
{name || description}
</div>
<div className="font-thin text-xs break-all overflow-hidden line-clamp-1 overflow-ellipsis">
{url}
</div>
</div>
</a>
</li>
))}
{fetchingMore[type][bookmarkList.id] && (
<li className="text-center">
<span className="text-sm">Loading more...</span>
</li>
)}
</ul>
</div>
))}
</div>
))}
</> </>
); );
} }