StackEdit

StackEdit includes several extensions to enhance standard Markdown. You can enable or disable these in the File properties dialog.

Supported Extensions

• SmartyPants: Converts ASCII punctuation into typographic HTML entities (e.g., converting -- to an en-dash or " to smart quotes).
• KaTeX: Renders LaTeX mathematical expressions.
• UML diagrams: Renders diagrams using Mermaid syntax, including sequence diagrams and flow charts.

sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you...

You can publish your Markdown files to various hosting platforms including Blogger, Dropbox, Gist, GitHub, Google Drive, WordPress, and Zendesk.

Workflow for Publishing

• Setup: Link an account in the Publish sub-menu.
• Publish: Open the Publish sub-menu and select Publish to. Depending on the platform, you can choose formats like Markdown (for sites like GitHub) or HTML (using Handlebars templates for blogs).
• Update: Once a file is published, you can update the live version by clicking the Publish now button in the navigation bar.
• Management: To manage or remove existing publication links, use File publication in the Publish sub-menu.

To work on the StackEdit codebase, you can install dependencies, run a development server with hot reloading, or build production bundles. Use npm start to serve the application at localhost:8080 during development.

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm start

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

Use the following commands to upgrade or remove your StackEdit installation managed by Helm.

# To upgrade StackEdit to the latest version:
helm repo update
helm upgrade stackedit stackedit/stackedit

# To uninstall StackEdit:
helm delete --purge stackedit

StackEdit stores files locally in your browser, enabling offline access. You can manage your workspace using the file explorer (accessible via the button in the left corner of the navigation bar):

• Create files and folders: Use the New file or New folder buttons in the file explorer.
• Switch files: Click any file in the tree view within the file explorer.
• Rename a file: Click the file name in the navigation bar or use the Rename button in the file explorer.
• Delete a file: Click the Remove button in the file explorer. Deleted files move to the Trash folder and are permanently removed after 7 days of inactivity.
• Export a file: Use Export to disk in the menu to save files as plain Markdown, HTML (using Handlebars templates), or PDF.

StackEdit can be deployed to a Kubernetes cluster using the official Helm chart. This allows for easy configuration of external integrations like Dropbox, Google, GitHub, and WordPress via Helm --set flags.

# Add the StackEdit Helm repository
helm repo add stackedit https://benweet.github.io/stackedit-charts/

# Update your local Helm chart repository cache
helm repo update

# Deploy StackEdit chart to your cluster
helm install --name stackedit stackedit/stackedit \
  --set dropboxAppKey=$DROPBOX_API_KEY \
  --set dropboxAppKeyFull=$DROPBOX_FULL_ACCESS_API_KEY \
  --set googleClientId=$GOOGLE_CLIENT_ID \
  --set googleApiKey=$GOOGLE_API_KEY \
  --set githubClientId=$GITHUB_CLIENT_ID \
  --set githubClientSecret=$GITHUB_CLIENT_SECRET \
  --set wordpressClientId="$WORDPRESS_CLIENT_ID" \
  --set wordpressSecret=$WORDPRESS_CLIENT_SECRET

The application implements graceful shutdown by listening for the SIGTERM signal. When received, the httpServer is closed, and the process exits with code 0 only after the server has finished closing active connections.

process.on('SIGTERM', () => {
  httpServer.close(() => {
    process.exit(0);
  });
});

StackEdit uses a Feature class to define application capabilities, which can be used to generate user badges or track earned achievements.

A Feature can be a standalone capability or a parent containing children features.

When converting features to badges using the toBadge(badgeCreations) method:

• A feature is considered isEarned if it has no children and its id exists in the badgeCreations object, OR if it has children and all of its children are isEarned.
• A feature has hasSomeEarned if it has children and at least one child is isEarned.

The server is built using express and http. It listens on a port defined by the PORT environment variable, defaulting to 8080 if not specified. The application logic is injected into the Express instance via a required ./server module.

// The server starts on the configured port:
const port = parseInt(process.env.PORT || 8080, 10);
const httpServer = http.createServer(app);
httpServer.listen(port, null, () => {
  console.log(`HTTP server started: http://localhost:${port}`);
});

StackEdit is a Vue.js application that initializes by mounting to the #app element in the DOM. It relies on indexedDB for storage and uses offline-plugin for service worker management.

Key initialization behaviors:

• IndexedDB Requirement: The application will throw an error if indexedDB is not available in the browser.
• Offline Updates: When a new service worker is ready, it applies the update immediately. If an update occurs and the application is not in light mode, it triggers a localDbSvc.sync() and reloads the page.
• Installation Prompt: The application intercepts the beforeinstallprompt event to show a custom confirmation notification via the Vuex store before prompting the user to install the PWA.

// The application mounts to the #app element
new Vue({
  el: '#app',
  store,
  render: h => h(App),
});