@ -4,216 +4,245 @@ import * as fleece from 'golden-fleece';
import process _markdown from '../../utils/_process_markdown.js' ; import process _markdown from '../../utils/_process_markdown.js' ;
import marked from 'marked' ; import marked from 'marked' ;
import prismjs from 'prismjs' ; // prism-highlighter – import Prism from 'prismjs' ; // prism-highlighter –
require ( 'prismjs/components/prism-bash' ) ; require ( 'prismjs/components/prism-bash' ) ;
const langs = { const langs = {
'hidden-data' : 'json' , 'hidden-data' : 'json' ,
'html-no-repl' : 'html' , 'html-no-repl' : 'html' ,
} ; } ;
// map lang to prism-language-attr
// map lang to prism-language-attr
const prismLang = { const prismLang = {
bash : 'bash' , bash : 'bash' ,
html : 'markup' , html : 'markup' ,
js : 'javascript' , js : 'javascript' ,
css : 'css' , css : 'css' ,
} ; } ;
function btoa ( str ) { function btoa ( str ) {
return new Buffer ( str ) . toString ( 'base64' ) ; return new Buffer ( str ) . toString ( 'base64' ) ;
} }
const escaped = { const escaped = {
'"' : '"' , '"' : '"' ,
"'" : ''' , "'" : ''' ,
'&' : '&' , '&' : '&' ,
'<' : '<' , '<' : '<' ,
'>' : '>' , '>' : '>' ,
} ; } ;
const unescaped = Object . keys ( escaped ) . reduce ( const unescaped = Object . keys ( escaped ) . reduce (
( unescaped , key ) => ( ( unescaped [ escaped [ key ] ] = key ) , unescaped ) , ( unescaped , key ) => ( ( unescaped [ escaped [ key ] ] = key ) , unescaped ) ,
{ } , { }
) ; ) ;
function unescape ( str ) { function unescape ( str ) {
return String ( str ) . replace ( /&.+?;/g , match => unescaped [ match ] || match ) ; return String ( str ) . replace ( /&.+?;/g , match => unescaped [ match ] || match ) ;
} }
const blockTypes = 'blockquote html heading hr list listitem paragraph table tablerow tablecell' . split ( const blockTypes = [
' ' ,
'blockquote' ,
) ; 'html' ,
'heading' ,
'hr' ,
'list' ,
'listitem' ,
'paragraph' ,
'table' ,
'tablerow' ,
'tablecell'
] ;
function extractMeta ( line , lang ) { function extractMeta ( line , lang ) {
try {
try {
if ( lang === 'html' && line . startsWith ( '<!--' ) && line . endsWith ( '-->' ) ) {
if ( lang === 'html' && line . startsWith ( '<!--' ) && line . endsWith ( '-->' ) ) {
return fleece . evaluate ( line . slice ( 4 , - 3 ) . trim ( ) ) ;
return fleece . evaluate ( line . slice ( 4 , - 3 ) . trim ( ) ) ;
}
}
if (
if (
lang === 'js' ||
lang === 'js' ||
( lang === 'json' && line . startsWith ( '/*' ) && line . endsWith ( '*/' ) ) ( lang === 'json' && line . startsWith ( '/*' ) && line . endsWith ( '*/' ) )
) { ) {
return fleece . evaluate ( line . slice ( 2 , - 2 ) . trim ( ) ) ; return fleece . evaluate ( line . slice ( 2 , - 2 ) . trim ( ) ) ;
} }
} catch ( err ) { } catch ( err ) {
// TODO report these errors, don't just squelch them
// TODO report these errors, don't just squelch them
return null ; return null ;
} }
} }
// https://github.com/darkskyapp/string-hash/blob/master/index.js
// https://github.com/darkskyapp/string-hash/blob/master/index.js
function getHash ( str ) { function getHash ( str ) {
let hash = 5381 ; let hash = 5381 ;
let i = str . length ; let i = str . length ;
while ( i -- ) hash = ( ( hash << 5 ) - hash ) ^ str . charCodeAt ( i ) ; while ( i -- ) hash = ( ( hash << 5 ) - hash ) ^ str . charCodeAt ( i ) ;
return ( hash >>> 0 ) . toString ( 36 ) ; return ( hash >>> 0 ) . toString ( 36 ) ;
} }
export const demos = new Map ( ) ; export const demos = new Map ( ) ;
export default function ( ) { export default function ( ) {
return fs
return fs
. readdirSync ( ` content/guide ` )
. readdirSync ( ` content/guide ` )
. filter ( file => file [ 0 ] !== '.' && path . extname ( file ) === '.md' )
. filter ( file => file [ 0 ] !== '.' && path . extname ( file ) === '.md' )
. map ( file => {
. map ( file => {
const markdown = fs . readFileSync ( ` content/guide/ ${ file } ` , 'utf-8' ) ;
const markdown = fs . readFileSync ( ` content/guide/ ${ file } ` , 'utf-8' ) ;
const { content , metadata } = process _markdown ( markdown ) ;
const { content , metadata } = process _markdown ( markdown ) ;
const groups = [ ] ;
const subsections = [ ] ;
let group = null ;
const groups = [ ] ;
let uid = 1 ;
let group = null ;
let uid = 1 ;
const renderer = new marked . Renderer ( ) ;
const renderer = new marked . Renderer ( ) ;
renderer . code = ( source , lang ) => {
source = source . replace ( /^ +/gm , match =>
renderer . code = ( source , lang ) => {
match . split ( ' ' ) . join ( '\t' ) ,
source = source . replace ( /^ +/gm , match =>
) ;
match . split ( ' ' ) . join ( '\t' )
) ;
const lines = source . split ( '\n' ) ;
const lines = source . split ( '\n' ) ;
const meta = extractMeta ( lines [ 0 ] , lang ) ;
const meta = extractMeta ( lines [ 0 ] , lang ) ;
let prefix = '' ;
let className = 'code-block' ;
let prefix = '' ;
let className = 'code-block' ;
if ( lang === 'html' && ! group ) {
/ * p r e t t i e r - i g n o r e
if ( lang === 'html' && ! group ) {
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
/ * p r e t t i e r - i g n o r e
edit vedam
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
don ' t know how to access components here
edit vedam
so i hardcoded icon here
don ' t know how to access components here
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
so i hardcoded icon here
* /
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
if ( ! meta || meta . repl !== false ) {
* /
prefix = ` <a class='open-in-repl' href='repl?demo=@@ ${ uid } ' title='open in REPL'><svg class='icon'><use xlink:href='#maximize-2' /></svg></a> ` ;
if ( ! meta || meta . repl !== false ) {
}
prefix = ` <a class='open-in-repl' href='repl?demo=@@ ${ uid } ' title='open in REPL'><svg class='icon'><use xlink:href='#maximize-2' /></svg></a> ` ;
}
group = { id : uid ++ , blocks : [ ] } ;
groups . push ( group ) ;
group = { id : uid ++ , blocks : [ ] } ;
}
groups . push ( group ) ;
}
if ( meta ) {
source = lines . slice ( 1 ) . join ( '\n' ) ;
if ( meta ) {
const filename = meta . filename || ( lang === 'html' && 'App.html' ) ;
source = lines . slice ( 1 ) . join ( '\n' ) ;
if ( filename ) {
const filename = meta . filename || ( lang === 'html' && 'App.html' ) ;
prefix = ` <span class='filename'> ${ prefix } ${ filename } </span> ` ;
if ( filename ) {
className += ' named' ;
prefix = ` <span class='filename'> ${ prefix } ${ filename } </span> ` ;
}
className += ' named' ;
}
}
}
if ( group ) group . blocks . push ( { meta : meta || { } , lang , source } ) ;
if ( group ) group . blocks . push ( { meta : meta || { } , lang , source } ) ;
if ( meta && meta . hidden ) return '' ;
if ( meta && meta . hidden ) return '' ;
/ * p r e t t i e r - i g n o r e
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
/ * p r e t t i e r - i g n o r e
design - edit vedam
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
insert prism - highlighter
design - edit vedam
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
insert prism - highlighter
* /
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
let plang = prismLang [ lang ] ;
* /
const highlighted = Prism . highlight (
let plang = prismLang [ lang ] ;
source ,
const highlighted = Prism . highlight (
Prism . languages [ plang ] ,
source ,
lang ,
Prism . languages [ plang ] ,
) ;
lang
) ;
return ` <div class=' ${ className } '> ${ prefix } <pre class='language- ${ plang } '><code> ${ highlighted } </code></pre></div> ` ;
} ;
return ` <div class=' ${ className } '> ${ prefix } <pre class='language- ${ plang } '><code> ${ highlighted } </code></pre></div> ` ;
} ;
blockTypes . forEach ( type => {
const fn = renderer [ type ] ;
const seen = new Set ( ) ;
renderer [ type ] = function ( ) {
group = null ;
renderer . heading = ( text , level , rawtext ) => {
return fn . apply ( this , arguments ) ;
if ( level <= 3 ) {
} ;
const slug = rawtext
} ) ;
. toLowerCase ( )
. replace ( /[^a-zA-Z0-9]+/g , '-' )
const html = marked ( content , { renderer } ) ;
. replace ( /^-/ , '' )
. replace ( /-$/ , '' ) ;
const hashes = { } ;
if ( seen . has ( slug ) ) throw new Error ( ` Duplicate slug ${ slug } ` ) ;
groups . forEach ( group => {
seen . add ( slug ) ;
const main = group . blocks [ 0 ] ;
if ( main . meta . repl === false ) return ;
if ( level === 3 ) {
const title = unescape (
const hash = getHash ( group . blocks . map ( block => block . source ) . join ( '' ) ) ;
text
hashes [ group . id ] = hash ;
. replace ( /<\/?code>/g , '' )
. replace ( /\.(\w+)(\((.+)?\))?/ , ( m , $1 , $2 , $3 ) => {
const json5 = group . blocks . find ( block => block . lang === 'json' ) ;
if ( $3 ) return ` . ${ $1 } (...) ` ;
if ( $2 ) return ` . ${ $1 } () ` ;
const title = main . meta . title ;
return ` . ${ $1 } ` ;
if ( ! title ) console . error ( ` Missing title for demo in ${ file } ` ) ;
} )
) ;
demos . set (
hash ,
subsections . push ( { slug , title } ) ;
JSON . stringify ( {
}
title : title || 'Example from guide' ,
components : group . blocks
return `
. filter ( block => block . lang === 'html' || block . lang === 'js' )
< h$ { level } >
. map ( block => {
< span id = "${slug}" class = "offset-anchor" > < / s p a n >
const [ name , type ] = ( block . meta . filename || '' ) . split ( '.' ) ;
< a href = "guide#${slug}" class = "anchor" aria - hidden = "true" > < / a >
return {
$ { text }
name : name || 'App' ,
< / h $ { l e v e l } > ` ;
type : type || 'html' ,
}
source : block . source ,
} ;
return ` <h ${ level } > ${ text } </h ${ level } > ` ;
} ) ,
} ;
json5 : json5 && json5 . source ,
} ) ,
blockTypes . forEach ( type => {
) ;
const fn = renderer [ type ] ;
} ) ;
renderer [ type ] = function ( ) {
group = null ;
const subsections = [ ] ;
return fn . apply ( this , arguments ) ;
const pattern = /<h3 id="(.+?)">(.+?)<\/h3>/g ;
} ;
let match ;
} ) ;
while ( ( match = pattern . exec ( html ) ) ) {
const html = marked ( content , { renderer } ) ;
const slug = match [ 1 ] ;
const title = unescape (
const hashes = { } ;
match [ 2 ]
. replace ( /<\/?code>/g , '' )
groups . forEach ( group => {
. replace ( /\.(\w+)(\((.+)?\))?/ , ( m , $1 , $2 , $3 ) => {
const main = group . blocks [ 0 ] ;
if ( $3 ) return ` . ${ $1 } (...) ` ;
if ( main . meta . repl === false ) return ;
if ( $2 ) return ` . ${ $1 } () ` ;
return ` . ${ $1 } ` ;
const hash = getHash ( group . blocks . map ( block => block . source ) . join ( '' ) ) ;
} ) ,
hashes [ group . id ] = hash ;
) ;
const json5 = group . blocks . find ( block => block . lang === 'json' ) ;
subsections . push ( { slug , title } ) ;
}
const title = main . meta . title ;
if ( ! title ) console . error ( ` Missing title for demo in ${ file } ` ) ;
return {
html : html . replace ( /@@(\d+)/g , ( m , id ) => hashes [ id ] || m ) ,
demos . set (
metadata ,
hash ,
subsections ,
JSON . stringify ( {
slug : file . replace ( /^\d+-/ , '' ) . replace ( /\.md$/ , '' ) ,
title : title || 'Example from guide' ,
file ,
components : group . blocks
} ;
. filter ( block => block . lang === 'html' || block . lang === 'js' )
} ) ;
. map ( block => {
const [ name , type ] = ( block . meta . filename || '' ) . split ( '.' ) ;
return {
name : name || 'App' ,
type : type || 'html' ,
source : block . source ,
} ;
} ) ,
json5 : json5 && json5 . source ,
} )
) ;
} ) ;
return {
html : html . replace ( /@@(\d+)/g , ( m , id ) => hashes [ id ] || m ) ,
metadata ,
subsections ,
slug : file . replace ( /^\d+-/ , '' ) . replace ( /\.md$/ , '' ) ,
file ,
} ;
} ) ;
} }
Rich Harris
6 years ago
