Skip to content

Commit

Permalink
fix(docs): swap out plasmic (#2715)
Browse files Browse the repository at this point in the history 
* fix(docs): swap out plasmic

* fix(docs): slightly styling tweaks
  • Loading branch information
@ccerv1
ccerv1 authored Jan 8, 2025
1 parent 1481c7d commit 32d6e96
Show file tree
Hide file tree
Showing 3 changed files with 285 additions and 11 deletions.
146 changes: 141 additions & 5 deletions apps/docs/docs/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,145 @@ sidebar_position: 0
hide_title: true
---

import { PlasmicRootProvider } from "@plasmicapp/react-web";
import Overview from "@site/src/components/plasmic/Overview";
export const paths = {
getStarted: './get-started/',
datasets: './integrate/datasets/',
references: './references/',
notebooks: './guides/notebooks/',
tutorials: './tutorials/',
contributeModels: './contribute-models/',
graphqlApi: './integrate/api',
pipeline: './guides/dagster/',
connectData: './contribute-data/',
addProject: './projects/',
viewArtifacts: './projects/view-artifacts',
troubleshoot: './projects/troubleshoot'
};

<PlasmicRootProvider>
<Overview />
</PlasmicRootProvider>
<h2>Most popular</h2>

<div className="cards-container">
<a href={paths.getStarted} className="card">
<h3>Get started</h3>
<p>Make your first queries to the OSO data lake or API</p>
</a>
<a href={paths.datasets} className="card">
<h3>View datasets</h3>
<p>Explore more than 100TB of curated public datasets</p>
</a>
<a href={paths.references} className="card">
<h3>Learn how OSO works</h3>
<p>See how all the pieces in our open data pipeline fit together</p>
</a>
</div>

<h2>By use case</h2>

<div className="use-cases-container">
<div className="use-case-column">
<h3>For Data Scientists</h3>
<div className="use-case-cards">
<a href={paths.notebooks} className="mini-card">
<h3>Connect OSO to notebooks</h3>
</a>
<a href={paths.tutorials} className="mini-card">
<h3>See tutorials</h3>
</a>
<a href={paths.contributeModels} className="mini-card">
<h3>Contribute models</h3>
</a>
</div>
</div>

<div className="use-case-column">
<h3>For Developers</h3>
<div className="use-case-cards">
<a href={paths.graphqlApi} className="mini-card">
<h3>Use the GraphQL API</h3>
</a>
<a href={paths.pipeline} className="mini-card">
<h3>View the entire pipeline</h3>
</a>
<a href={paths.connectData} className="mini-card">
<h3>Connect your data</h3>
</a>
</div>
</div>

<div className="use-case-column">
<h3>For OSS Projects</h3>
<div className="use-case-cards">
<a href={paths.addProject} className="mini-card">
<h3>Add your project</h3>
</a>
<a href={paths.viewArtifacts} className="mini-card">
<h3>View your project's artifacts</h3>
</a>
<a href={paths.troubleshoot} className="mini-card">
<h3>Troubleshoot data issues</h3>
</a>
</div>
</div>
</div>

:::tip
Open search with `/` , then `Tab` to search docs
:::

<style>
{`
.cards-container, .use-cases-container {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
margin: 1rem 0;
}
@media (min-width: 800px) {
.cards-container, .use-cases-container {
grid-template-columns: repeat(3, 1fr);
}
}
.card, .mini-card {
padding: 1rem;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
display: block;
text-decoration: none;
color: inherit;
transition: transform 0.2s ease-in-out;
}
.card:hover, .mini-card:hover {
transform: translateY(-2px);
text-decoration: none;
}
.card h2, .use-case-column > h3 {
margin-top: 0;
font-size: 1.25rem;
font-weight: 600;
}
.mini-card h3 {
margin: 0;
font-size: 1rem;
font-weight: 500;
}
.card p {
margin: 0.75rem 0;
}
.use-case-cards {
display: flex;
flex-direction: column;
gap: 1rem;
}
.use-case-column > h3 {
margin-bottom: 1rem;
}
`}
</style>
2 changes: 1 addition & 1 deletion apps/docs/docs/tutorials/_category_.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"label": "Tutorials",
"label": "Find a Tutorial",
"position": 4,
"link": {
"type": "doc",
Expand Down
148 changes: 143 additions & 5 deletions apps/docs/src/pages/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,147 @@ description: "Open Source Observer (OSO) Documentation site"
sidebar_position: 0
---

import { PlasmicRootProvider } from "@plasmicapp/react-web";
import Overview from "@site/src/components/plasmic/Overview";
export const paths = {
getStarted: './docs/get-started/',
datasets: './docs/integrate/datasets/',
references: './docs/references/',
notebooks: './docs/guides/notebooks/',
tutorials: './docs/tutorials/',
contributeModels: './docs/contribute-models/',
graphqlApi: './docs/integrate/api',
pipeline: './docs/guides/dagster/',
connectData: './docs/contribute-data/',
addProject: './docs/projects/',
viewArtifacts: './docs/projects/view-artifacts',
troubleshoot: './docs/projects/troubleshoot'
};

<PlasmicRootProvider>
<Overview />
</PlasmicRootProvider>
<h1>Documentation</h1>
<h2>Most popular</h2>

<div className="cards-container">
<a href={paths.getStarted} className="card">
<h2>Get started</h2>
<p>Make your first queries to the OSO data lake or API</p>
</a>
<a href={paths.datasets} className="card">
<h2>View datasets</h2>
<p>Explore more than 100TB of curated public datasets</p>
</a>
<a href={paths.references} className="card">
<h2>Learn how OSO works</h2>
<p>See how all the pieces in our open data pipeline fit together</p>
</a>
</div>

<h2>By use case</h2>

<div className="use-cases-container">
<div className="use-case-column">
<h3>For Data Scientists</h3>
<div className="use-case-cards">
<a href={paths.notebooks} className="mini-card">
<h3>Connect OSO to notebooks</h3>
</a>
<a href={paths.tutorials} className="mini-card">
<h3>See tutorials</h3>
</a>
<a href={paths.contributeModels} className="mini-card">
<h3>Contribute models</h3>
</a>
</div>
</div>

<div className="use-case-column">
<h3>For Developers</h3>
<div className="use-case-cards">
<a href={paths.graphqlApi} className="mini-card">
<h3>Use the GraphQL API</h3>
</a>
<a href={paths.pipeline} className="mini-card">
<h3>View the entire pipeline</h3>
</a>
<a href={paths.connectData} className="mini-card">
<h3>Connect your data</h3>
</a>
</div>
</div>

<div className="use-case-column">
<h3>For OSS Projects</h3>
<div className="use-case-cards">
<a href={paths.addProject} className="mini-card">
<h3>Add your project</h3>
</a>
<a href={paths.viewArtifacts} className="mini-card">
<h3>View your project's artifacts</h3>
</a>
<a href={paths.troubleshoot} className="mini-card">
<h3>Troubleshoot data issues</h3>
</a>
</div>
</div>
</div>

:::tip
Open search with `/` , then `Tab` to search docs
:::


<style>
{`
.cards-container, .use-cases-container {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
margin: 1rem 0;
}
@media (min-width: 768px) {
.cards-container, .use-cases-container {
grid-template-columns: repeat(3, 1fr);
}
}
.card, .mini-card {
padding: 1rem;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
display: block;
text-decoration: none;
color: inherit;
transition: transform 0.2s ease-in-out;
}
.card:hover, .mini-card:hover {
transform: translateY(-2px);
text-decoration: none;
}
.card h2, .use-case-column > h3 {
margin-top: 0;
font-size: 1.25rem;
font-weight: 600;
}
.mini-card h3 {
margin: 0;
font-size: 1rem;
font-weight: 500;
}
.card p {
margin: 0.75rem 0;
}
.use-case-cards {
display: flex;
flex-direction: column;
gap: 1rem;
}
.use-case-column > h3 {
margin-bottom: 1rem;
}
`}
</style>

0 comments on commit 32d6e96

Please sign in to comment.