Hack to ghost core: mount/add new apps/sites on your ghost server

Install ghost from source

First, you should know how to develop with ghost.

create a new react app under core/server folder

simple example
core/server$ mkdir newapp
core/server$ cd newapp
core/server/newapp$ 
Ghost/core/server/web/newapp$ ls
app.js  controller.js  index.js
Ghost/core/server/web/newapp$ cat index.js 
module.exports = require('./app');
Ghost/core/server/web/newapp$ cat app.js 
const express = require('express');
module.exports = function setupNewApp() {
    const newApp = express();
    newApp.get('*', require('./controller'));
    return newApp;
};
Ghost/core/server/web/newapp$ cat controller.js 
const path = require('path');

module.exports = function newAppController(req, res) {
    res.send('Welcome to new App!');
};

Add route for your new site/app

./core/server/app.js
    // Mount the  apps on the parentApp
  
    // ADMIN
    parentApp.use('/ghost', require('./admin')());

    // import new app/site
    parentApp.use('/newsite', require('./newapp')());
    
    // BLOG
    parentApp.use(require('./site')()); 

Notes

above are for ghost before 2.0 version.
for latest ghost, version 2.0,
The folder for new app should be "Ghost/core/server/web/newapp"
The hacked core js is Ghost/core/server/web/parent-app.js
The code for add route is same as above.

Work your new app

grunt dev
navigate to http://localhost:2368/newapp, you will get:
newapphacktoghost

A simple web audio player, bind to <span/>, one click, audio play, click again, audio stop

example

All you have to is to write below html code:
a span with class name of word-audio and attribute of data-src pointed to a audio stream resource
 
<span class='word-audio audio' style='display:inline-block' 
data-src='https://cdn.mp3xa.pw/proxy/cs1-43v4.vkuseraudio.net/
p17/fe6d95af2cee33.mp3'></span> 
 

Bertie Higgins — Casablanca

word.js

  
  function startAnimation(e) {
    if (e.className == 'word-audio audio')
      e.className = 'word-audio audio-light';
    else if (e.className == 'word-audio audio-light')
      e.className = 'word-audio audio-playing';
    else
      e.className = 'word-audio audio'
    console.log(e.className);
  }
  function play(e, context, audioBuffer) {
    if (e.state == 1) {
      e.source.stop();
      e.source.onended();
      e.source = null;
    } else {
      e.state = 1;
      const source = context.createBufferSource();
      e.source = source;
      source.buffer = audioBuffer;
      source.connect(context.destination);
      source.start();
      let it = setInterval(function() {startAnimation(e)}, 300);    
      source.onended = function() {
        e.state = 0;
        clearInterval(it);
        e.className = 'word-audio audio';
      }
    }
  }
  document.querySelectorAll('.word-audio').forEach(function(e, index) {
    let url = e.attributes['data-src'].nodeValue;
    let context = new AudioContext();
    e.state = 0;
    let wordBuffer;
    window.fetch(url)
      .then(response => response.arrayBuffer())
      .then(arrayBuffer => context.decodeAudioData(arrayBuffer))
      .then(audioBuffer => {
        e.disabled = false;
        wordBuffer = audioBuffer;
        //play(e, context, wordBuffer);
      });
    e.onclick = function() {
      play(e, context, wordBuffer);       
    }
  });

word.css

.audio {
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    vertical-align: middle;
    background: url(audio.png) no-repeat -40px 0/auto 100%;
}

.audio-playing {
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    vertical-align: middle;
    background: url(audio.png) no-repeat -20px 0/auto 100%;
}

.audio-light {
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    vertical-align: middle;
    background: url(audio.png) no-repeat 0px 0/auto 100%;
}

How to extract media files from a anki flashcard package(*.apkg)

*.apkg

The .apkg file is a zip file (as you know). Inside, you'll find the collection (an sqlite3 database of notes/cards), the media file which you were trying to open, and a bunch of numbered files 0-whatever number(these are media files).

Just use 7zip tool open the apkg file and extract into a folder.
open the "media" file via a text editor tool to find the media file extension.

example of "media"

{"16486": "COCA_16486.mp3", } 

rename "16486" file to a mp3 file, then you got the media file.

how media used in flash card

Export your flash cards into a plain text.
export_anki

[sound:COCA_16486.mp3]

