Code Monkey home page Code Monkey logo

raviriley / agency-jekyll-theme Goto Github PK

View Code? Open in Web Editor NEW
319.0 3.0 610.0 7.41 MB

Jekyll version of the newest Agency Bootstrap theme, plus new features: Google Analytics, Markdown support, custom pages, and more!

Home Page: https://raviriley.github.io/agency-jekyll-theme-starter/

License: MIT License

HTML 38.76% Ruby 1.13% JavaScript 44.51% SCSS 15.61%
jekyll jekyll-theme jekyll-themes bootstrap-theme liquid ruby ruby-gem rubygems bootstrap remote-theme github-pages theme hacktoberfest

agency-jekyll-theme's Introduction

Agency Jekyll Theme

RubyGems Downloads LICENSE Tip Me via PayPal template button Featured on Jekyll-Themes.com

Preview - click for live demo

screenshot

Warning

⚠️ Notice for those using legacy Formspree contact forms: ⚠️

Email-based forms are being phased out by Formspree. #11 updated this theme to use the new Formspree structure. Click here for instructions on updating your site's form.

About

This is the Agency Bootstrap theme, converted to a gem-based Jekyll theme with GitHub Pages support.

While this has been done before, here, here, and here, these are outdated and have not been updated or maintained for years. I built this theme from the most recent Bootstrap source.

I also added a lot of new features that go beyond the original theme's capabilities:

  • GitHub Pages support
  • template repo to get up and running in minutes
  • contact form functionality powered by Formspree.io
  • multiple language support (currently English, Spanish, & German)
  • custom pages
  • 404 page
  • legal/Privacy Policy page
  • Google Analytics support
  • Markdown support
  • custom images
  • logo support (instead of just title text)
  • automatically updating copyright years
  • custom navigation bar, even without the header image(s)
  • customizable footer
  • custom accent color and dark/light colors
  • horizontal scrolling support for client section

The Jekyll structure of this theme includes:

  • _portfolio files - what generate the portfolio grid. YAML front matter handles all the details
  • the page layout allows custom pages, as seen in the legal and 404 pages
  • sitetext.yml enables complete customization of all site text
  • navigation.yml enables fully customizable navigation
  • style.yml enables fully customizable colors, background images, and other style-related things

If you enjoy this theme, please consider supporting me to continue developing and maintaining it.

Support via PayPal

Installation

There are three ways to install this theme:

  1. As a gem-based theme
  2. Use the starter template (best for GitHub Pages)
  3. As a remote theme

1. Gem-based Theme Installation

Replace the contents of your _config.yml file with the sample _config.yml.

Install the gem with:

$ bundle add jekyll-agency

Or manually.

  1. Add this line to your Jekyll site's Gemfile:
    gem "jekyll-agency"
  2. Then execute:
    $ bundle install

2. Using the Starter Template

This is the fastest and easiest way to get up and running on GitHub Pages.

Simply generate your own repository by clicking the button below. Then replace the sample content with your own and configure for your needs.

Use this template

3. Remote Theme Installation

Replace your _config.yml file with the starter _config.yml.

Replace your Gemfile with the starter Gemfile.

Then install gems.

$ bundle install

Contributing

This project is intended to be a welcoming space for collaboration. If you have an idea, suggestion, feature request, etc., feel free to open an issue or pull request.

For bug reports, follow the provided template.

Improvements - Up for Grabs

Development

To set up your environment to develop this theme, clone this repo or your fork.

$ git clone https://github.com/raviriley/agency-jekyll-theme.git
$ cd agency-jekyll-theme

Then run:

$ bundle install

To test the theme, run this. (Using the --trace flag for verbose errors.)

$ bundle exec jekyll serve --trace

Then open your browser at:

Add pages, documents, data, etc. like normal to test the theme's contents. As you make modifications, your site will regenerate and you should see the changes in the browser after a refresh.

License

The theme is available as open source under the terms of the MIT License.

agency-jekyll-theme's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

agency-jekyll-theme's Issues

Porfolio .md files connection

Hey, thanks for creating and providing support for this improved version of the theme.

I'm trying to figure out how the .md files in the _portfolio directory are linked to.... well really anything.

