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 2 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 5 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 6 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 7 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 8 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 8 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 9 months 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
Hi, another question. The current code can be found at https://github.com/obcode/ob.cs.hm.edu/tree/spike I want to generate some pages in a subfolder `lectures`. These files start with extends(src='../withPortfolio.sgr') `withPortfolio.sgr` starts with extends(src='layout.sgr') Without subdirs everything is working, but now I get: ModuleBuildError: Module build failed: Error: ENOENT: no such file or directory, open '.../views/lectures/layout.sgr' which is quite clear for me, but I am looking for a solution how I can generate pages top-level and inside a subfolder `lectures` with the same layouts.
Posted by Oliver Braun about a year ago
I would like to move my website from hakyll to spike. I have some js-files from a wrapbootstrap-theme who are not copied to the output folder. What am I missing/doing wrong? The code is at https://github.com/obcode/ob.cs.hm.edu/tree/spike. I have started with `spike new` using the default template. Files which are not copied are found in assets/js and assets/cubeportfolio/js. The file `assets/js/app.js` is referenced from withing views/layout.sgr. Can anyone give me some help, please.
Posted by Oliver Braun about a year ago