Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

GH-89 Newsletter Landing Page and related features. #90

Merged
merged 114 commits into from
Jul 23, 2018
Merged

GH-89 Newsletter Landing Page and related features. #90

merged 114 commits into from
Jul 23, 2018

Conversation

keithmifsud
Copy link
Contributor

@danielepolencic This is just a placeholder PR for all tasks in progress related to the newsletter. I will assign this for your review when ready.

@keithmifsud keithmifsud self-assigned this Jun 6, 2018
@keithmifsud keithmifsud mentioned this pull request Jun 6, 2018
Closed
80 tasks
@keithmifsud
GH-89 added some temp dev notes to readme in newsletter.
f28ed4a
@keithmifsud
GH-89 Configured the newsletter collection.
19b0758
@keithmifsud
GH-89 Added 6 temp newsletter issues for texting the newly added news…
776c0ca 
…letter archive page.
@keithmifsud
GH-89 Removed the issue limit on the archive page.
54320b4
@keithmifsud
GH-89 removed testing newsltter issues.
47e7648
@keithmifsud
GH-89 Initial newsletter landing page.
03b29c0
@keithmifsud
GH-89 Testing the skeleton landing page.
6f56890
@keithmifsud
GH-89 Added a link to the archive on the landing page for testing.
a671e7c
@keithmifsud
GH-89 Fixed typo in landing page and ignored editor settings from git.
a009111
@keithmifsud
GH-89 Added newsletter link to top nav.
a58124f
@keithmifsud
GH-89 Added link to newsletter in footer.
7d46347
@keithmifsud
GH-89 Listed the newsletter's sections in documentation.
1568270
@keithmifsud
GH-89 Added docs in how to start drafting a new issue.
7cbae59
@keithmifsud
GH-89 Added docs for the expected use of the editor's pick section.
11a84f1
@keithmifsud
GH-89 Added more details (for tetsing) to the dummy issue and updated…
6460b94 
… the docs accordingly.
@keithmifsud
GH-89 Added default layout to newsletter issues.
368a399
@keithmifsud
GH-89 Developed an initial newsletter layout.
bdf91de
@keithmifsud
GH-89 Design an initial issue template.
9f86a4b
@keithmifsud
GH-89 Added the editor's picks to the issue template.
aba1b12
@keithmifsud
GH-89 Fixed typos in docs
5179616
@keithmifsud
GH-89 fixed issue with og description in template and docs.
9111ac1
@keithmifsud
GH-89 Fixed typos in docs
ebbd234
@keithmifsud
GH-89 Doc writing.
ded26d9
@keithmifsud
GH-89 Added section title to editor's pick
5e528b2
@keithmifsud
Copy link
Contributor Author

@danielepolencic Please review the design/layout of the landing page.

I think we need a better image of the "browser window" iFrame background. I also excluded it from medium and small devices, but we may add an iPhone frame or something similar instead. I'm not very satisfied with my work on the iFrame but do not know how I can improve it. Please do enlighten me if you have a 🕯 handy 😃

I think we should leave the dummy issue when merging the PR. However, I want to rename it to issue-0 and ignore it in the archive page. The reason for dummy issue is so we can show it in the iFrame. The latest issue will get automatically displayed once published.

I also think that we should hide the link to the archive until there's issue-1.

Currently, the contributors are set manually in front-matter, but #95 will fix this once we have some real contributors. I already figured out the code for it but decided to remove it for now because we cannot test it properly.

The form integration with SendInBlue works.

