nodivide / astrum Goto Github PK

Tell us about the issue you are experiencing

TypeError in main.js -> undefined is not an object (evaluating 'this.content.pages.length') at isLoadingPage at line 468

What behaviour would you expect?

How can this issue be replicated?

Initiate a new project with the actual version. I added a Color Scheme and an element for Buttons.

Screenshots / Screencast

Konsole Safari

Your environment

Platform: macOS
OS Version: Sierra
Browser: Safari 10.0 (12602.1.40.4)
Node Version: 4.4.4
NPM Version: 3.10.3
Astrum Version: 1.5.15

Would be great to have a default sass file included to override the base styles.css file and also control how it's minified, its output name and output directory. Without adding my own CSS I've had to un-minify and then manually edit elements in the minified CSS.

Some elements of the theme don't get applied properly as well. For example, I was expecting the classes ndpl-component__sample-missing ndpl-info to use my theme color but it didn't. Font family should also be able to be controlled via the theme. Opacity of the colors would be great too for things like the highlight_color instead of HEX value.

Overall, much finer control of the master theme styles would be a huge help.

Tell us about the issue you are experiencing

Running astrum -v or astrum --version does not return the current version of astrum installed locally.

What behaviour would you expect?

I would expect that these commands would list the current version of Astrum.

How can this issue be replicated?

Run: $ astrum -v or $ astrum --version

Screenshots / Screencast

Your environment

Platform: Mac
OS Version: OS X Yosemite (10.10.5)
Node Version: v4.2.6
NPM Version: v3.5.3
Astrum Version: current version

Tell us about the issue you are experiencing

Astrum is not scrolling to the correct component when the pattern library is visited with a component in the URL hash. This appears to be an issue when testing Astrum with a large number of components and groups.

What behaviour would you expect?

Astrum should scroll to the specified component.

How can this issue be replicated?

@RyanHavoc Check the pattern library for SBL.

Screenshots / Screencast

N/A

When adding a new component that requires a dark background for the preview, if you disable the code sample Astrum does not add "sample_dark_background": true into the data.json

expected

