Semantic-UI-Meteor

Semantic-UI-Meteor copied to clipboard

It looks like we might be in a bit of a bind with issues piling up and only one active contributor @flemay (who is quite busy).

Would anyone be interested in helping wrestle some of the open issues in this integration? Feel free to e-mail me or reply in this thread.

Before I saw this just now I was considering offering to be one and still am. I have several suggestions I need to compile together regarding improvements but I definitely want to get some issues out of the way that are preventing me from developing my clients' websites. It will take me some time to learn the package but I'm totally down.

@fvpDev I could help you get on board with the package :)

Kewlio...yeah not sure with which version #80 started happening but I've only noticed that issue since upgrading to Meteor 1.4+

I didn't test the package with Meteor 1.4+ so maybe there is work to do around the new APIs if any. I can show you one day how to deploy a new version of the package.

Kk, feel free to email me whenever

Also, for #80 it randomly worked once or twice for me, without me changing anything really..

Actually, @flemay, the sooner you email me the better. I really need to help get this working ASAP, and each day I spend waiting is time wasted and money not earned for me. Thnx for understanding

I do understand but I am quite busy during the week. You can have a look at https://github.com/flemay/Semantic-UI-Meteorize. This is what I use to create the packages.

https://github.com/flemay/Semantic-UI-Meteorize/issues/2

@jlukic Hi Jack, would you mind to add @fvpDev to Atmosphere and semantic-ui-meteor and semantic-ui-data-meteor repos please? :)

Just wanted to say again, @flemay, thanks for having that video conference with me; it was quite helpful!

@fvpDev no worries! Thanks to you for helping out with Semantic :) I have a problem pushing the version 2.2.4...it fails badly :(

@flemay Are you still actively contributing to this project? I might be interested in helping out getting it to the latest version but I might require some assistance to get started.

Thank you @klausklapper for following up here. @flemay @jlukic any guidance you could provide to the community would be greatly appreciated. We'd looooove to see a new version up on Atmosphere soon so we can take advantage of the new features and important defect fixes made to the core framework!

@klausklapper @myktra I am not actively contributing to this project but I am happy to give you some guidance so other people can contribute to it. :) The 2 packages are generated by https://github.com/flemay/Semantic-UI-Meteorize. My concern here is that maybe Meteor has changed a lot and would require some changes to the generator.

Hey guys. Looking to get some discussion going again on updating this package, or potentially also looking at other approaches to adding semantic-ui to Meteor. cc @levithomason.

The 2 packages are generated by https://github.com/flemay/Semantic-UI-Meteorize. My concern here is that maybe Meteor has changed a lot and would require some changes to the generator.

Yep, I also think the design is overkill here. In order to get Semantic UI ported to Meteor, it requires Docker, a custom build tool, and publishing two separate packages. Props to @flemay for getting this running initially, but I think it is too heavy to maintain.

We're using Semantic-UI-Meteor at work right now and we need to update. I've taken a look around this repo, but again, I feel we're too constrained to really maintain it with ease.

I've got a branch open that currently removes the Meteor package and just installs semantic-ui-less. There is a single bash script that converts it to a Meteor friendly format. Are there any other real benefits to justify the tooling and maintenance involved with the current atmosphere package? Or, should we simplify this a bit?

Also worthy to note; this package was developed before Meteor had proper support for npm packages. That was introduced in 1.3.

I agree, the current approach for the support is somewhat overkill. We have settled for a customized solution that sounds somewhat similar to what @levithomason has written up. Maybe it might be worth to consider replacing this design with something new.

If the approach could allow us to use LESS to override some of the core CSS values (like colors and typography) I think that's mostly good enough.

Perhaps secondarily since my application would be serving the customized UI bits directly (though could push to a CDN of course), I'd love to not have to deploy code and styles for widgets I'm not using, which I believe was functionality supported by this package.

Hey @levithomason are you able to share your bash script?

@levithomason I totally agree that it is heavy to maintain and really hope Meteor has changed enough to simplify everything. I know that years ago, a package would not be able to access a local files therefore that is why there are 2 packages so 1 package can read the semantic files from another package. There is the whole process or renaming semantic files and updating them to please meteor.

