Discussions

Ask a Question
ANSWERED

How to use bootstrap 4

In the dev version of bootstrap 4 docs there is a section of using webpack, given spike is also based on webpack, how can I make sites that use bootstrap css and js? I don't mind using scss instead sss. I'm quite noob on webpack, so detailed explanation is welcomed

Error

I keep getting this error: ✗ ERROR { ModuleBuildError: Module build failed: SyntaxError: Expecting Unicode escape sequence \uXXXX (1:691) at Parser.pp$4.raise (/Users/nathaliesicard/workspace/coinsayer/node_modules/acorn-globals/node_modules/acorn/dist/acorn.js:2488:13) at Parser.pp$7.readWord1 (/Users/nathaliesicard/workspace/coinsayer/node_modules/acorn-globals/node_modules/acorn/dist/acorn.js:3319:16) at Parser.pp$7.readWord (/Users/nathaliesicard/workspace/coinsayer/node_modules/acorn-globals/node_modules/acorn/dist/acorn.js:3338:19) at Parser.pp$7.readToken (/Users/nathaliesicard/workspace/coinsayer/node_modules/acorn-globals/node_modules/acorn/dist/acorn.js:2731:17) at Parser.pp$7.nextToken (/Users/nathaliesicard/workspace/coinsayer/node_modules/acorn-globals/node_modules/acorn/dist/acorn.js:2724:13) at Parser.pp$7.next (/Users/nathaliesicard/workspace/coinsayer/node_modules/acorn-globals/node_modules/acorn/dist/acorn.js:2684:8) at Parser.pp$3.parseExprOp (/Users/nathaliesicard/workspace/coinsayer/node_modules/acorn-globals/node_modules/acorn/dist/acorn.js:1808:12) at Parser.pp$3.parseExprOps (/Users/nathaliesicard/workspace/coinsayer/node_modules/acorn-globals/node_modules/acorn/dist/acorn.js:1793:15) at Parser.pp$3.parseMaybeConditional (/Users/nathaliesicard/workspace/coinsayer/node_modules/acorn-globals/node_modules/acorn/dist/acorn.js:1774:19) at Parser.pp$3.parseMaybeAssign (/Users/nathaliesicard/workspace/coinsayer/node_modules/acorn-globals/node_modules/acorn/dist/acorn.js:1750:19) at runLoaders (/Users/nathaliesicard/workspace/coinsayer/node_modules/webpack/lib/NormalModule.js:195:19) at /Users/nathaliesicard/workspace/coinsayer/node_modules/loader-runner/lib/LoaderRunner.js:364:11 at /Users/nathaliesicard/workspace/coinsayer/node_modules/loader-runner/lib/LoaderRunner.js:230:18 at context.callback (/Users/nathaliesicard/workspace/coinsayer/node_modules/loader-runner/lib/LoaderRunner.js:111:13) at tryCatchReject (/Users/nathaliesicard/workspace/coinsayer/node_modules/when/lib/makePromise.js:845:30) at runContinuation1 (/Users/nathaliesicard/workspace/coinsayer/node_modules/when/lib/makePromise.js:804:4) at Rejected.when (/Users/nathaliesicard/workspace/coinsayer/node_modules/when/lib/makePromise.js:625:4) at Pending.run (/Users/nathaliesicard/workspace/coinsayer/node_modules/when/lib/makePromise.js:483:13) at Scheduler._drain (/Users/nathaliesicard/workspace/coinsayer/node_modules/when/lib/Scheduler.js:62:19) at Scheduler.drain (/Users/nathaliesicard/workspace/coinsayer/node_modules/when/lib/Scheduler.js:27:9) id: 'a1b80172' } ✗ ERROR { ModuleBuildError: Module build failed: SyntaxError: Expecting Unicode escape sequence \uXXXX (1:691) at Parser.pp$4.raise (/Users/nathaliesicard/workspace/coinsayer/node_modules/acorn-globals/node_modules/acorn/dist/acorn.js:2488:13) at Parser.pp$7.readWord1 (/Users/nathaliesicard/workspace/coinsayer/node_modules/acorn-globals/node_modules/acorn/dist/acorn.js:3319:16) at Parser.pp$7.readWord (/Users/nathaliesicard/workspace/coinsayer/node_modules/acorn-globals/node_modules/acorn/dist/acorn.js:3338:19) at Parser.pp$7.readToken (/Users/nathaliesicard/workspace/coinsayer/node_modules/acorn-globals/node_modules/acorn/dist/acorn.js:2731:17) at Parser.pp$7.nextToken (/Users/nathaliesicard/workspace/coinsayer/node_modules/acorn-globals/node_modules/acorn/dist/acorn.js:2724:13) at Parser.pp$7.next (/Users/nathaliesicard/workspace/coinsayer/node_modules/acorn-globals/node_modules/acorn/dist/acorn.js:2684:8) at Parser.pp$3.parseExprOp (/Users/nathaliesicard/workspace/coinsayer/node_modules/acorn-globals/node_modules/acorn/dist/acorn.js:1808:12) at Parser.pp$3.parseExprOps (/Users/nathaliesicard/workspace/coinsayer/node_modules/acorn-globals/node_modules/acorn/dist/acorn.js:1793:15) at Parser.pp$3.parseMaybeConditional (/Users/nathaliesicard/workspace/coinsayer/node_modules/acorn-globals/node_modules/acorn/dist/acorn.js:1774:19) at Parser.pp$3.parseMaybeAssign (/Users/nathaliesicard/workspace/coinsayer/node_modules/acorn-globals/node_modules/acorn/dist/acorn.js:1750:19) at runLoaders (/Users/nathaliesicard/workspace/coinsayer/node_modules/webpack/lib/NormalModule.js:195:19) at /Users/nathaliesicard/workspace/coinsayer/node_modules/loader-runner/lib/LoaderRunner.js:364:11 at /Users/nathaliesicard/workspace/coinsayer/node_modules/loader-runner/lib/LoaderRunner.js:230:18 at context.callback (/Users/nathaliesicard/workspace/coinsayer/node_modules/loader-runner/lib/LoaderRunner.js:111:13) at tryCatchReject (/Users/nathaliesicard/workspace/coinsayer/node_modules/when/lib/makePromise.js:845:30) at runContinuation1 (/Users/nathaliesicard/workspace/coinsayer/node_modules/when/lib/makePromise.js:804:4) at Rejected.when (/Users/nathaliesicard/workspace/coinsayer/node_modules/when/lib/makePromise.js:625:4) at Pending.run (/Users/nathaliesicard/workspace/coinsayer/node_modules/when/lib/makePromise.js:483:13) at Scheduler._drain (/Users/nathaliesicard/workspace/coinsayer/node_modules/when/lib/Scheduler.js:62:19) at Scheduler.drain (/Users/nathaliesicard/workspace/coinsayer/node_modules/when/lib/Scheduler.js:27:9) id: 'a1b80172' } ⚠ WARNING { ModuleBuildError: Module build failed: SyntaxError: Expecting Unicode escape sequence \uXXXX (1:691) at Parser.pp$4.raise (/Users/nathaliesicard/workspace/coinsayer/node_modules/acorn-globals/node_modules/acorn/dist/acorn.js:2488:13) at Parser.pp$7.readWord1 (/Users/nathaliesicard/workspace/coinsayer/node_modules/acorn-globals/node_modules/acorn/dist/acorn.js:3319:16) at Parser.pp$7.readWord (/Users/nathaliesicard/workspace/coinsayer/node_modules/acorn-globals/node_modules/acorn/dist/acorn.js:3338:19) at Parser.pp$7.readToken (/Users/nathaliesicard/workspace/coinsayer/node_modules/acorn-globals/node_modules/acorn/dist/acorn.js:2731:17) at Parser.pp$7.nextToken (/Users/nathaliesicard/workspace/coinsayer/node_modules/acorn-globals/node_modules/acorn/dist/acorn.js:2724:13) at Parser.pp$7.next (/Users/nathaliesicard/workspace/coinsayer/node_modules/acorn-globals/node_modules/acorn/dist/acorn.js:2684:8) at Parser.pp$3.parseExprOp (/Users/nathaliesicard/workspace/coinsayer/node_modules/acorn-globals/node_modules/acorn/dist/acorn.js:1808:12) at Parser.pp$3.parseExprOps (/Users/nathaliesicard/workspace/coinsayer/node_modules/acorn-globals/node_modules/acorn/dist/acorn.js:1793:15) at Parser.pp$3.parseMaybeConditional (/Users/nathaliesicard/workspace/coinsayer/node_modules/acorn-globals/node_modules/acorn/dist/acorn.js:1774:19) at Parser.pp$3.parseMaybeAssign (/Users/nathaliesicard/workspace/coinsayer/node_modules/acorn-globals/node_modules/acorn/dist/acorn.js:1750:19) at runLoaders (/Users/nathaliesicard/workspace/coinsayer/node_modules/webpack/lib/NormalModule.js:195:19) at /Users/nathaliesicard/workspace/coinsayer/node_modules/loader-runner/lib/LoaderRunner.js:364:11 at /Users/nathaliesicard/workspace/coinsayer/node_modules/loader-runner/lib/LoaderRunner.js:230:18 at context.callback (/Users/nathaliesicard/workspace/coinsayer/node_modules/loader-runner/lib/LoaderRunner.js:111:13) at tryCatchReject (/Users/nathaliesicard/workspace/coinsayer/node_modules/when/lib/makePromise.js:845:30) at runContinuation1 (/Users/nathaliesicard/workspace/coinsayer/node_modules/when/lib/makePromise.js:804:4) at Rejected.when (/Users/nathaliesicard/workspace/coinsayer/node_modules/when/lib/makePromise.js:625:4) at Pending.run (/Users/nathaliesicard/workspace/coinsayer/node_modules/when/lib/makePromise.js:483:13) at Scheduler._drain (/Users/nathaliesicard/workspace/coinsayer/node_modules/when/lib/Scheduler.js:62:19) at Scheduler.drain (/Users/nathaliesicard/workspace/coinsayer/node_modules/when/lib/Scheduler.js:27:9) id: 'a1b80172' } The project still gets built. This is what my app.js file looks like: const htmlStandards = require('reshape-standard') const cssStandards = require('spike-css-standards') const jsStandards = require('spike-js-standards') const pageId = require('spike-page-id') const env = process.env.SPIKE_ENV module.exports = { devtool: 'source-map', ignore: ['**/layout.html', '**/_*', '**/.*', 'readme.md', 'yarn.lock', 'package-lock.json'], matchers: { css: '*(**/)*.scss' }, module: { rules: [ { test: /\.scss/, use: [{ loader: 'sass-loader' }] } ] }, reshape: htmlStandards({ locals: (ctx) => { return { pageId: pageId(ctx), foo: 'bar' } }, minify: env === 'production' }), postcss: cssStandards({ minify: env === 'production', warnForDuplicates: env !== 'production' }), babel: jsStandards() } Any idea of what is going on?
ANSWERED

