Чланци са ознаком #Markdown

Nuxtpress

Категорије:
  • ажурирања сајта

Не много после мог претходног писања, Nuxt.js-ов тим је објавио верзију 2.13, која доноси неколико нових додатака за Nuxt.js, међу којима су и @nuxt/components и @nuxt/content. Овај други додатак је званично решење за рад са чланцима у формату Markdown у Nuxt.js-у. Од тада сам у слободно време углавном радио на пребацивању свих делова мог сајта који имају везе са Markdown-ом на @nuxt/content. Осим овога, проучавао сам и начин на који се Nuxt апликација може писати у Typescript-у, што је једна од идеја за неки будући update. Вратимо се сад @nuxt/content-у.

Предности

Осим очигледне предности постојања готовог API-ја за читање чланака у формату Markdown, @nuxt/content нуди и напредно филтрирање и full-text претрагу преко интерфејса сличног MongoDB-у. Сада је довољно ставити .md фајлове у /content и може се написати, рецимо:

async asyncData({ $content })
{
    const latestArticles = await $content('/')
        .where({ type: { $eq: 'article' } })
        .sortBy('date', 'desc')
        .limit(5)
        .fetch();
    return {
        latestArticles,
    };
}

да би се учитало најсвежијих пет чланака сортираних по опадајућем редоследу. Претрага се такође обавља директно:

async asyncData({ $content, route })
{
    const foundArticles = await $content('/')
        .search(route.params.q)
        .fetch();
    return {
        foundArticles,
    };
}

Миграција

Главна разлика у односу на frontmatter-markdown-loader је што се у @nuxt/content-у уместо markdown-it-а за превођење Markdown-а у HTML користи remark. То значи да је за све plugin-ове markdown-it-а потребно користити еквиваленте, наравно уколико они постоје. На пример, за сада не постоји еквивалент pluginmarkdown-it-figure-caption.

Пошто је замисао @nuxt/content-а систем за управљање чланцима у виду фајлова, а не слогова у бази података, за сада не постоји уграђена подршка за складиштење чланака у бази уместо у фајл систему, па је потребно директно позивати remark. Наравно, могуће је напоредо са њим користити и markdown-it, али мислим да је то непотребно дуплирање зависности (dependencies) и није идеално. За сада још увек користим оба решења заједно, док не довршим подршку за приказивање текстова у одељку „Текстови“ уз помоћ remark-а.

Подршка за чланке

Категорије:
  • ажурирања сајта

Данас сам довршио додавање почетног система за приказивање чланака у Markdown-у. За разлику од тога како сам (за сада) реализовао приказивање чланака овог блога, у страницама из одељка „Текстови“ нисам користио frontmatter-markdown-loader. Разлог за ово је што је тај пакет за Nuxt прилагођен ситуацији у којој се серверски део апликације заиста извршава на Node.js серверу и само шаље донекле или делимично обрађен садржај клијентском делу. Уколико хостујемо сајт на статичком серверу, каква је већина (јефтиних) хостинг понуда код домаћих провајдера, користићемо SSG, тј. статички генерисан сајт. Ово не оставља места за додавање и уређивање чланака „у лету“, преко интерфејса саме апликације, па сам одлучио да директно искористим markdown-it.

Пре свега, направио сам фајл markdown-it.js са следећим садржајем:

import markdownIt from 'markdown-it';
import markdownItAbbr from 'markdown-it-abbr';
//...

var md = new markdownIt({html: true})
    .use(markdownItAbbr)
    //...
    ;

//...

export { md };

а затим и фајл plugins/markdown-it.js:

import { md } from '../markdown-it';

export default({ app }, inject) =>
{
    inject('mdRender', markdown => md.render(markdown));
};

Тиме се функција render() убацује у Nuxt-ов context и Vue инстанцу, па може да јој се приступи преко context.app.$mdRender() или this.$mdRender(). Сада једноставно могу да у оквиру компоненте странице напишем:

<template lang="pug">
    static-markdown(:markdown="markdown")
</template>

<script>
import StaticMarkdown from '~/components/StaticMarkdown';
export default {
    name: 'Koord',
    components: { StaticMarkdown },
    data()
    {
        return {
            markdown: '',
        };
    },
    async asyncData({ store, app })
    {
        let linkId = 'koord';
        await store.dispatch('articles/loadArticle', { linkId },
                             { root: true });
        let article = store.getters['articles/article'];
        return {
            markdown: article && article.markdown
                ? app.$mdRender(article.markdown)
                : ''
        };
    }
};
</script>

и Markdown ће бити преведен у HTML, у време генерисања страница, што омогућава видљивост претраживачима. Истовремено, постоји могућност накнадне хидрације подацима из базе. Планирам да овакву комбинацију евентуално применим и на чланке овог блога.

Нови почетак ✨

Категорије:
  • опште
  • ажурирања сајта

Данас сам завршио следећу етапу у развоју моје личне странице, преласком на нови engine који развијам учећи Nuxt.js. Истовремено, морао сам да трајно или привремено уклоним доста ствари које нису прилагођене новом систему. Неки статички чланци, као што је мој превод ОЈЛ (и верзије 2), су остали.

Поново планирам вођење веб дневника, тј. „блога“. Овај пут сам се одлучио да чланке пишем у Markdown-у који се трансформише у HTML са могућношћу коришћења Vue.js тагова компонената, дакле нечему што више личи на Vue.js template него на чист HTML. Предност овог приступа можда није очита, али то омогућава најразличитије динамичке додатке, почевши од компоненте која би омогућавала додавање анкета, па све до компоненте за исцртавање фрактала или приказивање ASCII art-а.

Са друге стране, Markdown је веома практичан као језик за писање чланака, што знају сви који су имали прилике да коментаришу на Stack Overflow-у или пишу README.md документ на GitHub-у. Његова основна идеја је да буде што ближи ономе како бисмо текст „форматирали“ у обичном .txt документу, за разлику од HTML-а и других језика за означавање. У ери текстуалних терминала се курзив писао уз помоћ подвлака (_) а полуцрна слова уз помоћ ^[Jедноструких звездица, али нећемо ситничарити.] звездица (*):

Да _нађемо_ и **изнађемо** решење.

што производи: „Да нађемо и изнађемо решење.“

Верзија Markdown-а коју користим садржи и уводни део сваког чланка у YAML-у, који се назива Frontmatter и даје могућност да се и мета-тагови задају у формату читљивом људима. Тако овај чланак почиње на следећи начин:

---
title: Нови почетак ✨
date: 2019-10-26T0:00:00.000Z
categories:
  - опште
  - ажурирања сајта
tags:
  - Nuxt.js
  - Markdown
---

Engine који развијам даље организује чланке на основу ових ознака.

Creative Commons License
Copyright © 1999-
Страхиња Радић (Strahinya Radich)