Hello, [Webpack 4](https://github.com/webpack/webpack/releases/tag/v4.0.0) has been released for a while now and it comes with great new stuff that Spike could definitely benefit from. Are you considering doing an update any time soon? Cheers
Posted by William R J Ribeiro 2 months ago
We need tailwind to work on a current project, but as I know tailwind needs to be pushed at the start of the postcss plugins. ``` const htmlStandards = require('reshape-standard'); const cssStandards = require('spike-css-standards'); const jsStandards = require('spike-js-standards'); const env = process.env.SPIKE_ENV; const Records = require('spike-records'); const MarkdownIt = require('markdown-it'); const path = require('path'); const md = new MarkdownIt(); var tailwindcss = require('tailwindcss')('./tailwind.js'); const css = cssStandards( { minify: env === 'production', warnForDuplicates: env !== 'production' } ) css.plugins.push(tailwindcss); const locals = { md: md.render.bind(md), mediaUrl: 'https://media.graphcms.com' } const apiUrl = 'https://api-uswest.graphcms.com/v1/cjj6ximdp01bv01ggojsg4m64/master' module.exports = { devtool: 'source-map', ignore: ['**/layout.html', '**/_*', '**/.*', '*.md', 'yarn.lock', 'package-lock.json', 'Jenkinsfile'], reshape: htmlStandards({ root: path.join(__dirname, 'views'), locals: (ctx) => locals, minify: env === 'production' }), postcss: css, babel: jsStandards(), plugins: [ new Records({ addDataTo: locals, three: { data: { foo: 'bar' } }, projects: { graphql: { url: apiUrl, query: `{ projects { id, name, description } }` }, transform: (res) => res.data.projects } }) ] } ``` We currently have this setup, with the Tailwind loaded and pushed to the css standards stack. But Tailwind keeps on spitting out an error. It would be nice for a static site generator to atleast support Tailwind CSS! Thanks
Posted by Michael Thomas 5 months ago
I want to import vendor files from node_modules to use in my project, but after hours researching, i couldn't get it to work. According to the Spike docs (spike.readme.io/docs/vendor) using the vendor property i can import the standalone files to my static project, but should it work with files from node_modules? The ideia is import the files without bundle them into one, preferably into an assets folder.
Posted by Lucas 8 months ago
Hi if have got the follow html. <div translate="no" typeof="schema:PostalAddress"> <span property="schema:name">{{ store.store.name }}</span><br /> <span property="schema:streetAddress">{{ store.store.address.street }}</span><br /> <span property="schema:postalCode">{{ store.store.address.zipcode }}</span> <span property="schema:addressLocality">{{ store.store.address.place }}</span><br /> <span property="schema:addressCountry">{{ store.store.address.country }}</span><br /> {{ store.store.address.phone }}<br /> <a href="mailto:{{ store.store.address.email }}">{{ store.store.address.email }}</a><br /> </div> I put a space between 2 elements tag when i compile te spaces are removed. this is also if i put there What do i need to do to get this fixed
Posted by Michel Lubbers 9 months ago
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?
Posted by Ana Black 10 months ago
Hi, there, and thanks for creating Spike. I'm liking it and going down the path of using it to create a design system, but it seems to be dead slow to recompile, even just using the default template and starting a watch. I want to figure out whether I can configure the devserver to do hot reloading, too, but are there any tricks to make compiles faster? I'm talking about even a single line of added CSS. Thanks.
Posted by Josh Schneider 11 months ago
As I'm loading the Postcss in my app.js like this: postcss: cssStandards({ parser: sugarss, minify: env === 'production', warnForDuplicates: env !== 'production', appendPlugins: [lost(), tipsy(), animation()] }) How can I at the same time turn off the 'quotes' formatting of 'retext-smartypants' that's included there by default? Thanks
Posted by Slava S 12 months ago
Hi. My team and I are working on a big site and we want to enforce branding, including choice of colors. I know how to make a hex color into a variable, but is there a way to pop up a menu of all (color) variables defined in the CSS, and choose one from the menu? Thanks
Posted by avram about a year ago
Hi, First of all, excellent product! I've been using Root and not I'm addicted to Spike. I would like to know how would be the best way to handle forms? Like a Contact Form? What would be the best approach? How do you guys handle this? Frontend / Backend?
Posted by Ben Legault about a year ago
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?
Posted by Justin H about a year ago
Hi there, I'm a Middleman user taking a look at Spike as the JS/Webpack platform looks really intriguing. One feature that I haven't been able to find in the docs is something like dynamic pages (e.g. https://middlemanapp.com/advanced/dynamic-pages/). Is this something that Spike supports, if not, is there another way it could be accomplished?
Posted by Tim about a year ago
Hi, two more questions: 1. Is it possible to put a block inside a block? I tried something like this and it doesn't work: block(name='content') h1 Hello world! block(name='subcontent1') h1 Hello Olli! block(name='subcontent2') 2. Is it possible to include something depending on a variable. I tried something like this and it doesn't work: include(src='includes/lectures/{{ name }}.sgr') The background is the following: I would like to generate my site https://ob.cs.hm.edu/ using spike. Code can be found at https://github.com/obcode/ob.cs.hm.edu/tree/spike. Some pages under /lecture have the same structure, but different content. I would like to use one layout and "inject" the content. I can do it via locals, but some parts are larger than just one value.
Posted by Oliver Braun about a year ago