Update website for jbrowse-desktop release

website/blog/2021-10-18-JBrowseDesktop-release.md

@@ -0,0 +1,45 @@
+---
+title: JBrowse Desktop Release
+date: 2021-10-18
+tags: ['jbrowse 2', 'JBrowse desktop']
+---
+
+We are excited to announce the official release of [JBrowse desktop](https://github.com/GMOD/jbrowse-components/releases/tag/v1.4.5)!
+
+JBrowse desktop is our fully featured desktop application available for Mac, Windows, and Linux.
+
+Everything you can do with JBrowse web, you can do with JBrowse desktop! In fact, because it runs as a desktop app, JBrowse desktop can sometimes do things that the web version of JBrowse can't.
+
+![JBrowse Desktop session](/img/desktop-session.png)
+
+JBrowse desktop features a new landing page designed to help you manage your work.
+Here's a few things you can do with it:
+
+- quick-launch a new session from the landing page using a list of assemblies
+- hop back into a previous session using either the grid-view or the list-view interfaces
+- quickly rename or delete sessions from the landing page
+
+![JBrowse Desktop landing page](/img/desktop-landing.png)
+
+With JBrowse desktop, your genome browser and your web browser can finally live in harmony on your taskbar! :heart:
+
+## Downloads
+
+Visit our [downloads page](/jb2/download/) for some updated links, or download directly for your operating system here:
+
+- [Download JBrowse Desktop for Mac](https://github.com/GMOD/jbrowse-components/releases/download/tag/v1.4.5/jbrowse-desktop-1.4.5-mac.dmg)
+- [Download JBrowse Desktop for Windows](https://github.com/GMOD/jbrowse-components/releases/download/tag/v1.4.5/jbrowse-desktop-1.4.5-win.exe)
+- [Download JBrowse Desktop for Linux](https://github.com/GMOD/jbrowse-components/releases/download/tag/v1.4.5/jbrowse-desktop-1.4.5-linux.AppImage)
+
+Other formats also available on the [v1.4.5 release page](https://github.com/GMOD/jbrowse-components/releases/tag/v1.4.5)
+
+For more information on getting started, check out the following resources:
+
+- [Quick-start guide](/docs/quickstart_desktop/)
+- [What's new with v1.4.5](https://github.com/GMOD/jbrowse-components/releases/tag/v1.4.5)
+
+Have some questions or feedback about JBrowse desktop? Connect with us:
+
+- [Gitter](https://gitter.im/GMOD/jbrowse2)
+- [Twitter](https://twitter.com/usejbrowse)
+- [Github](https://github.com/GMOD/jbrowse-components)

website/docs/introduction.md

@@ -9,6 +9,7 @@ Welcome to the JBrowse 2 documentation.
 
 We provide
 
+- [Quick start for desktop](quickstart_desktop) - a quick-start guide to getting JBrowse desktop running on your machine
 - [Super-quick start guide](superquickstart_web) - super brief setup
   instructions e.g. 10 lines of CLI commands to help admins who are familiar
   with jbrowse with getting set up

website/docs/quickstart_desktop.md

@@ -6,11 +6,6 @@ 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
-in late 2020
-
 ### Installing JBrowse desktop
 
 This guide will walk you through installing jbrowse 2 on the desktop

website/docusaurus.config.json

@@ -9,7 +9,9 @@
   "organizationName": "GMOD",
   "projectName": "jbrowse-components",
   "customFields": {
-    "currentVersion": "v1.4.4"
+    "currentVersionNo": "1.4.5",
+    "currentVersion": "v1.4.5",
+    "bannerBulletin": "Introducing JBrowse desktop"
   },
   "themeConfig": {
     "colorMode": {
@@ -69,9 +71,14 @@
           "position": "right"
         },
         {
-          "href": "https://github.com/GMOD/jbrowse-components",
-          "label": "GitHub",
-          "position": "right"
+          "className": "navbar-social-github",
+          "position": "right",
+          "href": "https://github.com/GMOD/jbrowse-components"
+        },
+        {
+          "className": "navbar-social-twitter",
+          "position": "right",
+          "href": "https://twitter.com/usejbrowse"
         }
       ]
     },

website/src/css/custom.css

@@ -29,3 +29,56 @@
 .navbar__toggle {
   color: white;
 }
+
+.navbar-social-github:after {
+  transition: opacity 0.2s;
+  content: '';
+  width: 24px;
+  height: 24px;
+  display: flex;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  filter: brightness(0) invert(1);
+  background-position: center;
+}
+
+.navbar__brand:hover {
+  color: rgb(70, 203, 174);
+}
+
+.navbar-social-github:hover:after {
+  filter: invert(62%) sepia(57%) saturate(419%) hue-rotate(117deg)
+    brightness(101%) contrast(87%);
+  opacity: 0.8;
+}
+
+.navbar-social-github:after,
+.navbar-social-link:after {
+  border-style: none !important;
+  margin-left: -5px !important;
+}
+
+.navbar-social-twitter:after {
+  transition: opacity 0.2s;
+  content: '';
+  width: 24px;
+  height: 24px;
+  display: flex;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z' /%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  filter: brightness(0) invert(1);
+  background-position: center;
+  margin-right: 12px;
+}
+
+.navbar-social-twitter:hover:after {
+  filter: invert(62%) sepia(57%) saturate(419%) hue-rotate(117deg)
+    brightness(101%) contrast(87%);
+  opacity: 0.8;
+}
+
+.navbar-social-twitter:after,
+.navbar-social-link:after {
+  border-style: none !important;
+  margin-left: -5px !important;
+}

website/src/pages/demos.mdx

@@ -13,16 +13,17 @@ export const Link = ({ extra, children }) => {
 # JBrowse 2 demos
 
 These demos contain examples of new workflows and views in JBrowse 2, with links
-to live sessions in order for you to be able to experience the app yourself.
+to live sessions on the web in order for you to be able to experience the app yourself.
 The link above will always direct to the most recent demo that has been released.
-Enjoy!
 
-Guided demos
+Note: everything demonstrated here on the web can also be done in JBrowse desktop.
+
+**Guided demos**
 
 - [Cancer demo](http://jbrowse.org/demos/cancer-demo-2020/) - guided demo of structural
   variant functionality and embedding the linear genome view in another application
 
-Demo instances
+**Demo instances**
 
 - <Link extra="?config=test_data/config_demo.json&session=share-oTyYRpz9fN&password=fYAbt">
     Human instance with HG002 insertion shown (many other tracks available too)
@@ -50,7 +51,7 @@ Demo instances
     Volvox sample data (small imaginary test datasets)
   </Link>
 
-Conference demos
+**Conference demos**
 
 - [BOG2021](http://jbrowse.org/demos/bog2021/)
 - [ASHG2020](http://jbrowse.org/demos/ashg2020/)

website/src/pages/download.mdx

@@ -1,14 +1,100 @@
 import config from '../../docusaurus.config.json'
+import { Button, Card, CardContent, Typography, Link } from '@material-ui/core'
+import { Apple, DesktopWindows, ArrowDownward } from '@material-ui/icons'
 
-export const Link = () => {
+export const GithubLink = () => {
   const curr = `https://github.com/GMOD/jbrowse-components/releases/tag/${config.customFields.currentVersion}`
   return (
-    <div style={{ margin: 50 }}>
-      <a href={curr}>{curr}</a>
+    <div>
+      <ul>
+        <li>
+          <a href={curr}>{curr}</a>
+        </li>
+      </ul>
     </div>
   )
 }
 
+export const DownloadCard = ({ os, icon, link }) => {
+  const downloadLink = `https://github.com/GMOD/jbrowse-components/releases/download/tag/${config.customFields.currentVersion}/jbrowse-desktop-${config.customFields.currentVersionNo}-${link}`
+  return (
+    <div>
+      <Card style={{ background: '#F0F0F0' }}>
+        <CardContent
+          style={{
+            display: 'flex',
+            flexFlow: 'column',
+            alignItems: 'center',
+          }}
+        >
+          <h3>{os}</h3>
+          <Button
+            variant="contained"
+            color="primary"
+            startIcon={icon}
+            href={downloadLink}
+          >
+            download
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+export const DownloadCardContainer = () => {
+  const downloadLink = `https://github.com/GMOD/jbrowse-components/releases/tag/${config.customFields.currentVersion}`
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '20px',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-evenly',
+        }}
+      >
+        <DownloadCard os="MacOS" icon={<Apple />} link="mac.dmg" />
+        <DownloadCard os="Windows" icon={<DesktopWindows />} link="win.exe" />
+        <DownloadCard
+          os="Linux"
+          icon={<ArrowDownward />}
+          link="linux.AppImage"
+        />
+      </div>
+      <Typography
+        variant="caption"
+        style={{ display: 'flex', alignSelf: 'center' }}
+      >
+        Can't find what you're looking for? Checkout&nbsp;
+        <Link href={downloadLink}>other platforms</Link>.
+      </Typography>
+    </div>
+  )
+}
+
+## JBrowse 2 desktop
+
+Download JBrowse 2 desktop on the platform of your choice:
+
+<DownloadCardContainer />
+
+<br />
+
+<p align="center">
+  <img
+    width="720"
+    alt="JBrowse desktop session"
+    src="/img/desktop-session.png"
+  />
+</p>
+<br />
+
 ## JBrowse 2 web
 
 To get started with JBrowse Web, we recommend using the jbrowse CLI tools.
@@ -23,17 +109,18 @@ jbrowse create jbrowse_folder
 
 Alternatively, manually download this release as a zip file from GitHub here:
 
-<Link />
+<GithubLink />
 
 To get it set up, check out our [super-quick start
 guide](/docs/superquickstart_web) or slightly-longer [quick-start
 guide](/docs/quickstart_web) for setting up JBrowse Web.
 
-## JBrowse 2 embedded components
+### Other CLI tools
 
-We also have our embedded components, such as
-@jbrowse/react-linear-genome-view, which is the React component for the linear
-genome browser view (no circular, dotplot, etc).
+- [@jbrowse/img](https://github.com/GMOD/jb2export/) image exporter
+
+## JBrowse 2 embedded components
 
-See https://www.npmjs.com/package/@jbrowse/react-linear-genome-view for
-instructions on downloading this with npm or yarn.
+- [@jbrowse/react-linear-genome-view](https://www.npmjs.com/package/@jbrowse/react-linear-genome-view) linear genome browser view React component on <tt>NPM</tt>
+  - also see [storybook docs](https://jbrowse.org/storybook/lgv/v1.4.4/?path=/story/getting-started--page)
+- [JBrowseR](https://gmod.github.io/JBrowseR/) R package on <tt>CRAN</tt>