[RFC] <#239> Add Contributor Calendar #293

federicobucchi · 2023-05-01T17:18:30Z

Motivation:

This PR has been made in relation to this issue: #239

Please leave feedbacks about the scaffold and we will push new changes.

Note:

Design of the calendar is not final (there are going to be color adjustments)
Currently the events in the calendar are placeholders.. we are working on adding real events soon
More event fields will be displayed in the RSS feed, in the calendar event details UI and in the iCal data (it will be done when we have all the first batch of real events to add)
The web components repository is still private, it will be opened in the near future (but after the inclusion of this Calendar on the website)

The following PR is:

Adding a new menu link called "Calendar"
Adding a new route/calendar
Include a web components library with currently only 2 web components (<swift-calendar /> and <swift-modal />) that eventually will be shared for contributions (<swift-modal /> is used inside <swift-calendar /> for event details)
- Showing a calendar like view with days/months, a list of events by month view and an event details view
Supporting light and dark mode
Supporting different viewports
Allowing owners to change their calendar via a YAML file
Allowing viewers to download an iCal as a subscription so viewers can subscribe to the entire calendar downloading an .ics file and deciding how often to pull for updates
Adding a new link (RSS icon) to allow users to subscribe to changes to the calendar (the link/icon is not visible in the screenshots below just because the screenshots have not been updated after this addition)

Modifications:

Updated README.md to indicate what YAML file users can modify to edit/add/remove events to the calendar
Updated existing files to add new menu item and new route /calendar
Added _data/calendar.yml (file that users can modify to edit/add/remove events to the calendar)
Added files and assets of the web components in a new folder assets/javascripts/swift-web-components/
Added Jekyll generator for SwiftEvents.ics (generated .ics for viewers to download as subscription)

Result:

Desktop (Light Theme)

Desktop (Dark Theme)

Mobile (Light Theme)

Mobile (Dark Theme)

dempseyatgithub · 2023-05-01T18:16:49Z

First, thank you for the work you've put into this. I think a calendar will be very beneficial for the community.

Include a web components library with currently only 2 web components (<swift-calendar /> and <swift-modal />) that eventually will be shared for contributions (<swift-modal /> is used inside <swift-calendar /> for event details)

Could you give us an overview of how you are envisioning the web components library for the site to work overall?

Is the intent for the web components to be a separate public repository or would they be added to the swift-org-website repository?

The web components repository is still private, it will be opened in the near future (but after the inclusion of this Calendar on the website)

Is there a reason the implementation of the web components will be private until after we've already added them to the site? It seems like that should be part of the PR review for this addition.

Include a web components library with currently only 2 web components (<swift-calendar /> and <swift-modal />)

One other point is that with the names swift-calendar and swift-modal I initially thought that possibly the components were somehow written in Swift.

Once the Swift.org infrastructure moves to something implemented in Swift, this might be more of a point of confusion.

It might be more clear to use swift-org as the prefix: swift-org-calendar, swift-org-modal.

yakatyansh · 2023-05-02T08:56:42Z

@federicobucchi I see you have pushed a calendar, any help or addition I can do to this ?
I hope you remember me

alexandersandberg

This is a great start, @federicobucchi! Well done.

I noticed that the events modal needs some height adjustments when opened with the calendar with the events view enabled.

This seems to be due to the modal not being able to extend outside the calendar component, and the calendar component being very small when only displaying events (as setting an explicit height on the calendar component fixes this).

federicobucchi · 2023-05-02T17:16:03Z

@dempseyatgithub

Could you give us an overview of how you are envisioning the web components library for the site to work overall?

The component library is going to be (eventually) a standalone mono repo that will have components developed in Stencil / TypeScript but exported for being included directly on "native" web page projects or frameworks like React, Vue, Angular (trying to be as agnostic as possible).

Is the intent for the web components to be a separate public repository or would they be added to the swift-org-website repository?

Correct, the web components will be (eventually) a separate repository for development and the components will be eventually importable in different ways: via a script tag or an NPM package. For this first phase, I have only exported the distribution files and included them directly in the website (this is why they are just all minified). With the current Ruby / Jekyll app it seems the approach to go, but, even if we redesign the website to use another framework or we decide to write the website in Swift, these web components can still be imported and used in the new project.

