#DailyBloggingChallenge (322/365)
The nice thing about #hugo is how quickly one can get a site up and running.
The tricky part of it is understanding its directory architecture. This can become more difficult if using a user predefined theme, especially if one wants to one's custom spin on nonexistent parameters.
#DailyBloggingChallenge (323/365)
One will learn that one will need to copy (usually) the whole file from the themes directory and mirror its directory structure onto the root level.
This can be quite a nuisance if one wants to change just one #CSS value.
#DailyBloggingChallenge (327/365)
To inject custom #HTML in #hugo, one will either need to activate it in the config
```
[markup.goldmark.renderer]
unsafe = true
```
or pipe the string with `safeHTML`.
#DailyBloggingChallenge (328/365)
The initial partial that is created is a button for #paypal.
This is done by saving a `paypal` param in the meta data of the article and then injected as an anchor tag onto the button.
The styling of the button is saved in a custom header partial that the theme provides.
#DailyBloggingChallenge (329/365)
This approach sounds quite good on paper, but #paypal carts don't work so simplistically.
Although this might sound like a headache initially, in the long run it is quite beneficial.
The paypal cart or form has a couple values which are important.
The main one is the form id. This exists in either case of purchasing an item from a single button or from a dropdown.
In the case of a dropdown selection, then the keys and values of the table cells are important.
#DailyBloggingChallenge (330/365)
Now that these factors are known, one gets start building the params' structure. The easiest is to have a param for the form id and an array of items for the store catalogue.
Each item of the array has a key, a value, and a image.
Further one can setup special params for the other table variables, though from brief comparison over three separate forms, they seem to stay constant.
#DailyBloggingChallenge (338/365)
The #HTML code from #PayPal looks like the image with these variables:
- `<PAYPAL_TOKEN>` is the main PayPal hook, so it knows how to update the store relative to all further actions taken within the form
- `<PAYPAL_INIT_REFERENCE>` usually as `on0`
- `<PAYPAL_INIT_VALUE>` is usually equivalent to `<PAYPAL_ITEM_1_VALUE>`
- `<PAYPAL_INIT_NAME>` is usually equivalent to `<PAYPAL_ITEM_1_NAME>`
- `<PAYPAL_ITEM_1_NAME>` is usually equal to `<PAYPAL_ITEM_1_VALUE>`
- `<PAYPAL_ITEM_2_NAME>` is usually equal to `<PAYPAL_ITEM_2_VALUE>`
#DailyBloggingChallenge (339/365)
Through the abstraction of these variables and using the power of an array in the meta of #Hugo as #toml, one can create an item like in the image.
The array in this example is called `paypalItems` and each element has the properties: `name, value, image`. Further properties of the meta are `paypal` as the `<PAYPAL_TOKEN>`, `price` should align with the price within the #paypal cart, `paypalHeadName` as `<PAYPAL_INIT_REFERENCE>`
paypalHeadValue as `<PAYPAL_INIT_VALUE>`.
Of course one could optimize the code somewhat by removing the variables that have `INIT_(VALUE|NAME)` within them and replacing them by the first item `1_(VALUE|NAME)`. And replacing `<PAYPAL_INIT_REFERENCE>` with `on0`.
#DailyBloggingChallenge (340/365)
Now we will create a partial called `paypal-button.html` within the `layouts/partials/` directory. We want to call this partial like
`{{ partial "paypal-button" (dict "paypal" .Params.paypal "items" .Params.paypalItems "headName" .Params.paypalHeadName "headValue" .Params.paypalHeadValue) }}`
within a list template (either the default or another partial).
#DailyBloggingChallenge (341/365)
The question now is how to build the partial. Since #Hugo is a static site generator that focuses on using static elements like raw #HTML and #CSS, one quickly realizes the options to continue further are not many.
One could try to use the CSS `option:checked` property and other pseudo classes within the `<option>` HTML tag to turn on and off the various choices within the array. Though this becomes quite difficult to reference items outside of the `<option>` tag and can make the whole thing an UX nightmare.
#DailyBloggingChallenge (342/365)
First we want to resolve the UX nightmare issue by designing the UI usable.
Let's go with this arrangement of items:
- title of item
- image of item
- drop-down to choose the item
This means we want to create some kind of callback that updates the prior two components that are dependent on the selection within the drop-down. Thus, we will need to extend #Hugo with #JavaScript while using #golang.
#DailyBloggingChallenge (343/365)
Time to make an overview of what we have so far:
(image Initial)
Since we are already using the callback approach, it would be better to move out everything that is not viable to the #paypal form. Thus making the overview more like
(image Reformed)
#DailyBloggingChallenge (344/365)
Let's say we would implement this pseudo code for the subdirectory `content/post/store`. It would work fine for one product in the subdirectory `store`.
Now let's add a second product that also has the same form (339) with different values.
If one would change either drop-down, both would update. The reason is that the #JavaScript callback is only checking for the #CSS class change and not for an unique class.
References
#DailyBloggingChallenge (345/365)
The next step is to create an unique value. Luckily #Hugo has a built in command via
`{{ $uniqueID := .File.UniqueID }}`
which needs to be placed within a range tag meaning within
`{{ range .Pages }}`
So the whole `list.html` file would look like the image. We are also passing in the `"uniqueID" $uniqueID` as the last parameter in the `dict` for the `partial "paypal-button"`.
#DailyBloggingChallenge (348/365)
In 342 the first mention of using a callback function is used without any concrete description of how it shall be built. From the last image one needs to change the partial reference to be saved as a variable which is then piped with `safeHTML`, so
`{{ $itemsOutput := partial "paypal-button" (dict "paypal" .Params.paypal "items" .Params.paypalItems "headName" .Params.paypalHeadName "headValue" .Params.paypalHeadValue "uniqueID" $uniqueID) }}`
and the rendering is done via
`{{ $itemsOutput | safeHTML }}`
#DailyBloggingChallenge (349/365)
Further within the partial, since `safeHTML` will be used one can parse string using #HTML and #JavaScript syntax within #GoLang. As an example
`{{ $output := "" }}`
`{{ $output = print $output "<span>Example</span>" }}`
`{{ return $output }}`
This creates a `<span>`-tag with the text `Example` after `safeHTML` pipe is applied.
#DailyBloggingChallenge (350/365)
Now wrap the #HTML code (338) with a `<div>` and a #CSS class that extends the `uniqueID` (345) in its name. The pseudo code looks like the image.
- 338: https://qoto.org/@barefootstache/112786449265511946
- 345: https://qoto.org/@barefootstache/112786991862960301
#DailyBloggingChallenge (351/365)
Now that the #PseudoCode exists, it shall be converted into #Hugo syntax as described in 349. As in the image, some #GoLang functions are used like `printf` and other Hugo functions to loop over the variables that are saved as an array type.
#DailyBloggingChallenge (352/365)
This code will generate dynamically based off of the length of the `paypalItem` or `.items` variable and use the first element of it as the default value (line 9).
Next one will extend the code with more CSS classes to ease the referencing of the JavaScript actions.
#DailyBloggingChallenge (353/365)
Looking at the #JavaScript code in the image that will be parsed over #GoLang using the `printf` function.
First one creates a `change` event listener function that is bound to the id of `item-select-$uniqueID`. The `<select>`-tag shall be added the `id` attribute in line 13 (351).
Additionally a custom attribute `data-image` shall be created and placed on the `<option>`-tag in line 15 (351). This holds the path to the image value within the `paypalItems` element.
Outside of the partial the #CSS classes `selected-value` and `selected-image` need to be defined. They present the respective values from `paypalItems` element.
In the initial case, lines 10-11 will be called that take the value from the first element in the `paypalItems` array. Defined from `{{ $selectedValue := index .items 0 }}` which shall be prepended before the JavaScript code.
@barefootstache Hi, hired to work on which professional site?
How did you win over to work using #Hugo over #Wordpress?
(i.e. was it specifically some points of convincing them or more their ability / skill more neutrally to not need be swayed from typical "Wordpress" standard as a site?)
@freeschool still in development:
https://munich-rucking-crew.codeberg.page/
Main points were: ownership of content, speed, green development, accessibility, independence
Downside for me is that I will have more overhead in the long run.
@barefootstache Ah great, rucking-related stuff, just what you're into also. Glad to hear!
How does one even price this kind of work, if you don't mind me asking? There like an X factor perhaps of hours and the degree of difficulty involved... where Wordpress perhaps designates that to owner and it's main users with GUI interface (IF I'm right there?)
@freeschool it all depends on what kind of pricing model one prefers.
I prefer the project plus optional service model.
Things to consider:
1. Who and how will it be hosted? Prefer with codeberg using two repos, one for development, and one for publishing.
2. How will it be themed: predefined or custom? Prefer predefined, since it is less work for me and customer can see results quite quickly. Some customers like predefined with customizations like different styling colors. For custom, a designer will need to be hired separately.
3. How many additional components will need to be made? Do all the components aka partials from the theme suffice, or do new components have to be integrated. This is the most work, since one will need to abstract component just enough so that the customer can add the different values for the variables without needing to deal with the underlying code.
Optional service: maintenance
The concept of git is just too much for the basic individual, thus one will have to maintain this step.
Next the abstraction of markdown is too difficult for many to understand, thus one will have to pattern match between documents and markdown.
Next the meta data of each markdown file might be too much on top of the abstraction of markdown to understand which patterns are acceptable and which ones are not, so more maintenance here.
In the end, unless the customer is willing to learn the services and technology, they will purchase the whole package.
Project: one time cost
Services: either monthly subscription or per entry
Working together, Matching Wants / Wishlists, Payments and 'occasioal' Exchanges...
@barefootstache Great read actually and clarity... worthy preparation for the client - they should pay you in explaining it all! :)
What about payment options or ever done an exchange of services or material? (chances are low but if happen to find someone, say me to do some audio editing / podcast work in exchange for a site - I'm not asking btw)...
I know moolah 🏦 is #1 but both paying and also getting charged for it is a bit like hmm,...
And chances are low like every 100 Fediverse person you meet can do something if even chances are still super-low but well what do you think - do you have wishlist of project you could hand off a bit to someone else to start / continue / finish?.
yeah ACTUALLY matching wants would be cool - what do you think... actually like a website with #wishlist ?
Would by-pass somewhat the dirty rotten middle-men and at the same time encouraging those who have skills on #Fediverse! 🤔 
🤔 ?
Working together, Matching Wants / Wishlists, Payments and 'occasioal' Exchanges...
The question that each individual should ask themselves before taking upon any task is why are they doing it?
Is it because they want to or is it because they have to.
As long as one finds individuals that want to do a specific job, then an exchange of services could work.
And this is the core concept behind open source projects or non-profits.
Individuals who have to do task are more prone to lose motivation and thereby might delay or in the worst case cancel the whole gig altogether. Thus a formal contract should still exist to catch such cases where states something in the lines of:
> If one does not provide the service as advertised, then this price is due.
Further one should put also a clause that manages the expectations. This in the long run won't discourage the employer to quit potential further gigs.
The only benefit I see behind wish lists is that it could be an option to circumvent income tax.
Working together, Matching Wants / Wishlists, Payments and 'occasioal' Exchanges...
@barefootstache Sure from their view, and from another view those that are more intentional perhaps "For the Fediverse" (in very short) and other reasons (not the only one, we still genuinely give and take what we can and exchange meanwhile in other ways too). But practising / experimenting / a bit of self-development could go a long way else not losing much... We have a good wishlist to show each other at the end and perhaps pin it to our profile :)
Something else also is there for me like the "Doing if for ourselves" | DIY ways |"For the love it" | "On the Fediverse, For the Fediverse" means many reasons can be included as people prefer things here (interface, social, anti-cap) and I guess these are what might curve or re-direct people's existing wants and why... to make it the reason also! (it's not exclusive)
Even if it's a basic list to start off with just for me and only those that actually want to chat will write it, I think it's still very interesting :) even in the lowest responses... say just you and one by one for now... (do you mind a quick wish or project list? thanks!)
But to include Fediverse also is "in order to populate / propagate work here instead of 'there'..." and that could be a sort of principle written up for this idea so that it's as a 'Manifesto' or alignment of all our efforts or even something fun.
Much like a new way or new path or new software, it might serve people almost the same in the end while providing another eco-system here all the while... (a bit of ping pong and interest will soon prove itself and well there is actually time to let it simmer or slow-cook / seed etc)
If a few people get what they want done (even without caring much) they might use things as they are already here (like #hashtags for @freemo ALL the jobs he needed 11+ maybe but I remember it was just hashtags that did it!!) What a win for #Fedihire and #Job hashtag and I helped to overload hashtags to get that (he didn't have #Fedihire which is more respected now maybe for high quality jobs)
So just to stick a wish list on their pinned list for their practise and test to see what happens... might not be too bad!
Doesn't seem to cost much and even I could throw some money to it to help incentivise or get idea clear somewhere even on another external page (lol) but somewhere clean and clear and then back to here... maybe just images of the steps I'll work on as as wishlist icon and pinned post...
Summary... (that for reading and considering problems or what sounds best to you)
A kind of "doing it for ourselves" is really what's needed so this is part of that without trying to break ourselves over it or break the bridges of reality without something too new - just us more conscious or testing perhaps...
Even Gartner-effect it while being totally honest it's just starting or if I pay the way for people's wishes to be done in order to start things off and then "pay it forward"... then so be it, I'm seriously happy to throw money at Fediverse now and also before my own educational test and attempts here are complete...
https://en.wikipedia.org/wiki/Gartner_hype_cycle#Hype_in_new_media
#Wishlist #GiveTake #Opportunities #Jobs #FediHire #Activities #WantedAds #LocalAds #etc
Working together, Matching Wants / Wishlists, Payments and 'occasioal' Exchanges...
Like you state one would have to test it to get the most accurate response of how any group of individuals would react.
Pinning the wish list is a good ad hoc solution and having it on a secondary site as a backup or primary is also not bad.
The main place where I have seen wishlists is among streamers, thus there might be much lead way until the first items are brought into existence. Unless one already has a big fan community.
One could start doing an analytical evaluation of seeing how many reactions one gets onto one's own content.
It will definitely be much work to see any valuable results under our small (combined) followers.
From personal experience participating in many ideas, one will need a leader who is 110% behind the idea and constantly motivate the other members to continue progress towards the incentive.
There are two main downfalls: 1. taking too long to start creating the product, and 2. wasting too much energy building something the customer doesn't want.
Although such downfalls exist, an okay result would to create new friendships that break the confines of the project or realm.
Working together / Exchange > TANGENT = #STEM #Stereotypes #SomethingNotQuiteRight
@barefootstache Just had a thought, without causing offence I hope,..
I wanted to delay writing but perhaps before something happens to my screen I send it...
It occurred to me perhaps in the mind of someone analytical or deeper in STEM that all these reasons I give about Fediverse, for the love of things.. etc... are basically all uninteresting for these types of person, and it's not even on the radar of interest for these types to try or more to question why one others improvement benefits them or helping people together or just human stuff overall perhaps!..
Even as test... knowing it's human to human in a chain... I think people might want the end point and to terminate when it reaches a computer... !
I mean probably not you completely but from a scientific (or other word like binary) view, a sort of "why do any of this stuff?" and it's all so messy with a person - give me a programming language instead. Seems to be something I discover a lot... so this is helping me here... where I think this might be the case with this kind of grey human stuff on a STEM server which often claims to be for some betterment but ultimately for STEM and not really humans? I think this is self evident by the amount of posts for this or the other...
I may be inaccurate but generally what I think I've see is this "all or nothing" or "tech or no tech" or "it works already or else it needs to be broken first totally before we fix it" and certainly the human relationship or unity seems not even wanted to be measured.... because it can be, love can be measured also... but almost bizarre to say it like that...
So is it just boy and toys stuck in their own matrix ? Literally sucked in somewhat into the electric toy and challenge to keep those bells and whistles going...
2 beers later and I'll claim that's the reason for sending but really I'm being real to say I might understand I "push people to think for others" as a kind of emotional intelligence or help and they are not interested frankly since they have not such feelings or skill.. Am I kind of right?
I admit over the internet all heat (if anyone had any) can be lost and needs even more compensation / faith internally in people (what I don't have problem with as this is the best we're going to get) and finds it hard not to say "this person is not on my level" and a reason why not even answer / revisit / build the conversation.
Even if it would work perhaps it feels like people would find problems or don't even believe in free!
There's something "too good" or "not the way" about it ! Maybe if it was paid or done a more scientific way it would be far for interesting but again losing the point ! :)
What do you think any truth in any of that without thinking it's personal against you - perhaps common in people in the STEM area working like soldiers (if we can represent them here somewhat knowing that's not perfect) and basically those who don't really care for the other imperfect people and areas because basically the have computer in front of them?
Working together / Exchange > TANGENT = #STEM #Stereotypes #SomethingNotQuiteRight
@freeschool The analytical thought process that is typical used in STEM should not be put on fault onto a topic that has an umwelt factor connected to it.
In every field/branch if life, there will be those who do what their are told and only work when they are told like a soldier. Then you have those wallflowers who are hired, but one doesn't really know who they are. Then there is the class clown, they are loud and obnoxious and seem like they know everything, though usually don't. Then you have the go getters, they go beyond their job description. And many more stereotypical positions in a group dynamic.
What fascinates me is how many individuals just clock in and clock out everyday at their job and don't progress their learning at home with side projects or reading the content or any content to better oneself.
The luxury of complacency will be the downfall of societies. This is what I assume you are frustrated about.
This could be explained away with "what was your motivation to get out of bed today and do what you did?"
Another factor is how many daily responsibilities do you have? Are you only caring for yourself or are you the primary care giver in your household?
I can completely understand anyone who says that they are full to the brim of responsibilities and are not willing to hand out any more energy towards the betterment of human kind. I can also completely understand the personal selfishness of doing the absolute minimum to keep oneself or one's family afloat.
In the end it is a combination of one's umwelt, one's upbringing, and one's responsibilities if one is willing to do anything for the betterment of human kind.
#DailyBloggingChallenge (324/365)
Learning about the directory architecture opened the gates of writing custom partials.
I previous knew of their existence depending on the specific theme and usually could avoid them by injecting custom #HTML.
Now that I have been hired to work on a professional site, especially after propagating why to use #hugo over #Wordpress, I shall use the framework to its standards and fullest capabilities.