ocaml / v2.ocaml.org

Implementation of the ocaml.org website.
http://ocaml.org
Other
323 stars 349 forks source link

UI issues on News column on home page #1499

Open shreyaswikriti opened 3 years ago

shreyaswikriti commented 3 years ago

On the https://www.ocaml.org/ page, there seemed to be a confusing UI on the news column.

image

here is the proposed solution

image

ozmos commented 3 years ago

Hi I'd like to look after this issue please

ozmos commented 3 years ago

I am trying to find a template file which generates the news feed but it looks like the news feed content is hard coded into the index.md file:

<!-- Commented out between workshops -->
<li class="announcement"><article>
    <h1><a title="OCaml Users and Developers Workshop"
               href="/meetings/ocaml/2020/">OCaml 2020</a></h1>
    <p>August 28, 2020</p>
    <a title="OCaml Users and Developers Workshop"
             href="/meetings/ocaml/2020/">
            <img alt="" src="/img/announcement.svg" class="svg" />
            <img alt="" src="/img/announcement.png" class="png" />
    </a>
</article></li>
<li class="announcement"><article>
    <h1><a title="Release of OCaml {{! get LATEST_OCAML_VERSION !}}"
               href="/releases/{{! get LATEST_OCAML_VERSION !}}.html"
            >Release of OCaml {{! get LATEST_OCAML_VERSION !}}</a></h1>
        <p>February 24, 2021</p>
        <a title="Release of OCaml {{! get LATEST_OCAML_VERSION !}}"
              href="/releases/{{! get LATEST_OCAML_VERSION !}}.html">
            <img alt="" src="/img/announcement.svg" class="svg" />
            <img alt="" src="/img/announcement.png" class="png" />
    </a>
</article></li>
<li class="announcement"><article>
    <h1><a title="OCaml Weekly News"
               href="/community/cwn/" >OCaml Weekly News</a></h1>
        <p>{{! cmd script/weekly_news --date !}}</p>
        <a title="OCaml Weekly News" href="/community/cwn/">
            <img alt="" src="/img/announcement.svg" class="svg" />
            <img alt="" src="/img/announcement.png" class="png" />
    </a>
</article></li>

            </ul>
            {{! cmd script/rss2html -n 4 --headlines http://planet.ocaml.org/rss20.xml !}}
            <p><a href="community/planet/">More...</a></p>
        </section>
    </div>
    <div class="row">
        <section class="span6 condensed">
            <h1><a href="learn/taste.html">A taste of OCaml</a></h1>
            ((! cat template/tryocaml.html !))
            ((! input template/front_code_snippet.html !))
            <p>OCaml is a lot more powerful than this simple example shows. See <a href="/learn/taste.html">more examples</a>!</p>
        </section>
        <section class="span6 condensed">
            <h1><a href='http://opam.ocaml.org/packages/index-date.html'>Packages</a></h1>
            ((! input template/front_package.mpp !))
        </section>
    </div>

Is there a template which generates this markdown which I should be altering to change the markup? I'm guessing the news feed gets updated regularly so it doesn't make sense to change this markup directly. Otherwise I can try to to fix this issue with javascript if the maintainers of the project aren't opposed to this approach.

shreyaswikriti commented 3 years ago

Hii @ozmos, I am an Outreachy applicant here. So better ask mentors. Thank you for showing interest . @patricoferris @pitag-ha kindly look into this.

patricoferris commented 3 years ago

Thanks for the brilliantly explained issue @shreyaswikriti -- very clear 👍

There's a linked PR in the works https://github.com/ocaml/ocaml.org/pull/1506

ozmos commented 3 years ago

Thanks @shreyaswikriti I have received some useful feedback in the pull request.