chore(website): move website build onto main

p-m-p · Jan 14, 2024 · 98481e1 · 98481e1
1 parent e45bbc4
commit 98481e1
Show file tree

Hide file tree

Showing 26 changed files with 718 additions and 1,023 deletions.
diff --git a/packages/examples/package.json b/packages/examples/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@boxslider/examples",
+  "name": "examples",
   "private": true,
   "version": "2.3.10",
   "type": "module",

diff --git a/packages/website/.gitignore b/packages/website/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/website/index.html b/packages/website/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/icon-32.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Boxslider</title>
+  </head>
+
+  <body
+    class="bg-neutral-50 dark:bg-neutral-900 text-neutral-900 dark:text-neutral-100 h-screen">
+    <div id="root" class="h-full"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/website/package.json b/packages/website/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "website",
+  "private": true,
+  "version": "2.2.2",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-react": "^0.248.0",
+    "react-syntax-highlighter": "^15.5.0"
+  },
+  "devDependencies": {
+    "@types/react-syntax-highlighter": "^15.5.6",
+    "autoprefixer": "^10.4.13",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.2.4"
+  }
+}
diff --git a/packages/website/postcss.config.cjs b/packages/website/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/packages/website/public/icon-32.png b/packages/website/public/icon-32.png
diff --git a/packages/website/public/icon.png b/packages/website/public/icon.png
diff --git a/packages/website/public/logo-small.webp b/packages/website/public/logo-small.webp
diff --git a/packages/website/src/components/CallToAction.tsx b/packages/website/src/components/CallToAction.tsx
@@ -0,0 +1,27 @@
+import { ComponentPropsWithoutRef } from 'react'
+
+interface CallToActionProps extends ComponentPropsWithoutRef<'a'> {
+  variant?: 'primary' | 'secondary'
+}
+
+export default function CallToAction({
+  children,
+  variant = 'primary',
+  ...props
+}: CallToActionProps) {
+  let className =
+    'px-4 py-2 rounded-lg text-lg font-semibold inline-flex shrink gap-3 items-center transition-colors uppercase'
+
+  if (variant === 'primary') {
+    className += ' border border-orange-500 bg-orange-800 hover:bg-orange-700'
+  } else {
+    className +=
+      ' border border-neutral-500 bg-transparent hover:bg-neutral-500/25'
+  }
+
+  return (
+    <a className={className} {...props}>
+      {children}
+    </a>
+  )
+}
diff --git a/packages/website/src/home/ExampleCard.tsx b/packages/website/src/home/ExampleCard.tsx
@@ -0,0 +1,52 @@
+import { Codepen } from 'lucide-react'
+
+export interface ExampleCardProps {
+  title: string
+  description: string
+  url: string
+  level: 'easy' | 'intermediate' | 'advanced'
+}
+
+export default function ExampleCard({
+  description,
+  level,
+  title,
+  url,
+}: ExampleCardProps) {
+  let levelBarWidth = 'w-1/6'
+
+  if (level === 'intermediate') {
+    levelBarWidth = 'w-1/2'
+  } else if (level === 'advanced') {
+    levelBarWidth = 'w-5/6'
+  }
+
+  return (
+    <div>
+      <div className="text-right">
+        <div className="h-1 bg-neutral-700">
+          <div className={`${levelBarWidth} h-full bg-orange-700`}></div>
+        </div>
+        <span className="uppercase text-neutral-600 text-sm font-bold mx-2">
+          {level}
+        </span>
+      </div>
+
+      <div className="p-4 pt-0">
+        <h3 className="text-xl mb-2">{title}</h3>
+        <p className="text-neutral-300">{description}</p>
+
+        <div className="mt-4">
+          <a
+            href={url}
+            target="_blank"
+            rel="noreferrer"
+            className="hover:text-orange-600 transition-colors flex flex-row gap-2">
+            <Codepen />
+            View on Codepen
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/website/src/home/FeatureTile.tsx b/packages/website/src/home/FeatureTile.tsx
@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react'
+
+type FeatureTileProps = {
+  children: string
+  icon: ReactNode
+  title: string
+}
+
+export default function FeatureTile({
+  children,
+  icon,
+  title,
+}: FeatureTileProps) {
+  return (
+    <div className="bg-neutral-800 p-4 rounded-lg ring-1 ring-neutral-700">
+      <h3 className="text-2xl mb-2 text-orange-500 font-bold flex flex-row items-center justify-center gap-3">
+        {icon}
+        {title}
+      </h3>
+      <p className="text-lg text-neutral-200 font-light text-center">
+        {children}
+      </p>
+    </div>
+  )
+}
diff --git a/packages/website/src/home/index.tsx b/packages/website/src/home/index.tsx
@@ -0,0 +1,109 @@
+import { Code, Github, Play, Sparkles, SearchCheck } from 'lucide-react'
+import CodeExample from '../layout/CodeExample'
+import ContentSection from '../layout/ContentSection'
+import Paragraph from '../layout/Paragraph'
+import CallToAction from '../components/CallToAction'
+import FeatureTile from './FeatureTile'
+import initExamples from './initExamples'
+import Header from '../layout/Header'
+import ExampleCard from './ExampleCard'
+
+function Home() {
+  return (
+    <article className="bg-gradient-to-tl from-neutral-800 to-neutral-900">
+      <div className="flex flex-col">
+        <Header />
+        <div className="container mx-auto px-4 pt-16 pb-4 text-center">
+          <h1 className="text-4xl md:text-6xl xl:text-7xl font-extrabold max-w-4xl xl:max-w-6xl mx-auto mb-8 xl:mb-12">
+            A{' '}
+            <span className="bg-clip-text bg-gradient-to-tr from-orange-700 to-orange-400 text-transparent">
+              super small
+            </span>{' '}
+            content slider for modern web projects
+          </h1>
+
+          <p className="text-neutral-300 font-light text-sm sm:text-lg xl:text-xl">
+            No third party dependencies and just 3-4kb download size
+            (compressed) for a single effect
+          </p>
+
+          <p className="inline-flex flex-col sm:flex-row justify-center gap-4 my-20">
+            <CallToAction href="#getting-started">
+              <Play /> Get started
+            </CallToAction>
+            <CallToAction
+              variant="secondary"
+              href="https://github.com/p-m-p/slider">
+              <Github /> View on Github
+            </CallToAction>
+          </p>
+
+          <section className="grid grid-cols-1 md:grid-cols-3 gap-6 md:items-center max-w-7xl mx-auto">
+            <FeatureTile title="Mulitiple effects" icon={<Sparkles />}>
+              Carousel, fade, tile and 3D slide transitions to suit mulitiple
+              different project requirements
+            </FeatureTile>
+            <FeatureTile title="Easy to use" icon={<Code />}>
+              User your own styles! There&apos;s no complicated setup or style
+              sheets to include
+            </FeatureTile>
+            <FeatureTile title="SEO and Accessibility" icon={<SearchCheck />}>
+              SSR compatible, ARIA attributes and easy to implement accessible
+              controls
+            </FeatureTile>
+          </section>
+        </div>
+      </div>
+
+      <main className="max-w-6xl mx-auto mt-16">
+        <ContentSection id="getting-started" title="Getting started">
+          <Paragraph>Install the required package for your project.</Paragraph>
+          <CodeExample
+            shell="npm install --save @boxslider/slider"
+            reactShell="npm install --save @boxslider/react"
+          />
+          <Paragraph>
+            Import the module or add the browser build to your HTML to
+            initialise a slider.
+          </Paragraph>
+          <CodeExample
+            ts={initExamples.ts}
+            react={initExamples.react}
+            html={initExamples.html}
+          />
+          <Paragraph>
+            Check the{' '}
+            <a href="https://github.com/p-m-p/slider#usage">
+              project on Github
+            </a>{' '}
+            for full instructions on how to use the Slider and see some of the
+            examples below
+          </Paragraph>
+        </ContentSection>
+
+        <ContentSection title="Examples">
+          <ul className="grid grid-cols-2 gap-8">
+            <li className="rounded bg-neutral-800">
+              <ExampleCard
+                title="Basic carousel"
+                description="Minimal example of what is needed to get started with creating a content carousel."
+                level="easy"
+                url="https://codepen.io/p-m-p/pen/mdQVxKZ"
+              />
+            </li>
+            <li className="rounded bg-neutral-800">
+              <ExampleCard
+                title="Full page fade effect with controls"
+                description="Responsive hero style carousel that fills the page height and has controls for slide navigation"
+                level="intermediate"
+                url="https://codepen.io/p-m-p/pen/vYQGOrW"
+              />
+            </li>
+          </ul>
+        </ContentSection>
+      </main>
+    </article>
+  )
+}
+
+export default Home
diff --git a/packages/website/src/home/initExamples.ts b/packages/website/src/home/initExamples.ts
@@ -0,0 +1,54 @@
+const ts = `import { BoxSlider, FadeSlider } from '@boxslider/slider'
+
+const slider = new BoxSlider(document.querySelector('#slider'), {
+  effect: new FadeSlider(),
+  speed: 300,
+})`
+
+const react = `import { FadeSlider } from '@boxslider/react'
+
+export function Slider() {
+  const slideStyles = { height: '100%', width: '100%' }
+
+  return (
+    <FadeSlider style={{ height: '400px', width: '800px' }}>
+      <div style={slideStyles}>Slide one</div>
+      <div style={slideStyles}>Slide two</div>
+      <div style={slideStyles}>Slide three</div>
+    </FadeSlider>
+  )
+}
+`
+const html = `<html>
+<head>
+  <style>
+    #slider {
+      height: 400px;
+      width: 800px;
+    }
+
+    .slide {
+      height: 100%;
+      width: 100%;
+    }
+  </style>
+</head>
+<body>
+  <div id="slider">
+    <div class="slide">Slide one</div>
+    <div class="slide">Slide two</div>
+    <div class="slide">Slide three</div>
+  </div>
+
+  <script src="/node_modules/@boxslider/slider/dist/browser/index.min.js"></script>
+  <script>
+    new $bs.BoxSlider(document.querySelector('#slider'), {
+      autoScroll: true,
+      effect: new $bs.FadeSlider()
+    })
+  </script>
+</body>
+</html>
+`
+
+export default { html, react, ts }
diff --git a/packages/website/src/index.css b/packages/website/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;