feat(plugin-docs): Added <Features /> component for landing page
MODIFY
packages/plugin-docs/client/theme-doc/index.ts
packages/plugin-docs/client/theme-doc/index.ts
@@ -3,4 +3,6 @@ import './tailwind.out.css';
// Components
export { default as Hero } from './components/Hero';
export { default as Message } from './components/Message';
+export { default as Features } from './components/Features';
+export { default as FeatureItem } from './components/FeatureItem';
export { default as Layout } from './Layout';

MODIFY
packages/plugin-docs/client/theme-doc/tailwind.css
packages/plugin-docs/client/theme-doc/tailwind.css
@@ -87,6 +87,11 @@ article a {
background-image: linear-gradient(transparent 60%, rgba(130, 199, 255, 0.28) 55%);
}
+.link-with-underline {
+ @apply text-blue-600 mx-1 hover:text-blue-300 transition dark:text-blue-400;
+ background-image: linear-gradient(transparent 60%, rgba(130, 199, 255, 0.28) 55%);
+}
+
/*article pre {*/
/* @apply pt-12;*/
/*}*/
@@ -113,3 +118,28 @@ html {
h1, h2, h3, h4, h5, h6 {
scroll-margin-top: 3em;
}
+
+@layer components {
+
+ .features-dark {
+ @apply bg-gray-900;
+ background-image: radial-gradient(#2a2a2a 20%, transparent 20%);
+ background-size: 6px 6px;
+ width: 100%;
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+ }
+
+ .features {
+ background-image: radial-gradient(#f8f8f5 20%, transparent 20%);
+ background-color: white;
+ background-size: 6px 6px;
+ width: 100%;
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+ }
+
+ .features::-webkit-scrollbar {
+ display: none;
+ }
+}

MODIFY
packages/plugin-docs/src/index.ts
packages/plugin-docs/src/index.ts
@@ -68,7 +68,7 @@ export default (api: IApi) => {
api.writeTmpFile({
path: 'index.ts',
content: `
-export { Message, Hero } from '${require.resolve('../client/theme-doc')}';
+export { Message, Hero, Features, FeatureItem } from '${require.resolve('../client/theme-doc')}';
`,
});

feat(plugin-docs): Added <Features /> component for landing page (#341)