diff --git a/_posts/blog/2019-08-09-ide-to.md b/_posts/blog/2019-08-09-ide-to.md index c9510a5..45a48ac 100644 --- a/_posts/blog/2019-08-09-ide-to.md +++ b/_posts/blog/2019-08-09-ide-to.md @@ -4,8 +4,10 @@ title: Ide to ? date: 2019-08-09T17:24:13.481Z thumbnail: /images/uploads/screenshot.gif rating: 4 +tags: ['dev'] --- -![Photo presentation of a responzIO device ](/images/uploads/responzio.png "responzIO device") + +![Photo presentation of a responzIO device ](/images/uploads/responzio.png 'responzIO device') # Invenit vaporibus in educat visa Cererem dissimiles diff --git a/_posts/blog/2019-11-03-anothert-one.md b/_posts/blog/2019-11-03-anothert-one.md index e9005fa..a1a5147 100644 --- a/_posts/blog/2019-11-03-anothert-one.md +++ b/_posts/blog/2019-11-03-anothert-one.md @@ -4,7 +4,9 @@ title: Anothert one date: 2019-11-03T11:01:32.621Z thumbnail: /images/uploads/responzio.png rating: 2 +tags: [] --- + # Simul rursus animal Scythiae ## Latus saltibus et mihi @@ -30,7 +32,7 @@ penitus quis. Scis nervo properatus [sitis](http://www.infernas.io/continui-atque): quid, venientique et felix ficta iactantem Echidnae humanae. Apollineos adspice, ut est iam numquamque artus sanguis frondes coniugiique vibrantia taceam, ceu. In -Hesperio tenet ara honorem *laude* partim deus, Stymphalides pressa quoniam mea +Hesperio tenet ara honorem _laude_ partim deus, Stymphalides pressa quoniam mea saligna vides, cortinaque. Opem inductas et ignes auras oppidaque calcataque huius hic viribus luna pennis, sub ille altae Rhanisque. diff --git a/email-signature.html b/email-signature.html index 8dc1b72..08c6dde 100644 --- a/email-signature.html +++ b/email-signature.html @@ -1,6 +1,6 @@
@@ -8,29 +8,29 @@ - -
m-logo Michal Vanko
+ Software Architect and Consultant
+ ({ + ...item, + [field]: marked(item[field]), + }) +} diff --git a/src/routes/blog/[slug].json.js b/src/routes/blog/[slug].json.js index 176890d..121bb77 100644 --- a/src/routes/blog/[slug].json.js +++ b/src/routes/blog/[slug].json.js @@ -1,28 +1,30 @@ -import posts from './_posts.js'; +import { readFile } from 'fs' +import { promisify } from 'util' +import fm from 'front-matter' +import { parseField } from '../../markdown/parse-markdown' -const lookup = new Map(); -posts.forEach(post => { - lookup.set(post.slug, JSON.stringify(post)); -}); +export async function get(req, res, next) { + // the `slug` parameter is available because + // this file is called [slug].json.js + const { slug } = req.params -export function get(req, res, next) { - // the `slug` parameter is available because - // this file is called [slug].json.js - const { slug } = req.params; + let postSource + try { + postSource = await promisify(readFile)(`_posts/blog/${slug}.md`, 'utf-8') + } catch (e) { + if (e.code === 'ENOENT') { + res.statusCode = 404 + res.end('Post not found \n' + e.toString()) + return + } + res.statusCode = 500 + res.end('Error loading post source file. \n' + e.toString()) + return + } - if (lookup.has(slug)) { - res.writeHead(200, { - 'Content-Type': 'application/json' - }); + const parsedPost = fm(postSource) + const response = parseField('body')(parsedPost) - res.end(lookup.get(slug)); - } else { - res.writeHead(404, { - 'Content-Type': 'application/json' - }); - - res.end(JSON.stringify({ - message: `Not found` - })); - } + res.setHeader('Content-Type', 'application/json') + res.end(JSON.stringify(response)) } diff --git a/src/routes/blog/_posts.js b/src/routes/blog/_posts.js deleted file mode 100644 index a2a8903..0000000 --- a/src/routes/blog/_posts.js +++ /dev/null @@ -1,92 +0,0 @@ -// Ordinarily, you'd generate this data from markdown files in your -// repo, or fetch them from a database of some kind. But in order to -// avoid unnecessary dependencies in the starter template, and in the -// service of obviousness, we're just going to leave it here. - -// This file is called `_posts.js` rather than `posts.js`, because -// we don't want to create an `/blog/posts` route — the leading -// underscore tells Sapper not to do that. - -const posts = [ - { - title: 'What is Sapper?', - slug: 'what-is-sapper', - html: ` -

First, you have to know what Svelte is. Svelte is a UI framework with a bold new idea: rather than providing a library that you write code with (like React or Vue, for example), it's a compiler that turns your components into highly optimized vanilla JavaScript. If you haven't already read the introductory blog post, you should!

- -

Sapper is a Next.js-style framework (more on that here) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:

- -
    -
  • Code-splitting, dynamic imports and hot module replacement, powered by webpack
    • -
  • Server-side rendering (SSR) with client-side hydration
    • -
  • Service worker for offline support, and all the PWA bells and whistles
    • -
  • The nicest development experience you've ever had, or your money back
    • -
- -

It's implemented as Express middleware. Everything is set up and waiting for you to get started, but you keep complete control over the server, service worker, webpack config and everything else, so it's as flexible as you need it to be.

- ` - }, - - { - title: 'How to use Sapper', - slug: 'how-to-use-sapper', - html: ` -

Step one

-

Create a new project, using degit:

- - 
npx degit "sveltejs/sapper-template#rollup" my-app
-			cd my-app
-			npm install # or yarn!
-			npm run dev
-
- -

Step two

-

Go to localhost:3000. Open my-app in your editor. Edit the files in the src/routes directory or add new ones.

- -

Step three

-

...

- -

Step four

-

Resist overdone joke formats.

- ` - }, - - { - title: 'Why the name?', - slug: 'why-the-name', - html: ` -

In war, the soldiers who build bridges, repair roads, clear minefields and conduct demolitions — all under combat conditions — are known as sappers.

- -

For web developers, the stakes are generally lower than those for combat engineers. But we face our own hostile environment: underpowered devices, poor network connections, and the complexity inherent in front-end engineering. Sapper, which is short for Svelte app maker, is your courageous and dutiful ally.

- ` - }, - - { - title: 'How is Sapper different from Next.js?', - slug: 'how-is-sapper-different-from-next', - html: ` -

Next.js is a React framework from Zeit, and is the inspiration for Sapper. There are a few notable differences, however:

- -
    -
  • It's powered by Svelte instead of React, so it's faster and your apps are smaller
    • -
  • Instead of route masking, we encode route parameters in filenames. For example, the page you're looking at right now is src/routes/blog/[slug].html
    • -
  • As well as pages (Svelte components, which render on server or client), you can create server routes in your routes directory. These are just .js files that export functions corresponding to HTTP methods, and receive Express request and response objects as arguments. This makes it very easy to, for example, add a JSON API such as the one powering this very page
    • -
  • Links are just <a> elements, rather than framework-specific <Link> components. That means, for example, that this link right here, despite being inside a blob of HTML, works with the router as you'd expect.
    • -
- ` - }, - - { - title: 'How can I get involved?', - slug: 'how-can-i-get-involved', - html: ` -

We're so glad you asked! Come on over to the Svelte and Sapper repos, and join us in the Discord chatroom. Everyone is welcome, especially you!

- ` - } -]; - -posts.forEach(post => { - post.html = post.html.replace(/^\t{3}/gm, ''); -}); - -export default posts; diff --git a/src/routes/blog/index.json.js b/src/routes/blog/index.json.js index bfd9389..6e3f40d 100644 --- a/src/routes/blog/index.json.js +++ b/src/routes/blog/index.json.js @@ -1,16 +1,36 @@ -import posts from './_posts.js'; +import { readdir, readFile } from 'fs' +import { promisify } from 'util' +import fm from 'front-matter' +import marked from 'marked' -const contents = JSON.stringify(posts.map(post => { - return { - title: post.title, - slug: post.slug - }; -})); +export async function get(req, res) { + const files = await promisify(readdir)(`_posts/blog/`, 'utf-8') -export function get(req, res) { - res.writeHead(200, { - 'Content-Type': 'application/json' - }); + const contents = await Promise.all( + files.map(async file => { + const fileContent = await promisify(readFile)( + `_posts/blog/${file}`, + 'utf-8' + ) + const parsedAttributes = fm(fileContent) - res.end(contents); -} \ No newline at end of file + const lineOfTextRegExp = /^(?:\w|\[).+/gm + const lines = parsedAttributes.body + .match(lineOfTextRegExp) + .slice(0, 4) + .join('\n') + + const preview = marked(lines) + return { + ...parsedAttributes.attributes, + preview, + } + }) + ) + + res.writeHead(200, { + 'Content-Type': 'application/json', + }) + + res.end(JSON.stringify(contents)) +} diff --git a/src/routes/blog/index.svelte b/src/routes/blog/index.svelte index e24f711..5425c92 100644 --- a/src/routes/blog/index.svelte +++ b/src/routes/blog/index.svelte @@ -1,34 +1,103 @@ - Blog + My blog @michalvankodev

Recent posts

- \ No newline at end of file +
  • +
    +
    +

    + {post.title} +

    +
    + {@html post.preview} + +
    + +
    • + {/each} + diff --git a/src/routes/portfolio/index.json.js b/src/routes/portfolio/index.json.js index 9b7b3f6..e4cb083 100644 --- a/src/routes/portfolio/index.json.js +++ b/src/routes/portfolio/index.json.js @@ -2,6 +2,7 @@ import { readFile } from 'fs' import { promisify } from 'util' import fm from 'front-matter' import marked from 'marked' +import { parseField } from '../../markdown/parse-markdown' export async function get(req, res, next) { let pageSource @@ -14,14 +15,16 @@ export async function get(req, res, next) { } const parsed = fm(pageSource) - const workHistory = (parsed.attributes.work_history || []).map(parseField('description')) + const workHistory = (parsed.attributes.work_history || []).map( + parseField('description') + ) const projects = (parsed.attributes.projects || []) .filter(project => project.displayed) .map(parseField('description')) const education = (parsed.attributes.education || []) .filter(education => education.displayed) .map(parseField('description')) - + const response = { title: parsed.attributes.title, body: marked(parsed.body), @@ -34,10 +37,3 @@ export async function get(req, res, next) { res.setHeader('Content-Type', 'application/json') res.end(JSON.stringify(response)) } - -function parseField(field) { - return item => ({ - ...item, - [field]: marked(item[field]) - }) -} \ No newline at end of file diff --git a/static/admin/config.yml b/static/admin/config.yml index dc9a70c..84a8303 100644 --- a/static/admin/config.yml +++ b/static/admin/config.yml @@ -3,32 +3,36 @@ backend: repo: michalvankodev/michalvankodev branch: master # Branch to update (optional; defaults to master) -media_folder: "static/images/uploads" # Media files will be stored in the repo under images/uploads -public_folder: "/images/uploads" # The src attribute for uploaded media will begin with /images/uploads +media_folder: 'static/images/uploads' # Media files will be stored in the repo under images/uploads +public_folder: '/images/uploads' # The src attribute for uploaded media will begin with /images/uploads collections: - - name: "blog" # Used in routes, e.g., /admin/collections/blog - label: "Blog" # Used in the UI - folder: "_posts/blog" # The path to the folder where the documents are stored + - name: 'blog' # Used in routes, e.g., /admin/collections/blog + label: 'Blog' # Used in the UI + folder: '_posts/blog' # The path to the folder where the documents are stored create: true # Allow users to create new documents in this collection - slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md + slug: '{{year}}-{{month}}-{{day}}-{{slug}}' # Filename template, e.g., YYYY-MM-DD-title.md fields: # The fields for each document, usually in front matter - - { label: "Layout", name: "layout", widget: "hidden", default: "blog" } - - { label: "Title", name: "title", widget: "string" } - - { label: "Publish Date", name: "date", widget: "datetime" } - - { label: "Featured Image", name: "thumbnail", widget: "image" } - - { label: "Rating (scale of 1-5)", name: "rating", widget: "number" } - - { label: "Body", name: "body", widget: "markdown" } - - name: "pages" - label: "Pages" + - { label: 'Layout', name: 'layout', widget: 'hidden', default: 'blog' } + - { label: 'Title', name: 'title', widget: 'string' } + - { label: 'Publish Date', name: 'date', widget: 'datetime' } + - { label: 'Featured Image', name: 'thumbnail', widget: 'image' } + - { label: 'Tags', name: 'tags', widget: 'list', default: ['News'] } + - { label: 'Body', name: 'body', widget: 'markdown' } + - name: 'pages' + label: 'Pages' files: - - label: "Portfolio" - name: "portfolio" - file: "_pages/portfolio.md" + - label: 'Portfolio' + name: 'portfolio' + file: '_pages/portfolio.md' fields: - { label: Title, name: title, widget: string } - { label: Body, name: body, widget: markdown } - - { label: Work history prelude, name: work_history_prelude, widget: markdown } + - { + label: Work history prelude, + name: work_history_prelude, + widget: markdown, + } - label: Work history name: work_history widget: list @@ -40,19 +44,38 @@ collections: widget: list fields: - { label: Project name, name: name, widget: string } - - { label: Displayed, name: displayed, widget: boolean, default: true } + - { + label: Displayed, + name: displayed, + widget: boolean, + default: true, + } - { label: Description, name: description, widget: markdown } - label: Image name: image widget: object - fields: - - { label: Source, name: source, widget: image, required: false } - - { label: Image description, name: image_description, widget: string, required: false } + fields: + - { + label: Source, + name: source, + widget: image, + required: false, + } + - { + label: Image description, + name: image_description, + widget: string, + required: false, + } - label: Education name: education widget: list fields: - { label: Institution, name: name, widget: string } - - { label: Displayed, name: displayed, widget: boolean, default: true } + - { + label: Displayed, + name: displayed, + widget: boolean, + default: true, + } - { label: Description, name: description, widget: markdown } - diff --git a/static/global.css b/static/global.css index fd3c53c..eeac3a9 100644 --- a/static/global.css +++ b/static/global.css @@ -74,7 +74,7 @@ p { } ::selection { - background: #25b5c5; + background: #0dd0d0; } @media only screen and (min-width: 400px) {