MLEM landing page v1.0

Design

The MLEM website version 1.0 preview:

Landing page mockups

Page in Figma:

Desktop version
Tablet version
Mobile version

Building blocks

Responsive building blocks in Figma:

Content

Page content in Notion;
The Product slides in Notion;
Integrations' vector logotypes in Figma.

Improve docs search results

Current DocsSearch has indexed everything from the site. So, the search results show unnecessary content as well.

Now, that we have access to the crawler, we can update the crawler config and customize the results.

Add CI checks and Restyled

We currently don't have any checks setup.

Add Restyled
Typescript/JS Check
Prettier Check
CodeClimate?

@iterative/websites, do we want CodeClimate? Also, we don't want to use CircleCI to runs checks like we do with dvc.org, right?

Add few WIP pages

Improve these WIP pages and add them to the sidebar:

{
  "slug": "datasets",
  "label": "WIP Working with datasets",
  "source": "user-guide/datasets.md"
},
{
  "slug": "remote-repos",
  "label": "WIP Working with repositories and remote objects",
  "source": "user-guide/remote-repos.md"
},
{
  "slug": "mlem-object",
  "label": "MlemObject API",
  "source": "api-reference/mlem-object.md"
},

Add examples for api.deploy

No examples exist yet for api.deploy. Not sure I can come up with one. But we should add them.

This is a follow up to #102

Address CLI/API feedback

feedback in #43
@mike0sv feedback https://iterativeai.slack.com/archives/C0249LW0HAQ/p1653662053687559

guide: broken nav sources

I came across a couple of broken links:

mlem.ai/content/docs/sidebar.json

Line 90 in 16bbc8e

"source": "user-guide/data.md"
mlem.ai/content/docs/sidebar.json

Line 95 in 16bbc8e

"source": "user-guide/remote-projects.md"

(I think we need to remove user-guide/ there)

Always show scrollbar in `Terminal`

the scrollbar will disappear sometimes depending on the OS/browser

doc: strange redirects

One more for @iterative/websites 😬

Load any docs URL e.g. https://mlem.ai/doc and keep an eye in the address bar. A trailing / flashes really fast. Network activity:

A bit worrying that it's using 301s which browsers don't really ever want to forget from their caches so the least people get this the better.

Replicated in https://www.webpagetest.org/result/220524_BiDcB6_GK3/1/details/#waterfall_view_step1

GS: reorg / rewrite

Mainly from #43 (comment)
and feedback from @shcheklein

General points to address (may require partial or full rewrite):