Is there a reason the implementation of the web components will be private until after we've already added them to the site? It seems like that should be part of the PR review for this addition.

I will update you about this later on, gathering info and things

One other point is that with the names swift-calendar and swift-modal I initially thought that possibly the components were somehow written in Swift.
Once the Swift.org infrastructure moves to something implemented in Swift, this might be more of a point of confusion.
It might be more clear to use swift-org as the prefix: swift-org-calendar, swift-org-modal.

True, naming can be changed. I didn't want to have something to broad like web-components but also I didn't want to be too specific swift-org because I wanted these to potentially be used around more swift websites/resources etc (so not really for any website but also not only for swift.org)

I would focus on gathering feedbacks specifically about the calendar, later on, reviving the topic of web components mono repo.

federicobucchi · 2023-05-02T17:41:04Z

@yakatyansh

@federicobucchi I see you have pushed a calendar, any help or addition I can do to this ?
I hope you remember me

Thank you!

I am gathering feedbacks to have an idea of where help/additions are needed! I will circle back later on!

federicobucchi · 2023-05-02T17:42:28Z

@alexandersandberg

Thanks for trying it!

You are correct, I am putting this on the todo list!

tomerd · 2023-05-02T18:59:17Z

_data/navigation.yml

@@ -8,6 +8,8 @@
 name: swiftorg-and-open-source
 - title: Platform Support
 name: platform-support
+ - title: Calendar


this feels like the wrong location to me, perhaps it should be under community as a sub item

Sure, can you propose exactly in between which items?

as a sub-item of the community/overview after "communication" would be my preference

tomerd · 2023-05-02T19:02:06Z

_layouts/base.html

@@ -74,6 +74,8 @@
 {% include navigation.html %}
 {{content}}
 <script src="/assets/javascripts/application.js"></script>
+<script type="module" src="/assets/javascripts/swift-web-components/swift-web-components-stencil.esm.js"></script>
+<script nomodule src="/assets/javascripts/swift-web-components/swift-web-components-stencil.js"></script>


can this need be done in a more specific place for the calendar instead of main base layout?

another comment, all of this javascript and css should be put under a "calendar" directory and not a "swift-web-components" director, the latter is too broad / generic of a name

I can try to add it here: calendar/index.html

another comment, all of this javascript and css should be put under a "calendar" directory and not a "swift-web-components" director, the latter is too broad / generic of a name

This is including calendar and modal components, so not only calendar

we should limit the scope here to calendar

I am using the modal component I made to open the details of the calendar event

the point I am making is these files are all related to calendar and should be in a directory named calendar and not "swift-web-components", the files also should be named calendar and not "swift-web-components". iow the naming should be focused on calendar and not sound generic

the point I am making is these files are all related to calendar and should be in a directory named calendar and not "swift-web-components", the files also should be named calendar and not "swift-web-components". iow the naming should be focused on calendar and not sound generic

I would like to suggest a naming scheme, can we name calendar-components because it not only consists a calendar but also supporting components like modal, so calendar-components is good in my opinion

calendar/index.html

assets/javascripts/swift-web-components/components/files/feed.xml

yakatyansh · 2023-05-03T04:52:02Z

@yakatyansh

@federicobucchi I see you have pushed a calendar, any help or addition I can do to this ?
I hope you remember me

Thank you!

I am gathering feedbacks to have an idea of where help/additions are needed! I will circle back later on!

Sure, Do tell me wherever I can contribute to this issue, would love to do so,

yakatyansh · 2023-05-03T05:00:11Z

@alexandersandberg

Thanks for trying it!

You are correct, I am putting this on the todo list!

I would like to work on that as a starter

yakatyansh · 2023-05-09T05:23:21Z

@federicobucchi I was trying to pull this branch on my machine but was unable to, how should I do so ?
pls guide me

I have tried git pull

federicobucchi · 2023-05-09T20:37:34Z

@federicobucchi I was trying to pull this branch on my machine but was unable to, how should I do so ? pls guide me

I have tried git pull

