18 |
19 |
- Lorem, ipsum dolor.
20 | - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio sed incidunt dolorum fugit alias nesciunt architecto aliquid pariatur beatae consequatur.
21 |
22 |
23 |
- Ex, eum veniam.
24 | - Sapiente est deleniti ducimus sequi aspernatur. Magni, iste asperiores ducimus accusantium labore inventore optio, nulla consequuntur repellat sed ipsa. Expedita?
25 |
26 |
27 |
- Ipsam, laudantium sint.
28 | - Facere dolor minima incidunt quo mollitia beatae praesentium hic similique, nam odit excepturi repudiandae dolorum earum, aliquam veritatis perferendis nobis.
29 |
30 |
31 |
- Aut, eos cum.
32 | - Dolorum, laborum repellat, quis eveniet officia quisquam hic, consequuntur error voluptatem fuga voluptates nulla ullam cupiditate necessitatibus atque obcaecati rerum?
33 |
34 |
35 |
- Quas, vitae quam!
36 | - Quas unde veniam eius saepe tempora placeat recusandae dolorum corporis aspernatur quam, impedit aliquam, cumque deleniti assumenda voluptas quae officia?
37 |
38 |
39 |
--------------------------------------------------------------------------------
/test/project/src/docs/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Pangolin.js
3 | ---
4 |
5 | Let's have a look at the Fractal design system framework.
6 |
7 | ## Include a component
8 |
9 | And this is a button thingy:
10 |
11 | ```jinja
12 | {% view '@button' %}
13 | ```
14 |
15 | …which renders to this default variant:
16 |
17 | ```html
18 | {% render '@button' %}
19 | ```
20 |
--------------------------------------------------------------------------------
/test/project/src/main.js:
--------------------------------------------------------------------------------
1 | import './components/button/button.js'
2 | import './components/media/image.js'
3 |
--------------------------------------------------------------------------------
/test/project/src/main.scss:
--------------------------------------------------------------------------------
1 | @use "setup/variables.scss";
2 | @use "setup/fonts.scss";
3 | @use "setup/scaffolding.scss";
4 |
5 | @use "components/button/button.scss";
6 | @use "components/media/image.scss";
7 |
--------------------------------------------------------------------------------
/test/project/src/setup/JetBrainsMono-Regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pangolinjs/core/e4d157cc1a476e845c4e87a1f452831e119b0289/test/project/src/setup/JetBrainsMono-Regular.woff
--------------------------------------------------------------------------------
/test/project/src/setup/JetBrainsMono-Regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pangolinjs/core/e4d157cc1a476e845c4e87a1f452831e119b0289/test/project/src/setup/JetBrainsMono-Regular.woff2
--------------------------------------------------------------------------------
/test/project/src/setup/fonts.scss:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: "JetBrains Mono";
3 | src:
4 | url("JetBrainsMono-Regular.woff2") format("woff2"),
5 | url("JetBrainsMono-Regular.woff") format("woff");
6 | }
7 |
--------------------------------------------------------------------------------
/test/project/src/setup/scaffolding.scss:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: "JetBrains Mono", monospace;
3 | }
4 |
--------------------------------------------------------------------------------
/test/project/src/setup/variables.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | --darkgreen: hsl(120deg 100% 20%);
3 | --lightgreen: hsl(120deg 73% 75%);
4 | }
5 |
--------------------------------------------------------------------------------
/test/unit/lib/copy-dir.spec.js:
--------------------------------------------------------------------------------
1 | import fs from 'fs/promises'
2 | import path from 'path'
3 | import test from 'ava'
4 |
5 | import copyDir from '../../../lib/copy-dir.js'
6 | import getDirname from '../../../lib/get-dirname.js'
7 |
8 | test('copies entire directory', async t => {
9 | const dirname = getDirname(import.meta.url)
10 | const source = path.join(dirname, 'helpers')
11 | const destination = path.join(dirname, '.helpers-temp')
12 |
13 | await fs.mkdir(destination)
14 | await copyDir(source, destination)
15 | const result = await fs.readdir(destination)
16 | t.snapshot(result)
17 | await fs.rm(destination, { recursive: true, force: true })
18 | })
19 |
--------------------------------------------------------------------------------
/test/unit/lib/format-ip.spec.js:
--------------------------------------------------------------------------------
1 | import test from 'ava'
2 |
3 | import formatIP from '../../../lib/format-ip.js'
4 |
5 | test('formats localhost IPv4', t => {
6 | const result = formatIP('0.0.0.0')
7 | t.is(result, 'localhost')
8 | })
9 |
10 | test('formats localhost IPv6', t => {
11 | const result = formatIP('::')
12 | t.is(result, 'localhost')
13 | })
14 |
15 | test('returns non-localhost IP', t => {
16 | const result = formatIP('10.0.0.0')
17 | t.is(result, '10.0.0.0')
18 | })
19 |
--------------------------------------------------------------------------------
/test/unit/lib/generate-asset-filename.spec.js:
--------------------------------------------------------------------------------
1 | import test from 'ava'
2 |
3 | import generateAssetFilename from '../../../lib/generate-asset-filename.js'
4 |
5 | test('generates options', t => {
6 | const result = generateAssetFilename({ type: 'img' })
7 | t.snapshot(result)
8 | })
9 |
10 | test('generates options with hash', t => {
11 | const result = generateAssetFilename({ type: 'img', hash: true })
12 | t.snapshot(result)
13 | })
14 |
--------------------------------------------------------------------------------
/test/unit/lib/generate-output-filename.spec.js:
--------------------------------------------------------------------------------
1 | import test from 'ava'
2 |
3 | import generateOutputFilename from '../../../lib/generate-output-filename.js'
4 |
5 | test('generates output filename', t => {
6 | const result = generateOutputFilename({ type: 'js' })
7 | t.is(result, 'js/[name].js')
8 | })
9 |
10 | test('generates output filename with hash', t => {
11 | const result = generateOutputFilename({ type: 'js', hash: 'all' })
12 | t.is(result, 'js/[contenthash:8].js')
13 | })
14 |
--------------------------------------------------------------------------------
/test/unit/lib/get-asset-files.spec.js:
--------------------------------------------------------------------------------
1 | import test from 'ava'
2 |
3 | import getAssetFiles from '../../../lib/get-asset-files.js'
4 |
5 | test('gets asset files', t => {
6 | const result = getAssetFiles({
7 | files: ['hello.js', 'world.css', 'universe.svg']
8 | })
9 |
10 | t.snapshot(result)
11 | })
12 |
--------------------------------------------------------------------------------
/test/unit/lib/get-config.spec.js:
--------------------------------------------------------------------------------
1 | import test from 'ava'
2 |
3 | import getConfig from '../../../lib/get-config.js'
4 | import getDirname from '../../../lib/get-dirname.js'
5 |
6 | test.serial('gets default config', async t => {
7 | const result = await getConfig({})
8 | t.snapshot(result)
9 | })
10 |
11 | test.serial('gets user config', async t => {
12 | const dirname = getDirname(import.meta.url)
13 | const result = await getConfig({ context: dirname + '/helpers' })
14 | t.snapshot(result)
15 | })
16 |
--------------------------------------------------------------------------------
/test/unit/lib/get-dirname.spec.js:
--------------------------------------------------------------------------------
1 | import test from 'ava'
2 |
3 | import getDirname from '../../../lib/get-dirname.js'
4 |
5 | test('gets current file’s dirname', t => {
6 | const result = getDirname(import.meta.url)
7 | t.true(result.endsWith('/test/unit/lib'))
8 | })
9 |
--------------------------------------------------------------------------------
/test/unit/lib/get-host-ips.spec.js:
--------------------------------------------------------------------------------
1 | import test from 'ava'
2 |
3 | import getHostIPs from '../../../lib/get-host-ips.js'
4 |
5 | test('gets host IPs', t => {
6 | const result = getHostIPs()
7 |
8 | for (const ip of result) {
9 | t.true(typeof ip === 'string')
10 | }
11 | })
12 |
--------------------------------------------------------------------------------
/test/unit/lib/get-path.spec.js:
--------------------------------------------------------------------------------
1 | import test from 'ava'
2 |
3 | import getPaths from '../../../lib/get-paths.js'
4 |
5 | test('gets paths', t => {
6 | const result = getPaths({ context: 'test' })
7 | t.snapshot(result)
8 | })
9 |
--------------------------------------------------------------------------------
/test/unit/lib/get-pkg.spec.js:
--------------------------------------------------------------------------------
1 | import test from 'ava'
2 |
3 | import getDirname from '../../../lib/get-dirname.js'
4 | import getPkg from '../../../lib/get-pkg.js'
5 |
6 | test('gets package.json', async t => {
7 | const dirname = getDirname(import.meta.url)
8 | const result = await getPkg({ context: dirname + '/helpers' })
9 | t.snapshot(result)
10 | })
11 |
--------------------------------------------------------------------------------
/test/unit/lib/get-port.spec.js:
--------------------------------------------------------------------------------
1 | import test from 'ava'
2 |
3 | import getPort from '../../../lib/get-port.js'
4 |
5 | test('gets unused port', async t => {
6 | const result = await getPort(1337)
7 | t.is(result, 1337)
8 | })
9 |
--------------------------------------------------------------------------------
/test/unit/lib/helpers/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "test",
3 | "version": "1.0.0",
4 | "author": {
5 | "name": "Test Author"
6 | },
7 | "type": "module"
8 | }
9 |
--------------------------------------------------------------------------------
/test/unit/lib/helpers/pangolin.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | ui: {
3 | color: 'teal'
4 | },
5 |
6 | hashFiles: 'all'
7 | }
8 |
--------------------------------------------------------------------------------
/test/unit/lib/is-data-type.spec.js:
--------------------------------------------------------------------------------
1 | import test from 'ava'
2 |
3 | import isDataType from '../../../lib/is-data-type.js'
4 |
5 | test('detects objects', t => {
6 | const result = isDataType({}, Object)
7 | t.true(result)
8 | })
9 |
10 | test('detects arrays', t => {
11 | const result = isDataType([], Array)
12 | t.true(result)
13 | })
14 |
15 | test('detects dates', t => {
16 | const result = isDataType(new Date(), Date)
17 | t.true(result)
18 | })
19 |
20 | test('detects functions', t => {
21 | const result = isDataType(() => {}, Function)
22 | t.true(result)
23 | })
24 |
25 | test('detects strings', t => {
26 | const result = isDataType('', String)
27 | t.true(result)
28 | })
29 |
30 | test('detects numbers', t => {
31 | const result = isDataType(0, Number)
32 | t.true(result)
33 | })
34 |
35 | test('detects booleans', t => {
36 | const result = isDataType(true, Boolean)
37 | t.true(result)
38 | })
39 |
40 | test('detects symbols', t => {
41 | const result = isDataType(Symbol(''), Symbol)
42 | t.true(result)
43 | })
44 |
--------------------------------------------------------------------------------
/test/unit/lib/merge-objects.spec.js:
--------------------------------------------------------------------------------
1 | import test from 'ava'
2 |
3 | import mergeObjects from '../../../lib/merge-objects.js'
4 |
5 | test('shallow merges', t => {
6 | const target = {
7 | hello: 'world'
8 | }
9 |
10 | const source = {
11 | hello: 'galaxy',
12 | foo: 'bar'
13 | }
14 |
15 | const result = mergeObjects(target, source)
16 | t.snapshot(result)
17 | })
18 |
19 | test('deep merges', t => {
20 | const target = {
21 | species: {
22 | me: 'Human',
23 | you: 'Wookie'
24 | }
25 | }
26 |
27 | const source = {
28 | species: {
29 | you: 'Togruta'
30 | }
31 | }
32 |
33 | const result = mergeObjects(target, source)
34 | t.snapshot(result)
35 | })
36 |
--------------------------------------------------------------------------------
/test/unit/lib/pangolin-head-extension.spec.js:
--------------------------------------------------------------------------------
1 | import test from 'ava'
2 |
3 | import PangolinHeadExtension from '../../../lib/pangolin-head-extension.js'
4 |
5 | test.serial('creates markup in dev mode', t => {
6 | const nodeEnvCopy = process.env.NODE_ENV
7 | process.env.NODE_ENV = 'development'
8 |
9 | const publicPath = '/hello/world/'
10 | const assets = { js: [], css: [] }
11 |
12 | const result = new PangolinHeadExtension({ publicPath, assets })
13 | t.snapshot(result.run().val)
14 |
15 | process.env.NODE_ENV = nodeEnvCopy
16 | })
17 |
18 | test.serial('creates markup in prod mode', t => {
19 | const publicPath = '/hello/world/'
20 | const assets = {
21 | js: ['vendor.js', 'app.js'],
22 | css: ['vendor.css', 'app.css']
23 | }
24 |
25 | const result = new PangolinHeadExtension({ publicPath, assets })
26 |
27 | t.deepEqual(result.tags, ['pangolin_head'])
28 | t.snapshot(result.run().val)
29 | })
30 |
--------------------------------------------------------------------------------
/test/unit/lib/snapshots/copy-dir.spec.js.md:
--------------------------------------------------------------------------------
1 | # Snapshot report for `test/unit/lib/copy-dir.spec.js`
2 |
3 | The actual snapshot is saved in `copy-dir.spec.js.snap`.
4 |
5 | Generated by [AVA](https://avajs.dev).
6 |
7 | ## copies entire directory
8 |
9 | > Snapshot 1
10 |
11 | [
12 | 'package.json',
13 | 'pangolin.config.js',
14 | ]
15 |
--------------------------------------------------------------------------------
/test/unit/lib/snapshots/copy-dir.spec.js.snap:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pangolinjs/core/e4d157cc1a476e845c4e87a1f452831e119b0289/test/unit/lib/snapshots/copy-dir.spec.js.snap
--------------------------------------------------------------------------------
/test/unit/lib/snapshots/generate-asset-filename.spec.js.md:
--------------------------------------------------------------------------------
1 | # Snapshot report for `test/unit/lib/generate-asset-filename.spec.js`
2 |
3 | The actual snapshot is saved in `generate-asset-filename.spec.js.snap`.
4 |
5 | Generated by [AVA](https://avajs.dev).
6 |
7 | ## generates options
8 |
9 | > Snapshot 1
10 |
11 | 'img/[name][ext]'
12 |
13 | ## generates options with hash
14 |
15 | > Snapshot 1
16 |
17 | 'img/[contenthash:8][ext]'
18 |
--------------------------------------------------------------------------------
/test/unit/lib/snapshots/generate-asset-filename.spec.js.snap:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pangolinjs/core/e4d157cc1a476e845c4e87a1f452831e119b0289/test/unit/lib/snapshots/generate-asset-filename.spec.js.snap
--------------------------------------------------------------------------------
/test/unit/lib/snapshots/get-asset-files.spec.js.md:
--------------------------------------------------------------------------------
1 | # Snapshot report for `test/unit/lib/get-asset-files.spec.js`
2 |
3 | The actual snapshot is saved in `get-asset-files.spec.js.snap`.
4 |
5 | Generated by [AVA](https://avajs.dev).
6 |
7 | ## gets asset files
8 |
9 | > Snapshot 1
10 |
11 | {
12 | css: [
13 | 'world.css',
14 | ],
15 | js: [
16 | 'hello.js',
17 | ],
18 | }
19 |
--------------------------------------------------------------------------------
/test/unit/lib/snapshots/get-asset-files.spec.js.snap:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pangolinjs/core/e4d157cc1a476e845c4e87a1f452831e119b0289/test/unit/lib/snapshots/get-asset-files.spec.js.snap
--------------------------------------------------------------------------------
/test/unit/lib/snapshots/get-config.spec.js.md:
--------------------------------------------------------------------------------
1 | # Snapshot report for `test/unit/lib/get-config.spec.js`
2 |
3 | The actual snapshot is saved in `get-config.spec.js.snap`.
4 |
5 | Generated by [AVA](https://avajs.dev).
6 |
7 | ## gets default config
8 |
9 | > Snapshot 1
10 |
11 | {
12 | hashFiles: 'imported',
13 | project: {
14 | author: null,
15 | base: '/assets/',
16 | name: 'Pangolin.js',
17 | version: null,
18 | },
19 | ui: {
20 | color: {
21 | accent: '#ff721f',
22 | complement: '#000',
23 | links: '#7f390f',
24 | },
25 | favicon: '/favicon.ico',
26 | format: 'json',
27 | information: [
28 | {
29 | label: 'Version',
30 | value: null,
31 | },
32 | {
33 | format: Function format {},
34 | label: 'Built on',
35 | type: 'time',
36 | value: Date 2000-01-01 00:00:00 UTC {},
37 | },
38 | ],
39 | labels: {
40 | panels: {
41 | html: 'Render',
42 | view: 'Source',
43 | },
44 | },
45 | lang: 'en',
46 | },
47 | }
48 |
49 | ## gets user config
50 |
51 | > Snapshot 1
52 |
53 | {
54 | hashFiles: 'all',
55 | project: {
56 | author: 'Test Author',
57 | base: '/assets/',
58 | name: 'test',
59 | version: '1.0.0',
60 | },
61 | ui: {
62 | color: 'teal',
63 | favicon: '/favicon.ico',
64 | format: 'json',
65 | information: [
66 | {
67 | label: 'Version',
68 | value: '1.0.0',
69 | },
70 | {
71 | format: Function format {},
72 | label: 'Built on',
73 | type: 'time',
74 | value: Date 2000-01-01 00:00:00 UTC {},
75 | },
76 | ],
77 | labels: {
78 | panels: {
79 | html: 'Render',
80 | view: 'Source',
81 | },
82 | },
83 | lang: 'en',
84 | },
85 | }
86 |
--------------------------------------------------------------------------------
/test/unit/lib/snapshots/get-config.spec.js.snap:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pangolinjs/core/e4d157cc1a476e845c4e87a1f452831e119b0289/test/unit/lib/snapshots/get-config.spec.js.snap
--------------------------------------------------------------------------------
/test/unit/lib/snapshots/get-path.spec.js.md:
--------------------------------------------------------------------------------
1 | # Snapshot report for `test/unit/lib/get-path.spec.js`
2 |
3 | The actual snapshot is saved in `get-path.spec.js.snap`.
4 |
5 | Generated by [AVA](https://avajs.dev).
6 |
7 | ## gets paths
8 |
9 | > Snapshot 1
10 |
11 | {
12 | inputComponents: 'test/src/components',
13 | inputDocs: 'test/src/docs',
14 | inputPublic: 'test/public',
15 | outputAssets: 'test/public/assets',
16 | outputBuild: 'test/dist',
17 | outputStatic: 'test/static',
18 | }
19 |
--------------------------------------------------------------------------------
/test/unit/lib/snapshots/get-path.spec.js.snap:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pangolinjs/core/e4d157cc1a476e845c4e87a1f452831e119b0289/test/unit/lib/snapshots/get-path.spec.js.snap
--------------------------------------------------------------------------------
/test/unit/lib/snapshots/get-pkg.spec.js.md:
--------------------------------------------------------------------------------
1 | # Snapshot report for `test/unit/lib/get-pkg.spec.js`
2 |
3 | The actual snapshot is saved in `get-pkg.spec.js.snap`.
4 |
5 | Generated by [AVA](https://avajs.dev).
6 |
7 | ## gets package.json
8 |
9 | > Snapshot 1
10 |
11 | {
12 | author: {
13 | name: 'Test Author',
14 | },
15 | name: 'test',
16 | type: 'module',
17 | version: '1.0.0',
18 | }
19 |
--------------------------------------------------------------------------------
/test/unit/lib/snapshots/get-pkg.spec.js.snap:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pangolinjs/core/e4d157cc1a476e845c4e87a1f452831e119b0289/test/unit/lib/snapshots/get-pkg.spec.js.snap
--------------------------------------------------------------------------------
/test/unit/lib/snapshots/merge-objects.spec.js.md:
--------------------------------------------------------------------------------
1 | # Snapshot report for `test/unit/lib/merge-objects.spec.js`
2 |
3 | The actual snapshot is saved in `merge-objects.spec.js.snap`.
4 |
5 | Generated by [AVA](https://avajs.dev).
6 |
7 | ## shallow merges
8 |
9 | > Snapshot 1
10 |
11 | {
12 | foo: 'bar',
13 | hello: 'galaxy',
14 | }
15 |
16 | ## deep merges
17 |
18 | > Snapshot 1
19 |
20 | {
21 | species: {
22 | me: 'Human',
23 | you: 'Togruta',
24 | },
25 | }
26 |
--------------------------------------------------------------------------------
/test/unit/lib/snapshots/merge-objects.spec.js.snap:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pangolinjs/core/e4d157cc1a476e845c4e87a1f452831e119b0289/test/unit/lib/snapshots/merge-objects.spec.js.snap
--------------------------------------------------------------------------------
/test/unit/lib/snapshots/pangolin-head-extension.spec.js.md:
--------------------------------------------------------------------------------
1 | # Snapshot report for `test/unit/lib/pangolin-head-extension.spec.js`
2 |
3 | The actual snapshot is saved in `pangolin-head-extension.spec.js.snap`.
4 |
5 | Generated by [AVA](https://avajs.dev).
6 |
7 | ## creates markup in dev mode
8 |
9 | > Snapshot 1
10 |
11 | ''
12 |
13 | ## creates markup in prod mode
14 |
15 | > Snapshot 1
16 |
17 | `␊
18 | ␊
19 | 
Pangolin.js Core
2 |
3 | Framework for design system development with Nunjucks, Sass, and JavaScript.
4 |
5 | Requires [Node.js 15 or higher](https://nodejs.org).
6 |
7 | ## Create a new project with `npx`
8 |
9 | ```bash
10 | npx @pangolinjs/cli create project-name
11 | ```
12 |
13 | ## Usage
14 |
15 | ### Start dev server
16 |
17 | ```bash
18 | npm run dev
19 | ```
20 |
21 | ### Build files for production
22 |
23 | ```bash
24 | npm run build
25 | ```
26 |
27 | ### Export for static file hosting
28 |
29 | ```bash
30 | npm run docs
31 | ```
32 |
33 | ### Lint CSS and JavaScript
34 |
35 | ```bash
36 | npm run lint:css
37 | npm run lint:js
38 | ```
39 |
40 | For more information take a look at the [Pangolin.js docs](https://pangolinjs.org).
41 |
42 | ## Contribute
43 |
44 | ```bash
45 | # Build UI
46 | npm run prepare
47 |
48 | # Testing
49 | npm run test:unit
50 |
51 | # Linting
52 | npm run lint:css
53 | npm run lint:js
54 | ```
55 |
56 | ## License
57 |
58 | [Hippocratic License 2.1](https://firstdonoharm.dev)
59 |
--------------------------------------------------------------------------------
/ava.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | verbose: true,
3 | files: [
4 | 'test/unit/**/*.spec.*'
5 | ],
6 | require: [
7 | './test/unit/setup/date.js'
8 | ]
9 | }
10 |
--------------------------------------------------------------------------------
/bin/pangolin-core.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | import { green } from 'kleur/colors'
4 |
5 | import build from '../commands/build.js'
6 | import dev from '../commands/dev.js'
7 | import docs from '../commands/docs.js'
8 | import inspect from '../commands/inspect.js'
9 |
10 | const command = process.argv[2]
11 | const context = process.cwd()
12 |
13 | switch (command) {
14 | case 'dev':
15 | dev({ context })
16 | break
17 | case 'build':
18 | build({ context })
19 | break
20 | case 'docs':
21 | docs({ context })
22 | break
23 | case 'inspect':
24 | inspect({ context, command: process.argv[3] })
25 | break
26 | default:
27 | console.log('Please use one of the following commands:')
28 | console.log(' - dev')
29 | console.log(' - build')
30 | console.log(' - docs')
31 | console.log(' - inspect (dev|build)')
32 | console.log(`\nFor example: ${green('pangolin-core dev')}`)
33 | }
34 |
--------------------------------------------------------------------------------
/commands/build.js:
--------------------------------------------------------------------------------
1 | import fs from 'fs/promises'
2 | import webpack from 'webpack'
3 |
4 | import copyDir from '../lib/copy-dir.js'
5 | import getConfig from '../lib/get-config.js'
6 | import getPaths from '../lib/get-paths.js'
7 | import getWebpackConfig from '../webpack/build.js'
8 |
9 | /**
10 | * Build production assets
11 | * @param {Object} options Options
12 | * @param {string} options.context Working directory
13 | */
14 | export default async function ({ context }, callback) {
15 | process.env.NODE_ENV = 'production'
16 |
17 | const config = await getConfig({ context })
18 | const paths = getPaths({ context })
19 | const webpackConfig = await getWebpackConfig({ context })
20 |
21 | if (typeof config.webpack === 'function') {
22 | config.webpack(webpackConfig)
23 | }
24 |
25 | const webpackCompiler = webpack(webpackConfig.toConfig())
26 |
27 | await fs.rm(paths.outputAssets, { recursive: true, force: true })
28 | await fs.rm(paths.outputBuild, { recursive: true, force: true })
29 |
30 | webpackCompiler.run(async (error, stats) => {
31 | if (error) {
32 | console.error(error)
33 | }
34 |
35 | console.log(stats.toString({
36 | children: false,
37 | chunks: false,
38 | colors: true,
39 | modules: false
40 | }))
41 |
42 | if (stats.hasErrors()) {
43 | // Exit with a non-zero status code to allow CI tools to report errors.
44 | process.exit(1)
45 | }
46 |
47 | await copyDir(paths.inputPublic, paths.outputBuild)
48 |
49 | callback?.(error, { stats, webpackConfig })
50 | })
51 | }
52 |
--------------------------------------------------------------------------------
/commands/dev.js:
--------------------------------------------------------------------------------
1 | import fs from 'fs/promises'
2 | import webpack from 'webpack'
3 | import WebpackDevServer from 'webpack-dev-server'
4 |
5 | import createFractalInstance from '../lib/create-fractal-instance.js'
6 | import getConfig from '../lib/get-config.js'
7 | import getPaths from '../lib/get-paths.js'
8 | import getPort from '../lib/get-port.js'
9 | import getWebpackConfig from '../webpack/dev.js'
10 |
11 | /**
12 | * Run development server
13 | * @param {Object} options Options
14 | * @param {string} options.context Working directorys
15 | */
16 | export default async function ({ context }) {
17 | process.env.NODE_ENV = 'development'
18 |
19 | const config = await getConfig({ context })
20 | const paths = getPaths({ context })
21 | const host = '0.0.0.0'
22 | const webpackPort = await getPort(8080)
23 | const fractalPort = await getPort(webpackPort + 1)
24 | const webpackConfig = await getWebpackConfig({ context, host, port: webpackPort })
25 |
26 | if (typeof config.webpack === 'function') {
27 | config.webpack(webpackConfig)
28 | }
29 |
30 | const publicPath = webpackConfig.output.get('publicPath')
31 |
32 | const webpackServerOptions = {
33 | static: [
34 | {
35 | publicPath,
36 | watch: false
37 | }
38 | ],
39 | client: {
40 | logging: 'none'
41 | },
42 | proxy: {
43 | [`!${publicPath}**`]: `http://${host}:${fractalPort}`
44 | }
45 | }
46 |
47 | const webpackCompiler = webpack(webpackConfig.toConfig())
48 | const webpackServer = new WebpackDevServer(webpackServerOptions, webpackCompiler)
49 |
50 | await fs.rm(paths.outputAssets, { recursive: true, force: true })
51 | await webpackServer.start(webpackPort, host)
52 |
53 | const fractalServerOptions = {
54 | sync: true,
55 | port: fractalPort,
56 | syncOptions: {
57 | ui: false,
58 | ghostMode: false,
59 | watchOptions: {
60 | // webpack-dev-server already includes reloading, so we ignore
61 | // everything except Fractal-related files.
62 | ignored: file => !/\.(njk|yml|json|md)$/.test(file)
63 | }
64 | }
65 | }
66 |
67 | const fractalInstance = await createFractalInstance({ context, publicPath })
68 | const fractalServer = fractalInstance.web.server(fractalServerOptions)
69 |
70 | fractalServer.on('error', error => {
71 | fractalInstance.cli.console.error(error.message)
72 | })
73 |
74 | fractalServer.on('stopped', async () => {
75 | await webpackServer.stop()
76 |
77 | // Exit the whole application after the webpack-dev-server has been closed.
78 | process.exit()
79 | })
80 |
81 | process.on('SIGINT', () => {
82 | // webpack-dev-server will be closed after the Fractal server has been stopped.
83 | // See above listener for the Fractal 'stopped' event.
84 | fractalServer.stop()
85 | })
86 |
87 | fractalServer.start()
88 | }
89 |
--------------------------------------------------------------------------------
/commands/docs.js:
--------------------------------------------------------------------------------
1 | import fs from 'fs/promises'
2 |
3 | import build from './build.js'
4 | import createFractalInstance from '../lib/create-fractal-instance.js'
5 | import getAssetFiles from '../lib/get-asset-files.js'
6 | import getPaths from '../lib/get-paths.js'
7 |
8 | /**
9 | * Create docs for static hosting
10 | * @param {Object} options Options
11 | * @param {string} options.context Working directory
12 | */
13 | export default async function ({ context }) {
14 | process.env.NODE_ENV = 'production'
15 |
16 | const paths = getPaths({ context })
17 |
18 | build({ context }, async (_, { stats, webpackConfig }) => {
19 | const publicPath = webpackConfig.output.get('publicPath')
20 | const assets = getAssetFiles({ files: Object.keys(stats.compilation.assets) })
21 |
22 | const fractalInstance = await createFractalInstance({ context, publicPath, assets })
23 | const fractalConsole = fractalInstance.cli.console
24 | const fractalBuilder = fractalInstance.web.builder()
25 |
26 | await fs.rm(paths.outputStatic, { recursive: true, force: true })
27 |
28 | fractalBuilder.on('progress', (completed, total) => {
29 | fractalConsole.update(`Fractal: Exported ${completed} of ${total} items.`, 'info')
30 | })
31 |
32 | fractalBuilder.on('error', error => {
33 | fractalConsole.error(error.message)
34 | })
35 |
36 | fractalBuilder.build().then(stats => {
37 | if (stats.errorCount) {
38 | fractalConsole.error('Fractal build failed.')
39 | process.exit(1)
40 | }
41 |
42 | fractalConsole.success('Fractal build completed.')
43 | })
44 | })
45 | }
46 |
--------------------------------------------------------------------------------
/commands/inspect.js:
--------------------------------------------------------------------------------
1 | import { green } from 'kleur/colors'
2 | import util from 'util'
3 |
4 | import webpackBuild from '../webpack/build.js'
5 | import webpackDev from '../webpack/dev.js'
6 | import getConfig from '../lib/get-config.js'
7 |
8 | /**
9 | * Print webpack configuration
10 | * @param {Object} options Options
11 | * @param {string} options.context Working directory
12 | * @param {'dev'|'build'} options.command Command to inspect
13 | */
14 | export default async function ({ context, command }) {
15 | const config = await getConfig({ context })
16 |
17 | let webpackOptions
18 |
19 | switch (command) {
20 | case 'dev':
21 | process.env.NODE_ENV = 'development'
22 | webpackOptions = webpackDev
23 | break
24 | case 'build':
25 | process.env.NODE_ENV = 'production'
26 | webpackOptions = webpackBuild
27 | break
28 | default:
29 | console.log('Please specify one of the following arguments:')
30 | console.log(' - dev')
31 | console.log(' - build')
32 | console.log(`\nFor example: ${green('npm run inspect -- dev')}`)
33 | return
34 | }
35 |
36 | webpackOptions = await webpackOptions({ context })
37 |
38 | if (typeof config.webpack === 'function') {
39 | config.webpack(webpackOptions)
40 | }
41 |
42 | webpackOptions = util.inspect(webpackOptions.toConfig(), {
43 | colors: true,
44 | depth: null
45 | })
46 |
47 | console.log(webpackOptions)
48 | }
49 |
--------------------------------------------------------------------------------
/lib/copy-dir.js:
--------------------------------------------------------------------------------
1 | import fs from 'fs/promises'
2 | import path from 'path'
3 |
4 | /**
5 | * Copy directory (similar to `cp -r`)
6 | * @param {string} source Source path
7 | * @param {string} destination Destination path
8 | */
9 | export default async function copyDir (source, destination) {
10 | try {
11 | await fs.access(destination)
12 | } catch {
13 | await fs.mkdir(destination, { recursive: true })
14 | }
15 |
16 | const files = await fs.readdir(source)
17 |
18 | for (const file of files) {
19 | const filePath = path.join(source, file)
20 | const fileDest = path.join(destination, file)
21 | const fileStats = await fs.lstat(filePath)
22 |
23 | if (fileStats.isDirectory()) {
24 | await copyDir(filePath, fileDest)
25 | } else {
26 | await fs.copyFile(filePath, fileDest)
27 | }
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/lib/create-fractal-instance.js:
--------------------------------------------------------------------------------
1 | import fractal from '@frctl/fractal'
2 | import mandelbrot from '@frctl/mandelbrot'
3 | import nunjucks from '@frctl/nunjucks'
4 |
5 | import getConfig from './get-config.js'
6 | import getPaths from './get-paths.js'
7 | import mergeObjects from './merge-objects.js'
8 | import PangolinHeadExtension from './pangolin-head-extension.js'
9 |
10 | /**
11 | * Create Fractal instance
12 | * @param {Object} options Options
13 | * @param {string} options.context Working directory
14 | * @param {string} options.publicPath Path to assets
15 | * @param {{js:string[], css:string[]}} options.assets Asset filenames
16 | */
17 | export default async function ({ context, publicPath, assets }) {
18 | const paths = getPaths({ context })
19 | const config = await getConfig({ context })
20 | const instance = fractal.create()
21 |
22 | const theme = mandelbrot({
23 | skin: config.ui.color,
24 | favicon: config.ui.favicon,
25 | format: config.ui.format,
26 | lang: config.ui.lang,
27 | information: config.ui.information,
28 | labels: config.ui.labels,
29 | panels: ['notes', 'info', 'html', 'view', 'context']
30 | })
31 |
32 | const engineOptions = mergeObjects(config.engine, {
33 | extensions: {
34 | PangolinHeadExtension: new PangolinHeadExtension({ publicPath, assets })
35 | }
36 | })
37 |
38 | const engine = nunjucks(engineOptions)
39 |
40 | instance.set('project.title', config.project.name)
41 | instance.set('project.author', config.project.author)
42 | instance.set('project.version', config.project.version)
43 |
44 | instance.components.engine(engine)
45 | instance.components.set('ext', '.njk')
46 | instance.components.set('path', paths.inputComponents)
47 |
48 | instance.docs.engine(engine)
49 | instance.docs.set('path', paths.inputDocs)
50 |
51 | instance.web.theme(theme)
52 | instance.web.set('static.path', paths.inputPublic)
53 | instance.web.set('builder.dest', paths.outputStatic)
54 |
55 | return instance
56 | }
57 |
--------------------------------------------------------------------------------
/lib/format-ip.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Format IP
3 | *
4 | * Convert `0.0.0.0` and `::` to localhost.
5 | * @param {string} ip IP address
6 | * @returns {string} Formatted IP
7 | */
8 | export default function (ip) {
9 | if (ip === '0.0.0.0' || ip === '::') {
10 | return 'localhost'
11 | }
12 |
13 | return ip
14 | }
15 |
--------------------------------------------------------------------------------
/lib/generate-asset-filename.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Generate file-loader options
3 | * @param {Object} options Options
4 | * @param {'img'|'video'|'audio'|'font'} options.type File type
5 | * @param {boolean|'imported'|'all'} [options.hash] Hash file names
6 | * @returns {string} file-loader options
7 | */
8 | export default function ({ type, hash }) {
9 | return `${type}/${hash ? '[contenthash:8]' : '[name]'}[ext]`
10 | }
11 |
--------------------------------------------------------------------------------
/lib/generate-output-filename.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Generate output filename
3 | * @param {Object} options Options
4 | * @param {'js'|'css'} options.type File type
5 | * @param {boolean|'imported'|'all'} [options.hash] Hash file names
6 | * @returns {string} File name
7 | */
8 | export default function ({ type, hash }) {
9 | return `${type}/${hash === 'all' ? '[contenthash:8]' : '[name]'}.${type}`
10 | }
11 |
--------------------------------------------------------------------------------
/lib/get-asset-files.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Generate asset links
3 | * @param {Object} options Options
4 | * @param {string[]} options.files All emitted assets
5 | * @returns {{js:string[], css:string[]}} Asset links
6 | */
7 | export default function ({ files }) {
8 | const js = files.filter(file => file.endsWith('.js'))
9 | const css = files.filter(file => file.endsWith('.css'))
10 |
11 | return { js, css }
12 | }
13 |
--------------------------------------------------------------------------------
/lib/get-config.js:
--------------------------------------------------------------------------------
1 | import path from 'path'
2 |
3 | import getPkg from './get-pkg.js'
4 | import mergeObjects from './merge-objects.js'
5 |
6 | const defaultConfig = {
7 | project: {
8 | name: 'Pangolin.js',
9 | author: null,
10 | version: null,
11 | base: '/assets/'
12 | },
13 |
14 | ui: {
15 | color: {
16 | accent: '#ff721f',
17 | complement: '#000',
18 | links: '#7f390f'
19 | },
20 | favicon: '/favicon.ico',
21 | format: 'json',
22 | lang: 'en',
23 | information: [
24 | {
25 | label: 'Version',
26 | value: null
27 | },
28 | {
29 | label: 'Built on',
30 | value: new Date(),
31 | type: 'time',
32 | format: value => value.toISOString().slice(0, -8).replace('T', ' ')
33 | }
34 | ],
35 | labels: {
36 | panels: {
37 | html: 'Render',
38 | view: 'Source'
39 | }
40 | }
41 | },
42 |
43 | hashFiles: 'imported'
44 | }
45 |
46 | /**
47 | * Get config
48 | * @param {Object} options Options
49 | * @param {string} [options.context] Working directory
50 | * @returns {Promise