From 869ccbc776fde4e0a9c6ff37494bf543cd08ef51 Mon Sep 17 00:00:00 2001 From: Shaun Hoffer Date: Thu, 11 Jan 2024 16:30:07 +0000 Subject: [PATCH] massive changes --- astro.config.mjs | 7 +- package-lock.json | 339 +++++++++++++++++++++- package.json | 13 +- src/components/navbar/HamburgerMenu.jsx | 11 + src/components/navbar/NavigationReact.jsx | 100 +++++++ src/layouts/BaseLayout.astro | 9 +- src/layouts/PageLayout.astro | 9 + src/layouts/mainpage.astro | 19 +- src/pages/FAQ.md | 182 ++++++++++++ src/styles/fonts.css | 3 + src/styles/icons.css | 88 ++++++ src/styles/input.css | 119 ++++++++ tailwind.config.mjs | 18 +- tsconfig.json | 8 +- 14 files changed, 898 insertions(+), 27 deletions(-) create mode 100644 src/components/navbar/HamburgerMenu.jsx create mode 100644 src/components/navbar/NavigationReact.jsx create mode 100644 src/layouts/PageLayout.astro create mode 100644 src/pages/FAQ.md create mode 100644 src/styles/fonts.css create mode 100644 src/styles/icons.css create mode 100644 src/styles/input.css diff --git a/astro.config.mjs b/astro.config.mjs index 797c7fa..9b0cdc4 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,9 +1,10 @@ import { defineConfig } from 'astro/config'; - import tailwind from "@astrojs/tailwind"; +import react from "@astrojs/react"; + // https://astro.build/config export default defineConfig({ - integrations: [tailwind()], + integrations: [tailwind(), react()], site: 'https://beta.ttnrtsite.me' -}); +}); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 107d95d..9e5aa9f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,8 +9,19 @@ "version": "0.0.1", "dependencies": { "@astrojs/tailwind": "^5.1.0", + "@types/react": "^18.2.47", + "@types/react-dom": "^18.2.18", "astro": "^4.1.1", - "tailwindcss": "^3.4.1" + "react-dom": "^18.2.0", + "tailwindcss": "^3.4.1", + "typography": "^0.16.24" + }, + "devDependencies": { + "@astrojs/react": "^3.0.9", + "@fontsource-variable/signika": "^5.0.18", + "@tailwindcss/typography": "^0.5.10", + "framer-motion": "^10.18.0", + "react": "^18.2.0" } }, "node_modules/@alloc/quick-lru": { @@ -78,6 +89,25 @@ "node": ">=18.14.1" } }, + "node_modules/@astrojs/react": { + "version": "3.0.9", + "resolved": "https://registry.npmjs.org/@astrojs/react/-/react-3.0.9.tgz", + "integrity": "sha512-31J5yF5p9yBFV1axBooLA9PB4B2+MYm7swWhtlezSsJiUNXRFo5Is9qI3teJ7cKgmaCv+ZA593Smskko0NGaDQ==", + "dev": true, + "dependencies": { + "@vitejs/plugin-react": "^4.2.0", + "ultrahtml": "^1.3.0" + }, + "engines": { + "node": ">=18.14.1" + }, + "peerDependencies": { + "@types/react": "^17.0.50 || ^18.0.21", + "@types/react-dom": "^17.0.17 || ^18.0.6", + "react": "^17.0.2 || ^18.0.0", + "react-dom": "^17.0.2 || ^18.0.0" + } + }, "node_modules/@astrojs/tailwind": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/@astrojs/tailwind/-/tailwind-5.1.0.tgz", @@ -411,6 +441,36 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/plugin-transform-react-jsx-self": { + "version": "7.23.3", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.23.3.tgz", + "integrity": "sha512-qXRvbeKDSfwnlJnanVRp0SfuWE5DQhwQr5xtLBzp56Wabyo+4CMosF6Kfp+eOD/4FYpql64XVJ2W0pVLlJZxOQ==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.22.5" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-react-jsx-source": { + "version": "7.23.3", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.23.3.tgz", + "integrity": "sha512-91RS0MDnAWDNvGC6Wio5XYkyWI39FMFO+JK9+4AlgaTH+yWwVTsw7/sn6LK0lH7c5F+TFkpv/3LfCJ1Ydwof/g==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.22.5" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/template": { "version": "7.22.15", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz", @@ -466,6 +526,23 @@ "tslib": "^2.4.0" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "dev": true, + "optional": true, + "dependencies": { + "@emotion/memoize": "0.7.4" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "dev": true, + "optional": true + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.19.11", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.11.tgz", @@ -811,6 +888,12 @@ "node": ">=12" } }, + "node_modules/@fontsource-variable/signika": { + "version": "5.0.18", + "resolved": "https://registry.npmjs.org/@fontsource-variable/signika/-/signika-5.0.18.tgz", + "integrity": "sha512-k95fHm5034xrGIS4AI1hTwsHqpzv2g3J7Me67F+Jl7oSJNqfuJyd4TygbIgbg4BqMHdr7UOQlyN+cJo0XS2kMw==", + "dev": true + }, "node_modules/@img/sharp-darwin-arm64": { "version": "0.33.1", "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.1.tgz", @@ -1519,6 +1602,34 @@ "win32" ] }, + "node_modules/@tailwindcss/typography": { + "version": "0.5.10", + "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.10.tgz", + "integrity": "sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==", + "dev": true, + "dependencies": { + "lodash.castarray": "^4.4.0", + "lodash.isplainobject": "^4.0.6", + "lodash.merge": "^4.6.2", + "postcss-selector-parser": "6.0.10" + }, + "peerDependencies": { + "tailwindcss": ">=3.0.0 || insiders" + } + }, + "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": { + "version": "6.0.10", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz", + "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==", + "dev": true, + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -1603,6 +1714,34 @@ "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz", "integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==" }, + "node_modules/@types/prop-types": { + "version": "15.7.11", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz", + "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==" + }, + "node_modules/@types/react": { + "version": "18.2.47", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.47.tgz", + "integrity": "sha512-xquNkkOirwyCgoClNk85BjP+aqnIS+ckAJ8i37gAbDs14jfW/J23f2GItAf33oiUPQnqNMALiFeoM9Y5mbjpVQ==", + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/react-dom": { + "version": "18.2.18", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.18.tgz", + "integrity": "sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==", + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/scheduler": { + "version": "0.16.8", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", + "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==" + }, "node_modules/@types/unist": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz", @@ -1613,6 +1752,25 @@ "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==" }, + "node_modules/@vitejs/plugin-react": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.2.1.tgz", + "integrity": "sha512-oojO9IDc4nCUUi8qIR11KoQm0XFFLIwsRBwHRR4d/88IWghn1y6ckz/bJ8GHDCsYEJee8mDzqtJxh15/cisJNQ==", + "dev": true, + "dependencies": { + "@babel/core": "^7.23.5", + "@babel/plugin-transform-react-jsx-self": "^7.23.3", + "@babel/plugin-transform-react-jsx-source": "^7.23.3", + "@types/babel__core": "^7.20.5", + "react-refresh": "^0.14.0" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "peerDependencies": { + "vite": "^4.2.0 || ^5.0.0" + } + }, "node_modules/acorn": { "version": "8.11.3", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz", @@ -2288,6 +2446,30 @@ "resolved": "https://registry.npmjs.org/common-ancestor-path/-/common-ancestor-path-1.0.1.tgz", "integrity": "sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w==" }, + "node_modules/compass-vertical-rhythm": { + "version": "1.4.5", + "resolved": "https://registry.npmjs.org/compass-vertical-rhythm/-/compass-vertical-rhythm-1.4.5.tgz", + "integrity": "sha512-bJo3IYX7xmmZCDYjrT2XolaiNjGZ4E2JvUGxpdU0ecbH4ZLK786wvc8aHKVrGrKct9JlkmJbUi8YLrQWvOc+uA==", + "dependencies": { + "convert-css-length": "^1.0.1", + "object-assign": "^4.1.0", + "parse-unit": "^1.0.1" + } + }, + "node_modules/console-polyfill": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/console-polyfill/-/console-polyfill-0.1.2.tgz", + "integrity": "sha512-oHLGQmf0q2yuuqfTXuzAB5UMqgPH1cHdwLkjfCqRTG2eupc52jbXT1OtOlREv+yXmXRi3wqywAevz3qMSk90Hg==" + }, + "node_modules/convert-css-length": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/convert-css-length/-/convert-css-length-1.0.2.tgz", + "integrity": "sha512-ecV7j3hXyXN1X2XfJBzhMR0o1Obv0v3nHmn0UiS3ACENrzbxE/EknkiunS/fCwQva0U62X1GChi8GaPh4oTlLg==", + "dependencies": { + "console-polyfill": "^0.1.2", + "parse-unit": "^1.0.1" + } + }, "node_modules/convert-source-map": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", @@ -2325,6 +2507,11 @@ "node": ">=4" } }, + "node_modules/csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -2341,6 +2528,14 @@ } } }, + "node_modules/decamelize": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", + "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/decode-named-character-reference": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz", @@ -2664,6 +2859,30 @@ "url": "https://github.com/sponsors/rawify" } }, + "node_modules/framer-motion": { + "version": "10.18.0", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.18.0.tgz", + "integrity": "sha512-oGlDh1Q1XqYPksuTD/usb0I70hq95OUzmL9+6Zd+Hs4XV0oaISBa/UUMSjYiq6m8EUF32132mOJ8xVZS+I0S6w==", + "dev": true, + "dependencies": { + "tslib": "^2.4.0" + }, + "optionalDependencies": { + "@emotion/is-prop-valid": "^0.8.2" + }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -2799,6 +3018,11 @@ "js-yaml": "bin/js-yaml.js" } }, + "node_modules/gray-percentage": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/gray-percentage/-/gray-percentage-2.0.0.tgz", + "integrity": "sha512-T0i4bwJoXbweuBM7bJwil9iHVAwXxmS9IFsEy27cXvRYxHwR2YVSBSXBjJw4EDKUvLpfjANeT5PrvTuAH1XnTw==" + }, "node_modules/has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", @@ -3357,6 +3581,28 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, + "node_modules/lodash.castarray": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz", + "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==", + "dev": true + }, + "node_modules/lodash.isnumber": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz", + "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==" + }, + "node_modules/lodash.isplainobject": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", + "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==", + "dev": true + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -3397,6 +3643,17 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, "node_modules/lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", @@ -4250,6 +4507,14 @@ "node": ">=16 || 14 >=14.17" } }, + "node_modules/modularscale": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/modularscale/-/modularscale-1.0.2.tgz", + "integrity": "sha512-xfu46hZcAL9xU8S/RihHE49rmDYRAg36lQez49pcO6/aLBJ7cfVr5DH7Obo2PGKTCSAyy4iTAsWZa9apECK9mQ==", + "dependencies": { + "lodash.isnumber": "^3.0.0" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -4544,6 +4809,11 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/parse-unit": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parse-unit/-/parse-unit-1.0.1.tgz", + "integrity": "sha512-hrqldJHokR3Qj88EIlV/kAyAi/G5R2+R56TBANxNMy0uPlYcttx0jnMW6Yx5KsKPSbC3KddM/7qQm3+0wEXKxg==" + }, "node_modules/parse5": { "version": "7.1.2", "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz", @@ -4917,6 +5187,38 @@ } ] }, + "node_modules/react": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-dom": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.0" + }, + "peerDependencies": { + "react": "^18.2.0" + } + }, + "node_modules/react-refresh": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", + "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -5588,6 +5890,14 @@ "resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz", "integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==" }, + "node_modules/scheduler": { + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", + "dependencies": { + "loose-envify": "^1.1.0" + } + }, "node_modules/section-matter": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz", @@ -6102,7 +6412,7 @@ "version": "2.6.2", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", - "optional": true + "devOptional": true }, "node_modules/type-fest": { "version": "2.19.0", @@ -6115,6 +6425,31 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/typography": { + "version": "0.16.24", + "resolved": "https://registry.npmjs.org/typography/-/typography-0.16.24.tgz", + "integrity": "sha512-o5jNctzGoJm2XgdqivJdpkF6lQkcQo8v1biMGY+rLSpBHhpCKdQv5em9S3R6igApxVYtbhNBJbV95vK9oPwRKQ==", + "dependencies": { + "compass-vertical-rhythm": "^1.4.5", + "decamelize": "^1.2.0", + "gray-percentage": "^2.0.0", + "lodash": "^4.13.1", + "modularscale": "^1.0.2", + "object-assign": "^4.1.0", + "typography-normalize": "^0.16.19" + } + }, + "node_modules/typography-normalize": { + "version": "0.16.19", + "resolved": "https://registry.npmjs.org/typography-normalize/-/typography-normalize-0.16.19.tgz", + "integrity": "sha512-vtnSv/uGBZVbd4e/ZhZB9HKBgKKlWQUXw74+ADIHHxzKp27CEf8PSR8TX1zF2qSyQ9/qMdqLwXYz8yRQFq9JLQ==" + }, + "node_modules/ultrahtml": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/ultrahtml/-/ultrahtml-1.5.2.tgz", + "integrity": "sha512-qh4mBffhlkiXwDAOxvSGxhL0QEQsTbnP9BozOK3OYPEGvPvdWzvAUaXNtUSMdNsKDtuyjEbyVUPFZ52SSLhLqw==", + "dev": true + }, "node_modules/unherit": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/unherit/-/unherit-3.0.1.tgz", diff --git a/package.json b/package.json index 787c2d7..a079a42 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,18 @@ }, "dependencies": { "@astrojs/tailwind": "^5.1.0", + "@types/react": "^18.2.47", + "@types/react-dom": "^18.2.18", "astro": "^4.1.1", - "tailwindcss": "^3.4.1" + "react-dom": "^18.2.0", + "tailwindcss": "^3.4.1", + "typography": "^0.16.24" + }, + "devDependencies": { + "@astrojs/react": "^3.0.9", + "@fontsource-variable/signika": "^5.0.18", + "@tailwindcss/typography": "^0.5.10", + "framer-motion": "^10.18.0", + "react": "^18.2.0" } } diff --git a/src/components/navbar/HamburgerMenu.jsx b/src/components/navbar/HamburgerMenu.jsx new file mode 100644 index 0000000..59e89f8 --- /dev/null +++ b/src/components/navbar/HamburgerMenu.jsx @@ -0,0 +1,11 @@ +import React from "react"; +import {motion} from 'framer-motion'; + +function HamburgerMenu(props) { + const { navLinks, onLinkClick } = props; + return {navLinks.map((navLink, index) => { + return onLinkClick()} className="py-3 px-4 text-gray-800 hover:text-blue-700 hover:bg-gray-100" href={navLink.href} target={navLink.target}>{navLink.linkText} + })}; +} + +export default HamburgerMenu; \ No newline at end of file diff --git a/src/components/navbar/NavigationReact.jsx b/src/components/navbar/NavigationReact.jsx new file mode 100644 index 0000000..235f70f --- /dev/null +++ b/src/components/navbar/NavigationReact.jsx @@ -0,0 +1,100 @@ +import React, { useState } from "react"; +import { AnimatePresence } from "framer-motion"; +import HamburgerMenu from "./HamburgerMenu"; +import "@fontsource-variable/signika"; +import "../../styles/fonts.css"; + +function NavigationReact(props) { + const { currentURL } = props; + const [isHamburgerMenuOpen, setIsHamburgerMenuOpen] = useState(false); + + function getUrlPath(url) { + const parts = url.split("/"); + return "/" + parts[parts.length - 1]; + } + + const navLinks = [ + { href: "//status.ttnrtsite.me", linkText: "Status", target: "" }, + { href: "//forums.ttnrtstie.me", linkText: "Forums", target: "" }, + { href: "//www.ttnrtsite.me", linkText: "Main site", target: "" }, + ]; + + function handleHamburgerMenuClick() { + setIsHamburgerMenuOpen(!isHamburgerMenuOpen); + } + + function renderNavLink(navLink, index) { + return ( + + {navLink.linkText} + + ); + } + + return ( + + ); +} + +export default NavigationReact; \ No newline at end of file diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 336fbd3..f4cc6de 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -1,3 +1,8 @@ +--- +import NavigationReact from "../components/navbar/NavigationReact"; +import "../styles/input.css"; +--- + @@ -6,8 +11,10 @@ Hi there! | TTNRT CO -
+
+
+
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro new file mode 100644 index 0000000..9eed1c1 --- /dev/null +++ b/src/layouts/PageLayout.astro @@ -0,0 +1,9 @@ +--- +import BaseLayout from "./BaseLayout.astro"; +--- + + +
+ +
+ \ No newline at end of file diff --git a/src/layouts/mainpage.astro b/src/layouts/mainpage.astro index 32325f3..17fdaa3 100644 --- a/src/layouts/mainpage.astro +++ b/src/layouts/mainpage.astro @@ -1,13 +1,6 @@ -
-
-

