stylelint and ticket added to linktree

jest.config.mjs

@@ -1,18 +1,13 @@
 import nextJest from "next/jest.js";
 
 const createJestConfig = nextJest({
-  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
   dir: "./",
 });
 
-// Add any custom config to be passed to Jest
 /** @type {import('jest').Config} */
 const config = {
-  // Add more setup options before each test is run
-  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
-
   testEnvironment: "jest-environment-jsdom",
-  moduleDirectories: ["node_modules", "<rootDir>/"],
+  moduleDirectories: ["node_modules", "<rootDir>/src/"],
 };
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async

package.json

@@ -8,7 +8,8 @@
     "start": "next start",
     "lint": "tsc --noEmit && next lint --cache --ext md,mdx,ts,tsx",
     "lint.fix": "next lint --fix --ext md,mdx,ts,tsx",
-    "csslint": "npx stylelint **/*.scss --fix",
+    "csslint": "npx stylelint **/*.scss",
+    "csslint.fix": "npx stylelint **/*.scss --fix",
     "export": "next export",
     "prepare": "husky",
     "test": "jest",

arrays/linktree.ts → src/arrays/linktree.ts

@@ -9,6 +9,14 @@ export interface LinkProps {
 }
 
 export const linkList: LinkProps[] = [
+  {
+    title: "C€LTIC ERECTIONS",
+    img: "/gigs/55-celtic.jpg",
+    link: "https://ra.co/events/1867088",
+    name: "tickets",
+    description:
+      "HAPPY SAINT FUCKING PATTY'S DAY ME OLD FLOWERS! IT'S AROUND THAT TIME OF YEAR AGAIN WHEN WE CELEBRATE OUR GREATEST EVER WELSHMIN, OUR HOLY PATRON SAINT PATRICK. ",
+  },
   {
     title: "Timo Torben - Where Do We Go From Here",
     img: "/premieres/71-denholm.jpg",

components/ArtistLookUp/ArtistLookUp.module.scss → src/components/ArtistLookUp/ArtistLookUp.module.scss

@@ -6,13 +6,15 @@
   align-items: center;
   gap: 0.5rem;
   text-decoration: none;
-  color: $pbBlack;
+  color: $pb-black;
+
   &:hover {
     transform: scale(1.01);
     opacity: 0.95;
-    filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, 0.25));
+    filter: drop-shadow(0 6px 6px rgb(0 0 0 / 25%));
+
     p {
-      color: $pbBlack;
+      color: $pb-black;
     }
   }
 }
@@ -25,11 +27,13 @@
 .gigArray {
   list-style: none;
   padding: 0.5rem 0;
-  background-color: $navGrey;
+  background-color: $nav-grey;
   transition: 0.25s ease;
+
   li {
     padding: 0.25rem 0;
-    border-bottom: $plantbassdPink solid 1px;
+    border-bottom: $plantbassd-pink solid 1px;
+
     &:last-child {
       border: none;
     }
@@ -38,6 +42,6 @@
   .insta {
     margin: 0;
     text-decoration: none;
-    color: $pbBlack;
+    color: $pb-black;
   }
 }

components/Banner/Banner.module.scss → src/components/Banner/Banner.module.scss

@@ -11,7 +11,7 @@
   width: 100%;
   z-index: -2;
   background-image: url("/images/banner.jpg");
-  background-color: $pbWhite;
+  background-color: $pb-white;
 }
 
 .frontText {
@@ -28,14 +28,12 @@
   display: flex;
   justify-content: center;
   align-items: flex-start;
-  flex-direction: column;
-  flex-wrap: wrap;
+  flex-flow: column wrap;
 }
 
 .btns {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
   gap: 0.5rem;
 }
 

components/Button/Button.module.scss → src/components/Button/Button.module.scss

@@ -7,20 +7,20 @@
   padding: 0.375rem 0.75rem;
   text-decoration: none;
   outline: 0;
-  color: $pbBlack;
-  background-color: $pbWhite;
-  border: 1px solid $pbBlack;
+  color: $pb-black;
+  background-color: $pb-white;
+  border: 1px solid $pb-black;
   border-radius: 0.375rem;
   cursor: pointer;
   position: relative;
   user-select: none;
-  -webkit-user-select: none;
   touch-action: manipulation;
   transition: border 0.5s;
   display: inline-block;
-  &:after {
+
+  &::after {
     content: "";
-    background-color: rgba($clayRed, 0.4);
+    background-color: rgba($clay-red, 0.4);
     border-radius: 0.375rem;
     width: 100%;
     z-index: 2;
@@ -30,13 +30,15 @@
     left: 0.4rem;
     transition: 0.2s;
   }
+
   &:hover {
-    color: $pbBlack;
+    color: $pb-black;
     border: 0;
   }
-  &:hover:after {
-    top: 0px;
-    left: 0px;
+
+  &:hover::after {
+    top: 0;
+    left: 0;
   }
 }
 

components/Card/Card.module.scss → src/components/Card/Card.module.scss

@@ -3,22 +3,24 @@
 // sticky side image
 
 .newsImage {
-  position: -webkit-sticky;
   position: sticky;
   top: 2rem;
   margin: 0 0.5rem;
 }
 
 .widthOverride {
   margin: 0.5rem 0;
+
   div:first-child {
     padding-left: 0;
     padding-right: 0.5rem;
   }
+
   div:last-child {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   div a {
     width: 100% !important;
   }
@@ -53,18 +55,18 @@
   &:hover {
     transform: scale(1.04);
     opacity: 0.9;
-    filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, 0.25));
+    filter: drop-shadow(0 6px 6px rgb(0 0 0 / 25%));
   }
 }
 
 .cardTitle {
-  font-size: $cardText;
+  font-size: $card-text;
   margin-bottom: 0.5rem;
 }
 
 .cardDate {
-  font-size: $cardDate;
-  color: rgba(0, 0, 0, 0.75);
+  font-size: $card-date;
+  color: rgb(0 0 0 / 75%);
 }
 
 // @include breakpoint-below(xs) {
