feat: add explanatory README.md

- update README.md to contain steps that you need to take to get started
- add husky and lint-staged to rerun wordCount.js whenever markdown files change
- initialize logfile with example-post.md
- add netlify.toml with default publish and build command configuration

README.md

@@ -1,139 +1,44 @@
-# sapper-template
+# Content Ops
 
-The default template for setting up a [Sapper](https://github.com/sveltejs/sapper) project. Can use either Rollup or webpack as bundler.
+Don't break the chain!
 
 ## Getting started
 
-### Using `degit`
-
-To create a new Sapper project based on Rollup locally, run
+Once you have created a new project from [Content Ops](https://github.com/singularityhacker/Content_Ops), go to the path and install the dependencies:
 
 ```bash
-npx degit "sveltejs/sapper-template#rollup" my-app
+cd <path-of-project>
+npm install # or yarn install
 ```
 
-For a webpack-based project, instead run
+In case you want to look at the project locally first, you can run the project in development mode:
 
 ```bash
-npx degit "sveltejs/sapper-template#webpack" my-app
+npm run dev # or yarn dev
 ```
 
-[`degit`](https://github.com/Rich-Harris/degit) is a scaffolding tool that lets you create a directory from a branch in a repository.
-
-Replace `my-app` with the path where you wish to create the project.
-
-### Using GitHub templates
-
-Alternatively, you can create the new project as a GitHub repository using GitHub's template feature.
+This will start the development server on [localhost:3000](http://localhost:3000).
 
-Go to either [sapper-template-rollup](https://github.com/sveltejs/sapper-template-rollup) or [sapper-template-webpack](https://github.com/sveltejs/sapper-template-webpack) and click on "Use this template" to create a new project repository initialized by the template.
+## Display blog post changes
 
-### Running the project
+To be able to look at additions and subtraction for your blog posts, you need to put the blog post files into the `src/posts` folder. By default, you will only find a `example-post.md` file in the folder.
 
-Once you have created the project, install dependencies and run the project in development mode:
-
-```bash
-cd my-app
-npm install # or yarn
-npm run dev
-```
+## Go through the dashboard on your deployed url on Netlify
 
-This will start the development server on [localhost:3000](http://localhost:3000). Open it and click around.
+Whenever you are done with updates to your blog posts located in the `src/posts` folder, make sure to commit and push the changes. This will run the `wordCount.js` script for you automatically in the background and the latest additions and subtractions will be calculated.
 
-You now have a fully functional Sapper project! To get started developing, consult [sapper.svelte.dev](https://sapper.svelte.dev).
+## View blog posts directly
 
-### Using TypeScript
+If you want to be able to view your blog posts directly in the browser, you can find them under the `/blog` url or through clicking the "Blog" navigation item in the UI.
 
-By default, the template uses plain JavaScript. If you wish to use TypeScript instead, you need some changes to the project:
+To connect the blog post articles correctly, you have to add frontmatter metadata to each of them like shown in the example post:
 
-- Add `typescript` as well as typings as dependences in `package.json`
-- Configure the bundler to use [`svelte-preprocess`](https://github.com/sveltejs/svelte-preprocess) and transpile the TypeScript code.
-- Add a `tsconfig.json` file
-- Update the project code to TypeScript
+```yaml
+---
+title: 'Example post'
+slug: 'example-post'
+---
 
-The template comes with a script that will perform these changes for you by running
-
-```bash
-node scripts/setupTypeScript.js
 ```
 
-`@sapper` dependencies are resolved through `src/node_modules/@sapper`, which is created during the build. You therefore need to run or build the project once to avoid warnings about missing dependencies.
-
-The script does not support webpack at the moment.
-
-## Directory structure
-
-Sapper expects to find two directories in the root of your project — `src` and `static`.
-
-### src
-
-The [src](src) directory contains the entry points for your app — `client.js`, `server.js` and (optionally) a `service-worker.js` — along with a `template.html` file and a `routes` directory.
-
-#### src/routes
-
-This is the heart of your Sapper app. There are two kinds of routes — _pages_, and _server routes_.
-
-**Pages** are Svelte components written in `.svelte` files. When a user first visits the application, they will be served a server-rendered version of the route in question, plus some JavaScript that 'hydrates' the page and initialises a client-side router. From that point forward, navigating to other pages is handled entirely on the client for a fast, app-like feel. (Sapper will preload and cache the code for these subsequent pages, so that navigation is instantaneous.)
-
-**Server routes** are modules written in `.js` files, that export functions corresponding to HTTP methods. Each function receives Express `request` and `response` objects as arguments, plus a `next` function. This is useful for creating a JSON API, for example.
-
-There are three simple rules for naming the files that define your routes:
-
-- A file called `src/routes/about.svelte` corresponds to the `/about` route. A file called `src/routes/blog/[slug].svelte` corresponds to the `/blog/:slug` route, in which case `params.slug` is available to the route
-- The file `src/routes/index.svelte` (or `src/routes/index.js`) corresponds to the root of your app. `src/routes/about/index.svelte` is treated the same as `src/routes/about.svelte`.
-- Files and directories with a leading underscore do _not_ create routes. This allows you to colocate helper modules and components with the routes that depend on them — for example you could have a file called `src/routes/_helpers/datetime.js` and it would _not_ create a `/_helpers/datetime` route.
-
-#### src/node_modules/images
-
-Images added to `src/node_modules/images` can be imported into your code using `import 'images/<filename>'`. They will be given a dynamically generated filename containing a hash, allowing for efficient caching and serving the images on a CDN.
-
-See [`index.svelte`](src/routes/index.svelte) for an example.
-
-#### src/node_modules/@sapper
-
-This directory is managed by Sapper and generated when building. It contains all the code you import from `@sapper` modules.
-
-### static
-
-The [static](static) directory contains static assets that should be served publicly. Files in this directory will be available directly under the root URL, e.g. an `image.jpg` will be available as `/image.jpg`.
-
-The default [service-worker.js](src/service-worker.js) will preload and cache these files, by retrieving a list of `files` from the generated manifest:
-
-```js
-import { files } from "@sapper/service-worker";
-```
-
-If you have static files you do not want to cache, you should exclude them from this list after importing it (and before passing it to `cache.addAll`).
-
-Static files are served using [sirv](https://github.com/lukeed/sirv).
-
-## Bundler configuration
-
-Sapper uses Rollup or webpack to provide code-splitting and dynamic imports, as well as compiling your Svelte components. With webpack, it also provides hot module reloading. As long as you don't do anything daft, you can edit the configuration files to add whatever plugins you'd like.
-
-## Production mode and deployment
-
-To start a production version of your app, run `npm run build && npm start`. This will disable live reloading, and activate the appropriate bundler plugins.
-
-You can deploy your application to any environment that supports Node 10 or above. As an example, to deploy to [Vercel Now](https://vercel.com) when using `sapper export`, run these commands:
-
-```bash
-npm install -g vercel
-vercel
-```
-
-If your app can't be exported to a static site, you can use the [now-sapper](https://github.com/thgh/now-sapper) builder. You can find instructions on how to do so in its [README](https://github.com/thgh/now-sapper#basic-usage).
-
-## Using external components
-
-When using Svelte components installed from npm, such as [@sveltejs/svelte-virtual-list](https://github.com/sveltejs/svelte-virtual-list), Svelte needs the original component source (rather than any precompiled JavaScript that ships with the component). This allows the component to be rendered server-side, and also keeps your client-side app smaller.
-
-Because of that, it's essential that the bundler doesn't treat the package as an _external dependency_. You can either modify the `external` option under `server` in [rollup.config.js](rollup.config.js) or the `externals` option in [webpack.config.js](webpack.config.js), or simply install the package to `devDependencies` rather than `dependencies`, which will cause it to get bundled (and therefore compiled) with your app:
-
-```bash
-npm install -D @sveltejs/svelte-virtual-list
-```
-
-## Bugs and feedback
-
-Sapper is in early development, and may have the odd rough edge here and there. Please be vocal over on the [Sapper issue tracker](https://github.com/sveltejs/sapper/issues).
+This will make your blog post available under a unique url based on the slug like `/blog/example-post`.

logfile.json

@@ -1,24 +1,8 @@
 {
-  "cool-post-copy": {
-    "2021-01-02T16:41:48.766Z": {
-      "diff": 279,
-      "currentWords": 279
-    }
-  },
-  "cool-post-test": {
-    "2021-01-02T16:41:48.768Z": {
-      "diff": 41,
-      "currentWords": 41
-    },
-    "2021-01-02T16:46:32.517Z": {
-      "diff": 2,
-      "currentWords": 43
-    }
-  },
-  "cool-post": {
-    "2021-01-02T16:41:48.773Z": {
-      "diff": 107,
-      "currentWords": 107
+  "example-post": {
+    "2021-01-03T17:04:17.279Z": {
+      "diff": 251,
+      "currentWords": 251
     }
   }
 }

netlify.toml

@@ -0,0 +1,9 @@
+[build]
+  # Directory that contains the deploy-ready HTML files and assets generated by
+  # the build. This is relative to the base directory if one has been set, or the
+  # root directory if a base has not been set. This sample publishes the
+  # directory located at the absolute path "root/project/build-output"
+  publish = "__sapper__/export"
+
+  # Default build command.
+  command = "npm run export"

package.json

@@ -15,10 +15,18 @@
     "start": "node __sapper__/build",
     "update-word-count": "node wordCount.js"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.md": "npm run update-word-count"
+  },
   "dependencies": {
     "@rollup/plugin-json": "^4.1.0",
     "compression": "^1.7.1",
-    "polka": "next",
+    "polka": "^0.5.2",
     "sirv": "^1.0.0"
   },
   "devDependencies": {
@@ -41,7 +49,9 @@
     "date-fns": "^2.16.1",
     "front-matter": "^4.0.2",
     "glob": "^7.1.6",
+    "husky": "^4.3.6",
     "js-cookie": "^2.2.1",
+    "lint-staged": "^10.5.3",
     "marked": "^1.2.7",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.2.2",

src/components/WordCountDetailView.svelte

@@ -76,5 +76,8 @@
         {formatPercentage(timestampKeys[Object.keys(timestampKeys)].currentWords / $documentTargetLength)}
       {/each}
     </div>
-  {:else}No files found to display, did you run the word count script?{/if}
+  {:else}
+    No files found to display, did you put your blog posts under `src/posts` and
+    run the `wordCount.js` script?
+  {/if}
 </div>

src/posts/example-post.md

@@ -0,0 +1,15 @@
+---
+title: 'Example post'
+slug: 'example-post'
+---
+
+## Lorem ipsum dolor
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis sapiente dolor cum quia ut quas, minus suscipit ipsam, ipsa, dolorem tenetur fugit voluptatem dicta iusto nemo. Corrupti optio qui sit?
+Molestiae cupiditate alias inventore, ducimus numquam itaque quam ea odit fugit illum suscipit nemo. Animi dolore porro voluptates dolor libero quam dolores quisquam unde consectetur optio facere quae, pariatur tempore!
+Impedit molestiae veniam soluta tempore magni dolores eaque repudiandae hic, excepturi atque consequuntur nulla perspiciatis cupiditate maiores ipsa! Soluta, iste ex aperiam molestias dignissimos quo dolorum ducimus laudantium aspernatur exercitationem?
+Id nulla possimus quas magnam delectus soluta error aperiam, placeat provident, nisi in corporis expedita? Totam veniam necessitatibus veritatis quasi laudantium odit dignissimos? Optio molestiae minus expedita dolorem hic officia.
+Illo a omnis ducimus iste asperiores ad recusandae tempore consequatur natus debitis exercitationem ullam laborum, similique id nesciunt eum vel quisquam praesentium aliquam quam sapiente assumenda dolores. Non, culpa ipsa!
+Consectetur fuga eius quos harum impedit ipsam cumque ad a voluptatem optio blanditiis iste velit quia inventore quaerat nostrum, saepe debitis animi veniam beatae earum ut deleniti, hic delectus! A?
+Ab ipsum laborum corrupti! Modi esse placeat magnam fuga consequatur, quam deleniti ex a voluptate quidem unde eaque hic voluptatum sunt sapiente enim architecto iure, accusamus eius. Facere, sit alias.
+Voluptatem harum ipsa possimus rerum ut itaque perspiciatis recusandae aliquam reiciendis sunt dolorem excepturi perferendis natus architecto, corrupti quia repellendus maxime praesentium dolorum deleniti consequuntur. Cupiditate, aliquid sunt! Fugit, labore.