For reference, I'm trying to allow for similar functionality as the portfolio section with the team section where by clicking on an individual's picture, information text pops up about them. I've gotten pretty close to finishing but I can't figure out how to point the team files to the correct markdown file for each individual. Any insights on this? I've edited the team.html, teaml.scss, and modals.html files thus far.

You can see the changes I've made in my repo (forked from this one) here.

Please incorporate Google reCAPTCHA with the formspree form and ajax/js validation.

Is your feature request related to a problem? Please describe.

Would like to incorporate Google reCAPTCHA with the formspree form

Describe the solution you'd like

Would like to continue to use the ajax for validation and submission along with reCAPTCHA

Describe alternatives you've considered

It works well without the form validation and just the formspree option, but it is preferred to use the ajax as you've done it.

Additional context

I would personally would like to use it with the 'invisible" option. https://developers.google.com/recaptcha/docs/invisible

Links not working if you visit legal

If you click the privacy policy / legal link, none of the links work any longer on the page as they are all just anchors and do not have the page embedded as well. Confusing for many users.

No way to edit About

The about section just says a title, and then puts the text down twice, once as a subheader and once as the body. I do not see a way to actually create a body of text.

image

When displayed it shows this, repeating the "text" value twice.

image

email contact form doesn't work

First of all: Thank you for awesome theme.
Bug: When I install the theme by 2. Using the Starter Template and deploy to github pages sending the emails from contact form doesn't work. It is rainsing the err like in picture.
image

1. Add, Remove or Change Order of Sections

Hi, this is Issue 1:

Id like my web to show this sections in the following order:

  1. timeline
  2. services
  3. clients
  4. contact
  5. footer

And to remove altogether the sections "portfolio" and "teams".

But I had the following complications:

i) I can't rearrange the order of appearance of sections
ii) I can't seem to remove a section (a blank space still exists)

What would be great to see:

A "section:" label to name a new section
A "type:" label to add the the kind you choose (be it timeline/portfolio/services, etc.)
An "order:" label to set the location from 1 to n
The ability to remove sections by removing specifict parts.

Kind Regards

Formspree phasing out legacy forms that use email address as part of the form action

Is your feature request related to a problem? Please describe.

Formspree is phasing out legacy forms (email URLs).

<form action="https://formspree.io/[email protected]" method="POST"> is considered to be a legacy URL. Newly created forms utilize form_id URL path like <form action="https://formspree.io/f/a_form_id" method="POST">

Describe the solution you'd like

It may be a good idea to introduce another site configuration variable, for example formspree_form_path that will be utilized for contact_me form (relevant files _config.yml, _includes/contact.html and assets/js/contact_me.js)

Describe alternatives you've considered

None

Additional context

Formspree articles related to the upcoming change: https://help.formspree.io/hc/en-us/articles/360017735154-How-to-prevent-spam and https://help.formspree.io/hc/en-us/articles/360056076314

Smarter/dynamic team member layout

Is your feature request related to a problem? Please describe.

For a small team, the Team section is left-aligned.

Describe the solution you'd like

The team section uses Boostrap sizing, and uses col-sm-4. It would be nice if the theme was a bit smarter, and could:

  • Detect the number of team members from the YML
  • Determine the best spacing based on the number of team members

For example, for a team of one, it would be nice to see the team member centered. For a team of two, have each block take up half of the width of the screen. For a team of four, one row of three configured with col-sm-4 like it is now, and a second row where the 4th member is centered.

Describe alternatives you've considered

I've played with the HTML in my browser to change the class from col-sm-4 to col-sm-12 to accomplish my goal. Because it is part of a gem, I would need to fork the gem and update it for my one-person team.

image

#Portfolio Issue

Is your feature request related to a problem? Please describe.

  • When changing locale, Portfolio navigation is not working as expected.
  • Style for portfolio and contact us are not applied when locale is changed due to change in section id.

Describe the solution you'd like

from: <section class="bg-light page-section" id="{{ site.data.sitetext.portfolio.section | default: "portfolio" }}">
to: <section class="bg-light page-section" id="{{ site.data.sitetext[site.locale].portfolio.section | default: "portfolio" }}">

