I want to load local 3rd party css (eg font-awesome icons) as part of my styleguide. As many components uses the same CSS, I want it to be loaded automatically and included as part of the static build.
I settled on using mini-css-extract-plugin to accompolish this, but styleguidist maintainer #sapegin basically told me that I have no idea what I am doing and stop complaining to him without providing any help. So I was hoping the stack-overflow community would give me a hand in pointing out what is the correct way:
styleguidist discussion: https://github.com/styleguidist/react-styleguidist/pull/985#issuecomment-389422909
My github repo demonstrating the three ways of doing it:
https://github.com/bugzpodder/styleguidist-local-css-example/tree/master
master: uses mini-css-extract-plugin + require config, build and devserver works as expected.
require: I couldn't get it to work without mini-css-extract-plugin
template: devserver works, but build does not. The only workwaround I can think of is to use publicPath and copy the css there, but publicPath isn't allowed unless you dangerouslyupdatewebpackconfig https://github.com/styleguidist/react-styleguidist/pull/956
Related
I just want to ask what is the best approach to integrate sass/scss on ember project?
Currently my project is in pod structure and I just import style.scss on main app.scss under styles folder.
Is it fine or there is a better approach?
--- app
---- pods
------- home
---------- template.hbs
---------- controller.js
---------- style.scss
---- styles
------- app.scss
Then in app.scss styles imported look like this
#import "./app/pods/home/style.scss";
I haven't used pods in years - because (like expecting controllers to be removed) - I was told that there was going to be a new file layout system. Since hearing that / I've heard bits and pieces of conversation that lead me to believe that pods aren't really a go-to for new projects.
That being said, I share your desire to have a nice file structure. I'd love to 'drag' a folder from one project to another / and just have all the parts of the component copy over.
Since we have the app.scss - (you said you're using sass) - / that kinda acts as the index.
I include resets and mixins and a bunch of stuff for setup. - so, that's not really podish... and maybe there are 'page' level kinda layout... which doesn't really fit either... - so, what it comes down to is really 'components', right?
ember-component-css is pretty cool - but it also has some opinions that could clash.
There's this - https://github.com/justtal/ember-cli-sass-pods - but it's 4 years old / (but so are pods) - so, it might still work great.
Because there isn't a really clear path here... I just create a component folder in styles/components/component-name.styl - and then in my styles/components.styl I #import 'component-name.styl - and then in my app.styl I import the components...
In my case / I actually like to use the cascade - and I need the files to all to be combined - in order. I can't have some of it in the vendor file.
It's not ideal (just because I have to create each file explicitly and register it) - but I can't afford to just keep wishing there was a better file layout.
Instead of fuzzy searching component-name > template
I just search template > component-name
¯\_(ツ)_/¯
I wonder which style will cause me less pain in future transitions. They'll offer codemods to help / but they can't account for unique configurations.
I'd suggest asking this in the official discuss forum. You'll get the real answers there. : )
https://discuss.emberjs.com/
app/styles directory, is the home for stylesheets like CSS, SASS, or LESS.
Folders like vendor and public that can also hold many other files of the developer's choice.
So in your case if you wish to have separate scss file for each pod,
you can put it in the place as you mentioned. (else)
have it under app/styles/pod1.scss and import it under .ember-cli-build.js -> app.import('app/styles/pod1.scss')
[References]
You can get the detailed view of Project layouts, Stylesheet compilation, Assets and dependencies below
Project layouts
Stylesheet compilation
Assets and dependencies
Besides ember-component-css there is ember-css-modules.
Both addons try to achieve about the same goal, however I really prefer ember-css-modules.
That addon has an addon called ember-css-modules-sass. Both together will easily allow you to write one sass file per component.
You just place a styles.scss file in your component pod (app/components/my-component/styles.scss and then use local-class="my-class" instead of class="my-class" in your template.
Your classes in your scss will be automatically namespaces.
I'm essentially just remixing the code available here for a side project: https://github.com/aws-samples/aws-ai-qna-bot.git
Problem: I'm trying to insert a centered logo in the toolbar between the app drawer and the logout button. Typically I could accomplish this pretty easily with vanilla HTML and CSS, but this project is leveraging Vue.js and Vuetify, which I'm doing my best to get myself up to speed with.
I've referenced the following documents, including the README.md in the git repo:
https://vuetifyjs.com/en/components/images
https://v2.vuejs.org/v2/guide/single-file-components.html
File path: qna-bot-template/website/js/admin.vue
<template lang="pug">
v-app
v-navigation-drawer(temporary v-model="drawer" app)
v-toolbar(flat)
v-list
v-list-tile
v-list-tile-title.title Tools
v-divider
v-list(dense three-line subheader)
v-list-tile(v-for="(page,key) in pages" :key="key"
#click="drawer=false"
:href="page.href"
:id="'page-link-'+page.id"
:target="page.target || '_self'")
v-list-tile-avatar
v-icon(color="primary") {{page.icon}}
v-list-tile-content
v-list-tile-title {{page.title}}
v-list-tile-sub-title {{page.subTitle}}
v-list-group( prepend-icon="info" value="true" color="primary")
v-list-tile(slot="activator")
v-list-tile-title QnABot Help
v-list-tile
v-list-tile-content
v-list-tile-title Version: {{Version}}
v-list-tile-title BuildDate: {{BuildDate}}
v-list-tile
v-list-tile-content
v-list-tile-title
a(href="https://amazon.com/qnabot" target="_blank") General Instructions / QnABot Blog Post
v-list-tile-title
a(href="https://aws.amazon.com/blogs/machine-learning/creating-virtual-guided-navigation-using-a-question-and-answer-bot-with-amazon-lex-and-amazon-alexa/" target="_blank") Guided Navigation using QnABot
v-list-tile-title
a(href="https://aws.amazon.com/blogs/machine-learning/create-a-questionnaire-bot-with-amazon-lex-and-amazon-alexa/" target="_blank") Create a questionnaire using QnABot
v-toolbar(app fixed)
v-toolbar-side-icon.primary--text(
id="nav-open"
#click.stop="drawer = !drawer"
)
v-toolbar-title
v-breadcrumbs
v-breadcrumbs-item(href='#/edit') {{$store.state.info.StackName}}:{{$store.state.user.name}}
v-breadcrumbs-item {{page}}
v-spacer
v-toolbar-items
v-btn.primary--text(flat
id="logout-button"
#click="logout"
v-if="login") LogOut
v-container(fluid id="workspace")
v-layout(column)
v-flex
router-view
v-footer
</template>
So far I've tried following the following syntax, which I added right after the v-spacer toward the bottom of the wrapping template tags.
v-container
v-img(:src="/abc/xyz")
and this doesn't seem to be working.
Lastly I'll add that since this environment is deployed to an EC2 instance (don't think you can deploy it locally to prototype via vue serve or at least I haven't been able to), I'm having to do this very roundabout way of prototyping by deploying this S3 bucket where the webpages are built to, then I make this webpack listener which will see whenever I modify a file. Then I can refresh the index.html that is built in the S3 bucket to see my changes. Extremely clunky workflow, I know, but I've never worked in an environment like this so I'm not sure if there's a better way, plus the readme provided in the github repo is very light on details for how to modify the default layout.
Any help/pointers would be greatly appreciated.
If you are using a relative path to an image use v-img(src="/abc/xyz"). The ':' before src is shorthand for v-bind which you use for data-binding. So if your image path was dynamically generated you'd use :src="dynamicImage"' but if you are hard coding the path use src="/pathto/image.jpg". This might help.
I am currently in the process of designing and refining a landing page. Over the time, many things have been added and handling the amount of sections and modals is not as it easy as it used to be.
Coming straight to my question: Is there a simple solution to use templates in your normal web design flow to create static web sites. I do not need the advantages of a static site generator, like also compiling my sass or minifying my js files. Interpolation and a config file are also not needed nor wanted. Do you know any system that only allows me to split my html file into multiple components which will then be saved in different html files?
P.S. I am not looking for a Javascript template engine. The creation should happen once and produce a normal html file.
You can use a template engine like pug with client tool.
Example with pug:
Step 1: Install pug-cli
npm install -g pug-cli
Step 2: Code html using pug syntax (very easy to learn). Ex: Split home page file into multiple components (header, footer in folder template_parts):
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
title Document
body
include template-parts/header.pug
h1 Home page
include template-parts/footer.pug
Step 3: Run pug-cli to auto convert html code
$ pug -w ./ -o ./html -P
Change ./ after -w by location of pug files, ./html after -o by location of html files after convert.
Without using PHP includes, I'm not sure if this can be accomplished without using some form of JS Templating engine as:
The majority of the web's content has a simple and declarative way to load itself. Not so for HTML
You should check out:
Metalsmith
An extremely simple, pluggable static site generator.
Handlebars
Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.
If you're using GULP/GRUNT in your workflow anyway there are include plugins:
npmjs search for 'gulp include'
npmjs search for 'grunt include'
Best solution for that is to use server side rendering as the previous answare said.
But checkout this attaribute powered by w3schools it might help you.
I know this answare is to late. but it might help others.
Thanks.
I've built a mobile version of an existing website. The site I've built is completely static and relies only on HTML/CSS/JS. This site resides on the same server as the desktop version and is served from under http://example.com/mobile as a subdirectory. As such, I've set the <base> tag to:
<base href="http://example.com/mobile/">
The only access I get to the existing site is via FTP, so I don't have too many options to reconfigure the already existing server. And I don't want to either.
My mobile version is only somewhat functioning - all the <script> and <link> tags inside index.html correctly point to http://example.com/mobile/{js,css,img}, while links used inside js or css files look up to the top domain (e.g - http://example.com/img/image.png instead of http://example.com/mobile/img/image.png).
I can manually copy all the assets for the links to work, but since this is a Grunt project I figured there might be a smarter way to do this.
So, how can I have all internal asset links in js or scss files change when building (grunt build)? Something like:
site.css
// in dev
body {
background: url('/img/image.png') top left no-repeat;
}
// after building
body {
background: url('/mobile/img/image.png') top left no-repeat;
}
Thanks.
See grunt-replace or grunt-string-replace as tools that can help with this.
You could use either of these within your build task to process the changes you need.
The hardest part will be writing an accurate regex, but there are many regex testers/builders online that can help if you aren't expert at that.
Also, while .htaccess is a great idea for Apache based sites, it doesn't help if you are on Windows or on a cloud hosting solution that doesn't honor it.
Zurb Foundation's data-interchange works beautifully for me. In development.
But then I build and I end up with this sort of html:
<img alt='Why Believe' data-interchange='[/assets/images/logo.svg, (default)], [/assets/images/logo-square.svg, (medium)]'>
<noscript>
<img alt='Why Believe' src='/assets/images/logo-e8f041ee.svg'>
</noscript>
Can you spot the problem?
Middleman's build process smartly fingerprints all of the assets, and links to the fingerprinted ones. No "un-fingerprinted" assets get built. I want all of that.
But the asset paths in the data-interchange attribute get no fingerprints. Therefore they work in development, but not once built and deployed.
How can I make it so the data-interchange asset paths also get the fingerprint? (And if middleman calls the -e8f041ee something other than "fingerprint", please let me know!)
If you are going to use asset hashs then you should consider moving your images used by interchange to a new directory so they aren't automatically hashed. If you are not hosting on a CDN based setup, you should consider turning the cash busting hashes off.
For example I place images in source/blog/featured-images rather than /images/blog/... to avoid them being hashed for a similar reason (because I am defining the name via yml frontmatter.