GithubHelp home page GithubHelp logo

chrisdev / wagtail-cookiecutter-foundation Goto Github PK

View Code? Open in Web Editor NEW
166.0 8.0 42.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 Introduction

Wagtail Cookiecutter Foundation

Updates

image

A cookiecutter template for Wagtail CMS was built using Zurb Foundation front-end framework. A demo of a default project generated from this cookiecutter is available at https://wagtail.chrisdev.com.

Read the Docs: http://wagtail-cookiecutter-foundation.readthedocs.org/en/latest/

Features

A Django project with Wagtail CMS pre-installed with support for all the Zurb Foundation components.

  • Supports Django 2.0
  • Renders Django projects with 100% starting test coverage
  • Built using Zurb Foundation
  • 12-Factor based settings via django-environ
  • Optimised development and production settings
  • Built with Let's Encrypt
  • Comes with a number of Custom Page models & templates such as Blog, Photo Gallery, Events and much more) to kickstart your site
  • Uses Grunt for image compression
  • Livereloading via python-livereload
  • Ansible for provisioning to and deployment to services like Digital Ocean and Linode
  • Works with Python 3.6.x

These projects come with a number of useful pages and a prebuilt content structure that will save you a tonne of work. Did I say that it automatically sets up SSL for your site using Letsencrypt!

Getting Started

Here is how we create a new Django project quickly while letting cookiecutter to do all the work.

To get started we assume the following dependencies are installed on your development enviroment :

pip
virtualenv/pyvenv/virtualenvwrapper
PostgreSQL

Get Cookiecutter :

$ pip install cookiecutter

Now run it against this repo:

$ cookiecutter https://github.com/chrisdev/wagtail-cookiecutter-foundation.git

You'll be prompted for some values. Provide them as illustrated in the video below.

image

A full featured Wagtail project will be generated for you. Enter the project :

$ cd wagtail_project/

Create a git repo and push it there:

$ git init
$ git add .
$ git commit -m "first awesome commit"
$ git remote add origin [email protected]:cclarke/my_site.git
$ git push -u origin master

To create your project's virtual environment, install all pip dependencies, create the development database, run migrations and load initial data to database, install front-end dependencies and finally start the development server for you run :

make develop_env

You can access your site at http://localhost:8000. The Admin back-end is available at http://localhost:8000/admin/.The default Admin username is admin and The default Admin password is admin123.

Up and Running - Provisioning and Deployment

Once you've created your project you can use the bundled make commands to to easily deploy and provision your site on platforms like Linode and Digital Ocean. We also support platforms like PythonAnywhere and Aldryn Cloud. The video below shows the process for a DigitalOcean droplet running Ubuntu 16.04.

image

We're assuming that you've already created a DO droplet and you've added the project owner's public SSH keys to the droplet. Due to the fact the DO Ubuntu 16.04 droplets don't come with the necessary Python dependencies to support serverside Ansible, the first thing we need to run is:

$ make pre_task

Next we run :

$ make deploy_user

This creates a deployment user on the Droplet. The playbook will pause so you can copy your SSH public key to your projects keystore directory. At the end of this task (play), the deployment user is created and the public keys are downloaded to the keystore. You must add them to the Bitbucket or GitHub VCS repo that your project. We support both private and public repos here.

At this point, you're ready to provision, secure your server and deploy your code to the droplet. However, you may wish to pause and make changes to your project's 12 Factor settings which are stored in file called env.example. The secrets have been automagically generated using Sys random but you may want to use your own values. Once you are satisfied run :

$ make provision

This will:

  • Install all the required Linux packages and libraries on the server.
  • Setup basic security on the using UFW Firewall and fail2ban.
  • Install and configure PostgresSQL.
  • Install and configure Nginx for SSL serving using Letsencrypt
  • Install and configure Redis and ElasticSearch.
  • Clone the project’s VCS repository, setup a virtual environment and install all Python dependencies
  • Setup Gunicorn and Supervisor
  • Configure and install a Celery worker process

Once the the playbook in done, you can check out your site at https://production_host_name. The Admin back-end is available at http://production_host_name/admin/. The Django SuperUser name and password are to be found in your project's `ansible/host_vars/production_host_name`:

Our Documentation provides deatiled instructions for deploying on PythonAnywhere and Aldryn Cloud.

Contributing

Contributions are always welcome to improve this project. If you think you've found a bug or are interested in contributing fork this project and send the pull request. After review, your pull request will be merged. We are always happy to receive pull requests. If you identify any issue, please raise it in the issues section.

wagtail-cookiecutter-foundation's People

Contributors

brondsem avatar chrisdev avatar darrellsnow avatar fygul avatar gasman avatar lendlsmith avatar marqueztt avatar parbhat avatar purplediane avatar pyup-bot avatar suledev avatar timusri avatar

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  avatar  avatar  avatar  avatar  avatar

wagtail-cookiecutter-foundation's Issues

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

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?

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

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.

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>

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 }}" />

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.

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

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

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

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

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

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

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

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.

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

map id

google map in footer needs to not be hardcode

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

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.

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.