Giter VIP home page Giter VIP logo

alembic's Issues

Check if jekyll-seo-tag is installed

As discovered by @sskylar, the only gem that the theme needs to have is jekyll-seo-tag. This can cause problematic errors, find a way to check if the gem has been set in the config.

Feature: Convert boilerplate into theme

TODO:

  • Create gemspec file
  • Test theme out
  • Allow easy way to create new config file
  • Write up installation and usage in README
  • Submit RubyGems.org
  • Test if users of theme can customise files

LaTeX equations are colored

When I include the MathJax snippet to enable LaTeX in _layouts/post.html:
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>, my equations are all colored green. This must be a setting in the CSS in Alembic that is overriding MathJax. Do you know what I need to change to allow the equations to be black, same color as the blog post text? Thanks.

EDIT:

Here is an example.

Problem with rootsizes

Dear @daviddarnes,
I would like to change the fontsizes, but changes in rootsizes (in file _variables.scss) seem to affect only the line-height, not the fontsizes.

E.g.:

$rootsizes: (
  rootsize-0: 5,   // 24px line-height body text
  rootsize-1: 5,   // 28px line-height body text
  rootsize-2: 5,   // 30px line-height body text
  rootsize-3: 5,   // 34px line-height body text
  rootsize-4: 5    // 38px line-height body text
) !default;

Better sidebar separation

Currently there is only one sidebar file, with tons of conditionals in there. This could be better managed with different files brought into different layouts

Improve sample content

Currently the content is designed to display the features of the theme and some example posts. It would be better if the example site looked more like a real site, one that this theme would work best for.

Change page-full.html to home.html

When you use jekyll new in Jekyll 3.3 the index.md has a front matter setting of layout: home. This is due to the minima default theme having a home layout.

Simply by changing one of the layouts to home it'll make the theme switching process a little easier.

Reducing font size

Hello,

First, thanks a lot for what you've done, it's really helpful for a newcomer to jekyll ! Especially for typography and vertical rythm.

Now, I find that the maximum font size is too big (it's like 30px line height) : I want to show some code, and I think it requires too much scrolling for the reader.

I would like to use the second biggest font size. I figured out it has something to do with the breakpoint properties but I cannot find how you configure it.

Could you help me ?

Thank you ;)

Multi-language Support!

Really sorry for missing this everyone! Language support is really important for a theme that is going to be used all over the world. Will implement with the following:

  1. <html lang="{{ site.lang | default: "en-US" }}"> Allow the user to set the lang, default being US english (most common)
  2. I'll set a in the config as an example, plus I need to use en-GB as I'm in the UK 👍

Installation thoughts

The process for installing via gem is a bit clunky (an upstream Jekyll problem, of course). I had better luck installing with Bundler (adding the alembic-jekyll-theme to my gem file). When running without, I got this error:
jekyll 3.3.0 | Error: The alembic-jekyll-theme theme could not be found.

I wonder if, in addition to the set ups you have now (boilerplate, gem theme), you had a hybrid, where someone needs to download the entire Jekyll install (or clone a branch), run bundler, or something that updates the theme etc. That is to say, a download that has everything you need to run the gem-based theme. Hope that makes sense!

Various testing bugs

  • Exclude 404 from default nav
  • Exclude blog pagination pages from default nav
  • Check that default nav has a working current state for items
  • Check navigation all over really
  • readme contents needs indentation to match heading levels
  • Make sure gemfile configs are all ok
  • Scan over CSS to make sure it's in a logical manner
  • More bugs to follow

Simplify how typography and colours can be edited

Now that CSS custom properties are becoming more widespread, it's probably worth looking into combining all the variables that matter to users into one file. There's already a _colors.scss file and sassline has a _variables.scss file, so maybe we just abstract the typographic settings into a _fonts.scss file? Or combine them into a _settings.scss file.

After this has been worked out we can then look into using CSS custom property overrides

Use package manager for bundled assets

