Merge pull request #4 from brionmario/main

chore: move configurations to a `meetup.config`
javascript-colombo · Dec 21, 2024 · 5eb78b8 · 5eb78b8
2 parents 5002c98 + 99e6feb
commit 5eb78b8
Show file tree

Hide file tree

Showing 23 changed files with 338 additions and 263 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,7 +1,7 @@
 /**
  * MIT License
  *
- * Copyright (c) 2024, Brion Mario
+ * Copyright (c) 2024, JavaScript Colombo
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy
  * of this software and associated documentation files (the "Software"), to deal
@@ -22,11 +22,45 @@
  * SOFTWARE.
  */
 
+const LICENSE_HEADER_DEFAULT_PATTERN = [
+  '*',
+  ' * MIT License',
+  ' *',
+  {
+    pattern: ' Copyright \\(c\\) \\d{4}, JavaScript Colombo',
+    template: ` * Copyright (c) ${new Date().getFullYear()}, JavaScript Colombo`,
+  },
+  ' *',
+  ' * Permission is hereby granted, free of charge, to any person obtaining a copy',
+  ' * of this software and associated documentation files (the "Software"), to deal',
+  ' * in the Software without restriction, including without limitation the rights',
+  ' * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell',
+  ' * copies of the Software, and to permit persons to whom the Software is',
+  ' * furnished to do so, subject to the following conditions:',
+  ' *',
+  ' * The above copyright notice and this permission notice shall be included in all',
+  ' * copies or substantial portions of the Software.',
+  ' *',
+  ' * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR',
+  ' * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,',
+  ' * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE',
+  ' * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER',
+  ' * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,',
+  ' * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE',
+  ' * SOFTWARE.',
+  ' ',
+];
+
 module.exports = {
   env: {
     es6: true,
     node: true,
   },
   extends: ['turbo', 'plugin:@brionmario/internal', 'plugin:@brionmario/prettier'],
   plugins: ['@brionmario'],
+  rules: {
+    // Enforce JavaScript Colombo's license header.
+    // https://github.com/Stuk/eslint-plugin-header
+    'header/header': ['warn', 'block', LICENSE_HEADER_DEFAULT_PATTERN, 2],
+  },
 };
diff --git a/.husky/commit-msg b/.husky/commit-msg
diff --git a/.husky/pre-commit b/.husky/pre-commit
diff --git a/.husky/prepare-commit-msg b/.husky/prepare-commit-msg
diff --git a/apps/www/.eslintrc.cjs b/apps/www/.eslintrc.cjs
@@ -35,6 +35,7 @@ module.exports = {
     'plugin:@brionmario/prettier',
     'plugin:@brionmario/next',
     'plugin:react/jsx-runtime',
+    '../../.eslintrc.js'
   ],
   parserOptions: {
     project: [path.resolve(__dirname, 'tsconfig.json')],

diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx
@@ -25,9 +25,10 @@
 import type {Metadata} from 'next';
 import {ReactElement} from 'react';
 import ThemeProvider from '@/components/ThemeProvider';
-import './globals.scss';
-import './custom.scss';
 import {inter, spaceGrotesk} from './fonts';
+import useMeetupConfig from '@/hooks/useMeetupConfig';
+import './custom.scss';
+import './globals.scss';
 
 export const metadata: Metadata = {
   title: 'JavaScript Colombo',
@@ -39,14 +40,23 @@ const RootLayout = ({
   children,
 }: Readonly<{
   children: React.ReactNode;
-}>): ReactElement => (
-  <html lang="en">
-    <body className={`${spaceGrotesk.className} ${inter.className}`}>
-      <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
-        {children}
-      </ThemeProvider>
-    </body>
-  </html>
-);
+}>): ReactElement => {
+  const {config} = useMeetupConfig();
+
+  return (
+    <html lang="en">
+      <body className={`${spaceGrotesk.className} ${inter.className}`}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme={config.theme.defaultTheme}
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+};
 
 export default RootLayout;
diff --git a/apps/www/app/page.tsx b/apps/www/app/page.tsx
@@ -50,13 +50,13 @@ export default function Home(): ReactElement {
     <div dir="ltr">
       <NavBar items={[]} />
       <div className="mx-auto flex">
-        <div className="overflow-x-hidden w-full">
+        <div className="overflow-x-hidden w-full" style={{height: 'calc(100vh - 89px)'}}>
           <main className="relative">
             <Hero />
+            <Footer />
           </main>
         </div>
       </div>
-      <Footer />
     </div>
   );
 }
