Submitting Hugo Form As JSON/TOML/YAML - json

I'm trying to create a website that has a form that allows people to enter data directly into a json/yaml/toml file (doesn't matter which, I don't have a preference).
It's easy to pull data out of the file to display, but I want people to submit their own information and have it saved to the file.
I don't have any code yet since I'm not even sure where to start on the form. I thought it would be super simple, just create a form and have it submit the data to the file, but I can't find the instructions in my Hugo book or online, here or otherwise.
I'd love some help if anyone has time to give me a hand.
Thank you!

Hugo is a static website generator. Acting on user-submitted data is a dynamic action. Hugo cannot help you with that. What Hugo does is to create .html from your input, and you serve those files with a web server. The files cannot change after they have been created, and Hugo is a processor that is run to create the files, not an active service running when you serve the files. Therefore, you cannot act on user-submitted data.
You either need implement everything client-side via JavaScript (or WASM), or you need to have an active backend to do what you want. In both cases, Hugo cannot help you.

Related

How do i get the values from multiple forms in different pages in node js?

Im really new to node/MEAN stack and i would appreciate if somebody can help or guide me or point me to some related tutorials.
I have just purchased a wordpress template for a booking application. This came with different pages for choosing a date, selecting a room, the booking information and confirmation.
I have put the html pages inside the public directory and it was already running.
From the index, clicking booking will lead me to choose-date.html, then to booking info without touching the server side. How do I get the value from the date in the choose-date.html and booking-info.html? I planned to submit the information on the confirmation page.
In asp.net mvc, this could be done by having a controller and action for each and save a session in the server. If i use asp.net mvc, i have to modify the html to use a layout and such. This i want to avoid.
Angular is for single page only and as i understood it could not be applicable to this scenario though im planning to used it to post on the confirmation page.
Any suggestions? I very much appreciate any help and guidance.
Here my folder structure:
You have essentially three choices as I see it. 1) write a new app using the Wordpress template as inspiration. 2) write a Wordpress app using the template you provided. 3) write an Express app and use the template you bought for just the html.
If you do the third, there are a lot of options for doing a multi step process, but the basic pattern I've found useful is to just have one object in the database (eg your booking) and have each form be either a PUT request (so you send the whole object over the wire on each form submit) or a PATCH (where you only send the new info).
FWIW you could still do the ASP.NET method you described with storing things in session, I just don't think that's a great way to go regardless of framework.
edit
I guess arguably you could also use angularjs and treat each html chunk as an angular template that gets fetched as a directive demands it. But I think that'd be tricky to get right given where you're at with the project.

Grunt module to inject HTML templates

Recently started using Grunt as a build tool for a web app I'm hobbyist developing. I have a series of HTML files (to be used as templates), in a single folder, that I'd like injected at a particular point in the main HTML file.
Ideally, I could also wrap each file in a tag, but having to manually include this in the template files themselves is acceptable.
Is there an existing Grunt module to perform this?
EDIT: I may have worded my problem poorly before. Essentially, I have a single HTML file where the app will run (Single page app, business simulation game). In a separate folder, I have a series of HTML templates. Each of these template represents a dialog, or custom info page, something of that nature. As the app is developed, more and more templates will be in this folder.
Rather than manually including each one in my page, I'd like a way to automate injecting them that I can manage through Grunt.
I may be late to answer this question, but for anyone that end up here, I found this grunt-plugins, maybe they help you too:
grunt-replace.
grunt-html-build.
grunt-processhtml.

html directory listing formatting

So, I've been trying to get a web page to display links to videos (over a symbolic link) dynamically (i.e., without hardcoding an <a></a> tag for each one) I have, and I think I may have found a solution, albeit a hacky one:
Video
Ignoring that this is a horrible way to do this, does anyone know how to format the following?:
I'm guessing there is an apache config file somewhere, but it is extremely hard to search for it as I do not know what it is called when files are just listed in this manner.
i'm basically looking to resize the widths of columns, and maybe even do some pretty-fication.
this is all running on my web/file server and is being accessed form my local machine.
This is what you're looking for:
http://perishablepress.com/better-default-directory-views-with-htaccess/
This tutorial details how directory listing by Apache can be modified to suit your taste using HTAccess file.
Using Apache HeaderName and ReadmeName directives and the module "mod_autoindex.c" you can add custom markup to your directory listing pages.
For displaying links to A/V and other files, look at my website: https://wrcraig.com/ApacheDirectoryDescriptions.
It goes beyond the default directory description, providing a spreadsheet to assist in creating detailed descriptions and exporting them in FancyIndex/AddDescription format for inclusion in .htaccess.
It also provides a menu driven BASH scripted alternative, using the FancyIndex descriptive data above (automatically adding A/V durations) to recursively populate a custom index.html while retaining the security features of .htaccess.
The site has examples of the input spreadsheet and both the FancyIndex output and the optional BASH scripted output.

