Skip to content

Commit 2d45e88

Browse files
author
Maxime Mangel
authored
Merge pull request #142 from fable-compiler/feature/fable_packages
2 parents 8aa3fc9 + 7d2e2c0 commit 2d45e88

File tree

8 files changed

+5727
-34285
lines changed

8 files changed

+5727
-34285
lines changed

‎docs/docs/your-fable-project/author-a-fable-library.md‎

Lines changed: 86 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ title: Author a Fable library
33
layout: standard
44
---
55

6-
To write a library that can be used in Fable you only need to fulfill a few conditions:
6+
## Requirements
7+
8+
To write a library that can be used in Fable you need to fulfill a few conditions:
79

810
- Don't use FSharp.Core/BCL APIs that are not [compatible with Fable](../dotnet/compatibility.html).
911
- Keep a simple `.fsproj` file: don't use MSBuild conditions or similar.
@@ -18,7 +20,89 @@ The last point may sound complicated but it's only a matter of adding a couple o
1820
</ItemGroup>
1921
```
2022

21-
That's all it takes to make your library compatible with Fable! In order to publish the package to Nuget check [the Microsoft documentation](https://docs.microsoft.com/en-us/nuget/quickstart/create-and-publish-a-package-using-the-dotnet-cli) or alternatively you can also [use Fake](https://fake.build/dotnet-nuget.html#Creating-NuGet-packages).
23+
In order to publish the package to Nuget check [the Microsoft documentation](https://docs.microsoft.com/en-us/nuget/quickstart/create-and-publish-a-package-using-the-dotnet-cli) or alternatively you can also [use Fake](https://fake.build/dotnet-nuget.html#Creating-NuGet-packages).
24+
25+
## Make your package discoverable
26+
27+
[Fable.Packages](https://fable.io/packages/) is a tool making it easy for users to search for Fable packages.
28+
29+
To make your packages listed on Fable.Packages, you need to add some tags to your `.fsproj`.
30+
31+
<ul class="textual-steps">
32+
33+
<li>
34+
35+
**All Fable** packages must have the `fable` tag.
36+
37+
</li>
38+
39+
<li>
40+
41+
Specify what kind of package you are publishing.
42+
43+
A fable package can be one of the following:
44+
45+
- `fable-library`: A library that can be used in Fable
46+
47+
Examples of libraries could be [Fable.Promise](https://github.com/fable-compiler/fable-promise/), [Elmish](https://elmish.github.io/), [Thoth.Json](https://thoth-org.github.io//Thoth.Json/), [Feliz](https://zaid-ajaj.github.io/Feliz/)
48+
49+
<div></div> <!-- Force a space to improve visual -->
50+
51+
- `fable-binding`: The package consist of a set of API to make a native library available
52+
53+
For example:
54+
55+
- A package which makes an NPM package API available
56+
- A package which makes the Browser API available
57+
- A package which makes a cargo package API available
58+
59+
</li>
60+
61+
<li>
62+
63+
Specify which targets are supported by your package.
64+
65+
Choose one or more of the following tags:
66+
67+
- `fable-dart`: Dart is supported by the package
68+
- `fable-dotnet`: .NET is supported by the package
69+
- `fable-javascript`: JavaScript is supported by the package
70+
- `fable-python`: Python is supported by the package
71+
- `fable-rust`: Rust is supported by the package
72+
- `fable-all`: Package is compatible with all Fable targets.
73+
74+
:::warning
75+
A package can be compatible with all targets if it depends only on packages that are also compatible with all targets.
76+
77+
A package compatible with all targets cannot be a binding, as these are target-specific.
78+
:::
79+
80+
Example:
81+
82+
If your package supports only JavaScript you need to use `fable-javascript`
83+
84+
If your package supports both JavaScript and Python, you need to use `fable-javascript` and `fable-python`
85+
86+
</li>
87+
88+
</ul>
89+
90+
Examples:
91+
92+
If your package is a binding which target JavaScript you need to write:
93+
94+
```xml
95+
<PropertyGroup>
96+
<PackageTags>fable;fable-binding;fable-javascript</PackageTags>
97+
```
98+
99+
If your package is a library which targets JavaScript and Python you need to write:
100+
101+
```xml
102+
<PropertyGroup>
103+
<PackageTags>fable;fable-library;fable-javascript;fable-python</PackageTags>
104+
</PropertyGroup>
105+
```
22106

23107
## Testing
24108

‎docs/scss/bulma/custom_derived_variables.scss‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
2+
/////////////////////////////////
3+
/// nacara-layout-standard customizations
4+
/// Do not touch unless you know what you are doing
5+
/////////////////////////////////
6+
$navbar-breakpoint: 0px;
7+
$navbar-padding-vertical: 0.5rem;
8+
$navbar-padding-horizontal: 1rem;
9+
/////////////////////////////////
10+
11+
// Specific to gatsby-remark-vscode usage
12+
$content-pre-padding: unset;
13+
14+
/////////////////////////////////
15+
/// Customize Bulma
16+
/////////////////////////////////
17+
18+
$navbar-item-color: $white;
19+
$navbar-background-color: $primary;
20+
$navbar-item-active-color: $white;
21+
$navbar-item-active-background-color: lighten($primary, 8%);
22+
$navbar-item-hover-color: $white;
23+
$navbar-item-hover-background-color: lighten($primary, 8%);
24+
$navbar-dropdown-item-active-background-color: lighten($primary, 8%);
25+
$navbar-dropdown-item-hover-background-color: lighten($primary, 8%);
26+
$navbar-dropdown-item-hover-color: $white;
27+
$navbar-dropdown-item-active-color: $white;
28+
29+
$menu-item-active-background-color: $primary;
30+
$menu-item-active-color: $white;
31+
$menu-item-hover-color: $primary;
32+
$menu-item-hover-background-color: transparent;
33+
$menu-label-font-size: $size-6;
34+
$menu-item-radius: $radius-large $radius-large;
35+
36+
$footer-background-color: $primary;
37+
$footer-color: $white;
38+
39+
$link: darken($primary, 4%);
40+
$code: $red;
41+
42+
$body-size: 14px;

‎docs/scss/bulma/custom_initial_variables.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/////////////////////////////////
2+
/// Customize Bulma
3+
/////////////////////////////////
4+
$fable-blue: dodgerblue;
5+
$purple: #7a325d;
6+
$blue: #0055a4;
7+
$primary: $fable-blue;
8+
$black: #202020;
9+
$text: #444;

‎docs/scss/main.scss‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
2+
.content {
3+
pre {
4+
@include strong-shadow-box;
5+
}
6+
}
7+
8+
.twitter-timeline-container {
9+
border: 1px solid $grey-lighter !important;
10+
border-radius: $radius;
11+
overflow: hidden;
12+
padding: 0;
13+
}
14+
15+
.has-code-block {
16+
&.is-normal {
17+
pre {
18+
font-size: $size-6;
19+
}
20+
}
21+
}
22+
23+
.selling-points {
24+
display: grid;
25+
gap: $size-4;
26+
// grid-template-rows: 200px;
27+
grid-template-columns: 1fr 1fr;
28+
grid-auto-rows: 1fr;
29+
30+
.selling-point {
31+
border-radius: 4px;
32+
box-shadow: 5px 5px 0px 1px lightgrey;
33+
border: 1px solid lightgrey;
34+
background-color: white;
35+
margin-bottom: 0 !important;
36+
}
37+
}
38+
39+
// API gen specific
40+
.docs-example {
41+
margin-bottom: $size-4;
42+
}
43+
44+
// On mobile display the selling points has a single column
45+
@include mobile {
46+
.selling-points {
47+
grid-template-columns: 1fr;
48+
}
49+
}
50+
51+
.box.is-selling-point {
52+
@include strong-shadow-box;
53+
}
54+
55+
@include touch {
56+
#fable-main-header {
57+
padding: $size-3;
58+
}
59+
}
60+
61+
.media {
62+
.media-center {
63+
display: block;
64+
// margin-bottom: $size-6;
65+
}
66+
}
67+
68+
input[type="checkbox"],
69+
input[type="radio"] {
70+
margin-right: 0.5em;
71+
}

‎docs/style.scss‎

Lines changed: 6 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,13 @@
11
@import "./../node_modules/bulma/sass/utilities/initial-variables";
22

3-
/////////////////////////////////
4-
/// Customize Bulma
5-
/////////////////////////////////
6-
$fable-blue: dodgerblue;
7-
$purple: #7a325d;
8-
$blue: #0055a4;
9-
$primary: $fable-blue;
10-
$black: #202020;
11-
$text: #444;
3+
@import "./scss/bulma/custom_initial_variables.scss";
124

135
@import "./../node_modules/bulma/sass/utilities/derived-variables";
146

15-
/////////////////////////////////
16-
/// nacara-layout-standard customizations
17-
/// Do not touch unless you know what you are doing
18-
/////////////////////////////////
19-
$navbar-breakpoint: 0px;
20-
$navbar-padding-vertical: 0.5rem;
21-
$navbar-padding-horizontal: 1rem;
22-
/////////////////////////////////
23-
24-
// Specific to gatsby-remark-vscode usage
25-
$content-pre-padding: unset;
26-
27-
/////////////////////////////////
28-
/// Customize Bulma
29-
/////////////////////////////////
30-
31-
$navbar-item-color: $white;
32-
$navbar-background-color: $primary;
33-
$navbar-item-active-color: $white;
34-
$navbar-item-active-background-color: lighten($primary, 8%);
35-
$navbar-item-hover-color: $white;
36-
$navbar-item-hover-background-color: lighten($primary, 8%);
37-
$navbar-dropdown-item-active-background-color: lighten($primary, 8%);
38-
$navbar-dropdown-item-hover-background-color: lighten($primary, 8%);
39-
$navbar-dropdown-item-hover-color: $white;
40-
$navbar-dropdown-item-active-color: $white;
41-
42-
$menu-item-active-background-color: $primary;
43-
$menu-item-active-color: $white;
44-
$menu-item-hover-color: $primary;
45-
$menu-item-hover-background-color: transparent;
46-
$menu-label-font-size: $size-6;
47-
$menu-item-radius: $radius-large $radius-large;
48-
49-
$footer-background-color: $primary;
50-
$footer-color: $white;
51-
52-
$link: darken($primary, 4%);
53-
$code: $red;
54-
55-
$body-size: 14px;
7+
@import "./scss/bulma/custom_derived_variables.scss";
8+
$tabs-border-bottom-width: 2px;
9+
// Code blocks have strong shadow so we need to add some margin
10+
$content-block-margin-bottom: 1.25rem;
5611

5712
@import "../node_modules/bulma/sass/utilities/_all.sass";
5813
@import "./../node_modules/bulma/bulma.sass";
@@ -74,69 +29,4 @@ $body-size: 14px;
7429
@import './scss/utilities.scss';
7530
@import './scss/blog-index.scss';
7631
@import './scss/blog-post.scss';
77-
78-
.content {
79-
pre {
80-
@include strong-shadow-box;
81-
}
82-
}
83-
84-
.twitter-timeline-container {
85-
border: 1px solid $grey-lighter !important;
86-
border-radius: $radius;
87-
overflow: hidden;
88-
padding: 0;
89-
}
90-
91-
.has-code-block {
92-
&.is-normal {
93-
pre {
94-
font-size: $size-6;
95-
}
96-
}
97-
}
98-
99-
.selling-points {
100-
display: grid;
101-
gap: $size-4;
102-
// grid-template-rows: 200px;
103-
grid-template-columns: 1fr 1fr;
104-
grid-auto-rows: 1fr;
105-
106-
.selling-point {
107-
border-radius: 4px;
108-
box-shadow: 5px 5px 0px 1px lightgrey;
109-
border: 1px solid lightgrey;
110-
background-color: white;
111-
margin-bottom: 0 !important;
112-
}
113-
}
114-
115-
// API gen specific
116-
.docs-example {
117-
margin-bottom: $size-4;
118-
}
119-
120-
// On mobile display the selling points has a single column
121-
@include mobile {
122-
.selling-points {
123-
grid-template-columns: 1fr;
124-
}
125-
}
126-
127-
.box.is-selling-point {
128-
@include strong-shadow-box;
129-
}
130-
131-
@include touch {
132-
#fable-main-header {
133-
padding: $size-3;
134-
}
135-
}
136-
137-
.media {
138-
.media-center {
139-
display: block;
140-
// margin-bottom: $size-6;
141-
}
142-
}
32+
@import './scss/main.scss';

‎nacara.config.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@
1313
"label": "Documentation",
1414
"pinned": true
1515
},
16+
{
17+
"url": "/packages/",
18+
"label": "Packages"
19+
},
1620
{
1721
"url": "/repl/",
1822
"label": "Try"

0 commit comments

Comments
 (0)