Merge pull request #21 from meta-panic/feature/add-frontend-architecture

frontend main page: in work
meta-panic · Jan 7, 2025 · b2a8cc0 · b2a8cc0
2 parents 0dd279c + 68319a3
commit b2a8cc0
Show file tree

Hide file tree

Showing 26 changed files with 759 additions and 116 deletions.
diff --git a/CONTRIBUTION.md b/CONTRIBUTION.md
@@ -37,6 +37,7 @@ Where:
 * **`<type>`:**  One of the following types:
     * `feat`: A new feature for the user.
     * `fix`: A bug fix for the user.
+    * `hotfix`: A 🔥hot🔥 fix.
     * `docs`: Changes to the documentation.
     * `style`: Changes that don't affect the functionality (e.g., formatting, whitespace).
     * `refactor`: A code change that neither fixes a bug nor adds a feature.

diff --git a/frontend/eslint.config.mjs b/frontend/eslint.config.mjs
@@ -11,6 +11,12 @@ const compat = new FlatCompat({
 
 const eslintConfig = [
   ...compat.extends("next/core-web-vitals", "next/typescript"),
+  {
+    rules: {
+      "comma-dangle": ["error", "always-multiline"],
+      "semi": ["warn", "always"],
+    },
+  },
 ];
 
 export default eslintConfig;
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -9,17 +9,18 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "classnames": "^2.5.1",
+    "next": "15.1.3",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "next": "15.1.3"
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "15.1.3",
-    "@eslint/eslintrc": "^3"
+    "typescript": "^5"
   }
-}
+}
diff --git a/frontend/public/fonts/BebasNeue-Regular.ttf b/frontend/public/fonts/BebasNeue-Regular.ttf
diff --git a/frontend/public/fonts/Raleway-Italic-VariableFont_wght.ttf b/frontend/public/fonts/Raleway-Italic-VariableFont_wght.ttf
diff --git a/frontend/public/fonts/Raleway-regular.ttf b/frontend/public/fonts/Raleway-regular.ttf
diff --git a/frontend/public/fonts/Raleway-semi-bold.ttf b/frontend/public/fonts/Raleway-semi-bold.ttf
diff --git a/frontend/src/app/components/navigation.modules.css b/frontend/src/app/components/navigation.modules.css
diff --git a/frontend/src/app/components/navigation.tsx b/frontend/src/app/components/navigation.tsx
@@ -0,0 +1,35 @@
+"use client";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export const Navigation = () => {
+  const pathname = usePathname();
+  return (
+    <nav className="flex justify-center items-center p-4">
+      <Link
+        href="/"
+        className={pathname === "/" ? "font-bold mr-4" : "text-blue-500 mr-4"}
+      >
+        Home
+      </Link>
+      <Link
+        href="/about"
+        className={
+          pathname === "/about" ? "font-bold mr-4" : "text-blue-500 mr-4"
+        }
+      >
+        About
+      </Link>
+      <Link
+        href="/products/1"
+        className={
+          pathname.startsWith("/products/1")
+            ? "font-bold mr-4"
+            : "text-blue-500 mr-4"
+        }
+      >
+        Product 1
+      </Link>
+    </nav>
+  );
+};
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -1,34 +1,64 @@
+import { isDebug } from "@/utils/isDebug";
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+import localFont from 'next/font/local';
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
+const bebas = localFont({
+  weight: '500',
+  variable: '--font-bebas-regular',
+  src: '../../public/fonts/BebasNeue-Regular.ttf',
+  display: 'swap',
 });
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
+const ralewayRegular = localFont({
+  weight: '500',
+  variable: '--font-raleway-regular',
+  src: '../../public/fonts/Raleway-regular.ttf',
+  display: 'swap',
+});
+const ralewayItalic = localFont({
+  weight: '500',
+  variable: '--font-raleway-italic',
+  src: '../../public/fonts/Raleway-Italic-VariableFont_wght.ttf',
+  display: 'swap',
 });
+const ralewaySemiBold = localFont({
+  weight: '500',
+  variable: '--font-raleway-semobold',
+  src: '../../public/fonts/Raleway-semi-bold.ttf',
+  display: 'swap',
+});
+
 
 export const metadata: Metadata = {
-  title: "Дом Молитвы",
-  description: "Дом Молитвы - христианская протестантская церковь",
+  title: "Дом молитвы",
+  description: "Церковь Евангельских христиан-баптистов",
   icons: {
-    icon: { url: '/favicon.png' }
-  }
+    icon: { url: '/favicon.png' },
+  },
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const isDevelopment = await isDebug();
+
+  if (!isDevelopment) {
+    return (
+      <html lang="ru">
+        <body className={`${bebas.variable} ${ralewayRegular.variable} ${ralewayItalic.variable} ${ralewaySemiBold.variable}`}>
+          {children}
+        </body>
+      </html>
+    );
+  }
+
   return (
-    <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+    <html lang="ru">
+      <body className={`${bebas.variable} ${ralewayRegular.variable} ${ralewayItalic.variable} ${ralewaySemiBold.variable}`}>
+        <header>header</header>
         {children}
+        <footer>footer</footer>
       </body>
     </html>
   );

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -1,56 +1,53 @@
 import Image from "next/image";
 