Encrypt CSS external link and restrict access to it

I have a new client who asked me to make 2 websites and no payment so far!
I have the ftp accounts, but he can always close my access and leave me without pay.
Can I upload the CSS to another server of mine and encrypt the link to CSS file?
If yes, can I restrict peoples to see the file if they find the URL to CSS file?
Thank you!
If they are his hosting accounts, then accessing them to tamper with the code for the purpose of disabling his sites without his authorisation is probably illegal.
If he hasn't paid you, you own the copyright. If he refuses to pay you, file a DMCA complaint with his hosting company.
Technological measures like this are futile and unprofessional. Next time use a contract.
This is simple. Same scenario happened to me, and what I did was added an new index.html which was an under-construction page, and renamed the original index.php as index_to_be.php.
I then added a redirection using htaccess to the new index.html.
The client contacted me straight away and paid up in no time.
If you don't know how to use htaccess, you can simply add a header location value to the top php page.
header("location:index.html");
The best way to do this is to create a simple PHP file that allows you to access, edit and delete files on the server. You can also search for a ready made lightweight ftp script. Place the PHP file somewhere on the server nested in other folders and name it something like temp.php. Now even if the client blocked you access to the server, you can still access, edit and delete files on the server by pointing your URL to temp.php. When you get paid, be kind enough to remove the file. Don't forget to password protect it.
In your PHP file you can use opendir() to read files from a directory, and unlink() to delete files. If all you want to do is be able to delete files, then the script will not take you more then a minute to create.
UPDATE
You can use the following lightweight ftp script that will let you view, edit delete files and also give you the option to password protect it. http://sourceforge.net/projects/pafm/
You could remove the style sheet from the client's site, upload it to one of your servers and embed it from there:
<link rel="stylesheet" href="http://your.server/styles.css">
however, you will not be able to seriously obfuscate this. One idea that comes to mind is to add a huge number of spaces before the "link" tag to hide it in the source code view.
<link rel="stylesheet".....>
You could also lazy load it using jQuery, but that would disable the style sheet for users who have JavaScript turned off - mostly a no-go.
In the end, no matter what you do, all this will be trivially easy to circumvent. There is no way to reliably keep control over the site in the scenario you describe. Like #thirtydot says, the best thing to do is to send a screenshot instead.
This is probably like trying to kill a fly with a ICBM but...
You could always use a JavaScript to add the link element to the DOM, and run the JavaScript code through a JS obfusticator.
But still, that's hackish, and overkill, and ways you can get the link anyway.

How do I show an external file creation date on website?

I am using this site template to create a mobile/iPhone friendly site. I want to have it link to files, and below the link I want it to show the creation date. Currently everything is working fine but everytime I upload the file I also have to go into the index.html and change the modification date. Is there any type of script to do this for me that will work on my site? I have very basic HTML understanding, hence why I am using a template.
Thanks!
you're going to need some server-side scripting like PHP or ASP.NET. Using that, there are built-in File IO libraries where you can get the creation/modified date.
There are 2 ways to show file's last modification date (and only one of them works for creation).
You can have a file list generated by the file-listing capability of your web server. Basically, any URL mapping to a directory that is permitted to show its contents will result in a web page listing the directory contents, like this:
Index of /images/appimages/MastheadButtons
Name Last modified Size Description
-------------------------------------------------------------------
Parent Directory 22-Jun-2010 09:35 -
GP.JPG [link] 22-Jun-2010 09:41 1k
web.jpg [link] 29-Jan-2003 15:28 17k
You can have a back-end (CGI) script which produces the HTML page print any info you wish.
If you only know HTML, the second approach would not be practical for you. If you know some programming language in which to write web apps (PHP, Perl, anything), you can ask a more targeted qyestion of how to achieve what you want in that language.
However, HTML by itself is running on your browser. It doesn't execute any code on the web server where the file lives and thus doesn't know anything about the files.
Found the solution: I changed the file extension to .php from the iPhone Website template and then inserted this code where I want the modification date to be:
<?= date("m/d/Y H:i:s",filemtime("filename.extension")) ?>