diff --git a/examples/with-elasticsearch/lib/elasticsearch.js b/examples/with-elasticsearch/lib/elasticsearch.ts similarity index 100% rename from examples/with-elasticsearch/lib/elasticsearch.js rename to examples/with-elasticsearch/lib/elasticsearch.ts diff --git a/examples/with-elasticsearch/package.json b/examples/with-elasticsearch/package.json index 1c9311c5ae1e8..528d2a55594d1 100644 --- a/examples/with-elasticsearch/package.json +++ b/examples/with-elasticsearch/package.json @@ -7,9 +7,15 @@ "lint": "next lint" }, "dependencies": { - "@elastic/elasticsearch": "^8.1.0", + "@elastic/elasticsearch": "^8.6.0", "next": "latest", "react": "^18.2.0", "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/node": "^18.11.18", + "@types/react": "^18.0.26", + "@types/react-dom": "^18.0.10", + "typescript": "^4.8.2" } } diff --git a/examples/with-elasticsearch/pages/_app.js b/examples/with-elasticsearch/pages/_app.js deleted file mode 100644 index 58ec64709d861..0000000000000 --- a/examples/with-elasticsearch/pages/_app.js +++ /dev/null @@ -1,7 +0,0 @@ -import '../styles/globals.css' - -function MyElasticsearchApp({ Component, pageProps }) { - return -} - -export default MyElasticsearchApp diff --git a/examples/with-elasticsearch/pages/_app.tsx b/examples/with-elasticsearch/pages/_app.tsx new file mode 100644 index 0000000000000..0469e7f0e2f1a --- /dev/null +++ b/examples/with-elasticsearch/pages/_app.tsx @@ -0,0 +1,6 @@ +import type { AppProps } from 'next/app' +import '@/styles/globals.css' + +export default function App({ Component, pageProps }: AppProps) { + return +} diff --git a/examples/with-elasticsearch/pages/index.js b/examples/with-elasticsearch/pages/index.js deleted file mode 100644 index 5cc227f6ea5f2..0000000000000 --- a/examples/with-elasticsearch/pages/index.js +++ /dev/null @@ -1,92 +0,0 @@ -import Head from 'next/head' -import Image from 'next/image' -import styles from '../styles/Home.module.css' -import { connectToElasticsearch } from '../lib/elasticsearch' - -export default function Home({ isConnected }) { - return ( -
- - Create Next App - - - - -
-

- Welcome to{' '} - Next.js with Elasticsearch! -

- {isConnected ? ( -
You are connected to Elasticsearch
- ) : ( -
- You are NOT connected to Elasticsearch. Check the{' '} - README.md for instructions. -
- )} - -

- Get started by editing{' '} - pages/index.js -

- -
- -

Documentation →

-

Find in-depth information about Next.js features and API.

- - - -

Learn →

-

Learn about Next.js in an interactive course with quizzes!

- - - -

Examples →

-

Discover and deploy boilerplate example Next.js projects.

- - - -

Deploy →

-

- Instantly deploy your Next.js site to a public URL with Vercel. -

- -
-
- - -
- ) -} - -export async function getServerSideProps(context) { - let isConnected = false - const client = await connectToElasticsearch() - if (client !== 'ERR_ENV_NOT_DEFINED') { - isConnected = true - } - return { - props: { isConnected }, - } -} diff --git a/examples/with-elasticsearch/pages/index.tsx b/examples/with-elasticsearch/pages/index.tsx new file mode 100644 index 0000000000000..d7edcb071c8d7 --- /dev/null +++ b/examples/with-elasticsearch/pages/index.tsx @@ -0,0 +1,158 @@ +import type { InferGetServerSidePropsType } from 'next' +import Head from 'next/head' +import Image from 'next/image' +import styles from '@/styles/Home.module.css' +import { Inter } from 'next/font/google' +import { connectToElasticsearch } from '@/lib/elasticsearch' + +const inter = Inter({ subsets: ['latin'] }) + +type HomePageProps = InferGetServerSidePropsType + +export default function Home({ isConnected }: HomePageProps) { + const connectionStatus = isConnected ? ( +

You are connected to Elasticsearch

+ ) : ( +

+ You are NOT connected to Elasticsearch. Check the{' '} + README.md for instructions. +

+ ) + + return ( + <> + + Create Next App + + + + +
+
+

+ Get started by editing  + pages/index.tsx +

+ +
+ +
+ Next.js Logo +
+ 13 +
+
+ +
+

with Elasticsearch

+
+ +
+ {connectionStatus} +
+ +
+ +

+ Docs -> +

+

+ Find in-depth information about Next.js features and API. +

+ + + +

+ Learn -> +

+

+ Learn about Next.js in an interactive course with quizzes! +

+ + + +

+ Templates -> +

+

+ Discover and deploy boilerplate example Next.js projects. +

+ + + +

+ Deploy -> +

+

+ Instantly deploy your Next.js site to a shareable URL + with Vercel. +

+ +
+
+ + ) +} + +export const getServerSideProps = async () => { + let isConnected: boolean = false + const client = await connectToElasticsearch() + if (client !== 'ERR_ENV_NOT_DEFINED') { + isConnected = true + } + return { + props: { isConnected }, + } +} diff --git a/examples/with-elasticsearch/public/favicon.ico b/examples/with-elasticsearch/public/favicon.ico index 4965832f2c9b0..718d6fea4835e 100644 Binary files a/examples/with-elasticsearch/public/favicon.ico and b/examples/with-elasticsearch/public/favicon.ico differ diff --git a/examples/with-elasticsearch/public/next.svg b/examples/with-elasticsearch/public/next.svg new file mode 100644 index 0000000000000..5174b28c565c2 --- /dev/null +++ b/examples/with-elasticsearch/public/next.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/with-elasticsearch/public/thirteen.svg b/examples/with-elasticsearch/public/thirteen.svg new file mode 100644 index 0000000000000..8977c1bd123cb --- /dev/null +++ b/examples/with-elasticsearch/public/thirteen.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/with-elasticsearch/public/vercel.svg b/examples/with-elasticsearch/public/vercel.svg index fbf0e25a651c2..d2f84222734f2 100644 --- a/examples/with-elasticsearch/public/vercel.svg +++ b/examples/with-elasticsearch/public/vercel.svg @@ -1,4 +1 @@ - - - \ No newline at end of file + \ No newline at end of file diff --git a/examples/with-elasticsearch/styles/Home.module.css b/examples/with-elasticsearch/styles/Home.module.css index 35454bb748190..96417e1526cea 100644 --- a/examples/with-elasticsearch/styles/Home.module.css +++ b/examples/with-elasticsearch/styles/Home.module.css @@ -1,121 +1,290 @@ -.container { - min-height: 100vh; - padding: 0 0.5rem; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - height: 100vh; -} - .main { - padding: 5rem 0; - flex: 1; display: flex; flex-direction: column; - justify-content: center; + justify-content: space-between; align-items: center; + padding: 6rem; + min-height: 100vh; } -.footer { +.description, +.status { + display: inherit; + justify-content: inherit; + align-items: inherit; + font-size: 0.85rem; + max-width: var(--max-width); width: 100%; - height: 100px; - border-top: 1px solid #eaeaea; - display: flex; - justify-content: center; - align-items: center; + z-index: 2; + font-family: var(--font-mono); } -.footer a { +.description a { display: flex; justify-content: center; align-items: center; - flex-grow: 1; + gap: 0.5rem; } -.title a { - color: #0070f3; - text-decoration: none; +.description p, +.status { + position: relative; + margin: 0; + padding: 1rem; + background-color: rgba(var(--callout-rgb), 0.5); + border: 1px solid rgba(var(--callout-border-rgb), 0.3); + border-radius: var(--border-radius); } -.title a:hover, -.title a:focus, -.title a:active { - text-decoration: underline; +.code { + font-weight: 700; + font-family: var(--font-mono); } -.title { - margin: 0; - line-height: 1.15; - font-size: 4rem; +.grid { + display: grid; + grid-template-columns: repeat(4, minmax(25%, auto)); + width: var(--max-width); + max-width: 100%; } -.title, -.description { - text-align: center; +.card { + padding: 1rem 1.2rem; + border-radius: var(--border-radius); + background: rgba(var(--card-rgb), 0); + border: 1px solid rgba(var(--card-border-rgb), 0); + transition: background 200ms, border 200ms; } -.description { - line-height: 1.5; - font-size: 1.5rem; +.card span { + display: inline-block; + transition: transform 200ms; } -.code { - background: #fafafa; - border-radius: 5px; - padding: 0.75rem; - font-size: 1.1rem; - font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, - Bitstream Vera Sans Mono, Courier New, monospace; +.card h2 { + font-weight: 600; + margin-bottom: 0.7rem; } -.grid { +.card p { + margin: 0; + opacity: 0.6; + font-size: 0.9rem; + line-height: 1.5; + max-width: 30ch; +} + +.center { display: flex; + justify-content: center; align-items: center; + position: relative; + padding: 4rem 0; +} + +.status { + padding: 2rem; +} + +.center::before { + background: var(--secondary-glow); + border-radius: 50%; + width: 480px; + height: 360px; + margin-left: -400px; +} + +.center::after { + background: var(--primary-glow); + width: 240px; + height: 180px; + z-index: -1; +} + +.center::before, +.center::after { + content: ''; + left: 50%; + position: absolute; + filter: blur(45px); + transform: translateZ(0); +} + +.logo, +.thirteen { + position: relative; +} + +.thirteen { + display: flex; justify-content: center; - flex-wrap: wrap; - max-width: 800px; - margin-top: 3rem; + align-items: center; + width: 75px; + height: 75px; + padding: 25px 10px; + margin-left: 16px; + transform: translateZ(0); + border-radius: var(--border-radius); + overflow: hidden; + box-shadow: 0px 2px 8px -1px #0000001a; } -.card { - margin: 1rem; - padding: 1.5rem; - text-align: left; - color: inherit; - text-decoration: none; - border: 1px solid #eaeaea; - border-radius: 10px; - transition: color 0.15s ease, border-color 0.15s ease; - width: 45%; +.thirteen::before, +.thirteen::after { + content: ''; + position: absolute; + z-index: -1; } -.card:hover, -.card:focus, -.card:active { - color: #0070f3; - border-color: #0070f3; +/* Conic Gradient Animation */ +.thirteen::before { + animation: 6s rotate linear infinite; + width: 200%; + height: 200%; + background: var(--tile-border); } -.card h2 { - margin: 0 0 1rem 0; - font-size: 1.5rem; +/* Inner Square */ +.thirteen::after { + inset: 0; + padding: 1px; + border-radius: var(--border-radius); + background: linear-gradient( + to bottom right, + rgba(var(--tile-start-rgb), 1), + rgba(var(--tile-end-rgb), 1) + ); + background-clip: content-box; } -.card p { - margin: 0; - font-size: 1.25rem; - line-height: 1.5; +/* Enable hover only on non-touch devices */ +@media (hover: hover) and (pointer: fine) { + .card:hover { + background: rgba(var(--card-rgb), 0.1); + border: 1px solid rgba(var(--card-border-rgb), 0.15); + } + + .card:hover span { + transform: translateX(4px); + } } -.logo { - height: 1em; - margin-left: 0.5rem; +@media (prefers-reduced-motion) { + .thirteen::before { + animation: none; + } + + .card:hover span { + transform: none; + } } -@media (max-width: 600px) { +/* Mobile */ +@media (max-width: 700px) { + .content { + padding: 4rem; + } + .grid { + grid-template-columns: 1fr; + margin-bottom: 120px; + max-width: 320px; + text-align: center; + } + + .card { + padding: 1rem 2.5rem; + } + + .card h2 { + margin-bottom: 0.5rem; + } + + .center { + padding: 8rem 0 6rem; + } + + .center::before { + transform: none; + height: 300px; + } + + .description, + .status { + font-size: 0.8rem; + } + + .description a { + padding: 1rem; + } + + .description p, + .description div { + display: flex; + justify-content: center; + position: fixed; width: 100%; - flex-direction: column; + } + + .description p { + align-items: center; + inset: 0 0 auto; + padding: 2rem 1rem 1.4rem; + border-radius: 0; + border: none; + border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25); + background: linear-gradient( + to bottom, + rgba(var(--background-start-rgb), 1), + rgba(var(--callout-rgb), 0.5) + ); + background-clip: padding-box; + backdrop-filter: blur(24px); + } + + .status { + padding: 2rem; + margin-block: 1rem; + } + + .description div { + align-items: flex-end; + pointer-events: none; + inset: auto 0 0; + padding: 2rem; + height: 200px; + background: linear-gradient( + to bottom, + transparent 0%, + rgb(var(--background-end-rgb)) 40% + ); + z-index: 1; + } +} + +/* Tablet and Smaller Desktop */ +@media (min-width: 701px) and (max-width: 1120px) { + .grid { + grid-template-columns: repeat(2, 50%); + } +} + +@media (prefers-color-scheme: dark) { + .vercelLogo { + filter: invert(1); + } + + .logo, + .thirteen img { + filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70); + } +} + +@keyframes rotate { + from { + transform: rotate(360deg); + } + to { + transform: rotate(0deg); } } diff --git a/examples/with-elasticsearch/styles/globals.css b/examples/with-elasticsearch/styles/globals.css index e5e2dcc23baf1..d4f491e152dd0 100644 --- a/examples/with-elasticsearch/styles/globals.css +++ b/examples/with-elasticsearch/styles/globals.css @@ -1,9 +1,98 @@ -html, -body { +:root { + --max-width: 1100px; + --border-radius: 12px; + --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', + 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', + 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace; + + --foreground-rgb: 0, 0, 0; + --background-start-rgb: 214, 219, 220; + --background-end-rgb: 255, 255, 255; + + --primary-glow: conic-gradient( + from 180deg at 50% 50%, + #16abff33 0deg, + #0885ff33 55deg, + #54d6ff33 120deg, + #0071ff33 160deg, + transparent 360deg + ); + --secondary-glow: radial-gradient( + rgba(255, 255, 255, 1), + rgba(255, 255, 255, 0) + ); + + --tile-start-rgb: 239, 245, 249; + --tile-end-rgb: 228, 232, 233; + --tile-border: conic-gradient( + #00000080, + #00000040, + #00000030, + #00000020, + #00000010, + #00000010, + #00000080 + ); + + --callout-rgb: 238, 240, 241; + --callout-border-rgb: 172, 175, 176; + --card-rgb: 180, 185, 188; + --card-border-rgb: 131, 134, 135; +} + +@media (prefers-color-scheme: dark) { + :root { + --foreground-rgb: 255, 255, 255; + --background-start-rgb: 0, 0, 0; + --background-end-rgb: 0, 0, 0; + + --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0)); + --secondary-glow: linear-gradient( + to bottom right, + rgba(1, 65, 255, 0), + rgba(1, 65, 255, 0), + rgba(1, 65, 255, 0.3) + ); + + --tile-start-rgb: 2, 13, 46; + --tile-end-rgb: 2, 5, 19; + --tile-border: conic-gradient( + #ffffff80, + #ffffff40, + #ffffff30, + #ffffff20, + #ffffff10, + #ffffff10, + #ffffff80 + ); + + --callout-rgb: 20, 20, 20; + --callout-border-rgb: 108, 108, 108; + --card-rgb: 100, 100, 100; + --card-border-rgb: 200, 200, 200; + } +} + +* { + box-sizing: border-box; padding: 0; margin: 0; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; +} + +html, +body { + max-width: 100vw; + overflow-x: hidden; +} + +body { + color: rgb(var(--foreground-rgb)); + background: linear-gradient( + to bottom, + transparent, + rgb(var(--background-end-rgb)) + ) + rgb(var(--background-start-rgb)); } a { @@ -11,6 +100,8 @@ a { text-decoration: none; } -* { - box-sizing: border-box; +@media (prefers-color-scheme: dark) { + html { + color-scheme: dark; + } } diff --git a/examples/with-elasticsearch/tsconfig.json b/examples/with-elasticsearch/tsconfig.json new file mode 100644 index 0000000000000..c8f83d99c2a8e --- /dev/null +++ b/examples/with-elasticsearch/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": false, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "incremental": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "baseUrl": ".", + "paths": { + "@/*": ["./*"] + } + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +}