@@ -107,7 +108,8 @@ export default function DocumentationPage() {
Abra takes the middle road: an array indexing operation will always succeed and will always return a
"box", which may or may not contain a value. One way to "unbox" this value is to use
the coalescing operator (?:), also called the "Elvis operator" in some languages. This
- operator will either unbox the Optional and return what's inside, or will provide a given fallback.
+ operator will either unbox the Optional and return what's inside, or will provide a given
+ fallback.
{`
@@ -121,9 +123,10 @@ export default function DocumentationPage() {
`}
- There's another operator that makes it convenient to work with Optional types: the ?.
- operator. This allows for an Optional-safe way of accessing properties of variables without manually
- "unwrapping" the value. For example, if we wanted to get the length of a string contained within an array:
+ There's another operator that makes it convenient to work with Optional types:
+ the ?. operator. This allows for an Optional-safe way of accessing properties of
+ variables without manually "unwrapping" the value. For example, if we wanted to get the length of a string
+ contained within an array:
{`
@@ -137,9 +140,9 @@ export default function DocumentationPage() {
The rightLength variable will be of type Int?. Essentially, what happens here is
this: since the code can't be sure if the variable brian holds a value or not, we can use the
- Optional-safe operator (?.) to access its length property. If the variable
- holds a value, it will get the length property off of the variable; if it does not hold a
- value, it will just short-circuit and produce the value of None.
+ Optional-safe operator (?.) to access its length property. If the
+ variable holds a value, it will get the length property off of the variable; if it
+ does not hold a value, it will just short-circuit and produce the value of None.
Functions can also be declared with default argument values. This makes those parameters optional when - calling that function; if no value for that parameter is passed, the default value will be provided to the function - body. Arguments with default values will have their type be inferred from the default value, if no type - annotation is present. Note that all optional (aka default-valued) parameters must come at the end of the + calling that function; if no value for that parameter is passed, the default value will be provided to the + function body. Arguments with default values will have their type be inferred from the default value, if no + type annotation is present. Note that all optional (aka default-valued) parameters must come at the end of the argument list; there can be no required (aka non-default-valued) parameters among the optional ones.
@@ -192,10 +195,10 @@ export default function DocumentationPage() {
Calling Functions
Functions are called by using parentheses to pass in arguments, much like you'd expect. In Abra, you
- may take a named-arguments approach to provide additional clarity. These named arguments may be passed
- in any order, but you cannot mix named and unnamed parameters (it's all or nothing). It's especially helpful
- to use named-arguments when passing in a literal value (as opposed to a variable, which can have some intent
- ascribed to it via its name).
+ may take a named-arguments approach to provide additional clarity. These named arguments may be
+ passed in any order, but you cannot mix named and unnamed parameters (it's all or nothing). It's especially
+ helpful to use named-arguments when passing in a literal value (as opposed to a variable, which can have some
+ intent ascribed to it via its name).
Parameters with default values will be set to those values upon calling the function. The default value will
@@ -217,8 +220,8 @@ export default function DocumentationPage() {
Lambda Functions
There's also a syntax for anonymous lambda functions in Abra, which follows after Typescript's arrow
- function syntax. Arguments are in parentheses followed by their type annotations, then an arrow (=>)
- and then either a single expression or a block.
+ function syntax. Arguments are in parentheses followed by their type annotations, then an arrow
+ (=>) and then either a single expression or a block.
{`
@@ -300,10 +303,10 @@ export default function DocumentationPage() {
`}
- When a type is declared in this way, there will also be a function declared with the same name as the type, which
- has arguments that match that type's fields. This is like a constructor in other languages, and is used to
- create new instances of that type. Much like how regular function work (see the section above on Functions), these
- parameters can be passed in any order.
+ When a type is declared in this way, there will also be a function declared with the same name as the type,
+ which has arguments that match that type's fields. This is like a constructor in other languages, and
+ is used to create new instances of that type. Much like how regular function work (see the section above on
+ Functions), these parameters can be passed in any order.
{`
@@ -326,8 +329,8 @@ export default function DocumentationPage() {
`}
- Fields on an instance of a type can be accessed using the dot operator, much like you may be used to from other
- languages. You can also use the same idea to update an instance's fields.
+ Fields on an instance of a type can be accessed using the dot operator, much like you may be used to from
+ other languages. You can also use the same idea to update an instance's fields.
{`
@@ -341,8 +344,9 @@ export default function DocumentationPage() {
Methods on Types
- Methods can also be declared within a type declaration. Functions with self as the first
- parameter will be instance methods, and functions without self will be static methods.
+ Methods can also be declared within a type declaration. Functions with self as the
+ first parameter will be instance methods, and functions without self will be
+ static methods.
{`
@@ -505,8 +509,8 @@ export default function DocumentationPage() {
Convenience variables
Oftentimes it's useful in control structures to have a convenient way to access the evaluated condition. For
- cases where the condition is a boolean it might not be apparent, but it is useful when the
- condition is an Optional.
+ cases where the condition is a boolean it might not be apparent, but it is useful when
+ the condition is an Optional.
{`
@@ -519,8 +523,8 @@ export default function DocumentationPage() {
`}
- If this is done for a boolean condition, the variable is guaranteed to always be true,
- so while it is possible to write code such as the following, it's not very useful:
+ If this is done for a boolean condition, the variable is guaranteed to always
+ be true, so while it is possible to write code such as the following, it's not very useful:
{`
@@ -551,14 +555,27 @@ const DocSection = styled.section`
margin-bottom: 24px;
`
+const HeaderHashLinkStyles = createGlobalStyle`
+ h2::before,
+ h3::before,
+ h4::before {
+ display: block;
+ content: " ";
+ margin-top: -88px;
+ height: 88px;
+ visibility: hidden;
+ pointer-events: none;
+ }
+`
+
function LinkedH2({ hash, children }: { hash: string, children: string | JSX.Element }) {
- return {children}
+ return {children}
}
function LinkedH3({ hash, children }: { hash: string, children: string | JSX.Element }) {
- return {children}
+ return {children}
}
function LinkedH4({ hash, children }: { hash: string, children: string | JSX.Element }) {
- return {children}
+ return {children}
}
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 6c5041b..f03f680 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -14,8 +14,7 @@ export default function HomePage() {
It is still very much a work in progress, and things should be expected to change/break frequently.
-
- (Not even all of what I'd consider to be table-stakes language features have been fully implemented yet.
+ (Not even all of what I'd consider to be table-stakes language features have been fully implemented yet.
You can check the projects pages in Github to watch progress)
diff --git a/src/pages/Manual.tsx b/src/pages/Manual.tsx
deleted file mode 100644
index 93aacaa..0000000
--- a/src/pages/Manual.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import { Section } from '../components/Layout'
-
-export default function Manual() {
- return (
-
- Abra Manual
- // TODO
-
- )
-}
diff --git a/src/pages/Manual/index.tsx b/src/pages/Manual/index.tsx
new file mode 100644
index 0000000..54185b9
--- /dev/null
+++ b/src/pages/Manual/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { Section } from '../../components/Layout'
+import MarkdownArticle from '../../components/MarkdownArticle'
+import manual from './manual.md'
+
+export default function Manual() {
+ return (
+
+
+
+ )
+}
diff --git a/src/pages/Manual/manual.md b/src/pages/Manual/manual.md
new file mode 100644
index 0000000..cc50844
--- /dev/null
+++ b/src/pages/Manual/manual.md
@@ -0,0 +1,174 @@
+# Abra Manual
+This guide will cover the basics of the Abra programming language, and can serve as a reference for language features.
+If you want to play around with the language, you should head on over to the [Playground](/try) to try it out!
+
+## Statements
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+### Declarations
+
+#### Variables
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+~~~abra
+val abc = 123
+~~~
+
+#### Functions
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+~~~abra
+val abc = 123
+~~~
+
+#### Types
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+~~~abra
+val abc = 123
+~~~
+
+### Loops
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+#### For loops
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+~~~abra
+val abc = 123
+~~~
+
+#### While loops
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+~~~abra
+val abc = 123
+~~~
+
+### Control flow
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+#### If/else blocks
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+~~~abra
+val abc = 123
+~~~
+
+#### Match blocks
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+~~~abra
+val abc = 123
+~~~
+
+## Expressions
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+### Literals
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+~~~abra
+val abc = 123
+~~~
+
+#### Strings
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+~~~abra
+val abc = 123
+~~~
+
+#### Arrays
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+~~~abra
+val abc = 123
+~~~
+
+#### Sets
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+~~~abra
+val abc = 123
+~~~
+
+#### Hashmaps
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+~~~abra
+val abc = 123
+~~~
+
+#### Tuples
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+~~~abra
+val abc = 123
+~~~
+
+### Identifiers
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+~~~abra
+val abc = 123
+~~~
+
+### Assignment
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+~~~abra
+val abc = 123
+~~~
+
+### Unary/binary operators
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+~~~abra
+val abc = 123
+~~~
+
+### Indexing
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+~~~abra
+val abc = 123
+~~~
+
+### Property access
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+~~~abra
+val abc = 123
+~~~
+
+### Function invocation
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+~~~abra
+val abc = 123
+~~~
+
+### Lambdas
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+~~~abra
+val abc = 123
+~~~
+
+## Module System
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+### Imports
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+~~~abra
+val abc = 123
+~~~
+
+### Exports
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+~~~abra
+val abc = 123
+~~~
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
index 6431bc5..03f258b 100644
--- a/src/react-app-env.d.ts
+++ b/src/react-app-env.d.ts
@@ -1 +1,3 @@
///