GauthierWebDev/memento-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: GauthierWebDev:bc3cbe93f9ae11d872408aebc57db66aa3db50df
Branches Tags
GauthierWebDev:main
GauthierWebDev:docs/cda
...
compare: GauthierWebDev:6e1eb5748962728a59936c39bc0b698704136675
Branches Tags
GauthierWebDev:docs/cda
GauthierWebDev:main

2 Commits
bc3cbe93f9 ... 6e1eb57489

Author SHA1 Message Date
GauthierWebDev
6e1eb57489 style: Remove Google Analytics script and update font CSS link 2025-04-21 19:09:05 +02:00
GauthierWebDev
a5a5644f10 style: Update lazy loading attribute in Image component 2025-04-21 18:58:53 +02:00
8 changed files with 16 additions and 76 deletions
Show Stats Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

1
.gitignore vendored
View File

@ -1,5 +1,6 @@
/.env /.env
**/*~lock* **/*~lock*
.DS_Store
app-old/.pnpm-store app-old/.pnpm-store
app-old/node_modules app-old/node_modules

2
README.md Normal file → Executable file
View File

@ -1,7 +1,7 @@
Generated with [vike.dev/new](https://vike.dev/new) ([version 429](https://www.npmjs.com/package/create-vike/v/0.0.429)) using this command: Generated with [vike.dev/new](https://vike.dev/new) ([version 429](https://www.npmjs.com/package/create-vike/v/0.0.429)) using this command:
```sh ```sh
bun create vike@latest --solid --tailwindcss --authjs --telefunc --fastify --google-analytics --eslint --prettier --biome bun create vike@latest --solid --tailwindcss --authjs --telefunc --fastify --eslint --prettier --biome
``` ```
## Contents ## Contents

49
app/README.md
View File

@ -1,49 +0,0 @@
Generated with [vike.dev/new](https://vike.dev/new) ([version 429](https://www.npmjs.com/package/create-vike/v/0.0.429)) using this command:
```sh
bun create vike@latest --solid --tailwindcss --telefunc --fastify --google-analytics --eslint --prettier --biome
```
## Contents
* [`/pages/+config.ts`](#pagesconfigts)
* [Routing](#routing)
* [`/pages/_error/+Page.jsx`](#pages_errorpagejsx)
* [`/pages/+onPageTransitionStart.ts` and `/pages/+onPageTransitionEnd.ts`](#pagesonpagetransitionstartts-and-pagesonpagetransitionendts)
* [SSR](#ssr)
* [HTML Streaming](#html-streaming)
This app is ready to start. It's powered by [Vike](https://vike.dev) and [SolidJS](https://www.solidjs.com/guides/getting-started).
### `/pages/+config.ts`
Such `+` files are [the interface](https://vike.dev/config) between Vike and your code. It defines:
* A default [`<Layout>` component](https://vike.dev/Layout) (that wraps your [`<Page>` components](https://vike.dev/Page)).
* A default [`title`](https://vike.dev/title).
* Global [`<head>` tags](https://vike.dev/head-tags).
### Routing
[Vike's built-in router](https://vike.dev/routing) lets you choose between:
* [Filesystem Routing](https://vike.dev/filesystem-routing) (the URL of a page is determined based on where its `+Page.jsx` file is located on the filesystem)
* [Route Strings](https://vike.dev/route-string)
* [Route Functions](https://vike.dev/route-function)
### `/pages/_error/+Page.jsx`
The [error page](https://vike.dev/error-page) which is rendered when errors occur.
### `/pages/+onPageTransitionStart.ts` and `/pages/+onPageTransitionEnd.ts`
The [`onPageTransitionStart()` hook](https://vike.dev/onPageTransitionStart), together with [`onPageTransitionEnd()`](https://vike.dev/onPageTransitionEnd), enables you to implement page transition animations.
### SSR
SSR is enabled by default. You can [disable it](https://vike.dev/ssr) for all your pages or only for some pages.
### HTML Streaming
You can enable/disable [HTML streaming](https://vike.dev/stream) for all your pages, or only for some pages while still using it for others.

2
app/components/Image.tsx
View File

@ -7,11 +7,11 @@ export default function Image(props: ImageProps) {
return ( return (
<img <img
loading="lazy"
{...props} {...props}
src={props.src} src={props.src}
aria-hidden={isDecorationImage ? "true" : undefined} aria-hidden={isDecorationImage ? "true" : undefined}
alt={isDecorationImage ? undefined : props.alt} alt={isDecorationImage ? undefined : props.alt}
loading="lazy"
/> />
); );
} }

16
app/pages/+Head.tsx
View File

@ -1,7 +1,5 @@
import logoUrl from "@/assets/logo.svg"; import logoUrl from "@/assets/logo.svg";
/* eslint-disable solid/no-innerhtml */
// https://vike.dev/Head // https://vike.dev/Head
export default function HeadDefault() { export default function HeadDefault() {
@ -10,15 +8,9 @@ export default function HeadDefault() {
<link rel="icon" href={logoUrl} /> <link rel="icon" href={logoUrl} />
<script <script
async defer
src={`https://www.googletagmanager.com/gtag/js?id=${import.meta.env.PUBLIC_ENV__GOOGLE_ANALYTICS}`} src="https://cloud.umami.is/script.js"
/> data-website-id="ba70261e-d145-4dd1-b0e8-27cbf4927b74"
<script
innerHTML={`window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${import.meta.env.PUBLIC_ENV__GOOGLE_ANALYTICS}');`}
/> />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
@ -28,7 +20,7 @@ export default function HeadDefault() {
crossorigin="anonymous" crossorigin="anonymous"
/> />
<link <link
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lexend:wght@100..900&display=swap" href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400;600;1,14..32,400;600&family=Lexend:wght@400;500;700&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
</> </>

2
app/pages/+config.ts
View File

@ -19,7 +19,7 @@ export default {
"Découvrez des synthèses et ressources open-source dans le développement informatique.", "Découvrez des synthèses et ressources open-source dans le développement informatique.",
htmlAttributes: { htmlAttributes: {
class: "h-full antialiased", class: "antialiased",
}, },
bodyAttributes: { bodyAttributes: {
class: "flex min-h-full bg-white", class: "flex min-h-full bg-white",

20
app/partials/HeroSection.tsx
View File

@ -1,5 +1,3 @@
import type { JSX } from "solid-js";
import blurIndigoImage from "@/images/blur-indigo.webp"; import blurIndigoImage from "@/images/blur-indigo.webp";
import blurCyanImage from "@/images/blur-cyan.webp"; import blurCyanImage from "@/images/blur-cyan.webp";
import { HeroBackground } from "./HeroBackground"; import { HeroBackground } from "./HeroBackground";
@ -35,16 +33,6 @@ const snippets = [
}, },
]; ];
function TrafficLightsIcon(props: JSX.IntrinsicElements["svg"]) {
return (
<svg aria-hidden="true" viewBox="0 0 42 10" fill="none" {...props}>
<circle cx="5" cy="5" r="4.5" />
<circle cx="21" cy="5" r="4.5" />
<circle cx="37" cy="5" r="4.5" />
</svg>
);
}
export function HeroSection() { export function HeroSection() {
return ( return (
<div class="overflow-hidden bg-slate-900"> <div class="overflow-hidden bg-slate-900">
@ -58,14 +46,17 @@ export function HeroSection() {
width={530} width={530}
height={530} height={530}
/> />
<div class="relative"> <div class="relative">
<p class="inline bg-linear-to-r from-indigo-200 via-violet-400 to-indigo-200 bg-clip-text font-display text-5xl tracking-tight text-transparent"> <p class="inline bg-linear-to-r from-indigo-200 via-violet-400 to-indigo-200 bg-clip-text font-display text-5xl tracking-tight text-transparent">
Souviens-toi que tu développeras. Souviens-toi que tu développeras.
</p> </p>
<p class="mt-3 text-2xl tracking-tight text-slate-400"> <p class="mt-3 text-2xl tracking-tight text-slate-400">
Découvrez des ressources essentielles pour améliorer tes Découvrez des ressources essentielles pour améliorer tes
compétences en développement. compétences en développement.
</p> </p>
<div class="mt-8 flex gap-4 md:justify-center lg:justify-start"> <div class="mt-8 flex gap-4 md:justify-center lg:justify-start">
<Button href="/docs">Accédez aux ressources</Button> <Button href="/docs">Accédez aux ressources</Button>
<Button <Button
@ -81,6 +72,7 @@ export function HeroSection() {
<div class="absolute inset-x-[-50vw] -top-32 -bottom-48 [mask-image:linear-gradient(transparent,white,white)] lg:-top-32 lg:right-0 lg:-bottom-32 lg:left-[calc(50%+14rem)] lg:[mask-image:none]"> <div class="absolute inset-x-[-50vw] -top-32 -bottom-48 [mask-image:linear-gradient(transparent,white,white)] lg:-top-32 lg:right-0 lg:-bottom-32 lg:left-[calc(50%+14rem)] lg:[mask-image:none]">
<HeroBackground class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 lg:left-0 lg:translate-x-0 lg:translate-y-[-60%]" /> <HeroBackground class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 lg:left-0 lg:translate-x-0 lg:translate-y-[-60%]" />
</div> </div>
<div class="relative"> <div class="relative">
<Image <Image
class="absolute -top-64 -right-64" class="absolute -top-64 -right-64"
@ -88,14 +80,18 @@ export function HeroSection() {
alt="" alt=""
width={530} width={530}
height={530} height={530}
loading="eager"
/> />
<Image <Image
class="absolute -right-44 -bottom-40" class="absolute -right-44 -bottom-40"
src={blurIndigoImage} src={blurIndigoImage}
alt="" alt=""
width={567} width={567}
height={567} height={567}
loading="eager"
/> />
<div class="absolute inset-0 rounded-2xl bg-linear-to-tr from-violet-300 via-violet-300/70 to-purple-300 opacity-10 blur-lg" /> <div class="absolute inset-0 rounded-2xl bg-linear-to-tr from-violet-300 via-violet-300/70 to-purple-300 opacity-10 blur-lg" />
<div class="absolute inset-0 rounded-2xl bg-linear-to-tr from-violet-300 via-violet-300/70 to-purple-300 opacity-10" /> <div class="absolute inset-0 rounded-2xl bg-linear-to-tr from-violet-300 via-violet-300/70 to-purple-300 opacity-10" />