marklogic-community / RunDMC

MarkLogic application for running a developer site
http://developer.marklogic.com/code/rundmc
Other
17 stars 18 forks source link

(1) Update Q&A page with new code and language #418

Open heymattallen opened 9 years ago

heymattallen commented 9 years ago

This page may require some discussion as suggested changes impact the navigation as well. I have some suggested code below, which needs some review and tweaking. It includes the new copy and links (currently there are broken links to stack overflow), but is also consolidating some content from multiple pages onto the one page. It is written with the assumption that we can also rename the page "Connect" rather than "Q&A" and move content from the section on "People" to go underneath this section, which would help simplify the main navigation.

Suggested code to replace what's currently on the Q&A page:

<div class="row col-md-12">
<div>
<h4>Stack Overflow</h4>
      <p>Get engaged with MarkLogic's vibrant Stack Overflow community where you can search hundreds of questions, and get hundreds of answers. You can <a href="http://stackoverflow.com/questions/tagged/marklogic">search questions and answers tagged for MarkLogic</a>, or you can ask your own specific question. You can also subscribe to the <a href="http://stackoverflow.com/feeds/tag/marklogic" target="_blank">RSS feed</a> to get updates.
    </p>
    <p style="padding-top: 10px; padding-bottom: 20px;"><a class="btn btn-default btn-sm" href="http://stackoverflow.com/questions/tagged/marklogic">Ask a Question on Stack Overflow ›</a></p>
</div>

<hr>