The last but not least, the use of docker is not required. I simply love docker and was easing the process of generating the packages without having to install meteor/nodejs on my laptop. Also, it should work fine on a CI server that has only docker.

Thank you all for trying to find a better (and also up to date) approach. :)

I was talking to @jlukic and he has also opted for an ugly bash script in his more recent use of SUI in Meteor.

I haven't checked on this script in a while, so no promises that it won't blow up your machine 😅

It needs parameterized a bit, BASE_SOURCE_DIR and BASE_TARGET_DIR are hard coded. Also needs some testing in the right context. However, I believe this is a good start.

#!/usr/bin/env sh
set -e

##############################################################################
# Update Semantic UI
#
# Using semantic-ui-less in node_modules, this script will:
#   - copy assets to our project
#   - copy definitions/themes to our project
#   - make meteor happy:
#     - rename all files *.less (SUI uses *.variables, *.overrides, *.config)
#     - replace all references to those ^ files

BASE_SOURCE_DIR="node_modules/semantic-ui-less"
BASE_TARGET_DIR="client/imports/styles/semantic-ui-less"

# Updates references to SUI *.variables, *.overrides, *.config files
# to Meteor friendly *.less extensions
parse_less_file() {
  local file="$1"

  cat "$file" | \
  sed -e "s/\.variables/\.variables\.less/g" | \
  sed -e "s/\.overrides/\.overrides\.less/g" | \
  sed -e "s/\.config/\.config\.less/g"
}

# Copies all *.variables, *.overrides, *.config files from the node_module
# to our project directory, renaming and parsing as it goes
update_less_files_in_dir() {
  local dir="$1"
  echo "... updating $dir less files"
  target_dir="$BASE_TARGET_DIR/$dir"
  source_dir="$BASE_SOURCE_DIR/$dir"

  # clear our copy of this dir
  rm -rf "$target_dir"

  # copy all style files over, updating names and references for meteor
  for file in $(find "$source_dir" -name "*.less" -o -name "*.overrides" -o -name "*.variables"); do
    # move the file from the source to the destination
    target_filename=$(echo "$file" | sed -e "s=$source_dir=$target_dir=")
    # append *.less if not present
    target_filename=${target_filename%.less}.less
    target_dirname=$(dirname "$target_filename")

    # ensure target dirs exists
    mkdir -p "$target_dirname"

    # output to new filename with .less appended
    parse_less_file "$file" > "$target_filename"
  done
}

# update directories
update_less_files_in_dir "definitions"
update_less_files_in_dir "themes/default"

# update assets
echo "... updating public assets"
fonts_dir="public/fonts/semantic-ui"
images_dir="public/images/semantic-ui"

rm -rf "$fonts_dir"
mkdir -p "$fonts_dir"
cp -R "$BASE_SOURCE_DIR"/themes/default/assets/fonts/* "$fonts_dir"

rm -rf "$images_dir"
mkdir -p "$images_dir"
cp -R "$BASE_SOURCE_DIR"/themes/default/assets/images/* "$images_dir"

# update root files
echo "... updating root files"
parse_less_file "$BASE_SOURCE_DIR/theme.less" > "$BASE_TARGET_DIR/theme.less"

echo "... Done!"

Thanks @levithomason! It really illustrates how specific of a configuration Meteor requires.

Is there still an easy way for newbies to use the current version of Semantic-UI with meteor? Meanwhile, I tried all types of integration except the script above (for which I just lack the necessary skill) and all of them either fail completely or stuck at v2.2.6...

Maybe I can somehow assist to implement a new integration method for the upcoming meteor 1.6?

@aikonplus unfortunately, no. I should also note that this script is only concerned with the LESS and assets. JS is not included, but wouldn't be much to add.

Currently, the easiest path IMHO would be to build your theme outside of Meteor and then import the compiled CSS. 😕

We're beginning work over at https://github.com/openmastery/semantic-ui-theme that will make building and integrating Semantic UI themes into any framework much easier. However, this is a long run and not likely to be done soon.

@levithomason Any updates on this? I am struggling to get Semantic UI React + meteor going.

Seems as though this project is at a standstill. Support for updating the package to the latest version of Semantic UI for Meteor seems non-existent.