Merge nicer-editor into master

HGZdev · Oct 17, 2024 · 5e1ab45 · 5e1ab45
2 parents ab6b88f + c38d381
commit 5e1ab45
Show file tree

Hide file tree

Showing 45 changed files with 1,021 additions and 540 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Table Weaving Editor</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
     "preview": "NODE_ENV=production vite preview",
     "prod": "vite build && vite preview",
     "test": "NODE_ENV=testing vitest",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+    "lint": "eslint . --ext .ts,.tsx --report-unused-disable-directives --max-warnings 0"
   },
   "engines": {
     "node": ">=18"
@@ -37,6 +37,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
+    "react-icons": "^5.3.0",
     "react-router-dom": "^6.26.1",
     "react-snowfall": "^2.1.0",
     "sqlite": "^5.1.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/images/draft1.png b/public/images/draft1.png
diff --git a/public/images/draft2.png b/public/images/draft2.png
diff --git a/public/images/draft3.png b/public/images/draft3.png
diff --git a/public/images/loom.png b/public/images/loom.png
diff --git a/public/images/octogirl.png b/public/images/octogirl.png
diff --git a/public/images/yarn.png b/public/images/yarn.png
diff --git a/src/client/Components/BgContainer.tsx b/src/client/Components/BgContainer.tsx
@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+const {VITE_BASE_URL} = import.meta.env;
+
+const BgContainer = styled.div<{}>`
+  position: relative;
+
+  background-image: url(${VITE_BASE_URL}/images/bgImage.jpg);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+`;
+
+export default BgContainer;
diff --git a/src/client/Components/Buttons.tsx b/src/client/Components/Buttons.tsx
@@ -3,7 +3,7 @@ import {useLogout} from "../../_server/queries";
 import {useNavigate} from "react-router-dom";
 import {Link, LinkProps} from "react-router-dom";
 
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   children?: ReactNode;
   to?: string;
   href?: string;
@@ -12,7 +12,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 export const Button: React.FC<ButtonProps> = ({className, ...props}) => {
   const cmpProps: ButtonHTMLAttributes<HTMLButtonElement> = {
     ...props,
-    className: `btn btn-sm  ${className}`,
+    className: `btn shadow-md shadow-gray-300 transition-all duration-300 ease-in-out ${className}`,
   };
 
   if (props.to) return <Link {...(cmpProps as LinkProps)} />;
@@ -26,7 +26,7 @@ export const Button: React.FC<ButtonProps> = ({className, ...props}) => {
 export const ButtonPrimary: React.FC<ButtonProps> = ({className, ...props}) => (
   <Button
     {...props}
-    className={`btn-primary shadow-md shadow-gray-300 rounded-none  ${className}`}
+    className={`btn btn-primary btn-sm rounded-none ${className}`}
   />
 );
 
@@ -36,7 +36,7 @@ export const ButtonSecondary: React.FC<ButtonProps> = ({
 }) => (
   <Button
     {...props}
-    className={`btn-secondary shadow-md shadow-gray-300 rounded-none ${className} `}
+    className={`btn-secondary btn-sm rounded-none ${className} `}
   />
 );
 export const ButtonAccent: React.FC<ButtonProps> = ({
@@ -45,17 +45,14 @@ export const ButtonAccent: React.FC<ButtonProps> = ({
 }) => (
   <Button
     {...props}
-    className={`btn-accent shadow-md shadow-gray-300 rounded-none ${className} `}
+    className={`btn-accent btn-sm rounded-none ${className} `}
   />
 );
 
-export const NavButton: React.FC<ButtonProps> = ({
-  className = "",
-  ...props
-}) => (
-  <ButtonSecondary
+export const NavButton: React.FC<ButtonProps> = ({className, ...props}) => (
+  <Button
     {...props}
-    className={`btn-ghost shadow-none ${className} `}
+    className={`btn-ghost btn-md p-2 rounded-none shadow-none ${className}`}
   />
 );
 

diff --git a/src/client/Components/Footer.tsx b/src/client/Components/Footer.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import {FaGithub, FaLinkedin} from "react-icons/fa";
+import {MdOutlineAlternateEmail} from "react-icons/md";
+
+const Footer: React.FC = () => {
+  return (
+    <div
+      style={{backgroundColor: "rgba(60, 60, 60, 0.9)"}}
+      className="text-base-100 py-6"
+    >
+      <div className="container mx-auto flex flex-col md:flex-row justify-between items-center">
+        <div className="text-sm md:text-base mb-4 md:mb-0">
+          &copy; {new Date().getFullYear()} Hanna Gaudasińska-Zapaśnik. All
+          rights reserved.
+        </div>
+        <div className="flex space-x-4">
+          <a
+            href="mailto:[email protected]"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hover:text-gray-400"
+          >
+            <MdOutlineAlternateEmail size={24} />
+          </a>
+          <a
+            href="https://github.com/HGZdev"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hover:text-gray-400"
+          >
+            <FaGithub size={24} />
+          </a>
+          <a
+            href="https://www.linkedin.com/in/hanna-gaudasinska-zapasnik/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hover:text-gray-400"
+          >
+            <FaLinkedin size={24} />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Footer;
diff --git a/src/client/Components/Hamburger.tsx b/src/client/Components/Hamburger.tsx
diff --git a/src/client/Components/Logo.tsx b/src/client/Components/Logo.tsx
@@ -0,0 +1,11 @@
+const {VITE_BASE_URL} = import.meta.env;
+
+const Logo = ({className}: {className?: string}) => {
+  return (
+    <span>
+      <img className={className} src={`${VITE_BASE_URL}/favicon.ico`} />
+    </span>
+  );
+};
+
+export default Logo;
diff --git a/src/client/Components/Metadata.tsx b/src/client/Components/Metadata.tsx
@@ -0,0 +1,59 @@
+import {Helmet} from "react-helmet";
+
+const Metadata = () => (
+  <Helmet>
+    {/* Basic Meta Tags */}
+    <meta charSet="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Tablet Weaving Editor is a web-based tool that allows users to design, edit, and visualize tablet weaving patterns in real-time. Create intricate designs with ease."
+    />
+    <meta name="author" content="Hanna Gaudasińska-Zapaśnik" />
+    {/* Open Graph / Facebook */}
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:title"
+      content="Tablet Weaving Editor - Design and Edit Patterns"
+    />
+    <meta
+      property="og:description"
+      content="A free, web-based tool to design and edit tablet weaving patterns. Create intricate designs with ease and visualize them in real-time."
+    />
+    <meta
+      property="og:url"
+      content="https://hgzdev.github.io/tablet-weaving-editor/"
+    />
+    {/* <meta
+      property="og:image"
+      content="https://hgzdev.github.io/tablet-weaving-editor/og-image.jpg"
+    /> */}
+    {/* Twitter */}
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta
+      name="twitter:title"
+      content="Tablet Weaving Editor - Design and Edit Patterns"
+    />
+    <meta
+      name="twitter:description"
+      content="Create, design, and edit tablet weaving patterns using this easy-to-use, web-based tool."
+    />
+    <meta
+      name="twitter:url"
+      content="https://hgzdev.github.io/tablet-weaving-editor/"
+    />
+    {/* <meta
+      name="twitter:image"
+      content="https://hgzdev.github.io/tablet-weaving-editor/og-image.jpg"
+    /> */}
+    {/* Favicon */}
+    <link
+      rel="icon"
+      href="https://hgzdev.github.io/tablet-weaving-editor/favicon.ico"
+      type="image/x-icon"
+    />
+    <title>Tablet Weaving Editor</title>
+  </Helmet>
+);
+
+export default Metadata;