spatially	<div style=''>英['speɪʃəlɪ]  美['speɪʃəlɪ]</div>	<div style=''>adv.空间地,存在于空间地;</div>	"<div><br /></div><div style='color:RosyBrown'>ADJ</div><div style='color:OrangeRed'>空间的;与空间有关的</div><div style=""font-weight:bold;"">Spatial is used to describe things relating to areas.</div><div style=''><b>例:</b>...the spatial distribution of black employment and population in South Africa.南非黑人就业与人口的空间分布</div><div style=''><b>例:</b>...spatial constraints.空间的限制</div><div><br /></div><div style='color:RosyBrown'>ADJ</div><div style='color:OrangeRed'>(能力)理解立体空间的</div><div style=""font-weight:bold;"">Your spatial ability is your ability to see and understand the relationships between shapes, spaces, and areas.</div><div style=''><b>例:</b>His manual dexterity and fine spatial skills were wasted on routine tasks.他灵巧的动手能力和杰出的空间识别能力都浪费在日常事务上了。</div><div style=''><b>例:</b>...spatial awareness.空间方位感</div>"	<div style='color:DarkOrange; font-style:italic;'>adj:spatial; </div>		[sound:COCA_16486.mp3]	 

example of web flash card

spatially

英['speɪʃəlɪ] 美['speɪʃəlɪ]
adv.空间地,存在于空间地;
"

ADJ
空间的;与空间有关的
<div style=""font-weight:bold;"">Spatial is used to describe things relating to areas.
例:...the spatial distribution of black employment and population in South Africa.南非黑人就业与人口的空间分布
例:...spatial constraints.空间的限制

ADJ
(能力)理解立体空间的
<div style=""font-weight:bold;"">Your spatial ability is your ability to see and understand the relationships between shapes, spaces, and areas.
例:His manual dexterity and fine spatial skills were wasted on routine tasks.他灵巧的动手能力和杰出的空间识别能力都浪费在日常事务上了。
例:...spatial awareness.空间方位感
"
adj:spatial;

fix up chromium m47 build error: unsupported reloc 42 against global symbol gmon_start

Error:
ld.gold: error: /usr/lib/gcc/x86_64-linux-gnu/5.3.1/../../../x86_64-linux-gnu/crti.o: unsupported reloc 42 against global symbol gmon_start

Solution:
export GYP_DEFINES="linux_use_bundled_gold=0"

bizcharts example: Line Chart

Chart UI

Line_Chart

Codes

ChartComponent.js
import React, { Component } from 'react';
import {Chart, Axis, Tooltip, Geom, Coord, Label} from 'bizcharts';
import DataSet from '@antv/data-set';
const { DataView } = DataSet;

export class LineChart extends Component {
  render() {
    const { data, width, height } = this.props;
    if (!data || data.length <= 0)
      return null;
    const ytitle = {
      autoRotate: true,
      offset: -10,
      textStyle: {
        fontSize: '22',
        textAlign: 'left',
        fill: 'rgb(75,83,87)',
        rotate: 0
      },
      position: 'end',
    };
    const xtitle = {
      autoRotate: true,
      offset: -20,
      textStyle: {
        fontSize: '22',
        textAlign: 'center',
        fill: 'rgb(75,83,87)',
        rotate: 0
      },
      position: 'end',
    };
    const line = {
      stroke: 'rgb(197,197,200)',
      lineWidth: 2
    };
    const axis = [];
    let i = 0;
    for (let key in data[0]) {
      axis[i++] = key;
    }
    let cols = {};
    cols[axis[1]] = { min: 0};
    cols[axis[0]] = { range: [ 0, 1 ] };
    const position = axis[0] + '*' + axis[1];
    return (
      <div style={{width:width,height:height}}>
      <Chart width={width} height={height} data={data} scale={cols} padding='auto'>
        <Axis name={axis[0]} title={xtitle} tickLine={null} line={line} label={null}/>
        <Axis name={axis[1]} title={ytitle} tickLine={null} line={line} label={null}/>
        <Tooltip/>
        <Geom type="line" position={position} size={2} color='rgb(82,63,91)'/>
        <Geom type='point' position={position} size={4} shape={'circle'}
          color='rgb(236,142,91)' style={{ stroke: 'rgb(236,142,91)', lineWidth: 2}}>
        </Geom>
      </Chart>
      </div>
   )
  }
};
 
App.js
import React, { Component } from 'react';
import {LineChart} from './ChartComponent';
import './App.css';

class App extends Component {
  render() {
    const data = [];
    let i = 0;
    for (i = 0; i < 10; i++) {
      let time = 1000*Math.random();
      let score = 10*Math.random();
      data.push({'Timeline':time, 'Score':score});
    }
    return (
      <div className="App">
        <LineChart data={data} width={400} height={400}>
        </LineChart>
      </div>
    );
  }
}

