GithubHelp home page GithubHelp logo

chrisdev / wagtail-cookiecutter-foundation Goto Github PK

View Code? Open in Web Editor NEW
166.0 8.0 41.0 22.78 MB

A Cookiecutter template for Wagtail CMS using Zurb Foundation 6

Home Page: https://wagtail.chrisdev.com

License: MIT License

Makefile 2.57% Python 52.31% HTML 24.06% Batchfile 1.24% JavaScript 0.73% SCSS 15.40% Jinja 3.69%

wagtail-cookiecutter-foundation's Issues

manage.py load_initial_data fails

screenshot 2015-06-17 17 43 32

When you add a new model like people and you want to provide demo/test data ensure you dump all the current data in the database.

    ./manage.py dumpdata --indent=2 > fixtures/initial_data.json

UncompressabeFileError a / scss

screenshot 2015-04-20 01 03 04
Ok we are using {{cookiecutter.repo_name}}.scss

But in base.html we have
<link rel="stylesheet" type="text/x-scss" href="{% static 'css/wagtail-cookiecutter-foundation.scss' %}">
Let's follow the Zurb Foundation practice and use app.scss rather than a dynamic name

Move Modernizer.js to the head of base.html

According to the documentation.
Drop the script tags in the of your HTML. For best performance, you should have them follow after your stylesheet references. The reason we recommend placing Modernizr in the head is two-fold: the HTML5 Shiv (that enables HTML5 elements in IE) must execute before the , and if you’re using any of the CSS classes that Modernizr adds, you’ll want to prevent a FOUC.

Facebook OG `og:image` meta property is missing from include tag

The feed image is missing for the Facebook OG as specified in facebook_opengraph.html
Here how we did it.

   {% image self.feed_image width-1200 as img %}
    <meta property="og:image" content="http://birdsongtt.org{{ img.url }}" />

Note we hardcoded the site_url but in practice we will get this from the Site Model

We need a proper photo gallery app

Currently the torch box folks suggest using the pattern suggested by Standard page Carousel.
This works but. It is slow for the end user. The Wok flow is as follows

  • The user has to upload the Photo or Image in the Images in admin
  • The user must add title and and tags
  • The user must create the Page that represents the gallery.
  • User adds the Uploaded image to the Carousel and Add caption information
  • Save page

How it should work

  • The goes to the Admin >> Images to upload the photo/image to a gallery.
  • The admin must add title and a tags for the photo
  • Admin can optionally specify galley for the photo
  • Gallery should have a slug, title and optionally a description
  • Admin Saves/Upload
  • Later a user on the site can simply go the galley area and browse the photo in the given gallery

manage.py should be executable

I hate having to type python manage.py runserver make manage.py executable so our dev just have to type ./manage.py runserver

Event export to iCal raises 500 error

Ok here is the error we are getting on our deployed sites.

content_dispo = 'attachment; filename=' + self.slug + '.ics'
response['Content-Disposition'] = contant_dispo

contant_dispo should be content_dispo

BTW don't we have a test for this?

Add foundation sass to the home page template

  • Add foundation SASS
  • Javascript dependencies.
  • Templates
    • base.html
    • 400.html
    • 500.html
  • The site design should be for a business/marketing
    • navbar
    • Hero unit
    • Welcome content section as a centred box
    • Three content sections
    • Footer with sitemap

Settings Tags

Add a template tag called setting_tags to add support the API of common services such as

  • Google Analytics
  • Facebook
  • Mapping - Google Maps/Mapbox

map id

google map in footer needs to not be hardcode

Contact Page Side Bar

  • [ x] Find us Map
  • [ x] ContactFields as a "h-card" http://microformats.org/wiki/h-card
  • Make Contact Fields Reusable i.e a template tag that we could use in the footer and sidebar
  • Move the template tag from navigation to {{wagtail.project_repo}}_utils.py
  • Oops the default form is missing the message field

The setting tag was referenced in Issue #34
contact_us_side_bar

Template syntax error at /

screenshot 2015-04-20 00 38 58

home_page.html has a reference to {% load static wagtail-cookiecutter-foundation_utils %}
The templatetag file is {{project_name}}_utils.py

In any case as in the Textel project templatetag should be in the core app not in utils. This would make more sense when we rename core to pages
The template tag should be always be called core_tags for now.

Also there are multiple places where static and wagtailcore_tags are loaded.

Some missing dot files

So far I've noted but there may be others

  • .gitignore at the project level
  • .editorconfig
  • .hgignore in cookiecutter.repo_name

Support for the Facebook OpenGraph

Here is a snippet using a include tag on base.html

     {% load core_tags %}
      <meta property="og:title"
       content="{% if self.seo_title %}{{ self.seo_title }}{% else %}{{ self.title }}{% endif %}"/>
      <meta property="og:site_name" content="birdsong Steelband, Academy and Social Enterprises"/>
    <meta property="go:url" content="http://birdsongtt.org{{ request.get_full_path }}" />
      {% if self.search_description %}
          <meta property="og:description" content="{{ self.search_description }}"/>
      {% endif %}
       {% get_facebook_appid as facebook_appid %}
      <meta property="fb:app_id" content="{{ facebook_appid }}" />

Site navigation

Ensure all navigation elements are covered. We need template tags, templates, and SASS styles for the following.
These sold be based on those provided by foundation. But of course we always endeavour to show our users how they can customise using SASS

  • Topbar
  • Navigation links - Currently called site menu
  • Secondary Menu - SideBar
  • BeadCrumbs
  • Related Links

Ansible nginx task is broken!!

Seems to expect you to hardcode ssl_key_file_name, ssl_cert etc. and does not make use of the keystone dir

Its not very modern user will only get a C on the ssl_labs test if the users deploys as is. We must do better that that.

Some stuff is missing e.g strong DHE param generation.

We are doing the SCSS wrong.

We do not need to reference foundation.scss and normalise.scss in base.html
we just need to reference our scss file for the sake of simplicity I will call it app.scss
In app.scss we need two imports
@import "vendor/foundation/scss/components/global";
This references the global settings for Foundation. So the first bit or the SCSS file is to customise colours, fonts etc.

Once you are done with that then
@import "vendor/foundation/scss/foundation";
This would give you every thing in foundation!
Then you can put in your own styles which can be built for Foundation mixins if you wish.
So the only thing that you have to refer to in base is

<link rel="stylesheet" type="text/x-scss" href="{% static 'css/wagtail_project.scss' %}">
No need to reference foundation.scss or normalise.scss.

Take a look at the Textel project to see how it works

To dos

Here's a very high level overview of what needs to be done

  • Get @Parbhat up to speed on wagtail and cookiecutter
  • Give @Parbhat access to our private project on bitbucket this will act a the template for our wagtail projects
  • Slack send @Parbhat invite
  • Discuss what needs to be changed the project is far from perfect
  • Do it.

UncompressabeFileError at / Javascipt

Basically same as #12 except for Javascript.

Ok we are using {{cookiecutter.repo_name}}.js

But in base.html we have

<script type="text/javascript" src="{% static 'js/wagtail-cookiecutter-foundation.js' %}"></script>

Modularize

As suggested before, rather than going with the monolithic core app lets have the following

  • Remove the Core App
  • Pages - HomePage, StandardPage, PeoplePage
  • Blog
  • Events
  • Contact
  • Gallery - Our gallery with the custom admin
  • utils - We can move the abstract models here that may be used by the other models here

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.