diff --git a/apps/www/components/FlipWords.tsx b/apps/www/components/FlipWords.tsx
@@ -24,15 +24,20 @@
 
 'use client';
 
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {PropsWithChildren, useCallback, useEffect, useRef, useState} from 'react';
 import {AnimatePresence, motion, LayoutGroup} from 'framer-motion';
 import {cn} from '@/lib/utils';
 
-const FlipWords = ({words, duration = 3000, className}: {className?: string; duration?: number; words: string[]}) => {
+export interface FlipWordsProps {
+  className?: string;
+  duration?: number;
+  words: string[];
+}
+
+const FlipWords = ({words, duration = 3000, className, children}: PropsWithChildren<FlipWordsProps>) => {
   const [currentWord, setCurrentWord] = useState(words[0]);
   const [isAnimating, setIsAnimating] = useState<boolean>(false);
 
-  // thanks for the fix Julian - https://github.com/Julian-AT
   const startAnimation = useCallback(() => {
     const word = words[words.indexOf(currentWord) + 1] || words[0];
     setCurrentWord(word);
@@ -47,67 +52,69 @@ const FlipWords = ({words, duration = 3000, className}: {className?: string; dur
   }, [isAnimating, duration, startAnimation]);
 
   return (
-    <AnimatePresence
-      onExitComplete={() => {
-        setIsAnimating(false);
-      }}
-    >
-      <motion.div
-        initial={{
-          opacity: 0,
-          y: 10,
-        }}
-        animate={{
-          opacity: 1,
-          y: 0,
-        }}
-        transition={{
-          type: 'spring',
-          stiffness: 100,
-          damping: 10,
-        }}
-        exit={{
-          opacity: 0,
-          y: -40,
-          x: 40,
-          filter: 'blur(8px)',
-          scale: 2,
-          position: 'absolute',
+    <>
+      <AnimatePresence
+        onExitComplete={() => {
+          setIsAnimating(false);
         }}
-        className={cn('z-10 inline-block relative text-left px-2', className)}
-        key={currentWord}
       >
-        {/* edit suggested by Sajal: https://x.com/DewanganSajal */}
-        {currentWord.split(' ').map((word, wordIndex) => (
-          <motion.span
-            key={word + wordIndex}
-            initial={{opacity: 0, y: 10, filter: 'blur(8px)'}}
-            animate={{opacity: 1, y: 0, filter: 'blur(0px)'}}
-            transition={{
-              delay: wordIndex * 0.3,
-              duration: 0.3,
-            }}
-            className="inline-block whitespace-nowrap"
-          >
-            {word.split('').map((letter, letterIndex) => (
-              <motion.span
-                key={word + letterIndex}
-                initial={{opacity: 0, y: 10, filter: 'blur(8px)'}}
-                animate={{opacity: 1, y: 0, filter: 'blur(0px)'}}
-                transition={{
-                  delay: wordIndex * 0.3 + letterIndex * 0.05,
-                  duration: 0.2,
-                }}
-                className="inline-block"
-              >
-                {letter}
-              </motion.span>
-            ))}
-            <span className="inline-block">&nbsp;</span>
-          </motion.span>
-        ))}
-      </motion.div>
-    </AnimatePresence>
+        <motion.div
+          initial={{
+            opacity: 0,
+            y: 10,
+          }}
+          animate={{
+            opacity: 1,
+            y: 0,
+          }}
+          transition={{
+            type: 'spring',
+            stiffness: 100,
+            damping: 10,
+          }}
+          exit={{
+            opacity: 0,
+            y: -40,
+            x: 40,
+            filter: 'blur(8px)',
+            scale: 2,
+            position: 'absolute',
+          }}
+          className={cn('z-10 inline-block relative text-left px-2', className)}
+          key={currentWord}
+        >
+          {currentWord.split(' ').map((word, wordIndex) => (
+            <motion.span
+              key={word + wordIndex}
+              initial={{opacity: 0, y: 10, filter: 'blur(8px)'}}
+              animate={{opacity: 1, y: 0, filter: 'blur(0px)'}}
+              transition={{
+                delay: wordIndex * 0.3,
+                duration: 0.3,
+              }}
+              className="inline-block whitespace-nowrap"
+            >
+              {word.split('').map((letter, letterIndex) => (
+                <motion.span
+                  key={word + letterIndex}
+                  initial={{opacity: 0, y: 10, filter: 'blur(8px)'}}
+                  animate={{opacity: 1, y: 0, filter: 'blur(0px)'}}
+                  transition={{
+                    delay: wordIndex * 0.3 + letterIndex * 0.05,
+                    duration: 0.2,
+                  }}
+                  className="inline-block"
+                >
+                  {letter}
+                </motion.span>
+              ))}
+              <span className="inline-block">&nbsp;</span>
+            </motion.span>
+          ))}
+        </motion.div>
+        {children}
+      </AnimatePresence>
+    </>
   );
 };
 

diff --git a/apps/www/components/Footer.tsx b/apps/www/components/Footer.tsx
@@ -27,39 +27,45 @@ import {cn} from '@/lib/utils';
 import {TestableComponent} from '@/types/dom';
 import {ExternalLink, GithubIcon, Heart} from 'lucide-react';
 import WSO2 from '@/icons/WSO2';
+import useMeetupConfig from '@/hooks/useMeetupConfig';
 
 export type FooterProps = HTMLAttributes<HTMLDivElement> & TestableComponent;
 
 const Footer: ForwardRefExoticComponent<FooterProps & RefAttributes<HTMLDivElement>> = forwardRef<
   HTMLDivElement,
   FooterProps
->(({className, ...rest}: FooterProps, ref: ForwardedRef<HTMLDivElement>) => (
-  <footer className={cn('footer', className)} ref={ref} {...rest}>
-    <div className="container mx-auto py-4">
-      <p className="text-center text-sm text-gray-600 dark:text-gray-400">
-        &copy; {new Date().getFullYear()} JavaScript Colombo. All rights reserved.
-      </p>
-      <div className="mt-4 text-center">
-        <p className="text-sm text-gray-600 dark:text-gray-400 flex items-center justify-center gap-1">
-          <Heart width={16} height={16} stroke="#c96198" />
-          <span>Sponsored by</span>
-          <a href="https://wso2.com" className="text-blue-500 hover:underline">
-            <WSO2 height={20} width={40} />
-          </a>
+>(({className, ...rest}: FooterProps, ref: ForwardedRef<HTMLDivElement>) => {
+  const {config} = useMeetupConfig();
+
+  return (
+    <footer className={cn('footer', className)} ref={ref} {...rest}>
+      <div className="container mx-auto py-4">
+        <p className="text-center text-sm text-gray-600 dark:text-gray-400">
+          &copy; {new Date().getFullYear()} JavaScript Colombo. All rights reserved.
         </p>
+        <div className="mt-4 text-center">
+          <p className="text-sm text-gray-600 dark:text-gray-400 flex items-center justify-center gap-1">
+            <Heart width={16} height={16} stroke="#c96198" />
+            <span>Sponsored by</span>
+            <a href={config.sponsor.mainSponsor.website} className="text-blue-500 hover:underline" target="_blank">
+              {config.sponsor.mainSponsor.name}
+            </a>
+          </p>
+        </div>
+        <div className="mt-4 text-center">
+          <a
+            href={config.links.source.github.url}
+            target={config.links.source.github.target}
+            className="text-sm text-gray-600 dark:text-gray-400 flex items-center justify-center gap-1 hover:underline"
+          >
+            <GithubIcon width={16} height={16} />
+            <span>Source Code</span>
+            <ExternalLink width={16} height={16} />
+          </a>
+        </div>
       </div>
-      <div className="mt-4 text-center">
-        <a
-          href="https://github.com/javascript-colombo/javascriptcolombo.com"
-          className="text-sm text-gray-600 dark:text-gray-400 flex items-center justify-center gap-1 hover:underline"
-        >
-          <GithubIcon width={16} height={16} />
-          <span>Source Code</span>
-          <ExternalLink width={16} height={16} />
-        </a>
-      </div>
-    </div>
-  </footer>
-));
+    </footer>
+  );
+});
 
 export default Footer;