@danielepolencic
Copy link
Contributor

  • If we can, we should reuse the SVG for the browser window. In particular, you only need the bar. The body of the window is just a grey <div>. Code for the browser window as SVG:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1202" height="735" viewBox="0 0 1202 735">
  <defs>
    <polygon id="path-1" points=".363 .119 1043.328 .119 1043.328 53.187 .363 53.187"/>
    <polygon id="path-3" points="0 669.881 1043.698 669.881 1043.698 .5 0 .5"/>
  </defs>
  <g id="Artboard" fill="none" fill-rule="evenodd">
    <g id="Page-1" transform="translate(79 33)">
      <g id="Group-3" transform="translate(0 .381)">
        <mask id="mask-2" fill="#fff">
          <use xlink:href="#path-1"/>
        </mask>
        <path id="Fill-1" fill="#C8C8C8" d="M1033.56195,0.11885 L10.12845,0.11885 C4.73595,0.11885 0.36345,4.49135 0.36345,9.88535 L0.36345,53.18735 L1043.32845,53.18735 L1043.32845,9.88535 C1043.32845,4.49135 1038.95595,0.11885 1033.56195,0.11885" mask="url(#mask-2)"/>
      </g>
      <path id="Fill-4" fill="#F2F2F2" d="M1033.55745,669.5057 L10.14045,669.5057 C4.72995,669.5057 0.37545,665.1512 0.37545,659.7392 L0.37545,106.2032 C0.37545,100.8137 4.72995,96.4382 10.14045,96.4382 L1033.55745,96.4382 C1038.94845,96.4382 1043.32395,100.8137 1043.32395,106.2032 L1043.32395,659.7392 C1043.32395,665.1512 1038.94845,669.5057 1033.55745,669.5057"/>
      <mask id="mask-4" fill="#fff">
        <use xlink:href="#path-3"/>
      </mask>
      <polygon id="Fill-6" fill="#E6E6E6" points=".363 132.519 1043.328 132.519 1043.328 53.569 .363 53.569" mask="url(#mask-4)"/>
      <path id="Fill-8" fill="#C8C8C8" d="M71.0424,103.34285 C71.8344,102.56885 79.5789,94.43735 79.5789,94.43735 C80.0019,94.02485 80.2149,93.48335 80.2149,92.94335 C80.2149,92.40185 80.0019,91.86035 79.5789,91.44785 C79.5789,91.44785 71.8344,83.31635 71.0424,82.54385 C70.2504,81.76985 68.8239,81.71885 67.9779,82.54385 C67.1334,83.36885 67.0659,84.52085 67.9794,85.53185 L75.0834,92.94335 L67.9794,100.35485 C67.0659,101.36735 67.1334,102.51935 67.9779,103.34285 C68.8239,104.16635 70.2504,104.11535 71.0424,103.34285" mask="url(#mask-4)"/>
      <path id="Fill-9" fill="#C8C8C8" d="M36.77235,82.54355 C35.98035,83.31905 28.23585,91.44905 28.23585,91.44905 C27.81285,91.86155 27.60135,92.40305 27.60135,92.94455 C27.60135,93.48455 27.81285,94.02455 28.23585,94.43855 C28.23585,94.43855 35.98035,102.57005 36.77235,103.34405 C37.56435,104.11505 38.99085,104.16905 39.83685,103.34405 C40.68135,102.51905 40.74885,101.36855 39.83535,100.35605 L32.73135,92.94455 L39.83535,85.53305 C40.74885,84.52205 40.68135,83.37005 39.83685,82.54355 C38.99085,81.71705 37.56435,81.77105 36.77235,82.54355" mask="url(#mask-4)"/>
      <path id="Fill-10" fill="#E6E6E6" d="M122.08845,53.9666 C136.47945,53.9726 135.88095,16.9571 147.87645,16.9571 L285.06945,16.9676 C299.46045,16.9616 298.86195,53.9786 310.85745,53.9786 L122.08845,53.9666 Z" mask="url(#mask-4)"/>
      <path id="Fill-11" fill="#C8C8C8" d="M128.7309,91.99985 L124.7334,91.99985 L124.7049,91.73735 C124.1094,86.10335 119.3844,81.85685 113.7174,81.85685 C107.6214,81.85685 102.6609,86.82935 102.6609,92.94185 C102.6609,99.05735 107.6214,104.02985 113.7174,104.02985 C116.2104,104.02985 118.5639,103.21835 120.5259,101.67785 L121.1109,101.21885 L118.4034,98.32235 L117.9144,98.68385 C116.6874,99.58535 115.2354,100.06385 113.7174,100.06385 C109.8039,100.06385 106.6224,96.87035 106.6224,92.94185 C106.6224,89.01635 109.8039,85.82285 113.7174,85.82285 C117.1524,85.82285 120.0879,88.27685 120.6939,91.65485 L120.7569,91.99985 L116.3334,91.99985 L122.5314,98.91035 L128.7309,91.99985 Z" mask="url(#mask-4)"/>
      <path id="Fill-12" fill="#70B34A" d="M89.4936,26.67515 C89.4936,32.72765 94.4031,37.63715 100.4586,37.63715 C106.5081,37.63715 111.4176,32.72765 111.4176,26.67515 C111.4176,20.62265 106.5081,15.71315 100.4586,15.71315 C94.4031,15.71315 89.4936,20.62265 89.4936,26.67515" mask="url(#mask-4)"/>
      <path id="Fill-13" fill="#DDAA54" d="M52.38315,26.67515 C52.38315,32.72765 57.29265,37.63715 63.34665,37.63715 C69.39765,37.63715 74.30715,32.72765 74.30715,26.67515 C74.30715,20.62265 69.39765,15.71315 63.34665,15.71315 C57.29265,15.71315 52.38315,20.62265 52.38315,26.67515" mask="url(#mask-4)"/>
      <path id="Fill-14" fill="#D5655D" d="M15.09705,26.67515 C15.09705,32.72765 20.00655,37.63715 26.06055,37.63715 C32.11155,37.63715 37.02105,32.72765 37.02105,26.67515 C37.02105,20.62265 32.11155,15.71315 26.06055,15.71315 C20.00655,15.71315 15.09705,20.62265 15.09705,26.67515" mask="url(#mask-4)"/>
      <path id="Fill-15" fill="#C8C8C8" d="M1018.014,99.71885 L995.124,99.71885 C994.071,99.71885 993.2175,100.72835 993.2175,101.97785 C993.2175,103.22435 994.071,104.23835 995.124,104.23835 L1018.014,104.23835 C1019.0655,104.23835 1019.9205,103.22435 1019.9205,101.97785 C1019.9205,100.72835 1019.0655,99.71885 1018.014,99.71885 M995.124,86.16635 L1018.014,86.16635 C1019.0655,86.16635 1019.9205,85.15685 1019.9205,83.90885 C1019.9205,82.65935 1019.0655,81.64835 1018.014,81.64835 L995.124,81.64835 C994.071,81.64835 993.2175,82.65935 993.2175,83.90885 C993.2175,85.15685 994.071,86.16635 995.124,86.16635 M1018.014,90.68435 L995.124,90.68435 C994.071,90.68435 993.2175,91.69385 993.2175,92.94185 C993.2175,94.18985 994.071,95.20085 995.124,95.20085 L1018.014,95.20085 C1019.0655,95.20085 1019.9205,94.18985 1019.9205,92.94185 C1019.9205,91.69385 1019.0655,90.68435 1018.014,90.68435" mask="url(#mask-4)"/>
      <path id="Fill-16" fill="#FFF" d="M979.78155,113.52275 L142.75305,113.52275 C141.26955,113.52275 140.05605,112.30925 140.05605,110.82575 L140.05605,75.05975 C140.05605,73.57775 141.26955,72.36425 142.75305,72.36425 L979.78155,72.36425 C981.26355,72.36425 982.47855,73.57775 982.47855,75.05975 L982.47855,110.82575 C982.47855,112.30925 981.26355,113.52275 979.78155,113.52275" mask="url(#mask-4)"/>
      <polygon id="Fill-17" fill="#E6E6E6" points="961.122 98.44 968.855 104.472 965.627 95.098 973.635 89.454 963.905 89.692 961.122 80.173 958.338 89.692 948.609 89.454 956.618 95.098 953.39 104.472" mask="url(#mask-4)"/>
    </g>
  </g>