Hello @yakatyansh, if you don't have experience with Git, please checkout some tutorials: https://www.w3schools.com/git/

Maybe you have to fetch first:

git fetch origin

or

git fetch origin

then

git checkout fb-include-calendar

For Git support, you are probably have more success asking to the community that only me.

Cheers!

yakatyansh · 2023-05-09T20:40:08Z

Was able to fetch it, thank you so much 👍

yakatyansh · 2023-05-10T13:49:07Z

Screen.Recording.2023-05-10.at.7.15.39.PM.mov

is it on my device or this is a bug I wonder ?

and also, was searching for the web components swift-calendar and swift-modal to have a look at the code and understand, apparently those are not shared

federicobucchi · 2023-05-15T00:30:43Z

@yakatyansh

Screen.Recording.2023-05-10.at.7.15.39.PM.mov

is it on my device or this is a bug I wonder ?

I tried with different browser and I did experience that. It seems that the component is not able to understand what "Appearance" you are on (Light, Dark, Auto). Do you have any browser extension that might be playing with the theme?

federicobucchi · 2023-05-15T00:45:00Z

@alexandersandberg I pushed a new version and it shouldn't have the issue you described above! Please let me know if you are able to verify! Thank you!

@tomerd I made some changes, and I have:

Moved the things scripts inclusion inside the specific file calendar/index.html
I renamed swift-web-components to web-components (in case we keep this framework or we go to a new one, the usage and development of more components will not be affected and this folder and naming will allow us to extend including more components without having to rename again). Just calling it calendar or calendar-component currently doesn't embrace the fact that the modal component can be used standalone, which it can)
Currently I have moved the view under Community but not inside Community Overview, but between Community Overview and Diversity. The reason why I didn't, is that it seems the calendar to get a bit lost in between subsections of a section, the page seems to start becoming very long with a lot of scroll and subsections and the file is a markdown (which I generally don't like to mix with HTML if possible):

yakatyansh · 2023-05-15T20:24:51Z

@yakatyansh

Screen.Recording.2023-05-10.at.7.15.39.PM.mov
is it on my device or this is a bug I wonder ?

I tried with different browser and I did experience that. It seems that the component is not able to understand what "Appearance" you are on (Light, Dark, Auto). Do you have any browser extension that might be playing with the theme?

nope, I was using brave browser without any extensions

federicobucchi · 2023-05-16T06:18:45Z

@yakatyansh I verified the issue on Brave browser. Can you please pull and try to run it again?

alexandersandberg · 2023-05-16T06:39:50Z

@alexandersandberg I pushed a new version and it shouldn't have the issue you described above! Please let me know if you are able to verify! Thank you!

The issue is fixed—thanks!

yakatyansh

Screen.Recording.2023-05-16.at.1.04.32.PM.mov

So, this is my observation, after changing themes everything turns to normal but if once again refresh the page, this is what happens

federicobucchi · 2023-05-16T17:54:39Z

Screen.Recording.2023-05-16.at.1.04.32.PM.mov

So, this is my observation, after changing themes everything turns to normal but if once again refresh the page, this is what happens

After my latest changes, also Brave browser is fixed for me.

Can you pull the changes:

git pull origin fb-include-calendar

