Skip to content

Commit 2814451

Browse files
dc7290dc7290
committed
docs: ✏️ Added top page
1 parent cf6ec27 commit 2814451

13 files changed

+386
-53
lines changed

‎docs/.prettierrc.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
trailingComma: 'es5',
3+
tabWidth: 2,
4+
semi: false,
5+
singleQuote: true,
6+
printWidth: 120,
7+
}

‎docs/docusaurus.config.js

+21-3
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ const lightCodeTheme = require('prism-react-renderer/themes/github')
33

44
/** @type {import('@docusaurus/types').Config} */
55
const config = {
6-
title: 'next-export-optimize-images',
7-
url: 'https://next-export-optimize-images.docs.vercel.app',
6+
title: 'Next Export Optimize Images',
7+
url: 'https://next-export-optimize-images.vercel.app',
88
baseUrl: '/',
99
onBrokenLinks: 'throw',
1010
onBrokenMarkdownLinks: 'warn',
@@ -44,7 +44,7 @@ const config = {
4444
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
4545
({
4646
navbar: {
47-
title: 'next-export-optimize-images',
47+
title: 'Next Export Optimize Images',
4848
items: [
4949
{
5050
type: 'doc',
@@ -83,11 +83,29 @@ const config = {
8383
],
8484
copyright: `Copyright © 2022 dc7290. Built with Docusaurus.`,
8585
},
86+
image: '/og.png',
87+
colorMode: {
88+
disableSwitch: true,
89+
respectPrefersColorScheme: true,
90+
},
8691
prism: {
8792
theme: lightCodeTheme,
8893
darkTheme: darkCodeTheme,
8994
},
9095
}),
96+
plugins: [
97+
async function myPlugin() {
98+
return {
99+
name: 'docusaurus-tailwindcss',
100+
configurePostCss(postcssOptions) {
101+
// Appends TailwindCSS and AutoPrefixer.
102+
postcssOptions.plugins.push(require('tailwindcss'))
103+
postcssOptions.plugins.push(require('autoprefixer'))
104+
return postcssOptions
105+
},
106+
}
107+
},
108+
],
91109
}
92110

93111
module.exports = config

‎docs/package.json

+9-2
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,20 @@
1515
"dependencies": {
1616
"@docusaurus/core": "2.0.0-beta.20",
1717
"@docusaurus/preset-classic": "2.0.0-beta.20",
18+
"@heroicons/react": "1.0.6",
1819
"@mdx-js/react": "1.6.22",
1920
"clsx": "1.1.1",
2021
"prism-react-renderer": "1.3.1",
2122
"react": "17.0.2",
22-
"react-dom": "17.0.2"
23+
"react-dom": "17.0.2",
24+
"tailwindcss": "3.0.24"
25+
},
26+
"devDependencies": {
27+
"autoprefixer": "10.4.7",
28+
"postcss": "8.4.13",
29+
"prettier": "2.6.2",
30+
"prettier-plugin-tailwindcss": "0.1.11"
2331
},
24-
"devDependencies": {},
2532
"browserslist": {
2633
"production": [
2734
">0.5%",

‎docs/src/components/Features.jsx

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { CheckCircleIcon, CubeIcon, LightningBoltIcon } from '@heroicons/react/outline'
2+
import React from 'react'
3+
4+
const features = [
5+
{
6+
name: 'Optimize images at build time',
7+
description:
8+
'Normally, to use `next/image` with `next export`, you need to use a cloud provider for image optimization. With this solution, however, you can optimize images at build time, eliminating the need for a cloud provider.',
9+
icon: CubeIcon,
10+
},
11+
{
12+
name: 'All options for `next/image` available',
13+
description:
14+
'There is no need to use any special components. Use `next/image` as usual, all its options are available.',
15+
icon: CheckCircleIcon,
16+
},
17+
{
18+
name: "Using `sharp`, so it's fast.",
19+
description:
20+
'It is fast because it uses `sharp` for image optimization. This is also the approach used in Next.js, which is much faster than other image processing libraries.',
21+
icon: LightningBoltIcon,
22+
},
23+
{
24+
name: 'Cache prevents repeating the same optimization',
25+
description: 'It has an internal cache mechanism so that the same images are not optimized repeatedly.',
26+
icon: CubeIcon,
27+
},
28+
]
29+
30+
const Features = () => {
31+
return (
32+
<div className="overflow-hidden bg-gray-50 py-10 dark:bg-gray-800">
33+
<div className="relative mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:px-8">
34+
<svg
35+
className="absolute top-0 left-full -translate-x-1/2 -translate-y-3/4 transform lg:left-auto lg:right-full lg:translate-x-2/3 lg:translate-y-1/4"
36+
width={404}
37+
height={784}
38+
fill="none"
39+
viewBox="0 0 404 784"
40+
aria-hidden="true"
41+
>
42+
<defs>
43+
<pattern
44+
id="8b1b5f72-e944-4457-af67-0c6d15a99f38"
45+
x={0}
46+
y={0}
47+
width={20}
48+
height={20}
49+
patternUnits="userSpaceOnUse"
50+
>
51+
<rect x={0} y={0} width={4} height={4} className="text-gray-200 dark:text-gray-600" fill="currentColor" />
52+
</pattern>
53+
</defs>
54+
<rect width={404} height={784} fill="url(#8b1b5f72-e944-4457-af67-0c6d15a99f38)" />
55+
</svg>
56+
57+
<div className="relative lg:grid lg:grid-cols-3 lg:gap-x-8">
58+
<div className="lg:col-span-1">
59+
<h2 className="text-3xl font-extrabold tracking-tight sm:text-4xl">
60+
Evolve Next.js into a complete static site generator.
61+
</h2>
62+
</div>
63+
<dl className="mt-10 space-y-10 sm:grid sm:grid-cols-2 sm:gap-x-8 sm:gap-y-10 sm:space-y-0 lg:col-span-2 lg:mt-0">
64+
{features.map((feature) => (
65+
<div key={feature.name}>
66+
<dt>
67+
<div className="flex h-12 w-12 items-center justify-center rounded-md bg-indigo-500 text-white dark:bg-indigo-700">
68+
<feature.icon className="h-6 w-6" aria-hidden="true" />
69+
</div>
70+
<p className="mt-5 text-lg font-medium leading-6">{feature.name}</p>
71+
</dt>
72+
<dd className="mt-2 text-base text-gray-500 dark:text-gray-400">{feature.description}</dd>
73+
</div>
74+
))}
75+
</dl>
76+
</div>
77+
</div>
78+
</div>
79+
)
80+
}
81+
82+
export default Features

‎docs/src/components/GettingStarted.jsx

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import Link from '@docusaurus/Link'
2+
import { ChevronRightIcon } from '@heroicons/react/outline'
3+
import React from 'react'
4+
5+
const GettingStarted = () => {
6+
return (
7+
<div className="py-28 text-center">
8+
<Link
9+
to="/docs/intro"
10+
className="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-indigo-700 hover:text-white hover:no-underline focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
11+
>
12+
Getting started
13+
<ChevronRightIcon className="ml-3 -mr-1 h-5 w-5" aria-hidden="true" />
14+
</Link>
15+
</div>
16+
)
17+
}
18+
19+
20+
export default GettingStarted

‎docs/src/components/Hero.jsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react'
2+
3+
import Text from '../components/Text'
4+
5+
const Hero = () => {
6+
return (
7+
<div className="container mx-auto py-64 px-4 sm:px-6 lg:px-8">
8+
<div className="mx-auto w-[50rem] max-w-full">
9+
<Text aria-hidden="true" />
10+
<p className="sr-only">Next Export Optimize Images</p>
11+
</div>
12+
<p className="mt-8 text-center text-xl">Optimize images at build time with Next.js.</p>
13+
</div>
14+
)
15+
}
16+
17+
export default Hero

0 commit comments

Comments
 (0)