Przeglądaj źródła

feat: add new feature to App component

Adam 3 miesięcy temu
rodzic
commit
09b4024e3e
3 zmienionych plików z 44 dodań i 2 usunięć
  1. 1 1
      backend/themes.json
  2. 8 1
      public/posts/20251025-hey-there.md
  3. 35 0
      src/App.jsx

+ 1 - 1
backend/themes.json

@@ -1,5 +1,5 @@
 {
-  "activeTheme": "forest",
+  "activeTheme": "default",
   "customThemes": [],
   "builtInThemes": [
     {

+ 8 - 1
public/posts/20251025-hey-there.md

@@ -4,7 +4,14 @@ desc: Why does this blog exist?
 > Because it should!
 > 
 
-I've looked at mkdocs and other pseudo-CMSes, and none of them were fitting enough to what I wanted to have, so this exists, and this works... I guess...
+This blog is the result of a search for the right platform. I initially looked at tools like MkDocs and other "pseudo-CMSes"—or static site generators—that focus on creating documentation or simple websites from plain text files. While these tools are great for many people, I found that none of them offered the precise combination of features, flexibility, and minimal overhead that I needed.
 
+Specifically, they either had too many dependencies, were overly opinionated about the site structure, or simply lacked a key component I required. So, instead of trying to force a pre-built solution to fit, I decided to build my own custom platform from the ground up.
+
+This site is that custom solution. It serves my specific needs and avoids the complexities of a full-scale CMS like WordPress and Droopal/DLE.
+
+Can't lie, it works well and pretty speedy!
+
+It exists, and it works... I guess...
 
 Right?

+ 35 - 0
src/App.jsx

@@ -248,6 +248,41 @@ function PostView() {
         }
     }, [slug]);
 
+    useEffect(() => {
+        if (post) {
+            const setMeta = (name, content) => {
+                let element = document.querySelector(`meta[name='${name}']`);
+                if (!element) {
+                    element = document.createElement("meta");
+                    element.setAttribute("name", name);
+                    document.head.appendChild(element);
+                }
+                element.setAttribute("content", content);
+            };
+
+            setMeta("og:title", post.title);
+            setMeta("og:description", post.description);
+            setMeta("og:type", "article");
+            setMeta("og:url", window.location.href);
+        }
+
+        return () => {
+            const metaTags = [
+                "og:title",
+                "og:description",
+                "og:type",
+                "og:url",
+                "og:image",
+            ];
+            metaTags.forEach((name) => {
+                const element = document.querySelector(`meta[name='${name}']`);
+                if (element) {
+                    element.remove();
+                }
+            });
+        };
+    }, [post]);
+
     useEffect(() => {
         // Reset title when component unmounts
         return () => {