Skip to content

Commit e71e78a

Browse files
heskewheskew
committed
iterate on index cards and add the 4th getting started card
1 parent ba92a38 commit e71e78a

File tree

14 files changed

+457
-450
lines changed

14 files changed

+457
-450
lines changed

‎docs/getting-started/index.md‎

Lines changed: 0 additions & 46 deletions
This file was deleted.

‎docs/getting-started/index.mdx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
title: Getting Started
3+
---
4+
5+
import CustomDocCardList from '@site/src/components/CustomDocCardList';
6+
7+
# Getting Started
8+
9+
If you're new to Harper, this section will guide you through the essential resources you need to get started.
10+
11+
Follow the steps in this documentation to discover how Harper can simplify your backend stack, eliminate many inter-process communication delays, and achieve a more predictable and performant application experience.
12+
13+
For more advanced concepts in Harper, see our [blog](https://www.harpersystems.dev/blog).
14+
15+
## Harper Basics
16+
17+
<CustomDocCardList
18+
columns={2}
19+
items={[
20+
{
21+
type: 'link',
22+
href: 'getting-started/install-harper',
23+
label: 'Install Harper',
24+
description: 'Pick the installation method that best suits your environment',
25+
},
26+
{
27+
type: 'link',
28+
href: 'getting-started/what-is-harper',
29+
label: 'What is Harper',
30+
description: 'Learn about Harper, how it works, and some of its usecases',
31+
},
32+
{
33+
type: 'link',
34+
href: 'getting-started/harper-concepts',
35+
label: 'Harper Concepts',
36+
description: "Learn about Harper's fundamental concepts and how they interact",
37+
},
38+
{
39+
type: 'link',
40+
href: 'getting-started/first-harper-app',
41+
label: 'Create Your First Application',
42+
description: 'Build a simple Harper application with data storage and API endpoints',
43+
},
44+
]}
45+
/>

‎docs/index.md‎

Lines changed: 0 additions & 104 deletions
This file was deleted.

‎docs/index.mdx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
---
2+
title: Harper Docs
3+
---
4+
5+
import CustomDocCardList from '@site/src/components/CustomDocCardList';
6+
7+
# Harper Docs
8+
9+
:::info
10+
[Connect with our team!](https://www.harpersystems.dev/contact)
11+
:::
12+
13+
Welcome to the Harper Documentation! Here, you'll find all things Harper, and everything you need to get started, troubleshoot issues, and make the most of our platform.
14+
15+
## Getting Started
16+
17+
<CustomDocCardList
18+
columns={3}
19+
items={[
20+
{
21+
type: 'link',
22+
href: 'docs/getting-started/install-harper',
23+
label: 'Install Harper',
24+
description: 'Pick the installation method that best suits your environment',
25+
},
26+
{
27+
type: 'link',
28+
href: 'docs/getting-started/what-is-harper',
29+
label: 'What is Harper',
30+
description: 'Learn about Harper, how it works, and some of its usecases',
31+
},
32+
{
33+
type: 'link',
34+
href: 'docs/getting-started/harper-concepts',
35+
label: 'Harper Concepts',
36+
description: "Learn about Harper's fundamental concepts and how they interact",
37+
},
38+
]}
39+
/>
40+
41+
## Building with Harper
42+
43+
<CustomDocCardList
44+
columns={3}
45+
items={[
46+
{
47+
type: 'link',
48+
href: 'docs/developers/applications/',
49+
label: 'Harper Applications',
50+
description: 'Build your a fully featured Harper Component with custom functionality',
51+
},
52+
{
53+
type: 'link',
54+
href: 'docs/developers/rest',
55+
label: 'REST Queries',
56+
description: 'The recommended HTTP interface for data access, querying, and manipulation',
57+
},
58+
{
59+
type: 'link',
60+
href: 'docs/developers/operations-api/',
61+
label: 'Operations API',
62+
description: 'Configure, deploy, administer, and control your Harper instance',
63+
},
64+
{
65+
type: 'link',
66+
href: 'docs/developers/replication/',
67+
label: 'Clustering & Replication',
68+
description:
69+
'The process of connecting multiple Harper databases together to create a database mesh network that enables users to define data replication patterns.',
70+
},
71+
{
72+
type: 'link',
73+
href: 'docs/administration/harper-studio/',
74+
label: 'Explore the Harper Studio',
75+
description:
76+
'The web-based GUI for Harper. Studio enables you to administer, navigate, and monitor all of your Harper instances in a simple, user friendly interface.',
77+
},
78+
]}
79+
/>

‎src/components/CustomDocCardList.module.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
.cardGrid {
2+
display: grid;
3+
grid-template-columns: repeat(var(--columns, 2), 1fr);
4+
gap: var(--ifm-spacing-horizontal);
5+
margin-bottom: 2rem;
6+
}
7+
8+
.customCard {
9+
--ifm-link-color: var(--ifm-color-emphasis-800);
10+
--ifm-link-hover-color: var(--ifm-color-emphasis-700);
11+
--ifm-link-hover-decoration: none;
12+
box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
13+
border: 1px solid var(--ifm-color-emphasis-200);
14+
transition: all var(--ifm-transition-fast) ease;
15+
height: 100%;
16+
display: flex;
17+
flex-direction: column;
18+
}
19+
20+
.customCard:hover {
21+
border-color: var(--ifm-color-primary);
22+
box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%);
23+
text-decoration: none;
24+
}
25+
26+
.cardTitle {
27+
font-size: 1.2rem;
28+
margin-bottom: 0.5rem;
29+
}
30+
31+
.cardDescription {
32+
font-size: 0.9rem;
33+
color: var(--ifm-color-content-secondary);
34+
margin-bottom: 0;
35+
}
36+
37+
/* Responsive breakpoints */
38+
@media (max-width: 996px) {
39+
.cardGrid {
40+
grid-template-columns: repeat(min(2, var(--columns, 2)), 1fr);
41+
}
42+
}
43+
44+
@media (max-width: 650px) {
45+
.cardGrid {
46+
grid-template-columns: 1fr;
47+
}
48+
}

‎src/components/CustomDocCardList.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import clsx from 'clsx';
3+
import Link from '@docusaurus/Link';
4+
import { filterDocCardListItems } from '@docusaurus/plugin-content-docs/client';
5+
import Heading from '@theme/Heading';
6+
import styles from './CustomDocCardList.module.css';
7+
8+
interface CustomDocCardListProps {
9+
items: any[];
10+
columns?: number;
11+
className?: string;
12+
}
13+
14+
function CustomDocCard({ item }: { item: any }) {
15+
return (
16+
<Link href={item.href} className={clsx('card padding--lg', styles.customCard)}>
17+
<Heading as="h2" className={styles.cardTitle}>
18+
{item.label}
19+
</Heading>
20+
{item.description && <p className={styles.cardDescription}>{item.description}</p>}
21+
</Link>
22+
);
23+
}
24+
25+
export default function CustomDocCardList({ items, columns = 2, className }: CustomDocCardListProps) {
26+
const filteredItems = filterDocCardListItems(items);
27+
28+
return (
29+
<div className={clsx(styles.cardGrid, className)} style={{ '--columns': columns } as React.CSSProperties}>
30+
{filteredItems.map((item, index) => (
31+
<div key={index}>
32+
<CustomDocCard item={item} />
33+
</div>
34+
))}
35+
</div>
36+
);
37+
}

0 commit comments

Comments
 (0)