then (if you are using Docker rebuild and re-run

docker-compose run build

then

docker-compose up website

yakatyansh · 2023-05-17T14:19:11Z

Oh my bad, I had some merge conflicts on my local, fixed them, commit them but didn't push, if you allow me I will push them

yakatyansh · 2023-05-17T14:20:57Z

the brave browser issue is fixed now, actually I want to try some XML, if you could delegate me some tasks of including the events as I can see now the events are just placeholders in the calendar, it would be great

federicobucchi · 2023-05-17T19:03:37Z

Oh my bad, I had some merge conflicts on my local, fixed them, commit them but didn't push, if you allow me I will push them

@yakatyansh you should't have any conflict, what changes do you need to push?
I wouldn't add functionalities right now, but only fixes if you see something wrong

the brave browser issue is fixed now, actually I want to try some XML, if you could delegate me some tasks of including the events as I can see now the events are just placeholders in the calendar, it would be great

XML there is not much right now until we get the initial events to add. I don't have them yet.
The calendar might potentially go live with no events and then have people adding them

yakatyansh · 2023-05-18T04:14:04Z

@yakatyansh you should't have any conflict, what changes do you need to push? I wouldn't add functionalities right now, but only fixes if you see something wrong

initially I was unable to pull I got this error

I fixed that using git config --global pull.ff true
then I pulled it again

so I fixed this merge conflict along with some xml files

this is what I committed. after that all was good on my brave browser

federicobucchi · 2023-05-18T05:20:56Z

@yakatyansh I was confused when you said XML instead of YAML.

I wouldn't push anything seeing the files you modified:

All those .yml files have nothing to do with this PR
You shouldn't have conflicts

yakatyansh · 2023-05-18T05:21:52Z

@yakatyansh I was confused when you said XML instead of YAML.

I wouldn't push anything seeing the files you modified:

All those .yml files have nothing to do with this PR

You shouldn't have conflicts

Alright now no conflicts I will not push that

federicobucchi requested review from 0xTim, alexandersandberg, daveverwer, dempseyatgithub, kaishin, krstnfx, mschinis, shahmishal, TimTr, twostraws and tomerd as code owners May 1, 2023 17:18

alexandersandberg reviewed May 2, 2023

View reviewed changes

tomerd changed the title ~~[Not Final] <#239> Add Contributor Calendar~~ [RFC] <#239> Add Contributor Calendar May 2, 2023

tomerd reviewed May 2, 2023

View reviewed changes

calendar/index.html Outdated Show resolved Hide resolved

tomerd reviewed May 2, 2023

View reviewed changes

assets/javascripts/swift-web-components/components/files/feed.xml Outdated Show resolved Hide resolved

federicobucchi force-pushed the fb-include-calendar branch 2 times, most recently from ee03ec0 to a22c725 Compare May 15, 2023 00:13

federicobucchi force-pushed the fb-include-calendar branch 2 times, most recently from 536fd03 to 392d0c2 Compare May 15, 2023 00:28

<#239> Add Contributor Calendar

b5e1984

federicobucchi force-pushed the fb-include-calendar branch from 392d0c2 to b5e1984 Compare May 16, 2023 06:17

federicobucchi requested review from tomerd, alexandersandberg and yakatyansh May 16, 2023 06:19

yakatyansh reviewed May 16, 2023

View reviewed changes

[RFC] <#239> Add Contributor Calendar #293

Are you sure you want to change the base?

[RFC] <#239> Add Contributor Calendar #293

Conversation

federicobucchi commented May 1, 2023

Motivation:

Modifications:

Result:

Desktop (Light Theme)

Desktop (Dark Theme)

Mobile (Light Theme)

Mobile (Dark Theme)

dempseyatgithub commented May 1, 2023

yakatyansh commented May 2, 2023 • edited

alexandersandberg left a comment

Choose a reason for hiding this comment

federicobucchi commented May 2, 2023 • edited

federicobucchi commented May 2, 2023

federicobucchi commented May 2, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tomerd May 2, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tomerd May 2, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yakatyansh commented May 3, 2023

yakatyansh commented May 3, 2023

yakatyansh commented May 9, 2023

federicobucchi commented May 9, 2023

yakatyansh commented May 9, 2023

yakatyansh commented May 10, 2023 • edited

federicobucchi commented May 15, 2023

federicobucchi commented May 15, 2023

yakatyansh commented May 15, 2023

federicobucchi commented May 16, 2023

alexandersandberg commented May 16, 2023

yakatyansh left a comment

Choose a reason for hiding this comment

federicobucchi commented May 16, 2023

yakatyansh commented May 17, 2023

yakatyansh commented May 17, 2023

federicobucchi commented May 17, 2023

yakatyansh commented May 18, 2023

federicobucchi commented May 18, 2023

yakatyansh commented May 18, 2023 • edited

yakatyansh commented May 2, 2023 •

edited

federicobucchi commented May 2, 2023 •

edited

tomerd May 2, 2023 •

edited

tomerd May 2, 2023 •

edited

yakatyansh commented May 10, 2023 •

edited

yakatyansh commented May 18, 2023 •

edited