Add: #portafolio and #contacto in _portfoilio.scss and _contact.scss

Additional context

Thank you very much for providing such a good quality theme.

Custom pages with language support

Hi,

I have a question about the usage of the theme. So far I am editing _data/sitetext.yml to create content. But I want to create some other pages like legal.md based on the page layout. These should also support multiple languages, so I want to create them as yml like the sitetext.yml and not as markdown like the legal.md. Maybe I even want to base them on a custom section in _includes.
How can I do this?

Thanks for your help :)

How should I create jekyll-scholar file structure ?

Actually, I tried to create it, but I always get an error somewhere,it would be great if you add jekyll-scholar support.

Firstly i tried add 'selected article' section on home page i did but something went wrong when i try redirecting to a different page e.g: blog tab

image

i added to my home page like this;

image

but i don't know how to redirect when i want to go to a new page blog tab

image

image

Also, the file structure is like this, but I still can't get rid of some errors.

image

image

image

How to edit the HTML code ?

Hi Ravi,
Sorry about my lack of knowledge but I want to edit the icons of the 'Service' section, substitute for a custom image instead the font icon. For doing this I need to edit the 'service.html' file which doesn't exist in my repository, just on yours. I would be very grateful if you give me some tip.

Local dev environment working great, but Github Pages gives 404

Hello,

Great template.

Apologies if this is a newbie question.

I thought I was being clever :-)

I cloned https://github.com/raviriley/agency-jekyll-theme.git. Got it working locally. Configured it the way I want and then pushed to my own repository at https://github.com/lukertaylor/lukertaylor.github.io

I was expecting my Github page to appear, but instead got a 404.

I cloned https://github.com/raviriley/agency-jekyll-theme.git so I could get access and modify the CSS.

Am I just doing it wrong?

Luke

How to get to the code behind the theme

Hi, thank you for this nice template. I'm starting on github pages and I could use some help. My issue is that now that i'm trying to customize the template, I'm getting stuck. I guess I should try to get to the original code behind the theme, but I need some help to get there. I guess this isn't a specific issue of this theme, but any advice would be appreciated.
Regards
JIVB

Ability to override fonts

I'd like to be able to override the Google fonts used as the first-choice fonts in the font-family attributes in _sass/base/_mixins.scss.

Would you accept a contribution to add this capability? Any thoughts on how you'd prefer to see this done?

Thanks very much for this theme!

Introduce backwards compatibility for multiple language support

Is your feature request related to a problem? Please describe.

The current implementation of locales is not backwards compatible

Describe the solution you'd like

if statements for every usage of locales, so that if the user has no locales in any of their YAML files everything behaves like it would before the implementation

@rbenitezpagan if you get the chance, could you go in and add the if statements? You know the implementation better than I do since you wrote it.

Gem-based installation seems broken

Describe the bug
When using gem-based instalation page seems to not render _data correctly. remote_theme works fine.

To Reproduce

  1. Clone template repo.
  2. Add gem "jekyll-agency" to Gemfile
  3. Run bundle update
  4. In _config.yml use gem-based theme:
theme: jekyll-agency
# remote_theme: raviriley/agency-jekyll-theme

Expected behavior
Page should be displayed correctly no matter how theme is installed.

Screenshots
image
image

Additional context
Seems like gem is older than what is currently available on master branch, It would be great to add some tags or releases to keep track of what data format is expected in which theme version.

Contact form not working (even if it says so)

Describe the bug
The contact form in my github pages hosted site doesn't work.

To Reproduce
go to untitleddata.company form and send a message, the green boxes appears telling that a message is sent, but no email is delivered

Expected behavior
I expect a message in my inbox

Screenshots
If applicable, add screenshots to help explain your problem.
image

Whitespace characters as default value in contact form

Describe the bug
In the contact form section of the theme, the message part of the form starts with a few whitespace characters, which may be included when the message is sent.

To Reproduce
Steps to reproduce the behavior:

  1. Go to the live preview at https://raviriley.github.io/agency-jekyll-theme-starter/
  2. Navigate to the Contact section and click the message text area.

Expected behavior
This text area should be empty and show the default value "Message*" (unless one is set in sitetext.yml)

