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

rework/lightweight #12

Merged
GauthierWebDev merged 106 commits from rework/lightweight into main 2025-04-21 16:27:38 +00:00
Conversation 0 Commits 106 Files Changed 251 +17 -26
3 changed files with 17 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7c20ba9824 - Show all commits

7
app/components/Highlight.tsx
View File

@ -1,7 +1,8 @@
import type { JSX, ComponentProps, ParentComponent } from "solid-js"; import type { ComponentProps, ParentComponent } from "solid-js";
import { createEffect, createMemo, mergeProps, on, splitProps } from "solid-js"; import { createEffect, createMemo, mergeProps, on, splitProps } from "solid-js";
import * as Prismjs from "prismjs"; import * as Prismjs from "prismjs";
import clsx from "clsx";
/** /**
* @see https://prismjs.com/#supported-languages * @see https://prismjs.com/#supported-languages
@ -345,9 +346,9 @@ export const Highlight: ParentComponent<Props> = (_props) => {
); );
return ( return (
<pre> <pre class={clsx("prism-code flex overflow-x-auto pb-6", languageClass())}>
<code <code
class={`${languageClass()} ${props.class || ""}`} class={clsx("px-4", props.class)}
innerHTML={highlightedCode()} innerHTML={highlightedCode()}
{...rest} {...rest}
> >

3
app/layouts/LayoutDefault.tsx
View File

@ -129,14 +129,13 @@ type DefaultLayoutProps = {
export default function DefaultLayout(props: DefaultLayoutProps) { export default function DefaultLayout(props: DefaultLayoutProps) {
const { urlPathname } = usePageContext(); const { urlPathname } = usePageContext();
const isHomePage = urlPathname === "/";
return ( return (
<> <>
<div class="flex w-full flex-col font-sans"> <div class="flex w-full flex-col font-sans">
<Header /> <Header />
{isHomePage && <HeroSection />} {urlPathname === "/" && <HeroSection />}
<div class="relative mx-auto w-full flex max-w-8xl flex-auto justify-center sm:px-2 lg:px-8 xl:px-12"> <div class="relative mx-auto w-full flex max-w-8xl flex-auto justify-center sm:px-2 lg:px-8 xl:px-12">
<div class="hidden lg:relative lg:block lg:flex-none"> <div class="hidden lg:relative lg:block lg:flex-none">

33
app/layouts/prism.css
View File

@ -1,55 +1,46 @@
pre[class*="language-"] { pre[class*=language-] {
color: var(--color-slate-50); color: var(--color-slate-50)
} }
.token.tag, .token.tag,
.token.class-name, .token.class-name,
.token.selector, .token.selector,
.token.selector .class, .token.selector .class,
.token.selector.class, .token.selector.class,
.token.function { .token.function {
color: var(--color-pink-400); color: var(--color-pink-400)
} }
.token.attr-name, .token.attr-name,
.token.keyword,
.token.rule, .token.rule,
.token.pseudo-class, .token.pseudo-class,
.token.important { .token.important {
color: var(--color-slate-300); color: var(--color-slate-300)
} }
.token.keyword,
.token.module { .token.module {
color: var(--color-pink-400); color: var(--color-pink-400)
} }
.token.attr-value, .token.attr-value,
.token.class, .token.class,
.token.string, .token.string,
.token.property { .token.property {
color: var(--color-sky-300); color: var(--color-sky-300)
} }
.token.punctuation, .token.punctuation,
.token.attr-equals { .token.attr-equals {
color: var(--color-slate-500); color: var(--color-slate-500)
} }
.token.unit, .token.unit,
.language-css .token.function { .language-css .token.function {
color: var(--color-teal-200); color: var(--color-teal-200)
} }
.token.comment, .token.comment,
.token.operator, .token.operator,
.token.combinator { .token.combinator {
color: var(--color-slate-400); color: var(--color-slate-400)
} }
.prism-code { .prism-code {
margin: 0; margin: 0
} }
.prism-code + .prism-code { .prism-code + .prism-code {
margin-bottom: 1rem; margin-bottom: 1rem
} }