Currently, posting an Activate url onto Facebook pulls in either nothing (no image shown) or the logo we use on our black navigation bar (which doesn't display correctly as it is white text on transparent background and Facebook has a white background).

From Facebook debugger:
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fportland.activatehub.org%2Fevents%2F1618

Open Graph Warnings That Should Be Fixed
Inferred Property: The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property: The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property: The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.

Several Items, in order of priority:

• Add "User Tutorial" to main Nav Bar - this should redirect to this link: http://activatehub.org/about/how-to-use-activate/adding-events/
• Nav bar wider (probably 4 pixels or so)
• ActivateHub logo larger

There's more. If those three are complete, and you want to rock out on further Nav Bar design, Details and discussion around desired design can be found here:
https://www.pivotaltracker.com/story/show/52593777

Moving to Ruby 2.0 would encourage open source contribution and improve code interpretation.

I've received multiple e-mails today from random people wanting to import their calendars! The video tutorial I made is buried in the Word Press site. This content of this page should be the only thing under "Import Calendar" http://activatehub.org/about/how-to-use-activate/adding-events/

Some links on the website trigger javascript actions. Many of these anchor tags have a fallback URL in case the user has javascript disabled. When an action is performed client-side, it should also update the browser URL with the URL for the server-side action that would've happened had javascript been disabled.

Since we only support relatively modern browsers, this can be done using HTML5 window.history.pushState and/or window.history.replaceState, whichever makes the most sense based on experimentation.

Known anchor tags that are hijacked:

• Event index view switching (/events?view=calendar)
• Map index view switching (/venues?view=map)
• Map index "show all venues" (/venues?all=1)

Create a new form that lets users play with URL query parameters used to customize the events widget.

Routes

New routes in the config/routes.rb file could look something like:

resources :events do
  collection do
    ...
    get 'widget/builder' => 'events#widget_builder'
  end

The above route generates a widget_builder_events_path helper method that can be used in views to reference the page. The widget builder should be linked to from the events index page on the exports sidebar panel (app/views/events/_exports.html.haml)

Form and Preview

The form itself doesn't have to submit any data to the server. It might make more sense to use javascript adn jQuery to hijack the form submission process and generate the iframe embed code client-side. You can then have a dummy iframe that you keep replacing with the new embed code each time the person submits the form. Server-side controller code can be very minimal (4-5 lines to populate instance variables like @topics and @types)

An example of what the jQuery might look like:

$('#events-widget-builder').submit ->
  embedCode = '... src="' + #{widget_events_path.to_json.html_safe} + ...
  ...
  $('#events-widget-preview').html(embedCode)
  false

Fields that should be on the form:

• title: overrides the default title ("You are here..."), ?title= hides the title
• view: the view to show by default, list or calendar
• views: a comma-separated list of views to show in the view switcher (list, calendar for now), if ?views= then hides it
• topic: a comma-separated list of topic names
• type: a comma-separated list of type names

For the topic and type params, you should start with the same look and feel as the other forms on the site. There should also be a text area to copy the iframe embed code.

See the wiki page for a couple of examples.

Standardize on using HAML for all activate theme templates. Convert any remaining ERB templates in the themes/activate/views directory.

Do not convert any of the files in themes/default/views or app/views.

Currently, home splash page is ActivateHub.org

Ideal scenario: user types in URL ActivateHub.org, and is directed to nearest city site based on IP address (Portland.ActivateHub.org or Detroit.ActivateHub.org or SFBay.activatehub.org/startup) If this is complex, for now, ActivateHub.org can redirect to Portland.activatehub.org

Once at city-site, if user clicks on ActivateHub logo on Nav bar, they are taken to our main splash page. The main page can live at URL ActivateHub.com
If you tackle this issue, and need access to DNS, hosts, etc, contact Lindsay!

When a site can't be found, it redirects to the activatehub.org wordpress site which can be confusing.

1. Create a new site_not_found view to display when the domain part of the site doesn't match what was requested, such as when a city is mistyped ("protland.activatehub.org")
2. For cities that have multiple calendars, if the domain part of the site matches what was requested but a calendar wasn't found, it should redirect the the city's primary calendar and display a message that the calendar wasn't found. The primary calendar is the site that matches the domain but with an empty Site#path_prefix value. Assuming an "arts" calendar, if someone visits http://sfbay.activatehub.org/art, it should redirect them to http://sfbay.activatehub.org/ and display a message that says the calendar wasn't found. The city's landing page will eventually include links to all of it's calendars.

"Share this on Twitter, FB, etc" - share option buttons should be on each event page. Should come with shortened URL, and eventually, should form complete 'Tweet' or sentence.

I am missing a few things (also, I don't know where to talk about these, so please move or tell me where to go)

I miss cloning of the event. http://detroit.activatehub.org/events/1457

I miss adding a tag and topic to the event. same ^

I miss the tagging here in organizations: http://detroit.activatehub.org/organizations

and a bug seems to have been introduced, calendar and list, when I am on calendar, sometimes it shows I am on list and vice versa:

I would like to be on the team too! https://github.com/activate/ActivateHub/wiki/Add-New-Team-Member-Checklist

Best, Mark

Add a "Calendars" navigation link to the top horizontal nav bar. Clicking on "Calendars" should display a drop-down or drawer-type interface that lists other available calendars for that city. Clicking on one of the available calendars should take the user to the associated calendar page.

The "Calendars" navigation link should only be displayed if there is more than one calendar for the city/domain.

The exact UI for calendar switching is up for interpretation so, if you can come up with better proposal, please comment with your ideas.

Events and organizations can be filtered by tags, but you should also be able to search for events & orgs in search bar.

Design some CSS overrides to hide the navigation/chrome of the website when printing a page. This is really important for when someone wants to print out the description of an event and the accompanying map.

Unlike the mobile views, and due to how few overrides will be needed, it probably makes the most sense to embed @media ... definitions with the CSS properties themselves. 80% or more of the overrides will probably be in the app/assets/stylesheets/print.scss file and can be written like:

#navbar {
  position: fixed;
  ...

  @media print {
    display: none;
  }
}

Nobody is currently maintaining the wordpress site and it needs a makeover pretty badly. A decision was made to try migrating the content of the wordpress site over to Jekyll and host it in another git repository as part of GitHub Pages. This will make it easier for anyone in the community to help maintain the site, while also maintaining a peer review process.

The goal of this ticket is to take the essence of the wordpress site and re-architect it in whatever way makes sense to the person who decides to tackle the ticket (merging the general and development blogs together, etc). Once most of the content is in Jekyll and its own repository, we can decide where and how to improve on it from there with GitHub tickets attached to that project.

References to get you started:

• http://jekyllrb.com/docs/github-pages/
• https://help.github.com/articles/using-jekyll-with-pages
• http://pages.github.com/

Clicking on "Visit Other City Calendars" should reveal a drop down of other city calendars.

Ideally, This list will generate automatically to correspond with the sites that exist in the Rails Admin ( http://portland.activatehub.org/admin/site )

Ideally, cities with multiple calendars will appear with some sort of indent:
Portland - Civic
Arts
SF Bay - Civic
Tech
Arts
Detroit - Civic

I suspect this should work, since the URLs are currently SFBay.activatehub.org sfbay.activatehub.org/startup sfbay.activatehub.org/arts

This screenshot lives in Drop Box. Holler if you can't access it.

It should be possible to scroll up or down in the calendar and list views and automatically load more events. It should load about a month worth of data per request for more events.

The events list partial should already support generating a calendar for a specific date range so getting this to work should just be the same as requesting the events list page for a specific date range (the date filters already do this) and specifying the view should be rendered without a layout (or surrounding view code -- render the partial directly from the controller?).

Note: it may also be required to re-apply the jQuery on hover() and on click() actions to the newly added events. Not sure of the best approach for doing this is yet.

Inside an individual event listing, if there is a link to event brite or Facebook, clicking on said link takes a user off of Activate. Negative. Keep ActivateHub open, external site opens in a new tab.
Same story for the website URLs of each Organization under the Organization page.

The events sidebar was locked to a fixed position on the screen to make it easier to reuse for quick event descriptions when hovering over an event in the list or calendar. Unfortunately, this sidebar can grow too tall for smaller resolution screens as the number of topics and types increases, especially with the newsletter sign-up box displayed; at some point the "Subscribe / Export / Filter" link will disappear off the bottom of the screen and become inaccessible.

Make it so the newsletter sign-up box scrolls off the page when scrolling down and the rest of the sidebar scrolls up to replace it (not fixed by default). Once the sidebar gets within 85px from the top, when $("#list_filters").offset().top <= 85, add a CSS class that switches the #list_filters sidebar fixed to that position.

There is no requirement to restore scrolling/static positioning; if you can easily detect and restore scrolling so the newsletter box shows up when you get back to the top, that might be nice, but not required for this ticket.

On the events index page, past events are hidden in the list view using CSS, even when searching for past events using the date range search. Past events should be visible when searching by date range.

Adding a DOM class to the <body> or a parent <div> to say that a date-filter is being applied could work with a CSS rule that unhides the events.

Add "Disqus" comment box on each event.

Ideally, users should be able to log-in (probably with OAuth) and RSVP to events, have conversations, upload photos and videos.

Most basic fix: add Disqus so users can comment.

Beacuase eventually, @greenpeace should automatically be Tweeted when an event of there's is Tweeted, etc.

Right now, markdown formatted text is converted to HTML (or not converted at all, see #25) but everything appears as plain text. Text is not bold, heading tags are not a different size, etc.

Create a .markdown { ... } css class and add some additional styling so the generated HTML looks a bit better.

Right now the events widget people can embed in their site is a fixed size and people will have to scroll inside the iFrame in order to see all events. It would be nice to make the iFrame automatically resize to fit its contents. In order to do this, it looks like there needs to be javascript code embedded both inside the iFrame and on the parent site.

We should be able to include a little bit of javascript code along with the iFrame embed code, which most people would be okay copying and pasting to their site; anything more complicated (them hosting a separate .js file) will probably not work. Many examples I've seen use jQuery and we can't assume all sites will have it available to use.

As a starting point, check out the following StackOverflow questions:

• http://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content
• http://stackoverflow.com/questions/819416/adjust-width-height-of-iframe-to-fit-with-content-in-it

Note that we don't really care about dynamically controlling the width of the iFrame, just the height; width="100%" or style="width:100%;" is probably sufficient for most use cases.

The Google Analytics tracking code is currently hard-coded into the themes/activate/views/layouts/application.html.haml file:

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-28297028-1']);
_gaq.push(['_setDomainName', 'activatehub.org']);
_gaq.push(['_trackPageview']);

At a minimum, the domain should be dynamic, based on the @current_site instance variable and the account ID should be configurable using an environment variable. If no environment variable is specified then it should disable Google Analytics tracking altogether. There should be no default account ID; the default state should be to disable GA tracking.

A more ideal, and possibly easier, solution would be to look into using the rack-google-analytics gem: https://github.com/leehambley/rack-google-analytics

For fields that are supposed to support markdown formatting, ensure that every place that data is displayed passes through the format_description helper. Also ensure each of these fields has a hint that indicates that markdown can be used. If there's not enough room due to another hint, add something like the following at the end:
<a href="http://www.simpleeditions.com/59001/markdown-an-introduction">Markdown</a> enabled.

Fields to verify include:

• Event#description
• Event#venue_details
• Venue#description
• Venue#access_notes

Beyond the HTML views, you should also double-check all of the exports to ensure they are also performing conversions.

Need a flag associated with the Source model that indicates whether the source is associated with a single event (some Facebook URLs, meetup.com, etc) or whether it should be monitored on an ongoing basis, even if there are no future events being returned by the feed. We could count the number of events associated with the source (Source#events.count), but it it can only prove that it is a multi-event source, not that it isn't; a multi-event source could still return a single event.

How this flag will be used: Single event sources will stop being monitored as soon as the event is over and multi-event sources will stop being monitored after a period of inactivity without any future events listed (3 months) and may be monitored less frequently (once every 3-5 days) if there are no upcoming events. Monitoring and expiring of sources is out of scope for this ticket.

The default events list view was improved to include organization name, topics and types associated with each event. The topics and types drill-down list views should reuse the default event list partial, currently themes/activate/views/events/_calendar.html.haml

The drill-down pages should also include the sidebar and have the same date ranges used by the default event list view.

I just cloned the ActivateHub presentation event 5 times. It shows up on the calendar, but when I clicked on the Organization only the original instance appeared. For each cloned instance, I had to manually enter ActivateHub as the Org and re-select appropriate types and topics.

This ticket should follow or be done at the same time as issue #25. When someone adds a link to one of the following fields, those links should get the rel="nofollow" property added to them:

• Event#url
• Event#description
• Event#venue_details
• Venue#url
• Venue#description
• Venue#access_notes
• Source#url

This should be done server-side as the primary user of this information is search engines; we want to discourage the site from being used to increase another site's pagerank via spamming. See: https://support.google.com/webmasters/answer/96569?hl=en

The easiest solution I can find involves using Nokogiri to parse the XHTML and then add the property to each link. See the following for an example:
https://github.com/tribut/juvia/commit/6bfadb0c88cad6bea65011343c2653b65c779e4d

There's only one field I can think of where we might not want to add the rel="nofollow" property to which is Organization#url. It would be nice for search engines to pick up the relationship ActivateHub and the organizations we try and help serve.

When sharing an event on twitter, it would be nice to take advantage of twitter cards to show additional information in the tweet. See:
https://dev.twitter.com/cards
https://dev.twitter.com/docs/cards

When using a mobile browser and pinching to zoom, the top navbar resizes with the content. This starts to look very bad, especially when the screen is just wide enough that the navbar is still in a fixed position; the navbar starts to take up a larger portion of the screen vertically and starts covering up the content.

If someone is on the calendar view of the events index page and they click to show hidden events ("+ 3 more"), a CSS height property is set explicitly if the first day of the month also appears during the same week. This is to ensure the first day of the month has a dashed left-border that extends the entire height of the longest div.

From app/assets/javascripts/events.coffee:

$('.show-more').click ->
  ...
  # expand height of first day of month so month divider css stays connected
  $d1 = $day.siblings('.day.d1') # only find first day if in same week
  if $day.outerHeight() > $d1.outerHeight()
    $d1.css('height', $day.outerHeight())

This explicit height causes issues when a person then switches back to the list view as it causes the events list for the first of that month to be either too long or too short to fit all the events.

When switching between views, any explicit style="..." attributes associated with days should be cleared. Haven't tried it but perhaps something like the following could be used:

$(".day[style]").attr('style', null) # update: there also appears to be a removeAttr() method

It works that way in the Add Event field

If you change the topics or types on an event or organization page, it does not reflect those changes on their respective preview views.

The easiest way to recreate this bug is to add a new event, select a couple topics and types then click "Preview". The form retains the correct values across page loads but the preview believes those fields are blank.

Create a widgetized version of the calendar view that can be embedded in other websites via an iframe. The widgetized view should include the following:

• Title of calendar: "Activate! Bay // Arts" (top-left)
• "Calendar | List" view switcher (top-right)
• List of events

It should not include any sidebars or other navigation elements. Clicking on an event should open a link to the event on the activate site in a new tab.

It should be possible to reuse the themes/activate/views/events/_calendar.html.haml partial and themes/activate/{javascripts,stylesheets}/calendar.* assets with minimal changes. Changes that will might need to be made:

• a widget boolean that can be passed to the calendar view partial so we can avoid including event fields we won't use (i.e. the hidden description and absolute event date range fields). This would help reduce the amount of data that gets transferred.
• move mobile-desktop switching overrides (< 820px) into a separate assets that do not get included in the widgetized version; this is because the calendar might get embedded in a space < 820px where it might look okay as a monthly calendar but, due to assuming other interface elements exist, decides the calendar view is not viable.

It must utilize page caching so we do not regenerate the entire event list each time someone visits a site with the embedded calendar.

On wider screens (> 515px) the top menu shows the logo followed by menu items. On narrow screens (< about 415px), the menu is collapsed into a single button so the menu bar has the logo and the menu button.

However, in between those values, the screen is narrow enough that it pushes the menu items onto a second line as shown in the screenshot.

Expected behavior: collapse all menu items into one button when the menu items cannot fit on the same line as the logo.

Screenshot taken while testing with the Dimensions App:

The original calagator codebase allowed you to change the timezone as an application configuration variable (in config/application.rb), but it didn't do a very good job at using timezone-aware methods; it makes the assumption that the computer's system timezone also matches the application timezone. For example, anything that is Time.parse will use the system time, whereas Time.zone.parse will use the timezone currently set within the application (the latter is what we want).

Due to the multi-tenancy nature of ActivateHub and that many of the tenants could be in a different timezone than the application or system timezone (there's a Site#timezone attribute), we need to ensure:

• All Time.*, Date.* and DateTime.* methods respect the currently set timezone (Time.zone)
• The site's timezone is set at the start of every web request
• The site's timezone is set whenever we iterate over site-specific model objects in rake tasks (i.e. inside the sources:import:all rake task)
• All SourceParser models parse times relative to the site the source is associated with, and also parses as UTC and correctly converts to that timezone as necessary.
• The application's timezone is set to UTC so that all times gets stored in the database in UTC/GMT time. A migration script may be necessary to shift times already in the database so they are also in UTC.

When someone visits a city's landing page (http://sfbay.activatehub.org/), they are presented with the event list for the primary calendar (the activist calendar in most cases).

1. If there is more that one calendar for that city then a second horizontal bar should be displayed just below the dark gray one. This bar's background color or border should be in an attention-getting color such as yellow or orange and should have a link that says something like "There's more! Learn about other calendars..." with a dismiss link "(x)" on the right edge.

2. If the user click on the dismiss link, it should hide second bar and set a cookie so it doesn't reappear on subsequent visits.

3. If the user clicks on the learn more link, then an introduction message should be displayed along with a list of calendars currently available for that city. Check this issue's comments section below for actual introduction message. If an introduction message hasn't been drafted yet then, for this purposes of this ticket, use the following placeholder text for approximating the size/length of the message:

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at turpis nisi. Pellentesque adipiscing aliquet auctor. Etiam nunc elit, blandit non scelerisque quis, sodales et dolor. Nunc justo purus, consequat eu nisi a, cursus euismod tellus.

Combined topic and type tags not to exceed 7 per unique event ID.

Currently, an organization can sync a calendar and their events will show up.... often without a location. Many organizations have all their events at one location. (examples: In Other Words Bookstore, or Food for Thought Coop). On the "Link a Calendar " page, add an option to show all events at one location, User can click a box that says "Show all Events at this Location" with a field to enter address.

Upon nightly import, each imported event should automatically be given this location.

For each source parser...

Write tests with non-UTF-8 source data and ensure all data gets converted to UTF-8, with non-convertible characters stripped out, before it's parsed or assigned to events and venues. Tests should include mixed UTF-8 with non-UTF-8 characters ("Ба\x97") and should ensure only UTF-8 characters survive the parsing.

orig_data = "Ба\x97" # with mixed UTF-8 and windows-1250 em-dash (0x97)

# bad data can make it into a UTF-8 string undetected and it's a royal pain to strip
# out invalid characters once ruby thinks it's UTF-8; you either have to convert
# it to another encoding and back, or iterate over the string, character by character.
# there are shortcuts if you only care about ASCII, but we want to support full UTF-8
converted_data = orig_data.chars.select(&:valid_encoding?).join

# alternative, converting to another compatible encoding and back
# converted_data = orig_data.force_encoding('UTF-8') \
#   .encode('UTF-32LE', :undef => :replace, :invalid => :replace, :replace => '') \
#   .encode('UTF-8')

expect { converted_data.encoding }.to eq Encoding::UTF_8
expect { converted_data.valid_encoding? }.to be_true

Any tests and source parser changes should be pushed back up to Calagator as part of the following upstream bug: calagator/calagator#28

Redirect

If the location of a calendar moves, we need a way to automatically take people to the new location of that calendar. The URL of the calendar in the user's browser should change to the new or correct URL using a redirect and any additional path parts and parameters should be retained. Examples:

• Rename sfbay.activatehub.org/startup/events/6 to sfbay.activatehub.org/tech/events/6
• Redirect commonly logged typos such as /art to /arts
• Redirect pdx.activatehub.org to portland.activatehub.org

Alias

If a site has a vanity URL or domain, it would be nice for people to optionally use that to access the site. Aliases should not redirect to the real calendar, but rather pretend that the calendar is at the aliased URL. Examples:

• Alias activatepdx.org to portland.activatehub.org

Implementation

The domain and site_prefix attributes of the Site model should be moved into a SiteURL model that has a Site.has_many :SiteUrls relationship. The domain and site_prefix can be combined into a single attribute called url or base_url. The new model could also have an attribute called relationship that allows the values primary, redirect or alias. With this information, the ApplicationController should be able to determine whether to redirect the user to the primary site URL or handle the request normally.

After a fresh git clone of the ActivateHub repo, followed by a "rake db:migrate", I get the following error, which appears to be caused by a table reference ("versions v") which contains an alias ("v"). This would be valid in MySQL syntax but not SQLite syntax.

rake db:migrate
[RailsAdmin] RailsAdmin initialization disabled by default. Pass SKIP_RAILS_ADMIN_INITIALIZER=false if you need it.
==  AddSiteIdToVersions: migrating ============================================
-- add_column(:versions, :site_id, :integer)
   -> 0.0238s
rake aborted!
An error has occurred, this and all later migrations canceled:

SQLite3::SQLException: near "v": syntax error:       
UPDATE versions v SET site_id = (
        SELECT i.site_id FROM events i WHERE i.id = v.item_id
      ) WHERE v.item_type = 'Event';

      UPDATE versions v SET site_id = (
        SELECT i.site_id FROM venues i WHERE i.id = v.item_id
      ) WHERE v.item_type = 'Venue';

      UPDATE versions v SET site_id = (
        SELECT i.site_id FROM sources i WHERE i.id = v.item_id
      ) WHERE v.item_type = 'Source';

We used to have this capability, so hopefully it still exists somewhere. Keep the visible list of tags to choose from, but at end of list, open box for create new topic.

For now, it can link to this: http://activatehub.org/about/get-your-own-aggregated-calendar/

Here is marked up screenshot of how the Nav Bar should look:

Yep. True story

At SFBay.activatehub.org/startup
If I click on organizations, it takes me to SFBay.activatehub.org/organizations.
Then all those orgs and their calendars are added to the main SFBay site, instead of the startup site.
There is a page SfBay.activatehub.org/startup/organization
Same is true for venues, events, etc. Every link on the 'startup" specific site, takes a use away from the 'startup' site to the standard one. Problem.

This is a fairly generic ticket and is meant to be "take a stab at some of the low hanging fruit". The extent of our caching for dynamic content is as follows:

• The events index page caches the list of events using a cache fragment (see app/views/events/index.html.haml). If anything changes for any events or venue, for any reason, all caching is cleared for the entire site (see app/observers/cache_observer.rb).

That's it.

Also, any changes to any events or venues on any site clears the cache for all sites. Not scalable.

Scope of Ticket

1. Pick some low hanging fruit. The show pages for events and venues seem like obvious choices to start with. See the following article by DHH for inspiration (we will be using memcached on production):
   http://37signals.com/svn/posts/3113-how-key-based-cache-expiration-works (also has 67 comments, worth reading)
2. Try to get the existing caching for the events index page to not clear the entire caching backend. Using the key-based-cache expiring in DHH's article, you could instead rely on the maximum Event#updated_at timestamp. You would, however, first have to tie the model objects together so they update the event's timestamp as necessary. The site has a fairly high read vs. edit ratio so slowing down write performance is not a concern.
3. Create new tickets as you come across things that could be optimized but need more significant code changes to do correctly.