feat: Added title tag support
This commit is contained in:
parent
d6bdb8b3c0
commit
0427296110
@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>The latest 1000 photography and art images on nostr | nostr-slideshow</title>
|
||||
<title>nostr-slideshow</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
63
package-lock.json
generated
63
package-lock.json
generated
@ -12,11 +12,13 @@
|
||||
"@nostr-dev-kit/ndk-react": "^0.0.1",
|
||||
"nostr-tools": "^1.12.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
"react-dom": "^18.2.0",
|
||||
"react-helmet": "^6.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.37",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"@types/react-helmet": "^6.1.6",
|
||||
"@typescript-eslint/eslint-plugin": "^5.59.0",
|
||||
"@typescript-eslint/parser": "^5.59.0",
|
||||
"@vitejs/plugin-react": "^4.0.0",
|
||||
@ -1120,6 +1122,15 @@
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-helmet": {
|
||||
"version": "6.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.6.tgz",
|
||||
"integrity": "sha512-ZKcoOdW/Tg+kiUbkFCBtvDw0k3nD4HJ/h/B9yWxN4uDO8OkRksWTO+EL+z/Qu3aHTeTll3Ro0Cc/8UhwBCMG5A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/scheduler": {
|
||||
"version": "0.16.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
|
||||
@ -3951,6 +3962,14 @@
|
||||
"which": "bin/which"
|
||||
}
|
||||
},
|
||||
"node_modules/object-assign": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/object-inspect": {
|
||||
"version": "1.12.3",
|
||||
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
|
||||
@ -4230,6 +4249,21 @@
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
},
|
||||
"node_modules/prop-types/node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"node_modules/punycode": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
|
||||
@ -4288,6 +4322,25 @@
|
||||
"react": "^18.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-fast-compare": {
|
||||
"version": "3.2.2",
|
||||
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
|
||||
"integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
|
||||
},
|
||||
"node_modules/react-helmet": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
|
||||
"integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
|
||||
"dependencies": {
|
||||
"object-assign": "^4.1.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-fast-compare": "^3.1.1",
|
||||
"react-side-effect": "^2.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
|
||||
@ -4302,6 +4355,14 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-side-effect": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
|
||||
"integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
|
||||
"peerDependencies": {
|
||||
"react": "^16.3.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/read-pkg": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
|
||||
|
||||
@ -14,11 +14,13 @@
|
||||
"@nostr-dev-kit/ndk-react": "^0.0.1",
|
||||
"nostr-tools": "^1.12.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
"react-dom": "^18.2.0",
|
||||
"react-helmet": "^6.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.37",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"@types/react-helmet": "^6.1.6",
|
||||
"@typescript-eslint/eslint-plugin": "^5.59.0",
|
||||
"@typescript-eslint/parser": "^5.59.0",
|
||||
"@vitejs/plugin-react": "^4.0.0",
|
||||
|
||||
25
src/App.tsx
25
src/App.tsx
@ -1,11 +1,12 @@
|
||||
import { useNDK } from "@nostr-dev-kit/ndk-react";
|
||||
import "./App.css";
|
||||
import { nip19 } from "nostr-tools";
|
||||
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { NDKFilter, NDKUser } from "@nostr-dev-kit/ndk";
|
||||
import AuthorProfile from "./AuthorProfile";
|
||||
import IconFullScreen from "./IconFullScreen";
|
||||
import Slide from "./Slide";
|
||||
import { Helmet } from "react-helmet";
|
||||
|
||||
type NostrImage = {
|
||||
url: string;
|
||||
@ -24,7 +25,9 @@ const parseUrl = () => {
|
||||
return { npub, tags };
|
||||
};
|
||||
|
||||
const buildFilter = () => {
|
||||
const buildFilter = (
|
||||
setTitle: React.Dispatch<React.SetStateAction<string>>
|
||||
) => {
|
||||
const filter: NDKFilter = {
|
||||
kinds: [1],
|
||||
limit: 1000,
|
||||
@ -37,7 +40,10 @@ const buildFilter = () => {
|
||||
} else {
|
||||
if (tags) {
|
||||
filter["#t"] = tags.split(",");
|
||||
setTitle("#" + tags.replace(",", " #") + " | nostr-slideshow");
|
||||
} else {
|
||||
setTitle("Random photos from popular hashtags | nostr-slideshow");
|
||||
|
||||
// Default tags
|
||||
filter["#t"] = [
|
||||
"photography",
|
||||
@ -73,9 +79,10 @@ const App = () => {
|
||||
const images = useRef<NostrImage[]>([]);
|
||||
const [activeImages, setActiveImages] = useState<NostrImage[]>([]);
|
||||
const upcommingImage = useRef<NostrImage>();
|
||||
const [title, setTitle] = useState("nostr-slideshow");
|
||||
|
||||
useEffect(() => {
|
||||
const postSubscription = ndk.subscribe(buildFilter());
|
||||
const postSubscription = ndk.subscribe(buildFilter(setTitle));
|
||||
|
||||
postSubscription.on("event", (event) => {
|
||||
setPosts((oldPosts) => {
|
||||
@ -138,8 +145,20 @@ const App = () => {
|
||||
const activeNpub = upcommingImage?.current?.author?.npub;
|
||||
const activeProfile = activeNpub && getProfile(activeNpub);
|
||||
|
||||
useEffect(() => {
|
||||
const {npub}=parseUrl();
|
||||
if (npub && activeProfile && activeProfile.displayName) {
|
||||
setTitle(
|
||||
activeProfile.displayName || activeProfile.name + " | nostr-slideshow"
|
||||
);
|
||||
}
|
||||
}, [activeProfile]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{title}</title>
|
||||
</Helmet>
|
||||
{!fullScreen && (
|
||||
<div className="controls">
|
||||
<button
|
||||
|
||||
Loading…
Reference in New Issue
Block a user