stringbone/collage: Making web 1.0 style websites slightly easier. - Codeberg.org
This website requires JavaScript.
stringbone/collage
Watch
Star
Fork
You've already forked collage
Code
Issues
Pull requests
Releases
Activity
Making web 1.0 style websites slightly easier.
38 commits
2 branches
5 tags
676 KiB
HTML
79.6%
Awk
13%
Shell
7.4%
main
Find a file
HTTPS
Download ZIP<br>Download TAR.GZ<br>Download BUNDLE
Open with VS Code
Open with VSCodium
Open with Intellij IDEA
stringbone
5676387380
Miscellaneous improvements (#3)
...<br>* Improve clarity in the readme file for users.<br>* Add more FLAIR to the example pages.<br>* Some small accessibility improvements to use of `-block-start/end` instead of `-bottom/top`
Co-authored-by: Milo Fultz<br>Reviewed-on: #3
2025-02-15 19:33:21 +00:00
src
Some small refactoring for devex (#1)
2025-02-10 02:02:42 +00:00
_footer.phtml
Miscellaneous improvements (#3)
2025-02-15 19:33:21 +00:00
_header.phtml
Miscellaneous improvements (#3)
2025-02-15 19:33:21 +00:00
andres.jpg
Add better contact and float utilities
2025-02-11 20:30:16 -08:00
bichipoo.jpg
minimize dog
2025-02-11 20:30:34 -08:00
CHANGELOG.md
Update changelog
2025-02-11 20:38:30 -08:00
contact.html
Miscellaneous improvements (#3)
2025-02-15 19:33:21 +00:00
contact.phtml
Add better contact and float utilities
2025-02-11 20:30:16 -08:00
hampster.gif
Miscellaneous improvements (#3)
2025-02-15 19:33:21 +00:00
index.gmi
Add youtube video embeds, user settable options for media rendering
2025-01-28 08:44:00 -08:00
index.html
Miscellaneous improvements (#3)
2025-02-15 19:33:21 +00:00
links.html
Miscellaneous improvements (#3)
2025-02-15 19:33:21 +00:00
links.phtml
Improve template
2025-01-26 17:10:12 -08:00
README.md
Miscellaneous improvements (#3)
2025-02-15 19:33:21 +00:00
stone.mp3
Improve gmi parser
2025-01-26 23:44:58 -08:00
README.md
COLLAGE
Make your website like you used to with Neopets, Myspace, and all that good stuff.
For every .phtml ("partial HTML") or .gmi (gemtext) file in a given directory, take the header, the given file, and the footer and paste into a file with the same name and an extension of .html.
You can see a very rudimentary example scrapped together here.
If you are a little more tech savvy, you can easily extend the shell scripts to build a site out of whatever files, like markdown or Kaku. Check out the build scripts to extend it further!
How to use it
Create pages by making or editing phtml of gmi files (read more about the gmi format here). These will be converted to html files with your header and footer files attached. For instance, if you make a file named links.gmi or links.phtml, it will be converted into links.html.
If you want content at the top or bottom of every page (e.g. a heading), put that after the tag in your _header.phtml and/or before the tag in the _footer.phtml files.
If you want to style your pages, you can either use inline styling (if using phtml), the tag in the header file, or by loading in a css file using the tag.
When you are ready to build your website, open the src/build_all.sh file in your terminal to build all the files. You may need to right click and select "Open with", and open the script with the "Terminal" app.
Upload the outputted html files and any media files you are using to your hosting service using Cyberduck, Filezilla, or your host's platform.
Render options
In the src/build.sh file, there is a small section at the top of user options. Setting the value after the = sign to true or false will affect the final build.
Tips for a great website
Every page should start with an h1 element that is the focus of your page, and all other headings should be nested properly. (Why?)
Use HTML elements with the appropriate semantics: for quotes, for bolded text, for emphasized text, etc. This makes styling super simple and makes your site more accessible to all users. If your HTML is good and accurate, your users will thank you!
I've added some utility classes to the header file to style your text. You can find them in the tag at the top of the _header.phtml file.
Don't add Javascript to your page unless you really need it! There is currently one script in the template that is used for updating the site title based on your current page to improve accessibility, but if you don't know what you are doing, scripts can create security problems for you and your visitors. Especially don't add tags you find on other websites!
Have fun!
Why?
I have a friend who wanted to make their own website. I thought Lichen would be perfect, but unfortunately their server wasn't going to work. THey liked the Neopets/Myspace days, so I thought I'd give them the barebones way to build their own site:
Make a header
Make a footer
Make some pages
Run a script
Transfer files onto the server via FTP