Currently theres:

  • fetch() polyfill
  • sassline
  • flexbox prefixer
  • normalise
  • a code syntax highlighter

…that should all be managed with something like npm & gulp. This would also improve the documentation on external sources that don't want to get confused with what has been created in this project

Change `feature` to a `div`

Feature section element should probably just be a div within the header element. It's just an additional element to it, not a section unto itself.

Centring option for figure include

Summary

Centring images is a desirable option for people. Having a setting for for this in the <figure> element include would allow this with little effort

How to

  1. So the good thing about this addition is that you only really need to add some CSS. Pop on over to the main CSS file and you'll see .figure with alignment options. Add a &--center with your styles in (US spelling because I dunno, color is spelt wrong too 🙃)
  2. Next you'll want to tell us how to use it, which you can do in the README.md (should be real simple to add here)
  3. Final step is to let me know when you're done with a new pull request! Then I can bump the gem version, then is 🚀 time

Snagging list 0.1

  • Favicon control isn't exposed in the UI (config could handle this)
  • Blog page content isn't exposed in the UI (collection data could handle this)
    • {{ site.collections.posts.title }}
    • {{ site.collections.posts.description }}
  • Sharing buttons need to be wrapped in a clearing div

Blog page title and description do not appear

Summary

The blog page view uses the site title and description instead of the page title and description.

Reference

See line 13 in _layouts/blog.html, lines 11 and 14 in _layouts/default.html

page.collection should be page.collectionpage

Additionally to this the meta information of the page is getting affected, take a look at https://github.com/daviddarnes/joelcagedesign.com/blob/6bca7bd2c6ea4b157acec00578548ac0ac990f0e/_layouts/default.html#L11-L21

Search feature breaks with carriage returns

Hi,

I noticed that if one of your posts contains the text "\n" the search functionality breaks and is unable to find anything.

For example if I add the text \n (not an actual carriage return but the text) to 2016-08-27-example-post-one.md the search is not able to find anything.

I am guessing that when the search feature parses these pages it incorrectly interprets the "\n" as a new line instead of plain text and halts the search pre maturely. Not sure if this is true though or if it's easy to fix, though i'm happy to try.

Aside does not follow scroll on Chrome

In Firefox, the aside sticks to the top of the viewport while scrolling down the page. This doesn't happen in Chrome, where the aside is stuck at top. See screenshots for illustration, first one is FF showing correct behavior, second is Chrome failing.

screenshot from 2017-06-08 21-11-43
screenshot from 2017-06-08 21-10-33

Add body class for unique page styles

Summary

In some cases people may want to style a single page without disrupting other pages or their layouts. By adding a class to the body that is generated from the page title (and page layout?) people could utilise this and style pages individually

Example code

<body class="layout-{{ page.layout }}  {{ page.title | slugify }}">
   ...
</body>

Change default logo and social image names

Probably better off calling them assets/logo.svg and default-social-image.png, then people can change them without changing any code. Also make a note in the docs of this, along with how to change the logo image path in the config

Scroll bars for Code Snippet

Hi David, Thank you for the awesome theme (And thanking all those who contributed)!

I am setting up Alembic to my blog site from scratch and I'm facing an issue where I don't see scroll-bars for code snippets. I also installed kramdown rouge and I have set the following properties in my _config.yml:

markdown: kramdown

kramdown:
  input: GFM
  syntax_highlighter: rouge

But I still couldn't get the scroll bars for the code-snippets -- lengthy lines are wrapping into the next line. Here is how it looks:

screen shot 2017-08-31 at 7 39 45 pm

Please guide me on how I can get the scroll-bars there. Thank you!

Logo isn't easy to replace

Logo image is just for schema and not the actual image on the page, should just be a regular img as SVG or png

Add more examples

Hi @venuthatikonda and @hrkeni,

I noticed that you are all using Alembic in your own individual ways after I did a quick search on GitHub. This is awesome to see, so thank you all for using my theme 😄