Best editor for .sgr files?

Hi, normally i use PhpStorm but there is not syntax highlighting for .sgr files. Can you recommend an editor or IDE? thanks Jan
ANSWERED

External Libraries

Hi Quick question: I would like to add an external js library into the project (like a jquery plugin). but any file i put in the assets/js folder doesnt get picked up. is there a way to tell webpack all the entries from js and the output files? i have done something like this before in my react projects if i have multiple apps: entry : { 'dashboard': APP_DIR + '/Dashboard.js', 'client': APP_DIR + '/Client.js' }, output : { path : BUILD_DIR, filename : '[name].bundle.js' }, module : { loaders : [ { test : /\.js?/, include : APP_DIR, loader : 'babel' } ] } Thank you!
ANSWERED

using scss-files

How can I include bootstrap scss-files to project? (I don't want completely change to "scss-only mode", just import bootstrap scss-files and keep using Spike CSS Standard stack) Thanks!
ANSWERED

Multi language sites

I'm looking at using a static site generator for an internal project, but it will need to be translated into a few languages. Do you have a plan for how to support multi language sites as part of Spike?
ANSWERED

How to replace SugarML in reshape-standard

Hi i have been trying to to use regular html to write my layouts and html files and trying to follow the the reshape-standard doc by adding parser: false in my app.json reshape: (ctx) => { return htmlStandards({ webpack: ctx, parser: false, locals: { pageId: pageId(ctx), foo: 'bar' } }) }, when i keep the files as .sgr i get an error... when i rename my layout.sgr and index.sgr to .html it compiles but it does not actually do the layout parts Any help would be greatly appriciated
ANSWERED

How to process css import from npm in spike app

down vote favorite I'm trying to include purecss from npm into my spike app, which throws the loader error, can someone let me know the way to import css file from npm index.js: import purecss from 'purecss' ERROR: { ModuleParseError: Module parse failed: /Users/loganathans/projects/spike-app/node_modules/purecss/build/pure-min.css Unexpected token (11:76) app.js: const htmlStandards = require('reshape-standard') const cssStandards = require('spike-css-standards') const jsStandards = require('spike-js-standards') const pageId = require('spike-page-id') const path = require('path') const env = process.env.NODE_ENV module.exports = { devtool: 'source-map', matchers: { html: '*(**/)*.sgr', css: '*(**/)*.css' }, ignore: ['**/layout.sgr', '**/_*', '**/.*', 'readme.md', 'yarn.lock'], reshape: htmlStandards({ locals: (ctx) => { return { pageId: pageId(ctx), foo: 'bar' } }, minify: env === 'production' }), postcss: cssStandards({ parser: false, path: path.join(__dirname, './assets/css/css_modules'), minify: env === 'production', warnForDuplicates: env !== 'production' }), babel: jsStandards() }

SourceMap for CSS?

Is it possible to generate a source map for CSS? I tried adding `sourceMap: true,` to the loader, but that didn't seem to do anything.

Build Menu programmatically

I'd like to build a list of links automatically from every file in a subfolder of /Views. For example, in a hypothetical /views/category/index.sgr, I'd like to build a list of links by enumerating all the files in that folder. e.g. /Views/category/page1.sgr /Views/category/page2.sgr /Views/category/pageX.sgr Any suggestions on how to accomplish this?