Adding guides, fixing issues

README.md

@@ -8,16 +8,26 @@ This site is fully managed through a Github repository. If you encounter any iss
 
 ### Content Generation
 
-Reference documentation is generated automatically from `.d.ts` files and some additional Markdown content. The documentation generator is located in the `docgen` folder.
+Reference documentation is generated automatically from `.d.ts` files and some additional Markdown content. The documentation generator is located in the `docgen/` folder.
 
-The source code for the search widget is included in the `docwidget` folder.
+The source code for the search widget is included in the `docwidget/` folder.
 
 Static content is built using the [`markdown-pipeline`](https://www.npmjs.com/package/markdown-pipeline) tool, from the following sources:
 
-* Comments and types in Typescene package `.d.ts` files, augmented with Markdown content from the `content/reference` folder. Source code for this documentation generation step is in the `docgen` folder.
-* Search widget, source code in the `docwidget` folder (built separately).
-* Documentation pages, Markdown content in the `content/docs` folder.
-* Guides, Markdown content in the `content/guides` folder.
-* Static assets in the `assets` folder.
-* Home page, with content in `content/index.md` and a special template.
-* 404 page, with content in `content/404.md`
+- Comments and types in Typescene package `.d.ts` files, augmented with Markdown content from the `content/en/docs/reference` folder.
+- Search widget output (built separately).
+- Documentation pages, Markdown content in the `content/en/docs` folder.
+- Guides, Markdown content in the `content/en/guides` folder.
+- Static assets in the `assets/` folder.
+- Home page, with content in `content/en/index.md` and a special template.
+- 404 page, with content in `content/en/404.md`
+
+### Running locally
+
+To test changes to the website, run the following commands and use e.g. `npx serve docs` to serve the website locally.
+
+```
+npm install
+npm run build
+npm run watch
+```

assets/style.css

@@ -21,13 +21,14 @@ h1 {
   font-size: 3rem;
   line-height: 1.2em;
   margin: 0 0 1rem;
+  word-wrap: break-word;
 }
 h2 {
   font-family: "IBM Plex Sans", Roboto, Arial, Helvetica, sans-serif;
   font-weight: 500;
-  font-size: 1.5rem;
+  font-size: 1.85rem;
   line-height: 1.2em;
-  margin: -3rem 0 1rem 0;
+  margin: -3rem 0 1.5rem 0;
 }
 h2::before {
   content: " ";
@@ -38,22 +39,20 @@ h2::before {
 h3 {
   font-family: "IBM Plex Sans", Roboto, Arial, Helvetica, sans-serif;
   font-weight: 500;
-  font-size: 1.2rem;
-  line-height: 1.2em;
-  margin: 0 0 0.5rem;
+  font-size: 1.3rem;
+  line-height: 1.3em;
+  margin: 0 0 1rem;
 }
 * + h3 {
-  padding-top: 1rem;
+  padding-top: 1.5rem;
 }
 h4 {
   font-family: "IBM Plex Sans", Roboto, Arial, Helvetica, sans-serif;
-  font-weight: 800;
-  font-size: 0.825rem;
-  line-height: 1em;
-  margin: 0 0 0.5rem;
-  padding-bottom: 0.125rem;
-  text-transform: uppercase;
-  color: rgba(0, 0, 0, 0.85);
+  font-weight: 500;
+  font-size: 1em;
+  line-height: 1.4em;
+  margin: 0;
+  padding: 0;
 }
 * + h4 {
   padding-top: 0.75rem;
@@ -139,25 +138,25 @@ blockquote + p > .block_link {
 .block_link {
   display: block;
   position: relative;
-  line-height: 1.4;
+  line-height: 1.7;
   border-radius: 0.75rem;
-  padding: 0.85rem 1rem 0.85rem 4rem;
+  padding: 0.75rem 1rem 0.75rem 4.5rem;
   margin: 1rem 0;
   background: #fff;
-  border: 1px solid #e4e4e4;
+  border: 1px solid #f0f0f0;
   overflow: hidden;
 }
 .block_link::before {
   display: flex;
-  min-width: 3rem;
+  min-width: 3.5rem;
   justify-content: center;
   align-items: center;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   line-height: 1;
-  background: #eee;
+  background: #f0f0f0;
   transition: background 0.2s ease;
 }
 .block_link.doc::before {
@@ -196,6 +195,9 @@ blockquote + p > .block_link {
 .block_link:hover > strong {
   text-decoration: underline;
 }
+.block_link > strong {
+  color: #048;
+}
 h3 a,
 h3 a:active,
 h3 a:hover,
@@ -295,6 +297,9 @@ h2.spec img {
   margin: -0.25rem 0.75rem 0 0;
   width: 1rem;
 }
+hr + h2.spec {
+  margin-top: -4rem;
+}
 .spec_tag {
   font-size: 0.875rem;
   line-height: 1em;
@@ -333,7 +338,7 @@ th code {
 }
 article pre {
   position: relative;
-  margin: 1.5rem -0.25rem;
+  margin: 2rem -0.25rem;
   padding: 1rem;
   background: rgba(0, 0, 0, 0.035);
   border-radius: 0.75rem;
@@ -343,6 +348,9 @@ article pre {
 li pre {
   margin: 0.5rem -0.25rem;
 }
+h4 + pre {
+  margin-top: 0.5rem;
+}
 
 /* Accommodate links in code blocks: */
 a + code,
@@ -842,9 +850,10 @@ code + a > code {
     margin-right: 1rem;
   }
   .wrapper--guide_content pre {
-    margin-left: -4vw;
-    margin-right: -4vw;
-    padding-left: 4vw;
+    margin-left: -2vw;
+    margin-right: -2vw;
+    padding-left: 2vw;
+    max-width: none;
   }
 }
 @media (max-width: 28rem) {

content/en/docs/concepts/activities.md

@@ -1,4 +1,5 @@
 ---
+showInNav: true
 template: doc_article
 title: Activities
 description: Detailed description of applications and activities
@@ -12,7 +13,6 @@ _This document is not completed yet._
 
 Topics:
 
-* View activities (see [`ViewActivity`](/docs/ref/ViewActivity))
-* Nesting and routing (other uses of [`AppActivity`](/docs/ref/AppActivity))
-* Referencing data (using managed references, lists, and services)
-
+- View activities (see [`ViewActivity`](/docs/ref/ViewActivity))
+- Nesting and routing (other uses of [`AppActivity`](/docs/ref/AppActivity))
+- Referencing data (using managed references, lists, and services)