Skip to content

Commit

Permalink
Fix documentation linking (#235)
Browse files Browse the repository at this point in the history
  • Loading branch information
Lotes authored May 27, 2024
1 parent 9bb0160 commit 398b361
Show file tree
Hide file tree
Showing 17 changed files with 36 additions and 29 deletions.
4 changes: 2 additions & 2 deletions hugo/content/_index.html
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,9 @@ <h2 class="text-center text-2xl tracking-tight sm:text-3xl lg:text-4xl">
</a>
</div>
<div class="mt-2 sm:mt-0 mx-2 max-w-sm h-14 sm:max-w-none sm:flex sm:justify-center">
<a href="/docs/getting-started/"
<a href="/docs/learn/workflow/"
class="rounded-xl flex items-center justify-center px-4 py-3 border-2 border-transparent font-medium text-gray-100 hover:bg-emeraldLangium border-emeraldLangium bg-emeraldLangium sm:bg-transparent sm:px-8">
Getting Started
Learn
</a>
</div>
<div id="scroll-down" class="mx-2 hidden cursor-pointer relative sm:flex">
Expand Down
2 changes: 1 addition & 1 deletion hugo/content/docs/introduction/features.md
Original file line number Diff line number Diff line change
Expand Up @@ -101,4 +101,4 @@ The LSP includes commonly used language features, such as code completion, custo

You can try out most of these features using our [showcase](/showcase/) and [playground](/playground/). The languages shown there are written using Langium and integrated in the monaco-editor.

If you're interested in Langium, you can check out our [getting started](/docs/getting-started) page next. There you'll learn how to get started writing your first language, and to learn more about how Langium can help you achieve your language designing goals.
If you're interested in Langium, you can check out our [learning](/docs/learn/workflow) page next. There you'll learn how to get started writing your first language, and to learn more about how Langium can help you achieve your language designing goals.
2 changes: 1 addition & 1 deletion hugo/content/docs/learn/_index.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@ title: "Learn Langium"
weight: 0
url: /docs/learn
---
<meta http-equiv="refresh" content="0; url=/docs/learn/worflow/"/>
<meta http-equiv="refresh" content="0; url=/docs/learn/workflow/"/>
2 changes: 1 addition & 1 deletion hugo/content/docs/learn/minilogo/_index.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,4 @@ By working through each of these tutorials, you'll be learning about:

By the end of this series, you should be equipped to start working on your own language, and also have a pretty good idea for how you can integrate Langium into other projects as well.

With that being said, hop on in to the first guide on [Writing a Grammar in Langium](writing_a_grammar)!
With that being said, hop on in to the first guide on [Writing a Grammar in Langium](/docs/learn/minilogo/writing_a_grammar)!
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ weight: 5

{{< toc format=html >}}

In this tutorial we'll be going over how to build a VSIX extension (VSCode extension) for your Langium-based language. This will allow providing LSP support in VSCode for your language. We'll assume that you've already looked at the previous tutorial, and have had time to read the [guide on bundling](/guides/code-bundling/), so that you're ready to build an extension. At this point we assume that your language is also working, and there are no issues running `npm run langium:generate` or `npm run build`. If there are, you'll want to correct those first.
In this tutorial we'll be going over how to build a VSIX extension (VSCode extension) for your Langium-based language. This will allow providing LSP support in VSCode for your language. We'll assume that you've already looked at the previous tutorial, and have had time to read the [guide on bundling](/docs/recipes/code-bundling), so that you're ready to build an extension. At this point we assume that your language is also working, and there are no issues running `npm run langium:generate` or `npm run build`. If there are, you'll want to correct those first.

## Setting up the Scripts

To get started, you'll want to have a language expressed in Langium, such as [Lox](https://github.com/langium/langium-lox) or [MiniLogo](https://github.com/langium/langium-minilogo). If you have been following along with these tutorials, you should already have something ready. If you don't you can also use the default language generated by the yeoman generator for Langium, presented in the [getting started](/docs/getting-started/) section.
To get started, you'll want to have a language expressed in Langium, such as [Lox](https://github.com/langium/langium-lox) or [MiniLogo](https://github.com/langium/langium-minilogo). If you have been following along with these tutorials, you should already have something ready. If you don't you can also use the default language generated by the yeoman generator for Langium, presented in the [workflow](/docs/learn/workflow/) section.

Regardless of what you're working with, you'll want to make sure you have the following scripts in your **package.json**.

Expand Down Expand Up @@ -87,4 +87,4 @@ And that's it, at this point you have an extension for your language that you ca

As a quick aside, it's important to keep the extensions that your language recognizes synchronized in both your **package.json** and your **langium-config.json**. If you do make changes to your extensions, it's a good idea to double check that these are both synced up, and to do a full rebuild to get those changes into your extension.

And that's it for building an extension. In the next tutorial, we'll be setting up [Langium + Monaco in the web](/tutorials/langium_and_monaco/).
And that's it for building an extension. In the next tutorial, we'll be setting up [Langium + Monaco in the web](/docs/learn/minilogo/langium_and_monaco/).
6 changes: 3 additions & 3 deletions hugo/content/docs/learn/minilogo/customizing_cli.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ weight: 2

{{< toc format=html >}}

In this tutorial, we'll be talking about customizing the command line interface for your language. We recommend reading through previous tutorials about [writing a grammar](/tutorials/writing_a_grammar) and [validation](/tutorials/validation). Once you have a good grasp on those concepts, then you should be all set for setting up a CLI. We will also continue to use the [MiniLogo](https://github.com/langium/langium-minilogo) language as a motivating example.
In this tutorial, we'll be talking about customizing the command line interface for your language. We recommend reading through previous tutorials about [writing a grammar](/docs/learn/minilogo/writing_a_grammar) and [validation](/docs/learn/minilogo/validation). Once you have a good grasp on those concepts, then you should be all set for setting up a CLI. We will also continue to use the [MiniLogo](https://github.com/langium/langium-minilogo) language as a motivating example.

## Overview

Expand All @@ -15,7 +15,7 @@ Once you have a grammar and some validation in place, you may want to start conf

If you've been using a language built with the yeoman generator for Langium, you should be able to find your CLI defined in **src/cli/index.ts**. This file describes the general layout of your languages's command line interface, and lets you register specific commands. By default, you're provided with a single command for your CLI, the **generate** command.

Much like the command implies, it allows you to take a program written in your DSL, parse it, and traverse the AST to produce some sort of generated output. We won't talk about the generator itself in this tutorial (that will come in the [next tutorial on generation](/tutorials/generation)). Instead we'll focus on a simple example for parsing and validating a program, which allows learning more about the CLI itself.
Much like the command implies, it allows you to take a program written in your DSL, parse it, and traverse the AST to produce some sort of generated output. We won't talk about the generator itself in this tutorial (that will come in the [next tutorial on generation](/docs/learn/minilogo/generation)). Instead we'll focus on a simple example for parsing and validating a program, which allows learning more about the CLI itself.

## Adding a Parse and Validate Action

Expand Down Expand Up @@ -148,4 +148,4 @@ Running the CLI again should show that this program has an error, and better yet
This is perfect, as we didn't have to implement too much more logic to get validation in our CLI. Since we already hooked up our validation service before, the CLI just handles the interaction with an external program. This separation of concerns makes for a very flexible implementation that is easy to adapt over time.

That sums up how to add basic CLI functionality. [In the next tutorial, we will be talking about generation in more detail](/tutorials/generation), specifically about techniques that you can use to traverse your AST and produce a generated output.
That sums up how to add basic CLI functionality. [In the next tutorial, we will be talking about generation in more detail](/docs/learn/minilogo/generation), specifically about techniques that you can use to traverse your AST and produce a generated output.
4 changes: 2 additions & 2 deletions hugo/content/docs/learn/minilogo/generation.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ weight: 3

{{< toc format=html >}}

In this tutorial we'll be showing how to implement basic generation for your language. When we're talking about generation, we're talking about transforming an AST from your Langium-based language into some output target. This could be another language of similar functionality (transpilation), a lower level language (compilation), or generating some artifacts/data that will be consumed by another application. If you haven't already, make sure to go back over and check out the [tutorial on customizing your CLI](/tutorials/customizing_cli), as it touches on details about how to implement endpoints for your application (like generation).
In this tutorial we'll be showing how to implement basic generation for your language. When we're talking about generation, we're talking about transforming an AST from your Langium-based language into some output target. This could be another language of similar functionality (transpilation), a lower level language (compilation), or generating some artifacts/data that will be consumed by another application. If you haven't already, make sure to go back over and check out the [tutorial on customizing your CLI](/docs/learn/minilogo/customizing_cli), as it touches on details about how to implement endpoints for your application (like generation).

Per usual, we'll be using the MiniLogo language as a motivating example here.

Expand Down Expand Up @@ -375,4 +375,4 @@ If you're looking at the implementation of [MiniLogo that we've already written

We could continue to extend on this with new features, and generate new sorts of output using a given input language. In this tutorial, we're able to take a MiniLogo program and convert it into some simple JSON drawing instructions that can be consumed by another program. This opens the door for us to write such a program in another language, such as Python or Javascript, and draw with these results. In later tutorials, we'll be talking about how to run Langium in the web with generation, so that we can immediately verify our results by drawing on an HTML5 canvas.

We recommend that you next read [the guide on bundling your language with Langium to reduce its size](/guides/code-bundling), before moving onto the tutorial about [bundling an extension](/tutorials/building_an_extension). This is an important step before deployment as an extension for VSCode, and also if you're planning to later deploy your language in the web.
We recommend that you next read [the guide on bundling your language with Langium to reduce its size](/docs/recipes/code-bundling), before moving onto the tutorial about [bundling an extension](/docs/learn/minilogo/building_an_extension). This is an important step before deployment as an extension for VSCode, and also if you're planning to later deploy your language in the web.
4 changes: 2 additions & 2 deletions hugo/content/docs/learn/minilogo/generation_in_the_web.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,15 +81,15 @@ shared.workspace.DocumentBuilder.onBuildPhase(DocumentState.Validated, documents

And that's it for setting up the onBuildPhase listener itself. We still need to address the usage of `generateMiniLogoCmds`, which is tied to the LS implementation.

Based on the work done in previous tutorials, we already have set up a working generator with MinLogo. If you haven't already set this up you can go back to the [tutorial on generation](/tutorials/generation) and give it a look over. Ideally, we'll already have setup our `generateStatements` function for MiniLogo, meaning so long as the imported module doesn't have any modules that are browser incompatible, we should be able to use it as is. Based on the previous setup however, we should have a **generator.js** file that is free of such conflicts, as much of them should be separated into the cli directly.
Based on the work done in previous tutorials, we already have set up a working generator with MinLogo. If you haven't already set this up you can go back to the [tutorial on generation](/docs/learn/minilogo/generation) and give it a look over. Ideally, we'll already have setup our `generateStatements` function for MiniLogo, meaning so long as the imported module doesn't have any modules that are browser incompatible, we should be able to use it as is. Based on the previous setup however, we should have a **generator.js** file that is free of such conflicts, as much of them should be separated into the cli directly.

This saves us quite a bit of time, since we don't need to handle setting up & dispatching a document for validation, we simply tap into the existing workflow and collect the result when it's ready. This is a great example of how Langium's architecture allows us to easily extend existing functionality, and add new features without having to rewrite existing code.

As a concluding note for this section, don't forget to rebuild your language server bundle! It might not be a bad idea to clean as well, just to be sure everything is working as expected at this step.

## Listening for Notifications in the Client

The next step we need to make is to actually listen for these notifications from the client's end. This takes us back to the [Langium + Monaco](/tutorials/langium_and_monaco) setup in the previous tutorial.
The next step we need to make is to actually listen for these notifications from the client's end. This takes us back to the [Langium + Monaco](/docs/learn/minilogo/langium_and_monaco) setup in the previous tutorial.

After starting the wrapper successfully, we want to retrieve the MonacoLanguageClient instance (a wrapper around the language client itself) and listen for `browser/DocumentChange` notifications.

Expand Down
2 changes: 1 addition & 1 deletion hugo/content/docs/learn/minilogo/langium_and_monaco.md
Original file line number Diff line number Diff line change
Expand Up @@ -616,4 +616,4 @@ npm run serve

You should be greeted with a page that contains a working Monaco instance and a small MiniLogo program in the editor. This editor has the highlighting we would expect, and also is fully connected to the language server for our language. This means we have full LSP support for operations that we would expect to have in a native IDE, such as VSCode.

And that's it, we have successfully implemented Langium + Monaco in the web for our language. It's not doing much at this time besides presenting us with an editor, but in the next tutorial we'll talk about [using the same setup to add generation in the web](/tutorials/generation_in_the_web). Since our generation has already been configured natively in prior tutorials, we can use what we've written to quickly implement a web application that translates MiniLogo programs into drawing instructions for an HTML5 canvas.
And that's it, we have successfully implemented Langium + Monaco in the web for our language. It's not doing much at this time besides presenting us with an editor, but in the next tutorial we'll talk about [using the same setup to add generation in the web](/docs/learn/minilogo/generation_in_the_web). Since our generation has already been configured natively in prior tutorials, we can use what we've written to quickly implement a web application that translates MiniLogo programs into drawing instructions for an HTML5 canvas.
4 changes: 2 additions & 2 deletions hugo/content/docs/learn/minilogo/validation.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ weight: 1

{{< toc format=html >}}

In this tutorial, we will be talking about implementing validation for your Langium-based language. We recommend first reading the previous tutorial about [writing a grammar](/tutorials/writing_a_grammar/), as we will assume you're familiar with the topics covered there. We'll also assume that you have a working language to add validation to, so double check that `npm run langium:generate` succeeds without errors before you proceed.
In this tutorial, we will be talking about implementing validation for your Langium-based language. We recommend first reading the previous tutorial about [writing a grammar](/docs/learn/minilogo/writing_a_grammar/), as we will assume you're familiar with the topics covered there. We'll also assume that you have a working language to add validation to, so double check that `npm run langium:generate` succeeds without errors before you proceed.

For this tutorial, we'll be implementing validation for the [MiniLogo language](https://github.com/langium/langium-minilogo), but you can use your own language to follow along as well.

Expand Down Expand Up @@ -150,4 +150,4 @@ checkUniqueParams(def: Def, accept: ValidationAcceptor): void {

Although we've only implemented a pair of validations, hopefully this demonstrates the flexibility of the validator API. The validator can help enforce constraints or features of your language, and ensure that your programs are correct. You could also explore more customized validations for specific cases, perhaps where a parameter and a definition share the same name -- which is not handled here. So long as you can identify the AST node type that you need to validate, you can implement the logic here.

That's all for validation. Next we'll be talking about how we can [customize our CLI](/tutorials/customizing_cli).
That's all for validation. Next we'll be talking about how we can [customize our CLI](/docs/learn/minilogo/customizing_cli).
4 changes: 2 additions & 2 deletions hugo/content/docs/learn/minilogo/writing_a_grammar.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ Now that we have an idea of our semantics and our concrete syntax, we can then s

As an aside, our version of MiniLogo will be an *approximation* of Dr. Walkingshaw's version. We won't adhere to it completely, and we won't be incorporating some elements, such as variable declarations.

To get started sketching the grammar we'll be using the **Hello World** example from the yeoman generator. You can read about how to get this setup in the [Getting Started](/docs/getting-started/) section of our docs. We'll be working with a fresh from the generator using only the defaults, and building up from that. We'll begin by modifying the default grammar file, and updating it to work for MiniLogo. You can find this file under **src/language/hello-world.langium** in your new project. If you used a name other than the default, the file will still be there, but using your custom name instead.
To get started sketching the grammar we'll be using the **Hello World** example from the yeoman generator. You can read about how to get this setup in the [learning](/docs/learn/workflow/) section of our docs. We'll be working with a fresh from the generator using only the defaults, and building up from that. We'll begin by modifying the default grammar file, and updating it to work for MiniLogo. You can find this file under **src/language/hello-world.langium** in your new project. If you used a name other than the default, the file will still be there, but using your custom name instead.

We'll be overriding the existing langium grammar file completely, so delete the old contents before we begin.

Expand Down Expand Up @@ -309,4 +309,4 @@ The generation should finish successfully, indicating that our grammar doesn't h
- a semantic model (that ASTs can be mapped onto)
- a parser that recognizes our language

With that, we have the beginnings of our very own language! Hopefully this gives a good idea of how to express a grammar in Langium, particularly with consideration to your concrete syntax & semantic domain. You can also consider the ways we can express cases that are left-recursive, like expressions, in an alternative fashion. Overall, our grammar should now be ready for the next step of [validation in the following tutorial](/tutorials/validation).
With that, we have the beginnings of our very own language! Hopefully this gives a good idea of how to express a grammar in Langium, particularly with consideration to your concrete syntax & semantic domain. You can also consider the ways we can express cases that are left-recursive, like expressions, in an alternative fashion. Overall, our grammar should now be ready for the next step of [validation in the following tutorial](/docs/learn/minilogo/validation).
Loading

0 comments on commit 398b361

Please sign in to comment.