GS is very important. If a user didn't understand it, they won't use the tool.
mlem init (copied from DVC) is not needed. GS is should showcase the happy path.
Try combining the multiple current pages into 2 larger/more meaningful sections (similar to the 2 first sections of the MLEM release post), e.g.
i. Capturing models (saving + packaging?)
ii. Productionizing (applying, serving, deploying)
80% of important information should on the 1st screen in each page (or section?). The command we're explaining should be very visible.
Remove if __name__ == "__main__": and other code for brevity.
Code may be not reproducible if it's shorter: We may show full examples further down (scroll-to) or collapsible sections. Or nowhere (there's an example repo for this)
~~iris dataset looks very toyish. Better to swap it with a more realistic dataset.~~ Extracted to #198
Summarize text, consolidate sections, etc. to make the content in general shorter, concise, and on point.
Index page: Hide the info. about example repo tags (see #43 (comment)).
- Remove all ⛳ Git tag sections throughout (repetitive git commit commands). Link to the tags where needed instead.

Also address #129 ?

Logos always show load in animation when you enter page

images should show load in animation when user enters site for the first time only

It's unclear that menu items are clickable

Hi! There was some feedback about that it's unclear that these menu items are clickable:

Let's maybe make this right vertical line jumping from one item to another when you hover over them? Or in addition, unravel the item to show the text?
I assume that the terminal window would change only when you click on the item in the menu.

@yalozhkin, @julieg18, WDYT about it?

pprint command example cannot find remote data object

mlem.ai/content/docs/command-reference/pprint.md

Line 58 in 71557d2

$ mlem pprint https://github.com/iterative/example-mlem-get-started/iris.csv

The example path needs to be updated to some tag in the iterative/example-mlem-get-started repository, like 4-pack, 5-deploy-meta or some permalink?

Working example

$ mlem pprint https://raw.githubusercontent.com/iterative/example-mlem-get-started/5-deploy-meta/.mlem/data/iris.csv
⏳️ Loading meta from https://raw.githubusercontent.com/iterative/example-mlem-get-started/5-deploy-meta/.mlem/data/iris.csv.mlem
{'artifacts': {'data': {'hash': '45109f850511f9474665f2c26f4c79f3',
                        'size': 2470,
                        'uri': 'iris.csv'}},
 'data_type': {'columns': ['sepal length (cm)',
                           'sepal width (cm)',
vscode ➜ /workspaces/example-mlem-get-started (main ✗) $ mlem pprint --help
Usage: mlem pprint [options] path

  Print specified MLEM object
vscode ➜ /workspaces/example-mlem-get-started (main ✗) $ mlem pprint https://raw.githubusercontent.com/iterative/example-mlem-get-started/5-deploy-meta/.mlem/data/iris.csv
⏳️ Loading meta from https://raw.githubusercontent.com/iterative/example-mlem-get-started/5-deploy-meta/.mlem/data/iris.csv.mlem
{'artifacts': {'data': {'hash': '45109f850511f9474665f2c26f4c79f3',
                        'size': 2470,
                        'uri': 'iris.csv'}},
 'data_type': {'columns': ['sepal length (cm)',
                           'sepal width (cm)',
                           'petal length (cm)',
                           'petal width (cm)'],
               'dtypes': ['float64', 'float64', 'float64', 'float64'],
               'index_cols': [],
               'type': 'dataframe'},
 'object_type': 'data',
 'reader': {'data_type': {'columns': ['sepal length (cm)',
                                      'sepal width (cm)',
                                      'petal length (cm)',
                                      'petal width (cm)'],
                          'dtypes': ['float64',
                                     'float64',
                                     'float64',
                                     'float64'],
                          'index_cols': [],
                          'type': 'dataframe'},
            'format': 'csv',
            'type': 'pandas'},
 'requirements': [{'module': 'pandas', 'version': '1.4.2'}]}

This seem to only work on raw.githubusercontent.com domain.

Add a `mlem.ai/chat` discord link

Right now we are borrowing dvc.org's discord link but we should give mlem.ai its own /chat redirect link (see cml.dev#199 conversation). This should be easily done, especially once we plug our gatsby-theme-iterative-docs into the site.

Adding copy button to code snippets

In the code snippets, there is no button to copy the code. This is usually a very useful feature. I mean code snippets in docs. This is the example from Terraform docs:

I guess this should be added to the common docs-engine and introduced to dvc.org/doc and cml.dev/doc as well.

One thing to note is that for shell code snippets we always add $ at the beginning of the line. It shouldn't be copied. Also those scripts usually have some output, it shouldn't be copied also:

For python snippets, AFAIK, we don't add any outputs, so those should be copied in full. The same goes for yaml snippets.

cc @rogermparent

Propose new typography across products, websites, docs and branding

Improve 404 page design

Here is what we have at the moment:

Review eslint configuration

cases: remove `.mlem/` from `.dvcignore` (DVC Integration)

I think we need add a note about removing /**/?*.mlem from .dvcignore in https://mlem.ai/doc/use-cases/dvc#using-mlem-in-dvc-pipeline

Otherwise, I am getting this error:

$ dvc repro
ERROR: Path 'proj_path/.mlem/model/clf.mlem' is ignored by
.dvcignore:1:/**/?*.mlem

Add storybook

Add number of Github stars to website

References:

Fix alert bar

#45 ended up breaking the alert box, the code is in there but it's an invisible 0-height element for some reason

Link to model registry isn't very noticable

Maybe we could add a section after "Why MLEM?" about model registry? (Put down as p2 but might be a p1)

Try dark background for the terminal

First of all, I think it's more common these days for developers.

Also, it will look better (a bit more contrast, can bring more attention)

Admonition icon `"��💡"` bug on doc landing page

There is a strange admonition, particularly on the https://mlem.ai/doc page.

Reproduce:
Upon navigation or reload.

Fix UC: MR page links

Some feedback

Typing on the CLI screen is slow. It is quite boring to watch until I got the idea.
Turn your Git repo into model registry -

3. `Why MLEM_` - it feels like icons are missing.

`yarn develop` fails [eng-web]

I'm on macOS. yarn (install) runs fine.

$ yarn --version
1.22.17

$ yarn develop
yarn run v1.22.17
\$ gatsby develop
success compile gatsby files - 0.356s
...
success onPreExtractQueries - 0.000s

 ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "github" on type "Query".

If you don't expect "github" to exist on the type "Query" it is most likely a typo.
However, if you expect "github" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and
what shape they have
- You want to optionally use your field "github" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL
schema. A quick fix is to add at least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content".
Visit our docs to learn how you can define the schema for "Query":
https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization#creating-type-definitions

File: src/utils/hooks/useStars.tsx:9:9

failed extract queries from components - 1.135s
success write out requires - 0.017s
success run static queries - 0.025s - 4/4 161.63/s
success run page queries - 0.022s - 3/3 137.39/s
success Running gatsby-plugin-sharp.IMAGE_PROCESSING jobs - 0.245s - 2/2 8.17/s

 ERROR 

Module not found: Error: Can't resolve '../../../public/page-data/sq/d/1164568807.json' in '.../mlem.ai/src/utils/hooks'



  ModuleNotFoundError: Module not found: Error: Can't resolve '../../../public/page-data/sq/d/1164568807.json' in '.../mlem.ai/src/utils/hooks'
  
  - Compilation.js:2016 
    [mlem.ai]/[webpack]/lib/Compilation.js:2016:28
  
...
  
  - async.js:6858 Object.parallel
    [mlem.ai]/[neo-async]/async.js:6858:9
  
  - NormalModuleFactory.js:873 NormalModuleFactory._resolveResourceErrorHints
    [mlem.ai]/[webpack]/lib/NormalModuleFactory.js:873:12
  
  - NormalModuleFactory.js:834 
    [mlem.ai]/[webpack]/lib/NormalModuleFactory.js:834:18
  

not finished Building development bundle - 1.008s

error Command failed with exit code 1.

Add docs engine

MLEM release is planned for the end of Q1. We'll need the docs engine running on the website, and I assume the very first parts of documentation will be ready in the 2nd half of February.
CC @rogermparent @julieg18 @yathomasi

Update search engine for mlem.ai

Let's update search engine to search on mlem.ai, shall we?

Originally posted by @aguschin in #43 (comment)

Could be in #45

Allow Terminal Animation to Replay

There isn't a way to replay the terminal animation. (Maybe some kind of play again button in corner of terminal?)

cc @yalozhkin

Minor style issues after docs engine merge

Fix misaligned title anchor #77
#72 The border line in the content list is missing some margin

#73 For some reason, the left sidebar is spliing into the content

#74 The github button isn't staying at the top of the page

Add Get Started button

Feedback from @dmpetrov.

It is not clear how to start with the tool. Docs is usually not the place people starting from.
It would be great to have a visible Get Started button. Link in dvc.org:

`init`: cover remote project cases (in guide and ref)

There should probably be a separate section (in Remote Objects) to explain that you can initialize MLEM projects in remote locations and give some motivation (why would I do that). The cmd ref. also should be much more emphatic about this.

Originally posted by @jorgeorpinel in #113 (comment)

links: enable automatic linking and remove manual ones

MD code blocks like mlem {cmd} ... (CLI commands), mlem.api.{method}(...) (API methods), and .mlem (meta-files/dirs) can be automatically, linked like in dvc.org.

Enable for CLI and API command/method names (iterative/gatsby-theme-iterative#19) (#81)
Configure other terms e.g. metafiles, cmd aliases (#83)
Remove all manual links

Bonus

Add mlem command info to cmd ref index.

docs: lots of condescending language

I know it's not intentional but the current writing style includes a lot of "of course", "obviously", "you can just do x or y", etc. This can scare off readers. We should address this sooner than later, I think.

More context and examples: iterative/dvc.org#1394

For now I'll update this language as it comes when I write or update things for other reasons.

guide: clarify MLEM Object term

What's an object? ... very generic term and there's not much info about this concept [early] in the Get Started (the term comes up a few times in previous pages but it seems to refer to something else, proving that the word is too generic).

Originally posted by @jorgeorpinel in #82 (comment)

p.s. maybe we need a Glossary page somewhere?

Navbar links should be accessible for mobile user

We are hiding the navbar links on mobile view without providing an alternative solution to it.

Possible solutions are:

Urgent solution -> At least show Docs link (#118)
Add a hamburger menu
Add options dropdown menu(similar to iterative.ai)

Use doc's theme `Link` component instead of local `SmartLink`component

Currently mlem.ai uses its local SmartLink in most link instances. But with the doc theme integrated, we can go ahead and delete the SmartLink, using the @dvcorg/gatsby-theme-iterative's Link instead.

home: featured texts

Extracted from #51 (review)

From home page: https://mlem.ai/

First, the idea is to show a basic workflow and main features, right? Keeping that in mind...

Save your model with a single command

What command? The slide shows a Python call (model.api.save())

Use simple YAML file to save model metadata

Not sure the YAML format is simple or whether that matters much. Maybe "Model metadata is captured automatically" (mention "YAML format" in subtext if needed).