From d8d5562224a45154e88197d295d8b11a86baef3a Mon Sep 17 00:00:00 2001 From: Nicolas VINCENT Date: Mon, 6 Feb 2023 20:04:25 +0100 Subject: [PATCH 1/5] home-page Ajout d'une page accueil --- .vscode/settings.json | 4 ++-- app/page.tsx | 37 ++++++++++++++++++++++++++++++++++--- next.config.js | 2 +- styles/globals.css | 8 ++++++++ 4 files changed, 45 insertions(+), 6 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 60972d0..58ff454 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,4 +1,4 @@ { - "typescript.tsdk": "node_modules/.pnpm/typescript@4.9.5/node_modules/typescript/lib", + "typescript.tsdk": "node_modules\\.pnpm\\typescript@4.9.5\\node_modules\\typescript\\lib", "typescript.enablePromptUseWorkspaceTsdk": true -} +} \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index 35289f2..d38a8a7 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,15 +1,46 @@ +'use client'; + import AppLink from '@/ui/AppLink'; +import { HtmlHTMLAttributes, useEffect } from 'react'; + export default function Home() { + useEffect(() => { + let visible:boolean = true; + let animation:boolean = true; //TODO ajouter un bouton pour arreter l'animation + let con: HTMLElement | null = document.getElementById('console'); + window.setInterval(function() { + if(con !== null && visible === true && animation === true){ + con.className = 'console invisible'; + visible = false; + }else if(con !== null && animation ===true){ + con.className = 'console'; + visible = true; + } + }, 400); + let word:HTMLElement | null = document.getElementById('text') + let text: string= "Peer-at-Code"; + for (let i:number = 0; i < text.length; i++) { + setTimeout(function(){ + if(word !== null) + word.innerHTML += text.charAt(i); + }, 410 * i ) + } + } , []); return (
-

- Amuse toi avec Next.js et{' '} - Tailwindcss ! +

+ Bienvenu sur

+

+ +
_
+

+

Dashboard
); } + diff --git a/next.config.js b/next.config.js index b859826..3bc06a0 100644 --- a/next.config.js +++ b/next.config.js @@ -1,6 +1,6 @@ /** @type {import('next').NextConfig} */ const nextConfig = { - reactStrictMode: true, // Recommended for the `pages` directory, default in `app`. + reactStrictMode: false, // Recommended for the `pages` directory, default in `app`. swcMinify: true, experimental: { appDir: true diff --git a/styles/globals.css b/styles/globals.css index b5c61c9..c786c2e 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,3 +1,11 @@ @tailwind base; @tailwind components; @tailwind utilities; + +.console{ + display:inline-block; + position:relative; + top:-0.14em; + left:5px; + height: 1rem; +} \ No newline at end of file From 6f79896d986a742af6ca2f2263fd8381c082b8f7 Mon Sep 17 00:00:00 2001 From: Nicolas VINCENT Date: Thu, 23 Feb 2023 14:01:05 +0100 Subject: [PATCH 2/5] update/home-page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ajout d'une description à la page à accueille --- .idea/workspace.xml | 56 +++++++++++++++++++++++++++++++++++++++++++++ app/page.tsx | 55 ++++++++++++++++++++++++++++++++++++++++++++ next.config.js | 4 ++++ 3 files changed, 115 insertions(+) create mode 100644 .idea/workspace.xml diff --git a/.idea/workspace.xml b/.idea/workspace.xml new file mode 100644 index 0000000..7668474 --- /dev/null +++ b/.idea/workspace.xml @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + 1676459578077 + + + + + + \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index d38a8a7..09734ee 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,6 +1,7 @@ 'use client'; import AppLink from '@/ui/AppLink'; +<<<<<<< Updated upstream import { HtmlHTMLAttributes, useEffect } from 'react'; @@ -39,6 +40,60 @@ export default function Home() {

Dashboard +======= +import { useEffect } from 'react'; + + +export default function Home() { + let start: boolean = true; + useEffect(() => { + if (start) { + start = false; + let visible: boolean = true; + let animation: boolean = true; //TODO ajouter un bouton pour arreter l'animation + let con: HTMLElement | null = document.getElementById('console'); + window.setInterval(function () { + if (con !== null && visible === true && animation === true) { + con.className = 'console invisible'; + visible = false; + } else if (con !== null && animation === true) { + con.className = 'console'; + visible = true; + } + }, 400); + let word: HTMLElement | null = document.getElementById('text') + let text: string = "Peer-at-Code"; + for (let i: number = 0; i < text.length; i++) { + setTimeout(function () { + if (word !== null) + word.innerHTML += text.charAt(i); + }, 410 * i) + } + } + }, []); + return ( +
+
+
+

+ Bienvenu sur +

+

+ +
_
+

+

+ Dashboard +
+
+
+
+ +

+ Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker. +

+
+>>>>>>> Stashed changes
); diff --git a/next.config.js b/next.config.js index 3bc06a0..9bbc123 100644 --- a/next.config.js +++ b/next.config.js @@ -1,6 +1,10 @@ /** @type {import('next').NextConfig} */ const nextConfig = { +<<<<<<< Updated upstream reactStrictMode: false, // Recommended for the `pages` directory, default in `app`. +======= + reactStrictMode: true, // Recommended for the `pages` directory, default in `app`. +>>>>>>> Stashed changes swcMinify: true, experimental: { appDir: true From 8f4085cd9b6301529ad3925ba11c006312346512 Mon Sep 17 00:00:00 2001 From: Nicolas VINCENT Date: Thu, 23 Feb 2023 14:01:05 +0100 Subject: [PATCH 3/5] update/home-page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ajout d'une description à la page à accueille --- .idea/workspace.xml | 56 +++++++++++++++++++++++++++++++++++++++++++++ app/page.tsx | 55 ++++++++++++++++++++++++++++++++++++++++++++ next.config.js | 4 ++++ 3 files changed, 115 insertions(+) create mode 100644 .idea/workspace.xml diff --git a/.idea/workspace.xml b/.idea/workspace.xml new file mode 100644 index 0000000..7668474 --- /dev/null +++ b/.idea/workspace.xml @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + 1676459578077 + + + + + + \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index d38a8a7..09734ee 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,6 +1,7 @@ 'use client'; import AppLink from '@/ui/AppLink'; +<<<<<<< Updated upstream import { HtmlHTMLAttributes, useEffect } from 'react'; @@ -39,6 +40,60 @@ export default function Home() {

Dashboard +======= +import { useEffect } from 'react'; + + +export default function Home() { + let start: boolean = true; + useEffect(() => { + if (start) { + start = false; + let visible: boolean = true; + let animation: boolean = true; //TODO ajouter un bouton pour arreter l'animation + let con: HTMLElement | null = document.getElementById('console'); + window.setInterval(function () { + if (con !== null && visible === true && animation === true) { + con.className = 'console invisible'; + visible = false; + } else if (con !== null && animation === true) { + con.className = 'console'; + visible = true; + } + }, 400); + let word: HTMLElement | null = document.getElementById('text') + let text: string = "Peer-at-Code"; + for (let i: number = 0; i < text.length; i++) { + setTimeout(function () { + if (word !== null) + word.innerHTML += text.charAt(i); + }, 410 * i) + } + } + }, []); + return ( +
+
+
+

+ Bienvenu sur +

+

+ +
_
+

+

+ Dashboard +
+
+
+
+ +

+ Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker. +

+
+>>>>>>> Stashed changes
); diff --git a/next.config.js b/next.config.js index 3bc06a0..9bbc123 100644 --- a/next.config.js +++ b/next.config.js @@ -1,6 +1,10 @@ /** @type {import('next').NextConfig} */ const nextConfig = { +<<<<<<< Updated upstream reactStrictMode: false, // Recommended for the `pages` directory, default in `app`. +======= + reactStrictMode: true, // Recommended for the `pages` directory, default in `app`. +>>>>>>> Stashed changes swcMinify: true, experimental: { appDir: true From b46a73ebe7cce830e925b9c4ccaeba1e5fc8295f Mon Sep 17 00:00:00 2001 From: Nicolas VINCENT Date: Thu, 23 Feb 2023 14:20:33 +0100 Subject: [PATCH 4/5] update/home-page-fix update home page --- app/page.tsx | 40 ---------------------------------------- next.config.js | 4 ---- 2 files changed, 44 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index 09734ee..8cdca94 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,46 +1,7 @@ 'use client'; import AppLink from '@/ui/AppLink'; -<<<<<<< Updated upstream -import { HtmlHTMLAttributes, useEffect } from 'react'; - -export default function Home() { - useEffect(() => { - let visible:boolean = true; - let animation:boolean = true; //TODO ajouter un bouton pour arreter l'animation - let con: HTMLElement | null = document.getElementById('console'); - window.setInterval(function() { - if(con !== null && visible === true && animation === true){ - con.className = 'console invisible'; - visible = false; - }else if(con !== null && animation ===true){ - con.className = 'console'; - visible = true; - } - }, 400); - let word:HTMLElement | null = document.getElementById('text') - let text: string= "Peer-at-Code"; - for (let i:number = 0; i < text.length; i++) { - setTimeout(function(){ - if(word !== null) - word.innerHTML += text.charAt(i); - }, 410 * i ) - } - } , []); - return ( -
-
-

- Bienvenu sur -

-

- -
_
-

-

- Dashboard -======= import { useEffect } from 'react'; @@ -93,7 +54,6 @@ export default function Home() { Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.

->>>>>>> Stashed changes
); diff --git a/next.config.js b/next.config.js index 9bbc123..b859826 100644 --- a/next.config.js +++ b/next.config.js @@ -1,10 +1,6 @@ /** @type {import('next').NextConfig} */ const nextConfig = { -<<<<<<< Updated upstream - reactStrictMode: false, // Recommended for the `pages` directory, default in `app`. -======= reactStrictMode: true, // Recommended for the `pages` directory, default in `app`. ->>>>>>> Stashed changes swcMinify: true, experimental: { appDir: true From 4b664f91867fab622f8b69e64498f90171959f10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A9o?= <43091603+glazk0@users.noreply.github.com> Date: Sun, 26 Feb 2023 20:07:56 +0100 Subject: [PATCH 5/5] Fix Console --- app/page.tsx | 67 +++++++++++++++------------------------------- styles/globals.css | 13 +++++---- ui/Console.tsx | 38 ++++++++++++++++++++++++++ 3 files changed, 65 insertions(+), 53 deletions(-) create mode 100644 ui/Console.tsx diff --git a/app/page.tsx b/app/page.tsx index 8cdca94..0e7ced2 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,61 +1,36 @@ -'use client'; - import AppLink from '@/ui/AppLink'; - -import { useEffect } from 'react'; - +import Console from '@/ui/Console'; export default function Home() { - let start: boolean = true; - useEffect(() => { - if (start) { - start = false; - let visible: boolean = true; - let animation: boolean = true; //TODO ajouter un bouton pour arreter l'animation - let con: HTMLElement | null = document.getElementById('console'); - window.setInterval(function () { - if (con !== null && visible === true && animation === true) { - con.className = 'console invisible'; - visible = false; - } else if (con !== null && animation === true) { - con.className = 'console'; - visible = true; - } - }, 400); - let word: HTMLElement | null = document.getElementById('text') - let text: string = "Peer-at-Code"; - for (let i: number = 0; i < text.length; i++) { - setTimeout(function () { - if (word !== null) - word.innerHTML += text.charAt(i); - }, 410 * i) - } - } - }, []); return (
-
-

- Bienvenu sur -

-

- -
_
-

-

+
+

Bienvenu sur

+ + + Dashboard
-
- -

- Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker. -

+
+ +

+ Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en + page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis + les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour + réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq + siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu + n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles + Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion + dans des applications de mise en page de texte, comme Aldus PageMaker. +

); } - diff --git a/styles/globals.css b/styles/globals.css index c786c2e..9ed3a33 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -2,10 +2,9 @@ @tailwind components; @tailwind utilities; -.console{ - display:inline-block; - position:relative; - top:-0.14em; - left:5px; - height: 1rem; -} \ No newline at end of file +@layer components { + .console { + @apply relative top-0.5 inline-block; + /* make it hidden then visible every seconde */ + } +} diff --git a/ui/Console.tsx b/ui/Console.tsx new file mode 100644 index 0000000..9dc2823 --- /dev/null +++ b/ui/Console.tsx @@ -0,0 +1,38 @@ +'use client'; + +import { cn } from '@/lib/utils'; +import { useEffect, useState } from 'react'; + +export default function Console({ text, className }: { text: string; className?: string }) { + const [message, setMessage] = useState(''); + const [typingIndex, setTypingIndex] = useState(0); + + const typingDelay = 400; // The delay between each character being typed, in milliseconds + + useEffect(() => { + const intervalId = setInterval(() => { + setTypingIndex((prevIndex) => prevIndex + 1); + }, typingDelay); + + return () => clearInterval(intervalId); + }, [text]); + + useEffect(() => { + if (typingIndex <= text.length) { + setMessage(text.slice(0, typingIndex)); + } + }, [typingIndex, text]); + + return ( +
+ {message} +
+ _ +
+
+ ); +}