OneNoteMarkdown

NOTE: A newer attempt is being built at https://github.com/dalyIsaac/onenote-markdown.

The aim of this project is to build a web app which can be used to read and write OneNote notebooks as Markdown. The user interface is built using React and Office UI Fabric React. The state is managed using Redux, with Redux-Saga for handling application side effects. localForage is used to store OneNote data such as notebooks, section groups, sections, notes, and contents in IndexedDB.

Currently, the source code is hosted on GitHub. The master branch is built in Visual Studio Team Services using their GitHub integration, and deployed to Azure App Service via continuous integration. Testing occurs using Travis CI, running Jest.

Features

• Signing in with multiple accounts
• Opening and downloading notebooks, section groups, sections, and pages.
• Persisting content across browser sessions
• Editing pages in Markdown

Prerequisites

• Node.js and npm
• yarn
• git

Getting the source

Clone the repo

git clone https://github.com/dalyIsaac/onenote-markdown.git

Install the dependencies

cd onenote-markdown
yarn

Run dev build

yarn start

Build production

yarn build

Jest testing

yarn test

Debugging in VSCode

Install the Chrome debugger

/vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome against localhost",
            "port": 9222,
            "url": "localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

To attach to an existing Chrome instance, ensure that Chrome from the command line as:

Windows

<path to chrome>/chrome.exe --remote-debugging-port=9222

macOS

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Linux

google-chrome --remote-debugging-port=9222

Redux state

{
  allNotebooks,
  notebookOrder,
  onenote,
  router,
  selectedNav,
  totalNotebookLength,
  users
}

State slice	Type	Purpose
allNotebook	IStateUserNotebooks[]	Stores an array of all the notebooks which all the signed in users have access to.
notebookOrder	string[]	Stores an array of the ids of the notebooks in order.
onenote	IStateOneNote	Stores OneNote, SectionGroup, Section, and Pages objects, by their id.
router	RouterState	Controlled by connected-react-router.
selectedNav	string[]	Stores an array of the ids of the onenote objects which are currently selected.
totalNotebookLength	number	Stores the total number of notebooks which are open. This is used for notifying the user of the number of notebooks yet to be loaded.
users	IStateUsers	Stores UserData by their userId,

Objects which occupy onenote have their Microsoft Graph structure flattened, or deflated. For example:

{
  "@Odata.context": "https://onenote.com",
  "Beethoven": {
    "nationality": "German",
    "yearBorn": 1770,
    "yearDied": 1827,
    "concertos": ["Violin Concerto in D Major","Piano Concerto No. 0", "Piano Concerto No. 1", "Piano Concerto No. 2", "Piano Concerto No. 3", "Piano Concerto No. 4", "Piano Concerto No. 5", "Triple Concerto"]
  }
}

would be "deflated" into

{
  "@Odata.context": "https://onenote.com",
  "Beethoven.nationality": "German",
  "Beethoven.yearBorn": 1770,
  "Beethoven.yearDied": 1827,
  "Beethoven.concertos": ["Violin Concerto in D Major","Piano Concerto No. 0", "Piano Concerto No. 1", "Piano Concerto No. 2", "Piano Concerto No. 3", "Piano Concerto No. 4", "Piano Concerto No. 5", "Triple Concerto"]
}