(As a side note, the first question might need rewording as the background isn't just applied to the code sample)

Tell us about the issue you are experiencing

I added an image to my markup which is not hosted on the same domain and it doesn't load.

What behaviour would you expect?

Images should be loaded without a restriction of host/cross domain.

How can this issue be replicated?

I used this example:

<img src="//unsplash.it/300/300/?random" class="employee-img" alt="Frank" width="300" height="300" />

Your environment

Platform: Debian/Apache
Node Version: 5.10.1
NPM Version: 3.8.3
Astrum Version: 1.5.15

I tried to initialize astrum as recommended. But everytime I try to init I run into this error:
Error: Error: ENOENT: no such file or directory, lstat '/Users/-/${HOME}/.npm-packages/lib/node_modules/astrum/_template' /Users/-/.npm-packages/lib/node_modules/astrum/manager/utils.js:31 throw(new Error(chalk.red("No data.json file found in " + _this.$config.path ))); Error: No data.json file found in ./pattern-library at Object.module.exports.init (/Users/-/.npm-packages/lib/node_modules/astrum/manager/utils.js:31:19) at /Users/-/.npm-packages/lib/node_modules/astrum/manager/utils.js:58:27 at /Users/-/.npm-packages/lib/node_modules/astrum/node_modules/fs-extra/lib/copy/copy.js:23:21 at FSReqWrap.oncomplete (fs.js:82:15)
My System:
Mac OS X El Capitan 10.11.4
Node 4.4.7
NPM 3.10.3

Great work and you have a wonderful Demo to view.

Is it possible that the Demo gets an own repository here on github to view the source of the Demo as an example to use Astrum?

Tell us about the issue you are experiencing

When disconnecting from the internet, Astrum stops working because all the assets are loaded from CDNs.

What behaviour would you expect?

When offline, Astrum works as usual.

How can this issue be replicated?

Disconnect from the internet and load the application.

Screenshots / Screencast

http://i.imgur.com/CJZXz7L.png

Your environment

Platform: Arch Linux
OS Version: All packages up to date
Node Version: 6.3.1
NPM Version: 3.10.5
Astrum Version: 1.5.17

Tell us about the issue you are experiencing

When developing responsive components, I'm resizing the browser window a lot. Waiting for 1-2 seconds for the message "Realigning pattern library" to go away gets annoying.

What behaviour would you expect?

No message or other transition. Modern CSS allows a page to be responsive without rebuilding the page.

How can this issue be replicated?

Open a pattern library and resize the browser window.

Screenshots / Screencast

Your environment

Platform: Arch Linux
OS Version: all packages up to date
Node Version: 6.3.1
NPM Version: 3.10.5
Astrum Version: 1.5.17

Tell us about the issue you are experiencing

running:

D:\src\app>astrum new buttons/default

gives:

C:\Users\bent\AppData\Roaming\npm\node_modules\astrum\manager\utils.js:174
        return this.$data.groups.findIndex(function(item) {
                                 ^
TypeError: undefined is not a function
    at Object.module.exports.getGroupIndex (C:\Users\bent\AppData\Roaming\npm\node_modules\astrum\manager\utils.js:174:34)
    at Object.module.exports.componentExists (C:\Users\bent\AppData\Roaming\npm\node_modules\astrum\manager\utils.js:374:32)
    at Object.module.exports.validateComponent (C:\Users\bent\AppData\Roaming\npm\node_modules\astrum\manager\utils.js:363:18)
    at Object.<anonymous> (C:\Users\bent\AppData\Roaming\npm\node_modules\astrum\manager\astrum-new.js:38:38)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Function.Module.runMain (module.js:501:10)
    at startup (node.js:129:16)

What behaviour would you expect?

New component created

How can this issue be replicated?

Running: D:\src\app>astrum new */*

Screenshots / Screencast

Your environment

Platform: Windows 10 Pro
OS Version: 1511
Node Version: 0.12.2
NPM Version: 2.7.4
Astrum Version: 1.6.2

*Added: This is a brand new install of astrum

Thanks!

Any plans to introduce the ability to create more than just half-width and full-width components?

Would be awesome to see 20 & 25% sizes supported too 👍

Hi there, great work!

I was wondering if there is a problem with bundling Astrum with a node server? It might make installation and usage a little easier, and make astrum a more 'complete' solution

Would it be possible to have the option to enable or disable a group or individual component? Would help greatly to be able to turn things on or off as needed as things progress without having to delete and then rebuild/re-add later.

Using custom styled pre tags breaks astrum's pre tag styles, not sure if you can do much about that.

I've added a class to my pre tags and used that as the selector in css, not ideal as it's not how I'll be selecting it in production but it works just as well

First off, Love this project! Very simple, cant wait to see what you guys have in store.

Had a question about the loading/building.

In my local setup, I have significantly reduced the timeouts set during the page loading process in app/main.js because I was getting a bit annoyed at waiting 2 seconds for every refresh.

Is there a downside to this while the components are loaded? So far I haven't seen any issues, but I also don't have many components set up in there yet.

Appreciate any feedback!
Best

Would it be possible to attach a variable name in addition to a hex code when creating a color within the color component type?

I was looking for something like that but oriented for generic docs purpose.

Just need to attach the markdown files to be rendered. Similar to docpress.

Do you think that could be possible?

Is it possible to use RGBA values as well as HEX values in the colors array?

For instance, in a rails app, we'd use ERB, or HAML, or SLIM. I suppose we could just write using the templating language of our choice in the .html file? Not sure what implications that'd have for syntax highlighting though.

Hi, I am really impressed of your work and like to get a bit deeper in it.

We are doing most of our jobs currently within meteor and react.

Therefor we are using React StoryBook (https://github.com/kadirahq/react-storybook) to build, test and describe our UI components.

How would you differ to that tool? There are some more like StoryBook e.g. UI Harness (http://www.uiharness.com/start) or Chromatic (https://github.com/meteor/chromatic)

What do you think about them - what would be the benefit in using Astrum (even in addition) ?

Thanks for some feedback
Tom

As Designer or Developer I would like to see how my components behave when I resize the viewport.

The left side navigation of Astrum takes space that could break the design of components which rely on the whole viewport width.

Please add a functionality to hide sidebar temporary.

I tried creating a new component with the example command.

I get this error

x@y [~/LSL/astrum/press] $ astrum new buttons/default
/usr/local/lib/node_modules/astrum/manager/utils.js:160
        return this.$data.groups.findIndex(function(item) {
                                 ^
TypeError: undefined is not a function
    at Object.module.exports.getGroupIndex (/usr/local/lib/node_modules/astrum/manager/utils.js:160:34)
    at Object.module.exports.componentExists (/usr/local/lib/node_modules/astrum/manager/utils.js:354:32)
    at Object.module.exports.validateComponent (/usr/local/lib/node_modules/astrum/manager/utils.js:343:18)
    at Object.<anonymous> (/usr/local/lib/node_modules/astrum/manager/astrum-new.js:38:38)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Function.Module.runMain (module.js:501:10)
    at startup (node.js:129:16)

not sure what's up

I installed using npm -g as usual.

Tell us about the issue you are experiencing

I am on windows 10, I can't seem to get init to work, should it work without a path if I am in the folder I want it to be installed in?

What behaviour would you expect?

How can this issue be replicated?

Screenshots / Screencast

This is all that has been created in the directory:

Your environment

Platform: Windows
OS Version: 10
Node Version: 6.0.0
NPM Version:3.8.6
Astrum Version: NPM installed this morning

To streamline communication designers define clear names for colours, so everybody is talking about the same. Also these names may be used as CSS variables.

Take the following LESS code for example:

@red: #d51130;
@grey-sky: #f3f3f3;
@grey-steel: #bac2c4;
@grey-dark: #6c7475;

@border-color: @grey-steel;
@brand-color: @red;
@brand-color-alt: darken(@red, 50%);

Please provide a way to add those information to a colour in the content type. I would wish to define the following information for a colour:

• colour
• complimentary/shade colour
• name
• variable name

Additional aliases could be described in an extra group to make the difference clear.

Sorry, i'm not able (or too blind) to add a label to this issue :(

Tell us about the issue you are experiencing

I have edited /pages/intro.md to replace the default content with a simple paragraph. However, the original content is still showing. Grepping every file in the project for the original content comes up empty, so it must be a cacheing issue. I've refreshed the page in Chrome, hard refreshed it, and even restarted the http-server. I opened the page in Incognito Mode and I can see my changes, but it still hasn't updated in my regular browser.

What behaviour would you expect?

On save, changes to a page should be reflected on the served project on a refresh of the page, or at least on killing the server and restarting it.

Your environment

Platform: OS X
OS Version: 10.11.4
Node Version: 5.3.0
NPM Version: 3.5.2
Astrum Version: 1.5.16

Is it possible to include a component in an other component?

so for example:
you have an image component and would like to implement this in a slider component (looping through a json array with the datas for each image component)

Tell us about the issue you are experiencing

When setting options to new components, the terminal text is the same color as the terminal background making it unreadable without highlighting the text.

What behaviour would you expect?

I expected the text to be a different color than the terminal's background color or virtually any color other than black.

How can this issue be replicated?

Using the default OS X terminal with default colors and entering the astrum new <path name> command

Screenshots / Screencast

Your environment

Platform:
OS Version: 10.11.5
Node Version:
NPM Version:
Astrum Version:

The subtitle "Pattern Library" would be nice to be flexible in case you don't want to use that description or leave off entirely.

What is the recommended best practice to use a custom set of fonts other than Typekit, etc.?

Just a simple UX/readability issue here –

Without a max-width for rendered markdown on Pages and full-width Components, each line of text runs very long on medium/large screens (150+ characters per line vs the recommended 50-75 characters).

The folks at Devbridge have a couple great features on their "Living Styleguide" that would be awesome to have in Astrum.

On hover and next to each of the components is a stacked icon that you can grab and resize the component to see how it works responsively. They also have a set of breakpoints in the header that you can use to toggle the entire page with.

Check out the demo and see what you think:
http://styleguide.devbproto.com/styleguide/#1

Tell us about the issue you are experiencing

I want to use the framework to do patterns für Templating-Code of an CMS. There are CMS-Variables in the code so that there is no possibility to show a preview.

What behaviour would you expect?

I expect an parameter like "show_component_preview" to define wheter there is a preview or not. Also it would be nice to set "show code" for default.

Your environment

Platform: Windows
OS Version: 10
Node Version: 5.11
NPM Version: 3.8.6
Astrum Version: 1.5.12

BG
Thomas

Finish the Getting Start step,
then open index.html file saw the loading and will run forever.

Try to deploy to Firebase will get error deploy.

Is there anyway to show in the browser?

open console get this four errror.
Failed to load resource: net::ERR_FILE_NOT_FOUND
vue-resource.min.js:7 XMLHttpRequest cannot load file:///Users/zhengyen.hsieh/GitHub/Astrum/pattern-library/data.json?cb=Mon%20Jul%2004%202016%2015:41:38%20GMT+0800%20(CST). Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.(anonymous function) @ vue-resource.min.js:7
undefined:1 Uncaught (in promise) Object
main.min.js:1 Uncaught TypeError: Cannot read property 'length' of undefined

Hi,

This is not really an issue, but a problem I'm having. I want to use JS files with my pattern library: material design lite, jquery and kendo and although I'm including them in the data.json file, it doesn't seem to be working.

This is my file:

"assets": {
"css": [
"https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css",
"https://fonts.googleapis.com/icon?family=Material+Icons",
"../css/kendo.common-material.min.css",
"../css/kendo.material.min.css",
"../css/main.css"

    ],
    "js": [
      "../js/jquery.min.js",
      "../js/material.min.js",
      "../js/kendo.all.min.js",
      "../js/utils.js"
    ]
}

Platform:
OS Version: OS X El Capitan

Tell us about the issue you are experiencing

I add a color pattern use Command Line and deploy to server then page get this message.

"Add your component markup to /components/branding/color-palette/markup.html"

and then I add this to data.json file.

"group": "branding",
"name": "color-palette",
"title": "ccccccc",
"colors": [
"#4c4c4c",
"#7d8284",
"#a6b1b5",
"#e6eaf2",
"#FFFFFF"
]

But It still show the markup message, I check the markup.html file it's empty. is there any about markup reference to add color or solve that message?

Tell us about the issue you are experiencing

Currently, I'm experiencing an issue where I can't get my custom stylesheet and javascript files to work. Maybe it's me I guess. This doesn't have any issue with Bootstrap though. Does it really possible to use multiple stylesheet and javascript files?

What behaviour would you expect?

I just want to get my custom stylesheet & javascript files to work. Apart from that I'm currently loving Astrum.

How can this issue be replicated?

Nil

Screenshots / Screencast

Nil

Your environment

Platform: Mac OS X
OS Version: OS X El Capitan
Node Version: 6.2.2
NPM Version: 3.9.5
Astrum Version: 1.5.16

Tell us about the issue you are experiencing

the markdown has two different types of dashes which won't be parseable by a console for the script in the following section:
https://github.com/NoDivide/astrum#component-types

astrum new branding/color-palette —-type colors

I just watched your video demo and Astrum looks very interesting, the only thing which I noticed was the reloading of the page. Is it possible to use with with something like browsersync for live reloading?

Thanks

Tell us about the issue you are experiencing

jQuery not load for the pattern library. I received the error on the web console. I've included the jQuery library on the data.json

What behaviour would you expect?

It should be loaded via data.json

How can this issue be replicated?

Nil

Screenshots / Screencast

Here are a couple of screenshots on the error and my data.json file:

Web console error
data.json file

Updated

I did a check whether jQuery is loaded and I received this: 3 but the pattern library doesn't get the jQuery.

Your environment

Platform: Mac
OS Version: OS X El-Capitan
Node Version: 6.2.2
NPM Version: 3.9.5
Astrum Version: 1.5.17

Tell us about the issue you are experiencing

errors with creating first group in brand new project

What behaviour would you expect?

creating new group without throwing errors

How can this issue be replicated?

(in public folder)
sudo npm install -g astrum
astrum init ./pattern-library
astrum new buttons/default

Screenshots / Screencast

Your environment

Platform: OSX
OS Version: 10.11.5
Node Version: v0.12.7
NPM Version: 3.8.3
Astrum Version: 1.5.12

I was a little reluctant to post this because I don't really feel like I can give a lot of info on this, but I just downloaded Astrum on two of my Windows machines (both running 64-bit Windows 7) and while it seemed to install just fine with npm install astrum -g, running astrum init ./public/pattern-library causes the terminal to just hang, for as long as I'll let it, with no sort of errors or anything given. I've tried a few variations of the init command:

• in an empty directory
• in an existing project directory
• with the public/pattern-library folders already made (and empty)
• without the public/pattern-library folders pre-made
• with the path specified absolutely (eg astrum init c:\web\astrum-sample)

Actually, all of the astrum commands seem to produce the same result :( Running astrum or just astrum init produces the same hung-terminal effect.

If there are any other details I can provide I would be happy to! I'm not sure if there's some way I can tell Node on my machine to give me some actual error messages? In any event, if there's anything else I can do, I'd be happy to help. If there's something I'm missing and this is a user-error, please let me know D: Astrum looks like an excellent tool and I'm really excited to try it out!

Tell us about the issue you are experiencing

When I share my local build with someone (via IP address on the same network), it is looking for the files on there machine.

What behaviour would you expect?

For the person who I shared my local build with, to see my local build.

Your environment

Astrum Version: 1.5.12

Tell us about the issue you are experiencing

If I create the folder with mkdir pattern-library then run astrum init pattern-library or try to run astrum init . I get the following error:

/usr/local/lib/node_modules/astrum/manager/utils.js:41
                throw(new Error(chalk.red('Pattern library has already been initialized.')));
                ^

Error: Pattern library has already been initialized.
    at /usr/local/lib/node_modules/astrum/manager/utils.js:41:23
    at FSReqWrap.cb [as oncomplete] (fs.js:212:19)

What behaviour would you expect?

I would have expected that the cli would initialize Astrum within the folder if it already exists or that it would be possible to initialize Astrum in the current directory.

How can this issue be replicated?

1. Make a folder:
   $ mkdir projects/pattern-library
2. run astrum init:
   $ astrum init projects/pattern-library

Screenshots / Screencast

Your environment

Platform: Mac
OS Version: OS X Yosemite (10.10.5)
Node Version: v4.2.6
NPM Version: v3.5.3
Astrum Version: Current version

Failed to load resource: Die angeforderte URL wurde auf diesem Server nicht gefunden.

Wondering if there's a way for groups to have their own separate pages instead of the entire guide on one long page?

If not currently, would be a great feature to have.

Starting my first guide with Astrum and so far it's a god-send. Thank you!

Displaying a component in its full glory often requires a good amount of placeholder content (lorem ipsum, placehold.it images, fixed-height divs to diagram layouts). This placeholder content can clutter up the code sample, making it less readable for users.

It'd be great to optionally hide portions of code from the sample. This could be as simple as wrapping it in a comment flag.

Code in markup.html:

<div class="component">
  <div class="component__body">
    <!-- your content here -->

    <!-- astrum-hidden-start -->
      <p>Health goth irony ramps keffiyeh. Fingerstache tacos deep v yr readymade, skateboard tattooed listicle hammock sriracha blue bottle humblebrag cliche. Meh gochujang scenester, kitsch selvage franzen keytar master cleanse small batch four dollar toast cred fingerstache gluten-free ethical. Flexitarian mumblecore tofu, synth gentrify slow-carb whatever iPhone pug tousled. Normcore meh YOLO iPhone, deep v pickled wayfarers beard keffiyeh PBR&B venmo freegan mixtape DIY. Readymade photo booth tilde, tote bag heirloom tacos normcore cold-pressed gentrify man braid four dollar toast try-hard sriracha. Thundercats paleo shoreditch synth.</p>
      <img src="image.com">
      <button>Click Here</button>
    <!-- astrum-hidden-end -->
  </div>
</div>

Code sample in UI:

<div class="component">
  <div class="component__body">
    <!-- your content here -->
  </div>
</div>

Loving Astrum so far! Keep up the good work!

PS - apologies for not adding the Feature Request label, think it's a permissions thing.

Tell us about the issue you are experiencing

The pattern library is not loading... I'm stuck at 'Building pattern library' screen.

What behaviour would you expect?

It supposed to load the pattern library and suddenly I'm experiencing. I noticed after I edited the intro.md file. Before it works smoothly.

How can this issue be replicated?

Nil

Screenshots / Screencast

Here's a screencast on it.

Your environment

Platform: Mac
OS Version: OS X El Capitan
Node Version: 6.2.2
NPM Version: 3.9.5
Astrum Version: 1.5.16

When building my guide, I'm finding that I have more than 1 sub-level deep I'd like to go. For instance- Global Elements > Typography > Headings. Right now you can't go that deep.

Would the ability to add a divider "title" be of interest? That way larger groups could be visually grouped together without affecting the overall structure of the system.

Top work folks! I do have one quick question...

Is there a reason as to why the loading screen is shown on resize? The only reason I ask is because it is hard to see how components behave on browser resize.