1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
import {
BanIcon,
ChatAlt2Icon,
CloudDownloadIcon,
CloudUploadIcon,
CodeIcon,
CubeIcon,
LibraryIcon,
PencilAltIcon,
ShareIcon,
ShieldExclamationIcon,
StarIcon,
} from "@heroicons/react/outline";
import React from "react";
import { DetailedFeatureLink } from "./Feature";
import { DockerIcon } from "./Icons";
const Wrapper = ({ children }: { children: React.ReactNode }) => {
return (
<div className="grid grid-cols-1 mt-12 gap-x-6 gap-y-12 sm:grid-cols-2 lg:mt-16 lg:gap-x-8 lg:gap-y-12">
{children}
</div>
);
};
export const FundamentalsArea = () => {
return (
<Wrapper>
<DetailedFeatureLink
feature={{
Icon: CubeIcon,
description: `Understand how a monorepo compares to a polyrepo, and what problems it solves.`,
name: "What is a Monorepo?",
}}
href="/docs/handbook/what-is-a-monorepo"
></DetailedFeatureLink>
<DetailedFeatureLink
feature={{
Icon: CloudDownloadIcon,
description: `Learn how to install and manage packages in your monorepo.`,
name: "Package Installation",
}}
href="/docs/handbook/package-installation"
></DetailedFeatureLink>
<DetailedFeatureLink
feature={{
Icon: ChatAlt2Icon,
description:
"Understand how workspaces help you develop packages locally.",
name: "Workspaces",
}}
href="/docs/handbook/workspaces"
></DetailedFeatureLink>
<DetailedFeatureLink
feature={{
Icon: LibraryIcon,
description:
"Step-by-step guide on migrating from a multi-repo to a monorepo.",
name: "Migrating to a Monorepo",
}}
href="/docs/handbook/migrating-to-a-monorepo"
></DetailedFeatureLink>
<DetailedFeatureLink
feature={{
Icon: ShareIcon,
description:
"Learn how to share code easily using either internal or external packages.",
name: "Sharing Code",
}}
href="/docs/handbook/sharing-code"
></DetailedFeatureLink>
<DetailedFeatureLink
feature={{
Icon: BanIcon,
description:
"Learn the common monorepo pain points, and how to fix them.",
name: "Troubleshooting",
}}
href="/docs/handbook/troubleshooting"
></DetailedFeatureLink>
</Wrapper>
);
};
export const TasksArea = () => {
return (
<Wrapper>
<DetailedFeatureLink
feature={{
Icon: PencilAltIcon,
description: `Learn how to set up your dev scripts using Turborepo.`,
name: "Development Tasks",
}}
href="/docs/handbook/dev"
></DetailedFeatureLink>
<DetailedFeatureLink
feature={{
Icon: CodeIcon,
description:
"Get framework-specific guides for building your apps with Turborepo.",
name: "Building your App",
}}
href="/docs/handbook/building-your-app"
></DetailedFeatureLink>
<DetailedFeatureLink
feature={{
Icon: ShieldExclamationIcon,
description:
"Learn how to share linting configs and co-ordinate tasks across your repo.",
name: "Linting",
}}
href="/docs/handbook/linting"
></DetailedFeatureLink>
<DetailedFeatureLink
feature={{
Icon: StarIcon,
description: "Configure your integration or end-to-end tests easily.",
name: "Testing",
}}
href="/docs/handbook/testing"
></DetailedFeatureLink>
<DetailedFeatureLink
feature={{
Icon: DockerIcon,
description:
"Make use of Turborepo's prune command to keep your Docker deploys fast.",
name: "Deploying with Docker",
}}
href="/docs/handbook/deploying-with-docker"
></DetailedFeatureLink>
<DetailedFeatureLink
feature={{
Icon: CloudUploadIcon,
description:
"Bundle, version and publish packages to npm from your monorepo.",
name: "Publishing Packages",
}}
href="/docs/handbook/publishing-packages"
></DetailedFeatureLink>
</Wrapper>
);
};
|