<div>
<h4>Developer Mailing Lists</h4>
<p>Subscribe to our two developer mailing lists. The General Developer mailing list is a public forum for you to ask questions and get answers from other users and MarkLogic engineers. The other mailing list is used to track commits to our open-source projects. You can also search all past developer discussions using <a href="http://marklogic.markmail.org/">MarkMail</a>, an application built on MarkLogic that allows you to search thousands of past email list discussions (also available as a <a href="http://m.markmail.biz/">mobile app</a>.</p>
<p style="padding-top: 10px; padding-bottom: 20px;"><a class="btn btn-default btn-sm" href="/features/samplestack">Subscribe to the General Mailing List ›</a><a style="margin-left:20px;" class="btn btn-default btn-sm" href="/features/samplestack">Subscribe to Commits Mailing List ›</a></p>

<section class="lists">
    <header>
          <h1><img height="31" width="135" alt="MarkMail" src="/images/logo_markmail.png"> MarkLogic Dev General (<a href="/mailman/listinfo/general">subscribe</a>)</h1>
          <strong class="messages">16225</strong>
    </header>
    ...

</section>

<section class="lists">
    <header>
          <h1><img height="31" width="135" src="/images/logo_markmail.png" alt="MarkMail"> Commits (<a href="/mailman/listinfo/commits">subscribe</a>)</h1>
          <strong class="messages">3033</strong>
    </header>
    ...

</section>
</div>

<hr>

<div>
<h4 style="padding-top: 20px; padding-bottom: 20px;">MarkLogic Meetups</h4>
            <script type="text/javascript" src="http://www.meetup.com/embed/map/marklogic/" xml:space="preserve"></script> <div class="topic-worldwide" id="topic-worldwide-marklogic"><div class="header"><h3>MarkLogic Meetups Around the World</h3></div><div style="display: none;" class="topic-map"><iframe height="300" frameborder="no" width="100%" name="embed_iframe" id="embed_iframe" class="mu_embedFrame" scrolling="no" src="http://www.meetup.com/embed/map/content/?map_topics=marklogic"></iframe></div><div class="topic-facts"><table><tbody><tr><td><span class="fact-label">Groups</span><span class="fact-num">16</span></td><td class="first"><span class="fact-label">Members</span><span class="fact-num">1,268</span></td><td><span class="fact-label">Interested</span><span class="fact-num">353</span></td><td><span class="fact-label">Cities</span><span class="fact-num">14</span></td><td><span class="fact-label">Countries</span><span class="fact-num">5</span></td></tr></tbody></table></div><div id="poweredBy" style="text-align:left;font-size:.9em;color:#bbb;;"><p>Powered by <a target="_blank" href="http://www.meetup.com/">Meetup.com </a> <img style="margin-bottom:-4px;padding-left:.5em" src="http://img1.meetupstatic.com/img/7380908240026999701/logo_tiny.gif"></p></div></div><style type="text/css">.topic-worldwide{font-family:verdana,arial,sans-serif;font-size: 75%;color:#272727;white-space: normal !important;}.topic-worldwide .header{padding: 1em ;-moz-border-radius: 5px 5px 0 0;-webkit-border-radius: 5px 5px 0 0;background: #eee;border-style: solid;border-width: 1px 1px 0 1px;border-color: #bbb;}.topic-worldwide .header h3{font-size: 1.75em;margin: 0;padding: 0;}.topic-map{margin: 0 auto;text-align: center;border-style: solid;border-width: 0 1px;border-color: #bbb;}.map-legend{text-align: center;}.legend-items{}.legend-item{font-size: .9em;padding: .25em;height: 20px;display: inline;margin-right: 1em;}.topic-facts {background: #eee;padding: .5em 1em;border-style: solid;border-width: 0 1px 1px 1px;-moz-border-radius: 0 0 5px 5px;-webkit-border-radius: 0 0 5px 5px;border-color: #bbb;}.topic-facts table{margin: 0;width: 95%;}.topic-facts td{border: 0px none;text-align: left;width: 20%;}.topic-facts td .fact-label{font-weight: bold;display: block;}.topic-facts td .fact-num{display: block;font-weight: bold;color: #c33;}#topicMap{width: 100%;height: 100%;}</style>
    <script type="text/javascript" xml:space="preserve">
        $(function() { 
            $(document).ready(function() 
                { $(".topic-map").hide(); 
            }); 
        });
    </script>
<p>MarkLogic User Groups are informal events for users to meet, discuss, and share best practices regionally. This is an easy way to meet peers and learn how to get more out of MarkLogic Server. If there are no user groups in your area, join the <a href="http://developer.marklogic.com/mailman/listinfo/general">general developer mailing list</a> or <a href="mailto:community-requests@marklogic.com">contact us</a> about starting a new one.</p>
      <h5><strong>User Groups in Your Area</strong></h5>
<ul>
              <li><a href="/meet/laxml">LAxML - Los Angeles</a></li>
              <li><a href="/meet/markups">Mark-UPS - Maryland</a></li>
              <li><a href="/meet/mugl">MUGL - London</a></li>
              <li><a href="/meet/novamug">NOVAMUG - Northern Virginia</a></li>
              <li><a href="/meet/nymug">NYMUG - New York</a></li>
              <li><a href="/meet/sohmug">SOHMUG - Southern Ohio</a></li>
              <li><a href="/meet/bmug">BMLUG - Boston</a></li>
              <li><a href="/meet/benelux">Benelux - Amsterdam</a></li>
              <li><a href="/meet/baymug">BAYMUG - San Francisco Bay Area</a></li>
</ul>
</div>
</div>

screenshot of how it should look is attached...

connect page new look and feel

dmcassel commented 9 years ago

This proposal drops the recent questions on Stack Overflow, something Marianne fixed recently. Also, I prefer the current model where SO and mailing lists are separate pages accessed by links on the side. Otherwise, I think content will get pushed down too far and buried.

I'm okay with combining Q&A and People into Connect. I've also been intending to drop Labs, as everything there also belongs under Tools. That will reduce the nav links from 8 to 6.

heymattallen commented 9 years ago

Great, let's move forward with that consolidation plan for 8 to 6!

Regarding the stack overflow links, my main objective is to simplify the call to action, so as long as we can maintain only 1 or two main button links, then I'm fine with it. I don't quite understand your point about the "recent questions" filter though - it looks like we currently only link to the one place on stack overflow (http://stackoverflow.com/questions/tagged/marklogic) which is the newest tags for MarkLogic.

heymattallen commented 9 years ago

If we want to continue including the previews of the stack overflow questions a mailing list topics, we can use the bootstrap collapse feature (http://getbootstrap.com/javascript/#collapse), something like this...

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Preview of Stack Overflow Questions... <i class="glyphicon glyphicon-triangle-bottom"></i>
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>