[sticky entry] Sticky: Welcome!

Jul. 7th, 2023 02:41 pm
vex_verlain: The words "Vex Codes" in large text with the word "Sometimes" written smaller underneath. (CODING: sometimes (comment))
[personal profile] vex_verlain
  Projects in Progress  

  Completed Projects  
Tools Snippets Templates Tutorials

 


  So what's all this, then?
I have noticed more and more people are interested in having their fic hosted in multiple places, including their own personal archive that they can control.  While I certainly encourage everyone to learn HTML and CSS, there are barriers to accumulating that knowledge (namely time and energy).  I am here to help bridge that gap, because that's what we do in fandom.

I am currently working on two templates:

The Fic Archive Template will allow you to filter stories instantly by fandom, ship, rating, word count, or whatever else your heart desires.  Rather than having individual pages for Fandom 1 and Fandom 2 and Fandom 3, everything will show up on this single page along with all of the relevant information.  This template will be mobile-friendly and have a dark mode toggle.

The Individual Fic Template will be a mobile-friendly page for your individual stories, focused chiefly on readability and accessibility.  It will mimic the flow of AO3 (including optional beginning/end notes for each chapter, since so many authors have become used to this).  Each page will also include an optional header with all of the info you are accustomed to seeing on AO3.  There will be a dark mode toggle as well as navigation links.

Once these templates are finalized and released, they can be used by anyone who wishes to host their own fic.  (My host suggestion is Neocities, which offers free webspace.)  The final products for each template will only include HTML, CSS, and JavaScript.  These are very basic coding languages, which means the files will be compatible with the hosting offered by Neocities (see a list of their allowed file types).

  Will these templates be free to use?
Yes.

These templates will be free to use for non-commercial purposes with attribution (a link back to me).

  Will I really be able to use these templates without any HTML knowledge?
You should be able to, yes.  The code itself will have a step-by-step guide within it, and there will be additional guides here on the community.  The only setup requirement is to use a desktop or laptop computer rather than a mobile device, especially if you choose to download Notepad++ (which is highly suggested, as it will help a lot when it comes to customizing your templates).

  How can I help?
Your feedback is absolutely vital to this project!

Take a look at the journal entry for each template and click on the link to the current build to see how it's coming along.  There are comment threads on both entries where you can ask questions about the template, submit suggestions/requests for the template, report bugs you find in the template, or leave feedback for the template.

If you have general questions, please ask them here.

If you have general feedback, please leave it here.

Anonymous commenting is on!

  Who are you?
I'm Vex ([personal profile] vex_verlain).  I taught myself HTML and CSS back in 1999.  If I could fix everything, I would; this project is simply a small thing I can do.  Fandom is not a hustle for me.  I miss the days of Web 1.0 and have a lingering belief that most things online should be free.  But I also live in a capitalist hellscape and am no longer able to be the breadwinner of my home, so...fuck it.  If you feel so inclined, the tip jar is open:  [ko-fi.com profile] vexverlain
  • Add Memory
  • Share This Entry

Snippet: Make details tag mimic cut tags on Dreamwidth.

Nov. 13th, 2023 10:01 pm
vex_verlain: The words "Vex Codes" in large text with the word "Sometimes" written smaller underneath. (CODING: sometimes (comment))
[personal profile] vex_verlain

💬  A note from [personal profile] vex_verlain:   I know this is not an update to the fic archive template or the individual fic template, and I'm sorry.  Life has not been kind, and I have been working on things as my mind allows.


Here's a CSS snippet for anyone who makes or edits their own themes on Dreamwidth! (Please note that it's geared more toward those who customize for themselves vs. other people.)

Over in the [community profile] style_system community, [personal profile] musyc was asking about how to make the <details> pseudo-cut look like a real <cut> on their Reading Page.

Here is what a plain <details> tag looks like:
What a plain details tag looks like.

And here's what the <details> tag looks like when it mimics a <cut> tag:
What the details tag looks like when it mimics a cut tag.

You can grab the code from here:
Make <details> tag mimic <cut> tags on Dreamwidth.

Note that this code will not have the desired effect on <details> tags that have had their CSS customized within the post entry itself.

Please drop a comment here if this was useful to you.

If you happen to use this snippet on a theme you develop and distribute to others, credit to [community profile] vex_codes would be lovely, with the caveat that I would strongly advise you to suggest that no one use such a theme on a Dreamwidth community. This snippet is meant to allow you to see things how you would like to see them, not to force confusion on others as to whether something is a <details> tag or an actual <cut>.
Tags:
  • Add Memory
  • Share This Entry

