docs: improve SEO by adding metadata to markdown-based articles

solara/website/pages/documentation/advanced/__init__.py

@@ -2,17 +2,18 @@
 
 import solara
 from solara.autorouting import generate_routes_directory
+from solara.website.components.markdown import MarkdownWithMetadata
 
 title = "Advanced"
 HERE = Path(__file__)
 # if we didn't put the content in the subdirectory, but pointed to the current file
 # we would include the current file recursively, causing an infinite loop
-routes = generate_routes_directory(HERE.parent / "content")
+routes = generate_routes_directory(HERE.parent / "content", MarkdownWithMetadata)
 
 
 @solara.component
 def Page(route_external=None):
-    solara.Markdown(Path(HERE.parent / "content" / "10-howto" / "00-overview.md").read_text())
+    MarkdownWithMetadata(Path(HERE.parent / "content" / "10-howto" / "00-overview.md").read_text())
 
     with solara.Row(justify="center", style={"flex-wrap": "wrap", "align-items": "start"}):
         for child in route_external.children:

solara/website/pages/documentation/advanced/content/10-howto/00-overview.md

@@ -1 +1,6 @@
+---
+title: overview of how-to articles
+description: The how-tos are meant as deeper dives into specific topics from various perspectives
+---
+
 The how-tos are meant as deeper dives into specific topics. Although we try to write each how-to as a standalone document, some parts of a how-to may build on top of a previous one.

solara/website/pages/documentation/advanced/content/10-howto/10-multipage.md

@@ -1,3 +1,8 @@
+---
+title: Building multi-page apps in Solara
+description: The simplest way to create a multi-page app is to create a directory with multiple scripts.
+---
+
 # Multi-page support
 
 In the [Web App tutorial](/documentation/getting_started/tutorials/web-app), we created an application consisting of a single page. Web applications generally have multiple pages, and Solara supports this as well.

solara/website/pages/documentation/advanced/content/10-howto/20-layout.md

@@ -1,3 +1,8 @@
+---
+title: Making different layouts in Solara
+description: Solara comes with a layout system ideal for data apps. Learn how to use them in this short guide.
+---
+
 # Layout
 
 Solara comes with a layout system ideal for data apps.

solara/website/pages/documentation/advanced/content/10-howto/30-testing.md

@@ -1,3 +1,8 @@
+---
+title: Testing your Solara application, both front and back end
+description: Using solara you can test both the front and back end functionalities of your application.
+---
+
 # Testing with Solara
 # Testing Application Logic
 

solara/website/pages/documentation/advanced/content/10-howto/31-debugging.md

@@ -1,4 +1,7 @@
-
+---
+title: Debugging solara applications
+description: You can use the python debugger to debug your Solara app.
+---
 # Debugging
 
 ## PDB

solara/website/pages/documentation/advanced/content/10-howto/40-embed.md

@@ -1,3 +1,9 @@
+---
+title: Embedding Solara applications into existing websites
+description: Solara can be embedded into existing websites. Although it is technically possible to embed a Solara app into an existing webpage,
+    we currently support embedding primarily via iframes.
+---
+
 # Embedding in existing websites
 
 Solara can be embedded into existing websites. Although it is technically possible to embed a Solara app into an existing webpage, we currently support embedding primarily via iframes.

solara/website/pages/documentation/advanced/content/10-howto/50-ipywidget_libraries.md