Screenshots
Empty space shown on live preview of theme
Screenshot on site

I believe it is being caused by whitespace characters in the contact.html file in _includes
Whitespace characters in contact.html

Additional context
I think this can be fixed by removing the whitespace characters between the <textarea> and </textarea> tags as shown in my second screenshot. I will experiment to see if this works and open a PR if so.

Trying to use basic bootstrap element within the theme with no success

Hello, I was using your theme successfuly until I tried to integrate bootstrap accordion in a page. I was able to add the requested and missing scss elements but it looks like the javascript doesn't proceed. I am not sure what info I can give to debug it.

bundle exec jekyll serve gives no error

Thank you!

Need a better way to enable Markdown support than the markdownify filter

Does anyone know of a more efficient way of doing this over appending | markdownify to every element I want to enable Markdown in?

Is your feature request related to a problem? Please describe.

Currently, every text area with Markdown support is done like this:

<p>{{ site.data.sitetext.example.text | markdownify | default: example}}</p>

Every "Markdown supported" section has Markdown enabled with the markdownify Liquid filter.

Describe the solution you'd like

A universal way of adding Markdown support to all paragraphs and headings.

No Index.html?

I'm very new so using this as an experiment to learn about how git works.

I've cloned the template to make my own page, and started to customize it, but the changes are taking ages to show up after I push them

From my research I believe it's due to a lack of an index.html ... From what I understand, if there isn't an index.html, then the page should pull from README.md, unless there's an index.md... well, there is one, but there's also a readme, so perhaps it's getting confused?

Page Title

Hi, I love this theme, but I cannot change the title homepage. It remains your awesome webpage after I change to my name in _config.yml file.

In addition, I want to add favicon.ico to my webpage. How can I add this?

Can you help me to fix this?

Switching default locale to German

I'd like to change the locale to German (thanks for making this available!)

When I change the locale entry in _config.yml to "de", the entries will be translated as expected, but the portfolio hover effect stops working and the plus icon gets misplaced:
de

When I change it to "de-DE" instead, the portfolio hover works, but the navigation bar disappears and everything else is not translated:
de-DE

How do I properly change the locale?

Versions:
liquid 4.0.4
jekyll 4.3.1
jekyll-agency 1.1.0 (via git clone)

Not supported by GitHub Pages

I want to use this theme as my github.io blog, however, I received a "Page build warning" email from Github. The details are as follow:
"
The page builds completed successfully, but returned the following warning for the master branch:

You are attempting to use a Jekyll theme, "Jekyll-agency", which is not supported by GitHub Pages. Please visit https://pages.github.com/themes/ for a list of supported themes. If you are using the "theme" configuration variable for something other than a Jekyll theme, we recommend you rename this variable throughout your site. For more information, see https://docs.github.com/github/working-with-github-pages/adding-a-theme-to-your-github-pages-site-using-jekyll.

For information on troubleshooting Jekyll see:

https://docs.github.com/articles/troubleshooting-jekyll-builds

If you have any questions you can submit a request on the Contact GitHub page at https://support.github.com/contact?repo_id=310740832&page_build_id=213757460
"
I didn't edit anything in the repository, is there any way to fix this? Or do I have to change to the Github official theme? I really like your theme, I would appreciate it if you would help me solve this problem.

how do I modify colors

just getting started with GH pages and Jekyll. I love the work you've done but I'm confused by all the levels of indirection. I would like to use a different theme color. Instead of the brighter yellow, I'm looking to use a more brown / earth tone color scheme.

I see some commented colors in the _style.yml, but I'm not following what I could put there and how it affects the style. Does this give me full control of the bootstrap sass variables?

overall, I am just generally confused on what I am allowed to modify within the theme.

Change Font

Hi,
first of all, great theme.
I just wanted to know how to change the font from font-awesome to something else?
Thanks

Multiple Language Support

Is your feature request related to a problem? Please describe.

It would be nice to have support for languages besides English (US).

Describe the solution you'd like

Multiple language support with the use of a sitetext.yml file with different locales, or other implementation.

Additional context

@mmistakes has done a great job of this on his themes.
Example

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.