diff --git a/app/bun.lock b/app/bun.lock index 9a9e6d1..aa139dd 100644 --- a/app/bun.lock +++ b/app/bun.lock @@ -9,6 +9,7 @@ "@universal-middleware/fastify": "^0.5.16", "clsx": "^2.1.1", "fastify": "^5.3.0", + "solid-highlight": "^0.1.26", "solid-js": "^1.9.5", "telefunc": "^0.2.3", "vike": "^0.4.228", @@ -666,6 +667,8 @@ "prettier-linter-helpers": ["prettier-linter-helpers@1.0.0", "", { "dependencies": { "fast-diff": "^1.1.2" } }, "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w=="], + "prismjs": ["prismjs@1.30.0", "", {}, "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw=="], + "process-warning": ["process-warning@5.0.0", "", {}, "sha512-a39t9ApHNx2L4+HBnQKqxxHNs1r7KF+Intd8Q/g1bUh6q0WIp9voPXJ/x0j+ZL45KF1pJd9+q2jLIRMfvEshkA=="], "punycode": ["punycode@2.3.1", "", {}, "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="], @@ -722,6 +725,8 @@ "sirv": ["sirv@3.0.1", "", { "dependencies": { "@polka/url": "^1.0.0-next.24", "mrmime": "^2.0.0", "totalist": "^3.0.0" } }, "sha512-FoqMu0NCGBLCcAkS1qA+XJIQTR6/JHfQXl+uGteNCQ76T91DMUjPa9xfmeqMY3z80nLSg9yQmNjK0Px6RWsH/A=="], + "solid-highlight": ["solid-highlight@0.1.26", "", { "peerDependencies": { "prismjs": "^1.29.0", "solid-js": "^1.8.0" } }, "sha512-Iw1mi3vE+YCBBBU/+HHc5y8VNULaGXUX4OK2c9TbzegOGCitzW0uNIvb0s3S0KoVv7Uma/KadWHNFXkwZCwPgQ=="], + "solid-js": ["solid-js@1.9.5", "", { "dependencies": { "csstype": "^3.1.0", "seroval": "^1.1.0", "seroval-plugins": "^1.1.0" } }, "sha512-ogI3DaFcyn6UhYhrgcyRAMbu/buBJitYQASZz5WzfQVPP10RD2AbCoRZ517psnezrasyCbWzIxZ6kVqet768xw=="], "solid-refresh": ["solid-refresh@0.6.3", "", { "dependencies": { "@babel/generator": "^7.23.6", "@babel/helper-module-imports": "^7.22.15", "@babel/types": "^7.23.6" }, "peerDependencies": { "solid-js": "^1.3" } }, "sha512-F3aPsX6hVw9ttm5LYlth8Q15x6MlI/J3Dn+o3EQyRTtTxidepSTwAYdozt01/YA+7ObcciagGEyXIopGZzQtbA=="], diff --git a/app/components/Button.tsx b/app/components/Button.tsx index be8be90..3ba46cb 100644 --- a/app/components/Button.tsx +++ b/app/components/Button.tsx @@ -24,7 +24,7 @@ type ButtonProps = { className?: string; } & ( | JSX.IntrinsicElements["button"] - | (JSX.IntrinsicElements["a"] & { href?: undefined }) + | (JSX.IntrinsicElements["a"] & { href: string }) ); export function Button({ diff --git a/app/components/Logo.tsx b/app/components/Logo.tsx new file mode 100644 index 0000000..3389d25 --- /dev/null +++ b/app/components/Logo.tsx @@ -0,0 +1,42 @@ +import type { JSX } from "solid-js"; + +import { createUniqueId } from "solid-js"; + +function LogomarkPaths() { + const id = createUniqueId(); + + return ( + <> + + + + + + + + + + + + ); +} + +export function Logo(props: JSX.IntrinsicElements["svg"]) { + return ( + + Memento Dev + + + ); +} diff --git a/app/components/Prose.tsx b/app/components/Prose.tsx new file mode 100644 index 0000000..8789a1c --- /dev/null +++ b/app/components/Prose.tsx @@ -0,0 +1,36 @@ +import type { JSX } from "solid-js"; + +import { Dynamic } from "solid-js/web"; +import clsx from "clsx"; + +type ProseProps = JSX.IntrinsicElements["div"] & { + class?: string; + as?: keyof JSX.IntrinsicElements; +}; + +export function Prose(props: ProseProps) { + const Component = props.as ?? "div"; + + return ( + + ); +} diff --git a/app/layouts/DocsLayout.tsx b/app/layouts/DocsLayout.tsx new file mode 100644 index 0000000..8c89626 --- /dev/null +++ b/app/layouts/DocsLayout.tsx @@ -0,0 +1,39 @@ +import { type Node } from "@markdoc/markdoc"; + +import { TableOfContents } from "@syntax/TableOfContents"; +import { PrevNextLinks } from "@syntax/PrevNextLinks"; +import { collectSections } from "@/lib/sections"; +import { DocsHeader } from "@syntax/DocsHeader"; +import { Prose } from "@syntax/Prose"; +import React from "react"; + +export function DocsLayout({ + children, + frontmatter: { title }, + estimatedReadingTime, + nodes, +}: { + children: React.ReactNode; + frontmatter: { title?: string }; + estimatedReadingTime?: string; + nodes: Array; +}) { + const tableOfContents = collectSections(nodes); + + return ( + <> +
+
+ + {children} +
+ +
+ + + + ); +} diff --git a/app/layouts/HeroBackground.tsx b/app/layouts/HeroBackground.tsx new file mode 100644 index 0000000..3da6dde --- /dev/null +++ b/app/layouts/HeroBackground.tsx @@ -0,0 +1,190 @@ +import type { JSX } from "solid-js"; + +import { createUniqueId } from "solid-js"; + +export function HeroBackground(props: JSX.IntrinsicElements["svg"]) { + const id = createUniqueId(); + + return ( + + ); +} diff --git a/app/layouts/HeroSection.tsx b/app/layouts/HeroSection.tsx new file mode 100644 index 0000000..acdd9df --- /dev/null +++ b/app/layouts/HeroSection.tsx @@ -0,0 +1,161 @@ +import type { JSX } from "solid-js"; + +import blurIndigoImage from "@/images/blur-indigo.webp"; +import blurCyanImage from "@/images/blur-cyan.webp"; +import { HeroBackground } from "./HeroBackground"; +import { Button } from "@/components/Button"; +import { Highlight } from "solid-highlight"; +import { Image } from "@/components/Image"; +import { For } from "solid-js"; +import clsx from "clsx"; + +const codeLanguage = "javascript"; +const code = `export default { + role: 'developer', + qualifications: [ + 'DWWM', + 'CDA', + 'CDUI', + ] +}`; + +const tabs = [ + { name: "memento-dev.config.js", isActive: true }, + { name: "package.json", isActive: false }, +]; + +function TrafficLightsIcon(props: JSX.IntrinsicElements["svg"]) { + return ( + + ); +} + +export function Hero() { + return ( +
+
+
+
+ +
+

+ Souviens-toi que tu développeras. +

+

+ Découvrez des ressources essentielles pour améliorer tes + compétences en développement. +

+
+ + +
+
+
+
+
+ +
+
+ + +
+
+
+
+
+
+ +
+ + {(tab) => ( +
+
+ {tab.name} +
+
+ )} + +
+
+ + + {code} + + {/* + {({ class, style, tokens, getLineProps, getTokenProps }) => ( + 
+                          
+                            {tokens.map((line, lineIndex) => (
+                              

+                                {line.map((token, tokenIndex) => (
+                                  
+                                ))}
+                              

+                            ))}
+                          
+
+ )} + */} +
+
+
+
+
+
+
+
+ ); +} diff --git a/app/package.json b/app/package.json index ac8b1d7..be49410 100755 --- a/app/package.json +++ b/app/package.json @@ -14,6 +14,7 @@ "@universal-middleware/fastify": "^0.5.16", "clsx": "^2.1.1", "fastify": "^5.3.0", + "solid-highlight": "^0.1.26", "solid-js": "^1.9.5", "telefunc": "^0.2.3", "vike": "^0.4.228",