diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/CodeFrame.tsx | 15 | ||||
| -rw-r--r-- | src/components/HomepageFeatures/index.tsx | 89 | ||||
| -rw-r--r-- | src/components/HomepageFeatures/styles.module.css | 11 | ||||
| -rw-r--r-- | src/pages/index.tsx | 11 |
4 files changed, 69 insertions, 57 deletions
diff --git a/src/components/CodeFrame.tsx b/src/components/CodeFrame.tsx index 957eb5b..22cff25 100644 --- a/src/components/CodeFrame.tsx +++ b/src/components/CodeFrame.tsx @@ -19,18 +19,11 @@ const widthClasses = { "1/3": "w-1/3", }; -const dimensionClasses = ["border-4"]; +const dimensionClasses = ["border-4", "flex", "flex-row", "items-center"]; -const lightModeClasses = ["bg-white", "text-black", "border-black"]; +const lightModeClasses = ["bg-codeBg", "text-black", "border-black"]; -const darkModeClasses = [ - "bg-slate-950", - "text-white", - "border-white", - "shadow-neowhite", -].map((className) => `dark:${className}`); - -const classes = [...dimensionClasses, ...lightModeClasses, ...darkModeClasses]; +const classes = [...dimensionClasses, ...lightModeClasses]; const Frame = ({ rainbow, @@ -47,7 +40,7 @@ const Frame = ({ return ( <div className={cls}> <CodeBlock - className="!rounded-none h-full" + className="!rounded-none !mb-0 px-4 py-2" language={language} title={title} > diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx index 91ef460..2191ea1 100644 --- a/src/components/HomepageFeatures/index.tsx +++ b/src/components/HomepageFeatures/index.tsx @@ -1,53 +1,94 @@ -import React from 'react'; -import clsx from 'clsx'; -import styles from './styles.module.css'; +import React from "react"; +import clsx from "clsx"; +import styles from "./styles.module.css"; +import CodeFrame from "../CodeFrame"; + +type ShowCase = + | { code: string; language: string } + | { img: React.ComponentType<React.ComponentProps<"img">> }; type FeatureItem = { title: string; - Svg: React.ComponentType<React.ComponentProps<'svg'>>; description: JSX.Element; + showcase: ShowCase; }; const FeatureList: FeatureItem[] = [ { - title: 'Easy to Use', - Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default, + title: "Beautiful, Ready-to-Use Tools", + description: ( + <> + NeoHaskell offers a clean and intuitive language design, complemented by + a core library that provides all the tools you need to start creating + amazing software right away. + <br /> + START CODING + </> + ), + showcase: { + language: "haskell", + code: `processLogs rawLogs = + rawLogs + |> map parseLogs + |> collect + |> andThen (filter isImportant) + |> andThen (map toStructuredLog)`, + }, + }, + { + title: "Hassle-Free Development Environment", description: ( <> - Docusaurus was designed from the ground up to be easily installed and - used to get your website up and running quickly. + NeoHaskell's CLI tool installs all required utilities and makes + multi-platform support a breeze. Whether you're compiling to native code + or generating WebAssembly for browser compatibility, you'll enjoy error + messages that guide, not hinder. + <br /> + EMPOWER YOUR DEVELOPMENT </> ), + showcase: { code: "", language: "" }, }, { - title: 'Focus on What Matters', - Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default, + title: "Focus-Driven, Event-Driven", description: ( <> - Docusaurus lets you focus on your docs, and we'll do the chores. Go - ahead and move your docs into the <code>docs</code> directory. + In NeoHaskell, you work directly events and functions that react to + them. Say goodbye to the cognitive overhead of managing state or + wrestling with dependency injection. Your focus stays where it belongs: + on solving problems and crafting solutions. + <br /> + BEGIN YOUR JOURNEY </> ), + showcase: { code: "", language: "" }, }, { - title: 'Powered by React', - Svg: require('@site/static/img/undraw_docusaurus_react.svg').default, + title: "Naturally Full-Stack", description: ( <> - Extend or customize your website layout by reusing React. Docusaurus can - be extended while reusing the same header and footer. + Relish the ease of crafting full-stack applications in a unified + language environment. NeoHaskell takes care of frontend-backend + communication, allowing you to focus solely on your application's logic. + <br /> + EXPERIENCE NATURAL FULL-STACK DEVELOPMENT </> ), + showcase: { code: "", language: "" }, }, ]; -function Feature({title, Svg, description}: FeatureItem) { +function Feature({ title, showcase, description }: FeatureItem) { + const showcaseComponent = + "code" in showcase ? ( + <CodeFrame language={showcase.language}>{showcase.code}</CodeFrame> + ) : ( + <showcase.img /> + ); return ( - <div className={clsx('col col--4')}> - <div className="text--center"> - <Svg className={styles.featureSvg} role="img" /> - </div> - <div className="text--center padding-horiz--md"> + <div className="flex p-4"> + {showcaseComponent} + <div className="p-7"> <h3>{title}</h3> <p>{description}</p> </div> @@ -57,9 +98,9 @@ function Feature({title, Svg, description}: FeatureItem) { export default function HomepageFeatures(): JSX.Element { return ( - <section className={styles.features}> + <section> <div className="container"> - <div className="row"> + <div className="col"> {FeatureList.map((props, idx) => ( <Feature key={idx} {...props} /> ))} diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css index b248eb2..e69de29 100644 --- a/src/components/HomepageFeatures/styles.module.css +++ b/src/components/HomepageFeatures/styles.module.css @@ -1,11 +0,0 @@ -.features { - display: flex; - align-items: center; - padding: 2rem 0; - width: 100%; -} - -.featureSvg { - height: 200px; - width: 200px; -} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 8644ef8..ccff804 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -58,17 +58,6 @@ export default function Home(): JSX.Element { <Layout description={`${siteConfig.tagline}`}> <HomepageHeader /> <div className="container grid grid-cols-1 gap-4"> - <CodeFrame - language="haskell" - shadowClass="shadow-neocyan" - width="full" - > - {`module Main where - -main :: IO () -main = putStrLn "Hello, World!"`} - </CodeFrame> - <p className="text-red-500 font-extrabold text-5xl"> If you're reading this, you probably found it by accident. This is a WIP project, and the site is far from finished. If you're curious |