-export default function Home() {
-  return (
-    <div style={{
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
-      height: '100vh',
-      fontFamily: 'Arial, sans-serif',
-      backgroundColor: '#f4f4f4',
-    }}>
-      <Image
-        src="/church-logo.svg"
-        alt="Логотип церкви"
-        width={208}
-        height={96}
-        style={{ marginBottom: '1.5rem' }}
-      />
-      <h1 style={{
-        fontSize: '2.5em',
-        textAlign: 'center',
-        color: '#333',
-        marginBottom: '0.5rem',
-      }}>Скоро здесь будет сайт</h1>
-      <p style={{
-        fontSize: '1.2em',
-        textAlign: 'center',
-        color: '#555',
-      }}>Загляните позже за обновлениями</p>
-      <p style={{
-        fontSize: '0.8em',
-        textAlign: 'center',
-        color: '#555',
-        marginTop: '2rem',
-      }}>
-        Местная религиозная организация Церковь Евангельских христиан-баптистов
-      </p>
-      <p style={{
-        fontSize: '0.8em',
-        textAlign: 'center',
-        color: '#555',
-      }}>
-        г. Невинномысск Ставропольского края
-      </p>
-      <p style={{
-        fontSize: '0.8em',
-        textAlign: 'center',
-        color: '#555',
-      }}>
-        ИНН 2631020933 / КПП 263101001
-      </p>
-    </div>
+import "../styles/reset.css";
+import "../styles/colours.css";
+import "../styles/semantic.css";
+import "../styles/sizes.css";
+import "../styles/globals.css";
+
+import Typography from "@/components/atoms/typography/Typography";
+import { isDebug } from "@/utils/isDebug";
+
+
+const Stub = () => {
+  return (<div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100vh',
+    fontFamily: 'Arial, sans-serif',
+    backgroundColor: '#f4f4f4',
+  }}
+  >
+    <Image
+      src="/church-logo.svg"
+      alt="Логотип церкви"
+      width={208}
+      height={96}
+      style={{ marginBottom: '1.5rem' }}
+    />
+    <Typography tag="H1">Скоро здесь будет сайт</Typography>
+    <Typography tag="body">Загляните позже за обновлениями</Typography>
+
+    <br />
+    <br />
+    <Typography tag="body-mini">Местная религиозная организация Церковь Евангельских христиан-баптистов</Typography>
+    <Typography tag="body-mini">г. Невинномысск Ставропольского края</Typography>
+    <Typography tag="body-mini">ИНН 2631020933 / КПП 263101001</Typography>
+  </div >
   );
-}
+};
+
+export default async function Home() {
+  const isDebugMode = await isDebug();
+
+  if (!isDebugMode) {
+    console.log("Runnin in prod mode");
+    return <Stub />;
+  }
+
+  console.log("Runnin in debug mode");
+  return (<div>test</div>);
+}
diff --git a/frontend/src/components/atoms/ColorBlock/ColorBlock.module.css b/frontend/src/components/atoms/ColorBlock/ColorBlock.module.css
@@ -0,0 +1,8 @@
+.dark-block {
+  --default-text: var(--common-light-100);
+  --default-components-link-fg: #f8f6f7;
+  --hover-text: var(--common-light-100);
+  --hover-components-link-fg: #f8f6f7;
+  --active-text-ondark: var(--common-light-100);
+  --active-components-link-fg: #f8f6f7;
+}
diff --git a/frontend/src/components/atoms/ColorBlock/ColorBlock.tsx b/frontend/src/components/atoms/ColorBlock/ColorBlock.tsx
@@ -0,0 +1,26 @@
+import React, { createContext, ReactNode } from 'react';
+import classNames from 'classnames';
+import styles from './ColorBlock.module.css';
+
+type BlockColor = 'light' | 'dark';
+
+const BlockColorContext = createContext<BlockColor>('light');
+
+interface BlockColorProviderProps {
+  children: ReactNode;
+  blockColor: BlockColor;
+}
+
+export const BlockColorProvider: React.FC<BlockColorProviderProps> = ({ children, blockColor }) => {
+  return (
+    <BlockColorContext.Provider
+      value={blockColor}
+    >
+      <div
+        className={classNames({ [styles["dark-block"]]: blockColor === 'dark' })}
+      >
+        {children}
+      </div>
+    </BlockColorContext.Provider>
+  );
+};