diff --git a/.github/workflows/nextjs.yml b/.github/workflows/nextjs.yml
index ee7ca0f..c0972d8 100644
--- a/.github/workflows/nextjs.yml
+++ b/.github/workflows/nextjs.yml
@@ -25,9 +25,9 @@ jobs:
id: detect-package-manager
run: |
if [ -f "${{ github.workspace }}/package.json" ]; then
- echo "::set-output name=manager::npm"
- echo "::set-output name=command::ci"
- echo "::set-output name=runner::npx --no-install"
+ echo "manager=npm" >> $GITHUB_OUTPUT
+ echo "command=ci" >> $GITHUB_OUTPUT
+ echo "runner=npx --no-install" >> $GITHUB_OUTPUT
exit 0
else
echo "Unable to determine packager manager"
diff --git a/package-lock.json b/package-lock.json
index b9e46ad..ed05f5c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
"linkedom": "^0.14.25",
"next": "13.2.4",
"nextjs-google-analytics": "^2.3.3",
+ "prismjs": "^1.29.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-hook-form": "^7.43.5",
@@ -31,6 +32,7 @@
},
"devDependencies": {
"@types/node": "18.15.0",
+ "@types/prismjs": "^1.26.0",
"@types/react": "18.0.28",
"@types/react-dom": "18.0.11",
"autoprefixer": "^10.4.14",
@@ -41,7 +43,18 @@
"next-bundle-analyzer": "^0.6.7",
"next-compose-plugins": "^2.2.1",
"postcss": "^8.4.21",
- "tailwindcss": "^3.2.7"
+ "tailwindcss": "^3.3.2"
+ }
+ },
+ "node_modules/@alloc/quick-lru": {
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+ "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+ "engines": {
+ "node": ">=10"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@discoveryjs/json-ext": {
@@ -120,6 +133,54 @@
"react-hook-form": "^7.0.0"
}
},
+ "node_modules/@jridgewell/gen-mapping": {
+ "version": "0.3.3",
+ "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+ "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+ "dependencies": {
+ "@jridgewell/set-array": "^1.0.1",
+ "@jridgewell/sourcemap-codec": "^1.4.10",
+ "@jridgewell/trace-mapping": "^0.3.9"
+ },
+ "engines": {
+ "node": ">=6.0.0"
+ }
+ },
+ "node_modules/@jridgewell/resolve-uri": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+ "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+ "engines": {
+ "node": ">=6.0.0"
+ }
+ },
+ "node_modules/@jridgewell/set-array": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+ "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+ "engines": {
+ "node": ">=6.0.0"
+ }
+ },
+ "node_modules/@jridgewell/sourcemap-codec": {
+ "version": "1.4.15",
+ "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+ "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+ },
+ "node_modules/@jridgewell/trace-mapping": {
+ "version": "0.3.18",
+ "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz",
+ "integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==",
+ "dependencies": {
+ "@jridgewell/resolve-uri": "3.1.0",
+ "@jridgewell/sourcemap-codec": "1.4.14"
+ }
+ },
+ "node_modules/@jridgewell/trace-mapping/node_modules/@jridgewell/sourcemap-codec": {
+ "version": "1.4.14",
+ "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+ "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
+ },
"node_modules/@next/env": {
"version": "13.2.4",
"resolved": "https://registry.npmjs.org/@next/env/-/env-13.2.4.tgz",
@@ -381,6 +442,12 @@
"integrity": "sha512-z6nr0TTEOBGkzLGmbypWOGnpSpSIBorEhC4L+4HeQ2iezKCi4f77kyslRwvHeNitymGQ+oFyIWGP96l/DPSV9w==",
"dev": true
},
+ "node_modules/@types/prismjs": {
+ "version": "1.26.0",
+ "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.0.tgz",
+ "integrity": "sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==",
+ "dev": true
+ },
"node_modules/@types/prop-types": {
"version": "15.7.5",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -413,35 +480,6 @@
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
"dev": true
},
- "node_modules/acorn": {
- "version": "7.4.1",
- "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
- "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
- "bin": {
- "acorn": "bin/acorn"
- },
- "engines": {
- "node": ">=0.4.0"
- }
- },
- "node_modules/acorn-node": {
- "version": "1.8.2",
- "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
- "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
- "dependencies": {
- "acorn": "^7.0.0",
- "acorn-walk": "^7.0.0",
- "xtend": "^4.0.2"
- }
- },
- "node_modules/acorn-walk": {
- "version": "7.2.0",
- "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
- "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
- "engines": {
- "node": ">=0.4.0"
- }
- },
"node_modules/ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -457,6 +495,11 @@
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
+ "node_modules/any-promise": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+ "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
+ },
"node_modules/anymatch": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -510,8 +553,7 @@
"node_modules/balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
- "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
- "dev": true
+ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
},
"node_modules/binary-extensions": {
"version": "2.2.0",
@@ -706,7 +748,8 @@
"node_modules/color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
- "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+ "dev": true
},
"node_modules/colord": {
"version": "2.9.3",
@@ -723,6 +766,11 @@
"node": ">= 10"
}
},
+ "node_modules/concat-map": {
+ "version": "0.0.1",
+ "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+ "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+ },
"node_modules/cross-env": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
@@ -926,30 +974,6 @@
"node": ">=8"
}
},
- "node_modules/defined": {
- "version": "1.0.1",
- "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
- "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==",
- "funding": {
- "url": "https://github.com/sponsors/ljharb"
- }
- },
- "node_modules/detective": {
- "version": "5.2.1",
- "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
- "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
- "dependencies": {
- "acorn-node": "^1.8.2",
- "defined": "^1.0.0",
- "minimist": "^1.2.6"
- },
- "bin": {
- "detective": "bin/detective.js"
- },
- "engines": {
- "node": ">=0.8.0"
- }
- },
"node_modules/didyoumean": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -1129,8 +1153,7 @@
"node_modules/fs.realpath": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
- "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
- "dev": true
+ "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
},
"node_modules/fsevents": {
"version": "2.3.2",
@@ -1293,6 +1316,20 @@
"url": "https://github.com/fb55/entities?sponsor=1"
}
},
+ "node_modules/inflight": {
+ "version": "1.0.6",
+ "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+ "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+ "dependencies": {
+ "once": "^1.3.0",
+ "wrappy": "1"
+ }
+ },
+ "node_modules/inherits": {
+ "version": "2.0.4",
+ "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+ },
"node_modules/is-binary-path": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -1305,9 +1342,9 @@
}
},
"node_modules/is-core-module": {
- "version": "2.11.0",
- "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
- "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
+ "version": "2.12.1",
+ "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.1.tgz",
+ "integrity": "sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==",
"dependencies": {
"has": "^1.0.3"
},
@@ -1375,6 +1412,14 @@
"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
"dev": true
},
+ "node_modules/jiti": {
+ "version": "1.18.2",
+ "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.18.2.tgz",
+ "integrity": "sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==",
+ "bin": {
+ "jiti": "bin/jiti.js"
+ }
+ },
"node_modules/js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -1388,6 +1433,11 @@
"node": ">=10"
}
},
+ "node_modules/lines-and-columns": {
+ "version": "1.2.4",
+ "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+ "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
+ },
"node_modules/linkedom": {
"version": "0.14.25",
"resolved": "https://registry.npmjs.org/linkedom/-/linkedom-0.14.25.tgz",
@@ -1560,14 +1610,6 @@
"url": "https://github.com/sponsors/isaacs"
}
},
- "node_modules/minimist": {
- "version": "1.2.8",
- "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
- "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
- "funding": {
- "url": "https://github.com/sponsors/ljharb"
- }
- },
"node_modules/minipass": {
"version": "4.2.5",
"resolved": "https://registry.npmjs.org/minipass/-/minipass-4.2.5.tgz",
@@ -1586,10 +1628,26 @@
"node": ">=10"
}
},
+ "node_modules/mz": {
+ "version": "2.7.0",
+ "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+ "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+ "dependencies": {
+ "any-promise": "^1.0.0",
+ "object-assign": "^4.0.1",
+ "thenify-all": "^1.0.0"
+ }
+ },
"node_modules/nanoid": {
- "version": "3.3.4",
- "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
- "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+ "version": "3.3.6",
+ "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+ "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/ai"
+ }
+ ],
"bin": {
"nanoid": "bin/nanoid.cjs"
},
@@ -1752,6 +1810,14 @@
"url": "https://github.com/fb55/nth-check?sponsor=1"
}
},
+ "node_modules/object-assign": {
+ "version": "4.1.1",
+ "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+ "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
"node_modules/object-hash": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
@@ -1760,6 +1826,14 @@
"node": ">= 6"
}
},
+ "node_modules/once": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+ "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+ "dependencies": {
+ "wrappy": "1"
+ }
+ },
"node_modules/open": {
"version": "8.4.2",
"resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
@@ -1786,6 +1860,14 @@
"opener": "bin/opener-bin.js"
}
},
+ "node_modules/path-is-absolute": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+ "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
"node_modules/path-key": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@@ -1840,10 +1922,18 @@
"node": ">=0.10.0"
}
},
+ "node_modules/pirates": {
+ "version": "4.0.5",
+ "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
+ "integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==",
+ "engines": {
+ "node": ">= 6"
+ }
+ },
"node_modules/postcss": {
- "version": "8.4.21",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
- "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+ "version": "8.4.24",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
+ "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
"funding": [
{
"type": "opencollective",
@@ -1852,10 +1942,14 @@
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/postcss"
+ },
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/ai"
}
],
"dependencies": {
- "nanoid": "^3.3.4",
+ "nanoid": "^3.3.6",
"picocolors": "^1.0.0",
"source-map-js": "^1.0.2"
},
@@ -1959,16 +2053,16 @@
}
},
"node_modules/postcss-import": {
- "version": "14.1.0",
- "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
- "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
+ "version": "15.1.0",
+ "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+ "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
"dependencies": {
"postcss-value-parser": "^4.0.0",
"read-cache": "^1.0.0",
"resolve": "^1.1.7"
},
"engines": {
- "node": ">=10.0.0"
+ "node": ">=14.0.0"
},
"peerDependencies": {
"postcss": "^8.0.0"
@@ -1992,34 +2086,6 @@
"postcss": "^8.4.21"
}
},
- "node_modules/postcss-load-config": {
- "version": "3.1.4",
- "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
- "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
- "dependencies": {
- "lilconfig": "^2.0.5",
- "yaml": "^1.10.2"
- },
- "engines": {
- "node": ">= 10"
- },
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/postcss/"
- },
- "peerDependencies": {
- "postcss": ">=8.0.9",
- "ts-node": ">=9.0.0"
- },
- "peerDependenciesMeta": {
- "postcss": {
- "optional": true
- },
- "ts-node": {
- "optional": true
- }
- }
- },
"node_modules/postcss-merge-longhand": {
"version": "5.1.7",
"resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz",
@@ -2119,11 +2185,11 @@
}
},
"node_modules/postcss-nested": {
- "version": "6.0.0",
- "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz",
- "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==",
+ "version": "6.0.1",
+ "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
+ "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
"dependencies": {
- "postcss-selector-parser": "^6.0.10"
+ "postcss-selector-parser": "^6.0.11"
},
"engines": {
"node": ">=12.0"
@@ -2365,6 +2431,14 @@
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
},
+ "node_modules/prismjs": {
+ "version": "1.29.0",
+ "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+ "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+ "engines": {
+ "node": ">=6"
+ }
+ },
"node_modules/queue-microtask": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -2384,17 +2458,6 @@
}
]
},
- "node_modules/quick-lru": {
- "version": "5.1.1",
- "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
- "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
- "engines": {
- "node": ">=10"
- },
- "funding": {
- "url": "https://github.com/sponsors/sindresorhus"
- }
- },
"node_modules/ranges-apply": {
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/ranges-apply/-/ranges-apply-7.0.6.tgz",
@@ -2498,11 +2561,11 @@
}
},
"node_modules/resolve": {
- "version": "1.22.1",
- "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
- "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
+ "version": "1.22.2",
+ "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
+ "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==",
"dependencies": {
- "is-core-module": "^2.9.0",
+ "is-core-module": "^2.11.0",
"path-parse": "^1.0.7",
"supports-preserve-symlinks-flag": "^1.0.0"
},
@@ -2694,6 +2757,74 @@
"postcss": "^8.2.15"
}
},
+ "node_modules/sucrase": {
+ "version": "3.32.0",
+ "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.32.0.tgz",
+ "integrity": "sha512-ydQOU34rpSyj2TGyz4D2p8rbktIOZ8QY9s+DGLvFU1i5pWJE8vkpruCjGCMHsdXwnD7JDcS+noSwM/a7zyNFDQ==",
+ "dependencies": {
+ "@jridgewell/gen-mapping": "^0.3.2",
+ "commander": "^4.0.0",
+ "glob": "7.1.6",
+ "lines-and-columns": "^1.1.6",
+ "mz": "^2.7.0",
+ "pirates": "^4.0.1",
+ "ts-interface-checker": "^0.1.9"
+ },
+ "bin": {
+ "sucrase": "bin/sucrase",
+ "sucrase-node": "bin/sucrase-node"
+ },
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/sucrase/node_modules/brace-expansion": {
+ "version": "1.1.11",
+ "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+ "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+ "dependencies": {
+ "balanced-match": "^1.0.0",
+ "concat-map": "0.0.1"
+ }
+ },
+ "node_modules/sucrase/node_modules/commander": {
+ "version": "4.1.1",
+ "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+ "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+ "engines": {
+ "node": ">= 6"
+ }
+ },
+ "node_modules/sucrase/node_modules/glob": {
+ "version": "7.1.6",
+ "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+ "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+ "dependencies": {
+ "fs.realpath": "^1.0.0",
+ "inflight": "^1.0.4",
+ "inherits": "2",
+ "minimatch": "^3.0.4",
+ "once": "^1.3.0",
+ "path-is-absolute": "^1.0.0"
+ },
+ "engines": {
+ "node": "*"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/isaacs"
+ }
+ },
+ "node_modules/sucrase/node_modules/minimatch": {
+ "version": "3.1.2",
+ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+ "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+ "dependencies": {
+ "brace-expansion": "^1.1.7"
+ },
+ "engines": {
+ "node": "*"
+ }
+ },
"node_modules/supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -2763,43 +2894,95 @@
"integrity": "sha512-WFnDXSS4kFTZwjKg5/oZSGzBRU/l+qcbv5NVTzLUQvJ9yovDAP05h0F2+ZFW0Lw9EcgRoc2AfURUdZvnEFrXKg=="
},
"node_modules/tailwindcss": {
- "version": "3.2.7",
- "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.7.tgz",
- "integrity": "sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==",
+ "version": "3.3.2",
+ "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz",
+ "integrity": "sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==",
"dependencies": {
+ "@alloc/quick-lru": "^5.2.0",
"arg": "^5.0.2",
"chokidar": "^3.5.3",
- "color-name": "^1.1.4",
- "detective": "^5.2.1",
"didyoumean": "^1.2.2",
"dlv": "^1.1.3",
"fast-glob": "^3.2.12",
"glob-parent": "^6.0.2",
"is-glob": "^4.0.3",
- "lilconfig": "^2.0.6",
+ "jiti": "^1.18.2",
+ "lilconfig": "^2.1.0",
"micromatch": "^4.0.5",
"normalize-path": "^3.0.0",
"object-hash": "^3.0.0",
"picocolors": "^1.0.0",
- "postcss": "^8.0.9",
- "postcss-import": "^14.1.0",
- "postcss-js": "^4.0.0",
- "postcss-load-config": "^3.1.4",
- "postcss-nested": "6.0.0",
+ "postcss": "^8.4.23",
+ "postcss-import": "^15.1.0",
+ "postcss-js": "^4.0.1",
+ "postcss-load-config": "^4.0.1",
+ "postcss-nested": "^6.0.1",
"postcss-selector-parser": "^6.0.11",
"postcss-value-parser": "^4.2.0",
- "quick-lru": "^5.1.1",
- "resolve": "^1.22.1"
+ "resolve": "^1.22.2",
+ "sucrase": "^3.32.0"
},
"bin": {
"tailwind": "lib/cli.js",
"tailwindcss": "lib/cli.js"
},
"engines": {
- "node": ">=12.13.0"
+ "node": ">=14.0.0"
+ }
+ },
+ "node_modules/tailwindcss/node_modules/postcss-load-config": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
+ "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==",
+ "dependencies": {
+ "lilconfig": "^2.0.5",
+ "yaml": "^2.1.1"
+ },
+ "engines": {
+ "node": ">= 14"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/postcss/"
},
"peerDependencies": {
- "postcss": "^8.0.9"
+ "postcss": ">=8.0.9",
+ "ts-node": ">=9.0.0"
+ },
+ "peerDependenciesMeta": {
+ "postcss": {
+ "optional": true
+ },
+ "ts-node": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/tailwindcss/node_modules/yaml": {
+ "version": "2.3.1",
+ "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz",
+ "integrity": "sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==",
+ "engines": {
+ "node": ">= 14"
+ }
+ },
+ "node_modules/thenify": {
+ "version": "3.3.1",
+ "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+ "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+ "dependencies": {
+ "any-promise": "^1.0.0"
+ }
+ },
+ "node_modules/thenify-all": {
+ "version": "1.6.0",
+ "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+ "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+ "dependencies": {
+ "thenify": ">= 3.1.0 < 4"
+ },
+ "engines": {
+ "node": ">=0.8"
}
},
"node_modules/tiny-invariant": {
@@ -2827,6 +3010,11 @@
"node": ">=6"
}
},
+ "node_modules/ts-interface-checker": {
+ "version": "0.1.13",
+ "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+ "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
+ },
"node_modules/tslib": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
@@ -2940,6 +3128,11 @@
"node": ">= 8"
}
},
+ "node_modules/wrappy": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+ "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
+ },
"node_modules/wretch": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/wretch/-/wretch-2.5.1.tgz",
@@ -2969,18 +3162,11 @@
}
}
},
- "node_modules/xtend": {
- "version": "4.0.2",
- "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
- "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
- "engines": {
- "node": ">=0.4"
- }
- },
"node_modules/yaml": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
"integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+ "dev": true,
"engines": {
"node": ">= 6"
}
@@ -2995,6 +3181,11 @@
}
},
"dependencies": {
+ "@alloc/quick-lru": {
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+ "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw=="
+ },
"@discoveryjs/json-ext": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@@ -3048,6 +3239,47 @@
"integrity": "sha512-bA3aZ79UgcHj7tFV7RlgThzwSSHZgvfbt2wprldRkYBcMopdMvHyO17Wwp/twcJasNFischFfS7oz8Katz8DdQ==",
"requires": {}
},
+ "@jridgewell/gen-mapping": {
+ "version": "0.3.3",
+ "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+ "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+ "requires": {
+ "@jridgewell/set-array": "^1.0.1",
+ "@jridgewell/sourcemap-codec": "^1.4.10",
+ "@jridgewell/trace-mapping": "^0.3.9"
+ }
+ },
+ "@jridgewell/resolve-uri": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+ "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w=="
+ },
+ "@jridgewell/set-array": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+ "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw=="
+ },
+ "@jridgewell/sourcemap-codec": {
+ "version": "1.4.15",
+ "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+ "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+ },
+ "@jridgewell/trace-mapping": {
+ "version": "0.3.18",
+ "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz",
+ "integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==",
+ "requires": {
+ "@jridgewell/resolve-uri": "3.1.0",
+ "@jridgewell/sourcemap-codec": "1.4.14"
+ },
+ "dependencies": {
+ "@jridgewell/sourcemap-codec": {
+ "version": "1.4.14",
+ "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+ "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
+ }
+ }
+ },
"@next/env": {
"version": "13.2.4",
"resolved": "https://registry.npmjs.org/@next/env/-/env-13.2.4.tgz",
@@ -3180,6 +3412,12 @@
"integrity": "sha512-z6nr0TTEOBGkzLGmbypWOGnpSpSIBorEhC4L+4HeQ2iezKCi4f77kyslRwvHeNitymGQ+oFyIWGP96l/DPSV9w==",
"dev": true
},
+ "@types/prismjs": {
+ "version": "1.26.0",
+ "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.0.tgz",
+ "integrity": "sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==",
+ "dev": true
+ },
"@types/prop-types": {
"version": "15.7.5",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -3212,26 +3450,6 @@
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
"dev": true
},
- "acorn": {
- "version": "7.4.1",
- "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
- "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A=="
- },
- "acorn-node": {
- "version": "1.8.2",
- "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
- "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
- "requires": {
- "acorn": "^7.0.0",
- "acorn-walk": "^7.0.0",
- "xtend": "^4.0.2"
- }
- },
- "acorn-walk": {
- "version": "7.2.0",
- "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
- "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA=="
- },
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -3241,6 +3459,11 @@
"color-convert": "^2.0.1"
}
},
+ "any-promise": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+ "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
+ },
"anymatch": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -3272,8 +3495,7 @@
"balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
- "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
- "dev": true
+ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
},
"binary-extensions": {
"version": "2.2.0",
@@ -3399,7 +3621,8 @@
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
- "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+ "dev": true
},
"colord": {
"version": "2.9.3",
@@ -3413,6 +3636,11 @@
"integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
"dev": true
},
+ "concat-map": {
+ "version": "0.0.1",
+ "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+ "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+ },
"cross-env": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
@@ -3554,21 +3782,6 @@
"integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
"dev": true
},
- "defined": {
- "version": "1.0.1",
- "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
- "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q=="
- },
- "detective": {
- "version": "5.2.1",
- "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
- "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
- "requires": {
- "acorn-node": "^1.8.2",
- "defined": "^1.0.0",
- "minimist": "^1.2.6"
- }
- },
"didyoumean": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -3701,8 +3914,7 @@
"fs.realpath": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
- "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
- "dev": true
+ "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
},
"fsevents": {
"version": "2.3.2",
@@ -3814,6 +4026,20 @@
}
}
},
+ "inflight": {
+ "version": "1.0.6",
+ "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+ "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+ "requires": {
+ "once": "^1.3.0",
+ "wrappy": "1"
+ }
+ },
+ "inherits": {
+ "version": "2.0.4",
+ "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+ },
"is-binary-path": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -3823,9 +4049,9 @@
}
},
"is-core-module": {
- "version": "2.11.0",
- "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
- "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
+ "version": "2.12.1",
+ "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.1.tgz",
+ "integrity": "sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==",
"requires": {
"has": "^1.0.3"
}
@@ -3869,6 +4095,11 @@
"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
"dev": true
},
+ "jiti": {
+ "version": "1.18.2",
+ "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.18.2.tgz",
+ "integrity": "sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg=="
+ },
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -3879,6 +4110,11 @@
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
"integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ=="
},
+ "lines-and-columns": {
+ "version": "1.2.4",
+ "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+ "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
+ },
"linkedom": {
"version": "0.14.25",
"resolved": "https://registry.npmjs.org/linkedom/-/linkedom-0.14.25.tgz",
@@ -4014,11 +4250,6 @@
"brace-expansion": "^2.0.1"
}
},
- "minimist": {
- "version": "1.2.8",
- "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
- "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="
- },
"minipass": {
"version": "4.2.5",
"resolved": "https://registry.npmjs.org/minipass/-/minipass-4.2.5.tgz",
@@ -4031,10 +4262,20 @@
"integrity": "sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==",
"dev": true
},
+ "mz": {
+ "version": "2.7.0",
+ "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+ "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+ "requires": {
+ "any-promise": "^1.0.0",
+ "object-assign": "^4.0.1",
+ "thenify-all": "^1.0.0"
+ }
+ },
"nanoid": {
- "version": "3.3.4",
- "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
- "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+ "version": "3.3.6",
+ "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+ "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA=="
},
"next": {
"version": "13.2.4",
@@ -4128,11 +4369,24 @@
"boolbase": "^1.0.0"
}
},
+ "object-assign": {
+ "version": "4.1.1",
+ "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+ "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
+ },
"object-hash": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
"integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw=="
},
+ "once": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+ "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+ "requires": {
+ "wrappy": "1"
+ }
+ },
"open": {
"version": "8.4.2",
"resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
@@ -4150,6 +4404,11 @@
"integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
"dev": true
},
+ "path-is-absolute": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+ "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg=="
+ },
"path-key": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@@ -4186,12 +4445,17 @@
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="
},
+ "pirates": {
+ "version": "4.0.5",
+ "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
+ "integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ=="
+ },
"postcss": {
- "version": "8.4.21",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
- "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+ "version": "8.4.24",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
+ "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
"requires": {
- "nanoid": "^3.3.4",
+ "nanoid": "^3.3.6",
"picocolors": "^1.0.0",
"source-map-js": "^1.0.2"
}
@@ -4257,9 +4521,9 @@
"requires": {}
},
"postcss-import": {
- "version": "14.1.0",
- "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
- "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
+ "version": "15.1.0",
+ "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+ "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
"requires": {
"postcss-value-parser": "^4.0.0",
"read-cache": "^1.0.0",
@@ -4274,15 +4538,6 @@
"camelcase-css": "^2.0.1"
}
},
- "postcss-load-config": {
- "version": "3.1.4",
- "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
- "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
- "requires": {
- "lilconfig": "^2.0.5",
- "yaml": "^1.10.2"
- }
- },
"postcss-merge-longhand": {
"version": "5.1.7",
"resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz",
@@ -4346,11 +4601,11 @@
}
},
"postcss-nested": {
- "version": "6.0.0",
- "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz",
- "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==",
+ "version": "6.0.1",
+ "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
+ "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
"requires": {
- "postcss-selector-parser": "^6.0.10"
+ "postcss-selector-parser": "^6.0.11"
}
},
"postcss-normalize-charset": {
@@ -4496,16 +4751,16 @@
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
},
+ "prismjs": {
+ "version": "1.29.0",
+ "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+ "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q=="
+ },
"queue-microtask": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
"integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
},
- "quick-lru": {
- "version": "5.1.1",
- "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
- "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA=="
- },
"ranges-apply": {
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/ranges-apply/-/ranges-apply-7.0.6.tgz",
@@ -4579,11 +4834,11 @@
}
},
"resolve": {
- "version": "1.22.1",
- "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
- "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
+ "version": "1.22.2",
+ "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
+ "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==",
"requires": {
- "is-core-module": "^2.9.0",
+ "is-core-module": "^2.11.0",
"path-parse": "^1.0.7",
"supports-preserve-symlinks-flag": "^1.0.0"
}
@@ -4703,6 +4958,57 @@
"postcss-selector-parser": "^6.0.4"
}
},
+ "sucrase": {
+ "version": "3.32.0",
+ "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.32.0.tgz",
+ "integrity": "sha512-ydQOU34rpSyj2TGyz4D2p8rbktIOZ8QY9s+DGLvFU1i5pWJE8vkpruCjGCMHsdXwnD7JDcS+noSwM/a7zyNFDQ==",
+ "requires": {
+ "@jridgewell/gen-mapping": "^0.3.2",
+ "commander": "^4.0.0",
+ "glob": "7.1.6",
+ "lines-and-columns": "^1.1.6",
+ "mz": "^2.7.0",
+ "pirates": "^4.0.1",
+ "ts-interface-checker": "^0.1.9"
+ },
+ "dependencies": {
+ "brace-expansion": {
+ "version": "1.1.11",
+ "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+ "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+ "requires": {
+ "balanced-match": "^1.0.0",
+ "concat-map": "0.0.1"
+ }
+ },
+ "commander": {
+ "version": "4.1.1",
+ "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+ "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="
+ },
+ "glob": {
+ "version": "7.1.6",
+ "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+ "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+ "requires": {
+ "fs.realpath": "^1.0.0",
+ "inflight": "^1.0.4",
+ "inherits": "2",
+ "minimatch": "^3.0.4",
+ "once": "^1.3.0",
+ "path-is-absolute": "^1.0.0"
+ }
+ },
+ "minimatch": {
+ "version": "3.1.2",
+ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+ "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+ "requires": {
+ "brace-expansion": "^1.1.7"
+ }
+ }
+ }
+ },
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -4749,33 +5055,65 @@
"integrity": "sha512-WFnDXSS4kFTZwjKg5/oZSGzBRU/l+qcbv5NVTzLUQvJ9yovDAP05h0F2+ZFW0Lw9EcgRoc2AfURUdZvnEFrXKg=="
},
"tailwindcss": {
- "version": "3.2.7",
- "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.7.tgz",
- "integrity": "sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==",
+ "version": "3.3.2",
+ "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz",
+ "integrity": "sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==",
"requires": {
+ "@alloc/quick-lru": "^5.2.0",
"arg": "^5.0.2",
"chokidar": "^3.5.3",
- "color-name": "^1.1.4",
- "detective": "^5.2.1",
"didyoumean": "^1.2.2",
"dlv": "^1.1.3",
"fast-glob": "^3.2.12",
"glob-parent": "^6.0.2",
"is-glob": "^4.0.3",
- "lilconfig": "^2.0.6",
+ "jiti": "^1.18.2",
+ "lilconfig": "^2.1.0",
"micromatch": "^4.0.5",
"normalize-path": "^3.0.0",
"object-hash": "^3.0.0",
"picocolors": "^1.0.0",
- "postcss": "^8.0.9",
- "postcss-import": "^14.1.0",
- "postcss-js": "^4.0.0",
- "postcss-load-config": "^3.1.4",
- "postcss-nested": "6.0.0",
+ "postcss": "^8.4.23",
+ "postcss-import": "^15.1.0",
+ "postcss-js": "^4.0.1",
+ "postcss-load-config": "^4.0.1",
+ "postcss-nested": "^6.0.1",
"postcss-selector-parser": "^6.0.11",
"postcss-value-parser": "^4.2.0",
- "quick-lru": "^5.1.1",
- "resolve": "^1.22.1"
+ "resolve": "^1.22.2",
+ "sucrase": "^3.32.0"
+ },
+ "dependencies": {
+ "postcss-load-config": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
+ "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==",
+ "requires": {
+ "lilconfig": "^2.0.5",
+ "yaml": "^2.1.1"
+ }
+ },
+ "yaml": {
+ "version": "2.3.1",
+ "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz",
+ "integrity": "sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ=="
+ }
+ }
+ },
+ "thenify": {
+ "version": "3.3.1",
+ "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+ "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+ "requires": {
+ "any-promise": "^1.0.0"
+ }
+ },
+ "thenify-all": {
+ "version": "1.6.0",
+ "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+ "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+ "requires": {
+ "thenify": ">= 3.1.0 < 4"
}
},
"tiny-invariant": {
@@ -4797,6 +5135,11 @@
"integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==",
"dev": true
},
+ "ts-interface-checker": {
+ "version": "0.1.13",
+ "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+ "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
+ },
"tslib": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
@@ -4868,6 +5211,11 @@
"isexe": "^2.0.0"
}
},
+ "wrappy": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+ "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
+ },
"wretch": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/wretch/-/wretch-2.5.1.tgz",
@@ -4880,15 +5228,11 @@
"dev": true,
"requires": {}
},
- "xtend": {
- "version": "4.0.2",
- "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
- "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
- },
"yaml": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
- "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
+ "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+ "dev": true
},
"zod": {
"version": "3.21.4",
diff --git a/package.json b/package.json
index 8f5c19e..280505c 100644
--- a/package.json
+++ b/package.json
@@ -4,17 +4,14 @@
"private": true,
"scripts": {
"dev": "next dev",
-
"analyze:build": "cross-env ANALYZE=true npm run build",
"analyze:dev": "cross-env ANALYZE=true npm run dev",
-
- "script:gen-articles-index": "node ./scripts/generateArticlesIndex.js",
- "script:gen-sitemap": "node ./scripts/generateSitemap.js",
- "script:gen-robots": "node ./scripts/generateRobots.js",
- "script:gen-cname": "node ./scripts/generateCName.js",
-
+ "make:article-list": "node ./scripts/generateArticlesIndex.js",
+ "make:sitemap": "node ./scripts/generateSitemap.js",
+ "make:robots": "node ./scripts/generateRobots.js",
+ "make:cname": "node ./scripts/generateCName.js",
"build": "next build && next export",
- "postbuild": "npm run script:gen-sitemap && npm run script:gen-robots && npm run script:gen-cname"
+ "postbuild": "npm run make:sitemap && npm run make:robots && npm run make:cname"
},
"dependencies": {
"@headlessui/react": "^1.7.13",
@@ -27,6 +24,7 @@
"linkedom": "^0.14.25",
"next": "13.2.4",
"nextjs-google-analytics": "^2.3.3",
+ "prismjs": "^1.29.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-hook-form": "^7.43.5",
@@ -40,6 +38,7 @@
},
"devDependencies": {
"@types/node": "18.15.0",
+ "@types/prismjs": "^1.26.0",
"@types/react": "18.0.28",
"@types/react-dom": "18.0.11",
"autoprefixer": "^10.4.14",
@@ -50,6 +49,6 @@
"next-bundle-analyzer": "^0.6.7",
"next-compose-plugins": "^2.2.1",
"postcss": "^8.4.21",
- "tailwindcss": "^3.2.7"
+ "tailwindcss": "^3.3.2"
}
}
diff --git a/public/images/textures/star.svg b/public/images/textures/star.svg
new file mode 100644
index 0000000..5f0a017
--- /dev/null
+++ b/public/images/textures/star.svg
@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M24 12C24 23.5 24.5 24 36 24C24.5 24 24 24.5 24 36C24 24.5 23.5 24 12 24C23.5 24 24 23.5 24 12Z"
+ fill="#fff" fill-opacity="0.25" />
+</svg>
\ No newline at end of file
diff --git a/public/styles/codeblock.css b/public/styles/codeblock.css
new file mode 100644
index 0000000..d82343f
--- /dev/null
+++ b/public/styles/codeblock.css
@@ -0,0 +1,333 @@
+/*********************************************************
+* Custom
+*/
+
+tr.line td.nr {
+ padding-right: 1rem;
+ user-select: none;
+ pointer-events: none;
+}
+
+tr.line td.nr span {
+ opacity: .5;
+}
+
+tr.line td.cd {
+ width: 100%;
+}
+
+/*********************************************************
+* Base
+*/
+pre[class*="language-"],
+code[class*="language-"] {
+ color: #d4d4d4;
+ font-size: 1em;
+ text-shadow: none;
+ font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;
+ direction: ltr;
+ text-align: left;
+ white-space: pre;
+ word-spacing: normal;
+ word-break: normal;
+ line-height: 1.5;
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+}
+
+pre[class*="language-"]::selection,
+code[class*="language-"]::selection,
+pre[class*="language-"] *::selection,
+code[class*="language-"] *::selection {
+ text-shadow: none;
+ background: #264F78;
+}
+
+@media print {
+
+ pre[class*="language-"],
+ code[class*="language-"] {
+ text-shadow: none;
+ }
+}
+
+pre[class*="language-"] {
+ padding: 1em;
+ margin: .5em 0;
+ overflow: auto;
+ background: #1e1e1e;
+}
+
+:not(pre)>code[class*="language-"] {
+ padding: .1em .3em;
+ border-radius: .3em;
+ color: #db4c69;
+ background: #1e1e1e;
+}
+
+/*********************************************************
+* Tokens
+*/
+code .namespace {
+ opacity: .7;
+}
+
+code .token.doctype .token.doctype-tag {
+ color: #569CD6;
+}
+
+code .token.doctype .token.name {
+ color: #9cdcfe;
+}
+
+code .token.comment,
+code .token.prolog {
+ color: #6a9955;
+}
+
+code .token.punctuation,
+code.language-html .language-css .token.punctuation,
+code.language-html .language-javascript .token.punctuation {
+ color: #d4d4d4;
+}
+
+code .token.property,
+code .token.tag,
+code .token.boolean,
+code .token.number,
+code .token.constant,
+code .token.symbol,
+code .token.inserted,
+code .token.unit {
+ color: #b5cea8;
+}
+
+code .token.selector,
+code .token.attr-name,
+code .token.string,
+code .token.char,
+code .token.builtin,
+code .token.deleted {
+ color: #ce9178;
+}
+
+code.language-css .token.string.url {
+ text-decoration: underline;
+}
+
+code .token.operator,
+code .token.entity {
+ color: #d4d4d4;
+}
+
+code .token.operator.arrow {
+ color: #569CD6;
+}
+
+code .token.atrule {
+ color: #ce9178;
+}
+
+code .token.atrule .token.rule {
+ color: #c586c0;
+}
+
+code .token.atrule .token.url {
+ color: #9cdcfe;
+}
+
+code .token.atrule .token.url .token.function {
+ color: #dcdcaa;
+}
+
+code .token.atrule .token.url .token.punctuation {
+ color: #d4d4d4;
+}
+
+code .token.keyword {
+ color: #569CD6;
+}
+
+code .token.keyword.module,
+code .token.keyword.control-flow {
+ color: #c586c0;
+}
+
+code .token.function,
+code .token.function .token.maybe-class-name {
+ color: #dcdcaa;
+}
+
+code .token.regex {
+ color: #d16969;
+}
+
+code .token.important {
+ color: #569cd6;
+}
+
+code .token.italic {
+ font-style: italic;
+}
+
+code .token.constant {
+ color: #9cdcfe;
+}
+
+code .token.class-name,
+code .token.maybe-class-name {
+ color: #4ec9b0;
+}
+
+code .token.console {
+ color: #9cdcfe;
+}
+
+code .token.parameter {
+ color: #9cdcfe;
+}
+
+code .token.interpolation {
+ color: #9cdcfe;
+}
+
+code .token.punctuation.interpolation-punctuation {
+ color: #569cd6;
+}
+
+code .token.boolean {
+ color: #569cd6;
+}
+
+code .token.property,
+code .token.variable,
+code .token.imports .token.maybe-class-name,
+code .token.exports .token.maybe-class-name {
+ color: #9cdcfe;
+}
+
+code .token.selector {
+ color: #d7ba7d;
+}
+
+code .token.escape {
+ color: #d7ba7d;
+}
+
+code .token.tag {
+ color: #569cd6;
+}
+
+code .token.tag .token.punctuation {
+ color: #808080;
+}
+
+code .token.cdata {
+ color: #808080;
+}
+
+code .token.attr-name {
+ color: #9cdcfe;
+}
+
+code .token.attr-value,
+code .token.attr-value .token.punctuation {
+ color: #ce9178;
+}
+
+code .token.attr-value .token.punctuation.attr-equals {
+ color: #d4d4d4;
+}
+
+code .token.entity {
+ color: #569cd6;
+}
+
+code .token.namespace {
+ color: #4ec9b0;
+}
+
+/*********************************************************
+* Language Specific
+*/
+
+pre[class*="language-javascript"],
+code[class*="language-javascript"],
+pre[class*="language-jsx"],
+code[class*="language-jsx"],
+pre[class*="language-typescript"],
+code[class*="language-typescript"],
+pre[class*="language-tsx"],
+code[class*="language-tsx"] {
+ color: #9cdcfe;
+}
+
+pre[class*="language-css"],
+code[class*="language-css"] {
+ color: #ce9178;
+}
+
+pre[class*="language-html"],
+code[class*="language-html"] {
+ color: #d4d4d4;
+}
+
+code .language-regex .token.anchor {
+ color: #dcdcaa;
+}
+
+code .language-html .token.punctuation {
+ color: #808080;
+}
+
+/*********************************************************
+* Line highlighting
+*/
+pre[class*="language-"]>code[class*="language-"] {
+ position: relative;
+ z-index: 1;
+}
+
+code .line-highlight {
+ --roundness: .15rem;
+ --cap-color: #99009e;
+ --bg-color: #f7c6f344;
+
+ position: relative;
+ z-index: 0;
+}
+
+code .line-highlight>td {
+ background: var(--bg-color);
+}
+
+code .line-highlight.round-top>td.cd {
+ border-top-right-radius: var(--roundness);
+}
+
+code .line-highlight.round-bot>td.cd {
+ border-bottom-right-radius: var(--roundness);
+}
+
+code .line-highlight::after {
+ content: "";
+ display: block;
+ position: absolute;
+ border-left: 5px solid var(--cap-color);
+ border-right: 2px solid var(--bg-color);
+ inset-block: 0;
+ left: -7px
+}
+
+code .line-highlight.round-top::after {
+ border-top-left-radius: var(--roundness);
+}
+
+code .line-highlight.round-bot::after {
+ border-bottom-left-radius: var(--roundness);
+}
\ No newline at end of file
diff --git a/public/styles/codeblock.min.css b/public/styles/codeblock.min.css
new file mode 100644
index 0000000..15bc621
--- /dev/null
+++ b/public/styles/codeblock.min.css
@@ -0,0 +1 @@
+tr.line td.nr{padding-right:1rem;user-select:none;pointer-events:none}tr.line td.nr span{opacity:.5}tr.line td.cd{width:100%}code[class*=language-],pre[class*=language-]{color:#d4d4d4;font-size:1em;text-shadow:none;font-family:Menlo,Monaco,Consolas,"Andale Mono","Ubuntu Mono","Courier New",monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#264f78}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e}:not(pre)>code[class*=language-]{padding:.1em .3em;border-radius:.3em;color:#db4c69;background:#1e1e1e}code .namespace{opacity:.7}code .token.doctype .token.doctype-tag{color:#569cd6}code .token.doctype .token.name{color:#9cdcfe}code .token.comment,code .token.prolog{color:#6a9955}code .token.punctuation,code.language-html .language-css .token.punctuation,code.language-html .language-javascript .token.punctuation{color:#d4d4d4}code .token.boolean,code .token.constant,code .token.inserted,code .token.number,code .token.property,code .token.symbol,code .token.tag,code .token.unit{color:#b5cea8}code .token.attr-name,code .token.builtin,code .token.char,code .token.deleted,code .token.selector,code .token.string{color:#ce9178}code.language-css .token.string.url{text-decoration:underline}code .token.entity,code .token.operator{color:#d4d4d4}code .token.operator.arrow{color:#569cd6}code .token.atrule{color:#ce9178}code .token.atrule .token.rule{color:#c586c0}code .token.atrule .token.url{color:#9cdcfe}code .token.atrule .token.url .token.function{color:#dcdcaa}code .token.atrule .token.url .token.punctuation{color:#d4d4d4}code .token.keyword{color:#569cd6}code .token.keyword.control-flow,code .token.keyword.module{color:#c586c0}code .token.function,code .token.function .token.maybe-class-name{color:#dcdcaa}code .token.regex{color:#d16969}code .token.important{color:#569cd6}code .token.italic{font-style:italic}code .token.constant{color:#9cdcfe}code .token.class-name,code .token.maybe-class-name{color:#4ec9b0}code .token.console{color:#9cdcfe}code .token.parameter{color:#9cdcfe}code .token.interpolation{color:#9cdcfe}code .token.punctuation.interpolation-punctuation{color:#569cd6}code .token.boolean{color:#569cd6}code .token.exports .token.maybe-class-name,code .token.imports .token.maybe-class-name,code .token.property,code .token.variable{color:#9cdcfe}code .token.selector{color:#d7ba7d}code .token.escape{color:#d7ba7d}code .token.tag{color:#569cd6}code .token.tag .token.punctuation{color:grey}code .token.cdata{color:grey}code .token.attr-name{color:#9cdcfe}code .token.attr-value,code .token.attr-value .token.punctuation{color:#ce9178}code .token.attr-value .token.punctuation.attr-equals{color:#d4d4d4}code .token.entity{color:#569cd6}code .token.namespace{color:#4ec9b0}code[class*=language-javascript],code[class*=language-jsx],code[class*=language-tsx],code[class*=language-typescript],pre[class*=language-javascript],pre[class*=language-jsx],pre[class*=language-tsx],pre[class*=language-typescript]{color:#9cdcfe}code[class*=language-css],pre[class*=language-css]{color:#ce9178}code[class*=language-html],pre[class*=language-html]{color:#d4d4d4}code .language-regex .token.anchor{color:#dcdcaa}code .language-html .token.punctuation{color:grey}pre[class*=language-]>code[class*=language-]{position:relative;z-index:1}code .line-highlight{--roundness:.15rem;--cap-color:#99009e;--bg-color:#f7c6f344;position:relative;z-index:0}code .line-highlight>td{background:var(--bg-color)}code .line-highlight.round-top>td.cd{border-top-right-radius:var(--roundness)}code .line-highlight.round-bot>td.cd{border-bottom-right-radius:var(--roundness)}code .line-highlight::after{content:"";display:block;position:absolute;border-left:5px solid var(--cap-color);border-right:2px solid var(--bg-color);inset-block:0;left:-7px}code .line-highlight.round-top::after{border-top-left-radius:var(--roundness)}code .line-highlight.round-bot::after{border-bottom-left-radius:var(--roundness)}
\ No newline at end of file
diff --git a/scripts/generateArticlesIndex.js b/scripts/generateArticlesIndex.js
index b105d13..e704f85 100644
--- a/scripts/generateArticlesIndex.js
+++ b/scripts/generateArticlesIndex.js
@@ -5,6 +5,8 @@ const exclude = ["article.d.ts", "index.ts", "tags.ts"];
const articlesDir = path.resolve(__dirname, "../src/assets/state/articles");
const indexPath = path.join(articlesDir, "/index.ts");
+const articleExtension = ".jsx";
+
const runScript = async () => {
const files = await fs.readdir(articlesDir);
let fileImports = `import IArticle from "./article";\n\n`;
@@ -13,10 +15,10 @@ const runScript = async () => {
files
.filter((file) => {
const isExclude = exclude.includes(file);
- const isTsx = file.endsWith(".tsx");
- return !isExclude && isTsx;
+ const isArticleExt = file.endsWith(articleExtension);
+ return !isExclude && isArticleExt;
})
- .map((articleFile) => articleFile.replace(".tsx", ""))
+ .map((articleFile) => articleFile.replace(articleExtension, ""))
.forEach((articleFilename, i, arr) => {
const importName = `article${i + 1}`;
fileImports += `import ${importName} from "./${articleFilename}";\n`;
diff --git a/src/assets/images/brand/commit-rocket-logo.webp b/src/assets/images/brand/commit-rocket-logo.webp
deleted file mode 100644
index b717163..0000000
Binary files a/src/assets/images/brand/commit-rocket-logo.webp and /dev/null differ
diff --git a/src/assets/images/brand/decor/git/graph-1.tsx b/src/assets/images/brand/decor/git/graph-1.tsx
new file mode 100644
index 0000000..70f245d
--- /dev/null
+++ b/src/assets/images/brand/decor/git/graph-1.tsx
@@ -0,0 +1,19 @@
+
+
+import React, { ForwardedRef, SVGProps, forwardRef } from "react";
+
+const Graph1 = forwardRef(({ color = "#7C3AED", color1 = "#2563EB", ...props }: SVGProps<SVGSVGElement> & { color1?: string; }, ref: ForwardedRef<SVGSVGElement>) => (
+ <svg ref={ref} width="600" height="1900" viewBox="0 0 600 1900" fill="none" xmlns="http://www.w3.org/2000/svg" data-reset {...props}>
+ <g clipPath="url(.clip0_115_309)">
+ <path d="M479.208 500L433.246 454.038L200.973 686.311C185.406 679.35 168.155 675.48 150 675.48C80.9644 675.48 25 731.444 25 800.48C25 858.093 63.9768 906.603 117 921.078L117 1124.97L117 1125H117.033L430.395 1438.36L476.357 1392.4L182 1098.04V921.346C235.533 907.211 275 858.455 275 800.48C275 773.294 266.322 748.136 251.584 727.624L479.208 500Z" fill={color} />
+ <path d="M744.135 -127L790.097 -81.038L482 227.059V379.614C535.533 393.749 575 442.505 575 500.48C575 558.455 535.533 607.211 482 621.346V979.613C535.533 993.748 575 1042.5 575 1100.48C575 1158.46 535.533 1207.21 482 1221.35V1279.61C535.533 1293.75 575 1342.5 575 1400.48C575 1458.46 535.533 1507.21 482 1521.35V1672.94L790.097 1981.04L744.135 2027L417.133 1700H417V1521.08C363.977 1506.6 325 1458.1 325 1400.48C325 1342.86 363.977 1294.36 417 1279.88V1221.08C363.977 1206.6 325 1158.1 325 1100.48C325 1042.86 363.977 994.356 417 979.882V621.078C363.977 606.603 325 558.093 325 500.48C325 442.867 363.977 394.357 417 379.882V200H417.135L744.135 -127Z" fill={color1} />
+ </g>
+ <defs>
+ <clipPath className="clip0_115_309">
+ <rect width="600" height="1900" />
+ </clipPath>
+ </defs>
+ </svg>
+));
+
+export default Graph1;
\ No newline at end of file
diff --git a/src/assets/images/brand/decor/git/graph-2.tsx b/src/assets/images/brand/decor/git/graph-2.tsx
new file mode 100644
index 0000000..3ca2d0d
--- /dev/null
+++ b/src/assets/images/brand/decor/git/graph-2.tsx
@@ -0,0 +1,17 @@
+import React, { SVGProps, forwardRef, ForwardedRef } from "react";
+
+const Graph2 = forwardRef(({ color = "#DC2626", ...props }: SVGProps<SVGSVGElement>, ref: ForwardedRef<SVGSVGElement>) => (
+ <svg ref={ref} width="300" height="1600" viewBox="0 0 300 1600" fill="none" xmlns="http://www.w3.org/2000/svg" data-reset {...props}>
+ <g clipPath="url(.clip0_115_276)">
+ <path d="M444.135 -127L490.097 -81.038L182 227.059V379.614C235.533 393.749 275 442.505 275 500.48C275 558.455 235.533 607.211 182 621.346V679.614C235.533 693.749 275 742.505 275 800.48C275 858.455 235.533 907.211 182 921.346V1372.94L490.097 1681.04L444.135 1727L117.133 1400H117V921.078C63.9768 906.602 25 858.093 25 800.48C25 742.867 63.9768 694.358 117 679.882V621.078C63.9768 606.603 25 558.093 25 500.48C25 442.867 63.9768 394.357 117 379.882V200H117.135L444.135 -127Z" fill={color} />
+ </g>
+ <defs>
+ <clipPath className="clip0_115_276">
+ <rect width="300" height="1600" />
+ </clipPath>
+ </defs>
+ </svg>
+
+));
+
+export default Graph2;
\ No newline at end of file
diff --git a/src/assets/images/brand/decor/git/graph-3.tsx b/src/assets/images/brand/decor/git/graph-3.tsx
new file mode 100644
index 0000000..bee62ec
--- /dev/null
+++ b/src/assets/images/brand/decor/git/graph-3.tsx
@@ -0,0 +1,17 @@
+import React, { SVGProps, forwardRef, ForwardedRef } from "react";
+
+const Graph3 = forwardRef(({ color = "#F59E0B", ...props }: SVGProps<SVGSVGElement>, ref: ForwardedRef<SVGSVGElement>) => (
+ <svg ref={ref} width="300" height="2500" viewBox="0 0 300 2500" fill="none" xmlns="http://www.w3.org/2000/svg" data-reset {...props}>
+ <g clipPath="url(.clip0_115_290)">
+ <path d="M490.097 -81.038L444.135 -127L117.135 200H117V379.882C63.9768 394.357 25 442.867 25 500.48C25 558.093 63.9768 606.603 117 621.078V679.882C63.9768 694.358 25 742.867 25 800.48C25 858.093 63.9768 906.602 117 921.078V1279.88C63.9768 1294.36 25 1342.86 25 1400.48C25 1458.1 63.9768 1506.6 117 1521.08V1579.88C63.9768 1594.36 25 1642.86 25 1700.48C25 1758.1 63.9768 1806.6 117 1821.08V2300H117.133L444.135 2627L490.097 2581.04L182 2272.94V1821.35C235.533 1807.21 275 1758.46 275 1700.48C275 1642.5 235.533 1593.75 182 1579.61V1521.35C235.533 1507.21 275 1458.46 275 1400.48C275 1342.5 235.533 1293.75 182 1279.61V921.346C235.533 907.211 275 858.455 275 800.48C275 742.505 235.533 693.749 182 679.614V621.346C235.533 607.211 275 558.455 275 500.48C275 442.505 235.533 393.749 182 379.614V227.059L490.097 -81.038Z" fill={color} />
+ </g>
+ <defs>
+ <clipPath className="clip0_115_290">
+ <rect width="300" height="2500" />
+ </clipPath>
+ </defs>
+ </svg>
+
+));
+
+export default Graph3;
\ No newline at end of file
diff --git a/src/assets/images/brand/decor/git/graph-4.tsx b/src/assets/images/brand/decor/git/graph-4.tsx
new file mode 100644
index 0000000..bb8cbab
--- /dev/null
+++ b/src/assets/images/brand/decor/git/graph-4.tsx
@@ -0,0 +1,18 @@
+import React, { SVGProps, forwardRef, ForwardedRef } from "react";
+
+const Graph4 = forwardRef(({ color = "#DC2626", color1 = "#A3E635", ...props }: SVGProps<SVGSVGElement> & { color1?: string; }, ref: ForwardedRef<SVGSVGElement>) => (
+ <svg ref={ref} width="300" height="2800" viewBox="0 0 300 2800" fill="none" xmlns="http://www.w3.org/2000/svg" data-reset {...props}>
+ <g clipPath="url(.clip0_115_255)">
+ <path d="M490.097 -81.038L444.135 -127L117.135 200H117V379.882C63.9768 394.357 25 442.867 25 500.48C25 558.093 63.9768 606.603 117 621.078V679.882C63.9768 694.358 25 742.867 25 800.48C25 858.093 63.9768 906.603 117 921.078V1100H117.133L444.135 1427L490.097 1381.04L182 1072.94V921.346C235.533 907.211 275 858.455 275 800.48C275 742.505 235.533 693.749 182 679.614V621.346C235.533 607.211 275 558.455 275 500.48C275 442.505 235.533 393.749 182 379.614V227.059L490.097 -81.038Z" fill={color} />
+ <path d="M490.097 1418.96L444.135 1373L117.133 1700H117V1879.88C63.9768 1894.36 25 1942.86 25 2000.48C25 2058.1 63.9768 2106.6 117 2121.08V2179.88C63.9768 2194.36 25 2242.86 25 2300.48C25 2358.1 63.9768 2406.6 117 2421.08V2600H117.133L444.135 2927L490.097 2881.04L182 2572.94V2421.35C235.533 2407.21 275 2358.46 275 2300.48C275 2242.5 235.533 2193.75 182 2179.61V2121.35C235.533 2107.21 275 2058.46 275 2000.48C275 1942.5 235.533 1893.75 182 1879.61V1727.06L490.097 1418.96Z" fill={color1} />
+ </g>
+ <defs>
+ <clipPath className="clip0_115_255">
+ <rect width="300" height="2800" />
+ </clipPath>
+ </defs>
+ </svg>
+
+));
+
+export default Graph4;
\ No newline at end of file
diff --git a/src/assets/images/brand/logo-200x200.webp b/src/assets/images/brand/logo-200x200.webp
deleted file mode 100644
index 10f7627..0000000
Binary files a/src/assets/images/brand/logo-200x200.webp and /dev/null differ
diff --git a/src/assets/images/brand/logo.svg b/src/assets/images/brand/logo.svg
new file mode 100644
index 0000000..5921778
--- /dev/null
+++ b/src/assets/images/brand/logo.svg
@@ -0,0 +1,12 @@
+<svg width="1080" height="1920" viewBox="0 0 1080 1920" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M282.864 1753.57C229.593 1599.04 198.52 1447.76 180.893 1314.9C126.644 1391.93 91.5245 1414.61 101.414 1771.21C164.984 1793.26 205.072 1797.04 288.29 1781.13C286.716 1772.28 284.922 1763.07 282.864 1753.57Z" fill="#EA580C"/>
+<path d="M797.554 1753.57C850.704 1599.04 881.706 1447.76 899.292 1314.9C953.417 1391.93 988.457 1414.61 978.59 1771.21C915.165 1793.26 875.168 1797.04 792.141 1781.13C793.711 1772.28 795.501 1763.07 797.554 1753.57Z" fill="#EA580C"/>
+<path d="M282.864 1753.57H540.503H797.554C850.704 1599.04 881.706 1447.76 899.292 1314.9C915.962 1188.97 920.578 1079.59 920.578 999.679C920.578 776.364 881.645 595.681 813.987 435.362C716.474 500.48 655.025 518.677 540.503 522.434C425.719 518.677 364.13 500.48 266.394 435.362C198.58 595.681 159.559 776.364 159.558 999.679C159.558 1079.59 164.185 1188.97 180.893 1314.9C198.52 1447.76 229.593 1599.04 282.864 1753.57Z" fill="#EEEEEE"/>
+<path d="M540.503 1753.57H282.864C284.922 1763.07 286.716 1772.28 288.29 1781.13C298.22 1836.92 299.41 1878.13 302.914 1885.83C305.921 1892.45 340.006 1896.85 540.503 1920C740.543 1896.85 774.549 1892.45 777.55 1885.83C781.046 1878.13 782.233 1836.92 792.141 1781.13C793.711 1772.28 795.501 1763.07 797.554 1753.57H540.503Z" fill="#3F3F3F"/>
+<path d="M540.503 0C427.748 139.545 333.129 277.592 266.394 435.362C364.13 500.48 425.719 518.677 540.503 522.434C655.025 518.677 716.474 500.48 813.987 435.362C747.404 277.592 653.001 139.545 540.503 0Z" fill="#EA580C"/>
+<circle cx="540" cy="960" r="182" fill="#0075FF" stroke="#3F3F3F" stroke-width="20"/>
+<path d="M316.857 1754.47L329.613 1857.94C330.114 1861.99 333.034 1865.34 336.988 1866.38L540.253 1920C438.566 1906.52 321.096 1896.81 302.769 1886.29C298.818 1866.22 295.222 1810.82 282.643 1753.46C234.676 1602.64 205.299 1481.46 187.228 1365.03C184.718 1348.86 182.593 1333.05 180.5 1317C166.995 1213.42 161.588 1110.61 159.373 991.195C169 597 253.5 359.5 540.253 0L556.5 20.5C235 410 200.5 743.5 188 991.195C200.5 1278 226.055 1436.66 316.857 1754.47Z" fill="white" fill-opacity="0.4"/>
+<path d="M101.008 1771.07L129 1780C141.652 1591.9 116.536 1431.39 187.228 1365.03C184.718 1348.86 182.593 1333.05 180.5 1317C106.5 1398 95.0001 1495 101.008 1771.07Z" fill="white" fill-opacity="0.4"/>
+<path d="M507.153 854.677C513.352 852.693 520.016 852.384 526.391 853.783C532.767 855.182 538.6 858.234 543.23 862.594C547.887 866.986 551.137 872.523 552.61 878.574C554.083 884.624 553.718 890.943 551.559 896.807L602.391 944.688C608.617 942.651 615.326 942.307 621.75 943.698C628.173 945.088 634.051 948.156 638.708 952.549C641.971 955.623 644.559 959.272 646.325 963.288C648.091 967.304 649 971.609 649 975.956C649 980.303 648.091 984.607 646.325 988.624C644.559 992.64 641.971 996.289 638.708 999.363C632.112 1005.57 623.17 1009.06 613.846 1009.06C604.522 1009.06 595.58 1005.57 588.983 999.363C584.083 994.738 580.745 988.851 579.388 982.442C578.031 976.034 578.717 969.391 581.359 963.349L533.954 918.698V1036.22C538.958 1038.55 543.3 1041.97 546.622 1046.19C549.944 1050.42 552.15 1055.33 553.058 1060.52C553.965 1065.71 553.547 1071.02 551.839 1076.03C550.131 1081.03 547.182 1085.59 543.235 1089.3C539.973 1092.38 536.1 1094.82 531.838 1096.48C527.575 1098.14 523.007 1099 518.393 1099C513.779 1099 509.21 1098.14 504.948 1096.48C500.685 1094.82 496.812 1092.38 493.55 1089.3C490.287 1086.23 487.698 1082.58 485.932 1078.56C484.165 1074.55 483.256 1070.24 483.256 1065.89C483.256 1061.55 484.165 1057.24 485.932 1053.22C487.698 1049.21 490.287 1045.56 493.55 1042.49C496.838 1039.38 500.745 1036.92 505.047 1035.25V916.643C500.763 914.981 496.869 912.537 493.59 909.452C490.312 906.367 487.712 902.703 485.941 898.669C484.169 894.634 483.261 890.31 483.269 885.945C483.277 881.579 484.2 877.258 485.985 873.229L434.167 824.396C441.616 818.649 446.565 815.131 458.265 808.615L507.153 854.677Z" fill="white" fill-opacity="0.75"/>
+<path d="M797.5 1754C851 1598.5 883.5 1440.5 899.3 1314.9C893.283 1495.46 884.059 1598.54 846 1755.5L844 1789C824 1786.71 814.5 1785.5 792 1781C793.923 1770.23 795.006 1765.19 797.5 1754Z" fill="black" fill-opacity="0.1"/>
+</svg>
diff --git a/src/assets/images/brand/rocket-with-graph.svg b/src/assets/images/brand/rocket-with-graph.svg
new file mode 100644
index 0000000..1feafac
--- /dev/null
+++ b/src/assets/images/brand/rocket-with-graph.svg
@@ -0,0 +1,29 @@
+<svg width="1720" height="4241" viewBox="0 0 1720 4241" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_9_231)">
+<mask id="mask0_9_231" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="1770" width="1720" height="2471">
+<path d="M1720 1770H0V4241H1720V1770Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_9_231)">
+<path d="M1182.56 3361.34L1224.34 3311.55L1580.5 3610.82V3623.25V3657.27C1633.78 3671.57 1673 3720.21 1673 3778C1673 3835.79 1633.78 3884.43 1580.5 3898.73V3932.12V3932.13V4241H1515.5V3932.13V3932.12V3898.73C1462.22 3884.43 1423 3835.79 1423 3778C1423 3720.21 1462.22 3671.57 1515.5 3657.27V3640.71L1182.56 3361.34Z" fill="#7C3AED"/>
+<path d="M139.5 3610.82V3623.25V3667.47V3932.12V3932.12V3966.27C86.2218 3980.57 47 4029.2 47 4087C47 4144.8 86.2218 4193.43 139.5 4207.73V4241H204.5V4207.73C257.778 4193.43 297 4144.8 297 4087C297 4029.2 257.778 3980.57 204.5 3966.27V3932.12V3932.12V3667.47V3640.71L537.437 3361.34L495.656 3311.55L139.5 3610.82Z" fill="#F45A07"/>
+<path d="M494.563 2169.97L536.344 2120.18L893.004 2419.45L892.5 2420.05V2476V2476.1V2829V3182V3238.27C945.778 3252.57 985 3301.21 985 3359C985 3416.79 945.778 3465.43 892.5 3479.73V3535V3888V4241H827.5V3888V3535V3479.73C774.222 3465.43 735 3416.79 735 3359C735 3301.21 774.222 3252.57 827.5 3238.27V3182V2829V2476.1V2476V2449.34L494.563 2169.97Z" fill="#DC2626"/>
+<path d="M483.5 1770H548.5V2123V2476V2829V2885.27C601.778 2899.57 641 2948.21 641 3006C641 3063.79 601.778 3112.43 548.5 3126.73V3182V3535V3888V4241H483.5V3888V3535V3182V3126.73C430.222 3112.43 391 3063.79 391 3006C391 2948.21 430.222 2899.57 483.5 2885.27V2829V2476V2123V1770Z" fill="#FBBF24"/>
+<path d="M1171.5 1770H1236.5V2123V2178.27C1289.78 2192.57 1329 2241.21 1329 2299C1329 2356.79 1289.78 2405.43 1236.5 2419.73V2476V2532.27C1289.78 2546.57 1329 2595.21 1329 2653C1329 2710.79 1289.78 2759.43 1236.5 2773.73V2829V3182V3535V3888V4241H1171.5V3888V3535V3182V2829V2773.73C1118.22 2759.43 1079 2710.79 1079 2653C1079 2595.21 1118.22 2546.57 1171.5 2532.27V2476V2419.73C1118.22 2405.43 1079 2356.79 1079 2299C1079 2241.21 1118.22 2192.57 1171.5 2178.27V2123V1770Z" fill="#2563EB"/>
+</g>
+<path d="M602.864 1753.57C549.593 1599.04 518.52 1447.76 500.893 1314.9C446.644 1391.93 411.525 1414.61 421.414 1771.21C484.984 1793.26 525.073 1797.04 608.29 1781.13C606.716 1772.28 604.922 1763.07 602.864 1753.57Z" fill="#EA580C"/>
+<path d="M1117.55 1753.57C1170.7 1599.04 1201.71 1447.76 1219.29 1314.9C1273.42 1391.93 1308.46 1414.61 1298.59 1771.21C1235.17 1793.26 1195.17 1797.04 1112.14 1781.13C1113.71 1772.28 1115.5 1763.07 1117.55 1753.57Z" fill="#EA580C"/>
+<path d="M602.864 1753.57H860.503H1117.55C1170.7 1599.04 1201.71 1447.76 1219.29 1314.9C1235.96 1188.97 1240.58 1079.59 1240.58 999.679C1240.58 776.364 1201.65 595.681 1133.99 435.362C1036.47 500.48 975.025 518.677 860.503 522.434C745.719 518.677 684.13 500.48 586.394 435.362C518.58 595.681 479.559 776.364 479.559 999.679C479.558 1079.59 484.185 1188.97 500.893 1314.9C518.52 1447.76 549.593 1599.04 602.864 1753.57Z" fill="#EEEEEE"/>
+<path d="M860.503 1753.57H602.864C604.922 1763.07 606.716 1772.28 608.29 1781.13C618.22 1836.92 619.41 1878.13 622.914 1885.83C625.921 1892.45 660.006 1896.85 860.503 1920C1060.54 1896.85 1094.55 1892.45 1097.55 1885.83C1101.05 1878.13 1102.23 1836.92 1112.14 1781.13C1113.71 1772.28 1115.5 1763.07 1117.55 1753.57H860.503Z" fill="#3F3F3F"/>
+<path d="M860.503 0C747.748 139.545 653.129 277.592 586.394 435.362C684.13 500.48 745.719 518.677 860.503 522.434C975.025 518.677 1036.47 500.48 1133.99 435.362C1067.4 277.592 973.001 139.545 860.503 0Z" fill="#EA580C"/>
+<path d="M860 1143C960.516 1143 1042 1061.52 1042 961C1042 860.484 960.516 779 860 779C759.484 779 678 860.484 678 961C678 1061.52 759.484 1143 860 1143Z" fill="#0075FF" stroke="#3F3F3F" stroke-width="20"/>
+<path d="M636.857 1755.47L649.613 1858.94C650.114 1862.99 653.034 1866.34 656.987 1867.38L860.253 1921C758.566 1907.52 641.096 1897.81 622.769 1887.29C618.818 1867.22 615.221 1811.82 602.643 1754.46C554.676 1603.64 525.299 1482.46 507.228 1366.03C504.718 1349.86 502.593 1334.05 500.5 1318C486.995 1214.42 481.588 1111.61 479.372 992.195C489 598 573.5 360.5 860.253 1L876.5 21.5C555 411 520.5 744.5 508 992.195C520.5 1279 546.055 1437.66 636.857 1755.47Z" fill="white" fill-opacity="0.4"/>
+<path d="M421.008 1772.07L449 1781C461.652 1592.9 436.536 1432.39 507.228 1366.03C504.718 1349.86 502.593 1334.05 500.5 1318C426.5 1399 415 1496 421.008 1772.07Z" fill="white" fill-opacity="0.4"/>
+<path d="M827.153 855.677C833.352 853.693 840.016 853.384 846.391 854.783C852.767 856.182 858.6 859.234 863.231 863.594C867.887 867.986 871.137 873.523 872.61 879.574C874.083 885.624 873.719 891.943 871.559 897.807L922.392 945.688C928.617 943.651 935.327 943.307 941.75 944.698C948.173 946.088 954.051 949.156 958.709 953.549C961.971 956.623 964.56 960.272 966.325 964.288C968.091 968.304 969 972.609 969 976.956C969 981.303 968.091 985.607 966.325 989.624C964.56 993.64 961.971 997.289 958.709 1000.36C952.112 1006.57 943.17 1010.06 933.846 1010.06C924.522 1010.06 915.58 1006.57 908.984 1000.36C904.083 995.738 900.745 989.851 899.388 983.442C898.031 977.034 898.717 970.391 901.359 964.349L853.954 919.698V1037.22C858.958 1039.55 863.3 1042.97 866.623 1047.19C869.945 1051.42 872.151 1056.33 873.058 1061.52C873.965 1066.71 873.547 1072.02 871.839 1077.03C870.131 1082.03 867.182 1086.59 863.236 1090.3C859.973 1093.38 856.101 1095.82 851.838 1097.48C847.575 1099.14 843.007 1100 838.393 1100C833.779 1100 829.211 1099.14 824.948 1097.48C820.686 1095.82 816.813 1093.38 813.55 1090.3C810.287 1087.23 807.698 1083.58 805.932 1079.56C804.166 1075.55 803.256 1071.24 803.256 1066.89C803.256 1062.55 804.166 1058.24 805.932 1054.22C807.698 1050.21 810.287 1046.56 813.55 1043.49C816.838 1040.38 820.745 1037.92 825.047 1036.25V917.643C820.763 915.981 816.87 913.537 813.591 910.452C810.312 907.367 807.712 903.703 805.941 899.669C804.17 895.634 803.262 891.31 803.269 886.945C803.277 882.579 804.2 878.258 805.986 874.229L754.167 825.396C761.616 819.649 766.565 816.131 778.265 809.615L827.153 855.677Z" fill="white" fill-opacity="0.75"/>
+<path d="M1117.5 1754C1171 1598.5 1203.5 1440.5 1219.3 1314.9C1213.28 1495.46 1204.06 1598.54 1166 1755.5L1164 1789C1144 1786.71 1134.5 1785.5 1112 1781C1113.92 1770.23 1115.01 1765.19 1117.5 1754Z" fill="black" fill-opacity="0.1"/>
+</g>
+<defs>
+<clipPath id="clip0_9_231">
+<rect width="1720" height="4241" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/images/content/blog/2/sourcetree-delete-error.webp b/src/assets/images/content/blog/2/sourcetree-delete-error.webp
new file mode 100644
index 0000000..2d1d2d6
Binary files /dev/null and b/src/assets/images/content/blog/2/sourcetree-delete-error.webp differ
diff --git a/src/assets/images/content/blog/2/thumbnail.pdn b/src/assets/images/content/blog/2/thumbnail.pdn
index 21e137d..fba0771 100644
Binary files a/src/assets/images/content/blog/2/thumbnail.pdn and b/src/assets/images/content/blog/2/thumbnail.pdn differ
diff --git a/src/assets/images/content/blog/2/thumbnail.webp b/src/assets/images/content/blog/2/thumbnail.webp
index ab6ff0a..eb1549c 100644
Binary files a/src/assets/images/content/blog/2/thumbnail.webp and b/src/assets/images/content/blog/2/thumbnail.webp differ
diff --git a/src/assets/images/content/blog/3/my-theme.webp b/src/assets/images/content/blog/3/my-theme.webp
new file mode 100644
index 0000000..fe54410
Binary files /dev/null and b/src/assets/images/content/blog/3/my-theme.webp differ
diff --git a/src/assets/images/content/blog/3/sourcetree-multi-account.webp b/src/assets/images/content/blog/3/sourcetree-multi-account.webp
new file mode 100644
index 0000000..d32228c
Binary files /dev/null and b/src/assets/images/content/blog/3/sourcetree-multi-account.webp differ
diff --git a/src/assets/images/content/blog/3/spaces-in-arc.gif b/src/assets/images/content/blog/3/spaces-in-arc.gif
new file mode 100644
index 0000000..629e5ea
Binary files /dev/null and b/src/assets/images/content/blog/3/spaces-in-arc.gif differ
diff --git a/src/assets/images/content/blog/3/thumbnail.pdn b/src/assets/images/content/blog/3/thumbnail.pdn
new file mode 100644
index 0000000..6f5ddc3
Binary files /dev/null and b/src/assets/images/content/blog/3/thumbnail.pdn differ
diff --git a/src/assets/images/content/blog/3/thumbnail.webp b/src/assets/images/content/blog/3/thumbnail.webp
new file mode 100644
index 0000000..f746e35
Binary files /dev/null and b/src/assets/images/content/blog/3/thumbnail.webp differ
diff --git a/src/assets/images/content/blog/4/conventionalcommits.webp b/src/assets/images/content/blog/4/conventionalcommits.webp
new file mode 100644
index 0000000..e20f755
Binary files /dev/null and b/src/assets/images/content/blog/4/conventionalcommits.webp differ
diff --git a/src/assets/images/content/blog/4/gitmoji.png b/src/assets/images/content/blog/4/gitmoji.png
new file mode 100644
index 0000000..1228321
Binary files /dev/null and b/src/assets/images/content/blog/4/gitmoji.png differ
diff --git a/src/assets/images/content/blog/4/gitmoji.webp b/src/assets/images/content/blog/4/gitmoji.webp
new file mode 100644
index 0000000..2fd45d8
Binary files /dev/null and b/src/assets/images/content/blog/4/gitmoji.webp differ
diff --git a/src/assets/images/content/blog/4/thumbnail.pdn b/src/assets/images/content/blog/4/thumbnail.pdn
new file mode 100644
index 0000000..3e9da80
Binary files /dev/null and b/src/assets/images/content/blog/4/thumbnail.pdn differ
diff --git a/src/assets/images/content/blog/4/thumbnail.webp b/src/assets/images/content/blog/4/thumbnail.webp
new file mode 100644
index 0000000..8fdef81
Binary files /dev/null and b/src/assets/images/content/blog/4/thumbnail.webp differ
diff --git a/src/assets/images/content/missions/cross-platform.webp b/src/assets/images/content/missions/cross-platform.webp
index 5bb570d..d235330 100644
Binary files a/src/assets/images/content/missions/cross-platform.webp and b/src/assets/images/content/missions/cross-platform.webp differ
diff --git a/src/assets/images/content/missions/fast-and-feature-packed.webp b/src/assets/images/content/missions/fast-and-feature-packed.webp
index a59bda9..a1241ec 100644
Binary files a/src/assets/images/content/missions/fast-and-feature-packed.webp and b/src/assets/images/content/missions/fast-and-feature-packed.webp differ
diff --git a/src/assets/images/content/missions/modern.webp b/src/assets/images/content/missions/modern.webp
index 98bd8e8..426013d 100644
Binary files a/src/assets/images/content/missions/modern.webp and b/src/assets/images/content/missions/modern.webp differ
diff --git a/src/assets/state/articles/1.jsx b/src/assets/state/articles/1.jsx
index 128b4c8..37f0923 100644
--- a/src/assets/state/articles/1.jsx
+++ b/src/assets/state/articles/1.jsx
@@ -107,7 +107,7 @@ export default {
<A.Img
className="mx-auto"
- alt={"SourceTree and Git Extensions"}
+ alt="SourceTree and Git Extensions"
src={oldLookingClients.src}
width={oldLookingClients.width}
height={oldLookingClients.height}
@@ -186,7 +186,7 @@ export default {
</A.H4>
<p>
- Another feature we feel is severly lacking in most clients is the customizability. Not only in theme but also in layout. Not everyone likes the same layout, which is only reasonable. Most Git GUI Clients only offer a limited amount of customizability, which usually is a few preset themes. <A.Link href="https://www.gitkraken.com/" nofollow external>GitKraken</A.Link> and <A.Link href="https://gitnuro.jetpackduba.com/" nofollow external>Gitnuro</A.Link>, do actually offer full theme customizability, but no customizability in layout.
+ Another feature we feel is severely lacking in most clients is the customizability. Not only in theme but also in layout. Not everyone likes the same layout, which is only reasonable. Most Git GUI Clients only offer a limited amount of customizability, which usually is a few preset themes. <A.Link href="https://www.gitkraken.com/" nofollow external>GitKraken</A.Link> and <A.Link href="https://gitnuro.jetpackduba.com/" nofollow external>Gitnuro</A.Link>, do actually offer full theme customizability, but no customizability in layout.
</p>
<p>
We believe that customizable layouts can increase productivity. In a basic sense creating your own layout should help, because you know where everything is and you can remove features you don't need to have at that certain moment in time, decreasing your mental overhead.
@@ -200,7 +200,7 @@ export default {
A <strong className="font-semibold">lot</strong> of Git Clients make use of <A.Link href="https://www.electronjs.org/" nofollow external>Electron</A.Link>, which is a big reason why these clients are slow. Electron itself is used in a lot of other products, like Gitkraken, Github Desktop, VSCode, Dicord and more. Electron allows developers to use web technologies on desktop, however this comes at the cost of having high memory usage and slow performance. On top of that, clients like GitKraken use Nodegit which exposes a wrapped Git API to JavaScript, which takes away additional performance. Github Desktop takes a different approach, they use the CLI and parse the output text.
</p>
<p>
- Both of these approaches are not great for performance, which is why we suggest an alternative. This alternative comes in the form of <A.Link href="https://tauri.app/" external>Tauri</A.Link>. Just like Electron, Tauri allows developers to user JavaScript, HTML and CSS for their presentation layer. Unlike Electron however it allows for business logic to be written in Rust. Rust its speed is incredably fast, which is why it is ideal for writing the (performance critical) logic. The presentation layer can invoke a function in Rust to get the nessesairy data. Essentially what we can do is write an easy to develop presentation layer, while having an incredably fast logic layer without sacrificing any performance.
+ Both of these approaches are not great for performance, which is why we suggest an alternative. This alternative comes in the form of <A.Link href="https://tauri.app/" external>Tauri</A.Link>. Just like Electron, Tauri allows developers to user JavaScript, HTML and CSS for their presentation layer. Unlike Electron however it allows for business logic to be written in Rust. Rust its speed is incredibly fast, which is why it is ideal for writing the (performance critical) logic. The presentation layer can invoke a function in Rust to get the nessesairy data. Essentially what we can do is write an easy to develop presentation layer, while having an incredibly fast logic layer without sacrificing any performance.
</p>
<p>
Our alternative to using <A.Link href="https://www.nodegit.org/" nofollow external>Nodegit</A.Link> or invoking the CLI and parsing the results is using <A.Link href="https://libgit2.org/" external>Libgit2</A.Link>. Nodegit is a JavaScript binding of Libgit2, however we will be using a <A.Link href="https://github.com/rust-lang/git2-rs" external>Rust binding of Libgit2</A.Link>, which will be a lot faster. This is because invoking C code from Rust is faster compared to invoking it from JavaScript, in addition to that, Rust is already faster then JavaScript; so this will result in a massive speed increase.
@@ -212,11 +212,11 @@ export default {
</p>
<A.Img
className="mx-auto max-h-[27rem] w-fit"
+ alt="Electron vs Tauri memory and build size"
src={tauriVsElectron.src}
width={tauriVsElectron.width}
height={tauriVsElectron.height}
/>
-
<p role="note" aria-label="Source" className="mx-auto text-sm">
Source: <A.Link href="https://github.com/Elanis/web-to-desktop-framework-comparison" external>Web to Desktop framework comparison by Elanis</A.Link>
</p>
@@ -234,7 +234,7 @@ export default {
</A.H4>
<p>
- We love the way that Arc looks. It is very different compared to other browsers, not just in looks but also in functionality. Despite it being based on Chromium, it has some really cool new ideas, like notes, easels and spaces. If you haven't yet, We recommend checking out <A.Link href="https://www.youtube.com/@TheBrowserCompany" nofollow external>The Browser Company's youtube channel</A.Link> to see what Arc is about. For us personally we would like to do the same Arc is doing, changing Git clients in meaningfull ways. What that way is however, is to be determined.
+ We love the way that Arc looks. It is very different compared to other browsers, not just in looks but also in functionality. Despite it being based on Chromium, it has some really cool new ideas, like notes, easels and spaces. If you haven't yet, We recommend checking out <A.Link href="https://www.youtube.com/@TheBrowserCompany" nofollow external>The Browser Company's youtube channel</A.Link> to see what Arc is about. For us personally we would like to do the same Arc is doing, changing Git clients in meaningful ways. What that way is however, is to be determined.
</p>
<A.H4>
@@ -277,7 +277,7 @@ export default {
<A.Container className="gap-4">
<A.H4 className="text-xl md:text-xl">Repository Management</A.H4>
<p>
- A feature we haven't seen any Git GUI client do so far is repository management. This means being able to change the settings of your repostiory from the comfort of your client. Having that would save a lot of time going back and forth to your repository in the browser.
+ A feature we haven't seen any Git GUI client do so far is repository management. This means being able to change the settings of your repository from the comfort of your client. Having that would save a lot of time going back and forth to your repository in the browser.
</p>
</A.Container>
</A.Li>
diff --git a/src/assets/state/articles/2.jsx b/src/assets/state/articles/2.jsx
new file mode 100644
index 0000000..78b545a
--- /dev/null
+++ b/src/assets/state/articles/2.jsx
@@ -0,0 +1,141 @@
+import { people } from "../team";
+import tags from "./tags";
+
+import thumbnail from "@blogImages/2/thumbnail.webp";
+import deleteError from "@blogImages/2/sourcetree-delete-error.webp";
+
+import A from "@/components/pages/blog/post/ArticleComponents";
+
+/** @satisfies {import("./article").default} */
+export default {
+ title: "How to Delete Branches using Git CLI",
+
+ thumbnail,
+ thumbnailAlt: "Deleting Branches using the Git CLI",
+
+ vertical: "technology",
+
+ slug: "deleting-branches-in-git",
+ tags: [
+ tags.git,
+ tags.tutorial,
+ {
+ name: "CLI",
+ },
+ {
+ name: "Delete Branches",
+ hidden: true
+ },
+ {
+ name: "Git Branching",
+ hidden: true
+ }
+ ],
+
+ author: people.rik,
+
+ created: new Date("2023/04/14"),
+
+ teaser: "Git branch deletion can be slightly confusing, lets explore which commands you can use in different scenarios!",
+
+ content: <>
+ <A.Container className="text-xl">
+ <p>
+ As we develop our new Git client Commit Rocket, we are diving into all of Git's features, including branch deletion. In this article, we'll cover the commands you should use when deleting branches in Git, and some edge cases you should keep in mind. If you're not using a Git client, it can sometimes be challenging to remember what command to run, so we've provided some easy-to-use examples that you can copy, adjust and paste.
+ </p>
+
+ <p>
+ Let's get started!
+ </p>
+ </A.Container>
+
+ <A.TOC maxLevel={2} />
+
+ <A.H2>
+ Deleting a local branch
+ </A.H2>
+
+ <p>
+ To delete a local branch in Git CLI, use the command <code>git branch -d</code>, followed by the name of the branch you want to delete. For example:
+ </p>
+
+ <A.Code lang="bash">{`
+ git branch -d <branch-name>
+ `}</A.Code>
+
+ <p>
+ If you want to delete an unmerged branch, you can use the <code>-D</code> flag instead of <code>-d</code>. For example:
+ </p>
+
+ <A.Code lang="bash">{`
+ git branch -D <branch-name>
+ `}</A.Code>
+
+ <A.H2>
+ Deleting a remote branch
+ </A.H2>
+
+ <p>
+ To delete a remote branch in Git CLI, use the command <code>git push</code> with the <code>-d</code> flag, followed by the name of the remote branch you want to delete. For example:
+ </p>
+
+ <A.Code lang="bash">{`
+ git push <remote-name> -d <branch-name>
+ `}</A.Code>
+
+ <A.H2>
+ Deleting both the local and remote branches
+ </A.H2>
+
+ <p>
+ To delete both the local and remote branch at the same time using Git CLI, use the command <code>git push</code> with the <code>-d</code> flag, followed by the name of the remote branch, and then use the command <code>git branch -d</code>, followed by the name of the local branch. For example:
+ </p>
+
+ <A.Code lang="bash">{`
+ git push <remote-name> -d <branch-name> && git branch -d <branch-name>
+ `}</A.Code>
+
+ <A.H2>
+ Commit Rocket
+ </A.H2>
+
+ <p>
+ Deleting branches is one of the standard features a Git client should have. One of the things we have noticed in already existing clients like SourceTree, is that they don't give errors as to why branch deletion fails. For example, if a branch is not merged yet it will throw a generic Git error, instead of telling you that the branch was not merged yet.
+ </p>
+
+ <A.Container className="gap-2">
+ <A.Img
+ className="max-w-3xl mx-auto"
+ src={deleteError.src}
+ width={deleteError.width}
+ height={deleteError.height}
+ alt="Very verbose SourceTree unmerged branch deletion error"
+ aria-labelledby="delete-error-note"
+ />
+ <p
+ id="delete-error-note"
+ className="mx-auto text-center text-sm"
+ role="note"
+ >
+ Figure 1: A SourceTree error when deleting an unmerged branch without <code>Force delete</code> enabled
+ </p>
+ </A.Container>
+
+ <p>
+ We'll be taking notes from that and make sure that our error handling is descriptive and actually tells you what to do if something goes wrong.
+ </p>
+
+ <A.H2>
+ Wrapping up
+ </A.H2>
+ <p>
+ Now that you know how to delete branches in Git CLI, it's time to start cleaning up your repositories! Remember to use caution when deleting branches, especially when deleting remote branches, as they can affect other collaborators working on the same project.
+ </p>
+ <p>
+ We hope you found this article helpful! If you have any questions or feedback, feel free to reach out to us via <A.Link href="/contribute#feedback">our feedback form</A.Link>. At Commit Rocket, we are <i>committed</i> to making Git simpler and faster for developers everywhere. If you're interested in learning more about our in development Git client, be sure to have a look around our website!
+ </p>
+ <p>
+ And last but not least, if you found this article useful, please share it with your fellow developers so they can benefit from it as well. Thank you for reading!
+ </p>
+ </>
+};
\ No newline at end of file
diff --git a/src/assets/state/articles/3.jsx b/src/assets/state/articles/3.jsx
new file mode 100644
index 0000000..3d31ab6
--- /dev/null
+++ b/src/assets/state/articles/3.jsx
@@ -0,0 +1,179 @@
+import { people } from "../team";
+import tags from "./tags";
+
+import thumbnail from "@blogImages/3/thumbnail.webp";
+import myTheme from "@blogImages/3/my-theme.webp";
+import sourcetreeMultiAccount from "@blogImages/3/sourcetree-multi-account.webp";
+import spacesInArc from "@blogImages/3/spaces-in-arc.gif";
+
+import A from "@/components/pages/blog/post/ArticleComponents";
+
+/** @type {import("./article").default} */
+export default {
+ title: "Features You Can Expect in Commit Rocket",
+
+ thumbnail,
+ thumbnailAlt: "Thumbnail alt",
+
+ vertical: "software",
+
+ slug: "commit-rocket-features",
+
+ tags: [
+ tags.commitRocket,
+ tags.news,
+ tags.plans,
+ {
+ name: "Commit Rocket Features",
+ hidden: true
+ },
+ {
+ name: "Planning",
+ hidden: true
+ }
+ ],
+
+ author: people.rik,
+
+ created: new Date("2023/05/05"),
+
+ teaser: "Commit Rocket is still very young and we are thinking of features to put into it. We have lots of ideas, what are your thoughts?",
+
+ content: <>
+ <A.Container className="text-xl">
+ <p>
+ Features are one of the most important things about an app, and I have been thinking a lot about which I will be implementing in Commit Rocket. With the help of others, I'm coming up with new and unique features for Commit Rocket. Besides the obvious features like pulling and pushing, I would really love Commit Rocket to have a unique set of features to help improve people's workflows.
+ </p>
+ <p>
+ I've personally spent quite a bit of time coming up with features and working out kinks. I would be proud to present them all to you in this post. Make sure to answer some of the questions in the <A.Link href="#survey">survey</A.Link> at the end of the article to help me improve Commit Rocket. All of the questions are optional, so make sure to only fill in the ones that you are comfortable with.
+ </p>
+ <p>
+ Let's get started!
+ </p>
+ </A.Container>
+
+ <A.TOC maxLevel={2} />
+
+ <A.H2>Atomic stashing</A.H2>
+ <p>
+ Stashing is a very useful tool in Git, they allow you to store your progress without having to commit them. This keeps you from accidentally breaking things and can help you stay organized. In applications such as Sourcetree or Github Desktop you can only commit all of your current changes.
+ </p>
+ <p>
+ There are actually ways to only stash selected files and even lines. I would like to break this limitation and allow users to organize their stashed by atomically stashing changes whenever it suits them.
+ </p>
+
+ <A.H2>Multi-account support</A.H2>
+ <p>
+ Just like atomic stashing, multi-account support is another feature that "just makes sense". If you are like me, you might have multiple different Git account across multiple different platforms like Github, Gitlab and even Bitbucket. You might even have had to make a separate account for your education or your work.
+ </p>
+ <A.Container className="gap-2">
+ <p role="note" aria-label="Note" className="mx-auto font-semibold">
+ Sourcetree's account management
+ </p>
+ <A.Img
+ className="mx-auto max-h-[27rem] w-fit border border-neutral"
+ alt="Electron vs Tauri memory and build size"
+ src={sourcetreeMultiAccount.src}
+ width={sourcetreeMultiAccount.width}
+ height={sourcetreeMultiAccount.height}
+ />
+ </A.Container>
+ <p>
+ My vision for multiple accounts within Commit Rocket is to be able to add it to the settings, and select which account you want in your repository, and it will remember which account you want to commit from forever! This feels like the most convenient way to make use of such a feature but let me know what you think about it. On a sidenote I plan to support at least Github, Gitlab and Bitbucket, others may be added upon request.
+ </p>
+
+ <A.H2>Theming</A.H2>
+ <p>
+ A feature that I have only seen GitKraken do, is theming. Currently I'm rocking a purple theme across my browser, IDE and even my OS, but my darn Git client doesn't allow for personal themes! This is the reason why I wanted to make Commit Rocket, to make it purple (totally joking by the way).
+ </p>
+
+ <A.Container className="gap-2">
+ <p role="note" aria-label="Note" className="mx-auto font-semibold">
+ My theme
+ </p>
+ <A.Img
+ className="mx-auto max-h-[27rem] w-fit border border-neutral-500"
+ alt="Electron vs Tauri memory and build size"
+ src={myTheme.src}
+ width={myTheme.width}
+ height={myTheme.height}
+ />
+ </A.Container>
+
+ <p>
+ Theming is not necessarily an essential feature, but it does allow people to personalize their experience, which I'm all for! This is why I would like to include a built-in visual editor for your themes, so that you can easily customize it to your liking. In addition, I will be adding an export and import feature so that you can share and use other people's themes.
+ </p>
+
+ <A.H2>Commit Peeking</A.H2>
+ <p>
+ This feature I have seen no other Git client do, and I'm dubbing it "Commit peeking". Wouldn't it be awesome to know which files have been changed in a commit, without having to actively click on the commit itself? Commit peeking has got you covered.
+ </p>
+ <p>
+ By hovering over a commit, a small window will pop up showing the changed files. This will help you look for the commits you may want to find quicker and easier. Combining this with being able to see a specific, file's history, and you'd be able to find changes you need in no time.
+ </p>
+
+ <A.H2>Working Contexts</A.H2>
+ <p>
+ The following feature has been inspired by the Arc browser. In Arc you have something called "spaces". They are basically places where you can store browser tabs, bookmarks and that sort of stuff. You can simply switch between them by using a hotkey. This seems really useful to me, especially in a Git client.
+ </p>
+ <A.Container className="gap-2">
+ <p role="note" aria-label="Note" className="mx-auto font-semibold">
+ Spaces in Arc
+ </p>
+ <A.Img
+ className="mx-auto border border-neutral-500"
+ alt="Switching 'spaces' in the Arc browser"
+ src={spacesInArc.src}
+ width={spacesInArc.width}
+ height={spacesInArc.height}
+ />
+ <p role="note" aria-label="Source" className="mx-auto text-sm">
+ Source: <A.Link href="https://www.youtube.com/watch?v=kVZZv1ygNP8" external nofollow>Arc | Setting up Spaces & Profiles</A.Link> by <A.Link href="https://www.youtube.com/@TheBrowserCompany" external nofollow>The Browser Company</A.Link>
+ </p>
+ </A.Container>
+ <p>
+ Here is my pitch. You have multiple working contexts, like work, school, side-project, etc. You can store your repositories, active theme, accounts, etc. in this context. Then when you switch contexts the repositories, theme, etc. would be retrieved and applied. If you are working on multiple projects, then this should keep you more organized. Preferably these contexts would be a 1-click switch, or a hotkey. Unlike VSCode's profiles, you will be able to sync over your settings without having to resort to switching back and forth.
+ </p>
+ <p>
+ Personally, I really like this feature. I have a lot of open repositories at one time, so having a better way to organize them is very welcome. Combining this with themes, could give an extra distinction between your working contexts. I think I would be making use of this a lot. Let me know if you would enjoy this feature!
+ </p>
+
+ <A.H2>Plugins</A.H2>
+ <p>
+ The last feature I want to talk about in this post is plugins. Having plugins paired with a Git client, just makes sense. If Commit Rocket doesn't have what you need, you can simply install a plugin that does what you want!
+ </p>
+ <p>
+ Which plugins would you be able to install? All sorts of plugins! I personally thought of Scrumboard integrations with Jira, Trello or Devops; A Vim key bindings plugin; or automatic commit naming using AI. There are a lot of possibilities with this system.
+ </p>
+ <p>
+ In addition, I would like to add a plugin marketplace. Maybe something like how the note taking app Obsidian does it, having core plugins and community plugins.
+ </p>
+ <p>
+ Plugins would work together with the working contexts, by switching which plugin is active between the different contexts. What if you don't need a scrumboard active in your side-project context, so you turn it off to save resource and headspace.
+ </p>
+ <p>
+ I see a lot of potential with plugins, and I hope you do too!
+ </p>
+
+ <A.H2>Survey</A.H2>
+ <iframe
+ className="w-full"
+ src="https://docs.google.com/forms/d/e/1FAIpQLSfabnpc8SWY09GK2mkFeH5XUb3qG6enN-EFaUl_mNcyPbRW-Q/viewform?embedded=true"
+ width="1920"
+ height="1650"
+ frameBorder="0"
+ marginHeight="0"
+ marginWidth="0"
+ >
+ Loading survey...
+ </iframe>
+
+ <A.H2>Wrapping up</A.H2>
+ <p>
+ All of these features are really exciting to me and are making me hyped for the future of Commit Rocket. These features working together to create an organized, personalized and comfortable experience for all uses sounds like music in my ears. Make sure to participate in the survey, your opinions and ideas will help me a lot as I continue to create Commit Rocket.
+ </p>
+ <p>
+ That will be all for now, however stay tuned for some upcoming articles about the plugin system, and one about the Commit Rocket techstack.
+ </p>
+ </>
+};
\ No newline at end of file
diff --git a/src/assets/state/articles/4.jsx b/src/assets/state/articles/4.jsx
new file mode 100644
index 0000000..e374587
--- /dev/null
+++ b/src/assets/state/articles/4.jsx
@@ -0,0 +1,123 @@
+import { people } from "../team";
+import tags from "./tags";
+
+import thumbnail from "@blogImages/4/thumbnail.webp";
+import gitmoji from "@blogImages/4/gitmoji.webp";
+import conventionalcommits from "@blogImages/4/conventionalcommits.webp";
+import logo from "@/assets/images/brand/logo.svg";
+
+import A from "@/components/pages/blog/post/ArticleComponents";
+
+/** @type {import("./article").default} */
+export default {
+ title: "Exploring Git Commit Naming Standards",
+
+ thumbnail,
+ thumbnailAlt: "Anatomy of a Commit Message",
+
+ vertical: "software",
+
+ slug: "git-commit-naming",
+
+ tags: [
+ tags.git,
+ tags.tutorial,
+ tags.discover,
+ ],
+
+ author: people.rik,
+
+ created: new Date("2023/06/12"),
+
+ teaser: "Explore the world of Git commit naming standards and learn how to choose the right one for your project",
+
+ content: <>
+ <p>
+ Personally, I must admit that I haven't always adhered to naming conventions when making Git commits. However, I've come to realize the tremendous benefits they offer, especially when working in teams. Recently, while working on Commit Rocket, I found myself seeking a structured approach to commit naming.
+ </p>
+ <p>
+ That is why I am writing this article! I would like to find out what makes a great commit message and which standards there are. Also most importantly for me, which approach I could implement in Commit Rocket. I hope to take you along and teach you what I've learned.
+ </p>
+ <A.H2>Benefits of Naming Conventions</A.H2>
+ <p>
+ From my own experience, I've found that having a structured way to name commits significantly reduces the stress and uncertainty associated with creating commit messages. When you can clearly express the purpose and impact of your changes in a concise manner, it becomes easier to navigate and understand the commit history. It also helps when you need to locate a specific commit later on, whether to review the changes or revert them if needed.
+ </p>
+ <A.H3>Anatomy of a Commit Message</A.H3>
+ <p>
+ As you can see, a commit message is meant to convey some sort of meaning. Having standardized ways to write these messages means that everyone will be on the same page.
+ </p>
+ <A.H4>Imperative Mood</A.H4>
+ <p>
+ It's important to use the imperative mood, which provides a clear instruction about what the commit does. Instead of saying "I added feature XYZ," it should be "Add feature XYZ." This small change in phrasing makes a big difference in creating a consistent and actionable commit history.
+ </p>
+ <A.H4>Detail and Explanation</A.H4>
+ <p>
+ Commit messages should be detailed enough to convey the purpose and context of the changes. When writing commit messages ask yourself why the changes were made, what the context is of the changes and what effect it will have.
+ </p>
+ <p>
+ While a short one-liner can work in some cases, using multi-paragraph messages can provide a more in-depth explanation, especially for complex or significant changes. If you're using the Git command-line interface, you can achieve this by adding an extra `-m` flag to the commit command. Here is an example:
+ </p>
+ <A.Code lang="bash">
+ git commit -m "Fix bug where users could switch to light mode" -m "Users were able to switch to light mode because the settings data loaded from the LocalStorage was not validated"
+ </A.Code>
+ <A.H4>Length and Content</A.H4>
+ <p>
+ The length of a commit message is also important. Aim for around 50 to 75 characters to keep it concise and readable. Avoid using filler words or unnecessary details like "I think" or "maybe." Instead, focus on conveying the essence of the change in a clear and straightforward manner.
+ </p>
+ <A.H2>Popular Naming Conventions</A.H2>
+ <p>
+ There are several widely adopted naming conventions that can serve as helpful guidelines for crafting effective commit messages. Here are two popular options:
+ </p>
+ <A.H3><A.Link href="https://www.conventionalcommits.org/en/v1.0.0/" title="conventionalcommits.org" nofollow external>Conventional Commits</A.Link></A.H3>
+ <div className="flex items-center gap-4 flex-col md:flex-row">
+ <img
+ className="rounded-2xl max-h-24 w-auto border border-neutral-500"
+ src={conventionalcommits.src}
+ width={conventionalcommits.width}
+ height={conventionalcommits.height}
+ />
+ <p>
+ This convention provides a structured format for commit messages, including optional scopes, a description, body, and footer(s). For example:
+ </p>
+ </div>
+ <A.Code lang="bash">{`
+ feat(user-profile): Add avatar image upload functionality
+ [optional body]
+ [optional footer(s)]
+ `}</A.Code>
+ <p>
+ Conventional Commits offer an easy-to-understand and versatile format that can be quickly adopted and applied to your projects.
+ </p>
+ <A.H3><A.Link href="https://gitmoji.dev/" title="gitmoji.dev" nofollow external>Gitmoji</A.Link></A.H3>
+ <div className="flex items-center gap-4 flex-col md:flex-row">
+ <img
+ className="rounded-2xl max-h-24 w-auto border border-neutral-500"
+ src={gitmoji.src}
+ width={gitmoji.width}
+ height={gitmoji.height}
+ />
+ <p>
+ Gitmoji introduces emojis to commit messages, giving them a visually appealing touch. It follows a format that includes an intention, an optional scope, and a message. For example:
+ </p>
+ </div>
+ <A.Code lang="bash">
+ 🐛 Fix issue with form validation
+ </A.Code>
+ <p>
+ While Gitmoji brings a fun and expressive aspect to commit messages, it may take some time to get used to its unique set of emojis and their meanings.
+ </p>
+ <A.H2>Conclusion</A.H2>
+ <div className="flex items-center gap-4">
+ <p>
+ The Commit Rocket repository will likely be making use of Gitmoji. It will take some getting used to for people, but I think it is a neat and clean way to express code changes. I also think that adding a visual aspect to commits is a fun idea. Maybe adding template commit names to Commit Rocket will be helpful 🤔.
+ </p>
+ <img
+ className="w-24 h-24 aspect-square rotate-30"
+ {...logo}
+ />
+ </div>
+ <p>
+ Remember, commit naming conventions are just tools to help us communicate effectively and collaborate smoothly within our projects. While there are various conventions to choose from, the most important thing is to adopt one that works well for you and your team.
+ </p>
+ </>
+};
\ No newline at end of file
diff --git a/src/assets/state/articles/article.d.ts b/src/assets/state/articles/article.d.ts
index 5fbf70f..7a54191 100644
--- a/src/assets/state/articles/article.d.ts
+++ b/src/assets/state/articles/article.d.ts
@@ -10,12 +10,13 @@ type IArticle = {
thumbnailAlt: string;
tags: ITag[];
+ // relatedArticles: IArticle[];
/**
* A high level overview of the article E.g. Technology
*/
vertical: string;
-
+
slug: string;
author: IMember;
@@ -23,7 +24,11 @@ type IArticle = {
teaser: string;
content: ReactNode;
+ hidden?: boolean;
+
+
updated?: Date;
created: Date;
};
+
export default IArticle;
\ No newline at end of file
diff --git a/src/assets/state/articles/index.ts b/src/assets/state/articles/index.ts
index e26ce0c..aeb7e92 100644
--- a/src/assets/state/articles/index.ts
+++ b/src/assets/state/articles/index.ts
@@ -1,10 +1,25 @@
import IArticle from "./article";
import article1 from "./1";
+import article2 from "./2";
+import article3 from "./3";
+import article4 from "./4";
export default [
{
filename: "1",
article: article1
+ },
+ {
+ filename: "2",
+ article: article2
+ },
+ {
+ filename: "3",
+ article: article3
+ },
+ {
+ filename: "4",
+ article: article4
}
] as { filename: string; article: IArticle }[];
\ No newline at end of file
diff --git a/src/assets/state/articles/tags.ts b/src/assets/state/articles/tags.ts
index 3aa1b63..43da843 100644
--- a/src/assets/state/articles/tags.ts
+++ b/src/assets/state/articles/tags.ts
@@ -16,5 +16,13 @@ export default {
"intro": {
name: "Introduction"
},
-
+ "tutorial": {
+ name: "Tutorial"
+ },
+ "plans": {
+ name: "Plans"
+ },
+ "discover": {
+ name: "Discover"
+ }
} satisfies Record<string, ITag>;
\ No newline at end of file
diff --git a/src/assets/state/contactMethods.tsx b/src/assets/state/contactMethods.tsx
index e81d4f8..9a2b97d 100644
--- a/src/assets/state/contactMethods.tsx
+++ b/src/assets/state/contactMethods.tsx
@@ -22,12 +22,6 @@ const contactMethods: IContactMethod[] = [
icon: NewsIcon,
iconAlt: "Newspaper icon",
},
- {
- title: "feedback@commitrocket.com",
- href: "mailto:feedback@commitrocket.com",
- icon: EnvelopeIcon,
- iconAlt: "Envelope icon"
- },
{
title: "Feedback Form",
href: "/contribute#feedback",
@@ -37,8 +31,8 @@ const contactMethods: IContactMethod[] = [
{
title: <>
Discord <br />
- <span className="text-sm font-semibold text-neutral-700">
- (Coming Soon™)
+ <span className="text-sm font-semibold text-cr-fill-contrast">
+ (In the future™)
</span>
</>,
icon: DiscordIcon,
diff --git a/src/assets/state/missions.tsx b/src/assets/state/missions.tsx
index b3e14a2..9113ad3 100644
--- a/src/assets/state/missions.tsx
+++ b/src/assets/state/missions.tsx
@@ -4,7 +4,7 @@ import { StaticImageData } from "next/image";
import ModernPicture from "@/assets/images/content/missions/modern.webp";
import FastAndFeaturePackedPicture from "@/assets/images/content/missions/fast-and-feature-packed.webp";
import CrossPlatformPicture from "@/assets/images/content/missions/cross-platform.webp";
-import Link from "@/components/navigation/Link";
+import Link from "@/components/controls/Link";
export interface IMission {
title: string;
@@ -24,7 +24,7 @@ const missions: IMission[] = [
Many Git clients have a similar look and feel, and the interface can be intimidating for new users.
</p>
<p>
- With Commit Rocket we plan to {/*<Link href="/blog/3/designs" color="primary" underline>innovate and modernize the design of Git clients</Link>*/} innovate and modernize the design of Git clients to
+ With Commit Rocket we plan to {/*<Link href="/blog/3/designs" color="primary" underline>innovate and modernize the design of Git clients</Link>*/} innovate and modernize the design of Git clients to
create an attractive and user-friendly interface that will appeal to both beginners and experienced users alike.
</p>
</>
@@ -39,7 +39,7 @@ const missions: IMission[] = [
</p>
<p>
To achieve this, we employ modern technologies such as Tauri, Rust, and React to ensure that our client delivers optimal speed and performance.
- For more information on our features, take a look at our <Link href="/roadmap" color="primary" underline>roadmap</Link>!
+ For more information on our features, take a look at our <Link href="/#roadmap" color="primary" underline>roadmap</Link>!
</p>
</>
},
diff --git a/src/assets/state/roadmap.tsx b/src/assets/state/roadmap.tsx
index 464e429..6266dec 100644
--- a/src/assets/state/roadmap.tsx
+++ b/src/assets/state/roadmap.tsx
@@ -1,5 +1,5 @@
-import Heading from "@/components/layout/Heading";
-import Link from "@/components/navigation/Link";
+import Heading from "@/components/content/Heading";
+import Link from "@/components/controls/Link";
import { ReactNode } from "react";
export interface IRoadmapItem {
@@ -10,7 +10,7 @@ export interface IRoadmapItem {
// NOTE: This list is assumed to be in order
export default [
{
- title: "Q2 2023",
+ title: "Q3 & Q4 2023",
text: <>
<Heading.H4 id="roadmap-designs">
Designs
@@ -29,12 +29,6 @@ export default [
This will involve testing various libraries and designs to ensure that we create the best possible product.
We will also decide on licensing and monetization strategies during this month.
</p>
- <Heading.H4 id="roadmap-discord-server">
- Opening Discord Server
- </Heading.H4>
- <p aria-labelledby="roadmap-discord-server">
- To encourage an active community, we plan to launch a public Discord server where users can freely exchange ideas and communicate directly with the development team.
- </p>
<Heading.H4 id="roadmap-active-development">
Active Development
</Heading.H4>
@@ -53,15 +47,14 @@ export default [
</>
},
{
- title: "Q3 & Q4 2023",
+ title: "2024",
text: <>
-
<Heading.H4 id="roadmap-early-access-release">
Ealy Access Releases
</Heading.H4>
<p aria-labelledby="roadmap-early-access-release">
Early access versions of Commit Rocket will be made available exclusively to our mailing list subscribers and Discord members.
- To ensure a smooth user experience, we encourage users to share their feedback and feature requests with us via our Discord server and <Link color="primary" href="mailto:feedback@commitrocket.com" underline>our email</Link>.
+ To ensure a smooth user experience, we encourage users to share their feedback and feature requests with us via our <Link color="primary" href="/contribute#feedback" underline>our feedback form</Link>.
As the product is still subject to changes, we appreciate our users' contributions in helping us shape the final product.
</p>
<Heading.H4 id="roadmap-alpha-version">
@@ -73,14 +66,5 @@ export default [
Upon release of the first alpha version, we will also be open-sourcing the Git client!
</p>
</>
- },
- {
- title: "2024",
- text: <>
- <p>
- After the alpha release, we will continue to enhance Commit Rocket by taking feedback from our users and working on the client.
- Though we have not set specific goals, we aim to develop a stable and production-ready application by the end of the year.
- </p>
- </>
}
] satisfies IRoadmapItem[];
\ No newline at end of file
diff --git a/src/assets/state/team.tsx b/src/assets/state/team.tsx
index 0301428..4a1795f 100644
--- a/src/assets/state/team.tsx
+++ b/src/assets/state/team.tsx
@@ -27,10 +27,6 @@ export const people = {
href: "https://github.com/Rikthepixel",
name: "GitHub"
},
- {
- href: "mailto:rikdenbreejen@commitrocket.com",
- name: "Email"
- },
{
href: "https://www.rikdenbreejen.nl",
name: "Website"
@@ -38,6 +34,10 @@ export const people = {
{
href: "https://www.linkedin.com/in/rik-den-breejen-a84aa71a7/",
name: "LinkedIn"
+ },
+ {
+ href: "https://www.youtube.com/@RikThePixel",
+ name: "Youtube"
}
]
}
diff --git a/src/components/content/CodeBlock/CodeBlockHydrator.tsx b/src/components/content/CodeBlock/CodeBlockHydrator.tsx
new file mode 100644
index 0000000..8320158
--- /dev/null
+++ b/src/components/content/CodeBlock/CodeBlockHydrator.tsx
@@ -0,0 +1,61 @@
+import { isSSR } from "@/utils/ssr";
+import React, { useEffect } from "react";
+
+interface CopyClickState {
+ clearIconTimeout?: () => unknown;
+}
+
+const hydrate = () => {
+ const ssrCodeBlocks = document.querySelectorAll("pre:not([data-hydrated=\"true\"])[data-ssr-rendered=\"true\"][data-is-codeblock=\"true\"]");
+
+ ssrCodeBlocks.forEach((codeBlock) => {
+ const copyButton = codeBlock.querySelector(":scope > button#copy");
+ if (!copyButton) return;
+
+ const clickState: CopyClickState = {};
+ const codeLines = codeBlock.querySelectorAll(":scope code td.cd");
+ const content = Array.from(codeLines).map((el) => el.textContent).join("\n");
+
+ copyButton.addEventListener("click", async () => {
+ const copyTask = navigator.clipboard.writeText(content);
+
+ const clipIcon = copyButton.querySelector(":scope > #clip-icon");
+ const checkIcon = copyButton.querySelector(":scope > #check-icon");
+
+ if (clipIcon && checkIcon) {
+ clipIcon.setAttribute("data-clicked", "true");
+ checkIcon.setAttribute("data-clicked", "true");
+
+ clickState.clearIconTimeout?.();
+
+ const timeout = setTimeout(() => {
+ if (!clipIcon || !checkIcon) return;
+ clipIcon.setAttribute("data-clicked", "false");
+ checkIcon.setAttribute("data-clicked", "false");
+ }, 1500);
+
+ clickState.clearIconTimeout = () => clearTimeout(timeout);
+ }
+
+ await copyTask;
+ });
+ });
+};
+
+
+const CodeBlockHydrator = ({ children }: React.PropsWithChildren) => {
+
+ useEffect(() => {
+ if (isSSR) return;
+
+ hydrate();
+ }, []);
+
+ return (
+ <>
+ {children}
+ </>
+ );
+};
+
+export default CodeBlockHydrator;
\ No newline at end of file
diff --git a/src/components/content/CodeBlock/index.tsx b/src/components/content/CodeBlock/index.tsx
new file mode 100644
index 0000000..7c12551
--- /dev/null
+++ b/src/components/content/CodeBlock/index.tsx
@@ -0,0 +1,167 @@
+import React, { useCallback, useMemo, useRef } from "react";
+import ClipboardIcon from "@heroicons/react/24/outline/ClipboardIcon";
+import CheckIcon from "@heroicons/react/24/outline/CheckCircleIcon";
+import { twMerge } from "tailwind-merge";
+import dynamic from "next/dynamic";
+
+import useCodeHightlight, { CodeLine, SupportedLanguages } from "@/hooks/useCodeHighlight";
+
+export interface CodeBlockProps {
+ /**
+ * The language used in the codeblock
+ */
+ lang: SupportedLanguages;
+
+ /**
+ * The code
+ */
+ children: string | string[];
+
+ /**
+ * To style the `pre` tag
+ */
+ className?: string;
+
+ /**
+ * Wether the code can be copied
+ * @default true
+ */
+ canCopy?: boolean;
+
+ /**
+ * Wether to show the line numbers or not
+ */
+ showLines?: boolean;
+
+ /**
+ * Highlights certain lines, this is based on the line numbers
+ */
+ markedLines?: (number | [number, number])[];
+
+ /**
+ * Is set to true it will render out the code fully on the server.
+ */
+ allowSSR?: boolean;
+}
+
+const CodeBlock: React.FC<CodeBlockProps> = ({ lang, children, className, markedLines, showLines, allowSSR, canCopy = true }) => {
+ const [codeLines, linesToMark] = useCodeHightlight({
+ lang,
+ markedLines,
+ allowSSR,
+ code: children,
+ });
+
+ const renderedLines = useMemo(() => {
+ const _renderedLines = Array(codeLines.length);
+ let isPreviousMarked = false;
+ let isMarked = linesToMark.includes(1);
+ let isNextMarked = linesToMark.includes(2);
+
+ for (const [i, line] of codeLines.entries()) {
+ const lineNumber = i + 1;
+
+ const markingStyle = `
+ ${isMarked ? "line-highlight" : ""}
+ ${!isPreviousMarked && isMarked ? "round-top" : ""}
+ ${!isNextMarked && isMarked ? "round-bot" : ""}
+ `.trim();
+
+
+ _renderedLines[i] = (
+ <tr key={i} suppressHydrationWarning className={`line ${markingStyle}`}>
+ {showLines && <td suppressHydrationWarning className="nr"><span suppressHydrationWarning>{lineNumber}</span></td>}
+ <td suppressHydrationWarning className="cd whitespace-break-spaces" dangerouslySetInnerHTML={{ __html: line.html }} />
+ </tr>
+ );
+
+ isPreviousMarked = isMarked;
+ isMarked = isNextMarked;
+ isNextMarked = linesToMark.includes(lineNumber + 1);
+ }
+
+ return _renderedLines;
+ }, [codeLines, showLines, linesToMark]);
+
+ const computedClassName = useMemo(() => {
+ return twMerge("bg-neutral-800 rounded-2xl p-4 text-base relative group/cb", className);
+ }, [className]);
+
+ return (
+ <>
+ <link key="codeblock:stylesheed" rel="stylesheet" href="/styles/codeblock.min.css" />
+ <pre className={computedClassName} data-ssr-rendered={allowSSR} data-is-codeblock="true">
+ <code className="">
+ <table className="w-full">
+ <tbody>{renderedLines}</tbody>
+ </table>
+ </code>
+ {canCopy && <CopyCode codeLines={codeLines} />}
+ </pre>
+ </>
+ );
+};
+
+interface CopyCodeProps {
+ codeLines: CodeLine[];
+}
+
+const CopyCode = ({ codeLines }: CopyCodeProps) => {
+ const clipIconRef = useRef<SVGSVGElement>(null);
+ const checkIconRef = useRef<SVGSVGElement>(null);
+ const iconTimeoutRef = useRef<(() => unknown) | undefined>(undefined);
+
+ const onCopyClick = useCallback(async () => {
+ const copyTask = navigator.clipboard.writeText(codeLines.map((line) => line.original).join("\n"));
+
+ if (clipIconRef.current && checkIconRef.current) {
+ clipIconRef.current.setAttribute("data-clicked", "true");
+ checkIconRef.current.setAttribute("data-clicked", "true");
+
+ iconTimeoutRef.current?.();
+
+ const timeout = setTimeout(() => {
+ if (!clipIconRef.current || !checkIconRef.current) return;
+ clipIconRef.current.setAttribute("data-clicked", "false");
+ checkIconRef.current.setAttribute("data-clicked", "false");
+ }, 1500);
+
+ iconTimeoutRef.current = () => clearTimeout(timeout);
+ }
+
+ await copyTask;
+ }, [codeLines]);
+
+ const copyButtonClassName = useMemo(() => {
+ return twMerge("relative text-white opacity-30 bg-neutral-600 p-2 rounded-2xl absolute top-2 right-2 group-hover/cb:opacity-100 hover:bg-neutral-500", codeLines.length === 1 ? "top-1/2 -translate-y-1/2" : "");
+ }, []);
+
+ return (
+ <button
+ id="copy"
+ className={copyButtonClassName}
+ onClick={onCopyClick}
+ aria-label="copy code"
+ title="📋 Click to Copy 📋"
+ >
+ <ClipboardIcon
+ ref={clipIconRef}
+ id="clip-icon"
+ className="transition-opacity data-[clicked='true']:opacity-0"
+ width="1.25em"
+ height="1.25em"
+ />
+ <CheckIcon
+ ref={checkIconRef}
+ id="check-icon"
+ className="absolute transition-opacity duration-300 opacity-0 data-[clicked='true']:opacity-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+ width="1.25em"
+ height="1.25em"
+ />
+ </button>
+ );
+};
+
+const NoSSRCode = dynamic(Promise.resolve({ default: CodeBlock }), { ssr: false });
+
+export default ((props) => props.allowSSR ? <CodeBlock {...props} /> : <NoSSRCode {...props} />) as typeof CodeBlock;
\ No newline at end of file
diff --git a/src/components/layout/Heading.tsx b/src/components/content/Heading.tsx
similarity index 92%
rename from src/components/layout/Heading.tsx
rename to src/components/content/Heading.tsx
index 2c61e98..70228ba 100644
--- a/src/components/layout/Heading.tsx
+++ b/src/components/content/Heading.tsx
@@ -3,7 +3,7 @@ import { twMerge } from "tailwind-merge";
export type HeadingProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
-const makeHeading = (level: number, defaultClassName: string) => forwardRef((
+export const makeHeading = (level: number, defaultClassName: string) => forwardRef((
{
className,
...props
@@ -35,19 +35,19 @@ export const H6 = makeHeading(6, "text-lg font-semibold md:text-xl");
export default {
/** Styled `h1` */
H1,
-
+
/** Styled `h2` */
H2,
-
+
/** Styled `h3` */
H3,
-
+
/** Styled `h4` */
H4,
-
+
/** Styled `h5` */
H5,
-
+
/** Styled `h6` */
H6
};
\ No newline at end of file
diff --git a/src/components/controls/Button.tsx b/src/components/controls/Button.tsx
index f37ce2f..1992064 100644
--- a/src/components/controls/Button.tsx
+++ b/src/components/controls/Button.tsx
@@ -7,14 +7,13 @@ import { RequiredKeys } from "@/types/utility";
import ArrowPathIcon from "@heroicons/react/24/solid/ArrowPathIcon";
import fadeAnim from "@/animations/fade";
-export const style = cva("relative flex items-center justify-center transition-colors shadow-sm px-3 py-2 gap-2 rounded-full border-2", {
+export const style = cva("relative flex items-center justify-center transition-colors shadow-sm px-3 py-2 gap-2 rounded-2xl", {
variants: {
color: {
- white: "bg-neutral-200 hover:bg-neutral-50 border-neutral-400 text-neutral-900",
- primary: "bg-primary hover:bg-primary-light border-primary-dark text-primary-contrast",
- secondary: "bg-secondary hover:bg-secondary-light border-secondary-dark text-secondary-contrast"
+ white: "bg-neutral-200 hover:bg-neutral-50 text-neutral-900",
+ primary: "bg-cr-primary hover:bg-cr-primary-light bord text-cr-primary-contrast"
}
- }
+}
});
export type BaseProps = {
diff --git a/src/components/controls/Form.tsx b/src/components/controls/Form.tsx
index 3873fd8..3af3441 100644
--- a/src/components/controls/Form.tsx
+++ b/src/components/controls/Form.tsx
@@ -15,7 +15,7 @@ const Form = ({
children,
successChildren,
success,
- successClassName = "p-8 my-8 text-xl font-semibold rounded-md border-2 border-green-600 w-fit mx-auto image-dots bg-green-400 from-green-600",
+ successClassName = "p-8 my-8 text-xl font-semibold rounded-2xl w-fit mx-auto image-star bg-green-500",
successProps,
oneTime,
...props
diff --git a/src/components/controls/Input.tsx b/src/components/controls/Input.tsx
index 3bc0747..fa44e41 100644
--- a/src/components/controls/Input.tsx
+++ b/src/components/controls/Input.tsx
@@ -4,11 +4,10 @@ import { twMerge } from "tailwind-merge";
import { RequiredKeys } from "@/types/utility";
-export const style = cva("w-full rounded-full py-2 px-3 border-2", {
+export const style = cva("w-full rounded-2xl py-2 px-3 border-2", {
variants: {
color: {
- primary: "border-primary bg-white",
- secondary: "border-secondary bg-white"
+ primary: "border-cr-primary bg-transparent placeholder:text-cr-fill-contrast/75",
},
},
defaultVariants: {
diff --git a/src/components/navigation/Link.tsx b/src/components/controls/Link.tsx
similarity index 86%
rename from src/components/navigation/Link.tsx
rename to src/components/controls/Link.tsx
index 26d9e8a..8f9bb42 100644
--- a/src/components/navigation/Link.tsx
+++ b/src/components/controls/Link.tsx
@@ -4,8 +4,6 @@ import { cva, VariantProps as GetVariantProps } from "class-variance-authority";
import { twMerge } from "tailwind-merge";
import ArrowTopRightOnSquareIcon from "@heroicons/react/24/solid/ArrowTopRightOnSquareIcon";
-import { RequiredKeys } from "@/types/utility";
-
export const style = cva("transition-colors gap-2", {
variants: {
underline: {
@@ -14,9 +12,8 @@ export const style = cva("transition-colors gap-2", {
},
color: {
white: "text-white hover:text-neutral-300",
- primary: "text-primary hover:text-primary-light",
- secondary: "text-secondary hover:text-secondary-light",
- "fill-contrast": "text-fill-contrast hover:text-fill-contrast-light"
+ primary: "text-cr-primary hover:text-cr-primary-light",
+ "fill-contrast": "text-cr-fill-contrast hover:text-cr-fill-contrast-light"
}
},
defaultVariants: {
diff --git a/src/components/controls/Select.tsx b/src/components/controls/Select.tsx
index 294696f..1d595c0 100644
--- a/src/components/controls/Select.tsx
+++ b/src/components/controls/Select.tsx
@@ -12,19 +12,17 @@ import ChevronDownIcon from "@heroicons/react/24/solid/ChevronDownIcon";
export const style = inputStyle;
export type VariantProps = InputVariantProps;
-export const containerStyle = cva("absolute border-2 bg-white left-1/2 -translate-x-1/2 top-full rounded-lg min-w-fit w-full overflow-hidden translate-y-1 z-50", {
+export const containerStyle = cva("absolute border-2 left-1/2 -translate-x-1/2 top-full rounded-2xl min-w-fit w-full overflow-hidden translate-y-1 z-50", {
variants: {
color: {
- primary: "border-primary",
- secondary: "border-secondary"
+ primary: "border-cr-primary bg-cr-fill text-cr-fill-contrast"
}
}
});
export const itemStyle = cva("px-4 py-2", {
variants: {
color: {
- primary: "ui-active:bg-primary/20",
- secondary: "ui-active:bg-secondary/20"
+ primary: "ui-active:bg-cr-primary/20"
}
}
});
diff --git a/src/components/navigation/Footer.tsx b/src/components/layout/Footer.tsx
similarity index 90%
rename from src/components/navigation/Footer.tsx
rename to src/components/layout/Footer.tsx
index d864545..6a0fdd5 100644
--- a/src/components/navigation/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -1,15 +1,15 @@
-import Link from "./Link";
+import Link from "../controls/Link";
-import Logo from "@/assets/images/brand/logo-200x200.webp";
+import Logo from "@/assets/images/brand/logo.svg";
const Footer = () => {
return (
- <div className="flex items-center justify-center w-[calc(100%_+_4rem)] pt-16 mt-auto text-primary-contrast">
- <footer className="flex flex-col w-full gap-4 p-8 border-2 max-w-7xl rounded-t-md bg-primary image-dots from-primary-light border-primary-light">
- <div className="flex flex-col items-center gap-2 p-2 rounded-md bg-white/20 sm:flex-row backdrop-blur-[1.25px]">
+ <div className="flex items-center justify-center w-[calc(100%_+_4rem)] pt-16 mt-auto text-cr-primary-contrast">
+ <footer className="flex flex-col w-full gap-4 p-8 max-w-7xl rounded-t-2xl bg-cr-primary image-star">
+ <div className="flex flex-col items-center gap-2 p-2 rounded-2xl bg-cr-primary-contrast/20 border border-cr-primary-contrast/20 backdrop-glass sm:flex-row">
<div className="flex items-center gap-2">
<img
- className="w-12 h-12"
+ className="w-12 h-12 rotate-30"
alt="Commit Rocket Logo"
src={Logo.src}
width={Logo.width}
diff --git a/src/components/layout/GraphDecor.tsx b/src/components/layout/GraphDecor.tsx
new file mode 100644
index 0000000..39b1509
--- /dev/null
+++ b/src/components/layout/GraphDecor.tsx
@@ -0,0 +1,151 @@
+import Graph1 from "@/assets/images/brand/decor/git/graph-1";
+import Graph2 from "@/assets/images/brand/decor/git/graph-2";
+import Graph3 from "@/assets/images/brand/decor/git/graph-3";
+import Graph4 from "@/assets/images/brand/decor/git/graph-4";
+import useSSGSafe from "@/hooks/useSSGSafe";
+
+import React, { useMemo, useRef } from "react";
+
+export interface GraphDecorProps {
+
+}
+
+const colors = [
+ "#DC2626",
+ "#2563EB",
+ "#7C3AED",
+ "#A3E635",
+ "#F59E0B"
+];
+
+const makeColorBrush = () => {
+ const notChosenColors = [...colors];
+
+ return () => {
+ const colorPool = notChosenColors.length === 0 ? colors : notChosenColors;
+ const chosenIndex = Math.floor(Math.random() * colorPool.length);
+ const color = colorPool[chosenIndex];
+
+ if (notChosenColors.length !== 0) {
+ notChosenColors.splice(chosenIndex, 1);
+ }
+
+ return color;
+ };
+};
+
+const getSide = (perviousSides: boolean[]) => {
+ if (perviousSides.length === 0) {
+ const side = Math.random() > 0.5;
+ perviousSides.unshift(side);
+ return side;
+ };
+
+ const samePreviousSides = perviousSides.every((value, i, arr) => i === 0 || value === arr[i - 1]);
+ const side = samePreviousSides ? !perviousSides.at(0)! : Math.random() > 0.5;
+
+ perviousSides.unshift(side);
+ perviousSides.length > 2 && perviousSides.pop();
+
+ return side;
+};
+
+const decors = [
+ {
+ name: "1",
+ widthMultiplier: 2,
+ aspect: 1900 / 600,
+ component: ({ makeColor, ...props }) => (
+ <Graph1
+ {...props}
+ color={makeColor()}
+ color1={makeColor()}
+ />
+ )
+ },
+ {
+ name: "2",
+ widthMultiplier: 1,
+ aspect: 1600 / 300,
+ component: ({ makeColor, ...props }) => (
+ <Graph2
+ {...props}
+ color={makeColor()}
+ />
+ )
+ },
+ {
+ name: "3",
+ widthMultiplier: 1,
+ aspect: 2500 / 300,
+ component: ({ makeColor, ...props }) => (
+ <Graph3
+ {...props}
+ color={makeColor()}
+ />
+ )
+ },
+ {
+ name: "4",
+ widthMultiplier: 1,
+ aspect: 2800 / 300,
+ component: ({ makeColor, ...props }) => (
+ <Graph4
+ {...props}
+ color={makeColor()}
+ color1={makeColor()}
+ />
+ )
+ }
+] as {
+ name: string;
+ widthMultiplier: number;
+ aspect: number;
+ component: React.ComponentType<Omit<React.ComponentProps<"svg">, "ref"> & { makeColor: () => string; }>;
+}[];
+
+const AMOUNT = 40;
+
+const GraphDecor = ({ }: GraphDecorProps) => {
+ const isSafe = useSSGSafe();
+
+ const renderedGraphs = useMemo(() => {
+ if (!isSafe) return;
+
+ const controls = {
+ currentLength: 60, // rem
+ perviousSides: [] as boolean[] // last 2 sides
+ };
+
+ return Array(AMOUNT).fill(true).map((_, i) => {
+ const decor = decors[Math.floor(Math.random() * decors.length)];
+ const side = getSide(controls.perviousSides);
+
+ const width = 10 * decor.widthMultiplier; // rem
+ const height = width * decor.aspect;
+ const padding = Math.random() * 40 + 20;
+ const style = { "--width-mulitplier": decor.widthMultiplier, "--length": `${controls.currentLength}rem` } as React.CSSProperties;
+
+ controls.currentLength += (height + padding) * 1.5;
+
+ return (
+ <decor.component
+ key={i}
+ makeColor={makeColorBrush()}
+ style={style}
+ className={`absolute opacity-10 w-[calc(var(--width)_*_var(--width-mulitplier))] top-[var(--length)] [--width:10rem] md:[--width:6rem] motion-safe:transition-all ${side ? "left-0 -scale-100" : "right-0"}`}
+ />
+ );
+ });
+ }, [isSafe]);
+
+ return (
+ <div className="absolute inset-0 overflow-hidden">
+ {isSafe && <>
+ {renderedGraphs}
+ </>}
+ </div>
+ );
+};
+
+export default React.memo(GraphDecor);
\ No newline at end of file
diff --git a/src/components/navigation/Header.tsx b/src/components/layout/Header.tsx
similarity index 83%
rename from src/components/navigation/Header.tsx
rename to src/components/layout/Header.tsx
index 8dd35ca..a0c0de1 100644
--- a/src/components/navigation/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -2,9 +2,9 @@ import { useRef, useState } from "react";
import { useRouter } from "next/router";
import Bars3Icon from "@heroicons/react/24/solid/Bars3Icon";
-import Logo from "@/assets/images/brand/logo-200x200.webp";
+import Logo from "@/assets/images/brand/logo.svg";
-import Link from "./Link";
+import Link from "../controls/Link";
import Button from "../controls/Button";
import NavLink from "./NavLink";
import useOutsideClick from "@/hooks/useOutsideClick";
@@ -26,7 +26,7 @@ const Header = () => {
<header className="relative flex items-center w-full gap-4 p-4 transition-all md:px-8 md:gap-12">
<Link color="primary" className="flex items-center justify-center text-2xl font-bold transition-all lg:text-4xl" href="/">
<img
- className="object-contain transition-all text-[0px] w-10 h-10 lg:w-12 lg:h-12"
+ className="object-contain transition-all text-[0px] w-10 h-10 lg:w-12 lg:h-12 rotate-30"
src={Logo.src}
width={Logo.width}
height={Logo.height}
@@ -37,7 +37,7 @@ const Header = () => {
<Button
ref={buttonRef}
className="p-2 ml-auto rounded-full md:hidden"
- color="secondary"
+ color="primary"
aria-label="Expands the header"
aria-expanded={open}
aria-controls="header-items"
@@ -51,7 +51,7 @@ const Header = () => {
</Button>
<div
ref={itemsContainerRef}
- className="absolute flex flex-col bg-fill gap-0 p-4 top-full inset-x-4 rounded-md border-2 border-primary z-10 data-[expanded='false']:hidden md:data-[expanded='false']:flex md:flex-row md:items-center md:p-0 md:border-none md:static md:bg-transparent md:gap-12"
+ className="absolute flex flex-col bg-cr-fill gap-0 p-4 top-full inset-x-4 rounded-2xl border-2 border-cr-primary z-10 data-[expanded='false']:hidden md:data-[expanded='false']:flex md:flex-row md:items-center md:p-0 md:border-none md:static md:bg-transparent md:gap-12"
id="header-items"
data-expanded={open}
>
diff --git a/src/components/navigation/NavDropdown.tsx b/src/components/layout/NavDropdown.tsx
similarity index 90%
rename from src/components/navigation/NavDropdown.tsx
rename to src/components/layout/NavDropdown.tsx
index 9e0de3a..f092de9 100644
--- a/src/components/navigation/NavDropdown.tsx
+++ b/src/components/layout/NavDropdown.tsx
@@ -3,7 +3,7 @@ import { twMerge } from "tailwind-merge";
import ChevronDownIcon from "@heroicons/react/24/solid/ChevronDownIcon";
import { style as navlinkStyle } from "./NavLink";
-import { style as linkStyle } from "./Link";
+import { style as linkStyle } from "../controls/Link";
import useOutsideClick from "@/hooks/useOutsideClick";
import useHover from "@/hooks/useHover";
@@ -56,7 +56,7 @@ const NavDropdown = ({ summary, children }: NavDropdownProps) => {
height="1em"
/>
</summary>
- <div ref={containerRef} className="absolute inset-x-0 flex flex-col gap-2 px-4 py-2 bg-white border-2 rounded-lg group/dropdown border-primary md:w-fit" data-in-group>
+ <div ref={containerRef} className="absolute inset-x-0 flex flex-col gap-2 px-4 py-2 border-2 rounded-2xl bg-cr-fill text-cr-fill-contrast group/dropdown border-cr-primary md:w-fit" data-in-group>
{children}
</div>
</details>
diff --git a/src/components/navigation/NavLink.tsx b/src/components/layout/NavLink.tsx
similarity index 88%
rename from src/components/navigation/NavLink.tsx
rename to src/components/layout/NavLink.tsx
index 0f1e54d..c27c133 100644
--- a/src/components/navigation/NavLink.tsx
+++ b/src/components/layout/NavLink.tsx
@@ -1,6 +1,6 @@
import { cva } from "class-variance-authority";
import { ReactNode } from "react";
-import Link from "./Link";
+import Link from "../controls/Link";
export interface NavLinkProps {
href: string,
@@ -10,7 +10,7 @@ export interface NavLinkProps {
export const style = cva(`
text-lg font-bold py-2
- aria-[current='page']:text-primary-light
+ aria-[current='page']:text-cr-primary-light
group-data-[in-group='true']/dropdown:text-base group-data-[in-group='true']/dropdown:py-0
`);
diff --git a/src/components/pages/about/Member.tsx b/src/components/pages/about/Member.tsx
index f98647b..bfcdcf4 100644
--- a/src/components/pages/about/Member.tsx
+++ b/src/components/pages/about/Member.tsx
@@ -3,7 +3,7 @@ import LinkButton from "@/components/controls/LinkButton";
const Member = ({ image, fullName, title, links }: IMember) => (
<li
- className="flex flex-col items-center w-full max-w-full gap-2 p-4 border-2 rounded-md border-primary-light motion-safe:transition-all sm:p-6 md:w-fit"
+ className="flex flex-col items-center w-full max-w-full gap-2 p-4 border-2 rounded-2xl border-cr-primary image-star motion-safe:transition-all sm:p-6 md:w-fit"
aria-label="Member"
>
<div className="flex flex-col items-center max-w-full gap-2 sm:flex-row md:flex-col">
@@ -16,8 +16,8 @@ const Member = ({ image, fullName, title, links }: IMember) => (
height={image.height}
/>
<div className="flex flex-col max-w-full gap-2 py-4 text-center w-72">
- <p className="text-2xl font-semibold text-secondary" aria-label="Name">{fullName}</p>
- <p className="font-semibold text-secondary" aria-label="Title / Role">{title}</p>
+ <p className="text-2xl font-semibold text-cr-primary" aria-label="Name">{fullName}</p>
+ <p className="font-semibold text-cr-primary" aria-label="Title / Role">{title}</p>
</div>
</div>
<div className="grid w-full grid-cols-1 gap-2 sm:grid-cols-2" aria-label="Links">
@@ -25,7 +25,7 @@ const Member = ({ image, fullName, title, links }: IMember) => (
<LinkButton
key={i}
href={link.href}
- color="secondary"
+ color="primary"
aria-label="Link"
>
{link.name}
diff --git a/src/components/pages/about/Project.tsx b/src/components/pages/about/Project.tsx
index 28f9edf..1dc38cd 100644
--- a/src/components/pages/about/Project.tsx
+++ b/src/components/pages/about/Project.tsx
@@ -10,13 +10,13 @@ export interface ProjectProps extends IProject {
const Project = ({ title, description, thumbnail, thumbnailAlt, href, linkText, linkRel }: ProjectProps) => {
const onImageClick = useCallback(async () => {
- const { modal } = await import("@/utils/swal");
+ const { default: modal } = await import("@/utils/alerts/modal");
modal.fire({
title: thumbnailAlt,
html: <>
<img
- className="object-contain w-full h-full rounded-lg aspect-video"
+ className="object-contain w-full h-full rounded-2xl aspect-video"
alt={thumbnailAlt}
src={thumbnail.src}
width={thumbnail.width}
@@ -32,12 +32,12 @@ const Project = ({ title, description, thumbnail, thumbnailAlt, href, linkText,
return (
<li className="flex flex-col gap-4 w-96">
- <p className="text-xl font-semibold text-center text-primary">
+ <p className="text-xl font-semibold text-center text-cr-primary">
{title}
</p>
<button onClick={onImageClick}>
<img
- className="border-2 rounded-lg aspect-video border-primary"
+ className="border-2 rounded-2xl aspect-video border-cr-primary"
alt={thumbnailAlt}
src={thumbnail.src}
width={thumbnail.width}
@@ -47,7 +47,7 @@ const Project = ({ title, description, thumbnail, thumbnailAlt, href, linkText,
<div className="flex flex-col gap-4">
{description}
</div>
- <LinkButton color="secondary" href={href} className="mt-auto" rel={linkRel}>
+ <LinkButton color="primary" href={href} className="mt-auto" rel={linkRel}>
{linkText ?? "Visit"}
</LinkButton>
</li>
diff --git a/src/components/pages/blog/ArticleBrief.tsx b/src/components/pages/blog/ArticleBrief.tsx
index e984dc9..6efced9 100644
--- a/src/components/pages/blog/ArticleBrief.tsx
+++ b/src/components/pages/blog/ArticleBrief.tsx
@@ -4,7 +4,7 @@ import BookIcon from "@heroicons/react/24/outline/BookOpenIcon";
import { motion, Variants } from "framer-motion";
import LinkButton from "@/components/controls/LinkButton";
-import Link from "@/components/navigation/Link";
+import Link from "@/components/controls/Link";
import useSSGSafe from "@/hooks/useSSGSafe";
@@ -12,7 +12,7 @@ import IArticle from "@/assets/state/articles/article";
import makeTagUrl from "./utils/makeTagUrl";
import { readtimeFormatter } from "@/utils/readtime";
-const listAnim = {
+const LIST_ANIM = {
in: {
opacity: 0,
scale: 0.5,
@@ -21,14 +21,14 @@ const listAnim = {
opacity: 1,
scale: 1,
transition: {
- duration: 0.35
+ duration: 0.25
}
},
exit: {
opacity: 0,
scale: 0.5,
transition: {
- duration: 0.35
+ duration: 0.25
}
}
} as Variants;
@@ -50,16 +50,16 @@ const ArticleBrief = ({ title, thumbnail, thumbnailAlt, imgLoading, readtime, te
return (
<motion.li
- className="origin-center flex flex-col flex-1 gap-4 mx-0 rounded-lg motion-safe:transition-[margin-inline] motion-safe:duration-500 sm:mx-16 md:mx-0 bg-primary-300"
- variants={listAnim}
+ className="origin-center flex flex-col flex-1 gap-4 mx-0 rounded-2xl motion-safe:transition-[margin-inline] motion-safe:duration-500 sm:mx-16 md:mx-0 image-star border-2 border-cr-primary overflow-hidden"
+ variants={LIST_ANIM}
initial="in"
animate="anim"
exit="exit"
layout
>
- <NextLink href={url} className="group/link aspect-[16/7] rounded-lg overflow-hidden" >
+ <NextLink href={url} className="group/link aspect-[16/7] overflow-hidden" >
<img
- className="aspect-[16/7] object-contain rounded-lg transition-transform group-hover/link:scale-105"
+ className="aspect-[16/7] object-contain transition-transform group-hover/link:scale-105"
loading={imgLoading}
src={thumbnail.src}
width={thumbnail.width}
@@ -73,8 +73,8 @@ const ArticleBrief = ({ title, thumbnail, thumbnailAlt, imgLoading, readtime, te
!hidden && <li key={i}>
<LinkButton
href={makeTagUrl(name)}
- color="secondary"
- className="px-2 py-1 text-xs font-semibold border"
+ color="primary"
+ className="px-2 py-1 text-xs font-semibold"
prefetch={false}
>
{name}
diff --git a/src/components/pages/blog/post/ArticleComponents.tsx b/src/components/pages/blog/post/ArticleComponents.tsx
index 8fcc396..81e0cb7 100644
--- a/src/components/pages/blog/post/ArticleComponents.tsx
+++ b/src/components/pages/blog/post/ArticleComponents.tsx
@@ -1,10 +1,11 @@
import List from "@/components/content/List";
-import Heading from "@/components/layout/Heading";
-import Link from "@/components/navigation/Link";
+import Heading, { makeHeading } from "@/components/content/Heading";
+import Link from "@/components/controls/Link";
import ArticleTableOfContent from "./ArticleTableOfContent";
import React, { useMemo } from "react";
import { twMerge } from "tailwind-merge";
+import Code from "@/components/content/CodeBlock";
const A = {
/** Wrapped `ol`/`ul` */
Ls: List,
@@ -32,14 +33,20 @@ const A = {
Img: ({ className, loading = "lazy", ...props }: React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>) => {
const computedClassName = useMemo(
- () => twMerge("rounded-lg", className),
+ () => twMerge("rounded-2xl", className),
[className]
);
return <img {...props} className={computedClassName} loading={loading} />;
},
- ...Heading,
+ Code: ((props) => <Code {...props} allowSSR={true} />) as typeof Code,
+
+ H2: makeHeading(2, "text-4xl font-bold"),
+ H3: makeHeading(3, "text-3xl font-bold"),
+ H4: makeHeading(4, "text-2xl font-semibold"),
+ H5: makeHeading(5, "text-xl font-semibold"),
+ H6: makeHeading(6, "text-lg font-semibold"),
};
export default A;
\ No newline at end of file
diff --git a/src/components/pages/blog/post/ArticleMeta.tsx b/src/components/pages/blog/post/ArticleMeta.tsx
index e29cdee..5b7895c 100644
--- a/src/components/pages/blog/post/ArticleMeta.tsx
+++ b/src/components/pages/blog/post/ArticleMeta.tsx
@@ -6,7 +6,7 @@ import { IMember } from "@/assets/state/team";
import useSSGSafe from "@/hooks/useSSGSafe";
-import Link from "@/components/navigation/Link";
+import Link from "@/components/controls/Link";
import { readtimeFormatter } from "@/utils/readtime";
export interface ArticleMetaProps {
@@ -28,7 +28,6 @@ const ArticleMeta = ({ author, readtime, created, updated }: ArticleMetaProps) =
className="flex items-center gap-2 group/writer"
//@ts-ignore
href={author.links.length > 0 ? author.links[0].href : undefined}
- //@ts-ignore
color={author.links.length > 0 ? "fill-contrast" : undefined}
data-is-link={author.links.length > 0}
>
diff --git a/src/components/pages/blog/post/ArticleTableOfContent.tsx b/src/components/pages/blog/post/ArticleTableOfContent.tsx
index 88c79a5..12f7bf7 100644
--- a/src/components/pages/blog/post/ArticleTableOfContent.tsx
+++ b/src/components/pages/blog/post/ArticleTableOfContent.tsx
@@ -1,7 +1,7 @@
import React, { ReactNode } from "react";
import PlayIcon from "@heroicons/react/24/solid/PlayIcon";
-import Link from "@/components/navigation/Link";
+import Link from "@/components/controls/Link";
import { Heading, useArticle } from "./ArticleContext";
@@ -56,11 +56,11 @@ const renderHierarchy = (hierarchy: HeadingHierarchy, config: RenderHierarchyCon
url.hash = hierarchy.id;
return <li key={`${hierarchy.level}-${index}`}>
- <p className="flex items-center gap-2">
+ <span className="flex items-center gap-2">
<PlayIcon
width=".6em"
height=".6em"
- className="text-primary"
+ className="text-"
/>
<Link
color="primary"
@@ -69,7 +69,7 @@ const renderHierarchy = (hierarchy: HeadingHierarchy, config: RenderHierarchyCon
>
{hierarchy.text}
</Link>
- </p>
+ </span>
{hierarchy.children.length > 0 && <ul className="ml-8">
{hierarchy.children.map((child, i) => renderHierarchy(child, config, i))}
</ul>}
diff --git a/src/components/pages/contribute/FeedbackSection.tsx b/src/components/pages/contribute/FeedbackSection.tsx
index 0e3ddf8..35dbde4 100644
--- a/src/components/pages/contribute/FeedbackSection.tsx
+++ b/src/components/pages/contribute/FeedbackSection.tsx
@@ -6,14 +6,13 @@ import { z } from "zod";
import { BackendResponse } from "@/api/models/Response";
import Button from "@/components/controls/Button";
import Error from "@/components/controls/Error";
-import Link from "@/components/navigation/Link";
-import { backend } from "@/utils/wretch";
+import Link from "@/components/controls/Link";
+import backend from "@/lib/fetch/backend";
import TextArea from "@/components/controls/TextArea";
import Form from "@/components/controls/Form";
-import Heading from "@/components/layout/Heading";
+import Heading from "@/components/content/Heading";
import Label from "@/components/controls/Label";
import useFormMutation from "@/hooks/useMutation";
-import { event } from "nextjs-google-analytics";
import { sendFeedbackEvent } from "@/api/analytics";
const feedbackSchema = z.object({
@@ -45,16 +44,12 @@ const FeedbackSection = () => {
aria-labelledby="feedback"
className="flex flex-col w-full gap-4 mx-auto text-center max-w-7xl"
>
- <Heading.H2
- id="feedback"
- className="text-4xl font-bold md:text-5xl text-secondary"
- >
+ <Heading.H2 id="feedback">
Feedback
</Heading.H2>
<p>
We welcome your input and ideas!
- Feel free to share your feedback and suggestions with us through our anonymous feedback form. <br />
- You can also reach out to us via email at <Link color="primary" href="mailto:feedback@commitrocket.com" underline>feedback@commitrocket.com</Link>.
+ Feel free to share your feedback and suggestions with us through our anonymous feedback form.
</p>
<Form
aria-label="feedback-inbox"
@@ -65,7 +60,7 @@ const FeedbackSection = () => {
oneTime
>
<div className="w-full">
- <Label htmlFor="message-input" className="text-start text-primary">
+ <Label htmlFor="message-input" className="text-start text-cr-primary">
Your Message:
</Label>
<TextArea
@@ -78,7 +73,7 @@ const FeedbackSection = () => {
/>
</div>
<Error className="w-full px-2 text-start" state={formState} name="text" />
- <Button type="submit" color="secondary" loading={loading} className="px-5 py-3 text-lg w-full md:text-xl sm:w-fit">
+ <Button type="submit" color="primary" loading={loading} className="w-full px-5 py-3 text-lg md:text-xl sm:w-fit">
Submit Feedback
</Button>
</Form>
diff --git a/src/components/pages/front/Mission.tsx b/src/components/pages/front/Mission.tsx
index 9bee591..3052566 100644
--- a/src/components/pages/front/Mission.tsx
+++ b/src/components/pages/front/Mission.tsx
@@ -1,5 +1,5 @@
import { IMission } from "@/assets/state/missions";
-import Heading from "@/components/layout/Heading";
+import Heading from "@/components/content/Heading";
export interface MissionProps extends IMission {
@@ -7,8 +7,8 @@ export interface MissionProps extends IMission {
const Mission = ({ title, image, imageAlt, text }: MissionProps) => {
return (
- <li className="flex flex-col items-center flex-1 gap-4 p-0 -mx-4 rounded-lg border-secondary motion-safe:transition-[margin_padding_border] sm:mx-0 lg:p-4 lg:border-2 xl:p-8">
- <Heading.H3 className="text-primary lg:h-[5ex] motion-safe:transition-all">
+ <li className="flex flex-col items-center flex-1 gap-4 p-8 -mx-4 rounded-2xl border-cr-primary image-star motion-safe:transition-[margin_padding_border] sm:mx-0 border-2">
+ <Heading.H3 className="lg:h-[5ex] motion-safe:transition-all">
{title}
</Heading.H3>
<img
diff --git a/src/components/pages/front/RoadmapItem.tsx b/src/components/pages/front/RoadmapItem.tsx
index ec90ebe..ad03718 100644
--- a/src/components/pages/front/RoadmapItem.tsx
+++ b/src/components/pages/front/RoadmapItem.tsx
@@ -1,13 +1,13 @@
import { IRoadmapItem } from "@/assets/state/roadmap";
-import Heading from "@/components/layout/Heading";
+import Heading from "@/components/content/Heading";
export interface RoadmapItemProps extends IRoadmapItem {
}
const Divider = ({ hideOnSmall }: { hideOnSmall?: boolean; }) => (
- <div className={`relative w-[2px] bg-primary mx-3 group-first-of-type/item:rounded-t-full group-last-of-type/item:rounded-b-full ${hideOnSmall ? "hidden md:block" : "block md:hidden"}`} aria-hidden>
- <div className="absolute w-6 h-6 -translate-x-1/2 -translate-y-1/2 border-2 rounded-full top-1/2 left-1/2 border-primary bg-fill" />
+ <div className={`relative w-[2px] bg-cr-primary mx-3 group-first-of-type/item:rounded-t-full group-last-of-type/item:rounded-b-full ${hideOnSmall ? "hidden md:block" : "block md:hidden"}`} aria-hidden>
+ <div className="absolute w-6 h-6 -translate-x-1/2 -translate-y-1/2 border-2 rounded-full top-1/2 left-1/2 border-cr-primary bg-cr-fill" />
</div>
);
@@ -17,7 +17,7 @@ const RoadmapItem = ({ title, text }: RoadmapItemProps) => {
<li aria-labelledby={id} className="relative flex flex-1 group/item">
<Divider />
<div className="relative flex flex-col flex-1 gap-4 py-4 pl-4 md:flex-row md:pl-0 md:py-0 md:gap-0">
- <Heading.H3 id={id} className="flex items-center md:px-8 md:w-1/4 md:py-4 md:justify-end md:text-end">
+ <Heading.H3 id={id} className="flex items-center md:px-8 md:w-1/4 md:py-4 md:justify-end md:text-end text-cr-primary-light">
{title}
</Heading.H3>
<Divider hideOnSmall />
diff --git a/src/components/pages/front/SignupSection.tsx b/src/components/pages/front/SignupSection.tsx
index 8dc8120..19b7407 100644
--- a/src/components/pages/front/SignupSection.tsx
+++ b/src/components/pages/front/SignupSection.tsx
@@ -7,12 +7,12 @@ import { BackendResponse } from "@/api/models/Response";
import perks from "@/assets/state/perks";
import Button from "@/components/controls/Button";
import Error from "@/components/controls/Error";
-import Link from "@/components/navigation/Link";
+import Link from "@/components/controls/Link";
import Input from "@/components/controls/Input";
import Form from "@/components/controls/Form";
-import Heading from "@/components/layout/Heading";
+import Heading from "@/components/content/Heading";
-import { backend } from "@/utils/wretch";
+import backend from "@/lib/fetch/backend";
import useFormMutation from "@/hooks/useMutation";
import { sendSubscribeEvent } from "@/api/analytics";
import Label from "@/components/controls/Label";
@@ -44,12 +44,8 @@ const SignupSection = () => {
aria-labelledby="sign-up"
className="flex flex-col gap-12 mx-auto text-center max-w-7xl"
>
- <Heading.H2
- id="sign-up"
- className="text-secondary"
- >
- Keep Up to Date <br />
- Join Our Mailing List
+ <Heading.H2 id="sign-up">
+ Keep Up to Date
</Heading.H2>
<p className="text-xl">
Do you want to join in on this adventure and help develop Commit Rocket?
@@ -61,7 +57,7 @@ const SignupSection = () => {
{perks.map(({ title, icon: Icon }, i) => (
<li key={i} className="flex flex-col items-center w-32 gap-2">
<Icon
- className="w-12 h-12 sm:w-16 sm:h-16 text-primary"
+ className="w-12 h-12 sm:w-16 sm:h-16 text-cr-primary"
width="1em"
height="1em"
/>
@@ -78,22 +74,22 @@ const SignupSection = () => {
oneTime
>
<div className="w-full">
- <Label htmlFor="signup-email-input" className="text-primary ml-7">
+ <Label htmlFor="signup-email-input" className="text-cr-primary">
Email:
</Label>
<Input
id="signup-email-input"
color="primary"
- className="w-full text-lg md:text-xl p-4"
+ className="w-full p-4 text-lg md:text-xl"
placeholder="your@email.com"
{...register("email")}
/>
<Error className="w-full px-2 text-start" state={formState} name="email" />
</div>
<Button
- className="relative px-5 py-3 text-lg w-full sm:w-fit md:text-xl"
+ className="relative w-full px-5 py-3 text-lg sm:w-fit md:text-xl"
type="submit"
- color="secondary"
+ color="primary"
loading={loading}
>
Keep me up-to-date!
diff --git a/src/hooks/useCodeHighlight.ts b/src/hooks/useCodeHighlight.ts
new file mode 100644
index 0000000..46ebdad
--- /dev/null
+++ b/src/hooks/useCodeHighlight.ts
@@ -0,0 +1,101 @@
+import { useEffect, useMemo, useState } from "react";
+import Prism from "prismjs";
+import { isSSR } from "@/utils/ssr";
+
+export type SupportedLanguages = "bash" | "js" | "html" | "css";
+
+interface Options {
+ lang: SupportedLanguages;
+ code: string | string[];
+ markedLines?: (number | [number, number])[];
+ allowSSR?: boolean;
+}
+
+export interface CodeLine {
+ original: string;
+ html: string;
+}
+
+const langToCategory = {
+ bash: "bash",
+ css: "css",
+ js: "javascript",
+ html: "markup"
+} as Record<SupportedLanguages, string>;
+
+const rangeToNumArray = (mark: number | [number, number]) => {
+ if (typeof mark === "number") return mark;
+ const [start, end] = mark;
+ const length = end - start;
+
+ return Array(length).fill(0).map((_, i) => start + i);
+};
+
+const useCodeHightlight = ({ lang, code, markedLines, allowSSR }: Options) => {
+
+ const [isLanguageLoaded, setIsLanguageLoaded] = useState<boolean>(isSSR);
+
+ useEffect(() => {
+ setIsLanguageLoaded(isSSR);
+
+ if (!isSSR) {
+ const fetchState = { langChanged: false };
+ import(`prismjs/components/prism-${langToCategory[lang]}`)
+ .then(() => {
+ if (!fetchState.langChanged) setIsLanguageLoaded(true);
+ });
+
+ return () => {
+ fetchState.langChanged = true;
+ };
+ }
+
+ }, [lang]);
+
+ const codeLines = useMemo<CodeLine[]>(() => {
+ let codeToRender = Array.isArray(code) ? code.join("\n") : code;
+
+ // Normalize whitespace
+ const startingWhitespace = codeToRender.match(/^\s+/)?.[0]?.replace("\n", "");
+
+ if (startingWhitespace) {
+ const normalizeWhitespaceRegex = new RegExp(`(?<=\n)[^\S\n]{${startingWhitespace.length}}(?!\n)`, "g");
+ codeToRender = codeToRender.replace(normalizeWhitespaceRegex, "");
+ }
+
+ codeToRender = codeToRender.trim();
+
+ const originalLines = codeToRender.split("\n");
+
+
+ if (!isLanguageLoaded || (!allowSSR && isSSR)) {
+ return originalLines.map((line) => ({ html: line, original: line }));
+ }
+
+ if (isSSR) {
+ require(`prismjs/components/prism-${langToCategory[lang]}`);
+ }
+
+ const renderedLines = Prism.highlight(codeToRender, Prism.languages[lang], lang).split("\n");
+
+ const _codeLines: CodeLine[] = Array(renderedLines.length);
+
+ for (let index = 0; index < renderedLines.length; index++) {
+ _codeLines[index] = {
+ html: renderedLines[index],
+ original: originalLines[index]
+ };
+ }
+
+ return _codeLines;
+ }, [isLanguageLoaded, allowSSR, lang, code]);
+
+ const computedMarkedLines = useMemo<number[]>(() => {
+ if (!markedLines) return [];
+ return markedLines.map(rangeToNumArray).flat();
+ }, [markedLines]);
+
+ return [codeLines, computedMarkedLines] as const;
+};
+
+export default useCodeHightlight;
\ No newline at end of file
diff --git a/src/utils/wretch.tsx b/src/lib/fetch/backend.tsx
similarity index 61%
rename from src/utils/wretch.tsx
rename to src/lib/fetch/backend.tsx
index be4a229..d5f70bc 100644
--- a/src/utils/wretch.tsx
+++ b/src/lib/fetch/backend.tsx
@@ -1,11 +1,11 @@
import wretch from "wretch";
-export const backend = wretch(process.env.NEXT_PUBLIC_BACKEND_URL!)
+const backend = wretch(process.env.NEXT_PUBLIC_BACKEND_URL!)
.options({
mode: "cors"
})
.catcher(404, async () => {
- const { toast } = await import("./swal");
+ const { default: toast } = await import("../../utils/alerts/toast");
toast.fire({
title: "Error",
icon: "error",
@@ -13,7 +13,7 @@ export const backend = wretch(process.env.NEXT_PUBLIC_BACKEND_URL!)
});
})
.catcher(500, async () => {
- const { toast } = await import("./swal");
+ const { default: toast } = await import("../../utils/alerts/toast");
toast.fire({
title: "Error",
icon: "error",
@@ -21,10 +21,12 @@ export const backend = wretch(process.env.NEXT_PUBLIC_BACKEND_URL!)
});
})
.catcher(400, async () => {
- const { toast } = await import("./swal");
+ const { default: toast } = await import("../../utils/alerts/toast");
toast.fire({
title: "Error",
icon: "error",
text: "Bad request."
});
- });
\ No newline at end of file
+ });
+
+export default backend;
\ No newline at end of file
diff --git a/src/utils/meta/opengraph/article.ts b/src/lib/meta/opengraph/article.ts
similarity index 100%
rename from src/utils/meta/opengraph/article.ts
rename to src/lib/meta/opengraph/article.ts
diff --git a/src/utils/meta/opengraph/base.tsx b/src/lib/meta/opengraph/base.tsx
similarity index 100%
rename from src/utils/meta/opengraph/base.tsx
rename to src/lib/meta/opengraph/base.tsx
diff --git a/src/utils/meta/opengraph/image.ts b/src/lib/meta/opengraph/image.ts
similarity index 100%
rename from src/utils/meta/opengraph/image.ts
rename to src/lib/meta/opengraph/image.ts
diff --git a/src/utils/meta/opengraph/index.tsx b/src/lib/meta/opengraph/index.tsx
similarity index 100%
rename from src/utils/meta/opengraph/index.tsx
rename to src/lib/meta/opengraph/index.tsx
diff --git a/src/utils/meta/opengraph/profile.ts b/src/lib/meta/opengraph/profile.ts
similarity index 100%
rename from src/utils/meta/opengraph/profile.ts
rename to src/lib/meta/opengraph/profile.ts
diff --git a/src/utils/meta/opengraph/toOpenGraph.tsx b/src/lib/meta/opengraph/toOpenGraph.tsx
similarity index 100%
rename from src/utils/meta/opengraph/toOpenGraph.tsx
rename to src/lib/meta/opengraph/toOpenGraph.tsx
diff --git a/src/utils/meta/sitemap.tsx b/src/lib/meta/sitemap.tsx
similarity index 98%
rename from src/utils/meta/sitemap.tsx
rename to src/lib/meta/sitemap.tsx
index c0ad1c1..a171ad2 100644
--- a/src/utils/meta/sitemap.tsx
+++ b/src/lib/meta/sitemap.tsx
@@ -60,4 +60,6 @@ export const makeSitemapMeta = ({ changeFreq, lastMod, priority = 0.5 }: Options
content={String(priority)}
/>
];
-};
\ No newline at end of file
+};
+
+export default makeSitemapMeta;
\ No newline at end of file
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index c2007cd..e6289a9 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -6,10 +6,10 @@ import HomeModernIcon from "@heroicons/react/24/solid/HomeModernIcon";
import { Page } from "@/types/page";
import LinkButton from "@/components/controls/LinkButton";
import Button from "@/components/controls/Button";
-import Heading from "@/components/layout/Heading";
+import Heading from "@/components/content/Heading";
-import { makeOgMeta } from "@/utils/meta/opengraph";
-import { makeSitemapMeta } from "@/utils/meta/sitemap";
+import { makeOgMeta } from "@/lib/meta/opengraph";
+import makeSitemapMeta from "@/lib/meta/sitemap";
import KeywordsMeta from "@/components/head/KeywordsMeta";
const NotFound: Page = ({ pathname }) => {
@@ -26,13 +26,13 @@ const NotFound: Page = ({ pathname }) => {
]} />
</Head>
<main className="flex items-center justify-center flex-1 w-full pb-8" aria-labelledby="not-found">
- <div className="flex flex-col gap-2 p-8 text-center border-2 rounded-md border-primary">
- <Heading.H1 id="not-found" className="text-secondary">
+ <div className="flex flex-col gap-2 p-8 text-center border-2 rounded-2xl image-star border-cr-primary">
+ <Heading.H1 id="not-found">
Not Found.
</Heading.H1>
<p>There are no commits to be found here!</p>
<div className="grid grid-cols-2 gap-2 mt-4">
- <LinkButton href="/" color="secondary">
+ <LinkButton href="/" color="primary">
<HomeModernIcon
className="w-4 h-4"
width="1em"
@@ -40,7 +40,7 @@ const NotFound: Page = ({ pathname }) => {
/>
Home
</LinkButton>
- <Button onClick={() => router.back()} color="secondary">
+ <Button onClick={() => router.back()} color="primary">
<ArrowUturnLeftIcon
className="w-4 h-4"
width="1em"
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index e77be67..270c8a9 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -5,15 +5,16 @@ import { motion, useReducedMotion, MotionConfig, AnimatePresence } from "framer-
import type { AppProps } from 'next/app';
import Head from "next/head";
-import Header from "@/components/navigation/Header";
-import Footer from "@/components/navigation/Footer";
+import Header from "@/components/layout/Header";
+import Footer from "@/components/layout/Footer";
import GoogleAnalytics from "@/components/analytics/GoogleAnalytics";
import KeywordsMeta from "@/components/head/KeywordsMeta";
-import BannerImage from "@/assets/images/brand/commit-rocket-logo.webp";
+import BannerImage from "@/assets/images/brand/rocket-with-graph.svg";
-import { makeOgMeta } from "@/utils/meta/opengraph";
-import { makeSitemapMeta } from "@/utils/meta/sitemap";
+import { makeOgMeta } from "@/lib/meta/opengraph";
+import makeSitemapMeta from "@/lib/meta/sitemap";
+import GraphDecor from "@/components/layout/GraphDecor";
const pageTransition = {
@@ -79,12 +80,13 @@ export default function App({ Component, pageProps, router }: AppProps) {
<KeywordsMeta />
</Head>
<GoogleAnalytics />
+ <GraphDecor />
<div className="flex flex-col font-sans">
<Header />
<AnimatePresence mode="wait" onExitComplete={onAnimFinished}>
<motion.div
key={router.pathname}
- className="flex flex-col items-center flex-1 w-full px-8"
+ className="flex flex-col items-center flex-1 w-full p-8 pb-0"
initial="initial"
animate="animate"
exit="exit"
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
index c45462a..340489f 100644
--- a/src/pages/about.tsx
+++ b/src/pages/about.tsx
@@ -5,11 +5,11 @@ import Member from "@/components/pages/about/Member";
import { Page } from "@/types/page";
import projects from "@/assets/state/projects";
-import Heading from "@/components/layout/Heading";
+import Heading from "@/components/content/Heading";
import Project from "@/components/pages/about/Project";
import KeywordsMeta from "@/components/head/KeywordsMeta";
-import { makeOgMeta } from "@/utils/meta/opengraph";
+import { makeOgMeta } from "@/lib/meta/opengraph";
const AboutPage: Page = ({ pathname }) => {
return (
@@ -22,13 +22,13 @@ const AboutPage: Page = ({ pathname }) => {
]} />
</Head>
<main aria-labelledby="about" className="flex flex-col flex-1 w-full gap-8 pb-8 max-w-7xl">
- <Heading.H1 id="about" className="text-center text-secondary">
+ <Heading.H1 id="about" className="text-center">
About
</Heading.H1>
<section aria-labelledby="our-team" className="flex flex-col gap-8">
<Heading.H2
id="our-team"
- className="text-center text-secondary"
+ className="text-center"
>
Team
</Heading.H2>
@@ -44,7 +44,7 @@ const AboutPage: Page = ({ pathname }) => {
<section aria-labelledby="projects" className="flex flex-col gap-8">
<Heading.H2
id="projects"
- className="text-center text-secondary"
+ className="text-center"
>
Projects
</Heading.H2>
diff --git a/src/pages/blog/[pid]/[slug].tsx b/src/pages/blog/[pid]/[slug].tsx
index da5cd0b..5d308bc 100644
--- a/src/pages/blog/[pid]/[slug].tsx
+++ b/src/pages/blog/[pid]/[slug].tsx
@@ -1,20 +1,21 @@
import Head from "next/head";
import { GetStaticPaths, GetStaticProps } from "next";
-
import { Page } from "@/types/page";
import IArticle from "@/assets/state/articles/article";
+import makeSitemapMeta from "@/lib/meta/sitemap";
+import { makeArticleOgMeta, makeOgMeta } from "@/lib/meta/opengraph";
import { calculateReadtime } from "@/utils/readtime";
-import Heading from "@/components/layout/Heading";
+import Heading from "@/components/content/Heading";
import KeywordsMeta from "@/components/head/KeywordsMeta";
-import { makeArticleOgMeta, makeOgMeta } from "@/utils/meta/opengraph";
import LinkButton from "@/components/controls/LinkButton";
import makeTagUrl from "@/components/pages/blog/utils/makeTagUrl";
import ArticleMeta from "@/components/pages/blog/post/ArticleMeta";
+
import { makeStaticContent } from "@/components/pages/blog/utils/makeStaticContent";
-import { makeSitemapMeta } from "@/utils/meta/sitemap";
+import CodeBlockHydrator from "@/components/content/CodeBlock/CodeBlockHydrator";
type ComputedArticle = {
path: string;
@@ -64,12 +65,12 @@ const BlogPostPage: Page<BlogPostPageProps> = ({ article: { author, tags, thumbn
...tags.map((t) => t.name)
]} />
</Head>
- <main>
- <article aria-describedby="article-title" className="flex flex-col gap-8 max-w-4xl w-full items-center">
+ <main className="w-full max-w-4xl">
+ <article aria-describedby="article-title" className="flex flex-col gap-8 w-full items-center">
<section aria-label="Main article content" className="flex flex-col gap-8 w-full items-center">
<img
aria-label="Article Thumbnail"
- className="rounded-lg"
+ className="rounded-2xl"
loading="eager"
src={thumbnail.src}
width={thumbnail.width}
@@ -85,19 +86,21 @@ const BlogPostPage: Page<BlogPostPageProps> = ({ article: { author, tags, thumbn
created={article.created}
updated={article.updated}
/>
- <div
- id="article-content"
- className="flex flex-col text-lg text-start w-full gap-8"
- dangerouslySetInnerHTML={{ __html: article.content }}
- />
+ <CodeBlockHydrator>
+ <div
+ id="article-content"
+ className="flex flex-col text-lg text-start w-full gap-8"
+ dangerouslySetInnerHTML={{ __html: article.content }}
+ />
+ </CodeBlockHydrator>
</section>
- <section aria-labelledby="article-tags" className="w-full pt-16 border-t border-primary mt-8">
+ <section aria-labelledby="article-tags" className="w-full pt-16 border-t border-cr-primary mt-8">
<h2 id="article-tags" className="text-xs font-bold mb-2">Tags:</h2>
<ul aria-labelledby="article-tags" className="flex flex-wrap gap-1">
{tags.map(({ name, hidden }, i) => (
!hidden && <li key={i}>
<LinkButton
- color="secondary"
+ color="primary"
href={makeTagUrl(name)}
className="w-fit text-sm px-2 py-1"
>
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index c3a95c6..9abe94a 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -3,7 +3,7 @@ import { GetStaticProps } from "next";
import { useRouter } from "next/router";
import Head from "next/head";
import TagIcon from "@heroicons/react/24/solid/TagIcon";
-import { motion, AnimatePresence } from "framer-motion";
+import { motion, AnimatePresence, Variants } from "framer-motion";
import { useForm, useWatch } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
@@ -17,10 +17,10 @@ import { ControlledSelect } from "@/components/controls/Select";
import { calculateReadtime } from "@/utils/readtime";
import fadeAnim from "@/animations/fade";
-import Heading from "@/components/layout/Heading";
-import { makeOgMeta } from "@/utils/meta/opengraph";
+import Heading from "@/components/content/Heading";
+import { makeOgMeta } from "@/lib/meta/opengraph";
import Label from "@/components/controls/Label";
-import { makeSitemapMeta } from "@/utils/meta/sitemap";
+import makeSitemapMeta from "@/lib/meta/sitemap";
import KeywordsMeta from "@/components/head/KeywordsMeta";
interface BlogPageProps {
@@ -29,16 +29,16 @@ interface BlogPageProps {
const SORT_OPTIONS = [
{
- "direction": "new",
- "name": "Newest",
- "func": (a: IArticleBrief, b: IArticleBrief) => {
+ direction: 1,
+ name: "Newest",
+ func: (a: IArticleBrief, b: IArticleBrief) => {
return new Date(b.date).getTime() - new Date(a.date).getTime();
}
},
{
- "direction": "old",
- "name": "Oldest",
- "func": (a: IArticleBrief, b: IArticleBrief) => {
+ direction: 2,
+ name: "Oldest",
+ func: (a: IArticleBrief, b: IArticleBrief) => {
return new Date(a.date).getTime() - new Date(b.date).getTime();
}
}
@@ -47,12 +47,30 @@ const SORT_OPTIONS = [
const filterSchema = z.object({
search: z.string(),
sort: z.object({
- direction: z.union([z.literal("new"), z.literal("old")]),
+ direction: z.union([z.literal(1), z.literal(2)]),
name: z.string(),
func: z.function(z.tuple([z.object({}), z.object({})]), z.number())
})
});
+const NO_RESULTS_ANIM = {
+ in: {
+ opacity: 0
+ },
+ anim: {
+ opacity: 1,
+ transition: {
+ duration: 0.25
+ }
+ },
+ exit: {
+ opacity: 0,
+ transition: {
+ duration: 0.25
+ }
+ }
+} as Variants;
+
const filterSchemaResolver = zodResolver(filterSchema);
type FilterSchema = z.infer<typeof filterSchema>;
@@ -82,7 +100,7 @@ const BlogPage: Page<BlogPageProps> = ({ articles, pathname }) => {
const computedArticles = useMemo(() => (
articles
.filter((article) => (
- article.title.includes(search) &&
+ article.title.toLowerCase().includes(search.toLowerCase()) &&
tags.every((tag) => article.tags.map((t) => t.name).includes(tag))
))
.sort(sort.func)
@@ -96,31 +114,31 @@ const BlogPage: Page<BlogPageProps> = ({ articles, pathname }) => {
<KeywordsMeta tags={["Blog"]} />
</Head>
<main aria-labelledby="blog" className="flex flex-col flex-1 w-full gap-8 max-w-7xl">
- <Heading.H1 id="blog" className="text-center text-secondary">
+ <Heading.H1 id="blog" className="text-center">
Blog
</Heading.H1>
- {computedArticles.length > 0 && <>
+ {articles.length > 0 && <>
<div className="mx-0 sm:mx-16 md:mx-0 motion-safe:transition-[margin-inline] motion-safe:duration-500 flex gap-2 items-end">
<div>
- <Label htmlFor="search-input" className="text-secondary">
+ <Label htmlFor="search-input" className="text-cr-primary">
Search:
</Label>
<Input
id="search-input"
type="text"
- color="secondary"
+ color="primary"
placeholder="Search..."
{...register("search")}
/>
</div>
<div>
- <Label htmlFor="sort-input" className="text-secondary">
+ <Label htmlFor="sort-input" className="text-cr-primary">
Sort:
</Label>
<ControlledSelect
id="sort-input"
name="sort"
- color="secondary"
+ color="primary"
control={control}
options={SORT_OPTIONS}
getDisplayName={(opt) => opt.name}
@@ -136,7 +154,7 @@ const BlogPage: Page<BlogPageProps> = ({ articles, pathname }) => {
>
<LinkButton
href="/blog"
- color="secondary"
+ color="primary"
className="w-fit"
>
Clear Tags
@@ -149,13 +167,25 @@ const BlogPage: Page<BlogPageProps> = ({ articles, pathname }) => {
</motion.div>}
</AnimatePresence>
</div>
- <ul className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3" aria-label="blog articles">
+ <AnimatePresence>
+ {computedArticles.length <= 0 && <motion.p
+ role="note"
+ className="w-full text-2xl font-semibold text-center"
+ variants={NO_RESULTS_ANIM}
+ initial="in"
+ animate="anim"
+ exit="exit"
+ >
+ There are no blog posts that fit this criteria
+ </motion.p>}
+ </AnimatePresence>
+ <ul className="grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3" aria-label="blog articles">
<AnimatePresence>
{computedArticles.map((brief, i) => <ArticleBrief key={brief.url} {...brief} imgLoading={i > 3 ? "lazy" : "eager"} />)}
</AnimatePresence>
</ul>
</>}
- {computedArticles.length < 1 && <p role="note" className="text-3xl font-semibold text-center">
+ {articles.length <= 0 && <p role="note" className="text-2xl font-semibold text-center">
There are no blog posts yet! Stay tuned!
</p>}
</main>
@@ -168,7 +198,7 @@ export const getStaticProps: GetStaticProps<BlogPageProps> = async () => {
return {
props: {
- articles: await Promise.all(articles.map<Promise<IArticleBrief>>(async ({ article }, i) => {
+ articles: await Promise.all(articles.filter(({ article }) => !article.hidden).map<Promise<IArticleBrief>>(async ({ article }, i) => {
const { content, created, updated, slug, ...brief } = { ...article };
return {
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
index 83efc31..0d52696 100644
--- a/src/pages/contact.tsx
+++ b/src/pages/contact.tsx
@@ -2,9 +2,9 @@ import Head from "next/head";
import { Page } from "@/types/page";
import contactMethods from "@/assets/state/contactMethods";
-import Link, { style } from "@/components/navigation/Link";
-import Heading from "@/components/layout/Heading";
-import { makeOgMeta } from "@/utils/meta/opengraph";
+import Link, { style } from "@/components/controls/Link";
+import Heading from "@/components/content/Heading";
+import { makeOgMeta } from "@/lib/meta/opengraph";
import KeywordsMeta from "@/components/head/KeywordsMeta";
@@ -22,7 +22,7 @@ const ContactPage: Page = ({ pathname }) => {
]} />
</Head>
<main aria-labelledby="contact" className="flex flex-col flex-1 w-full gap-8 max-w-7xl">
- <Heading.H1 id="contact" className="text-center text-secondary">
+ <Heading.H1 id="contact" className="text-center">
Contact
</Heading.H1>
<ul className="grid flex-1 gap-4 lg:grid-flow-col sm:grid-cols-2 lg:grid-cols-none place-items-center" aria-label="contact methods">
diff --git a/src/pages/contribute.tsx b/src/pages/contribute.tsx
index e37201f..7760260 100644
--- a/src/pages/contribute.tsx
+++ b/src/pages/contribute.tsx
@@ -1,11 +1,11 @@
import Head from "next/head";
-import Heading from "@/components/layout/Heading";
+import Heading from "@/components/content/Heading";
import FeedbackSection from "@/components/pages/contribute/FeedbackSection";
import { Page } from "@/types/page";
-import { makeOgMeta } from "@/utils/meta/opengraph";
-import { makeSitemapMeta } from "@/utils/meta/sitemap";
+import { makeOgMeta } from "@/lib/meta/opengraph";
+import makeSitemapMeta from "@/lib/meta/sitemap";
import KeywordsMeta from "@/components/head/KeywordsMeta";
@@ -21,7 +21,7 @@ const ContributePage: Page = ({ pathname }) => {
]} />
</Head>
<main aria-labelledby="contribute" className="flex flex-col flex-1 w-full gap-8 max-w-7xl">
- <Heading.H1 id="contribute" className="text-center text-secondary">
+ <Heading.H1 id="contribute" className="text-center">
Contribute
</Heading.H1>
<FeedbackSection />
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index e2d8a01..d07855c 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,9 +1,9 @@
import Head from "next/head";
-import { motion } from "framer-motion";
+import { Variants, motion } from "framer-motion";
import missions from "@/assets/state/missions";
-import LogoPicture from "@/assets/images/brand/commit-rocket-logo.webp";
-import LogoSmall from "@/assets/images/brand/logo-200x200.webp";
+import LogoPicture from "@/assets/images/brand/rocket-with-graph.svg";
+import LogoSmall from "@/assets/images/brand/logo.svg";
import LinkButton from "@/components/controls/LinkButton";
@@ -13,25 +13,24 @@ import Mission from "@/components/pages/front/Mission";
import { Page } from "@/types/page";
import roadmap from "@/assets/state/roadmap";
import RoadmapItem from "@/components/pages/front/RoadmapItem";
-import Heading from "@/components/layout/Heading";
-import { makeSitemapMeta } from "@/utils/meta/sitemap";
+import Heading from "@/components/content/Heading";
+import KeywordsMeta from "@/components/head/KeywordsMeta";
import { sendCTAEvent } from "@/api/analytics";
-import { makeOgMeta } from "@/utils/meta/opengraph";
-import KeywordsMeta from "@/components/head/KeywordsMeta";
+import makeSitemapMeta from "@/lib/meta/sitemap";
+import { makeOgMeta } from "@/lib/meta/opengraph";
-const logoAnim = {
+const LOGO_ANIM = {
initial: {
- translateX: "-2.5%",
- translateY: "15%",
- rotate: "-2deg"
+ translateY: "50%",
},
animate: {
- translateX: "0",
translateY: "0",
- rotate: "10deg"
+ transition: {
+ duration: .3
+ }
}
-} as const;
+} satisfies Variants;
const FrontPage: Page = ({ pathname }) => {
@@ -48,89 +47,77 @@ const FrontPage: Page = ({ pathname }) => {
]} />
</Head>
<main aria-labelledby="hero-title" className="flex flex-col flex-1 w-full gap-32 pb-8 max-w-7xl">
- <section aria-label="hero" className="flex flex-col-reverse items-center h-fit min-h-0 xl:flex-row xl:min-h-[30rem] xl:h-[75dvh] xl:h-[75vh] mx-auto">
- <div className="relative flex flex-col items-center justify-center h-full col-span-3 gap-8 text-center xl:w-3/5">
- <Heading.H1
- id="hero-title"
- className="text-primary"
- >
- <span className="text-secondary">Launch</span> your <span className="text-secondary">Commits</span> in a <span className="text-secondary">Modern</span> way
- </Heading.H1>
- <p className="text-lg lg:text-xl lg:max-w-xl">
- Experience Git in a modern and fast way with Commit Rocket, the open-source, lightweight and cross-platform Git client.
- </p>
- <LinkButton
- className="px-5 py-3 text-xl w-full sm:w-fit"
- onClick={sendCTAEvent("Learn More")}
- href="#introduction"
- color="secondary"
- scroll={false}
- >
- Learn More!
- </LinkButton>
- </div>
- <div className="relative overflow-hidden flex items-center justify-center w-full min-h-[20rem] max-h-[40dvh] max-h-[40vh] xl:min-h-0 xl:h-full xl:max-h-full xl:w-2/5" style={{ aspectRatio: `${LogoPicture.width} / ${LogoPicture.height}` }}>
- <motion.img
- className="absolute max-w-full max-h-full object-contain aspect-auto w-full rotate-[10deg] text-[0px] select-none"
- loading="eager"
- variants={logoAnim}
- alt="Commit Rocket"
- src={LogoPicture.src}
- width={LogoPicture.width}
- height={LogoPicture.height}
- />
- </div>
- </section>
- <section aria-label="introduction" className="flex flex-col gap-12 p-8 text-lg -mx-8 md:mx-0 motion-safe:transition-[margin] text-center border-2 rounded-lg xl:flex-row text-primary-contrast image-dots from-primary-light border-primary-light bg-primary">
- <Heading.H2 id="introduction" className="flex p-4 flex-col items-center justify-center w-full rounded-lg text-fill-contrast bg-white/20 backdrop-blur-[1.25px] xl:p-0 xl:w-1/2">
- <span className="text-2xl">
- Introducing...
- </span>
- <span className="flex flex-col items-center gap-4 p-4 text-3xl sm:text-4xl font-bold break-normal text-primary-contrast md:text-6xl md:flex-row md:w-max">
- <img
- className="w-16 h-16 md:w-[1.5em] md:h-[1.5em]"
- alt="A Small Rocket"
- src={LogoSmall.src}
- width={LogoSmall.width}
- height={LogoSmall.height}
+ <div className="flex flex-col gap-32 xl:gap-0">
+ <section aria-label="hero" className="flex flex-col-reverse items-center h-fit min-h-0 gap-8 overflow-clip xl:flex-row xl:gap-0 xl:min-h-[30rem] xl:h-[75dvh] xl:h-[75vh]">
+ <div className="relative flex flex-col items-center justify-center h-full col-span-3 gap-8 text-center xl:w-3/5">
+ <Heading.H1 id="hero-title">
+ Extend Your Git Workflow, Your Way
+ </Heading.H1>
+ <p className="text-lg lg:text-xl lg:max-w-xl">
+ Commit Rocket is a modern, open-source and lightweight Git client with plugins themes, working contexts and more!
+ </p>
+ <LinkButton
+ className="w-full px-5 py-3 text-xl sm:w-fit"
+ onClick={sendCTAEvent("Learn More")}
+ href="#introduction"
+ color="primary"
+ scroll={false}
+ >
+ Learn More!
+ </LinkButton>
+ </div>
+ <div className="relative overflow-visible flex items-center justify-center w-full rotate-12 min-h-[20rem] max-h-[40dvh] max-h-[40vh] xl:min-h-0 xl:h-full xl:max-h-full xl:w-2/5 xl:rotate-0" style={{ aspectRatio: `${LogoPicture.width} / ${LogoPicture.height}` }}>
+ <motion.img
+ className="absolute max-w-full max-h-full object-contain aspect-auto w-full text-[0px] select-none"
+ loading="eager"
+ variants={LOGO_ANIM}
+ alt="Commit Rocket"
+ src={LogoPicture.src}
+ width={LogoPicture.width}
+ height={LogoPicture.height}
/>
- Commit Rocket
- </span>
- </Heading.H2>
- <div className="flex flex-col w-full gap-4 text-lg font-semibold break-words xl:w-1/2">
- <p>
- A new and modern Git client that is currently in development.
- Our main focus is on creating a modern design and speed without sacrificing any of the features you love.
- </p>
- <p>
- "Why another Git client?" - Our goal with Commit Rocket is to provide a fresh and innovative approach to Git clients,
- addressing the outdated and inefficient nature of many current options.
- As an open-source and cross-platform client,
- we aim to provide a real alternative to popular choices like GitKraken, Github Desktop, and SourceTree.
- </p>
- <p>
- This means that everyone will have access to our code and anyone can contribute to make it the best it can be.
- Join us in bringing new life to Git!
- </p>
- <LinkButton href="/contribute" color="white" onClick={sendCTAEvent("Contribute")}>
- Contribute
- </LinkButton>
- </div>
- </section>
+ </div>
+ </section>
+ <section aria-label="introduction" className="flex flex-col gap-12 p-8 text-lg -mx-8 md:mx-0 motion-safe:transition-[margin] text-center rounded-2xl xl:flex-row text-cr-primary-contrast image-star bg-cr-primary">
+ <Heading.H2 id="introduction" className="flex p-4 flex-col items-center justify-center w-full rounded-2xl text-cr-primary-contrast bg-cr-primary-contrast/30 backdrop-glass border border-cr-primary-contrast/20 xl:p-0 xl:w-1/2">
+ <span className="text-2xl">
+ Introducing...
+ </span>
+ <span className="flex flex-col items-center gap-4 p-4 text-3xl font-bold break-normal sm:text-4xl text-cr-primary-contrast md:text-6xl md:flex-row md:w-max">
+ <img
+ className="w-16 h-16 md:w-[2em] md:h-[2em] rotate-30"
+ alt="A Small Rocket"
+ src={LogoSmall.src}
+ width={LogoSmall.width}
+ height={LogoSmall.height}
+ />
+ Commit Rocket
+ </span>
+ </Heading.H2>
+ <div className="flex flex-col w-full gap-4 text-lg font-semibold break-words xl:w-1/2">
+ <p>
+ A new and modern Git client that is currently in development.
+ Our main focus is to create a modern client with feature-packed with awesome features like multi-account support, plugins and working contexts.
+ </p>
+ <p>
+ "Why another Git client?" - We feel like there is no real variety in the Git client ecosystem. We aim to provide a real alternative to popular choices like GitKraken, Github Desktop and SourceTree.
+ </p>
+ <p>
+ Commit Rocket will be open-source, this means that everyone will have access to our code and anyone can contribute to make it the best it can be.
+ </p>
+ <LinkButton href="/contribute" color="white" onClick={sendCTAEvent("Contribute")}>
+ Contribute
+ </LinkButton>
+ </div>
+ </section>
+ </div>
<section
aria-labelledby="missions"
className="flex flex-col gap-12 mx-auto text-center"
>
- <Heading.H2
- id="missions"
- className="text-secondary"
- >
- Mission
+ <Heading.H2 id="missions">
+ Missions
</Heading.H2>
- <p className="text-lg font-semibold">
- Our main goal with Commit Rocket is to drive innovation and provide a modern and fast alternative to existing Git clients.
- We want to improve the user experience for developers by creating an open-source and cross-platform tool that is both feature-rich and beginner-friendly.
- </p>
<ul className="flex flex-col flex-wrap justify-between w-full gap-16 lg:gap-4 lg:flex-row">
{missions.map((mission, i) => (
<Mission key={i} {...mission} />
@@ -141,10 +128,7 @@ const FrontPage: Page = ({ pathname }) => {
aria-labelledby="roadmap"
className="flex flex-col gap-4"
>
- <Heading.H2
- id="roadmap"
- className="text-center text-secondary"
- >
+ <Heading.H2 id="roadmap" className="text-center">
Roadmap
</Heading.H2>
<ul>
diff --git a/src/pages/mail/unsubscribe.tsx b/src/pages/mail/unsubscribe.tsx
index bdd526c..f8b5b04 100644
--- a/src/pages/mail/unsubscribe.tsx
+++ b/src/pages/mail/unsubscribe.tsx
@@ -5,9 +5,9 @@ import { useForm } from "react-hook-form";
import ArrowPathIcon from "@heroicons/react/24/solid/ArrowPathIcon";
import { Page } from "@/types/page";
-import { backend } from "@/utils/wretch";
-import { makeOgMeta } from "@/utils/meta/opengraph";
-import { makeSitemapMeta } from "@/utils/meta/sitemap";
+import backend from "@/lib/fetch/backend";
+import { makeOgMeta } from "@/lib/meta/opengraph";
+import makeSitemapMeta from "@/lib/meta/sitemap";
import useFormMutation from "@/hooks/useMutation";
import { BackendResponse } from "@/api/models/Response";
@@ -15,7 +15,7 @@ import { sendUnsubscribeEvent } from "@/api/analytics";
import Input from "@/components/controls/Input";
import Form from "@/components/controls/Form";
-import Heading from "@/components/layout/Heading";
+import Heading from "@/components/content/Heading";
import Button from "@/components/controls/Button";
import Label from "@/components/controls/Label";
import KeywordsMeta from "@/components/head/KeywordsMeta";
@@ -54,30 +54,30 @@ const UnsubscribePage: Page = ({ pathname }) => {
</Head>
<main className="flex items-center justify-center flex-1 w-full pb-8" aria-labelledby="unsubscribe">
<Form
- className="flex flex-col gap-4 p-8 text-center border-2 rounded-md border-primary"
+ className="flex flex-col gap-4 p-8 text-center border-2 rounded-2xl image-star border-cr-primary"
onSubmit={submit}
success={response?.success}
successChildren={`${response?.message} 👍`}
oneTime
>
- <Heading.H1 id="unsubscribe" className="text-secondary">
+ <Heading.H1 id="unsubscribe" >
Unsubscribe
</Heading.H1>
<p className="max-w-md">
Once you unsubscribe you won't receive any more emails from us and your email will be immediately deleted from our records.
</p>
<div>
- <Label htmlFor="email-input" className="text-secondary">
+ <Label htmlFor="email-input" className="text-cr-primary">
Email:
</Label>
<Input
id="email-input"
- color="secondary"
+ color="primary"
placeholder="your@email.com"
{...register("email")}
/>
</div>
- <Button type="submit" color="secondary">
+ <Button type="submit" color="primary">
{!loading
? "Unsubscribe"
: <ArrowPathIcon
diff --git a/src/styles/main.css b/src/styles/main.css
index 71745f1..95b609b 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -10,7 +10,15 @@ body,
}
html {
- @apply min-h-full bg-fill text-fill-contrast;
+ @apply min-h-full bg-cr-fill text-cr-fill-contrast relative;
+}
+
+svg[data-reset] {
+ height: auto;
+}
+
+:not(pre)>code {
+ @apply bg-white/20 border border-white/20 rounded-md px-1
}
div.swal2-popup.swal2-toast {
@@ -38,11 +46,11 @@ div.swal2-popup.image-only .swal2-html-container {
}
div.swal2-popup .swal2-close {
- @apply bg-secondary border-2 border-secondary-dark text-secondary-contrast rounded-full w-8 h-8 border-solid
+ @apply bg-cr-primary border-2 border-cr-primary-dark text-cr-primary-contrast rounded-full w-8 h-8 border-solid
}
div.swal2-popup .swal2-close:hover {
- @apply bg-secondary-light
+ @apply bg-cr-primary-light
}
div.swal2-popup.image-only .swal2-title {
diff --git a/src/utils/alerts/base.tsx b/src/utils/alerts/base.tsx
new file mode 100644
index 0000000..d81f344
--- /dev/null
+++ b/src/utils/alerts/base.tsx
@@ -0,0 +1,16 @@
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import CloseIcon from "@heroicons/react/24/solid/XMarkIcon";
+
+const base = withReactContent(Swal).mixin({
+ closeButtonHtml: <CloseIcon
+ className="w-6 h-6"
+ width="1em"
+ height="1em"
+ />,
+ customClass: {
+ icon: "mr-4"
+ }
+});
+
+export default base;
\ No newline at end of file
diff --git a/src/utils/alerts/modal.ts b/src/utils/alerts/modal.ts
new file mode 100644
index 0000000..d8d6d61
--- /dev/null
+++ b/src/utils/alerts/modal.ts
@@ -0,0 +1,9 @@
+import base from "./base";
+
+const modal = base.mixin({
+ position: "center",
+ showConfirmButton: false,
+ showCloseButton: true
+});
+
+export default modal;
\ No newline at end of file
diff --git a/src/utils/alerts/toast.ts b/src/utils/alerts/toast.ts
new file mode 100644
index 0000000..2a4ef30
--- /dev/null
+++ b/src/utils/alerts/toast.ts
@@ -0,0 +1,16 @@
+import Swal from "sweetalert2";
+import swal from "./base";
+
+const toast = swal.mixin({
+ timer: 5000,
+ timerProgressBar: true,
+ position: "top",
+ showConfirmButton: false,
+ toast: true,
+ didOpen: (toast) => {
+ toast.addEventListener('mouseenter', Swal.stopTimer);
+ toast.addEventListener('mouseleave', Swal.resumeTimer);
+ }
+});
+
+export default toast;
\ No newline at end of file
diff --git a/src/utils/react.tsx b/src/utils/react.tsx
index 02a715f..e49f830 100644
--- a/src/utils/react.tsx
+++ b/src/utils/react.tsx
@@ -1,4 +1,4 @@
-import { ReactFragment, Fragment, ReactNode, LegacyRef, MutableRefObject, RefCallback } from "react";
+import React, { ReactFragment, Fragment, ReactNode, LegacyRef, MutableRefObject, RefCallback } from "react";
export const isFragment = (node: ReactNode): node is ReactFragment => {
if (!node || typeof node !== "object" || !("type" in node)) return false;
@@ -10,7 +10,7 @@ export const reactNodeToString = async (node: ReactNode): Promise<string> => {
return renderToString(<>{node}</>);
};
-export const mergeRefs = <T = any>(...refs: Array<MutableRefObject<T> | LegacyRef<T> | undefined>): RefCallback<T> => (value) => {
+export const mergeRefs = <T extends any = any>(...refs: Array<MutableRefObject<T> | LegacyRef<T> | undefined>): RefCallback<T> => (value) => {
refs.forEach((ref) => {
if (!ref) return;
if (typeof ref === "function") {
diff --git a/src/utils/swal.tsx b/src/utils/swal.tsx
deleted file mode 100644
index a41240d..0000000
--- a/src/utils/swal.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import CloseIcon from "@heroicons/react/24/solid/XMarkIcon";
-
-const swal = withReactContent(Swal).mixin({
- closeButtonHtml: <CloseIcon
- className="w-6 h-6"
- width="1em"
- height="1em"
- />,
- customClass: {
- icon: "mr-4"
- }
-});
-
-export const toast = swal.mixin({
- timer: 5000,
- timerProgressBar: true,
- position: "top",
- showConfirmButton: false,
- toast: true,
- didOpen: (toast) => {
- toast.addEventListener('mouseenter', Swal.stopTimer);
- toast.addEventListener('mouseleave', Swal.resumeTimer);
- }
-});
-
-export const modal = swal.mixin({
- position: "center",
- showConfirmButton: false,
- showCloseButton: true
-});
-
-export default swal;
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index b5502c6..722f056 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,29 +11,24 @@ module.exports = {
],
theme: {
extend: {
- backgroundImage: {
- "gradient-radial": 'radial-gradient(circle closest-side, var(--tw-gradient-stops))'
- },
colors: {
- primary: {
- DEFAULT: "#f2600c",
- 300: "#FCCAA6",
- light: "#FF8D4C",
- dark: "#bf4701",
- contrast: "#FFF"
- },
- secondary: {
- DEFAULT: "#E83227",
- light: "#F44338",
- dark: "#B01D14",
- contrast: "#FFF"
- },
- fill: {
- DEFAULT: "#FFE4CC",
- contrast: {
- light: "#474747",
- DEFAULT: "#282828",
- dark: "#191919"
+ /** Commit Rocket colors */
+ cr: {
+ primary: {
+ DEFAULT: "#f45a07",
+ light: "#f9794a",
+ dark: "#92400e",
+ contrast: "#FFF"
+ },
+ fill: {
+ DEFAULT: "#18181b",
+ light: "#52525b",
+ dark: "#18181b",
+ contrast: {
+ light: "#fff",
+ DEFAULT: "#f2f2f2",
+ dark: "#e5e5e5"
+ }
}
}
}
@@ -41,17 +36,31 @@ module.exports = {
},
plugins: [
require('@headlessui/tailwindcss'),
- plugin(({ addVariant, addComponents }) => {
- addVariant("is", ":is(&)");
- addVariant("where", ":where(&)");
+ plugin(({ addComponents, addUtilities }) => {
addComponents({
".image-dots": {
"background-image": "radial-gradient(var(--tw-gradient-from), transparent 1.5px, transparent 1.5px)",
"background-size": "1.1rem 1.1rem",
"background-position": "50% 50%"
+ },
+ ".image-star": {
+ "background-image": "url('/images/textures/star.svg')",
+ "background-size": "2rem 2rem",
+ "background-position": "50% 50%"
+ },
+ ".backdrop-glass": {
+ "--tw-backdrop-blur": "blur(1.25px);",
+ "--tw-backdrop-saturate": "saturate(180%)",
+ "-webkit-backdrop-filter": "var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);",
+ "backdrop-filter": "var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);"
+ }
+ });
+ addUtilities({
+ ".rotate-30": {
+ "--tw-rotate": "30deg",
+ "transform": "translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))"
}
});
-
})
],
};