@@ -1,3 +1,7 @@
+---
+title: Using various ipywidgets libraries within a Solara application
+description: Solara can work with virtually any ipywidget library, and enables powerful interactivity with libraries like ipyleaflet, ipydatagrid, and bqplot
+---
 # How can I use ipywidget library X?
 
 Solara can work with any ipywidget library, such as [ipyleaflet](https://github.com/jupyter-widgets/ipyleaflet), [ipydatagrid](https://github.com/bloomberg/ipydatagrid) or [bqplot](https://github.com/bqplot/bqplot).

solara/website/pages/documentation/advanced/content/20-understanding/00-introduction.md

@@ -1,3 +1,9 @@
+---
+title: Understanding Solara's functionality
+description: Solara builds on existing technologies. If you are new to Solara or some of the underlying technologies, you may feel lost at times.
+    These 'understanding' guides are meant to help you understand topics at a deeper level and how they connect to Solara.
+---
+
 # Introduction
 
 Solara builds on existing technologies. If you are new to Solara or some of the underlying technologies, you may feel lost at times.

solara/website/pages/documentation/advanced/content/20-understanding/05-ipywidgets.md

@@ -1,3 +1,8 @@
+---
+title: Understanding how ipywidgets work together with Solara
+description: Solara's primarily standalone app approach differs from the ipywidgets one. This article dives deeper into the different approaches and adapting to using
+    ipywidgets within Solara.
+---
 # IPywidgets
 
  * [Documentation](https://ipywidgets.readthedocs.io/en/stable/)

solara/website/pages/documentation/advanced/content/20-understanding/06-ipyvuetify.md

@@ -1,3 +1,7 @@
+---
+title: Using ipyvuetify widgets with Solara
+description: Ipyvuetify is an ipywidgets based library that wraps the Vuetify javascript framework for use with python widgets. Learn how to use these to build apps with Solara.
+---
 # ipyvuetify
 
  * [Documentation](https://ipyvuetify.readthedocs.io/)

solara/website/pages/documentation/advanced/content/20-understanding/10-reacton.md

@@ -1,3 +1,7 @@
+---
+title: Understanding how Solara builds on Reacton
+description: Solara adapts the React way of using components declaratively to build UIs and brings it to Python.
+---
 # Reacton
 
  * [Documentation](https://reacton.solara.dev/)

solara/website/pages/documentation/advanced/content/20-understanding/12-reacton-basics.md

@@ -1,3 +1,7 @@
+---
+title: Undestanding the basics of Reacton
+description: Using your favorite component, we try to understand a bit better how it works to improve your understanding of Reacton and thus how to use Solara.
+---
 # Reacton basic understanding
 
 

solara/website/pages/documentation/advanced/content/20-understanding/15-anatomy.md

@@ -1,3 +1,7 @@
+---
+title: The anatomy of Solara's functionality
+description: Dive deep into how Solara uses the technologies it builds on.
+---
 # Anatomy
 
 For communication, it is useful to speak the same language and use the same idiom.

solara/website/pages/documentation/advanced/content/20-understanding/17-rules-of-hooks.md

@@ -1,3 +1,7 @@
+---
+title: The rules of hooks in Solara
+description: Learn the rules that govern the usage of hooks in your Solara application.
+----
 # Rules of hooks
 
 For now, we refer to the [ReactJS documentation](https://reactjs.org/docs/hooks-rules.html).

solara/website/pages/documentation/advanced/content/20-understanding/18-containers.md

@@ -1,3 +1,9 @@
+---
+title: Using Solara with containers to build complex UIs
+description: Solara allows for using python with statements to populate your UIs in a structured manner. This makes it easy to compose different components to build cohesive
+    wholes.
+---
+
 # Laying out components with containers
 
 ## Introduction

solara/website/pages/documentation/advanced/content/20-understanding/20-solara.md

@@ -1,3 +1,8 @@
+---
+title: Understanding different parts of Solara
+description: Solara is made of two main components, the bulk of the Solara package with UI elements that can be used together with Jupyter, and Solara server, which
+    allows for these UI elements to be used in standalone apps and dashboards
+---
 # Solara
 
 Solara combines [ipywidgets](./ipywidgets), [reacton](./reacton) and puts it into a opinionated framework to make web apps with a focus on data (data apps for short).

solara/website/pages/documentation/advanced/content/20-understanding/40-routing.md

@@ -1,3 +1,7 @@
+---
+title: Understanding routing in multi-page solara apps
+description: Dive into solara's routing, which provides a powerful way to compose multiple pages or dashboards into an integrated app.
+---
 # Routing
 
 Routing takes care of linking a web address (more specifically the [pathname](https://developer.mozilla.org/en-US/docs/Web/API/Location), e.g. "/docs/basics/solara") to a state of the UI,

solara/website/pages/documentation/advanced/content/20-understanding/50-solara-server.md

@@ -1,3 +1,8 @@
+---
+title: Understanding the way Solara server works
+description: The solara server enables running ipywidgets based applications as standalone dashboards and apps, allowing multiple "Virtual kernels" to share
+   the same process for better performance and scalability.
+---
 # Solara server
 
 The solara server enables running ipywidgets based applications without a real Jupyter kernel, allowing multiple "Virtual kernels" to share the same process for better performance and scalability.

solara/website/pages/documentation/advanced/content/20-understanding/60-voila.md

@@ -1,3 +1,8 @@
+---
+title: Working together with Voila
+description: Voilà, together with `voila-vuetify` is an alternative to Solara server. The most significant difference is that Voilà will start one kernel/process
+    per page request, while Solara server is more scalable.
+---
 # Voilà
 
 [Voilà](https://voila.readthedocs.io/) allows you to convert a Jupyter Notebook into an interactive dashboard that allows you to share your work with others.

solara/website/pages/documentation/advanced/content/30-enterprise/10-oauth.md

@@ -1,3 +1,7 @@
+---
+title: Using OAuth in your Solara app
+description: Open Authorization can be readily integrated into your Solara applications via the Solara-Enterprise package.
+---
 # OAuth: authentication and authorization support
 
 ## What is OAuth

solara/website/pages/documentation/advanced/content/40-development/01-contribute.md

@@ -1,3 +1,7 @@
+---
+title: Contributing to Solara
+description: You do not need to be a developer to contribute to Solara. We welcome all contributions, bug reports, documentation improvements and code contributions.
+---
 # Contributing to Solara
 
 You do not need to be a developer to contribute to Solara. We welcome all contributions, bug reports, documentation improvements and code contributions.

solara/website/pages/documentation/advanced/content/40-development/10-setup.md

@@ -1,3 +1,7 @@
+---
+title: Development setup for Solara
+description: Learn how to set up your installation for building on the Solara framework.
+---
 # Development
 
 See also [the contributing guide](/documentation/advanced/development/contribute) for more information on how to contribute to Solara.

solara/website/pages/documentation/faq/__init__.py

@@ -1,11 +1,12 @@
 from pathlib import Path
 
 import solara
+from solara.website.components.markdown import MarkdownWithMetadata
 
 title = "FAQ"
 HERE = Path(__file__)
 
 
 @solara.component
 def Page(route_external=None):
-    solara.Markdown(Path(HERE.parent / "content" / "99-faq.md").read_text())
+    MarkdownWithMetadata(Path(HERE.parent / "content" / "99-faq.md").read_text())

solara/website/pages/documentation/faq/content/99-faq.md

@@ -1,4 +1,7 @@
-
+---
+title: FAQ about Solara
+description: Answers to some common questions about using Solara, and building your app using the framework
+---
 # FAQ
 
 ## I am not interested in the server, I'm happy with Jupyter/Voila, what's in it for me?

solara/website/pages/documentation/getting_started/__init__.py

@@ -2,14 +2,15 @@
 
 import solara
 from solara.autorouting import generate_routes_directory
+from solara.website.components.markdown import MarkdownWithMetadata
 
 title = "Getting Started"
 HERE = Path(__file__)
 # if we didn't put the content in the subdirectory, but pointed to the current file
 # we would include the current file recursively, causing an infinite loop
-routes = generate_routes_directory(HERE.parent / "content")
+routes = generate_routes_directory(HERE.parent / "content", MarkdownWithMetadata)
 
 
 @solara.component
 def Page(route_external=None):
-    solara.Markdown(Path(HERE.parent / "content" / "00-introduction.md").read_text())
+    MarkdownWithMetadata(Path(HERE.parent / "content" / "01-introduction.md").read_text())

solara/website/pages/documentation/getting_started/content/00-quickstart.md

@@ -1,3 +1,8 @@
+---
+title: Solara Quickstart
+description: Get started with building web- and data-apps in pure python with Solara
+---
+
 # Quickstart
 
 This 1-minute quickstart will get you to:

solara/website/pages/documentation/getting_started/content/01-introduction.md

@@ -1,3 +1,7 @@
+---
+title: A quick introduction to Solara
+description: Solara is an Open Source library that lets you use and build data-focused web apps (data apps) using reusable UI components. Here you'll learn the basics!
+---
 # Introduction
 
 

solara/website/pages/documentation/getting_started/content/02-installing.md

@@ -1,3 +1,7 @@
+---
+title: Installing Solara
+description: Installation should be as easy as running pip install solara. More options are available.
+---
 # Installation
 
 ## Create a virtual environment

solara/website/pages/documentation/getting_started/content/04-tutorials/00-overview.md

@@ -1,3 +1,8 @@
+---
+title: Solara Tutorials
+description: A collection of tutorials for those learning to use Solara, each geared towards a users coming from particular backgrounds, such as data science, or
+    users coming from other frameworks like Streamlit
+---
 # Tutorials
 
 Instead of having one tutorial, we have tutorials for different audiences.

solara/website/pages/documentation/getting_started/content/04-tutorials/20-web-app.md

@@ -1,3 +1,8 @@
+---
+title: Tutorial: Building web apps in python using Solara
+description: In this tutorial, you will learn how to use Solara to create a tiny web app using only Python. You can run these apps using either Solara server,
+    Jupyter lab / notebook, or whatever server infrastructure you prefer.
+---
 # Tutorial: Web app
 
 In this tutorial, you will learn how to use Solara to create a tiny web app using only Python.

solara/website/pages/documentation/getting_started/content/04-tutorials/30-ipywidgets.md

@@ -1,3 +1,7 @@
+---
+title: Tutorial - Building ipywidgets based apps
+description: Ipywidgets can be used together with Solara to build and quickly get to users your data apps or dashboards.
+---
 # Tutorial: IPywidgets
 
 If you are already using [ipywidgets](/documentation/advanced/understanding/ipywidgets) in the notebook, possibly using [Voila](/documentation/advanced/understanding/voila), you might be pleased to know that you

solara/website/pages/documentation/getting_started/content/04-tutorials/40-streamlit.md

@@ -1,3 +1,8 @@
+---
+title: Using Solara as a more scalable alternative to Streamlit
+description: If you are coming from Streamlit, it should be simple to adapt to using Solara, and take advantage of partial re-execution, state
+    management, and reusable components.
+---
 # Tutorial: Streamlit
 
 If you are coming from [Streamlit](https://streamlit.io/) you may be happy to know Solara does not re-execute your whole script. We execute components (starting with the `Page` component), and only need to re-execute what needs to.

solara/website/pages/documentation/getting_started/content/04-tutorials/50-dash.md

@@ -1,3 +1,7 @@
+---
+title: Using Solara as an alternative to Dash
+description: If you are familiar with Dash, Solara should be easy to adapt to. In Solara the state is managed and stored on the server, and components are declaratively reusable
+---
 # Tutorial: Dash users
 
 Dash is quite different from Solara. In Dash, state lives in your browser, and via callbacks your app will change from 1 state to another. In Solara, the state lives on the server, and also state transitions happen at the server.

solara/website/pages/documentation/getting_started/content/05-fundamentals/00-overview.md

@@ -1,3 +1,7 @@
+---
+title: Fundamentals of Solara
+description: These articles dive deeper into the fundamental aspects of Soalra, like using components, hooks, and managing state.
+---
 # Fundamentals
 
 If you want to dive deeper into Solara, this section is for you. We will cover the following topics:

solara/website/pages/documentation/getting_started/content/05-fundamentals/10-components.md

@@ -1,3 +1,8 @@
+---
+title: Introduction to Solara components
+description: In Solara, components are the building blocks of your web application. They allow you to create modular, reusable, and maintainable user interface elements
+    that can be combined to create a complete and interactive application
+---
 <!-- TODO: column auto -->
 
 # Introduction to Components

solara/website/pages/documentation/getting_started/content/05-fundamentals/50-state-management.md

@@ -1,3 +1,8 @@
+---
+title: Introduction to state management in Solara
+description: State management is a crucial aspect of building data-focused web applications with Solara. By effectively managing state, you can create interactive
+    and responsive applications that react to changes in data and user input.
+---
 # Introduction
 
 State management is a crucial aspect of building data-focused web applications with Solara. By effectively managing state, you can create interactive and responsive applications that react to changes in data and user input. In Solara, there are two primary ways to define state: global application state using [`solara.reactive`](/documentation/api/utilities/reactive) and local component state using [`solara.use_state`](/documentation/api/hooks/use_state) or [`solara.use_reactive`](/documentation/api/hooks/use_reactive). This article will discuss these two approaches and provide examples of how to use them in your Solara applications.

solara/website/pages/documentation/getting_started/content/06-reference/40-static_files.md

@@ -1,3 +1,7 @@
+---
+title: Using static files and resources in your Solara application
+description: When using Solara, you can host static files, like images, which will then be available at /static/public, in the ../public folder.
+---
 # Static files
 
 Files located on your local filesystem at the `../public` directory will be served by the Solara server at `/static/public`. A typical directory layout looks like this:

solara/website/pages/documentation/getting_started/content/06-reference/41-asset-files.md

@@ -1,3 +1,7 @@
+---
+title: Incorporating your assets, styles, and logos into your app
+description: Solara by default looks for overrides of certain style and asset files in the assets folder. You can use these to incorporate your branding into your dashboard or app
+---
 # Assets files
 
 Asset files are special files with are loaded by Solara-server and thus have a special meaning, and come with defaults. Current supported assets files are:

solara/website/pages/documentation/getting_started/content/06-reference/60-static-site-generation.md

@@ -1,3 +1,7 @@
+---
+title: Generating a static site version of your app or dashboard
+description: Solara's static site generation (SSG) feature allows you to pre-render HTML for your app or dashboard, improving the user experience by providing quick page loads
+---
 ## Static Site Generation
 ## Introduction
 Solara's static site generation (SSG) feature allows you to pre-render HTML for your website, improving the user experience by providing quick page loads. When a user requests a page, the pre-rendered HTML is served directly to the user. After the page is displayed, the Solara server will connect and take over rendering to make the page interactive.

solara/website/pages/documentation/getting_started/content/06-reference/70-search.md

@@ -1,3 +1,7 @@
+---
+title: Incorporating search into your Solara application
+description: If you are using static site generation (SSG) in your Solara application, you can make use of our search feature for it too!
+---
 # Search
 
 Solara can provide search, if [SSG](/documentation/getting_started/reference/static-site-generation) is enabled. This allows you to add a search box to you website, which performs a full-text search to provide quick access to pages. The solara website itself uses the

solara/website/pages/documentation/getting_started/content/06-reference/80-reloading.md

@@ -1,3 +1,7 @@
+---
+title: Automatic reloading of source files when developing with Solara
+description: Solara automatically detects changes in certain source file types, and hot reloads your application when you save them.
+---
 # Reloading
 
 ## Reloading of Python files

solara/website/pages/documentation/getting_started/content/06-reference/90-notebook-support.md

@@ -1,4 +1,7 @@
-
+---
+title: Using Solara within notebooks
+description: Solara can be used to generate an interactive app directly from your notebook file by running just one command
+---
 # Notebook support
 
 We also support notebooks, simply assign to the `Page` variable in a code cell, save your notebook, and run `$ solara run myapp.ipynb`. If you widget or component is called differently, run like `$ solara run myapp.ipynb:myobject.nested_widget`.