With PR #24, the Projects models, controllers and views were generated.

Now we need to integrate the Users model and the WeddingPartyMembers model.

Keeping in mind @mftruso 's observations on the hasMany model, do we only need to generate the models? Or do we also need controllers and views?

I don't think we need a separate view for the WeddingPartyMembers, I believe we can just integrate into the Projects view, since the WeddingPartyMembers only exist in a Project. However we will need to take care of them being inserted into the database upon creating a new project or updating an existing project (how? where is the logic that takes care of the form posting? Is that in a controller?). Or perhaps the scaffold generator is useful anyways, seeing it also generates functional tests? Then we could just simply not use the routes or views that we don't need?

In any case a view for the Users model might come in handy, so we can have a separate area where a user can create or update their password, edit / verify their email, etc. So perhaps we should use the scaffold generator in this case?

This is what I have so far for the models we've been discussing:

bundle exec rails generate scaffold Project liturgy:integer brideFirstName:string brideLastName:string groomFirstName:string groomLastName:string celebrantNamePrefix:string celebrantFirstName:string celebrantLastName:string church:string city:string weddingdate:datetime

bundle exec rails generate scaffold User username:string email:string role:integer password_digest:string project:references

bundle exec rails generate scaffold WeddingPartyMember partyMemberFirstName:string partyMemberLastName:string partyMemberRole:integer partyMemberRelationship:string project:references

This first scaffold of the three is already taken care of. For the next two, I believe that project:references should take care of the hasMany relationship? Or does another step need to be taken?

@mftruso you might have a better grasp on how to handle the next steps, following PR #24?

In the current example from PR #24, a minimum amount of user info (project role and email address) is requested to get the project started, and this is mixed in on the same screen space as some basic information for the Wedding Ceremony. Then in a separate space, but on the same screen, we start defining the wedding party.

I think it would be a better user experience to divide this up into steps, such that the user shouldn't have to scroll down the screen with a huge long form to fill out.

FIRST STEP: minimum user info (project role and email address) is requested ONLY IF the user is not logged in; if logged in we will already have this information and we can go directly to Step 2

SECOND STEP: Basic info about the Wedding Ceremony (type of ceremony, date, church, city, celebrant)

THIRD STEP: Define the wedding party (Bride, Groom, Best Man, Maid of Honor, Bridesmaids, Groomsmen, Parents, etc.)

Then from the FOURTH STEP on, we will have a number of steps to choose the different parts of the ceremony.

This also makes sense from a Model point of view, because while STEP 1 has to do mostly with the Users model, STEP 2 has to do only with the Projects model, and step 3 has to do only with the WeddingPartyMembers model. This way our view is broken up into smaller views which are more closely linked with the models, making for a cleaner user experience...

When accessing the production instance, I'm seeing that Google Fonts are not rendering.

Perhaps an approach for Google Fonts which can also boost performance is this guy's suggestion, self host them using the typeface project in yarn.

Create a high level sketch of the UI for MVP

Even though sqlite is more portable, and doesn't require any further installation, as compared to PostgreSQL, yet this last backend has a few advantages over the first, which we should consider.

PostgreSQL supports the enum type internally, which means that our enums defined in code will have a corresponding enum type in the database, so that upon inspecting the database you can see meaningful values. See suggestion here.

Also PostgreSQL supports array types internally (see here and here), which might be useful at some point.

Getting the core functionality of a webapp done early is often beneficial - it often uncovers additional info about the best way to do things, and it provides a way to get early feedback about what works well and what doesn't.

Fundamentally, I think our MVP is pretty simple - allow the user to enter form data like names and reading selections, and then provide a download (PDF?) when they hit a "Generate" button.

In code, this can be implemented easily with an HTML form, and a single POST request that responds with the generated PDF. User accounts, persistent data, etc is good functionality, but not a critical part of the core experience to generate a booklet. (I'm not saying we shouldn't build those things, just that perhaps we shouldn't build those things first.)

Is my understanding roughly correct? If so, perhaps we should think about building this MVP first and then add the other stuff on top of it.

cc @JohnRDOrazio @mftruso

Just an idea I've had for the cover page, a hover animation that makes it look like the booklet is about to open as you hover over it.

Using the issue to store notes to implement:

    /* Remove my-auto class from central div and apply these styles (perhaps through a custom class): */
    height: 100vh;
    position: relative;

    /* Remove tailwind classes from svg element, place as child of another div */
    /* Parent div will have styles: */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-5deg);
    height: 65vh;
    filter: drop-shadow( 0px 3px 9px rgba(0, 0, 0, 0.3));
    transition: 0.2s;
    
    /* Child svg will have styles: */
    height: 65vh;
    transform-origin: left;
    transition: 0.3s;

