~strahinja/strahinja.srht.site

ref: a1bdc8f28beb6be015c9d41f1d86de79597f0a5c strahinja.srht.site/blog/2019-11/20191119.gmi -rw-r--r-- 6.2 KiB
a1bdc8f2Страхиња Радић Added .q/.a > ul formatting 9 months ago
                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
# Гистови у Markdown-у

Ових дана после мање паузе радим на неколико делова мог сајта, па једва стижем да нешто и напишем о ономе шта додам. Недавно сам тако додао подршку за учитавање гистова у чланке на овом блогу.

=> https://help.github.com/en/github/writing-on-github/creating-gists	гистова

За оне који не знају шта су то гистови (gists), ради се о фајловима, или деловима фајлова, са изворним кодом које је могуће делити и чак fork-овати као било који други фајл на GitHub-у. Просто поставите мини-репо са једним или више фајлова и поделите његов УРЛ. Сјајно! :smiley:

Ова могућност, која је уједно и тест динамичких компонената о којима сам недавно писао, ми је била посебан изазов и уједно извор материјала за учење Nuxt.js-а. Видећемо које су неке од карактеристичних тачака које сам прешао приликом њеног развоја.

=> https://strahinja.org/blog/20191026	недавно писао

## Почетак

Рад са гистовима почињемо посетом УРЛ-а https://gist.github.com, где ће они које означимо као јавне бити доступни на адреси облика

=> https://gist.github.com	https://gist.github.com

>https://gist.github.com/[корисничко_име]/[хеш]

Верзији гиста у формату JSON можемо приступити додавањем .json на крај те адресе, дакле:

> https://gist.github.com/[корисничко_име]/[хеш].json

Простим позивом this.$axios.$get() или this.$http.$get(), у зависности од тога да ли користимо модул axios или http, учитамо тај JSON и посао је готов, зар не?

=> https://axios.nuxtjs.org	axios
=> https://http.nuxtjs.org	http

Нажалост, то није баш тако. Уколико вам не смета подразумевано HTML форматирање поља div насталог JSON објекта, или чињеница да се сви фајлови заједно налазе у том (скаларном) пољу, и то је довољно. За било шта више, потребно је учитати гист преко API-ја.

=> https://developer.github.com/v3/gists	API-ја

## API

За просто учитавање довољно је методом GET приступити УРЛ-у

> http://api.github.com/gists/[хеш]

где је [хеш] хеш код вашег гиста, исти као у претходном случају. Резултат је опет JSON објекат, али који укључује фајлове у сировом облику као засебна поља.

## Код

Конкретан код сам раздвојио на онај који је оријентисан на податке (Vuex store) и презентациони (компонента Gist). Ево најзанимљивијих делова:

```
<template>
<!-- ... -->
</template>

<script>
export default {
    name: 'Gist',
    props: {
        gist: { type: Object, default: () => ({}), required: true },
        filename: { type: String, default: '', required: true },
        highlightedLine: { type: Number, default: 0, required: false },
    },
    computed: {
        gistRawUrl()
        {
            if (!this || !this.gist || !this.gist.files ||
this.filename.length==0
                || !this.gist.files[this.filename])
            {
                return null;
            }
            return this.gist.files[this.filename].raw_url;
        },
        gistLines()
        {
            if (!this || !this.gist || !this.gist.files ||
this.filename.length==0
                || !this.gist.files[this.filename])
            {
                return null;
            }
            return this.gist.files[this.filename].content;
        },
    },
    methods: {
        escapeHtml(html)
        {
            return html
                .replace(/&/g, '&')
                .replace(/</g, '<')
                .replace(/>/g, '>')
                .replace(/"/g, '"')
                .replace(/'/g, ''');
        },
        formatGistLinesAsHtml(lines)
        {
            let result = '';
            if (lines && lines.length>0)
            {
                let linesArray = lines.split('n');
                for (let line in linesArray)
                {
                    result += (this.highlightedLine==parseInt(line)+1 ?
                        '<tr class="highlighted-line">n' :
                        '<tr>n') +
                    '<td class="blob-num js-line-number" data-line-number="' +
                    (parseInt(line)+1).toString() + '"></td>n' +
                    '<td class="blob-code blob-code-inner js-file-line">' +
                    this.escapeHtml(linesArray[line]) +
                    '</td>n' +
                    '</tr>n';
                }
            }
            return result;
        }
    },
};
</script>
<style lang="sass">
@import '~/assets/sass/gist.sass'
</style>
```

Gist.vue је компонента за приказивање гиста која је намењена директном укључивању у Markdown фајл. Пошто се фајл преко API-ја учитава као чист текст, даље се са његовим садржајем може радити било шта. На пример, можемо означити појединачне линије или истаћи жељени keyword. Ова компонента се у Markdown фајл укључује на следећи начин:

```
<component :is="extraComponentLoader"
    :filename="'nuxt.config.js'"
    :highlighted-line="15"
    :gist="gist"></component>
```