Skip to content

Commit 7d941f8

Browse files
rijkvanzantenrijkvanzanten
committed
Add homepage
1 parent 9952cdd commit 7d941f8

File tree

11 files changed

+373
-37
lines changed

11 files changed

+373
-37
lines changed

‎app/app.config.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export default defineAppConfig({
22
ui: {
3-
primary: 'purple'
3+
primary: 'purple' // Tailwind color name
44
},
55

66
header: {

‎app/components/content/ProductLink.vue

+16-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,20 @@
11
<script setup lang="ts">
2+
const props = defineProps<{
3+
product: string;
4+
}>();
5+
6+
const name = computed(
7+
() => props.product.charAt(0).toUpperCase() + props.product.slice(1)
8+
);
29
</script>
310

411
<template>
5-
<span>TODO: PRODUCT LINK</span>
6-
</template>
12+
<UButton
13+
color="gray"
14+
size="xs"
15+
:to="`/${product}`"
16+
:icon="`directus:${product}`"
17+
:label="name"
18+
class="text-primary"
19+
/>
20+
</template>

‎app/components/content/TwoUp.vue

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<template>
2+
<div class="grid md:grid-cols-2 gap-4">
3+
<div><slot name="left" /></div>
4+
<div><slot name="right" /></div>
5+
</div>
6+
</template>

‎app/pages/index.vue

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script setup lang="ts">
2+
const route = useRoute();
3+
const { data: page } = await useAsyncData(route.path, () =>
4+
queryContent(route.path).findOne()
5+
);
6+
7+
if (!page.value) {
8+
throw createError({
9+
statusCode: 404,
10+
statusMessage: "Page not found",
11+
fatal: true,
12+
});
13+
}
14+
</script>
15+
16+
<template>
17+
<UContainer>
18+
<UPage>
19+
<UPageHero
20+
:title="page!.title"
21+
:description="page!.description"
22+
:links="page!.links"
23+
/>
24+
25+
<UPageBody prose>
26+
<ContentRenderer v-if="page!.body" :value="page" />
27+
</UPageBody>
28+
</UPage>
29+
</UContainer>
30+
</template>

‎content/1.getting-started/0.platform-overview.md renamed to ‎content/1.getting-started/0.index.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
---
22
title: Platform Overview
33
description: Learn about the Directus Data Engine and Studio, when to use it, and a how it works.
4+
navigation:
5+
title: Platform Overview
46
---
57

68
Directus is a backend for building your projects. Connect it to your database, asset storage, and external services, and immediately receive rich developer tooling (Data Engine) and a comprehensive web application (Data Studio) to work with your data. Granular and powerful access control means users can only see, interact, and create data allowed by their role used by both the Engine and Studio.

‎content/1.getting-started/_dir.yml

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
title: Getting Started

‎content/index.md

+255-15
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
11
---
22
title: Directus Documentation
33
description: Learn how to get started and implement Directus through our developer resources.
4+
links:
5+
- label: Get Started
6+
size: 'lg'
7+
to: '/getting-started'
48
navigation: false
59
---
610

711
## Try a Demo
812

9-
::tabs
10-
::div
13+
::two-up
14+
15+
#left
16+
:::tabs
17+
::::div
1118
---
1219
label: Local Demo
1320
---
@@ -19,48 +26,281 @@ navigation: false
1926
```
2027

2128
This project has no persistence. All data will be lost when the container is stopped. Read our [Create a Project guide](/getting-started/create-a-project) to learn how to create a project with persistence.
22-
::
29+
::::
2330

24-
::div
31+
::::div
2532
---
2633
label: Hosted Demo
2734
---
2835
Try our [hosted demo project](https://directus.pizza/?utm_source=directus-docs&utm_campaign=docs-home). This is a public demo project that is occasionally reset but please don't input sensitive data.
29-
::
30-
::
31-
32-
<div style="margin-bottom: 4rem;"></div>
36+
::::
37+
:::
3338

39+
#right
3440
:video-embed{video-id="96b44cbc-1b14-4bea-87cd-0c4cb34d261d"}
3541

42+
::
43+
3644
## Getting Started
3745

38-
:article-cards{:show-description=false :paths='[{"title": "Platform Overview", "_path": "/getting-started/platform-overview"}, "/getting-started/create-a-project", { "title": "Directus Academy", "_path": "https://directus.io/tv/directus-academy"}]'}
46+
::u-landing-grid{class="gap-4"}
47+
:::u-landing-card
48+
---
49+
icon: simple-icons:directus
50+
title: Platform Overview
51+
to: /getting-started/platform-overview
52+
class: col-span-6
53+
---
54+
:::
55+
56+
:::u-landing-card
57+
---
58+
icon: material-symbols:live-tv
59+
title: Directus Academy
60+
to: https://directus.io/tv/directus-academy
61+
class: col-span-6
62+
---
63+
:::
64+
::
3965

4066
## Features
4167

42-
:engine-studio-box
68+
::u-landing-grid{class="gap-4"}
69+
:::u-landing-card
70+
---
71+
icon: directus-connect
72+
title: Data Engine
73+
description: APIs and developer tools for your data.
74+
class: col-span-6
75+
color: purple
76+
---
77+
:product-link{product="connect"} :product-link{product="realtime"} :product-link{product="auth"} :product-link{product="automate"}
78+
:::
79+
80+
:::u-landing-card
81+
---
82+
icon: directus-explore
83+
title: Data Studio
84+
description: A data web app your whole team will love.
85+
class: col-span-6
86+
color: pink
87+
---
88+
:product-link{product="explore"} :product-link{product="editor"} :product-link{product="insights"} :product-link{product="files"}
89+
:::
90+
::
4391

4492
## Directus APIs
4593

46-
:article-cards{:show-description=false :paths='["/connect/quickstart", { "title": "API Reference", "_path": "/api"}, "/connect/sdk"]'}
94+
::u-landing-grid{class="gap-4"}
95+
:::u-landing-card
96+
---
97+
title: Quickstart
98+
to: '/connect/quickstart'
99+
class: col-span-4
100+
color: pink
101+
---
102+
:::
103+
104+
:::u-landing-card
105+
---
106+
title: API Reference
107+
to: '/api'
108+
class: col-span-4
109+
color: green
110+
---
111+
:::
112+
113+
:::u-landing-card
114+
---
115+
title: SDK
116+
to: '/connect/sdk'
117+
class: col-span-4
118+
color: blue
119+
---
120+
:::
121+
::
47122

48123
## Tutorials
49124

50-
:article-cards{:show-description=false :paths='[{ "title": "Directus with Next.js", "_path": "/tutorials?tags=nextjs"}, { "title": "Build Projects with Directus", "_path": "/tutorials/projects"}, { "title": "Using Directus Auth", "_path": "/tutorials?tags=directus-auth"}, { "title": "Automate & Integrate", "_path": "/tutorials?tags=directus-automate"}, { "title": "Self-Hosting Guides", "_path": "/tutorials/self-hosting"}, { "title": "SEO Best Practices", "_path": "/tutorials/tips-and-tricks/search-engine-optimization-best-practices"}]'}
125+
::u-landing-grid{class="gap-4"}
126+
:::u-landing-card
127+
---
128+
title: Directus with Next.js
129+
to: '/tutorials?tags=nextjs'
130+
class: col-span-4
131+
color: black
132+
---
133+
:::
134+
135+
:::u-landing-card
136+
---
137+
title: Build Projects with Directus
138+
to: '/tutorials?tags=nextjs'
139+
class: col-span-4
140+
color: purple
141+
---
142+
:::
143+
144+
:::u-landing-card
145+
---
146+
title: Using Directus Auth
147+
to: '/tutorials?tags=directus-auth'
148+
class: col-span-4
149+
color: amber
150+
---
151+
:::
51152

52-
<a href="https://directus.io/tutorials" style="margin-top: 1rem; display: block; text-align: center;">See All Tutorials</a>
153+
:::u-landing-card
154+
---
155+
title: Automate & Integrate
156+
to: '/tutorials?tags=directus-automate'
157+
class: col-span-4
158+
color: yellow
159+
---
160+
:::
161+
162+
:::u-landing-card
163+
---
164+
title: Self-Hosting Guide
165+
to: '/tutorials/self-hosting'
166+
class: col-span-4
167+
color: cyan
168+
---
169+
:::
170+
171+
:::u-landing-card
172+
---
173+
title: SEO Best Practices
174+
to: '/tutorials/tips-and-tricks/search-engine-optimization-best-practices'
175+
class: col-span-4
176+
color: lime
177+
---
178+
:::
179+
180+
:::callout{icon="i-heroicons-light-bulb" to="/tutorials" class="col-span-8"}
181+
See All Tutorials
182+
:::
183+
::
53184

54185
## Releases
55186

56-
:article-cards{:show-description=false :paths='[{"title":"GitHub Releases", "_path": "https://github.com/directus/directus/releases"},"/releases/breaking-changes", { "title": "The Changelog", "_path": "/releases/changelog"}]'}
187+
::u-landing-grid{class="gap-4"}
188+
:::u-landing-card
189+
---
190+
icon: simple-icons:github
191+
title: GitHub Releases
192+
to: 'https://github.com/directus/directus/releases'
193+
class: col-span-4
194+
color: black
195+
---
196+
:::
197+
198+
:::u-landing-card
199+
---
200+
icon: material-symbols:error-med
201+
title: Breaking Changes
202+
to: 'https://github.com/directus/directus/releases'
203+
class: col-span-4
204+
color: red
205+
---
206+
:::
207+
208+
:::u-landing-card
209+
---
210+
icon: material-symbols:list-alt-add-outline
211+
title: Changelog
212+
to: '/releases/changelog'
213+
class: col-span-4
214+
color: yellow
215+
---
216+
:::
217+
::
57218

58219
## Community-Maintained Tooling
59220

60221
These are built and maintained by our awesome community. If you are building tooling and want to include it here, please open a [pull request on GitHub](https://github.com/directus/docs).
61222

62-
:article-cards{:show-description=false :paths='[{"title":"Python SDK", "_path": "https://pypi.org/project/directus-sdk-py/"}, { "title": "Go SDK", "_path": "https://pkg.go.dev/github.com/altipla-consulting/directus-go#section-readme"}, { "title": "Dart SDK", "_path": "https://github.com/apstanisic/directus-dart"}, { "title": "Nuxt Module", "_path": "https://nuxt.com/modules/directus"}, { "title": "Helm Charts", "_path": "https://github.com/directus-labs/helm-chart"}]'}
223+
::u-landing-grid{class="gap-4"}
224+
:::u-landing-card
225+
---
226+
icon: simple-icons:python
227+
title: Python SDK
228+
to: 'https://pypi.org/project/directus-sdk-py/'
229+
class: col-span-4
230+
color: blue
231+
---
232+
:::
233+
234+
:::u-landing-card
235+
---
236+
icon: simple-icons:go
237+
title: Go SDK
238+
to: 'https://pkg.go.dev/github.com/altipla-consulting/directus-go#section-readme'
239+
class: col-span-4
240+
color: cyan
241+
---
242+
:::
243+
244+
:::u-landing-card
245+
---
246+
icon: simple-icons:dart
247+
title: Dart SDK
248+
to: 'https://github.com/apstanisic/directus-dart'
249+
class: col-span-4
250+
color: orange
251+
---
252+
:::
253+
254+
:::u-landing-card
255+
---
256+
icon: simple-icons:nuxtdotjs
257+
title: Nuxt Module
258+
to: 'https://nuxt.com/modules/directus'
259+
class: col-span-4
260+
color: green
261+
---
262+
:::
263+
264+
:::u-landing-card
265+
---
266+
icon: simple-icons:helm
267+
title: Helm Chart
268+
to: 'https://github.com/directus-labs/helm-chart'
269+
class: col-span-4
270+
color: red
271+
---
272+
:::
273+
::
63274

64275
## Advanced Concepts
65276

277+
::u-landing-grid{class="gap-4"}
278+
:::u-landing-card
279+
---
280+
title: Environment Variables
281+
to: '/self-hosting/configuration/general'
282+
class: col-span-4
283+
color: red
284+
---
285+
:::
286+
287+
:::u-landing-card
288+
---
289+
title: Building Extensions
290+
to: '/extensions/overview'
291+
class: col-span-4
292+
color: violet
293+
---
294+
:::
295+
296+
:::u-landing-card
297+
---
298+
title: Self-Hosting
299+
to: '/self-hosting/overview'
300+
class: col-span-4
301+
color: emerald
302+
---
303+
:::
304+
::
305+
66306
:article-cards{:show-description=false :paths='[{"title":"Environment Variables", "_path": "/configuration/general"}, { "title": "Building Extensions", "_path": "/extensions/overview"},{ "title": "Self-Hosting", "_path": "/self-hosting/overview"}]'}

0 commit comments

Comments
 (0)