updates

Author: JustDeveloper1

.github/workflows/nextjs.yml

@@ -22,7 +22,7 @@ jobs:
         uses: actions/checkout@v4
       - name: npm
         id: install-npm
-        run: npm i && npm install --save-dev style-loader css-loader && npm install react-monaco-editor && npm install [email protected] --save-dev
+        run: npm i && npm install --save-dev style-loader@4.0.0 css-loader@7.1.2 react-monaco-editor@0.59.0 [email protected]
       - name: Detect package manager
         id: detect-package-manager
         run: |

lib/builder.js

@@ -31,6 +31,8 @@ import dynamic from 'next/dynamic';
 
 const MonacoEditor = dynamic(() => import('react-monaco-editor'), { ssr: false });
 
+console.log(MonacoEditor);
+
 const Builder = () => {
     const translate = useTranslations();
 

pages/_app.js

@@ -1,5 +1,5 @@
-import './style.css';
 import '../globals.css';
+import './style.css';
 
 import { GlobalProvider } from '../global-context';
 import { NextIntlProvider } from 'next-intl';

pages/index.js

@@ -36,7 +36,7 @@ const Home = () => {
 
   return (
     <>
-      <h1 className='bg lz'>Just an Ultimate Site Tool Demo</h1>
+      <h1 className='bg lz cw demo agt'>Just an Ultimate Site Tool</h1>
       <Builder className='builder' />
     </>
   );

pages/style.css

@@ -24,17 +24,92 @@ SOFTWARE.
 
 */
 
-.rmo {
+:root {
+    --a: 5s ease-in-out infinite; /* Animation */
+    --g: 0px 0px 12px rgba(255,255,255,0.4); /* Glow */
+}
+
+.rmo { /* Rubik Mono One */
     font-family: "Rubik Mono One", "Rubik", monospace;
 }
-.scp {
+.scp { /* Source Code Pro */
     font-family: "Source Code Pro", monospace;
 }
-.lz {
+.lz { /* Lexend Zetta */
     font-family: "Lexend Zetta", sans-serif;
 }
 
 .builder {
     left: 50%;
     translate: -50% 0%;
 }
+
+h1 {
+    margin: 0;
+    padding: 50px 10px;
+    text-align: center;
+    animation: gt var(--a);
+    -webkit-animation: gt var(--a);
+}
+.demo::after {
+    content: 'Demo';
+    margin-left: 20px;
+    padding: 0px 10px;
+    background-color: white;
+    color: black;
+    border-radius: 15px;
+    animation: g var(--a);
+    -webkit-animation: g var(--a);
+    animation-delay: 0.2s;
+    -webkit-animation-delay: 0.2s;
+}
+
+.cw { /* Color White */
+    color: white;
+}
+
+.ag { /* Animation Glow (Text) */
+    animation: g var(--a);
+    -webkit-animation: g var(--a);
+}
+.agt { /* Animation Glow (Text) */
+    animation: gt var(--a);
+    -webkit-animation: gt var(--a);
+}
+
+@keyframes g { /* Glow */
+    0%, 100% {
+        filter: none;
+        -webkit-filter: none;
+    }
+    40% {
+        filter: drop-shadow(var(--g));
+        -webkit-filter: drop-shadow(var(--g));
+    }
+}
+@-webkit-keyframes g {
+    0%, 100% {
+        filter: none;
+        -webkit-filter: none;
+    }
+    40% {
+        filter: drop-shadow(var(--g));
+        -webkit-filter: drop-shadow(var(--g));
+    }
+}
+@keyframes gt { /* Glow (Text) */
+    0%, 100% {
+        text-shadow: none;
+    }
+    40% {
+        text-shadow: var(--g);
+    }
+}
+@-webkit-keyframes gt {
+    0%, 100% {
+        text-shadow: none;
+    }
+    40% {
+        text-shadow: var(--g);
+    }
+}