Hello there!

-

We are currently building our website right now!

-

Come back later when it's ready!

-

If you want, check out our other sites

-
-
-
-
-

© TTNRT CORP

-
-
\ No newline at end of file +
+

Hello there!

+

We are currently building our website right now!

+

Come back later when it's ready!

+

If you want, check out our other sites

+
\ No newline at end of file diff --git a/src/pages/FAQ.md b/src/pages/FAQ.md new file mode 100644 index 0000000..d8ffa1f --- /dev/null +++ b/src/pages/FAQ.md @@ -0,0 +1,182 @@ +--- +layout: "../layouts/PageLayout.astro" +title: Audacity ® | Frequently Asked Questions +--- + +## About Audacity + +### What is Audacity? +Audacity is the world’s most popular free software for recording and editing audio. So if you're producing music, a podcast, or just playing around with audio, Audacity is for you. It is [available to download](/download) as a desktop app for Windows, macOS and Linux. + +### Is Audacity free? +Yes! Audacity has always — and will always — remain free for everyone. It is available to download from the [Audacity website](/). + +### Who is Audacity for? +Audacity is for anyone who wants to get creative with sound. It’s also the perfect tool for anyone who needs to quickly edit or export audio, for any reason. + +Here are a few of the most common ways Audacity is used every day: + +- Podcasters recording and editing spoken content. Audacity is the world’s most popular app for podcasters. +- Musicians and bedroom producers, who can edit multiple-parts, mix and add simple effects in an app that’s faster and more intuitive than most DAWs. +- Field recorders and educators, who can capture, edit or analyze the sounds of environments, ambience, animals and more. + +### Is Audacity open source? +Audacity is proudly open source. This means its source code remains open to anyone to view or modify. Audacity is licensed under the GNU General Public License. Details can be found [here](https://github.com/audacity/audacity/blob/master/LICENSE.txt). + +A dedicated worldwide community of passionate audio lovers have collaborated to make Audacity the well-loved software it is today. Many third-party plugins have also been developed for Audacity thanks to its open source nature. + +--- + +## Download & install + +### What devices are compatible with Audacity? +Audacity is tested compatible with the following operating systems: + +- Windows 10 & 11, with Vista, 7 and 8.1 believed to work +- MacOS 12 & 13, with OS X versions since 10.9 believed to still work +- Linux: Ubuntu 22.04, with most major distributions believed to work. + + +### Is Audacity only available for desktop? +Yes, Audacity is only available for desktop computers or laptops. + +There is no mobile version of Audacity available. + +### Where can I download Audacity? +Audacity is available to download from the [Audacity website](/). + +You can either download the app directly, or download Audacity through the free [Muse Hub](https://www.musehub.com/). + +If you download Audacity via the Muse Hub, you'll also get access to a free selection of sounds, loops and effects available to use in your Audacity projects. + +### Why should I download Audacity through the Muse Hub? +The [Muse Hub](https://www.musehub.com/) is a gateway to creativity for any audio producer. It's packed with the best free apps, sounds and effects for composing, producing or performing. In the Muse Hub you'll find: + +- **Muse Sounds:** premium collections of sampled instruments, including keys, strings, brass, woodwind, percussion, choirs and electronics. Hear your music played back in astonishing detail with these moving — and completely free — preset packs. +- **Elements:** free looping sound clips. Drop them easily into your Audacity performances or podcasts. +- **Muse FX:** effects plugins including reverb, delay, compress and more, for fine-tuning your Audacity projects. +You can download Audacity via the Muse Hub. If you already have Audacity, you can download the Muse Hub and access the free extras [here](https://www.musehub.com/). + + +### How do I install Audacity or update to the latest version? +You can learn how to install Audacity on Windows, macOS and Linux on our [support page](https://support.audacityteam.org/basics/downloading-and-installing-audacity). + + +### Is Audacity safe to download? +Yes. Audacity is entirely safe to download and install on your desktop computer if it has been downloaded directly from the [Audacity website](/). + +We also publish official versions through the Microsoft Store, via `winget`, via Github and Fosshub. There also are third party Audacity builds around, though we cannot guarantee for the integrity of versions downloaded from places other than mentioned here. + +--- + +## Features + +### What features come with Audacity? +In the app, every audio creator can: + +- Record live with a microphone or mixer. Or digitize imported recordings. +- Edit your tracks fast with intuitive tools, including cutting, pasting and smooth volume mixing. +- Perfect your audio with more advanced effects: +- Reduce background static with noise reduction tools. +- Adjust tempo without altering pitch or vice versa. +- Alter frequencies with equalizers, high and low-pass filters and more. +- Reduce or isolate vocals in stereo tracks. +- Add impact with distortion, echo, reverb and more effects. +- Import, export and convert files in every popular audio format, including mp3, m4a, AIFF, FLAC, WAV and more. You can even combine clips from multiple formats into the same project. +- Take your editing to the next level with an extensive selection of third-party effects plugins, designed by the passionate Audacity, open-source community. +- Visualize and analyze your audio clips in Spectrogram view. +- Upload and share your files online to [audio.com](https://audio.com/), instantly. + +To learn more about specific features, check out the [Audacity manual](https://manual.audacityteam.org/index.html). + +### What audio file formats are compatible with Audacity? +Audacity supports import, export and conversion of files in every popular audio format, including mp3, m4a, AIFF, FLAC, WAV and more. In fact, you can just use Audacity to convert files into different formats if you like. + +You can even combine clips from multiple formats into the same audio project. + +### What audio quality is compatible with Audacity? +Audacity supports 16-bit, 24-bit and 32-bit audio. Sample rates and formats are converted using high-quality resampling and dithering. + +### Can I use Audacity to produce music? +Yes! Audacity can be used to record and produce your music tracks. Because it's free and easy-to-use, Audacity is a great DAW for music production beginners or those who want to make quick edits to recordings of live performances. + +For more information on how to use specific Audacity features, check out the [Audacity manual](https://manual.audacityteam.org/). + +### Can I use Audacity to produce podcasts? +Yes! In fact, Audacity is the world's most popular software for recording and producing podcasts — because it's easy-to-use and completely free. + +For more information on how to use specific Audacity features, check out the [Audacity manual](https://manual.audacityteam.org/). + +### Is Audacity a DAW? +Yes. Audacity is a DAW just like GarageBand, FL Studio, Ableton Live, Logic Pro and others. Many musicians use Audacity to record and produce their tracks. + +The Audacity team is always looking for new ways to improve the experience for musicians and music producers, so look out for new features in future updates. + +### I'm just getting started with Audacity. Are there any free tutorials available? +We have a beginner tutorial series available on https://support.audacityteam.org/, beginning with [installing Audacity](https://support.audacityteam.org/basics/downloading-and-installing-audacity) and [FFmpeg](https://support.audacityteam.org/basics/installing-ffmpeg), [recording your voice](https://support.audacityteam.org/basics/recording-your-voice-and-microphone), [recording desktop audio](https://support.audacityteam.org/basics/recording-desktop-audio), [editing audio](https://support.audacityteam.org/basics/audacity-editing), [saving and exporting projects](https://support.audacityteam.org/basics/saving-and-exporting-projects) and more! + +### Is Audacity compatible with third party plugins? +Yes! As an open-source application many third party plugins have been developed for Audacity. Check out a list of some of our team's favorite Audacity plugins at https://plugins.audacityteam.org/ + +Audacity supports VST3, LADSPA, LV2, Nyquist, VST and Audio Unit plugins. + + + +### Where can I find more information about specific Audacity features? + +Try the free, online [Audacity manual](https://manual.audacityteam.org/) for in-depth, technical information on specific features. + +--- + +## Legal & privacy + +### What is Audacity's privacy policy? +The Audacity app only collects data relevant to error reporting (such as device information) and software updates. + +The Audacity team will take all the necessary steps to keep your data protected. It is fully GDPR compliant. + +Read Audacity's privacy policy in full [here](/desktop-privacy-notice/). The cookie policy for this website can be found [here](/cookie-policy/). + +### Is Audacity spyware? +No. Audacity is entirely safe to use and doesn't store personal information. Audacity only collects data relevant to error reporting (such as device information) and software updates. + +The Audacity team is fully GDPR compliant. Read Audacity's privacy policy in full [here](/desktop-privacy-notice/). + +### I've shared my Audacity project on Audio.com. What are my legal rights regarding my project? +If you are the sole creator of the audio project, the intellectual property rights and mechanical copyright is retained by you. Similar to other UGC (User Generated Content) platforms, by using [audio.com](https://audio.com/) you grant a license to host and show your work. You are also free to distribute your work on other platforms, if you wish. For more details read the full [Terms & Conditions](https://audio.com/legal/terms-of-use.pdf). + +--- + +## Team & news + +### Who is the Audacity Team? +Audacity is developed by a small team working remotely and supported by the community. + +Current team members are: + +* Product owner: Martin Keary +* Project manager: Yana Larina +* Developers: Matthieu Hodgkinson, Paul Licameli, K. Soze, Vitaly Sverchinsky, Dmitry Vedenko +* Designers: Dilson's Pickles, Leo Wattenberg +* Testers: Sergey Lapysh, Antons Činakovs +* Borrowed from other Muse projects: Peter Jonas, Jessica Williamson + +Code contributors can be found on Github in the [commit history](https://github.com/audacity/audacity/commits/master) and [graphs](https://github.com/audacity/audacity/graphs/contributors), [contributors to the manual](https://manual.audacityteam.org/man/credits.html), [contributors to the forum](https://forum.audacityteam.org/u?order=post_count&period=all) and [contributors to the support site](https://support.audacityteam.org/community/contributing/credits-and-license) can be found on the respective pages. + +### Where can I stay up to date with the latest Audacity news and updates? +Check out our [blog](/blog), subscribe to Audacity [YouTube Channel](https://www.youtube.com/@audacity), or follow us on [Facebook](https://www.facebook.com/Audacity/) or [Twitter](https://twitter.com/getaudacity). + +### I have a question or issue with Audacity. Is there a support team I can contact? +Many frequently asked questions and issues are answered on our support page [here](https://support.audacityteam.org/). For detailed information on Audacity features, please check out the [Audacity manual](https://manual.audacityteam.org/index.html). + +If you have a question you can't find the answer to, please leave a comment on the [Audacity forum](https://forum.audacityteam.org/), where one of our team (or someone in the Audacity community), will be happy to help! + +### I'm an open-source developer working with Audacity. How can I get in touch with the team? +Audacity is currently undergoing major code restructuring, so we unfortunately have very limited capacity to support third parties. That said, feel free to drop by our [dev discord](/devserver). + +### What is the history of Audacity? +Audacity has transformed the lives of musicians and audio content creators for over two decades. Since launching in 2000, the desktop app has been downloaded over 200 million times. + +In 2020, we joined with the makers of [Ultimate Guitar](https://www.ultimate-guitar.com/), [MuseScore](https://musescore.org/) and others to form [Muse Group](https://mu.se/), with a mission to empower millions of creatives all over the globe. Since then, our sister service [audio.com](https://audio.com) launched. + +We remain committed to our free, open-source roots — and passionate about helping the next generation create the very best sounds, music and podcasts with Audacity. \ No newline at end of file diff --git a/src/styles/fonts.css b/src/styles/fonts.css new file mode 100644 index 0000000..f65236d --- /dev/null +++ b/src/styles/fonts.css @@ -0,0 +1,3 @@ +.signika { + font-family: 'Signika Variable', sans-serif +} \ No newline at end of file diff --git a/src/styles/icons.css b/src/styles/icons.css new file mode 100644 index 0000000..38eee40 --- /dev/null +++ b/src/styles/icons.css @@ -0,0 +1,88 @@ +@font-face { + font-family: 'MusescoreIcon'; + src: url('/fonts/MusescoreIcon.ttf') format('truetype'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +.icon { + font-family: 'MusescoreIcon', sans-serif; + font-size: 16px +} + +.icon-large { + font-size: 36px; +} + +.icon-medium { + font-size: 24px; +} + +.icon-save:before { + content: "\EF29"; +} + +.icon-share:before { + content: "\F359" +} + +.icon-export:before { + content: "\EF24" +} + +.icon-import:before { + content: "\F357" +} + +.icon-mixer:before { + content: "\EF27" +} + +.icon-arrow-left:before { + content: "\EF35" +} + +.icon-arrow-right:before { + content: "\EF34" +} + +.icon-monitor:before { + content: "\F35E" +} + +.icon-file:before { + content: "\EF22" +} + +.icon-plug:before { + content: "\F440" +} + +.icon-waveform:before { + content: "\F43C" +} + +.icon-caret-right:before { + content: "\EF11" +} + +.icon-caret-down:before { + content: "\EF12" +} + +.icon-cloud-upload:before { + content: "\EF25" +} + +.icon-microphone:before { + content: "\F41B" +} + +.icon-waveform:before { + content: "\F43C" +} + +.icon-cycle:before { + content: "\F358" +} \ No newline at end of file diff --git a/src/styles/input.css b/src/styles/input.css new file mode 100644 index 0000000..327f7f0 --- /dev/null +++ b/src/styles/input.css @@ -0,0 +1,119 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + h1 { + @apply text-2xl md:text-4xl text-gray-900 font-semibold leading-tight + } + + h2 { + @apply text-xl md:text-3xl text-gray-800 font-semibold leading-tight + } + + + h3 { + @apply text-lg md:text-2xl text-gray-700 font-bold + } + + h4 { + @apply text-base md:text-xl text-gray-700 font-bold xl:leading-snug + } + + h5 { + @apply text-base font-bold text-gray-700 + } + + p { + @apply text-base text-gray-700 leading-snug + } + + label { + @apply text-gray-700 + } + + .list li { + @apply mt-2 list-disc list-inside text-base lg:text-lg text-gray-700 leading-relaxed + } + + small { + @apply text-xs md:text-sm uppercase text-gray-700 + } + + .hyperlink { + @apply text-blue-700 underline hover:text-blue-600 + } + + .dark-hyperlink { + @apply text-blue-400 underline hover:text-blue-300 + } + + .footer-link-list li { + @apply text-gray-700 hover:text-blue-700 w-fit + } + + .copyright { + @apply text-xs text-gray-600 + } + + .sub-heading { + @apply text-base + } + + .faq-question { + @apply font-semibold text-lg text-gray-800 + } + + .footer-list-heading { + @apply font-semibold text-lg text-gray-800 + } + + .privacy-banner-heading { + @apply font-semibold text-2xl text-gray-800 + } + + .additional-resource-heading { + @apply font-semibold text-lg text-gray-800 + } + + .skip-to-content { + position: fixed; + background-color: rgb(29 78 216 ); + color: white; + display: flex; + justify-content: center; + align-items: center; + left: 0px; + right: 0px; + top: 0px; + opacity: 0; + transition-property: top; + transition-duration: .3s; + height: 48px; + } + + .skip-to-content:focus { + top: 56px; + opacity: 1; + } + + #consent-popup { + position: fixed; + bottom: 0; + left: 0; + right: 0; + padding: 2rem; + background-color: #fff; + opacity: 1; + transition: bottom .5s ease; + + &.hide{ + bottom:-412px; + } + + + } + + + +} \ No newline at end of file diff --git a/tailwind.config.mjs b/tailwind.config.mjs index 19f0614..927bfbd 100644 --- a/tailwind.config.mjs +++ b/tailwind.config.mjs @@ -1,8 +1,16 @@ /** @type {import('tailwindcss').Config} */ -export default { - content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], +module.exports = { + content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"], theme: { - extend: {}, + extend: {}, + screens: { + xs: "320px", + sm: "640px", + md: "768px", + lg: "1024px", + xl: "1280px", + "2xl": "1536px", + }, }, - plugins: [], -} + plugins: [require("@tailwindcss/typography")], + }; \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index d78f81e..7fb90fa 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,3 +1,7 @@ { - "extends": "astro/tsconfigs/base" -} + "extends": "astro/tsconfigs/base", + "compilerOptions": { + "jsx": "react-jsx", + "jsxImportSource": "react" + } +} \ No newline at end of file