Finally, add hover rules:

    /* on the parent div: */
    transform: rotate(-7deg);
    filter: drop-shadow( 0px 3px 17px rgba(0, 0, 0, 0.5));

    /* on the child svg, when the parent div is hovered: */
    transform: rotateY(-20deg) rotateZ(0deg);
    filter: drop-shadow( 3px 0 12px rgba(0, 0, 0, 0.6));

That should pretty much do the trick...

I believe using a UUID as the ID for the Projects model can offer better security: it would be more difficult for an unprotected page to be scanned and opened by an unwanted user. This way a Project url would look like https://localhost:3000/en/project/a5734556-ddd0-11eb-ba80-0242ac130004 rather than https://localhost:3000/en/project/1

Example of how to implement this:
https://pawelurbanek.com/uuid-order-rails

During development, enabling hot reloading of assets (CSS, JS) can be convenient. This avoids manually refreshing the browser every time an asset is updated or changed.

However it seems that hot reloading is not yet working as is, in the current state of the main branch.

In my understanding, in order to enable hot reloading, you need to run bin/webpack-dev-server (see here).

However when trying to run bin/webpack-dev-server (after yarn install and yarn upgrade), I get this message:

The command moved into a separate package: @webpack-cli/serve
Would you like to install serve? (That will run yarn add -D @webpack-cli/serve) (yes/NO) : NO
@webpack-cli/serve needs to be installed in order to run the command.

I found this stackoverflow post that mentions as a solution:

Apparently, this is an issue with [email protected]. I upgraded to [email protected] and now it works.

So I tried editing package.json and upping the version for webpack-cli from "webpack-cli": "^3.3.12" to "webpack-cli": "^4.2.0", and now I don't get any errors when running bin/webpack-dev-server.

Let's use this issue as a thread to discuss other marriage booklets that we might want to get ideas from. And what we like or don't like about them, and what's most important to start with.

This can probably be done most easily (& free) with GitHub Actions.

See #8 for more context.

A good thing to keep in mind from the start is i18n:
https://guides.rubyonrails.org/i18n.html

