xarray landing page

Landing Page for xarray project.

Overview

This project is built using the following tools/technologies:

1. Next.js
2. Chakra UI

Requirements

1. Node.js
2. yarn or npm

Installation for local development

1. Clone the repository

git clone https://github.com/xarray-contrib/xarray.dev

2. Install dependencies

yarn install
# or
npm install

3. Run the development server

yarn dev
# or
npm run dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

Translations

Translations are managed through Crowdin at https://scientific-python.crowdin.com. The xarray project is part of the Scientific Python organization on Crowdin, which also includes projects such as NumPy, SciPy, and others.

When creating new content or editing existing content, only the english version of the content should be modified directly in this repository. Once this new content is merged into the main branch of the xarray.dev website, the Crowdin integration will automatically pick up the changes and notify translators that new translations are needed. Once the translation is completed, a pull request will be automatically created in this repository to add the new translated content.

For more details on how the integration works, see https://scientific-python-translations.github.io/docs/. For more details on how to translate the website, see https://scientific-python-translations.github.io/translate/.

Authoring blog post tips

1. To create a new blog post a good place to start is copying a subfolder under src/posts/, so, for example https://xarray.dev/blog/flox is written here https://github.com/xarray-contrib/xarray.dev/blob/e04905f5ea039eb2eb848c0b4945beee323900e4/src/posts/flox/index.md

Static assets

Once you have src/posts/newpost/index.md start writing! If you want to include figures or other static assets, they go into a matching public/posts/newpost folder. But! reference an images without the public part of the path like this:

<p align="center">
  <img src="/posts/newpost/figure.png" />
</p>

Xarray HTML reprs

To include an html repr, you must save it first:

with open('da-repr.html', 'w') as f:
   f.write(da._repr_html_())

Then put it into the post's static assets folder public/posts/newpost/da-repr.html. And finally in src/posts/newpost/index.md you can include it with this syntax:

<RawHTML filePath='/posts/newpost/da-repr.html' />

Toggling visibilty of sections (markdown comments)

While authoring, you might want to toggle specific sections on and off during rendering. You can do that with this syntax:

{/* This is a comment that won't be rendered! */}

Landing page banner

If you'd like to add a link to the latest blog post on the landing page banner, edit this section here:

xarray.dev/src/components/layout.js

Line 18 in e04905f

const bannerDescription = (