Setting up the schedule generator for this year.
[libreplanet-static.git] / 2017 / README.md
1 README version for LibrePlanet 2017
2
3 Heads up: to edit the Web site, you'll need a basic-to-intermediate understanding of HTML and git.
4
5 # SECTION 1: DEVELOPMENT WORKFLOW
6
7 The actual LIVE site, visible at libreplanet.org/YEAR, is served from the "stable" branch of the git repository using a git hook. There is also a development branch called "master" which we use to preview edits on the Web. The master branch is served to the Web at http://wiki-dev0.libreplanet.org/YEAR and publicly visible, but not linked to.
8
9 Full workflow to make, test and deploy an edit.
10 -----------------
11
12 * Check out the master branch and make sure it is up to date with origin/master by doing:
13 * git checkout master
14 * git pull
15 * Is this a large edit or a small edit? If it is small, edit, work in master. If this is a large edit that will take longer than a day, make a new branch based on the master branch and work there.
16 * Make your edits. (See site structure and instructions for editing content below.)
17 * Optionally, test them on your computer with a local development environment. (See instructions below for setting up your development environment).
18 * If you are working on your own branch created for your edit, merge, your branch into master by doing:
19 * git checkout master
20 * git merge BRANCHNAME
21 * Push master by doing:
22 * git push
23 * Review the edited version of the site at http://wiki-dev0.libreplanet.org/YEAR. You can share this with others.
24 * When you are satisfied, merge master into stable and then push stable by doing:
25 * git checkout stable
26 * git merge master
27 * git push
28 * Your edits are now live and visible at libreplanet.org/YEAR
29
30 # SECTION 2: SITE STRUCTURE
31
32 The site is made up of HTML files, each representing part of a page (sidebar, content, footer, etc.). When a browser visits the site, the server finds the core HTML file for the page (for example, the core file for https://www.libreplanet.org/YEAR/getting-around is /YEAR/getting-around/index.html in the repo), then reads special comments in that file to which instruct it to pull various other HTML files in to produce a complete page, using an Apache feature called SSI. To edit part of a page, you will need to find out which HTML file contains the element in question. Do this by navigating to core HTML file and exploring the comments that start with "#include".
33
34 The bios page and the sessions page are maintained through a special workflow to make it easy to have only one canonical copy edited by humans. That canonical copy is saved in brains (the FSF's internal wiki) in a special format. To update the sites' sessions page or bios page, you will need the lps_gen program installed on your computer (<http://pythonhosted.org/lpschedule-generator>), as well as a local checkout of the SVN repository that contains brains.
35
36 This site is built with [Bootstrap 3.3.5](https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip) and [jQuery 1.11.1](http://code.jquery.com/jquery-1.11.3.js) but you do not need to understand either of these technologies to make minor content edits to the site.
37
38 # SECTION 3: EDITING INSTRUCTIONS
39
40 To change content on existing pages, simply use your favorite text editor.
41
42 Here are specific instructions for more complex editing tasks:
43
44
45 ## Editing the schedule
46
47 See instructions at <http://pythonhosted.org/lpschedule-generator>. For 2017, the jinja2 templates are stored in the the Web site's git repo at assets/templates.
48
49 ## Creating a New Page
50
51 *Boilerplate*
52
53 Add the following to your new page (it should remain commented out, as that is the syntax for SSI):
54
55 ```
56 <!--#include virtual="/2017/includes/header.html"-->
57 <!--#include virtual="/2017/includes/banner.html"-->
58 <!--#include virtual="/2017/includes/sidebar.html"-->
59 <!--#include virtual="/2017/includes/footer.html"-->
60 <!--#include virtual="/2017/includes/close.html"-->
61 ```
62
63 This will include the header, banner, sidebar, footer and closing tags
64 saving you from duplicating HTML.
65
66 If JS is needed for a page, then create a file, containing the JS
67 includes, in `/2017/includes/` & use SSI to include it in the page.
68
69 Use `/2017/includes/boilerplate.html` to start a new page.
70
71 *Add Your Markup*
72
73 Add HTML markup in-between the sidebar and footer includes.
74
75 *Enable SSI*
76
77 Files that contain include directives must be marked as executable
78 otherwise Apache will not parse them. (The directive `XBitHack on` in the .conf file pasted above enables this behavior).
79
80 To mark a file as executable, run:
81
82 ```
83 chmod +x foo.html
84 ```
85
86 Replace `foo.html` with the desired file name.
87
88 ## Modifying top-right corner
89
90 In the `/2017/includes/banner.html` find the `...#top-right-desktop
91 start...` section.
92
93 *For register now*
94
95 Include `register-now.html`
96
97 <!-- #top-right-desktop start -->
98 <!--#include virtual="/2017/includes/register-now.html"-->
99 <!-- #top-right-desktop end -->
100
101 *For join LP list form*
102
103 Include `join-list.html`
104
105 <!-- #top-right-desktop start -->
106 <!--#include virtual="/2017/includes/join-list.html"-->
107 <!-- #top-right-desktop end -->
108
109
110 # SECTION 4: SETTING UP A LOCAL DEVELOPMENT ENVIRONMENT
111
112 Apache is required in order to replicate the appearance of the website
113 on the live and staging servers on your machine. If you don't want to
114 install Apache, you can still work on the site, you just won't be able
115 to see what it looks like until you push to the remote.
116
117 Modifying Apache's configuration files and running its executables
118 typically requires root access. So, you will most likely need to run
119 the commands below as the root user using `sudo`.
120
121 *Enable server-side include module*
122
123 ```
124 a2enmod include
125 ```
126
127 If this doesn't work, you may not have Apache installed. Install the
128 package apache2 from your package manager.
129
130 *Create virtual host*
131
132 Create a new file called libreplanet (libreplanet.conf for Apache 2.4) in `/etc/apache2/sites-available` with the following contents:
133
134 ```
135 <VirtualHost *:80>
136 RewriteEngine on
137 ServerName local-dev.libreplanet.org
138 ServerAdmin webmaster@localhost
139 DocumentRoot /local-path/path-to-site
140 <Directory /local-path/path-to-site/>
141 Options Indexes FollowSymLinks MultiViews
142 AllowOverride All
143 Require all granted
144 Order deny,allow
145 deny from none
146 allow from all
147 SSILegacyExprParser on
148 Options +Includes
149 XBitHack on
150 </Directory>
151 ErrorLog /home/owner/libreplanet-static/logs/error.log
152 CustomLog /home/owner/libreplanet-static/access.log combined
153 </VirtualHost>
154 ```
155
156 Replace all instances of `/path/to/libreplanet-static` with the full path to the root directory of your local
157 git repository.
158
159 *Enable virtual host*
160
161 ```
162 a2ensite your-virtual-host
163 ```
164
165 Replace `your-virtual-host` with the name of virtual host file you made (in this case, libreplanet).
166
167 *Restart Apache*
168
169 ```
170 service apache2 restart
171 ```
172
173 *Edit your hosts file*
174
175 Edit your system's `/etc/hosts` file and add the following to the bottom:
176
177 ```
178 127.0.0.1 lp2017.libreplanet.org
179 ```
180
181 *Test*
182
183 Visit <http://lp2017.libreplanet.org/2017> in your web browser. If
184 everything is configured properly, you will see the LibrePlanet 2017
185 site, complete with header, sidebar, and footer.