</svg>
  • the content of the newsletter should be scrollable. I can see that there's an iframe, but I can't scroll it. Not sure if I'm doing something wrong.
  • ok for issue-0
  • it's ok for the contributors

This looks really nice!

@keithmifsud
Copy link
Contributor Author

Thank you @danielepolencic for your feedback. Yes, the design is excellent. This is your doing. I also think it's really nice and as I said before, this is a newsletter I'll be looking to read :)

  • iFrame scroll is fixed. I had it turned off as I thought that's what you wanted.

  • I renamed the dummy issue to issue-0. This is now excluded from the archive page and will not be indexed by search engine robots.

  • I also added a condition to the landing page s that the link to the archive page "Missed an issue? ...." is hidden unless there's more than one issue.

  • I replaced the browser png with the svg but I still don't know how to scale it in a way for it to fit both medium and small screens. If you want this included, please guide me a little ⛑

Please check the "weekly" email address as per #89 as it's not working.

Other than that, we can merge this after I finalise the docs.

@danielepolencic
Copy link
Contributor

You can inline the SVG rather than using it as a background in CSS. that should do the trick? (as long as you remove with and height from the SVG)

@keithmifsud
Copy link
Contributor Author

Thanks, @danielepolencic Updated the SVG and applied it to smaller screens. I still don't like how it is displayed on smaller screens because I don't think it makes sense to preview a desktop browser on a mobile device!

@keithmifsud keithmifsud changed the title GH-89 Just a placeholder GH-89 Newsletter Landing Page and related features. Jul 21, 2018
@keithmifsud keithmifsud merged commit e565f8d into master Jul 23, 2018
@keithmifsud keithmifsud deleted the GH-89 branch July 23, 2018 08:48
@keithmifsud keithmifsud restored the GH-89 branch July 23, 2018 08:49
@keithmifsud
Copy link
Contributor Author

@danielepolencic Please check news@learnk8s.io email address setup. I received a bounced message as soon as I merged the PR 😢

@danielepolencic danielepolencic deleted the GH-89 branch July 23, 2018 09:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@danielepolencic danielepolencic danielepolencic approved these changes

Assignees

@keithmifsud keithmifsud

Labels
design marketing programming
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@keithmifsud @danielepolencic