export default App;
 

Dependences

yarn add bizcharts yarn add @antv/data-set

Refers

https://alibaba.github.io/BizCharts/demo-detail.html?code=demo/g2/clock
https://github.com/alibaba/BizCharts/tree/master/doc/tutorial
 

bizcharts example : Doughnut Chart

Chart UI

chart_examples

key codes explaintion:

<Coord type='theta' innerRadius={0.45} />
without 'innerRadius={0.45}', UI will looks like:
chart_examples_full
without below codes, UI will looks like:
<Geom select={[false,{}]} type='intervalStack' position='percent' 
  color={['type', ['rgba(255, 255, 255, 0)']]} 
  style={{stroke: 'rgba(152,191,182,1)', lineWidth: 1}}> 
</Geom> 
chart_examples_null

Codes

ChartComponent.js
import React, { Component } from 'react';
import {Chart, Axis, Tooltip, Geom, Coord, Label} from 'bizcharts';
import DataSet from '@antv/data-set';
const { DataView } = DataSet;

export class ScoreChart extends Component {
  render() {
    const { width, height, score } = this.props;
    const scoreData = [
      { type: 'Score', value: score },
      { type: '', value: 10 - score },
    ];
    const scoreDv = new DataView();
    scoreDv.source(scoreData)
      .transform({
      type: 'percent',
      field: 'value',
      dimension: 'type',
      as: 'percent'
    });
    const scoreColor = (type) => {
      if (type === 'Score')
        return 'rgb(152,191,182)';
      return 'white';
    };
    return (
      <Chart data={scoreDv} width={width} height={height} padding='auto'>
        <Coord type='theta' innerRadius={0.45} />
        <Geom select={[false,{}]} type='intervalStack' position='percent'
          color={['type', ['rgba(255, 255, 255, 0)']]}
          style={{stroke: 'rgba(152,191,182,1)', lineWidth: 1}}>
        </Geom>
        <Geom select={[false,{}]} type='intervalStack' position='percent'
          color={['type', scoreColor]}>
        </Geom>
      </Chart>
    )
  }
};

export class StarChart extends Component {
  render() {
    let { width, height, situation, action, task, result } = this.props;
    if (width < 200)
      width = 200;
    if (height < 200)
      height = 200;
    const starData = [
      { type: 'Situation', value: situation },
      { type: 'Action', value: action },
      { type: 'Task', value: task },
      { type: 'Result', value: result },
    ];
    const starDv = new DataView();
    starDv.source(starData)
      .transform({
      type: 'percent',
      field: 'value',
      dimension: 'type',
      as: 'percent'
    });
    const starColor = (type) => {
      if (type === 'Situation')
        return 'rgb(208,210,211)';
      if (type === 'Action')
        return 'rgb(151,191,182)';
      if (type === 'Task')
        return 'rgb(236,142,91)';
      if (type === 'Result')
        return 'rgb(64,43,74)';
      return 'transparent';
    };
    return (
      <Chart data={starDv} width={width} height={height} padding={['10%', '22%']}>
        <Coord type='theta' innerRadius={0.45} />
        <Geom select={[false,{}]} type='intervalStack' position='percent'
          color={['type', starColor]}>
          <Label content='type' offset={20}/>
        </Geom>
      </Chart>
    )
  }
}
App.js
import React, { Component } from 'react';
import {ScoreChart, StarChart} from './ChartComponent';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <StarChart width={200} height={200}
          situation={20} action={40} task={40} result={20}>
        </StarChart>
        <ScoreChart width={120} height={120}
          score={7}>
        </ScoreChart>
      </div>
    );
  }
}

export default App;

Dependences

yarn add bizcharts yarn add @antv/data-set 

Refers

https://alibaba.github.io/BizCharts/demo-detail.html?code=demo/g2/clock
https://github.com/alibaba/BizCharts/tree/master/doc/tutorial

sed replace shell variable which include slash ('/')

Test content

cat test-sed.txt
aaa/bbb/ccc/ddd/eee
fff/ggg/ss

replace "ccc/ddd" to "CCC/DDD" via sed

NEW_STRING="CCC/DDD"
sed -i "s:ccc/ddd:${NEW_STRING}:" test-sed.txt

Notes:

  1. use ':' as seperate char rather than '/', which is default
  2. use "" include the replace command

fixed: embedded-redis: Unable to run on macOS Sonoma

Issue you might see below error while trying to run embedded-redis for your testing on your macOS after you upgrade to Sonoma. java.la...