rework/lightweight #15
@ -1,3 +1,4 @@
|
||||
**/node_modules
|
||||
**/node_modules/
|
||||
**/*.afphoto
|
||||
**/dist
|
||||
**/dist/
|
||||
.git
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,5 +1,6 @@
|
||||
/.env
|
||||
**/*~lock*
|
||||
.DS_Store
|
||||
|
||||
app-old/.pnpm-store
|
||||
app-old/node_modules
|
||||
|
||||
2
README.md
Normal file → Executable file
2
README.md
Normal file → Executable 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:
|
||||
|
||||
```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
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -7,11 +7,11 @@ export default function Image(props: ImageProps) {
|
||||
|
||||
return (
|
||||
<img
|
||||
loading="lazy"
|
||||
{...props}
|
||||
src={props.src}
|
||||
aria-hidden={isDecorationImage ? "true" : undefined}
|
||||
alt={isDecorationImage ? undefined : props.alt}
|
||||
loading="lazy"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
import logoUrl from "@/assets/logo.svg";
|
||||
|
||||
/* eslint-disable solid/no-innerhtml */
|
||||
|
||||
// https://vike.dev/Head
|
||||
|
||||
export default function HeadDefault() {
|
||||
@ -10,15 +8,9 @@ export default function HeadDefault() {
|
||||
<link rel="icon" href={logoUrl} />
|
||||
|
||||
<script
|
||||
async
|
||||
src={`https://www.googletagmanager.com/gtag/js?id=${import.meta.env.PUBLIC_ENV__GOOGLE_ANALYTICS}`}
|
||||
/>
|
||||
<script
|
||||
innerHTML={`window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', '${import.meta.env.PUBLIC_ENV__GOOGLE_ANALYTICS}');`}
|
||||
defer
|
||||
src="https://cloud.umami.is/script.js"
|
||||
data-website-id="ba70261e-d145-4dd1-b0e8-27cbf4927b74"
|
||||
/>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
@ -28,7 +20,7 @@ export default function HeadDefault() {
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<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:wght@400;600&family=Lexend:wght@400;500;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</>
|
||||
|
||||
@ -19,7 +19,7 @@ export default {
|
||||
"Découvrez des synthèses et ressources open-source dans le développement informatique.",
|
||||
|
||||
htmlAttributes: {
|
||||
class: "h-full antialiased",
|
||||
class: "antialiased",
|
||||
},
|
||||
bodyAttributes: {
|
||||
class: "flex min-h-full bg-white",
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import type { JSX } from "solid-js";
|
||||
|
||||
import blurIndigoImage from "@/images/blur-indigo.webp";
|
||||
import blurCyanImage from "@/images/blur-cyan.webp";
|
||||
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() {
|
||||
return (
|
||||
<div class="overflow-hidden bg-slate-900">
|
||||
@ -58,14 +46,17 @@ export function HeroSection() {
|
||||
width={530}
|
||||
height={530}
|
||||
/>
|
||||
|
||||
<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">
|
||||
Souviens-toi que tu développeras.
|
||||
</p>
|
||||
|
||||
<p class="mt-3 text-2xl tracking-tight text-slate-400">
|
||||
Découvrez des ressources essentielles pour améliorer tes
|
||||
compétences en développement.
|
||||
</p>
|
||||
|
||||
<div class="mt-8 flex gap-4 md:justify-center lg:justify-start">
|
||||
<Button href="/docs">Accédez aux ressources</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]">
|
||||
<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 class="relative">
|
||||
<Image
|
||||
class="absolute -top-64 -right-64"
|
||||
@ -88,14 +80,18 @@ export function HeroSection() {
|
||||
alt=""
|
||||
width={530}
|
||||
height={530}
|
||||
loading="eager"
|
||||
/>
|
||||
|
||||
<Image
|
||||
class="absolute -right-44 -bottom-40"
|
||||
src={blurIndigoImage}
|
||||
alt=""
|
||||
width={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" />
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user