I'd like to list these example sites in the documentation to show what's possible with Alembic. I've listed the urls below, if you'd not like your site to be listed then let me know:

Add contact form include 

var email = "{{ site.email | split: "" | reverse | join: "" }}";
var unraveledEmail = email.split("").reverse().join("");
var form = document.getElementById("contact-form");
form.setAttribute("action", "://formspree.io/" + unraveledEmail);

Remove spacing when a paragraph is inside a list item

Due to the nature of most CMSs, paragraph items will often be rendered inside a list item. For example:

<ul>
  <li><p>Item</p></li>
</ul>

or

<ol>
  <li><p>Item</p></li>
</ol>

There needs to be some precise styling to stop paragraph items padding out so much when inside a list item, using something like li > p. The only issue with this is that sassline is dealing with most of the typographic styling, so it'll need to be overwritten

hosting multiple github.io sites breaks navigation

Hi,

I noticed this theme is set up to work assuming a user/group has a single github.io domain. For example if the domain is:
https://name.github.io/repo/
instead of:
https://name.github.io/
things seem to break, navigation, posts, blog, image links, etc. Is there any way around this. I could change the navigation_header setting for example:
navigation_header:
Home: /repo/
instead of
Home: /

however this does not seem to work for "Search", also if running locally paths have to be reset or paths break again. I am new to jekyll, maybe I am missing something simple? Any help or advice you can give is appreciated, great theme!

Re: Custom Properties Settings

Following code is to style the colour inputs, however they aren't needed in the main theme:

input[type="color"] {
  padding: 0;
  height: 2.4rem;
  &::-webkit-color-swatch-wrapper {
  	padding: 0;
    &:after {
      content: "Color";
    }
  }
  &::-webkit-color-swatch {
  	border: none;
  }
}

Best to just add them to the styling page and not the main codebase

cant run localy

forked. installed. run command jekyll serve and got this error:

Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/styles.scss':
                   Invalid US-ASCII character "\xE2" on line 27

Considering frameworks

  • Sassline: For handling typography and type setting in general
  • Normalize: Because browser still don't quite see eye to eye
  • More? Please share

Add features to readme

Features

  • Tested in all current browsers, that includes IE as well as Edge
  • Extensive set of shortcodes to include various elements; such as buttons, icons, figure images and more
  • Solid typographic framework from Sassline
  • Configurable navigation via a single file
  • Modular Jekyll components
  • Easily interchangeable sidebar
  • Contact form built in
  • Works on GitHub Pages out of the box
  • Built with Jekyll 3.2
  • Designed with Siteleaf in mind
  • Has documentation

Fix demo site issues

Going to need to change the sample content to working content to allow the demo to work properly

Add examples

Hi @YaManicKill, @case2111, @pizzapgh and @bawejakunal!

I noticed that you are all using Alembic in your own individual ways after I did a quick search on GitHub. This is awesome to see, so thank you all for using my theme 😄

I'd like to list a few example sites in the documentation to show what's possible with Alembic. I've listed the urls below, if you'd not like your site to be listed then let me know:

To do

  • Add a contact form (see #3)
  • Add Disqus comments
  • Add full width page layout
    • Check full width figures on full width pages
  • Add sidebar left page layout
  • Test creating a feature page (image and text alternating)
  • Test Google maps
  • Test an audio player
  • Test a video player
  • Add left aligned figures
  • Add right aligned figures
  • Setup url for theme, subdomain like alembic.darn.es would work
  • Basic icons? Social and basic navigational ones?

Minor updates

Summary

Just some small updates to the theme and content, highlighted upon testing locally.

To dos

  • Update bundler and dependants
  • Update LinkedIn url to https://www.linkedin.com/in/daviddarnes/
  • Add an alt option to images to allow people to have valid image elements when using the figure.html include
  • Take off http://katiesimonemusic.com off examples as it is no longer live
  • Test sharing buttons when content of page isn't regular text content, can cause unexpected results with video and image embeds

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.