Move docs images to static

Use acorn parser to parse the jsx tag for figure

website/blog/2021-01-11-v1.0.3-release.md

@@ -19,7 +19,7 @@ This release of JBrowse Web includes several improvements and bug fixes, includi
 - Improved build system for external plugins (check out our new plugin template
   at https://github.com/GMOD/jbrowse-plugin-template)
 
-![](./img/color_by_tag.png)
+![](/img/color_by_tag.png)
 Figure showing the new feature for "color by tag" and "sort by tag" applied to
 a CRAM file
 

website/blog/2021-03-08-v1.0.4-release.md

@@ -12,7 +12,7 @@ Some particularly salient improvements include:
 
 The alignments track received a couple updates including "large insertion indicators" for large indels, and also an upside-down count of clipping or insertion events. There is also a triangular indicator plotted when the insertion/clip count exceeds a threshold at that position defaulted to 30% of reads
 
-![](./img/insertion_indicators.png)
+![](/img/insertion_indicators.png)
 
 ## Click and drag the overview bar to "Get sequence"
 
@@ -24,15 +24,15 @@ Users can now download regions of sequence by selecting a region in the linear g
 
 You can also "get sequence" in the read vs reference view, which allows you to "get sequence" for the inserted bases or softclipped bases from a read alignment
 
-![](img/read_vs_ref_insertion.png)
+![](/img/read_vs_ref_insertion.png)
 
 A long-requested feature, implemented in [#1588](https://github.com/GMOD/jbrowse-components/pull/1588) by [@teresam856](https://github.com/teresam856)!
 
 ## Enhanced navigation of paired end reads and BND/TRA breakends
 
 Feature detail panels for BND/TRA features, long split-alignments, and paired-end reads have links to navigate or popup of the breakpoint split views with their mates.
 
-![](./img/link_to_split_view.png)
+![](/img/link_to_split_view.png)
 
 Implemented by [@cmdcolin](https://github.com/cmdcolin) in [#1701](https://github.com/GMOD/jbrowse-components/pull/1701).
 

website/blog/2021-03-29-v1.1.0-release.md

@@ -17,7 +17,7 @@ For details, see the [callbacks section of our configuration guide](/docs/config
 We also have several other improvements including the ability to get intron and
 upstream/downstream sequence in the feature details
 
-![](./img/upstream_downstream_details.png)
+![](/img/upstream_downstream_details.png)
 
 ## Interactive documentation using Storybook
 

website/docs/Makefile

@@ -22,7 +22,7 @@ cli.md: ../../products/jbrowse-cli/README.md
 	cp $^ $@
 
 combined.md: $(SRC_FILES)
-	(echo '---\ntitle: JBrowse 2 combined guide\nid: combined\n---\n\nThis document is a collection of all our documentation. It includes our quick start guide, user guide, configuration guide, CLI guide, developer guide, and FAQ. You can browse the other documents individually, but this page is to help simple ctrl+f searching and easy browsing. You can also download a pdf version of these same docs located at https://jbrowse.org/jb2/jbrowse2.pdf\n\n' && for f in $^; do cat $$f | node md_parser.js; done) > $@
+	(echo '---\ntitle: JBrowse 2 combined guide\nid: combined\n---\n\nThis document is a collection of all our documentation. It includes our quick start guide, user guide, configuration guide, CLI guide, developer guide, and FAQ. You can browse the other documents individually, but this page is to help simple ctrl+f searching and easy browsing. You can also download a pdf version of these same docs located at https://jbrowse.org/jb2/jbrowse2.pdf\n\nimport Figure from "./figure"' && for f in $^; do cat $$f | node md_parser.js; done) > $@
 
 clean:
 	git clean -fdx .

website/docs/config_guide.md

@@ -1052,11 +1052,9 @@ This is done via a top-level configuration in the config file. For example:
 JBrowse uses 4 colors that can be changed. For example, this is the default
 theme:
 
-![JBrowse using the default theme](./img/default_theme.png)
-Example of the default theme
+<Figure src="/img/default_theme.png" caption="Example screenshot showing the default theme"/>
 
-![JBrowse using a customized theme](./img/customized_theme.png)
-Example of a customized theme
+<Figure src="/img/default_theme.png" caption="Example screenshot showing the customized theme"/>
 
 The customized theme screenshot uses the below configuration
 

website/docs/developer_guide.md

@@ -4,6 +4,8 @@ title: Developer guide
 toplevel: true
 ---
 
+import Figure from './figure'
+
 In this guide, will introduce the JBrowse 2 ecosystem from the developer's
 point of view. We'll examine the core concepts of how code is packaged and
 structured, and then go over how to create new plugins and pluggable elements.
@@ -17,12 +19,7 @@ Let's get a high-level view of the JBrowse 2 ecosystem.
 The JBrowse 2 ecosystem has two main type of top-level artifacts that are
 published on their own: products and plugins.
 
-![](./img/products_and_plugins.png)
-Architecture diagram of JBrowse 2, showing how plugins encapsulate views (e.g.
-LinearGenomeView, DotplotView etc.), tracks (AlignmentsTrack, VariantTrack,
-etc.), adapters (BamAdapter, VcfTabixAdapter, etc.) and other logic like
-mobx state tree autoruns that add logic to other parts of the app (e.g. adding
-context menus)
+<Figure src="/img/products_and_plugins.png" caption="Architecture diagram of JBrowse 2, showing how plugins encapsulate views (e.g. LinearGenomeView, DotplotView etc.), tracks (AlignmentsTrack, VariantTrack, etc.), adapters (BamAdapter, VcfTabixAdapter, etc.) and other logic like mobx state tree autoruns that add logic to other parts of the app (e.g. adding context menus)"/>
 
 A "product" is an application of some kind that is published on its own (a web
 app, an electron app, a CLI app, etc). `jbrowse-web`, `jbrowse-desktop`, and
@@ -38,9 +35,7 @@ For example, jbrowse-web is a React web application that is made with [Create
 React App (CRA)](https://create-react-app.dev/), and jbrowse-cli is a
 command-line tool implemented with [OCLIF](https://oclif.io/).
 
-![](./img/product_architecture.png)
-This figure summarizes the general architecture of our state model and React
-component tree
+<Figure src="/img/product_architecture.png" caption="This figure summarizes the general architecture of our state model and React component tree"/>
 
 ## Example plugins
 
@@ -324,18 +319,15 @@ As an example, the here is an array of MenuItems and the resulting menu:
 ]
 ```
 
-![](./img/menu_demo.png)
-Figure showing all the options for track menus, generated by the code listing
+<Figure src="/img/menu_demo.png" caption="This screenshot shows all the various track menu options, generated by the code listing"/>
 
 ### Adding a top-level menu
 
 These are the menus that appear in the top bar of JBrowse Web and JBrowse
 Desktop. By default there are `File` and `Help` menus. You can add your own menu,
 or you can add menu items or sub-menus to the existing menus and sub-menus.
 
-![](./img/top_level_menus.png)
-In the above screenshot, the `File` menu has several items and an `Add`
-sub-menu, which has more items. You can have arbitrarily deep sub-menus.
+<Figure src="/img/top_level_menus.png" caption="In the above screenshot, the `File` menu has several items and an `Add` sub-menu, which has more items. You can have arbitrarily deep sub-menus."/>
 
 You add menus in the `configure` method of your plugin. Not all JBrowse products
 will have top-level menus, though. JBrowse Web and JBrowse Desktop have them, but
@@ -1332,8 +1324,7 @@ it's own rendering. In JBrowse 2, the data parsing and rendering is offloaded
 to a web-worker or other RPC. This allows things to be faster in many cases.
 This is conceptually related to "server side rendering" or SSR in React terms.
 
-![](./img/renderer.png)
-Conceptual diagram of how a track calls a renderer using the RPC
+<Figure src="/img/renderer.png" caption="Conceptual diagram of how a track calls a renderer using the RPC"/>
 
 Important note: you can make custom tracks types that do not use this workflow,
 but it is a built in workflow that works well for the core track types in

website/docs/img

@@ -0,0 +1 @@
+../static/img

website/docs/md_parser.js

@@ -11,10 +11,14 @@ let topLevel = false
 
 ;(async () => {
   for await (const line of rl) {
+    if (line.startsWith('import Figure')) {
+      continue
+    }
     if (!readingHeader && line === '---') {
       readingHeader = true
       continue
     }
+
     if (readingHeader && line.startsWith('title')) {
       title = line.replace('title: ', '')
       continue

website/docs/quickstart_cli.md

@@ -4,6 +4,8 @@ title: Config editing quick start — command-line interface
 toplevel: true
 ---
 
+import Figure from './figure'
+
 In order to display your data, JBrowse 2 needs to know about the reference
 genome for your organism of interest and needs to have tracks created that
 reference your data sources. This guide will show you how to set those up using
@@ -90,7 +92,7 @@ If you have your JBrowse 2
 quickstart, you can refresh the page and an add a linear genome view. You will
 now see your config in the Assembly dropdown.
 
-![JBrowse 2 linear genome view setup with volvox in assembly dropdown](./img/lgv_assembly.png)
+<Figure caption="JBrowse 2 linear genome view setup with volvox in assembly dropdown" src="/img/lgv_assembly.png"/>
 
 ## Adding a track
 
@@ -154,7 +156,7 @@ quickstart, you can refresh the page and an add a linear genome view of the
 volvox assembly. Then open track selector, and you will see the alignments
 track.
 
-![JBrowse 2 linear genome view with alignments track](./img/volvox_alignments.png)
+<Figure caption="JBrowse 2 linear genome view with alignments track" src="/img/volvox_alignments.png"/>
 
 ### Adding a variant track
 
@@ -209,7 +211,7 @@ If you have your JBrowse 2
 quickstart, you can refresh the page and an add a linear genome view of the
 volvox assembly. Then open track selector, and you will see the variant track.
 
-![JBrowse 2 linear genome view with variant track](./img/volvox_variants.png)
+<Figure caption="JBrowse 2 linear genome view with variant track" src="/img/volvox_variants.png"/>
 
 ### Adding a BigWig/BigBed track
 

website/docs/quickstart_desktop.md

@@ -4,6 +4,8 @@ title: Quick start for JBrowse desktop
 toplevel: true
 ---
 
+import Figure from './figure'
+
 **_Important note on JBrowse desktop_**
 
 We do not have downloads of JBrowse 2 Desktop yet, it is expecting a release
@@ -35,8 +37,7 @@ latest MacOS release artifact in our latest builds
 You can then unzip this download and the "JBrowse 2" app will be unzipped to
 this folder. You can then run JBrowse 2 from clicking this file.
 
-![](./img/installation_mac_download.png)
-Finder window showing the downloaded zip file and unzipped contents
+<Figure caption="Screenshot of the Finder window showing the downloaded zip file and unzipped contents" src="/img/installation_mac_download.png"/>
 
 To run JBrowse 2, you can launch the unzipped app, however if you double click
 on the file it may give you a warning about running a program from an
@@ -51,8 +52,7 @@ In order to properly launch JBrowse 2
 Reference
 https://support.apple.com/guide/mac-help/open-a-mac-app-from-an-unidentified-developer-mh40616/mac
 
-![](./img/installation_mac_protect2.png)
-The 'open app from unauthorized developer' after right-clicking and selecting 'open'
+<Figure caption="Screenshot of the 'open app from unauthorized developer' after right-clicking and selecting 'open'" src="/img/installation_mac_protect2.png"/>
 
 #### Installing on Windows
 
@@ -62,12 +62,12 @@ You can then unzip this file and run the file that comes from unzipping it.
 Moving this file to the Applications folder is also equivalent to "installing"
 JBrowse 2
 
-![](./img/installation_win_unzip.png)
-![](./img/installation_win_run.png)
+<Figure caption="Unzip the zip archive" src="/img/installation_win_unzip.png"/>
+<Figure caption="You can then double click the exe application in the unzipped archive" src="/img/installation_win_run.png"/>
 
 Then open up the Windows Explorer in the unzipped directory and run "JBrowse
 2.exe". This may give a "Windows protected your PC" warning, but select "More
 info..." and then "Run anyway"
 
-![](./img/installation_win_protect2.png)
-![](./img/installation_win_protect.png)
+<Figure caption="You can skip windows protection to run the app by clicking the 'More info...' link" src="/img/installation_win_protect2.png"/>
+<Figure caption="After clicking 'More info...' the button to run is revealed" src="/img/installation_win_protect.png"/>

website/docs/quickstart_web.md

@@ -4,6 +4,8 @@ title: JBrowse web quick start
 toplevel: true
 ---
 
+import Figure from './figure'
+
 In this guide, we'll get an instance of JBrowse running on your computer.
 
 ## Pre-requisites
@@ -120,12 +122,12 @@ location specified in the tool's output. It will look something like
 the configuration is not found. That is expected, since we haven't configured
 JBrowse 2 yet. It will look something like this:
 
-![JBrowse 2 screen showing no configuration found](./img/config_not_found.png)
+<Figure caption="JBrowse 2 screen showing no configuration found" src="/img/config_not_found.png"/>
 
 Go ahead an click on the sample config to see a JBrowse 2 running with a demo
 configuration. It should look like this:
 
-![JBrowse 2 with a sample configuration](./img/sample_config.png)
+<Figure caption="JBrowse 2 screen with a sample configuration" src="/img/sample_config.png"/>
 
 Congratulations! You're running JBrowse 2.
 

website/docs/tex_parser.js

@@ -1,18 +1,21 @@
 /* eslint-disable no-console,no-continue */
 const readline = require('readline')
+const acorn = require('acorn')
+const jsx = require('acorn-jsx')
 
 const rl = readline.createInterface({
   input: process.stdin, // or fileStream
 })
-
+const parser = acorn.Parser.extend(jsx())
 let readingHeader = false
 let title = ''
 let topLevel = false
-let figure = ''
-let caption = ''
 
 ;(async () => {
   for await (const line of rl) {
+    if (line.startsWith('import Figure')) {
+      continue
+    }
     if (!readingHeader && line === '---') {
       readingHeader = true
       continue
@@ -33,29 +36,24 @@ let caption = ''
       }
       continue
     }
-    if (line.startsWith('![]')) {
-      const res = line.match(/\(([^)]+)\)/)
-      if (res) {
-        figure = res[1].replace('/jb2', '..')
-        continue
-      }
-    }
-    if (figure) {
-      if (line.trim() !== '') {
-        caption += `${line} `
-        continue
-      } else {
-        console.log(`![${caption}](${figure})\n\n`)
-        figure = ''
-        caption = ''
-        continue
-      }
+    if (line.startsWith('<Figure')) {
+      const res = parser.parse(line, { ecmaVersion: 2020 })
+      const src = res.body[0].expression.openingElement.attributes.find(
+        attr => attr.name.name === 'src',
+      )
+      const caption = res.body[0].expression.openingElement.attributes.find(
+        attr => attr.name.name === 'caption',
+      )
+
+      // chop off leading absolute figure /
+      const srcval = src.value.value.slice(1)
+      const captionval = caption.value.value
+      console.log(`![${captionval}](${srcval})\n\n`)
+      continue
     }
+
     if (readingHeader === false) {
       console.log(line)
     }
   }
-  if (figure && caption) {
-    console.log(`![${caption}](${figure})\n\n`)
-  }
 })()

website/docs/user_guide.md

@@ -316,7 +316,7 @@ all the calls that were made in a multi-sample VCF. Some VCF files, like the
 1000 genomes VCF, can contain thousands of samples in a single file. This
 table can display the details
 
-<Figure caption="Figure showing the variant feature sidebar with a filtered by genotype (with alternative allele '1'). Users can also filter by sample name or other attributes" src="/img/variant_panel.png" />
+<Figure caption="Screenshot showing the variant feature sidebar with a filtered by genotype (with alternative allele '1'). Users can also filter by sample name or other attributes" src="/img/variant_panel.png" />
 
 ## Linear synteny and dotplot views
 
@@ -369,7 +369,7 @@ displayed in different contexts.
 Here is a short demo that shows opening a synteny view from a dotplot view
 selection
 
-<Figure caption="Figure showing the click and drag selection over the dotplot view prompts you to open up a linear synteny view from the selected region" src="/img/synteny_from_dotplot_view.png" />
+<Figure caption="Screenshow showing the 'click and drag' selection over the dotplot view prompts you to open up a linear synteny view from the selected region" src="/img/synteny_from_dotplot_view.png" />
 
 ### Long read vs reference plots
 
@@ -454,4 +454,4 @@ view"
 This allows us to inspect the breakpoints of the structural variant, and
 compare each side to the alignments.
 
-<Figure caption="Figure showing 'breakpoint split view' which examines the breakpoints of a structural variant, e.g. an interchromosomal translocation, and connects supporting reads (black splines) and the variant call itself (green thicker line, with feet indicating directionality)" src="/img/breakpoint_split_view.png" />
+<Figure caption="Screenshot of the 'breakpoint split view' which examines the breakpoints of a structural variant, e.g. an interchromosomal translocation, and connects supporting reads (black splines) and the variant call itself (green thicker line, with feet indicating directionality)" src="/img/breakpoint_split_view.png" />

website/package.json

@@ -18,6 +18,8 @@
     "@docusaurus/core": "^2.0.0-alpha.72",
     "@docusaurus/preset-classic": "^2.0.0-alpha.72",
     "@material-ui/core": "^4.9.13",
+    "acorn": "^8.1.1",
+    "acorn-jsx": "^5.3.1",
     "clsx": "^1.1.1",
     "react": "^16.8.4",
     "react-dom": "^16.8.4"

website/src/pages/features.md

@@ -4,7 +4,7 @@ One of the biggest features of JBrowse 2 is the ability to have multiple views
 on the same screen, or to compose multiple views together (e.g. a synteny view
 combines multiple single linear genome views)
 
-![](./img/linear_longread.png)
+![](/img/linear_longread.png)
 Example showing multiple views on the same screen, an alignments track on top
 and a long read vs reference comparison with the "synteny" view