When attempting to update the production instance to the current repo state (hadn't yet been done since starting with the clean slate), the rails app was still attempting to produce translations.js using the JS Middleware. This should not be necessary in a production environment, all assets should be precompiled including the translations.js.

Similarly, the CSS pack tag should not be necessary in the application.html.erb layout. The javascript pack tag should really be enough. The app was tripping up on the production instance because of this.

When viewing the projects overview page from a wide screen, I noticed that the tab contents on the projects overview page were not centered. Upon inspecting the classes, I noticed that the element with class tab-contents also has a class flex, which should be needed only if there are multiple columns / rows that need to be more or less evenly distributed. Therefore the tab contents were being treated like a column, as though we were expecting to have another column to the right. Which we don't have for the time being anyways. So it's better to remove the flex class and allow everything to be centered nicely.

How the contents are rendered on this page, or exactly what contents we want to render on this page, I believe will need to be thought out well. I'm thinking, when the project is further ahead down the road and the basic workflow is set in place, we could have a summary of the layout preferences (size of the booklet, margin, gutter, bleed, etc.) and template preferences (if we have some graphical templates ready to merge the text with).

perhaps it could be useful to implement some kind of form validation, either client-side (as the form is being filled out), or server-side (when the form is submitted), or a bit of both.

I'm not fully familiar yet with how this is handled in a rails app. I found this stackoverflow post which might be of some help.

And while Bootstrap includes form validation classes and javascript utilities, it seems like tailwind doesn't have anything like this out of the box? Any validated or invalid feedback needs to be handmade, is my guess?

Currently, the form submit button always says "Start composing the booklet!", which is great when creating a new project.

However, since the same form is used when editing an already created project, perhaps the action text should be different when editing, for example "Update this project!"

I've been looking into controllers and helpers and whatnot, but it seems like you can wind up creating a lot of overload (rendering partials for a single element?). Perhaps it's not the "rails" way, but I think it would be quite simple to use a plain old if - then - else, something like this:

          <% if params[:action] == 'new' then %>
            <%= form.submit t('pages.new_project.create_project_button'), class: "inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
          <% elsif params[:action] == 'edit' %>
            <%= form.submit t('pages.edit_project.update_project_button'), class: "inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
          <% end %>

Create a class diagram (or similar output) describing what the data will look like for this app.

Considering that a user could theoretically participate in more than one project with a different role

CASE:

1. a bride creates her wedding booklet on this website
2. she is satisfied with the experience, and invites a friend of hers to make their booklet on the website
3. the friend would like her to help out, and adds her as a guest to the wedding booklet project
4. the initial bride would have role "bride" on her own booklet project, but role "guest" on her friend's booklet project

This means that the user "role" should probably not be associated with the user resource itself (as is currently the case), but should be an association between a user and a project. I'm guessing a kind of a join table? We have (at least in theory) a join table between users and projects. Perhaps a "user role" field could be added to this same join table?

A single Tenant (parish) should be able to manage all of the weddings and users related to it, but not see data related to other tenants. Determine how best to segment this data. Some common schemes. Also determine if there are existing libraries to assist with this in rails.

• single tenancy
• database per tenant
• column identifier (each multi-tenant table has a column with a tenant id)

When dynamically adding new wedding party members to a new project, there should be a trash can icon next to the wedding party member form fields, allowing to remove an accidentally added wedding party member section.

The rails executable wrapper which is included in the application bin folder, does this come from gem install rails? Or does it come from bundle install? Doesn't seem to me that it comes from bundle install, because on a fresh setup, I still wasn't able to invoke rails --version directly after bundle install, I still needed to invoke bundle exec rails --version.

I'm guessing we should avoid installing gems directly in our local development environments, since they might have different versions compared to the gems that are bundled with the application?

As I'm reading up here and there I found this utility bundle --binstubs which should create wrappers in the bin folder for the gems that are installed through bundler. That way you should be able to invoke rails --version directly, or i18n-tasks commands directly, without having to use bundle exec each time.

However, when trying to use bundle --binstubs, I'm then seeing a constant warning about how a rails executable is included by default in rails apps, and bundle --binstubs is overwriting it, which may not be a desired behaviour. I'm wondering if this warning message is coming from the fact that the rails gem was accidentally installed directly, rather than with bundler? Or is this warning message giving some actually useful information about how bundle --binstubs overwrites a rails executable which bundler itself provided? Or can the warning be ignored?

Or, should we avoid using bundle --binstubs, and simply create the stubs that we would like for single gems, as suggested here?

On the production server, after compiling the assets and restarting the server, I'm getting a 500 error (you can see there's an error now: https://marriagebooklet.bibleget.io/ )

Inspecting the logs, I see:

[e2928134-0b23-4d71-9c88-be2cc41b785b] app/views/layouts/application.html.erb:9
[e2928134-0b23-4d71-9c88-be2cc41b785b] app/controllers/application_controller.rb:11:in `switch_locale'
I, [2021-07-08T00:06:54.026022 #753799]  INFO -- : [2b76f94a-003c-4f80-a2e1-24a44826fb26] Started GET "/" for 151.69.176.101 at 2021-07-08 00:06:54 +0200
I, [2021-07-08T00:06:54.031612 #753799]  INFO -- : [2b76f94a-003c-4f80-a2e1-24a44826fb26] Processing by PagesController#home as HTML
I, [2021-07-08T00:06:54.044808 #753799]  INFO -- : [2b76f94a-003c-4f80-a2e1-24a44826fb26]   Rendered pages/home.html.erb within layouts/application (Duration: 8.8ms | Allocations: 1238)
I, [2021-07-08T00:06:54.052778 #753799]  INFO -- : [2b76f94a-003c-4f80-a2e1-24a44826fb26]   Rendered layout layouts/application.html.erb (Duration: 16.9ms | Allocations: 2615)
I, [2021-07-08T00:06:54.053144 #753799]  INFO -- : [2b76f94a-003c-4f80-a2e1-24a44826fb26] Completed 500 Internal Server Error in 21ms (Allocations: 4049)
F, [2021-07-08T00:06:54.054578 #753799] FATAL -- : [2b76f94a-003c-4f80-a2e1-24a44826fb26]
[2b76f94a-003c-4f80-a2e1-24a44826fb26] ActionView::Template::Error (Webpacker can't find application.css in /var/www/vhosts/bibleget.io/marriagebooklet.bibleget.io/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
  "application.js": "/packs/js/application-19268d6020f0d53c26eb.js",
  "application.js.map": "/packs/js/application-19268d6020f0d53c26eb.js.map",
  "entrypoints": {
    "application": {
      "js": [
        "/packs/js/application-19268d6020f0d53c26eb.js"
      ],
      "js.map": [
        "/packs/js/application-19268d6020f0d53c26eb.js.map"
      ]
    },
    "hello_erb": {
      "js": [
        "/packs/js/hello_erb-0c6dab3ed64a6fb4c727.js"
      ],
      "js.map": [
        "/packs/js/hello_erb-0c6dab3ed64a6fb4c727.js.map"
      ]
    },
    "projectPreview": {
      "js": [
        "/packs/js/projectPreview-2a8b9748a626892221b7.js"
      ],
      "js.map": [
        "/packs/js/projectPreview-2a8b9748a626892221b7.js.map"
      ]
    },
    "projectsIndex": {
      "js": [
        "/packs/js/projectsIndex-528c5225f8e08848679d.js"
      ],
      "js.map": [
        "/packs/js/projectsIndex-528c5225f8e08848679d.js.map"
      ]
    },
    "projectsNew": {
      "js": [
        "/packs/js/projectsNew-ab688218f7bde8d34471.js"
      ],
      "js.map": [
        "/packs/js/projectsNew-ab688218f7bde8d34471.js.map"
      ]
    },
    "titleCaps": {
      "js": [
        "/packs/js/titleCaps-3526da10f128b7db1a65.js"
      ],
      "js.map": [
        "/packs/js/titleCaps-3526da10f128b7db1a65.js.map"
      ]
    }
  },
  "hello_erb.js": "/packs/js/hello_erb-0c6dab3ed64a6fb4c727.js",
  "hello_erb.js.map": "/packs/js/hello_erb-0c6dab3ed64a6fb4c727.js.map",
  "media/webfonts/fa-brands-400.eot": "/packs/media/webfonts/fa-brands-400-89a52ae1.eot",
  "media/webfonts/fa-brands-400.svg": "/packs/media/webfonts/fa-brands-400-216edb96.svg",
  "media/webfonts/fa-brands-400.ttf": "/packs/media/webfonts/fa-brands-400-9e138496.ttf",
  "media/webfonts/fa-brands-400.woff": "/packs/media/webfonts/fa-brands-400-329a95a9.woff",
  "media/webfonts/fa-brands-400.woff2": "/packs/media/webfonts/fa-brands-400-c1210e5e.woff2",
  "media/webfonts/fa-regular-400.eot": "/packs/media/webfonts/fa-regular-400-4079ae2d.eot",
  "media/webfonts/fa-regular-400.svg": "/packs/media/webfonts/fa-regular-400-19e27d34.svg",
  "media/webfonts/fa-regular-400.ttf": "/packs/media/webfonts/fa-regular-400-1017bce8.ttf",
  "media/webfonts/fa-regular-400.woff": "/packs/media/webfonts/fa-regular-400-36722648.woff",
  "media/webfonts/fa-regular-400.woff2": "/packs/media/webfonts/fa-regular-400-68c5af1f.woff2",
  "media/webfonts/fa-solid-900.eot": "/packs/media/webfonts/fa-solid-900-efbd5d20.eot",
  "media/webfonts/fa-solid-900.svg": "/packs/media/webfonts/fa-solid-900-13de59f1.svg",
  "media/webfonts/fa-solid-900.ttf": "/packs/media/webfonts/fa-solid-900-07c3313b.ttf",
  "media/webfonts/fa-solid-900.woff": "/packs/media/webfonts/fa-solid-900-c6ec0800.woff",
  "media/webfonts/fa-solid-900.woff2": "/packs/media/webfonts/fa-solid-900-ada6e6df.woff2",
  "projectPreview.js": "/packs/js/projectPreview-2a8b9748a626892221b7.js",
  "projectPreview.js.map": "/packs/js/projectPreview-2a8b9748a626892221b7.js.map",
  "projectsIndex.js": "/packs/js/projectsIndex-528c5225f8e08848679d.js",
  "projectsIndex.js.map": "/packs/js/projectsIndex-528c5225f8e08848679d.js.map",
  "projectsNew.js": "/packs/js/projectsNew-ab688218f7bde8d34471.js",
  "projectsNew.js.map": "/packs/js/projectsNew-ab688218f7bde8d34471.js.map",
  "titleCaps.js": "/packs/js/titleCaps-3526da10f128b7db1a65.js",
  "titleCaps.js.map": "/packs/js/titleCaps-3526da10f128b7db1a65.js.map"
}

Obviously application.css has not been included in the manifest.

When tests run, whether locally or on Pull Requests, errors will still sometimes pop up, such as:

ProjectsControllerTest#test_should_create_project [/home/runner/work/marriage-booklet/marriage-booklet/test/controllers/projects_controller_test.rb:23]:
Expected response to be a redirect to <http://www.example.com/en/projects/aa67c98c-d81f-5a9c-b0bc-26caa0051aea> but was a redirect to <http://www.example.com/en/projects/4ffbf1a9-7813-4b67-a61f-43a3fa43ae50>.
Expected "http://www.example.com/en/projects/aa67c98c-d81f-5a9c-b0bc-26caa0051aea" to be === "http://www.example.com/en/projects/4ffbf1a9-7813-4b67-a61f-43a3fa43ae50".

This could perhaps be do to race conditions, where one test is creating a resource at the same time that another test is deleting it.

We need to look further into the cause of these errors. Perhaps some useful info here: https://blog.arkency.com/2015/09/testing-race-conditions/

Do we have access to fontawesome? I'm guessing it hasn't been included by default with tailwind. It would be nice to include some kind of icon set, to prettify the UI.

https://stackoverflow.com/questions/57898372/how-to-import-font-awesome-in-tailwind-css-in-the-rails-application

Seeing that on the production instance, the scaffold generated stylesheet (in this case, /app/assets/stylesheets/projects.scss) which should apply to the generated resource (in this case projects), is not actually being applied:

we need to figure out how to handle the assets pipeline vs the webpack workflow when it comes to stylesheets.

Here is a good blog post about this: https://mariochavez.io/desarrollo/2020/05/19/from-the-asset-pipeline-to-webpack/

Perhaps we should try to do away with the assets pipeline altogether, and use only a webpack workflow? If so, how would this work for stylesheets that should apply to a whole resource (such as projects), and all views associated with that resource?

the UI is of course still in a primordial state, but it already presents some problems. On a mobile device, the "Get Started" button for example is nowhere to be seen, and cannot therefore be reached or clicked.

Once we have a skeleton app up and running, perhaps it would be useful to create a development branch, so that all development would be merged first into the development branch, and when a number of significant features have been added and tested they can be then merged to the "main" or production branch.

I could then create a vhost for staging, which would be synced to the development branch, so that there can be a "production ready" website and a "staging" website. Features can pass through the staging website before being pulled definitively into the production website.

From my latest local testing, I've noticed that it's enough to have defined jQuery as a plugin in the webpack PluginProvider settings. When removing import 'jquery' from application.js, jquery is actually still available throughout the application. So this can be simply removed.

Rails does not come with a CSS framework, but can work with pretty much any of them.

I've worked with Bootstrap before and that's what I'm most familiar with. With Bootstrap, we'd probably use a "Bootstrap-style" navbar like this.

Has anyone else worked with any other CSS frameworks they really liked?

I've heard a lot about Tailwind but never used it myself.

It's also an option to build our CSS ourselves and not use any framework, but I think the frameworks provide a lot of benefits for building things quickly (like navbars and buttons) using common patterns and for mobile responsiveness (which is hard to get right on your own).

Given all the above, would we prefer to use Bootstrap, Tailwind, or something else?

I just noticed on the production server, that when accessing the Edit This Project with locale = Italian (i.e., https://marriagebooklet.bibleget.io/it/projects/1/edit), an error is generated.

Inspecting the logs, I see this error message:

I, [2021-07-08T15:07:48.444654 #1625149]  INFO -- : [6db9a2b2-66f3-4c86-a1c1-c7f4b130e779]   Rendered layout layouts/application.html.erb (Duration: 2.1ms | Allocations: 996)
I, [2021-07-08T15:07:48.444843 #1625149]  INFO -- : [6db9a2b2-66f3-4c86-a1c1-c7f4b130e779] Completed 500 Internal Server Error in 4ms (ActiveRecord: 0.1ms | Allocations: 1341)
F, [2021-07-08T15:07:48.446345 #1625149] FATAL -- : [6db9a2b2-66f3-4c86-a1c1-c7f4b130e779]
[6db9a2b2-66f3-4c86-a1c1-c7f4b130e779] ActionView::Template::Error (.date.order only accepts :year, :month and :day):
[6db9a2b2-66f3-4c86-a1c1-c7f4b130e779]     90:               <% if I18n.locale == :en then %>
[6db9a2b2-66f3-4c86-a1c1-c7f4b130e779]     91:               <%= form.datetime_select :weddingdate, { ampm: true }, { class: "mt-1 focus:ring-indigo-500 focus:border-indigo-500 shadow-sm sm:text-sm border-gray-300 rounded-md" } %>
[6db9a2b2-66f3-4c86-a1c1-c7f4b130e779]     92:               <% else %>
[6db9a2b2-66f3-4c86-a1c1-c7f4b130e779]     93:               <%= form.datetime_select :weddingdate, { ampm: false }, { class: "mt-1 focus:ring-indigo-500 focus:border-indigo-500 shadow-sm sm:text-sm border-gray-300 rounded-md" } %>
[6db9a2b2-66f3-4c86-a1c1-c7f4b130e779]     94:               <% end %>
[6db9a2b2-66f3-4c86-a1c1-c7f4b130e779]     95:             </div>
[6db9a2b2-66f3-4c86-a1c1-c7f4b130e779]     96:           </div><!--Marriage date block end -->
[6db9a2b2-66f3-4c86-a1c1-c7f4b130e779]
[6db9a2b2-66f3-4c86-a1c1-c7f4b130e779] app/views/projects/_form.html.erb:93
[6db9a2b2-66f3-4c86-a1c1-c7f4b130e779] app/views/projects/_form.html.erb:1
[6db9a2b2-66f3-4c86-a1c1-c7f4b130e779] app/views/projects/edit.html.erb:3
[6db9a2b2-66f3-4c86-a1c1-c7f4b130e779] app/controllers/application_controller.rb:11:in `switch_locale'

Is it ampm: false that is causing this?

Taking into consideration that there will necessarily be a few users that give assistance for the final website / service, those users should have "admin" accounts such that they can view the list of "user resources" (basically the list of users that have signed up to the website).
This means adding "capability" information to user accounts (I avoid using the term "role" here, because we've already used the term "role" in reference to the role of a user within a project, as "bride", "groom", "celebrant" or "guest" in the project). Users that sign up to the website will automatically receive a "subscriber" capability, whereas the few of us that manage the service will have a "manager" capability. Only users with a "manager" capability should be able to access the "Users" resource (http://localhost:3000/en/users) with a list of users currently signed up to the website.

Schuster Wedding Program uses the wmdividers font for the decorative dividers. Perhaps it could be useful to have a font like this on hand. Other than placing the font in the assets/fonts/ folder, would the font need to be added to the pipeline?
While we're at it, perhaps we could have a few handy fonts available, other than any Google Fonts we might include or make available. For example the Schuster program also uses the Calligra font (available to LaTeX it seems). Perhaps having a few fancy Edwardian script style fonts (and other pleasant non-script style fonts) on hand can be useful.

https://stackoverflow.com/questions/10905905/using-fonts-with-rails-asset-pipeline

In PR #24 I included an example of dynamically adding form fields in a project, for the wedding party members.

However, we don't have the WeddingPartyMembers model just yet, so this is really just illustrative. The field names and ids are pretty much invented, and don't get posted to any kind of model.

Once we have our model in place, I'm guessing we should use some erb templating to generate the base row which can then be cloned, kind of like in this example.

Tailwind v2.1+ has a new JIT mode which you can make use of, for faster and more efficient compiling, especially when creating custom variants.
See here for information: https://tailwindcss.com/docs/just-in-time-mode

Obviously, as we saw in issue #38 , it is not enough to add mode: 'jit' to the tailwind config.

Following the information from the documentation above, we would at least have to add a bit more configuration.

Since JIT mode generates your CSS on-demand by scanning your template files, it’s crucial that you configure the purge option in your tailwind.config.js file with all of your template paths, otherwise your CSS will be empty:

 // tailwind.config.js
  module.exports = {
    mode: 'jit',
+   // These paths are just examples, customize them to match your project structure
+   purge: [
+     './public/**/*.html',
+     './src/**/*.{js,jsx,ts,tsx,vue}',
+   ],
    theme: {
      // ...
    }
    // ...
  }

If for any reason it still doesn't work after that, perhaps check out https://dev.to/davidteren/getting-started-with-rails-6-1-tailwindcss-jit-webpacker-postcss-8-25g7

For whatever reason, I started getting this output again when spinning up a local Rails Server instance:

I18n::InvalidLocale ("socket" is not a valid locale):

app/controllers/application_controller.rb:10:in `switch_locale'
Started GET "/socket.io/?X_LOCAL_SECURITY_COOKIE=&EIO=3&transport=polling&t=1629705029253-72961" for ::1 at 2021-08-23 12:31:57 +0200
Processing by PagesController#home as */*
  Parameters: {"X_LOCAL_SECURITY_COOKIE"=>"", "EIO"=>"3", "transport"=>"polling", "t"=>"1629705029253-72961", "locale"=>"socket"}
Completed 500 Internal Server Error in 7694ms (Allocations: 2689)

Now what in the world is causing this? What is trying to connect to socket.io? Could it be the webpacker-dev-server?

Not sure if it's a bug or not, or if it's supposed to be some obscure built in feature, I don't know enough about Rails to know what's going on. It just seems to have popped up randomly though, and it doesn't seem to affect the webserver instance (pages are rendering, navigation links are working, locales seem to be working).

if we think that an html5 canvas is a doable route for previewing the marriage booklet, perhaps we need to look a little closer at getting a nice crisp image (unfortunately canvas is never crisp out of the box). I've already implemented a couple of tricks to make the straight lines a bit crispier, however to get every one of them pixel perfect we may need to implement a Device Pixel Ratio calculation.
Also the fonts / text elements look terrible, perhaps this could be a fix to try out (I believe this solution in fact takes into account Device Pixel Ratio):
https://stackoverflow.com/questions/15661339/how-do-i-fix-blurry-text-in-my-html5-canvas

it's really too early for this just yet, but I figure I'll jot it down to keep it in mind. In the models that are being generated from the new wiki page [[]], users can have an avatar. If we do start implementing avatars in the user interface (which could be a nice touch), we could also consider implementing Gravatar (not sure how many people outside of WordPress users have a Gravatar account, but hey it's out there, why not give this possibility).

Doesn't actually seem too difficult to implement: https://guides.railsgirls.com/gravatar

Email validation will be done mainly by sending a validation link. However it can be useful to filter out valid email formats from the start, just in case someone accidentally types in an invalid email format.

Browsing on stackoverflow, I found a mention of the valid_email2 gem which could help some:

Don't use a regular expression for email address validation. It's a trap. There are way more valid email address formats than you'll think of. However! The mail gem (it's required by ActionMailer, so you have it) will parse email addresses — with a proper parser — for you:

require 'mail'
a = Mail::Address.new('[email protected]')

This will throw a Mail::Field::ParseError if it's a non-compliant email address. (We're not getting into things like doing an MX address lookup or anything.)

If you want the good ol' Rails validator experience, you can make app/models/concerns/email_validatable.rb:

require 'mail'

module EmailValidatable
  extend ActiveSupport::Concern

  class EmailValidator < ActiveModel::EachValidator
    def validate_each(record, attribute, value)
      begin
        a = Mail::Address.new(value)
      rescue Mail::Field::ParseError
        record.errors[attribute] << (options[:message] || "is not an email")
      end
    end
  end
end

and then in your model, you can:

include EmailValidatable
validates :email, email: true

As Iwo Dziechciarow's comment below mentions, this passes anything that's a valid "To:" address through. So something like Foo Bar <[email protected]> is valid. This might be a problem for you, it might not; it really is a valid address, after all.

If you do want just the address portion of it:

a = Mail::Address.new('Foo Bar <[email protected]>')
a.address
=> "[email protected]"

As Björn Weinbrenne notes below, there are way more valid RFC2822 addresses than you may expect (I'm quite sure all of the addresses listed there are compliant, and may receive mail depending system configurations) — this is why I don't recommend trying a regex, but using a compliant parser.

If you really care whether you can send email to an address then your best bet — by far — is to actually send a message with a verification link.

Now that the Projects model has been generated, it needs to be completed by defining our enums.

liturgy was defined as an integer, since it can become an enum of withMass, withoutMass, and catholicNonCatholic.

Likewise for the Users model, when it will be generated, role can be defined as an enum of bride, groom, celebrant (in reference to the users that have access to the project). Perhaps we could add something like guest to this list, for any other user that the first the couple would like to invite, for example the Graphic Designer / Typographer / Printing Shop.

In the WeddingPartyMembers model, should we define partyMemberRole as an enum also? With a predefined set of roles such as Father, Mother, Parent, Grandparent, Grandfather, Grandmother, Brother, Sister, Friend, Aunt, Uncle etc. ? Or would that be better left as a string, for greater freedom, simply offering some of these suggestions in the UI?

Some suggestions on creating enums here:
https://naturaily.com/blog/ruby-on-rails-enum

Just as we declare the version of ruby required or at least used in the project through the .ruby-version file, perhaps we should also declare the version of node that is required.

In fact, [email protected] which we are using requires a version of node >=12.13.0.

Perhaps we can add some information to the wiki about how to make sure you have the right version of node installed for the project (made with nvm + avm using .node-version?)

After merging PR #24 to main, assets are not compiling correctly when running:

$ bundle exec rails webpacker:clobber
$ bundle exec webpacker:compile
$ bundle exec server

I've created a translation project on my translation server, so as to be able to manage the translation process in a cleaner fashion. It's a weblate server which I created in the past few months for other projects I work on, and I am finding it to be quite useful and functional.

One of the advantages of weblate is that it has an API that can talk to Github. So any pushes made to github can be easily picked up by weblate. This however requires the creation of a webhook in the repository's settings, see here:

https://docs.weblate.org/en/weblate-4.6.2/admin/continuous.html#github-setup

It should be enough to add this url:
https://translate.johnromanodorazio.com/hooks/github/

(If for any reason that doesn't seem to work, maybe try just https://translate.johnromanodorazio.com , I have a vague recollection of maybe having to do this to make it work right on the last project I added.)

I set up weblate so that it will never push to main, it will push translations to it's own branch weblate and will open PR's that can then be merged to main, so that we can be sure that it will never mess up any of the project code. We will have full control over the translation process and workflow.

I'm not sure if the ability to create the weblate branch and push to it will require some extra permissions? We'll have to test and see.

The user registration is currently working, however it needs a little touching up.

For example, the password field should have a confirmation, to make sure the two passwords match, so the user knows he is actually setting the password he wants to set.

Also, maybe encourage strong passwords? Even though there's not super sensitive user information in this project, still it's good practice in general to encourage people to use strong passwords. So some kind of javascript helper / indicator that will let them know if their password is a good or a bad password.

Seeing @mkasberg raised the question on the Slack channel, we can discuss here how to go about producing the final format that the end user can download / print / have printed.

My vision is to be as flexible as possible, and offer as many options as possible. A first choice would be PDF, but I would leave the option (if technically feasible) for DOCX, or even InDesign / Latex.

Useful GEMS to go about doing this:

• For InDesign and LaTeX: https://www.ruby-toolbox.com/projects/review - Re:VIEW is a digital publishing system for books and ebooks. It supports InDesign, EPUB and LaTeX
• For PDF: Prawn and CombinePDF
  • https://www.ruby-toolbox.com/projects/prawn - Prawn is a fast, tiny, and nimble PDF generator for Ruby
  • https://www.ruby-toolbox.com/projects/combine_pdf - parse PDF files and combine (merge) them with other PDF files, number the pages, watermark them or stamp them, create tables, add basic text objects etc` (all using the PDF file format)
  • https://www.ruby-toolbox.com/projects/prawn-svg - render SVG directly into a PDF using the 'prawn' gem. Since PDF is vector-based, you'll get nice scaled graphics if you use SVG instead of an image
• For DOCX: looks like it's not very well supported in Ruby, best I could find is https://www.ruby-toolbox.com/projects/docxgen which simply works on DOCX templates by replacing variables. That would be fine if we only had to replace the names of the spouses and stuff like that, but we're wanting to generate a DOCX from scratch basically. Looks like this is better supported in PHP, perhaps for anyone wanted to download a DOCX we could have a PHP script to help with this:
  • https://github.com/PHPOffice/PHPWord - provides a set of classes to write to and read from different document file formats. The current version of PHPWord supports Microsoft Office Open XML (OOXML or OpenXML), OASIS Open Document Format for Office Applications (OpenDocument or ODF), Rich Text Format (RTF), HTML, and PDF

Could we include jQuery in this project? I use jQuery almost exclusively when it comes to writing javascript, seeing how it allows to write concise javascript and it has a great selector engine for targeting elements in a document.

It's true that javascript is coming along nicely, especially with ESNext with arrow functions and the likes, but when it comes to targeting dom elements I think jQuery is still the king 😄

Determine the best/standard rails library to use for handling user authentication and secure storing of passwords

After setting up the projects scaffolding in PR #24, new, view , edit, index, and delete routes (and corresponding views) were automatically created.

First four routes seem to be working alright, I can create a new project, I can view the index of created projects, I can edit a project that has been created and update it, I can view a summary of a project that has been created. However when clicking on the automatically generated link for the delete route (which should make a DELETE request, as opposed to GET or PATCH), the project is not deleted. From examining the controllers it seems that there should be some kind of prompt, whether or not you confirm that you really want to delete the project. That's a good idea so you don't accidentally delete a project and have to start all over again. However I'm not seeing this prompt anywhere. I'd say this needs to be looked into. CSS / positioning problem? Or controller logic problem? Perhaps those with more experience in rails would know where to look to fix this? @mftruso @mkasberg

I added the i18n-js gem as well as the i18n-js yarn package in PR #24 in order to handle translation strings in javascript files.
However this might not be necessary, if we simply template the javascript files as erb files, using the backend I18n API.

Though the erb templating approach could also get messy. It might be easier to read a plain javascript file. So if we plan on moving forward with i18n-js, we'll have to make sure it's fully and correctly implemented, seeing it hasn't yet been fully tested.

I finally got the I18n object to be available globally in the application javascript.

It wasn't enough to follow the github repo readme, which doesn't take into account webpacker apparently.

And it wasn't even enough to follow suggestions such as this which fixes the webpacker issue, because the I18n object still wasn't available to the whole application, but would have been needed to be required or imported in every javascript file that wanted to use it.

In order to solve this, I also had to add i18n-js to the webpacker json configuration, under the ProviderPlugin section, alongside jQuery and $. However I18n in this case is pointing directly at the node-modules instance, and not at the js.erb which we created from the above suggestion.

In the meantime, I18n.translations is now being defined / imported in the js.erb which we created. So is I18n.translations actually available?

Also, do we need to configure the generation of .json language files from the .yml translation files? Or are the translation strings already available through I18n.translations?

We will need some trial and error and testing to see if this needs more work in order to function correctly, and we need to decide whether to follow this approach rather than following the erb templating approach.

For example, if a new translation key is defined in a javascript file, will the i18n-tasks be able to pick it up, if we're not using erb templating?

When a new project is created, a message something like "Project was created successfully" shows at the top of the screen.

Similarly when a project is updated, a similar message appears.

And probably when a project is deleted also.

In all of these cases, it would be much better for these feedback messages to show in a toast notification. Possibly autofading.

Here are some examples:

• https://tailwindcomponents.com/component/notification-toast (not auto-fading)
• https://tailwindcomponents.com/component/alphine-js-toast-notification (we could probably just use jquery, without including alpine as yet another dependency)
• https://tailwindcomponents.com/component/alerts-components (no autofade, but larger and more pastel)
• https://tailwindcomponents.com/component/notification-3 (no autofade, white background, only the icon is colored)
• https://dev.to/zaxwebs/toast-notifications-with-alpine-js-tailwind-css-lpc (autofade, but requires alpine, perhaps use jquery instead?)

We should add an "email verified" boolean field to user resources. Which means, creating a mechanism for verifying an email address on registration or on update of a user's account info.