Tool: AO3 Work Skin Helper

Nov. 13th, 2023 07:49 pm
vex_verlain: The words "Vex Codes" in large text with the word "Sometimes" written smaller underneath. (CODING: sometimes (comment))
[personal profile] vex_verlain

💬  A note from [personal profile] vex_verlain:   I know this is not an update to the fic archive template or the individual fic template, and I'm sorry.  Life has not been kind, and I have been working on things as my mind allows.


Screenshot of AO3 Work Skin Helper

Back in mid-October, [archiveofourown.org profile] hughmikkelsen asked people on the EAD server about what methods they use to double-check their code when they're creating AO3 work skins. Now, I've never created an AO3 work skin, but I do so enjoy being helpful, so I stripped down the base code from AO3 and created a template on CodePen. Basically, it allows you to see your changes in real time instead of having to work directly in AO3. (Maybe this has been done before; I don't know.)

You can try it here: AO3 Fic Template for testing work skins on CodePen.

Please note that knowledge of HTML and CSS are required in order to code your own work skin.

  Click Here to View the Instructions  
1. The custom CSS you're writing goes in the middle editing box (labeled CSS) where it says:
/* YOUR CUSTOM CSS GOES HERE */
2. HTML that references your custom CSS goes in the left editing box (labeled HTML) where it says:
<!-- YOUR HTML CODED STORY STARTS HERE -->

 


If you happen to use this tool to code your own work skin, please leave a comment and let me know how it goes! Questions, feedback, and criticism are welcome.
Tags:
  • Add Memory
  • Share This Entry

IN PROGRESS: Individual Fic Template

Jul. 7th, 2023 01:55 pm
vex_verlain: The words "Vex Codes" in large text with the word "Sometimes" written smaller underneath. (CODING: sometimes (comment))
[personal profile] vex_verlain

Individual Fic Template
Status: in progress

Preview of the Individual Fic Template in progress.

Preview Progress

Pre-Release Development Goals
  1. Add basic coding for chaptered fics.  (Chapter headings/titles, chapter beginning notes, chapter end notes.)
  2. Add additional coding for chaptered fics.  (Wait to see what users prefer.  All chapters on one page, with a drop-down menu or some other type of navigation?  Or all chapters on separate pages?)
  3. Make default template differentiate between main and additional pairings and characters.  (Note: no one will be forced to differentiate.)
  4. Fix mobile view.  (If mobile users pinch-zoom, we want the text to increase and fit the device width, not zoom.  This will likely involve the VisualViewport and JavaScript.)
  5. Fix print view.
  6. Add dark mode toggle.  (Accessibility.)
  7. Make CSS customizable (add variables).
  8. Possibly a thousand other things I'm forgetting.
  9. Clean up code and add instructions within code.

Get Involved: Individual Fic Template
Tags:
  • Add Memory
  • Share This Entry

IN PROGRESS: Fic Archive Template

Jul. 7th, 2023 07:54 am
vex_verlain: The words "Vex Codes" in large text with the word "Sometimes" written smaller underneath. (CODING: sometimes (comment))
[personal profile] vex_verlain

Fic Archive Template
Status: in progress

Preview of the Fic Archive Template in progress.

Preview Progress

Pre-Release Development Goals
  1. Add URL hash. (This will allow users to link directly to filtered pages.  Useful if a user wishes to link someone to all of their Character A/Character B works.)
  2. Add search functionality. (This will allow users to search by anything while also filtering; e.g., filtering for Character A/Character B and searching for "omegaverse" would give you all omegaverse fics for Character A/Character B.)
  3. Add toggle ability for filters.  (This will allow users to select Character A/Character B and then deselect it by clicking it again.)
  4. Add functionality to show Series (containing two or more works).
  5. Add dark mode toggle.  (Accessibility.)
  6. Make CSS customizable (add variables).
  7. Possibly a thousand other things I'm forgetting.
  8. Clean up code and add instructions within code.
Post-Release Development Goals
  1. Optional integration with Google Sheets. (This will allow users to populate information from a spreadsheet rather than inputting everything into the HTML file.  Since Neocities and some other hosts do not allow databases [MySQL, etc.] this might be the best workaround.)
( Progress notes. )
Get Involved: Fic Archive Template
Tags:
  • Add Memory
  • Share This Entry