Merge pull request #10 from stencila/feature/themeing-vscode

Feature/themeing vscode

README.md

@@ -2,6 +2,19 @@
 
 This is the README for your extension "stencila". After writing up a brief description, we recommend including the following sections.
 
+## Testing locally
+
+In order to test the extension in `VSCode`, you will need to do the following:
+
+1. run `npm install`
+2. run `npm run compile`
+3. open a `.smd` file (e.g. `src/fixtures/syntax.smd`) & hit `F5` to open a
+   debug session with the extension installed.
+
+> [!WARNING]
+> The following sections are the ones defined by the initial template. We intend
+> to rewrite as we go.
+
 ## Features
 
 Describe specific features of your extension including screenshots of your extension in action. Image paths are relative to this README file.
@@ -29,23 +42,11 @@ This extension contributes the following settings:
 
 ## Known Issues
 
-Calling out known issues can help limit users opening duplicate issues against your extension.
-
-## Release Notes
-
-Users appreciate release notes as you update your extension.
-
-### 1.0.0
-
-Initial release of ...
 
-### 1.0.1
 
-Fixed issue #.
-
-### 1.1.0
+## Release Notes
 
-Added features X, Y, and Z.
+See [the changelog](./CHANGELOG.md)
 
 ---
 
@@ -54,18 +55,3 @@ Added features X, Y, and Z.
 Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension.
 
 * [Extension Guidelines](https://code.visualstudio.com/api/references/extension-guidelines)
-
-## Working with Markdown
-
-You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:
-
-* Split the editor (`Cmd+\` on macOS or `Ctrl+\` on Windows and Linux).
-* Toggle preview (`Shift+Cmd+V` on macOS or `Shift+Ctrl+V` on Windows and Linux).
-* Press `Ctrl+Space` (Windows, Linux, macOS) to see a list of Markdown snippets.
-
-## For more information
-
-* [Visual Studio Code's Markdown Support](http://code.visualstudio.com/docs/languages/markdown)
-* [Markdown Syntax Reference](https://help.github.com/articles/markdown-basics/)
-
-**Enjoy!**

icons/stencila-icon-theme.json

@@ -0,0 +1,12 @@
+{
+  "iconDefinitions": {
+    "_stencila_light": {
+      "iconPath": "./images/stencila-icon-32x32.svg"
+    }
+  },
+  "light": {
+    "fileExtensions": {
+      "smd": "_stencila_light"
+    }
+  }
+}

package.json

@@ -58,6 +58,21 @@
         "language": "smd",
         "path": "./syntaxes/smd/snippets.json"
       }
+    ],
+    "themes": [
+      {
+        "id": "Stencila Light",
+        "label": "Stencila light",
+        "uiTheme": "vs",
+        "path": "./themes/stencila-light-color-theme.json"
+      }
+    ],
+    "iconThemes": [
+      {
+        "id": "stencila",
+        "label": "Stencila Icons",
+        "path": "./icons/stencila-icon-theme.json"
+      }
     ]
   },
   "scripts": {

src/extension.ts

@@ -19,6 +19,11 @@ export function activate(context: vscode.ExtensionContext) {
 		vscode.window.showInformationMessage('Hello World from Stencila!');
 	});
 
+	// Define the default theme for this extension.
+	// Inside your extension's activation code
+	vscode.workspace.getConfiguration('workbench')
+		.update('colorTheme', 'Stencila Light', vscode.ConfigurationTarget.Global);
+
 	context.subscriptions.push(disposable);
 }
 

src/fixtures/syntax.smd

@@ -36,11 +36,73 @@ The area of a circle is $2 \pi r^2$.
 ```js
 // Javascript code
 function foo(){}
+
+import { VIEWS } from '../views/views'
+
+import './main.css'
+
+import './shoelace'
+
+/**
+ * Application Wrapper
+ *
+ * Wraps the application in the `app-chrome`. Contains the main header and
+ * footer.
+ */
+@customElement('stencila-main-app')
+@withTwind()
+export class App extends LitElement {
+  /**
+   * The currently open documents
+   *
+   * This property is initialized (as an HTML attribute) with one document id,
+   * by the server, based on the URL path (including paths that resolved to main.*,
+   * index.*, or README.* in the home directory of the server (the directory it was started in)).
+   *
+   * While the app is running [document id, file name] pairs are added or removed
+   * from this list (e.g. by clicking on the directory tree, closing a tab).
+   *
+   * A list is used here (rather than say an object with `DocumentId` as the key)
+   * to allow for reordering of tabs by the user.
+   */
+  @property({ type: Array })
+  docs: (File & { docId: DocumentId })[] = []
+
+  /**
+   * The id of the document, in `docs`, that is currently active
+   */
+  @state()
+  activeDoc: DocumentId | null
+
+  /**
+   * The current view of the current document
+   *
+   * If there is no `view` attribute then this will be dynamically
+   * determined based on the maximum access level that the user has for
+   * the document.
+   */
+  @property()
+  view?: DocumentView = 'live'
+}
 ```
 
 ```py
 # Python code
 def foo: pass
+from stencila import _stencila
+
+async def from_string(string: str, format: str | None = "json") -> Node:
+    """
+    Decode a Stencila Schema node from a string.
+
+    Args:
+        string (str): The string to decode to a node.
+        format (Optional[str]): The format to decode from. Defaults to "json".
+
+    Returns:
+        Node: A Stencila Schema node.
+    """
+    return from_json(await _stencila.convert.from_string(string, {"format": format}))
 ```
 
 ```r

syntaxes/smd/configuration.json

@@ -11,7 +11,8 @@
     { "open": "[", "close": "]" },
     { "open": "(", "close": ")" },
     { "open": "'", "close": "'", "notIn": ["string"] },
-    { "open": "\"", "close": "\"", "notIn": ["string"] }
+    { "open": "\"", "close": "\"", "notIn": ["string"] },
+    { "open": "```", "close": "```"}
   ],
   "surroundingPairs": [
     { "open": "{", "close": "}" },
@@ -26,7 +27,7 @@
   "folding": {
     "$comment": "Basic folding. More advanced folding to be provided by language server.",
     "markers": {
-      "start": "^:{3,}\\s*(if|for|with|insert|delete)",
+      "start": "^:{3,}\\s*(if|for|with|insert|delete|table|figure)",
       "end": "^:{3,}\\s*$"
     }
   },

syntaxes/smd/tmGrammar.yaml

@@ -16,6 +16,7 @@ repository:
   block:
     patterns:
       # Order is important for matching!
+      - include: "#heading"
       - include: "#math-block"
       - include: "#code-chunk"
       - include: "#code-block"
@@ -206,9 +207,9 @@ repository:
       $
     captures:
       "1": { name: markup.heading } # semicolons
-      "2": { name: keyword.control } # do
-      "3": { name: punctuation.definition } # @
-      "4": { name: variable.name } # assignee
+      "2": { name: keyword.control.stencila } # do
+      "3": { name: decorator.keyword.stencila } # @
+      "4": { name: decorator.keyword.stencila } # assignee
       "5": { name: comment.line } # message
 
   with-block:
@@ -238,9 +239,9 @@ repository:
         )?
       \]\]
     captures:
