From faab1ce3674f0e8c4d074aedcb300d2ab313f996 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dar=C3=B3czi=20Levente?= Date: Mon, 10 Nov 2025 23:30:50 +0200 Subject: [PATCH 01/32] fix for workflow, now develop only on feature branches --- eslint.config.mjs | 43 +++++++----- package.json | 2 + src/pages/EpicData.tsx | 4 +- yarn.lock | 145 +++++++++++++++++++++++++++++++++++++++-- 4 files changed, 168 insertions(+), 26 deletions(-) diff --git a/eslint.config.mjs b/eslint.config.mjs index 940de76..dd3bf59 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -1,20 +1,29 @@ -import eslint from '@eslint/js'; -import { defineConfig } from 'eslint/config'; -import tseslint from 'typescript-eslint'; +// eslint.config.mjs +import { defineConfig, globalIgnores } from 'eslint/config'; +import reactX from 'eslint-plugin-react-x'; +import reactDom from 'eslint-plugin-react-dom'; +import tsParser from '@typescript-eslint/parser'; export default defineConfig([ - eslint.configs.recommended, - ...tseslint.configs.recommended, // Spread the recommended TS configs - - // Add a new configuration object for custom rules - { - rules: { - // Enforce a maximum of 120 lines in a function - "max-lines-per-function": ["error", { - "max": 120, - "skipBlankLines": true, // Optional: ignore blank lines - "skipComments": true // Optional: ignore comment lines - }] - } - } + globalIgnores(['dist']), + { + files: ['**/*.{ts,tsx}'], + languageOptions: { + parser: tsParser, + parserOptions: { + project: ['./tsconfig.app.json', './tsconfig.node.json'], + tsconfigRootDir: new URL('.', import.meta.url).pathname, + ecmaVersion: 2022, + sourceType: 'module', + ecmaFeatures: { jsx: true }, + }, + }, + extends: [ + reactX.configs['recommended-typescript'], + reactDom.configs.recommended, + ], + rules: { + 'max-lines-per-function': ['error', { max: 120, skipBlankLines: true, skipComments: true }], + }, + }, ]); \ No newline at end of file diff --git a/package.json b/package.json index 929cbec..dedc743 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,8 @@ "@typescript-eslint/eslint-plugin": "^8.46.3", "@vitejs/plugin-react": "^5.0.4", "eslint": "^9.39.1", + "eslint-plugin-react-dom": "^2.3.4", + "eslint-plugin-react-x": "^2.3.4", "prettier": "3.6.2", "typescript": "^5.9.3", "typescript-eslint": "^8.46.4", diff --git a/src/pages/EpicData.tsx b/src/pages/EpicData.tsx index 08c43d4..5a115b2 100644 --- a/src/pages/EpicData.tsx +++ b/src/pages/EpicData.tsx @@ -23,8 +23,8 @@ function EpicData() { return (
- {epicDataDates.map((dateStr, key) => ( - + {epicDataDates.map((dateStr) => ( + ))}
diff --git a/yarn.lock b/yarn.lock index 730a7f9..59ca2b2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -316,6 +316,59 @@ resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.12.2.tgz#bccdf615bcf7b6e8db830ec0b8d21c9a25de597b" integrity sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew== +"@eslint-react/ast@2.3.4": + version "2.3.4" + resolved "https://registry.yarnpkg.com/@eslint-react/ast/-/ast-2.3.4.tgz#3522e8a114d39432d5f34d4819e5cb519c054393" + integrity sha512-wueu2vBRwKqnrgOuz1JmEefhn5dgfa1NgvFtDMfefePfICTYFtwkTuOJNGJI77TUnqV9inp9ZNDB1nyAMmlZMg== + dependencies: + "@eslint-react/eff" "2.3.4" + "@typescript-eslint/types" "^8.46.3" + "@typescript-eslint/typescript-estree" "^8.46.3" + "@typescript-eslint/utils" "^8.46.3" + string-ts "^2.2.1" + +"@eslint-react/core@2.3.4": + version "2.3.4" + resolved "https://registry.yarnpkg.com/@eslint-react/core/-/core-2.3.4.tgz#0782e77936c098884396b40378cb8f93efb65c9b" + integrity sha512-1ve3pSjAhd4PKcTpZd0bQwkAgWOAJjfgAixTfOvJ7QhWi3gPKq0Wn0vi78XcFO8K0IL3EcOfX2g2JhZJzSRnWQ== + dependencies: + "@eslint-react/ast" "2.3.4" + "@eslint-react/eff" "2.3.4" + "@eslint-react/shared" "2.3.4" + "@eslint-react/var" "2.3.4" + "@typescript-eslint/scope-manager" "^8.46.3" + "@typescript-eslint/types" "^8.46.3" + "@typescript-eslint/utils" "^8.46.3" + birecord "^0.1.1" + ts-pattern "^5.9.0" + +"@eslint-react/eff@2.3.4": + version "2.3.4" + resolved "https://registry.yarnpkg.com/@eslint-react/eff/-/eff-2.3.4.tgz#974ea89ca50c3a0f1ffa2e6ac2f28b84a1efa0c7" + integrity sha512-/SXI23DpQCutSXPdAPdSvErfsBFYwaqbgQy5dLmnde4wHivk/eD9O/rA/Xu1c4j9tLJG/sZBQ9DzN/UXHizjag== + +"@eslint-react/shared@2.3.4": + version "2.3.4" + resolved "https://registry.yarnpkg.com/@eslint-react/shared/-/shared-2.3.4.tgz#46103c210ed1131f82347d39e130a1ce1b1459dd" + integrity sha512-FN3X4jA0kksFO9cjXwRaFHA6wbc7AgHjYkczdfwm0dOr/uUVv3Sc/F3kUNJ6KFOSoDCfNGybRCICu9DZbanhWA== + dependencies: + "@eslint-react/eff" "2.3.4" + "@typescript-eslint/utils" "^8.46.3" + ts-pattern "^5.9.0" + zod "^4.1.12" + +"@eslint-react/var@2.3.4": + version "2.3.4" + resolved "https://registry.yarnpkg.com/@eslint-react/var/-/var-2.3.4.tgz#55f4c21d7ec6e5b8e12892947b740084b84af516" + integrity sha512-hT2TvusBcEfFLFGfwZRstkQv9lp+079DEba5F6Dr53g3f+gBvLNDcayb5zDgwNP5+hQRd8lY8goEOfA8PWyaJQ== + dependencies: + "@eslint-react/ast" "2.3.4" + "@eslint-react/eff" "2.3.4" + "@typescript-eslint/scope-manager" "^8.46.3" + "@typescript-eslint/types" "^8.46.3" + "@typescript-eslint/utils" "^8.46.3" + ts-pattern "^5.9.0" + "@eslint/config-array@^0.21.1": version "0.21.1" resolved "https://registry.yarnpkg.com/@eslint/config-array/-/config-array-0.21.1.tgz#7d1b0060fea407f8301e932492ba8c18aff29713" @@ -744,7 +797,7 @@ "@typescript-eslint/types" "^8.46.4" debug "^4.3.4" -"@typescript-eslint/scope-manager@8.46.4": +"@typescript-eslint/scope-manager@8.46.4", "@typescript-eslint/scope-manager@^8.46.3": version "8.46.4" resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-8.46.4.tgz#78c9b4856c0094def64ffa53ea955b46bec13304" integrity sha512-tMDbLGXb1wC+McN1M6QeDx7P7c0UWO5z9CXqp7J8E+xGcJuUuevWKxuG8j41FoweS3+L41SkyKKkia16jpX7CA== @@ -757,7 +810,7 @@ resolved "https://registry.yarnpkg.com/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.46.4.tgz#989a338093b6b91b0552f1f51331d89ec6980382" integrity sha512-+/XqaZPIAk6Cjg7NWgSGe27X4zMGqrFqZ8atJsX3CWxH/jACqWnrWI68h7nHQld0y+k9eTTjb9r+KU4twLoo9A== -"@typescript-eslint/type-utils@8.46.4": +"@typescript-eslint/type-utils@8.46.4", "@typescript-eslint/type-utils@^8.0.0", "@typescript-eslint/type-utils@^8.46.3": version "8.46.4" resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-8.46.4.tgz#ae71b428a3c138b5084affe47893c129949171e0" integrity sha512-V4QC8h3fdT5Wro6vANk6eojqfbv5bpwHuMsBcJUJkqs2z5XnYhJzyz9Y02eUmF9u3PgXEUiOt4w4KHR3P+z0PQ== @@ -768,12 +821,12 @@ debug "^4.3.4" ts-api-utils "^2.1.0" -"@typescript-eslint/types@8.46.4", "@typescript-eslint/types@^8.46.4": +"@typescript-eslint/types@8.46.4", "@typescript-eslint/types@^8.46.3", "@typescript-eslint/types@^8.46.4": version "8.46.4" resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.46.4.tgz#38022bfda051be80e4120eeefcd2b6e3e630a69b" integrity sha512-USjyxm3gQEePdUwJBFjjGNG18xY9A2grDVGuk7/9AkjIF1L+ZrVnwR5VAU5JXtUnBL/Nwt3H31KlRDaksnM7/w== -"@typescript-eslint/typescript-estree@8.46.4": +"@typescript-eslint/typescript-estree@8.46.4", "@typescript-eslint/typescript-estree@^8.46.3": version "8.46.4" resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-8.46.4.tgz#6a9eeab0da45bf400f22c818e0f47102a980ceaa" integrity sha512-7oV2qEOr1d4NWNmpXLR35LvCfOkTNymY9oyW+lUHkmCno7aOmIf/hMaydnJBUTBMRCOGZh8YjkFOc8dadEoNGA== @@ -789,7 +842,7 @@ semver "^7.6.0" ts-api-utils "^2.1.0" -"@typescript-eslint/utils@8.46.4": +"@typescript-eslint/utils@8.46.4", "@typescript-eslint/utils@^8.46.3": version "8.46.4" resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-8.46.4.tgz#ea7878ddd625948cad4424dc2752b1be236556f5" integrity sha512-AbSv11fklGXV6T28dp2Me04Uw90R2iJ30g2bgLz529Koehrmkbs1r7paFqr1vPCZi7hHwYxYtxfyQMRC8QaVSg== @@ -875,6 +928,11 @@ baseline-browser-mapping@^2.8.19: resolved "https://registry.yarnpkg.com/baseline-browser-mapping/-/baseline-browser-mapping-2.8.25.tgz#947dc6f81778e0fa0424a2ab9ea09a3033e71109" integrity sha512-2NovHVesVF5TXefsGX1yzx1xgr7+m9JQenvz6FQY3qd+YXkKkYiv+vTCc7OriP9mcDZpTC5mAOYN4ocd29+erA== +birecord@^0.1.1: + version "0.1.1" + resolved "https://registry.yarnpkg.com/birecord/-/birecord-0.1.1.tgz#abc07c8187bf24fb1e0055cd9feb18b30e477a03" + integrity sha512-VUpsf/qykW0heRlC8LooCq28Kxn3mAqKohhDG/49rrsQ1dT1CXyj/pgXS+5BSRzFTR/3DyIBOqQOrGyZOh71Aw== + bootstrap@^5.3.8: version "5.3.8" resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.3.8.tgz#6401a10057a22752d21f4e19055508980656aeed" @@ -963,6 +1021,11 @@ combined-stream@^1.0.8: dependencies: delayed-stream "~1.0.0" +compare-versions@^6.1.1: + version "6.1.1" + resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-6.1.1.tgz#7af3cc1099ba37d244b3145a9af5201b629148a9" + integrity sha512-4hm4VPpIecmlg59CHXnRDnqGplJFrbLG4aFEl5vl6cK1u76ws3LLvX7ikFnTDl5vo39sjWD6AaDPYodJp/NNHg== + concat-map@0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" @@ -1105,6 +1168,43 @@ escape-string-regexp@^4.0.0: resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34" integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA== +eslint-plugin-react-dom@^2.3.4: + version "2.3.4" + resolved "https://registry.yarnpkg.com/eslint-plugin-react-dom/-/eslint-plugin-react-dom-2.3.4.tgz#d5cfb084e925344108a394cd2e123ca25916f8a6" + integrity sha512-xAetOWwrfYnqU0Vd6LjEQi1paAwU7Tgoa+jHUb7QCKxdILDV618yPrMigWpY+438cg6oXTYE/awFI/Rv+dOFCw== + dependencies: + "@eslint-react/ast" "2.3.4" + "@eslint-react/core" "2.3.4" + "@eslint-react/eff" "2.3.4" + "@eslint-react/shared" "2.3.4" + "@eslint-react/var" "2.3.4" + "@typescript-eslint/scope-manager" "^8.46.3" + "@typescript-eslint/types" "^8.46.3" + "@typescript-eslint/utils" "^8.46.3" + compare-versions "^6.1.1" + string-ts "^2.2.1" + ts-pattern "^5.9.0" + +eslint-plugin-react-x@^2.3.4: + version "2.3.4" + resolved "https://registry.yarnpkg.com/eslint-plugin-react-x/-/eslint-plugin-react-x-2.3.4.tgz#0bc861ba8d0076ec2a8f154bff7ff1b6fcd06410" + integrity sha512-6rW/CALxGCO9M2wuIUMNKuepSf5uW+Sg+AaQtLpsfs+B6fmDVHFrxIgg9wYk2aRrI6MMQcjDUMEYPUX9eOg2wQ== + dependencies: + "@eslint-react/ast" "2.3.4" + "@eslint-react/core" "2.3.4" + "@eslint-react/eff" "2.3.4" + "@eslint-react/shared" "2.3.4" + "@eslint-react/var" "2.3.4" + "@typescript-eslint/scope-manager" "^8.46.3" + "@typescript-eslint/type-utils" "^8.46.3" + "@typescript-eslint/types" "^8.46.3" + "@typescript-eslint/utils" "^8.46.3" + compare-versions "^6.1.1" + is-immutable-type "^5.0.1" + string-ts "^2.2.1" + ts-api-utils "^2.1.0" + ts-pattern "^5.9.0" + eslint-scope@5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c" @@ -1437,6 +1537,15 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3: dependencies: is-extglob "^2.1.1" +is-immutable-type@^5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/is-immutable-type/-/is-immutable-type-5.0.1.tgz#bfc2a10d995891b4205a448710b4f4c8260986fa" + integrity sha512-LkHEOGVZZXxGl8vDs+10k3DvP++SEoYEAJLRk6buTFi6kD7QekThV7xHS0j6gpnUCQ0zpud/gMDGiV4dQneLTg== + dependencies: + "@typescript-eslint/type-utils" "^8.0.0" + ts-api-utils "^2.0.0" + ts-declaration-location "^1.0.4" + is-number@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b" @@ -1647,7 +1756,7 @@ picomatch@^2.3.1: resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA== -picomatch@^4.0.3: +picomatch@^4.0.2, picomatch@^4.0.3: version "4.0.3" resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.3.tgz#796c76136d1eead715db1e7bad785dedd695a042" integrity sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q== @@ -1859,6 +1968,11 @@ source-map-js@^1.2.1: resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46" integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA== +string-ts@^2.2.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/string-ts/-/string-ts-2.2.1.tgz#9cf9a93d210f778080a9db86ca37cba37f55e44c" + integrity sha512-Q2u0gko67PLLhbte5HmPfdOjNvUKbKQM+mCNQae6jE91DmoFHY6HH9GcdqCeNx87DZ2KKjiFxmA0R/42OneGWw== + strip-json-comments@^3.1.1: version "3.1.1" resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006" @@ -1886,11 +2000,23 @@ to-regex-range@^5.0.1: dependencies: is-number "^7.0.0" -ts-api-utils@^2.1.0: +ts-api-utils@^2.0.0, ts-api-utils@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-2.1.0.tgz#595f7094e46eed364c13fd23e75f9513d29baf91" integrity sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ== +ts-declaration-location@^1.0.4: + version "1.0.7" + resolved "https://registry.yarnpkg.com/ts-declaration-location/-/ts-declaration-location-1.0.7.tgz#d4068fe9975828b3b453b3ab112b4711d8267688" + integrity sha512-EDyGAwH1gO0Ausm9gV6T2nUvBgXT5kGoCMJPllOaooZ+4VvJiKBdZE7wK18N1deEowhcUptS+5GXZK8U/fvpwA== + dependencies: + picomatch "^4.0.2" + +ts-pattern@^5.9.0: + version "5.9.0" + resolved "https://registry.yarnpkg.com/ts-pattern/-/ts-pattern-5.9.0.tgz#f0fb5205ce0b0c59af72beba62fee7612a61cea4" + integrity sha512-6s5V71mX8qBUmlgbrfL33xDUwO0fq48rxAu2LBE11WBeGdpCPOsXksQbZJHvHwhrd3QjUusd3mAOM5Gg0mFBLg== + tslib@^2.8.0: version "2.8.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f" @@ -1995,3 +2121,8 @@ yocto-queue@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== + +zod@^4.1.12: + version "4.1.12" + resolved "https://registry.yarnpkg.com/zod/-/zod-4.1.12.tgz#64f1ea53d00eab91853195653b5af9eee68970f0" + integrity sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ== From cfec977161caf610f84eecb66d9fde1deb64f2aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dar=C3=B3czi=20Levente?= Date: Sat, 15 Nov 2025 20:42:39 +0200 Subject: [PATCH 02/32] created page for every date --- {src/assets => public/logo}/logo-dark.png | Bin {src/assets => public/logo}/logo-light.png | Bin public/vite.svg | 1 - src/Root.tsx | 3 +- src/components/NavigationBar.tsx | 20 ++----- src/components/epicdata/EpicDataCard.tsx | 8 +-- src/pages/EpicData.tsx | 4 +- src/pages/EpicDataPost.tsx | 60 +++++++++++++++++++++ 8 files changed, 73 insertions(+), 23 deletions(-) rename {src/assets => public/logo}/logo-dark.png (100%) rename {src/assets => public/logo}/logo-light.png (100%) delete mode 100644 public/vite.svg create mode 100644 src/pages/EpicDataPost.tsx diff --git a/src/assets/logo-dark.png b/public/logo/logo-dark.png similarity index 100% rename from src/assets/logo-dark.png rename to public/logo/logo-dark.png diff --git a/src/assets/logo-light.png b/public/logo/logo-light.png similarity index 100% rename from src/assets/logo-light.png rename to public/logo/logo-light.png diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/Root.tsx b/src/Root.tsx index 1a5216c..1c4ab01 100644 --- a/src/Root.tsx +++ b/src/Root.tsx @@ -3,6 +3,7 @@ import Home from './pages/Home'; import NavigationBar from './components/NavigationBar.tsx'; import BlogPost from './pages/BlogPost.tsx'; import EpicData from './pages/EpicData.tsx'; +import EpicDataPost from './pages/EpicDataPost.tsx'; function Root() { return ( @@ -14,7 +15,7 @@ function Root() { } /> } /> } /> - + } /> diff --git a/src/components/NavigationBar.tsx b/src/components/NavigationBar.tsx index 8da3dae..c257ef2 100644 --- a/src/components/NavigationBar.tsx +++ b/src/components/NavigationBar.tsx @@ -5,8 +5,8 @@ import Navbar from 'react-bootstrap/Navbar'; import Image from 'react-bootstrap/Image'; const logoStyle = { - width: '42px', - height: 'auto', + width: '40px', + height: '40px', }; const navStyle = { @@ -22,12 +22,13 @@ const titleStyle = { fontSize: '24px', }; + function NavigationBar() { return ( - Logo + Logo

GalacticView

@@ -35,19 +36,6 @@ function NavigationBar() { diff --git a/src/components/epicdata/EpicDataCard.tsx b/src/components/epicdata/EpicDataCard.tsx index 2651876..de039de 100644 --- a/src/components/epicdata/EpicDataCard.tsx +++ b/src/components/epicdata/EpicDataCard.tsx @@ -1,19 +1,21 @@ -import { Button, Card } from 'react-bootstrap'; +import { Button, Card, Spinner } from 'react-bootstrap'; import { useNasaEpicDataByDate } from '../../query/nasaEpicData.query.ts'; import type { NasaEpicDataType } from '../../data/NasaEpicDataTypes.ts'; interface epicDataCardProps { date: string; + isLoading?: boolean; } function EpicDataCard(props: epicDataCardProps) { - const { date } = props; + const { date, isLoading } = props; const { data: dataOnDate = [] as NasaEpicDataType[] } = useNasaEpicDataByDate(date); return ( - Imgages taken on date {date} + {isLoading && } + Images taken on date {date} {dataOnDate[0]?.caption} {dataOnDate.length} items for date {date} diff --git a/src/pages/EpicData.tsx b/src/pages/EpicData.tsx index 5a115b2..1e1d03e 100644 --- a/src/pages/EpicData.tsx +++ b/src/pages/EpicData.tsx @@ -13,7 +13,7 @@ const epicDataStyle: React.CSSProperties = { }; function EpicData() { - const { data: dates = [] } = useNasaEpicDataDates(); + const { data: dates = [], isLoading } = useNasaEpicDataDates(); const { currentPage, itemsPerPage, goToPage, totalPages } = usePagination(dates); const epicDataDates = useMemo(() => { @@ -24,7 +24,7 @@ function EpicData() { return (
{epicDataDates.map((dateStr) => ( - + ))}
diff --git a/src/pages/EpicDataPost.tsx b/src/pages/EpicDataPost.tsx new file mode 100644 index 0000000..a2b4b8a --- /dev/null +++ b/src/pages/EpicDataPost.tsx @@ -0,0 +1,60 @@ +import { useParams } from 'react-router'; +import { useNasaEpicDataByDate } from '../query/nasaEpicData.query.ts'; +import { Carousel, Spinner } from 'react-bootstrap'; +import Image from 'react-bootstrap/Image'; +import type { CSSProperties } from 'react'; + +function imageUrl(item: any) { + return `https://epic.gsfc.nasa.gov/archive/natural/${item.date.slice(0, 4)}/${item.date.slice(5, 7)}/${item.date.slice(8, 10)}/png/${item.image}.png`; +} + +const imageCss = { + width: '100%', + height: '30%', + maxHeight: '600px', + objectFit: 'contain' as const, +} + +const carouselCss = { + fontSize: '1.5rem', + width: '40rem', + height: '40rem', +} + +const centerStyle: CSSProperties = { + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'center', + gap: '20px', + padding: '20px', +} + +function EpicDataPost() { + const { epicDataDate } = useParams<{ epicDataDate: string }>(); + const { data, isLoading, isError, error } = useNasaEpicDataByDate(epicDataDate || ''); + + + return ( +
+ {isError &&

Error: {error instanceof Error ? error.message : 'Unknown error'}

} + {data && ( +
+ {isLoading && } +

Images captured by NASA's EPIC camera onboard the NOAA DSCOVR spacecraft

+ + {data.map((item: any) => ( + + epic + +

{item.date}

+ + + ))} + +
+ )} +
+ ); +} + +export default EpicDataPost; \ No newline at end of file From c932cd84918527171963ec46dbe8af0fb9a41eff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dar=C3=B3czi=20Levente?= Date: Sat, 15 Nov 2025 21:19:10 +0200 Subject: [PATCH 03/32] galacticview-frontend#1 Create dedicated page for every EPIC date --- .github/workflows/workflow.yml | 35 ---------------------------------- .gitlab-ci.yml | 22 +++++++++++++++++++++ 2 files changed, 22 insertions(+), 35 deletions(-) delete mode 100644 .github/workflows/workflow.yml create mode 100644 .gitlab-ci.yml diff --git a/.github/workflows/workflow.yml b/.github/workflows/workflow.yml deleted file mode 100644 index dcf9b49..0000000 --- a/.github/workflows/workflow.yml +++ /dev/null @@ -1,35 +0,0 @@ -name: FRONTEND CI -on: - push: - branches: - - main - - develop - - feature/** - - bug/** - pull_request: - branches: - - main - - develop - -jobs: - check: - name: Lint, Format & Typecheck - runs-on: ubuntu-latest - steps: - - name: Checkout repository - uses: actions/checkout@v3 - - - name: Set up Node.js - uses: actions/setup-node@v3 - with: - node-version: '20.11.0' - cache: 'npm' - - - name: Install dependencies - run: npm install - - - name: Run ESLint - run: npx eslint . - - - name: Run Prettier - run: npx prettier --write . \ No newline at end of file diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml new file mode 100644 index 0000000..80d83b3 --- /dev/null +++ b/.gitlab-ci.yml @@ -0,0 +1,22 @@ +stages: + - check + +variables: + NODE_VERSION: "20.11.0" + +workflow: + rules: + - if: $CI_COMMIT_BRANCH =~ /^main$|^develop$|^feature\/.*$|^bug\/.*$/ + - if: $CI_PIPELINE_SOURCE == "merge_request_event" + +check_job: + stage: check + image: node:${NODE_VERSION} + script: + - npm ci + - npx eslint . + - npx prettier --write . + cache: + key: ${CI_COMMIT_REF_SLUG} + paths: + - node_modules/ \ No newline at end of file From 88bdc57a2297b48f64c60f9e227f37cff59671bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dar=C3=B3czi=20Levente?= Date: Sat, 15 Nov 2025 21:22:11 +0200 Subject: [PATCH 04/32] galacticview-frontend#1 fix ci --- .github/workflows/workflow.yml | 35 ++++++++++++++++++++++++++++++++++ .gitlab-ci.yml | 22 --------------------- 2 files changed, 35 insertions(+), 22 deletions(-) create mode 100644 .github/workflows/workflow.yml delete mode 100644 .gitlab-ci.yml diff --git a/.github/workflows/workflow.yml b/.github/workflows/workflow.yml new file mode 100644 index 0000000..dcf9b49 --- /dev/null +++ b/.github/workflows/workflow.yml @@ -0,0 +1,35 @@ +name: FRONTEND CI +on: + push: + branches: + - main + - develop + - feature/** + - bug/** + pull_request: + branches: + - main + - develop + +jobs: + check: + name: Lint, Format & Typecheck + runs-on: ubuntu-latest + steps: + - name: Checkout repository + uses: actions/checkout@v3 + + - name: Set up Node.js + uses: actions/setup-node@v3 + with: + node-version: '20.11.0' + cache: 'npm' + + - name: Install dependencies + run: npm install + + - name: Run ESLint + run: npx eslint . + + - name: Run Prettier + run: npx prettier --write . \ No newline at end of file diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml deleted file mode 100644 index 80d83b3..0000000 --- a/.gitlab-ci.yml +++ /dev/null @@ -1,22 +0,0 @@ -stages: - - check - -variables: - NODE_VERSION: "20.11.0" - -workflow: - rules: - - if: $CI_COMMIT_BRANCH =~ /^main$|^develop$|^feature\/.*$|^bug\/.*$/ - - if: $CI_PIPELINE_SOURCE == "merge_request_event" - -check_job: - stage: check - image: node:${NODE_VERSION} - script: - - npm ci - - npx eslint . - - npx prettier --write . - cache: - key: ${CI_COMMIT_REF_SLUG} - paths: - - node_modules/ \ No newline at end of file From b394c23d5d3ac3bf21db41a11b81c6bf1a58a43d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dar=C3=B3czi=20Levente?= Date: Sun, 16 Nov 2025 15:46:30 +0200 Subject: [PATCH 05/32] design progressed --- src/components/NavigationBar.tsx | 55 ++++++++++++++++++++++++-------- src/pages/Home.tsx | 46 ++++++++++++++++++++++++-- 2 files changed, 85 insertions(+), 16 deletions(-) diff --git a/src/components/NavigationBar.tsx b/src/components/NavigationBar.tsx index c257ef2..bc17d86 100644 --- a/src/components/NavigationBar.tsx +++ b/src/components/NavigationBar.tsx @@ -1,41 +1,70 @@ import Container from 'react-bootstrap/Container'; import Nav from 'react-bootstrap/Nav'; import Navbar from 'react-bootstrap/Navbar'; -// import NavDropdown from 'react-bootstrap/NavDropdown'; import Image from 'react-bootstrap/Image'; +import React from 'react'; +import { Form } from 'react-bootstrap'; const logoStyle = { width: '40px', height: '40px', }; +const navFormStyle: React.CSSProperties = { + marginRight: 'auto', + maxWidth: '200px', + width: '100%', +} + +const brandCentered: React.CSSProperties = { + position: 'absolute', + left: '50%', + transform: 'translateX(-50%)', + zIndex: 1, +}; + const navStyle = { - //the links to be on the right side + marginLeft: 'auto', justifyContent: 'flex-end', width: '100%', - // space between links - gap: '55px', + gap: '1rem', }; -const titleStyle = { - fontWeight: 'bold', - fontSize: '24px', +const navbarStyle: React.CSSProperties = { + position: 'relative', + height: '90px', + backgroundColor: '#000', + color: '#fff', }; +const navLinkStyle: React.CSSProperties = { + color: '#fff', + fontSize: '18px', + fontWeight: '500', + padding: '1rem', + fontStyle: 'bold', +}; function NavigationBar() { return ( - + - - Logo +
+ + + + Logo -

GalacticView

 diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index bbfcec2..68e1223 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,9 +1,49 @@ +import React from 'react'; +import ImageOfTheDay from '../components/home/ImageOfTheDay.tsx'; + +const dateStyle: React.CSSProperties = { + fontSize: '22px', + color: '#000', + fontWeight: 'bold', + marginLeft: '10rem', + marginTop: '40px', +}; + +const lineStyle: React.CSSProperties = { + width: '87rem', + height: '20px', + borderBottom: '1px solid #939393', + position: 'absolute', + marginLeft: '10rem', + marginTop: '0px', +}; + +function getMonthName(monthIndex: number): string { + const monthNames = [ + 'January', 'February', 'March', 'April', 'May', 'June', + 'July', 'August', 'September', 'October', 'November', 'December', + ]; + return monthNames[monthIndex]; +} + +function getDayName(dayIndex: number): string { + const dayNames = [ + 'Sunday', 'Monday', 'Tuesday', 'Wednesday', + 'Thursday', 'Friday', 'Saturday', + ]; + return dayNames[dayIndex]; +} + function Home() { + let date = new Date(); + return (
-

Welcome to GalacticView

-

Your gateway to the stars.

-
+

LIVE {getDayName(date.getDay())}, {getMonthName(date.getMonth())} {date.getDate()}, {date.getHours()}:{date.getMinutes()}, {date.getTimezoneOffset()} UTC

+
+
+ +
); } From 9b1f339c98880dfc539fd414c0b5d88245e90f9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dar=C3=B3czi=20Levente?= Date: Sun, 16 Nov 2025 15:46:38 +0200 Subject: [PATCH 06/32] added query for the apod api --- src/api/nasaApod.api.ts | 20 ++++++++++++++++++++ src/components/home/ImageOfTheDay.tsx | 17 +++++++++++++++++ src/data/NasaApodDataType.ts | 9 +++++++++ src/query/nasaApodData.query.ts | 17 +++++++++++++++++ 4 files changed, 63 insertions(+) create mode 100644 src/api/nasaApod.api.ts create mode 100644 src/components/home/ImageOfTheDay.tsx create mode 100644 src/data/NasaApodDataType.ts create mode 100644 src/query/nasaApodData.query.ts diff --git a/src/api/nasaApod.api.ts b/src/api/nasaApod.api.ts new file mode 100644 index 0000000..0c7a739 --- /dev/null +++ b/src/api/nasaApod.api.ts @@ -0,0 +1,20 @@ +import axios from 'axios'; +import type { NasaApodDataType } from '../data/NasaApodDataType.ts'; + +const API_KEY = import.meta.env.NASA_API_KEY ?? 'DEMO_KEY'; + +export const nasaEpicApi = axios.create({ + baseURL: `https://api.nasa.gov/planetary/apod`, + headers: { + Accept: 'application/json', + 'Content-Type': 'application/json', + }, + params: { + api_key: API_KEY, + } +}); + +export async function getNasaApodData(): Promise { + const res = await nasaEpicApi.get(''); + return res.data; +} \ No newline at end of file diff --git a/src/components/home/ImageOfTheDay.tsx b/src/components/home/ImageOfTheDay.tsx new file mode 100644 index 0000000..c9a27e8 --- /dev/null +++ b/src/components/home/ImageOfTheDay.tsx @@ -0,0 +1,17 @@ +import { useNasaApodData } from '../../query/nasaApodData.query.ts'; +import type { NasaApodDataType } from '../../data/NasaApodDataType.ts'; + +function ImageOfTheDay() { + const {data: NasaApodDataType} = useNasaApodData(); + + return ( +
+

Today

+

Image of the Day

+

{data.title}

+

{data.explanation}

+
+ ) +} + +export default ImageOfTheDay; \ No newline at end of file diff --git a/src/data/NasaApodDataType.ts b/src/data/NasaApodDataType.ts new file mode 100644 index 0000000..142baef --- /dev/null +++ b/src/data/NasaApodDataType.ts @@ -0,0 +1,9 @@ +export type NasaApodDataType = { + date: string; + explanation: string; + hdurl: string; + media_type: string; + service_version: string; + title: string; + url: string; +} \ No newline at end of file diff --git a/src/query/nasaApodData.query.ts b/src/query/nasaApodData.query.ts new file mode 100644 index 0000000..b268af1 --- /dev/null +++ b/src/query/nasaApodData.query.ts @@ -0,0 +1,17 @@ +import { useQuery } from '@tanstack/react-query'; +import { getNasaApodData } from '../api/nasaApod.api.ts'; +import { queryClient } from './common.query.ts'; + +export function useNasaApodData() { + const query = useQuery({ + queryKey: ['nasaApodData'], + queryFn: getNasaApodData, + }); + + const refetchWithInvalidation = async () => { + await queryClient.invalidateQueries({queryKey: ['nasaApodData']}); + return query.refetch(); + } + + return {...query, refetchWithInvalidation}; +} \ No newline at end of file From 011f6af976178bc42eac98115480f291a252b3af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dar=C3=B3czi=20Levente?= Date: Sun, 16 Nov 2025 16:11:38 +0200 Subject: [PATCH 07/32] design done for the image of the day too --- src/api/nasaApod.api.ts | 4 +- src/components/home/ImageOfTheDay.tsx | 58 +++++++++++++++++++++++---- src/query/common.query.ts | 6 +-- 3 files changed, 57 insertions(+), 11 deletions(-) diff --git a/src/api/nasaApod.api.ts b/src/api/nasaApod.api.ts index 0c7a739..86b3e52 100644 --- a/src/api/nasaApod.api.ts +++ b/src/api/nasaApod.api.ts @@ -1,7 +1,7 @@ import axios from 'axios'; import type { NasaApodDataType } from '../data/NasaApodDataType.ts'; -const API_KEY = import.meta.env.NASA_API_KEY ?? 'DEMO_KEY'; +const API_KEY = import.meta.env.VITE_NASA_API_KEY ?? 'DEMO_KEY'; export const nasaEpicApi = axios.create({ baseURL: `https://api.nasa.gov/planetary/apod`, @@ -15,6 +15,8 @@ export const nasaEpicApi = axios.create({ }); export async function getNasaApodData(): Promise { + console.log('getNasaApodData'); + console.log('URL with api key:', `https://api.nasa.gov/planetary/apod?api_key=${API_KEY}`); const res = await nasaEpicApi.get(''); return res.data; } \ No newline at end of file diff --git a/src/components/home/ImageOfTheDay.tsx b/src/components/home/ImageOfTheDay.tsx index c9a27e8..b9daf16 100644 --- a/src/components/home/ImageOfTheDay.tsx +++ b/src/components/home/ImageOfTheDay.tsx @@ -1,17 +1,61 @@ import { useNasaApodData } from '../../query/nasaApodData.query.ts'; import type { NasaApodDataType } from '../../data/NasaApodDataType.ts'; +import React from 'react'; + +const imageOfTheDayStyles: React.CSSProperties = { + marginLeft: '10rem', + marginTop: '5rem', + display: 'flex', +} + +const leftDivStyles: React.CSSProperties = { + flex: 1, + marginRight: '2rem', +} + +const rightDivStyles: React.CSSProperties = { + flex: 1, + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + marginRight: '9rem', +} + +const imageStyles: React.CSSProperties = { + width: '40rem', + height: 'auto', +} function ImageOfTheDay() { - const {data: NasaApodDataType} = useNasaApodData(); + const { data } = useNasaApodData() as { data: NasaApodDataType }; return ( -
-

Today

-

Image of the Day

-

{data.title}

-

{data.explanation}

+
+
+

TODAY

+

Image of the Day

+

{data?.title}

+

{data?.explanation}

+
+
+ {data?.media_type === 'image' ? ( + {data?.title} + ) : data?.media_type === 'video' ? ( + + ) : ( +

Media type not supported.

+ )} +
+
- ) + ); } export default ImageOfTheDay; \ No newline at end of file diff --git a/src/query/common.query.ts b/src/query/common.query.ts index d0387cb..e856778 100644 --- a/src/query/common.query.ts +++ b/src/query/common.query.ts @@ -3,9 +3,9 @@ import { QueryClient } from '@tanstack/react-query'; export const queryClient = new QueryClient({ defaultOptions: { queries: { - staleTime: 10000, - refetchInterval: 30000, - retry: 3, + staleTime: 86_400_000, // 24 hours + refetchInterval: false, // disable automatic refetching + retry: 1, }, }, }); From 189261e7d92c024ae97487b80326151d8ff17ee0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dar=C3=B3czi=20Levente?= Date: Mon, 17 Nov 2025 18:11:35 +0200 Subject: [PATCH 08/32] footer fixed --- index.html | 20 +++++------ src/App.css | 14 ++++++++ src/Root.tsx | 27 +++++++++------ src/components/FooterBar.tsx | 64 ++++++++++++++++++++++++++++++++++++ src/main.tsx | 1 + 5 files changed, 106 insertions(+), 20 deletions(-) create mode 100644 src/App.css create mode 100644 src/components/FooterBar.tsx diff --git a/index.html b/index.html index 49c9f0b..09caf73 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,13 @@ - - - - - GalacticView - - -
- - + + + + + GalacticView + + +
+ + diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000..2444a20 --- /dev/null +++ b/src/App.css @@ -0,0 +1,14 @@ +html, body { + height: 100%; + margin: 0; +} + +.page-container { + min-height: 100vh; /* full height */ + display: flex; + flex-direction: column; +} + +.content-wrap { + flex: 1; /* pushes footer down */ +} \ No newline at end of file diff --git a/src/Root.tsx b/src/Root.tsx index 1c4ab01..a2c3cb8 100644 --- a/src/Root.tsx +++ b/src/Root.tsx @@ -4,20 +4,27 @@ import NavigationBar from './components/NavigationBar.tsx'; import BlogPost from './pages/BlogPost.tsx'; import EpicData from './pages/EpicData.tsx'; import EpicDataPost from './pages/EpicDataPost.tsx'; +import FooterBar from './components/FooterBar.tsx'; +import './App.css'; function Root() { return (
- - {/* Wrap the application in BrowserRouter, ensures client-side routing works */} - - - } /> - } /> - } /> - } /> - - +
+ + {/* wrap the application in BrowserRouter, ensures client-side routing works */} + +
+ + } /> + } /> + } /> + } /> + +
+ + +
); } diff --git a/src/components/FooterBar.tsx b/src/components/FooterBar.tsx new file mode 100644 index 0000000..77c8b0d --- /dev/null +++ b/src/components/FooterBar.tsx @@ -0,0 +1,64 @@ +import React from 'react'; + +const footerStyle: React.CSSProperties = { + width: '100%', + backgroundColor: '#000', + color: '#fff', + padding: '3rem 0', + textAlign: 'center', + marginTop: '2rem', + display: 'flex', + bottom: '0', + left: '0', + justifyContent: 'space-between', +}; + +const firstDivStyle: React.CSSProperties = { + marginLeft: '10rem', + marginRight: '10rem', + textAlign: 'left', + width: '40rem', +} + +const secondDivStyle: React.CSSProperties = { + display: 'flex', + flexDirection: 'row', + gap: '5rem', + marginRight: '10rem', + textAlign: 'left', +} + +function FooterBar() { + return ( +
+
+ App Logo +

GalacticView

+

GalacticView is build for space enthusiasts by space enthusiasts. Explore the wonders of the universe with us! You can create blog posts, share your favorite images, and stay updated with the latest space news.

+

© 2024 GalacticView. All rights reserved.

+
+
+
+

Home

+

Explore

+

Blog

+

About Us

+
+
+

Contact

+

Privacy Policy

+

Terms of Service

+

Help Center

+
+
+

Follow Us

+

Facebook

+

Twitter

+

Instagram

+
+
+
+ ) +} + +export default FooterBar; \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index 393f090..c9b5aea 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -3,6 +3,7 @@ import 'bootstrap/dist/css/bootstrap.min.css'; import Root from './Root.tsx'; import { QueryClientProvider } from '@tanstack/react-query'; import { queryClient } from './query/common.query.ts'; +import './App.css'; const root = document.getElementById('root'); From 5321634537284e613bf3db640d1aff5ec4e40d12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dar=C3=B3czi=20Levente?= Date: Mon, 17 Nov 2025 18:15:42 +0200 Subject: [PATCH 09/32] image of the day fixes for the image to fit into a decent space and be aesthetic --- src/components/home/ImageOfTheDay.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/home/ImageOfTheDay.tsx b/src/components/home/ImageOfTheDay.tsx index b9daf16..0fa526b 100644 --- a/src/components/home/ImageOfTheDay.tsx +++ b/src/components/home/ImageOfTheDay.tsx @@ -22,8 +22,10 @@ const rightDivStyles: React.CSSProperties = { } const imageStyles: React.CSSProperties = { - width: '40rem', - height: 'auto', + width: '100%', // fill container width + height: 'auto', // preserve aspect ratio + maxHeight: '30rem', // prevents extreme vertical stretching + objectFit: 'contain', } function ImageOfTheDay() { From 964120e985d6a95a91ecf32a0a251fea3c8010da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dar=C3=B3czi=20Levente?= Date: Mon, 17 Nov 2025 18:35:44 +0200 Subject: [PATCH 10/32] add separate image of the day page without any plus details in it --- src/Root.tsx | 18 ++++++++++-------- src/components/NavigationBar.tsx | 1 + .../{home => imageoftheday}/ImageOfTheDay.tsx | 10 +++++++--- .../imageoftheday/ImageOfTheDayContainer.tsx | 14 ++++++++++++++ src/pages/BlogPost.tsx | 5 ----- src/pages/BlogPostPage.tsx | 5 +++++ src/pages/{EpicData.tsx => EpicDataPage.tsx} | 4 ++-- .../{EpicDataPost.tsx => EpicDataPostPage.tsx} | 4 ++-- src/pages/{Home.tsx => HomePage.tsx} | 8 ++++---- src/pages/ImageOfTheDayPage.tsx | 11 +++++++++++ 10 files changed, 56 insertions(+), 24 deletions(-) rename src/components/{home => imageoftheday}/ImageOfTheDay.tsx (90%) create mode 100644 src/components/imageoftheday/ImageOfTheDayContainer.tsx delete mode 100644 src/pages/BlogPost.tsx create mode 100644 src/pages/BlogPostPage.tsx rename src/pages/{EpicData.tsx => EpicDataPage.tsx} (95%) rename src/pages/{EpicDataPost.tsx => EpicDataPostPage.tsx} (96%) rename src/pages/{Home.tsx => HomePage.tsx} (86%) create mode 100644 src/pages/ImageOfTheDayPage.tsx diff --git a/src/Root.tsx b/src/Root.tsx index a2c3cb8..ab4a91e 100644 --- a/src/Root.tsx +++ b/src/Root.tsx @@ -1,11 +1,12 @@ import { Route, Routes, BrowserRouter } from 'react-router-dom'; -import Home from './pages/Home'; +import HomePage from './pages/HomePage.tsx'; import NavigationBar from './components/NavigationBar.tsx'; -import BlogPost from './pages/BlogPost.tsx'; -import EpicData from './pages/EpicData.tsx'; -import EpicDataPost from './pages/EpicDataPost.tsx'; +import BlogPostPage from './pages/BlogPostPage.tsx'; +import EpicDataPage from './pages/EpicDataPage.tsx'; +import EpicDataPostPage from './pages/EpicDataPostPage.tsx'; import FooterBar from './components/FooterBar.tsx'; import './App.css'; +import ImageOfTheDayPage from './pages/ImageOfTheDayPage.tsx'; function Root() { return ( @@ -16,10 +17,11 @@ function Root() {
- } /> - } /> - } /> - } /> + } /> + } /> + } /> + } /> + } />
diff --git a/src/components/NavigationBar.tsx b/src/components/NavigationBar.tsx index bc17d86..7d7e25e 100644 --- a/src/components/NavigationBar.tsx +++ b/src/components/NavigationBar.tsx @@ -64,6 +64,7 @@ function NavigationBar() { diff --git a/src/components/home/ImageOfTheDay.tsx b/src/components/imageoftheday/ImageOfTheDay.tsx similarity index 90% rename from src/components/home/ImageOfTheDay.tsx rename to src/components/imageoftheday/ImageOfTheDay.tsx index 0fa526b..a80b3ae 100644 --- a/src/components/home/ImageOfTheDay.tsx +++ b/src/components/imageoftheday/ImageOfTheDay.tsx @@ -28,8 +28,13 @@ const imageStyles: React.CSSProperties = { objectFit: 'contain', } -function ImageOfTheDay() { - const { data } = useNasaApodData() as { data: NasaApodDataType }; +interface ImageOfTheDayProps { + data?: NasaApodDataType; +} + +function ImageOfTheDay(props: ImageOfTheDayProps) { + const { data: queryData } = useNasaApodData(); + const data = props.data || queryData; return (
@@ -55,7 +60,6 @@ function ImageOfTheDay() {

Media type not supported.

)}
-
); } diff --git a/src/components/imageoftheday/ImageOfTheDayContainer.tsx b/src/components/imageoftheday/ImageOfTheDayContainer.tsx new file mode 100644 index 0000000..92485dc --- /dev/null +++ b/src/components/imageoftheday/ImageOfTheDayContainer.tsx @@ -0,0 +1,14 @@ +import { useNasaApodData } from '../../query/nasaApodData.query'; +import ImageOfTheDay from './ImageOfTheDay.tsx'; + +function ImageOfTheDayContainer() { + const { data, isLoading, isError } = useNasaApodData(); + + if (isLoading) return

Loading...

; + if (isError) return

Failed to load image of the day.

; + if (!data) return null; + + return ; +} + +export default ImageOfTheDayContainer; \ No newline at end of file diff --git a/src/pages/BlogPost.tsx b/src/pages/BlogPost.tsx deleted file mode 100644 index 4c9f833..0000000 --- a/src/pages/BlogPost.tsx +++ /dev/null @@ -1,5 +0,0 @@ -function BlogPost() { - return
Blog Post Page
; -} - -export default BlogPost; diff --git a/src/pages/BlogPostPage.tsx b/src/pages/BlogPostPage.tsx new file mode 100644 index 0000000..9e46ea6 --- /dev/null +++ b/src/pages/BlogPostPage.tsx @@ -0,0 +1,5 @@ +function BlogPostPage() { + return
Blog Post Page
; +} + +export default BlogPostPage; diff --git a/src/pages/EpicData.tsx b/src/pages/EpicDataPage.tsx similarity index 95% rename from src/pages/EpicData.tsx rename to src/pages/EpicDataPage.tsx index 1e1d03e..ca13f83 100644 --- a/src/pages/EpicData.tsx +++ b/src/pages/EpicDataPage.tsx @@ -12,7 +12,7 @@ const epicDataStyle: React.CSSProperties = { padding: '20px', }; -function EpicData() { +function EpicDataPage() { const { data: dates = [], isLoading } = useNasaEpicDataDates(); const { currentPage, itemsPerPage, goToPage, totalPages } = usePagination(dates); @@ -31,4 +31,4 @@ function EpicData() { ); } -export default EpicData; +export default EpicDataPage; diff --git a/src/pages/EpicDataPost.tsx b/src/pages/EpicDataPostPage.tsx similarity index 96% rename from src/pages/EpicDataPost.tsx rename to src/pages/EpicDataPostPage.tsx index a2b4b8a..10663e3 100644 --- a/src/pages/EpicDataPost.tsx +++ b/src/pages/EpicDataPostPage.tsx @@ -29,7 +29,7 @@ const centerStyle: CSSProperties = { padding: '20px', } -function EpicDataPost() { +function EpicDataPostPage() { const { epicDataDate } = useParams<{ epicDataDate: string }>(); const { data, isLoading, isError, error } = useNasaEpicDataByDate(epicDataDate || ''); @@ -57,4 +57,4 @@ function EpicDataPost() { ); } -export default EpicDataPost; \ No newline at end of file +export default EpicDataPostPage; \ No newline at end of file diff --git a/src/pages/Home.tsx b/src/pages/HomePage.tsx similarity index 86% rename from src/pages/Home.tsx rename to src/pages/HomePage.tsx index 68e1223..bcec169 100644 --- a/src/pages/Home.tsx +++ b/src/pages/HomePage.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import ImageOfTheDay from '../components/home/ImageOfTheDay.tsx'; +import ImageOfTheDayContainer from '../components/imageoftheday/ImageOfTheDayContainer.tsx'; const dateStyle: React.CSSProperties = { fontSize: '22px', @@ -34,7 +34,7 @@ function getDayName(dayIndex: number): string { return dayNames[dayIndex]; } -function Home() { +function HomePage() { let date = new Date(); return ( @@ -42,10 +42,10 @@ function Home() {

LIVE {getDayName(date.getDay())}, {getMonthName(date.getMonth())} {date.getDate()}, {date.getHours()}:{date.getMinutes()}, {date.getTimezoneOffset()} UTC

- +
); } -export default Home; +export default HomePage; diff --git a/src/pages/ImageOfTheDayPage.tsx b/src/pages/ImageOfTheDayPage.tsx new file mode 100644 index 0000000..5ed6c96 --- /dev/null +++ b/src/pages/ImageOfTheDayPage.tsx @@ -0,0 +1,11 @@ +import ImageOfTheDayContainer from '../components/imageoftheday/ImageOfTheDayContainer.tsx'; + +function ImageOfTheDayPage() { + return ( +
+ +
+ ); +} + +export default ImageOfTheDayPage; \ No newline at end of file From 21abec23b8b73a7622f79568394d91bb5f6dbb04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dar=C3=B3czi=20Levente?= Date: Mon, 17 Nov 2025 18:47:55 +0200 Subject: [PATCH 11/32] design for epic data page done --- src/App.css | 28 ++++++++++++++++++++++ src/components/FooterBar.tsx | 2 +- src/components/epicdata/EpicDataCard.tsx | 16 ++++++++++--- src/components/epicdata/PaginationEpic.tsx | 9 +------ src/pages/EpicDataPage.tsx | 1 + 5 files changed, 44 insertions(+), 12 deletions(-) diff --git a/src/App.css b/src/App.css index 2444a20..e14a4d6 100644 --- a/src/App.css +++ b/src/App.css @@ -11,4 +11,32 @@ html, body { .content-wrap { flex: 1; /* pushes footer down */ +} + +/* Change the default color of all pagination links */ +.pagination .page-link { + color: #000000; /* White text */ + background-color: #ffffff; /* Blue background */ + border-color: #000000; /* Blue border */ +} + +/* Change the hover state colors */ +.pagination .page-link:hover { + color: #ffffff; + background-color: rgb(0, 0, 0); /* Darker blue on hover */ + border-color: #000000; +} + +/* Change the color of the active page item */ +.pagination .page-item.active .page-link { + color: #fff; + background-color: #dc3545; /* Red background for active page */ + border-color: #dc3545; +} + +/* Change the color of disabled page items (optional) */ +.pagination .page-item.disabled .page-link { + color: #ffffff; + background-color: #000000; + border-color: #000000; } \ No newline at end of file diff --git a/src/components/FooterBar.tsx b/src/components/FooterBar.tsx index 77c8b0d..f94a99f 100644 --- a/src/components/FooterBar.tsx +++ b/src/components/FooterBar.tsx @@ -35,7 +35,7 @@ function FooterBar() { App Logo

GalacticView

GalacticView is build for space enthusiasts by space enthusiasts. Explore the wonders of the universe with us! You can create blog posts, share your favorite images, and stay updated with the latest space news.

-

© 2024 GalacticView. All rights reserved.

+

© 2025 GalacticView. All rights reserved.

diff --git a/src/components/epicdata/EpicDataCard.tsx b/src/components/epicdata/EpicDataCard.tsx index de039de..cf44171 100644 --- a/src/components/epicdata/EpicDataCard.tsx +++ b/src/components/epicdata/EpicDataCard.tsx @@ -2,6 +2,16 @@ import { Button, Card, Spinner } from 'react-bootstrap'; import { useNasaEpicDataByDate } from '../../query/nasaEpicData.query.ts'; import type { NasaEpicDataType } from '../../data/NasaEpicDataTypes.ts'; + +const cardBodyStyle: React.CSSProperties = { + gap: '2rem', + display: 'flex', + flexDirection: 'column', + alignItems: 'start', +} + + + interface epicDataCardProps { date: string; isLoading?: boolean; @@ -13,14 +23,14 @@ function EpicDataCard(props: epicDataCardProps) { return ( - + {isLoading && } - Images taken on date {date} + Images taken: {date} {dataOnDate[0]?.caption} {dataOnDate.length} items for date {date} - diff --git a/src/components/epicdata/PaginationEpic.tsx b/src/components/epicdata/PaginationEpic.tsx index fc6e2be..89524c8 100644 --- a/src/components/epicdata/PaginationEpic.tsx +++ b/src/components/epicdata/PaginationEpic.tsx @@ -7,13 +7,6 @@ const paginationStyle: React.CSSProperties = { justifyContent: 'center', padding: '1em 0', width: '100%', - /* - position: 'absolute', - bottom: '0', - left: '50%', - transform: 'translateX(-50%)', - textAlign: 'center', - */ }; interface PaginationProps { @@ -27,7 +20,7 @@ function PaginationEpic(props: PaginationProps) { const { start, end } = getRangeArray(currentPage, totalPages); return ( - + {} { diff --git a/src/pages/EpicDataPage.tsx b/src/pages/EpicDataPage.tsx index ca13f83..d2321ec 100644 --- a/src/pages/EpicDataPage.tsx +++ b/src/pages/EpicDataPage.tsx @@ -5,6 +5,7 @@ import React, { useMemo } from 'react'; import EpicDataCard from '../components/epicdata/EpicDataCard.tsx'; const epicDataStyle: React.CSSProperties = { + marginTop: '50px', display: 'flex', flexWrap: 'wrap', justifyContent: 'center', From b1768b8c947849336efc45293d7ac8866bb5544b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dar=C3=B3czi=20Levente?= Date: Mon, 17 Nov 2025 18:59:56 +0200 Subject: [PATCH 12/32] design for epic data by date page done --- src/pages/EpicDataPostPage.tsx | 79 ++++++++++++++++++++++++++++------ 1 file changed, 65 insertions(+), 14 deletions(-) diff --git a/src/pages/EpicDataPostPage.tsx b/src/pages/EpicDataPostPage.tsx index 10663e3..3664099 100644 --- a/src/pages/EpicDataPostPage.tsx +++ b/src/pages/EpicDataPostPage.tsx @@ -13,13 +13,13 @@ const imageCss = { height: '30%', maxHeight: '600px', objectFit: 'contain' as const, -} +}; const carouselCss = { fontSize: '1.5rem', width: '40rem', height: '40rem', -} +}; const centerStyle: CSSProperties = { display: 'flex', @@ -27,7 +27,28 @@ const centerStyle: CSSProperties = { justifyContent: 'center', gap: '20px', padding: '20px', -} +}; + +const mainContainerStyle: CSSProperties = { + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'center', + gap: '8rem', + padding: '2rem', +}; + +const leftContainerStyle: CSSProperties = { + flex: 1, + minWidth: '300px', + maxWidth: '600px', +}; + +const rightContainerStyle: CSSProperties = { + flex: 1, + minWidth: '300px', + maxWidth: '600px', + marginTop: '2rem', +}; function EpicDataPostPage() { const { epicDataDate } = useParams<{ epicDataDate: string }>(); @@ -40,17 +61,47 @@ function EpicDataPostPage() { {data && (
{isLoading && } -

Images captured by NASA's EPIC camera onboard the NOAA DSCOVR spacecraft

- - {data.map((item: any) => ( - - epic - -

{item.date}

- - - ))} - +
+
+

NASA's EPIC camera onboard the NOAA DSCOVR spacecraft

+

+ The stunning "Blue Marble" images of the full, sunlit side of Earth are captured daily by the Earth Polychromatic Imaging Camera (EPIC) aboard NOAA's Deep Space Climate + Observatory (DSCOVR) satellite. Positioned a million miles away, DSCOVR provides a unique, continuous view of our dynamic planet as it rotates, offering a fresh + perspective on weather patterns, clouds, and natural landscapes. +

+ +

+ Camera and Satellite +

+

+ The Earth Polychromatic Imaging Camera (EPIC) is the instrument, and it is mounted on the Deep Space Climate Observatory (DSCOVR) satellite. +

+

+ Location +

+

+ The satellite is positioned about a million miles away, between the Earth and the sun, which allows it to capture the entire sunlit side of the planet. +

+

+ Image Capture +

+

+ EPIC takes multiple images of Earth's sunlit face each day, with each full-color image being a composite of three separate images. +

+
+
+ + {data.map((item: any) => ( + + epic + +

{item.date}

+ + + ))} + +
+
)}
From 65f4773bbf3e6a357699e1930cb0cdcb5506db39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dar=C3=B3czi=20Levente?= Date: Mon, 17 Nov 2025 19:09:06 +0200 Subject: [PATCH 13/32] some css extracted into app.css --- src/App.css | 26 +++++++++++++++++++ .../imageoftheday/ImageOfTheDay.tsx | 6 ++--- src/pages/EpicDataPostPage.tsx | 11 ++++---- 3 files changed, 34 insertions(+), 9 deletions(-) diff --git a/src/App.css b/src/App.css index e14a4d6..9122cf6 100644 --- a/src/App.css +++ b/src/App.css @@ -39,4 +39,30 @@ html, body { color: #ffffff; background-color: #000000; border-color: #000000; +} + +h2 { + font-size: 36px; + font-weight: bold; +} + +h1 { + font-size: 42px; + font-weight: bold; +} + +h3 { + font-size: 24px; + font-weight: bold; + margin-top: 3.4rem; + margin-bottom: 1rem; +} + +.section-tagline { + font-size: 13px; + font-family: monospace; +} + +.paragraph-under-heading { + margin-top: 1.5rem; } \ No newline at end of file diff --git a/src/components/imageoftheday/ImageOfTheDay.tsx b/src/components/imageoftheday/ImageOfTheDay.tsx index a80b3ae..17cc228 100644 --- a/src/components/imageoftheday/ImageOfTheDay.tsx +++ b/src/components/imageoftheday/ImageOfTheDay.tsx @@ -39,9 +39,9 @@ function ImageOfTheDay(props: ImageOfTheDayProps) { return (
-

TODAY

-

Image of the Day

-

{data?.title}

+

TODAY

+

Image of the Day

+

{data?.title}

{data?.explanation}

diff --git a/src/pages/EpicDataPostPage.tsx b/src/pages/EpicDataPostPage.tsx index 3664099..21b9041 100644 --- a/src/pages/EpicDataPostPage.tsx +++ b/src/pages/EpicDataPostPage.tsx @@ -63,26 +63,25 @@ function EpicDataPostPage() { {isLoading && }
-

NASA's EPIC camera onboard the NOAA DSCOVR spacecraft

-

+

NASA's EPIC camera onboard the NOAA DSCOVR spacecraft

+

The stunning "Blue Marble" images of the full, sunlit side of Earth are captured daily by the Earth Polychromatic Imaging Camera (EPIC) aboard NOAA's Deep Space Climate Observatory (DSCOVR) satellite. Positioned a million miles away, DSCOVR provides a unique, continuous view of our dynamic planet as it rotates, offering a fresh perspective on weather patterns, clouds, and natural landscapes.

- -

+

Camera and Satellite

The Earth Polychromatic Imaging Camera (EPIC) is the instrument, and it is mounted on the Deep Space Climate Observatory (DSCOVR) satellite.

-

+

Location

The satellite is positioned about a million miles away, between the Earth and the sun, which allows it to capture the entire sunlit side of the planet.

-

+

Image Capture

From 7dcc709b132c3037aefbf4b49189c3d25c1b12f1 Mon Sep 17 00:00:00 2001 From: Daroczi Levente <155687665+levilevente@users.noreply.github.com> Date: Wed, 19 Nov 2025 18:54:58 +0200 Subject: [PATCH 14/32] Merge branch 'feature/update-readme' into 'develop' --- .gitignore | 291 ++++++++++++++++++++++++++++++++++++++++++++++++++--- README.md | 81 +++------------ 2 files changed, 289 insertions(+), 83 deletions(-) diff --git a/.gitignore b/.gitignore index 50c8dda..408b92c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,26 +1,289 @@ +# Created by https://www.toptal.com/developers/gitignore/api/react,webstorm,yarn,node +# Edit at https://www.toptal.com/developers/gitignore?templates=react,webstorm,yarn,node + +### Node ### # Logs logs *.log npm-debug.log* yarn-debug.log* yarn-error.log* -pnpm-debug.log* lerna-debug.log* +.pnpm-debug.log* -node_modules +# Diagnostic reports (https://nodejs.org/api/report.html) +report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage +*.lcov + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# Snowpack dependency directory (https://snowpack.dev/) +web_modules/ + +# TypeScript cache +*.tsbuildinfo + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional stylelint cache +.stylelintcache + +# Microbundle cache +.rpt2_cache/ +.rts2_cache_cjs/ +.rts2_cache_es/ +.rts2_cache_umd/ + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variable files +.env +.env.development.local +.env.test.local +.env.production.local +.env.local + +# parcel-bundler cache (https://parceljs.org/) +.cache +.parcel-cache + +# Next.js build output +.next +out + +# Nuxt.js build / generate output +.nuxt dist -dist-ssr -*.local -# Editor directories and files -.vscode/* -!.vscode/extensions.json +# Gatsby files +.cache/ +# Comment in the public line in if your project uses Gatsby and not Next.js +# https://nextjs.org/blog/next-9-1#public-directory-support +# public + +# vuepress build output +.vuepress/dist + +# vuepress v2.x temp and cache directory +.temp + +# Docusaurus cache and generated files +.docusaurus + +# Serverless directories +.serverless/ + +# FuseBox cache +.fusebox/ + +# DynamoDB Local files +.dynamodb/ + +# TernJS port file +.tern-port + +# Stores VSCode versions used for testing VSCode extensions +.vscode-test + +# yarn v2 +.yarn/cache +.yarn/unplugged +.yarn/build-state.yml +.yarn/install-state.gz +.pnp.* + +### Node Patch ### +# Serverless Webpack directories +.webpack/ + +# Optional stylelint cache + +# SvelteKit build / generate output +.svelte-kit + +### react ### +.DS_* +**/*.backup.* +**/*.back.* + +node_modules + +*.sublime* + +psd +thumb +sketch + +### WebStorm ### +# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider +# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 + .idea -.DS_Store -*.suo -*.ntvs* -*.njsproj -*.sln -*.sw? -.env +# User-specific stuff +.idea/**/workspace.xml +.idea/**/tasks.xml +.idea/**/usage.statistics.xml +.idea/**/dictionaries +.idea/**/shelf + +# AWS User-specific +.idea/**/aws.xml + +# Generated files +.idea/**/contentModel.xml + +# Sensitive or high-churn files +.idea/**/dataSources/ +.idea/**/dataSources.ids +.idea/**/dataSources.local.xml +.idea/**/sqlDataSources.xml +.idea/**/dynamic.xml +.idea/**/uiDesigner.xml +.idea/**/dbnavigator.xml + +# Gradle +.idea/**/gradle.xml +.idea/**/libraries + +# Gradle and Maven with auto-import +# When using Gradle or Maven with auto-import, you should exclude module files, +# since they will be recreated, and may cause churn. Uncomment if using +# auto-import. +# .idea/artifacts +# .idea/compiler.xml +# .idea/jarRepositories.xml +# .idea/modules.xml +# .idea/*.iml +# .idea/modules +# *.iml +# *.ipr + +# CMake +cmake-build-*/ + +# Mongo Explorer plugin +.idea/**/mongoSettings.xml + +# File-based project format +*.iws + +# IntelliJ +out/ + +# mpeltonen/sbt-idea plugin +.idea_modules/ + +# JIRA plugin +atlassian-ide-plugin.xml + +# Cursive Clojure plugin +.idea/replstate.xml + +# SonarLint plugin +.idea/sonarlint/ + +# Crashlytics plugin (for Android Studio and IntelliJ) +com_crashlytics_export_strings.xml +crashlytics.properties +crashlytics-build.properties +fabric.properties + +# Editor-based Rest Client +.idea/httpRequests + +# Android studio 3.1+ serialized cache file +.idea/caches/build_file_checksums.ser + +### WebStorm Patch ### +# Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721 + +# *.iml +# modules.xml +# .idea/misc.xml +# *.ipr + +# Sonarlint plugin +# https://plugins.jetbrains.com/plugin/7973-sonarlint +.idea/**/sonarlint/ + +# SonarQube Plugin +# https://plugins.jetbrains.com/plugin/7238-sonarqube-community-plugin +.idea/**/sonarIssues.xml + +# Markdown Navigator plugin +# https://plugins.jetbrains.com/plugin/7896-markdown-navigator-enhanced +.idea/**/markdown-navigator.xml +.idea/**/markdown-navigator-enh.xml +.idea/**/markdown-navigator/ + +# Cache file creation bug +# See https://youtrack.jetbrains.com/issue/JBR-2257 +.idea/$CACHE_FILE$ + +# CodeStream plugin +# https://plugins.jetbrains.com/plugin/12206-codestream +.idea/codestream.xml + +# Azure Toolkit for IntelliJ plugin +# https://plugins.jetbrains.com/plugin/8053-azure-toolkit-for-intellij +.idea/**/azureSettings.xml + +### yarn ### +# https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored + +.yarn/* +!.yarn/releases +!.yarn/patches +!.yarn/plugins +!.yarn/sdks +!.yarn/versions + +# if you are NOT using Zero-installs, then: +# comment the following lines +!.yarn/cache + +# and uncomment the following lines +# .pnp.* + +# End of https://www.toptal.com/developers/gitignore/api/react,webstorm,yarn,node \ No newline at end of file diff --git a/README.md b/README.md index a44fa28..b32b57e 100644 --- a/README.md +++ b/README.md @@ -1,73 +1,16 @@ -# React + TypeScript + Vite +# GalacticView -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +This project is a web application built to show NASA api provided data through a sleek and modern interface. It leverages React for the frontend and later plans include integrating a backend service for managing blog posts, reviews, and other user-generated content. +Another service planned is to integrate an AI assistant to answer space-related questions. -Currently, two official plugins are available: +## Prerequisites +- Node.js (>= 16) +- Yarn or npm +- Recommended editor: WebStorm (macOS) -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +## Used technologies -## React Compiler - -The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). - -## Expanding the ESLint configuration - -If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: - -```js -export default defineConfig([ - globalIgnores(['dist']), - { - files: ['**/*.{ts,tsx}'], - extends: [ - // Other configs... - - // Remove tseslint.configs.recommended and replace with this - tseslint.configs.recommendedTypeChecked, - // Alternatively, use this for stricter rules - tseslint.configs.strictTypeChecked, - // Optionally, add this for stylistic rules - tseslint.configs.stylisticTypeChecked, - - // Other configs... - ], - languageOptions: { - parserOptions: { - project: ['./tsconfig.node.json', './tsconfig.app.json'], - tsconfigRootDir: import.meta.dirname, - }, - // other options... - }, - }, -]); -``` - -You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: - -```js -// eslint.config.js -import reactX from 'eslint-plugin-react-x'; -import reactDom from 'eslint-plugin-react-dom'; - -export default defineConfig([ - globalIgnores(['dist']), - { - files: ['**/*.{ts,tsx}'], - extends: [ - // Other configs... - // Enable lint rules for React - reactX.configs['recommended-typescript'], - // Enable lint rules for React DOM - reactDom.configs.recommended, - ], - languageOptions: { - parserOptions: { - project: ['./tsconfig.node.json', './tsconfig.app.json'], - tsconfigRootDir: import.meta.dirname, - }, - // other options... - }, - }, -]); -``` +- React +- TypeScript +- React Bootstrap +- NASA APIs \ No newline at end of file From 770cdf3a9bffa6f8790520b4e94b9ca368aa5f67 Mon Sep 17 00:00:00 2001 From: Daroczi Levente <155687665+levilevente@users.noreply.github.com> Date: Thu, 20 Nov 2025 20:17:26 +0200 Subject: [PATCH 15/32] Merge branch 'feature/extract-all-style-components-into-separate-css-files' into 'develop' * extract done * update CI * resolve comments * resolve second round of comments * resolve third round of comments * start -> flex start in css module * typo and semicolon corrections --- .github/workflows/workflow.yml | 2 + src/App.css | 4 -- src/components/FooterBar.module.css | 34 +++++++++++ src/components/FooterBar.tsx | 40 ++----------- src/components/NavigationBar.module.css | 38 ++++++++++++ src/components/NavigationBar.tsx | 58 +++--------------- .../epicdata/EpicDataCard.module.css | 10 ++++ src/components/epicdata/EpicDataCard.tsx | 15 +---- .../epicdata/PaginationEpic.module.css | 7 +++ src/components/epicdata/PaginationEpic.tsx | 12 +--- .../imageoftheday/ImageOfTheDay.module.css | 25 ++++++++ .../imageoftheday/ImageOfTheDay.tsx | 36 ++--------- src/pages/EpicDataPage.module.css | 8 +++ src/pages/EpicDataPage.tsx | 14 +---- src/pages/EpicDataPostPage.module.css | 49 +++++++++++++++ src/pages/EpicDataPostPage.tsx | 60 +++---------------- src/pages/HomePage.module.css | 16 +++++ src/pages/HomePage.tsx | 23 +------ 18 files changed, 229 insertions(+), 222 deletions(-) create mode 100644 src/components/FooterBar.module.css create mode 100644 src/components/NavigationBar.module.css create mode 100644 src/components/epicdata/EpicDataCard.module.css create mode 100644 src/components/epicdata/PaginationEpic.module.css create mode 100644 src/components/imageoftheday/ImageOfTheDay.module.css create mode 100644 src/pages/EpicDataPage.module.css create mode 100644 src/pages/EpicDataPostPage.module.css create mode 100644 src/pages/HomePage.module.css diff --git a/.github/workflows/workflow.yml b/.github/workflows/workflow.yml index dcf9b49..02903ce 100644 --- a/.github/workflows/workflow.yml +++ b/.github/workflows/workflow.yml @@ -10,6 +10,8 @@ on: branches: - main - develop + - feature/** + - bug/** jobs: check: diff --git a/src/App.css b/src/App.css index 9122cf6..3bbd74a 100644 --- a/src/App.css +++ b/src/App.css @@ -61,8 +61,4 @@ h3 { .section-tagline { font-size: 13px; font-family: monospace; -} - -.paragraph-under-heading { - margin-top: 1.5rem; } \ No newline at end of file diff --git a/src/components/FooterBar.module.css b/src/components/FooterBar.module.css new file mode 100644 index 0000000..c4799d8 --- /dev/null +++ b/src/components/FooterBar.module.css @@ -0,0 +1,34 @@ +.footerBar { + width: 100%; + background-color: #000; + color: #fff; + padding: 3rem 0; + text-align: center; + margin-top: 2rem; + display: flex; + bottom: 0; + left: 0; + justify-content: space-between; +} + +.firstDiv { + margin-left: 10rem; + margin-right: 10rem; + text-align: left; + width: 40rem; +} + +.secondDiv { + display: flex; + flex-direction: row; + gap: 5rem; + margin-right: 10rem; + text-align: left; +} + +.logo { + width: 30px; + height: 30px; + margin-right: 10px; + margin-bottom: 10px; +} \ No newline at end of file diff --git a/src/components/FooterBar.tsx b/src/components/FooterBar.tsx index f94a99f..c5d1ef9 100644 --- a/src/components/FooterBar.tsx +++ b/src/components/FooterBar.tsx @@ -1,43 +1,15 @@ -import React from 'react'; - -const footerStyle: React.CSSProperties = { - width: '100%', - backgroundColor: '#000', - color: '#fff', - padding: '3rem 0', - textAlign: 'center', - marginTop: '2rem', - display: 'flex', - bottom: '0', - left: '0', - justifyContent: 'space-between', -}; - -const firstDivStyle: React.CSSProperties = { - marginLeft: '10rem', - marginRight: '10rem', - textAlign: 'left', - width: '40rem', -} - -const secondDivStyle: React.CSSProperties = { - display: 'flex', - flexDirection: 'row', - gap: '5rem', - marginRight: '10rem', - textAlign: 'left', -} +import styles from './FooterBar.module.css'; function FooterBar() { return ( -