Skip to content

Commit

Permalink
start drafting the homepage
Browse files Browse the repository at this point in the history
  • Loading branch information
@danieleguido
danieleguido committed Oct 9, 2024
1 parent 37711c5 commit e4bc876
Show file tree
Hide file tree
Showing 6 changed files with 88 additions and 48 deletions.
9 changes: 9 additions & 0 deletions src/components/CollectionCard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,17 @@
list-style: none;
}

.CollectionCard h2,
.CollectionCard h3 {
font-size: inherit;
font-weight: var(--impresso-wght-bold);

font-variation-settings: "wght" var(--impresso-wght-bold);
}
.CollectionCard h2 {
font-size: 1.5rem;
margin: 0;
font-variation-settings: "wght" var(--impresso-wght-medium);
}
.CollectionCard .map-bg img {
position: absolute;
Expand Down
34 changes: 34 additions & 0 deletions src/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import LogoDofcl from "./logos/LogoDofcl"
import AssociatedPartner, {
type AssociatedPartnerProps,
} from "./AssociatedPartner"
import Link from "./Link"

const Footer: React.FC<{
associatedPartners: AssociatedPartnerProps[]
Expand All @@ -29,6 +30,39 @@ const Footer: React.FC<{
return (
<footer className="footer mt-5 mx-lg-5 mx-md-2">
<Container fluid>
<Row className="border-top border-dark py-3">
<Col>
<h3 className="mt-2">Quick links & Documentation</h3>
</Col>
</Row>
<Row>
<Col md="6" lg="3" xxl="3">
<p>
Browse our <b>models</b> at{" "}
<a href="https://huggingface.co/impresso-project/">
🤗 Hugging Face
</a>
</p>
</Col>
<Col md="6" lg="3" xxl="3">
<p>
Checkout our <a href="/public-api/docs">Rest API documentation</a>{" "}
or the documentation of our `impresso-py` Python package to
interact with the Impresso public API.
</p>
</Col>
<Col md="6" lg="3" xxl="3">
<p>
<Link to="/notebooks">Notebooks</Link> are a great way to get
started with the data. They are interactive and can be run in the
cloud.
</p>
<p>
All the notebooks have each an independent environment you can
spin with docker, preview on mybinder, google colab...
</p>
</Col>
</Row>
<Row className="border-top border-dark py-3">
<Col>
<h3 className="mt-2">Partners</h3>
Expand Down
5 changes: 3 additions & 2 deletions src/components/NotebookCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,14 @@ export interface Notebook {
const NotebookCard: React.FC<{
notebook: Notebook
children?: React.ReactNode
}> = ({ notebook, children }) => {
className?: string
}> = ({ notebook, children, className = "" }) => {
const accessTime = notebook.date ?? new Date()
const accessDateTime = DateTime.fromJSDate(accessTime)

return (
<Link to={notebook.href}>
<div className="NotebookCard shadow-sm">
<div className={`NotebookCard shadow-sm ${className}`}>
<div className="p-3 d-flex align-items-center">
<div className="Avatar">
<Avatar
Expand Down
19 changes: 13 additions & 6 deletions src/components/NotebooksModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,21 @@ interface NotebookModalProps {

const NotebooksModal: React.FC<NotebookModalProps> = ({ notebooks = [] }) => {
return (
<Page title="All Notebook" fullscreen="xl-down" size="xl">
<Page title="Browse our Ipynb Notebooks" fullscreen="xl-down" size="xl">
<Container>
<Row>
{notebooks.map((notebook) => (
<Col md={4} className="mb-3" key={notebook.slug}>
<NotebookCard notebook={notebook} />
</Col>
))}
<Col md={4}>
<h4 className="position-sticky top-0">Browse by categories</h4>
</Col>
<Col>
{notebooks.map((notebook) => (
<NotebookCard
key={notebook.slug}
className="my-2"
notebook={notebook}
/>
))}
</Col>
</Row>
</Container>
</Page>
Expand Down
65 changes: 26 additions & 39 deletions src/components/Wall.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,12 +52,15 @@ const Wall = ({
<div className="Wall mx-lg-5 mx-md-2" style={{ marginTop: 100 }}>
<Container fluid>
<Row>
<Col md={{ span: 4 }} xxl={{ span: 4 }} className="align-self-center">
<Col md={{ span: 6 }} xxl={{ span: 4 }} className="align-self-center">
<h1 className="display-3 mb-4" style={{ width: "85%" }}>
Boost your research with <em>Impresso</em>
Boost your Media Monitoring
</h1>

<p style={{ width: "85%" }}>
<h2>
Explore and work programmatically with the Impresso Corpus, Data
and Models
</h2>
<p style={{ width: "85%" }} className="d-none">
We collected <b>{numberOfNotebooks}</b>{" "}
<Link to="/notebooks" underline>
Jupyter Ipynb notebooks
Expand All @@ -68,41 +71,17 @@ const Wall = ({
<section className="mt-5"></section>
</Col>
<Col md={{ span: 4 }} xxl={{ span: 3 }}>
<CollectionCard collection={enterImpressoPy}>
<CodeSnippet value={CodeSample} theme={"nord"} />
</CollectionCard>
</Col>
<Col md={{ span: 4 }} xxl={{ span: 3 }}>
<CollectionCard collection={enterImpressoModels}>
<CodeSnippet
value={ImpressoModelsCodeSample}
theme={"duotoneDark"}
/>
</CollectionCard>
</Col>
<Col
md={{ span: 12 }}
xxl={{ span: 2 }}
className="mt-md-5 mt-sm-4 mt-4 mt-xxl-0"
>
<h3 className="mb-xxl-4">Quick links</h3>
<p>
Browse our <b>models</b> at{" "}
<a href="https://huggingface.co/impresso-project/">
🤗 Hugging Face
</a>
</p>
<p>
Checkout our <a href="/public-api/docs">Rest API documentation</a>{" "}
or use our `impresso-py` Python package to interact with the API.
</p>
<p>
All the notebooks have each an independent environment you can
spin with docker, preview on mybinder, google colab...
</p>
The Impresso project (link to project website) strives to create
meaningful links across distinct datasets. The Impresso Datalab is
an infrastructure for programmatic data access and annotation
services. It offers access to our data and models via API and a
dedicated Python library via Jupyter notebooks. The Datalab enables
custom analyses of the Impresso corpus and the semantic indexation
of external document collections with the help of models created by
the project.
</Col>
</Row>
<Row className="my-3 align-items-bottom">
<Row className="my-3 align-items-bottom d-none">
<Col className=" d-flex justify-content-center align-items-end ">
<h3 className=" p-3 w-100">Tutorials</h3>
</Col>
Expand All @@ -116,18 +95,26 @@ const Wall = ({
</Col>
</Row>
<Row className="my-3 align-items-bottom">
<Col>
<Col md={{ span: 4 }} xxl={{ span: 3 }}>
<CollectionCard collection={enterImpressoPy}>
<CodeSnippet value={CodeSample} theme={"duotoneDark"} />
</CollectionCard>
{seriesTutorials.map((collection) => (
<CollectionCard key={collection.title} collection={collection} />
))}
</Col>

<Col>
{seriesYourData.map((collection) => (
<CollectionCard key={collection.title} collection={collection} />
))}
</Col>
<Col>
<CollectionCard collection={enterImpressoModels}>
<CodeSnippet
value={ImpressoModelsCodeSample}
theme={"duotoneDark"}
/>
</CollectionCard>
{seriesUnexpected.map((collection) => (
<CollectionCard
key={collection.title}
Expand Down
4 changes: 3 additions & 1 deletion src/content/series/enter-impresso.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
---
title: Working with the impresso Python API client
title: Getting Started
excerpt: "Three easy steps to enter the impresso way of doing research."
notebooks:
- setup
---

Create an Impresso account and learn how to access our API. You can run the notebooks locally or in your preferred environment — whether that's Docker, MyBinder, or Google Colab."

0 comments on commit e4bc876

Please sign in to comment.