-      "1": { name: keyword.control } # do
-      "2": { name: punctuation.definition } # @
-      "3": { name: variable.name } # assignee
+      "1": { name: keyword.control.stencila } # do
+      "2": { name: decorator.keyword.stencila } # @
+      "3": { name: decorator.keyword.stencila } # assignee
       "4": { name: comment.line } # message
       "5": { name: keyword.control } # >>
 
@@ -264,9 +265,9 @@ repository:
       $
     captures:
       "1": { name: markup.heading } # semicolons
-      "2": { name: keyword.control } # insert
-      "3": { name: token.info-token } # accept
-      "4": { name: token.error-token } # reject
+      "2": { name: keyword.control.stencila } # insert
+      "3": { name: accept.stencila } # accept
+      "4": { name: error.stencila } # reject
 
   insert-inline:
     name: meta.stencila.insert-inline
@@ -279,7 +280,7 @@ repository:
         (.*?)
       \]\]
     captures:
-      "1": { name: keyword.control } # insert
+      "1": { name: keyword.control.stencila } # insert
 
   delete-block:
     name: meta.stencila.delete-block
@@ -300,8 +301,8 @@ repository:
     captures:
       "1": { name: markup.heading } # semicolons
       "2": { name: keyword.control } # delete
-      "3": { name: token.info-token } # accept
-      "4": { name: token.error-token } # reject
+      "3": { name: accept.stencila } # accept
+      "4": { name: error.stencila } # reject
 
   delete-inline:
     name: meta.stencila.delete-inline
@@ -335,8 +336,8 @@ repository:
     captures:
       "1": { name: markup.heading } # semicolons
       "2": { name: keyword.control } # replace
-      "3": { name: token.info-token } # accept
-      "4": { name: token.error-token } # reject
+      "3": { name: accept.stencila } # accept
+      "4": { name: error.stencila } # reject
 
   replace-inline:
     name: meta.stencila.replace-inline
@@ -361,8 +362,8 @@ repository:
     match: ^(:{3,})\s*(include)\s+(.*)$
     captures:
       "1": { name: markup.heading } # semicolons
-      "2": { name: keyword.control } # include
-      "3": { name: variable.name } # source
+      "2": { name: keyword.control.stencila } # include
+      "3": { name: variable.name.stencila } # source
 
   ########## CallBlock ##########
 
@@ -371,8 +372,8 @@ repository:
     match: ^(:{3,})\s*(call)\s+(.*)$
     captures:
       "1": { name: markup.heading } # semicolons
-      "2": { name: keyword.control } # call
-      "3": { name: variable.name } # source
+      "2": { name: keyword.control.stencila } # include
+      "3": { name: variable.name.stencila } # source
 
   ########## IfBlock ##########
 
@@ -476,6 +477,11 @@ repository:
   # The following grammar rules are taken from the VSCode builtin Markdown grammar at
   #   https://github.com/microsoft/vscode-markdown-tm-grammar/blob/main/markdown.tmLanguage.base.yaml
   # usually with little modification, particularly to regular expressions.
+  heading:
+    name: meta.stencila.heading
+    match: (?:^|\G)[ ]{0,3}(#{1,6}\s+(.*?)(\s+#{1,6})?\s*)$
+    patterns:
+      - { include: punctuation.definition.heading.markdown }
 
   paragraph:
     name: meta.stencila.paragraph