@@ -75,14 +77,14 @@
 }
 
 // @include breakpoint-below(xs) {
-@media (max-width: 576px) {
+@media (width <= 576px) {
   .cardBody {
     padding: 0.5rem;
   }
 }
 
-@media (max-width: 378px) {
+@media (width <= 378px) {
   .cardTitle {
-    font-size: $cardDate;
+    font-size: $card-date;
   }
 }

components/Error/Error.module.scss → src/components/Error/Error.module.scss

@@ -11,7 +11,7 @@
   padding: 0 10%;
 }
 
-@media (max-width: 376px) {
+@media (width <= 376px) {
   .errorBG {
     padding: 0 14%;
   }

components/FilterTags/FilterTags.module.scss → src/components/FilterTags/FilterTags.module.scss

@@ -13,7 +13,7 @@
 .filterTitle {
   padding: 0;
   margin: 0 0.75rem;
-  font-family: "Dx-Slim";
+  font-family: Dx-Slim, Helvetica, sans-serif;
   text-transform: uppercase;
   font-size: 1.4rem;
 }

components/Footer/Footer.module.scss → src/components/Footer/Footer.module.scss

@@ -1,7 +1,7 @@
 @use "@/abstracts" as *;
 
 .sectionHeader {
-  color: $headerBlack;
+  color: $header-black;
   font-size: clamp(2rem, 1.3115rem + 3.9344vw, 5rem);
   margin-bottom: 1rem;
   white-space: nowrap;
@@ -28,7 +28,7 @@
 }
 
 .footerColor {
-  color: $headerBlack;
+  color: $header-black;
   padding-left: 0;
   list-style: none;
 }
@@ -44,13 +44,13 @@
   text-align: right;
 }
 
-@media (max-width: 360px) {
+@media (width <= 360px) {
   .siteBy {
     flex: 0 1 auto;
   }
 
   .allRights {
-    padding: 0.5rem 0 0 0;
+    padding: 0.5rem 0 0;
     flex: 0 1 auto;
     text-align: left;
   }

components/HoverLink/HoverLink.module.scss → src/components/HoverLink/HoverLink.module.scss

@@ -2,13 +2,16 @@
 
 .hoverLink {
   text-decoration: none;
-  color: $plantbassdPink;
+  color: $plantbassd-pink;
   line-height: 1;
   padding-bottom: 2px;
+
   --bg-h: 2px;
-  background: linear-gradient(0deg, $plantbassdPink, $plantbassdPink) no-repeat right bottom / 0
+
+  background: linear-gradient(0deg, $plantbassd-pink, $plantbassd-pink) no-repeat right bottom / 0
     var(--bg-h);
   transition: background-size 350ms;
+
   &:where(:hover, :focus-visible) {
     background-size: 100% var(--bg-h);
     background-position-x: left;

components/Icon/SocialButton.module.scss → src/components/Icon/SocialButton.module.scss

@@ -2,14 +2,15 @@
 
 .iconBox {
   text-decoration: none;
-  color: $pbBlack;
+  color: $pb-black;
   transition: 0.25s ease;
   display: inline-block;
   margin: 0.25rem;
+
   &:hover {
-    color: $pbBlack;
+    color: $pb-black;
     transform: scale(1.1);
-    filter: drop-shadow(0px 6px 6px $dropShadow);
+    filter: drop-shadow(0 6px 6px $drop-shadow);
   }
 }
 
@@ -26,6 +27,6 @@
 .socialIcon {
   display: flex;
   margin: 0.5rem;
-  fill: $headerBlack;
-  border-radius: 1em 0 1em 0;
+  fill: $header-black;
+  border-radius: 1em 0;
 }

components/Loading/loading.module.scss → src/components/Loading/loading.module.scss

@@ -10,6 +10,7 @@
 .border {
   $size: 8rem;
   $thick: 1rem;
+
   width: $size;
   height: $size;
   position: relative;
@@ -19,11 +20,12 @@
   align-items: center;
   text-align: center;
   font-size: $thick;
-  color: $navGrey;
+  color: $nav-grey;
   padding: 10rem $thick $thick $thick;
   line-height: $thick;
   user-select: none;
-  &:before {
+
+  &::before {
     content: "";
     box-sizing: border-box;
     position: absolute;
@@ -34,8 +36,8 @@
     margin-top: calc($size / -2);
     margin-left: calc($size / -2);
     border-radius: 50%;
-    border: $thick solid $navGrey;
-    border-top-color: $pbBlack;
+    border: $thick solid $nav-grey;
+    border-top-color: $pb-black;
     animation: spinner 0.9s ease infinite;
   }
 }
@@ -44,23 +46,28 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
 }
 
 .button {
   @extend .loading;
+
   height: 2rem;
 }
 
 .btnBorder {
   @extend .border;
+
   $size: 2rem;
   $thick: 1rem;
+
   width: $size;
   height: $size;
-  &:before {
+
+  &::before {
     width: $size;
     height: $size;
     margin-top: calc($size / -2);