-
Notifications
You must be signed in to change notification settings - Fork 51
/
index.html
164 lines (162 loc) · 10.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<title>The Elmish Book</title>
<!-- Uncomment this stylesheet when there is no internet -->
<!-- <link rel="stylesheet" href="docute.css"> -->
<link rel="stylesheet"
href="https://unpkg.com/docute@4/dist/docute.css">
<link rel="stylesheet" href="styles/website.css">
</head>
<body>
<div id="root"></div>
<!-- Uncomment this stylesheet when there is no internet -->
<!-- <script src="docute.js"></script> -->
<script src="https://unpkg.com/docute@4/dist/docute.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@leptosia/docute-google-analytics@1/dist/index.min.js"></script>
<script>
// make images work using absolute urls both in developement and when published to github
Vue.component("ResolvedImage", {
props: ["source"],
template: "<img :src='resolvedUrl' />",
computed: {
resolvedUrl: function() {
let path = window.location.pathname;
if (path.endsWith("/")) {
return path.substr(0, path.length - 1) + this.source;
} else {
return path + this.source;
}
}
}
});
var docs = new Docute({
layout: "wide",
target: "#root",
plugins: [ docuteGoogleAnalytics("UA-135472140-1") ],
highlight: [ "fsharp", "bash", "ocaml", "fs", "json", "sass" ],
cssVariables: {
accentColor: "hsl(171, 100%, 41%)",
sidebarWidth: "300px",
sidebarLinkActiveColor: "hsl(171, 100%, 41%)",
sidebarLinkArrowColor: "hsl(171, 100%, 41%)"
},
nav: [
{ title: "❤️ Sponsor my work", link: "https://github.com/sponsors/Zaid-Ajaj" },
{ title: "📚 GitHub Repository", link: "https://github.com/Zaid-Ajaj/the-elmish-book" },
{ title: "✏️ Written by Zaid Ajaj", link: "https://github.com/Zaid-Ajaj" }
],
sidebar: [
{
title: "The Elmish Book",
links: [
{ title: "Introduction", link: "/" },
{ title: "Audience", link: "/chapters/audience" },
{ title: "Chapter Overview", link: "/chapters/overview" },
{ title: "Planned Chapters",link: "/chapters/planned-chapters" },
{ title: "Contributing", link: "/chapters/contributing" },
{ title: "Acknowledgment", link: "/chapters/acknowledgment" },
{ title: "License", link: "/license" }
]
},
{
title: "Understanding Fable",
links: [
{ title: "Introduction", link: "/chapters/fable/" },
{ title: "Hello World", link: "/chapters/fable/hello-world" },
{ title: "Development Mode", link: "/chapters/fable/development-mode" },
{ title: "Counter Application", link: "/chapters/fable/counter" },
{ title: "Observations", link: "/chapters/fable/observations" },
{ title: "Compatibility with .NET", link: "/chapters/fable/compatibility" },
{ title: "Fable Packages", link: "/chapters/fable/fable-packages" },
{ title: "Fable Bindings", link: "/chapters/fable/fable-bindings" },
{ title: "Node.js Packages", link: "/chapters/fable/node-packages" },
{ title: "Understanding How Fable Works", link: "/chapters/fable/how-fable-works" }
]
},
{
title: "The Elm Architecture",
links: [
{ title: "Introduction", link: "/chapters/elm/" },
{ title: "The Elm Architecture", link: "/chapters/elm/the-architecture" },
{ title: "Counter with Elmish", link: "/chapters/elm/counter" },
{ title: "Rendering HTML", link: "/chapters/elm/render-html" },
{ title: "Conditional Rendering", link: "/chapters/elm/conditional-rendering" },
{ title: "Using CSS", link: "/chapters/elm/using-css" },
{ title: "Collecting User Input", link: "/chapters/elm/form-inputs" },
{ title: "React in Elmish", link: "/chapters/elm/react-in-elmish" },
{ title: "To-Do List Application", link: "/chapters/elm/todo-app" },
{ title: "To-Do List Application: Part 1", link: "/chapters/elm/todo-app-part1" },
{ title: "To-Do List Application: Part 2", link: "/chapters/elm/todo-app-part2" },
{ title: "To-Do List Application: Part 3", link: "/chapters/elm/todo-app-part3" },
{ title: "To-Do List Application: Exercises", link: "/chapters/elm/todo-app-exercises" },
{ title: "Basic Elmish Project Structure", link: "/chapters/elm/project-structure" }
]
},
{
title: "Commands In Elmish",
links: [
{ title: "Introduction", link: "/chapters/commands/" },
{ title: "Elmish Commands", link: "/chapters/commands/commands" },
{ title: "What Are Commands?", link: "/chapters/commands/definition" },
{ title: "Asynchronous Updates", link: "/chapters/commands/async-updates" },
{ title: "From Async<'t> to Cmd<'t>", link: "/chapters/commands/async-to-cmd" },
//{ title: "Failing Asynchronous Operations", link: "/chapters/commands/failing-async" },
{ title: "Modelling Asynchronous State", link: "/chapters/commands/async-state" },
{ title: "Deferred Module Utilities", link: "/chapters/commands/deferred-module-utilities" },
{ title: "Recursive State Updates", link: "/chapters/commands/recursive-updates" },
{ title: "Asynchronous Recursive Updates", link: "/chapters/commands/async-recursive-updates" },
{ title: "Working with HTTP", link: "/chapters/commands/http" },
{ title: "Using XMLHttpRequest in Elmish", link: "/chapters/commands/xhr-elmish" },
{ title: "Asynchronous XMLHttpRequest", link: "/chapters/commands/async-xhr" },
{ title: "Working with JSON", link: "/chapters/commands/working-with-json" },
{ title: "Using Thoth.Json", link: "/chapters/commands/using-json" },
{ title: "Elmish Hackernews", link: "/chapters/commands/elmish-hackernews" },
{ title: "Elmish Hackernews: Part 1", link: "/chapters/commands/elmish-hackernews-part1" },
{ title: "Elmish Hackernews: Part 2", link: "/chapters/commands/elmish-hackernews-part2" },
{ title: "Elmish Hackernews: Part 3", link: "/chapters/commands/elmish-hackernews-part3" },
{ title: "Elmish Hackernews: Exercises", link: "/chapters/commands/elmish-hackernews-exercises" }
]
},
{
title: "Composing Larger Applications",
links: [
{ title: "Introduction", link: "/chapters/scaling/" },
{ title: "Web Pages As Programs", link: "/chapters/scaling/pages-as-programs" },
{ title: "Splitting Programs", link: "/chapters/scaling/splitting-programs" },
{ title: "Integrating Commands", link: "/chapters/scaling/integrating-commands" },
{ title: "Composition Forms", link: "/chapters/scaling/composition-forms" },
{ title: "Understanding Data Communication", link: "/chapters/scaling/understanding-data-communication" },
{ title: "The Intent Pattern", link: "/chapters/scaling/intent" },
{ title: "Routing And Navigation", link: "/chapters/scaling/routing" },
{ title: "Parsing Url Segments", link: "/chapters/scaling/parsing-url-segments" },
{ title: "Parsing Date Segments", link: "/chapters/scaling/parsing-date-segments" },
{ title: "Programmatic Navigation", link: "/chapters/scaling/programmatic-navigation" },
{ title: "Introducing Url Type", link: "/chapters/scaling/introducing-url-type" },
{ title: "Modelling Nested Routes", link: "/chapters/scaling/modelling-nested-routes" },
{ title: "Multi-Page Routing", link: "/chapters/scaling/multi-page-routing" }
]
},
{
title: "Improving Development Workflow",
links: [
{ title: "Introduction", link: "/chapters/dev-flow/" },
{ title: "Webpack Mode", link: "/chapters/dev-flow/webpack-mode" },
{ title: "Using Compiler Directives", link: "/chapters/dev-flow/compiler-directives" },
{ title: "Using Configuration Variables", link: "/chapters/dev-flow/configuration-variables"},
{ title: "Hot Module Replacement", link: "/chapters/dev-flow/hot-module-replacement" },
{ title: "Understanding Webpack Loaders", link: "/chapters/dev-flow/understanding-webpack-loaders" },
{ title: "Importing Static Images", link: "/chapters/dev-flow/static-images" },
{ title: "Styling With Sass", link: "/chapters/dev-flow/styling-with-sass" },
{ title: "Introducing Femto", link: "/chapters/dev-flow/introducing-femto" }
]
}
]
});
</script>
</body>
</html>