Compare commits
5 commits
e2d340f555
...
eb547c9b7f
| Author | SHA1 | Date | |
|---|---|---|---|
| eb547c9b7f | |||
| 8b6cf1db9b | |||
| 6508182f2a | |||
| bd1e0681d3 | |||
| 28a5ad5bf6 |
10 changed files with 369 additions and 95 deletions
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
public/
|
||||
*~
|
||||
2
site-config
Normal file
2
site-config
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
#!/bin/bash
|
||||
TITLE="yukjoou's internet homepage!"
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 837 B |
184
src/index.html
184
src/index.html
|
|
@ -1,101 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<h1>about me</h1>
|
||||
<p>
|
||||
i'm an autistic gay trans girl who likes computers. i like old technologies
|
||||
and other stuff that doesn't work properly.
|
||||
<br />
|
||||
i'm the webmistress that runs
|
||||
<a href="https://kemonomimi.gay">kemonomimi.gay</a>, with the help of my
|
||||
amazing friends :3
|
||||
</p>
|
||||
<p>
|
||||
i like spending time on the internet, and seeing what the cute people of the
|
||||
fediverse post. when i'm not doing that, i like to write code and do silly
|
||||
projects! <br />
|
||||
i also have a
|
||||
<a href="https://blog.kemonomimi.gay/yukijoou/">blog</a>, though it's quite
|
||||
empty for now...
|
||||
</p>
|
||||
|
||||
<meta content="yukijoou's web place" property="og:title" />
|
||||
<meta
|
||||
content="i'm yukijoou (ja: 雪女王), and i post things on the internet"
|
||||
property="og:description"
|
||||
/>
|
||||
<meta content="#ADD8E6" data-react-helmet="true" name="theme-color" />
|
||||
<h2>talk to me. i dare u.</h2>
|
||||
<p>
|
||||
i'm available on matrix: @yukijoou:catgirl.cloud
|
||||
<br />
|
||||
i have a fedi account:
|
||||
<a href="https://fedi.kemonomimi.gay/yukijoou"
|
||||
>@yukijoou@fedi.kemonomimi.gay</a
|
||||
>
|
||||
<br />
|
||||
i also have a selfhosted email:
|
||||
<a href="#" id="email">[SHOW EMAIL]</a>
|
||||
|
||||
<title>yukijoou's internet homepage :3</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>yukijoou's homepage</h1>
|
||||
<p class="subtitle">雪女王</p>
|
||||
<p>
|
||||
i like posting silly things on the web! you can find a bunch of
|
||||
it here!
|
||||
</p>
|
||||
</header>
|
||||
<noscript>
|
||||
<p>
|
||||
<b>Please enable javascript to see my email :3</b> (only using it as
|
||||
an anti-scraper thing). if you really don't want to, here is my
|
||||
base64-encoded email: eXVraWpvb3VAa2Vtb25vbWltaS5nYXk=
|
||||
</p>
|
||||
</noscript>
|
||||
<script>
|
||||
const email = atob("eXVraWpvb3VAa2Vtb25vbWltaS5nYXk=");
|
||||
const emailDisplay = document.getElementById("email");
|
||||
emailDisplay.addEventListener(
|
||||
"click",
|
||||
(event) => {
|
||||
emailDisplay.href = "mailto:" + email;
|
||||
emailDisplay.innerText = email;
|
||||
event.preventDefault();
|
||||
},
|
||||
{ once: true },
|
||||
);
|
||||
</script>
|
||||
</p>
|
||||
|
||||
<main>
|
||||
<h1>about me</h1>
|
||||
<p>
|
||||
i'm an autistic gay trans girl who likes computers. i like old
|
||||
technologies and other stuff that doesn't work properly.
|
||||
<br />
|
||||
i'm the webmistress that runs
|
||||
<a href="https://kemonomimi.gay">kemonomimi.gay</a>, with the
|
||||
help of my amazing friends :3
|
||||
</p>
|
||||
<p>
|
||||
btw, i use
|
||||
<a href="https://archlinux.org">
|
||||
<img src="badges/archlinux.png" alt="archlinux"
|
||||
/></a>
|
||||
on my computers. just thought you should know. (i am not
|
||||
flexing) (it's just for your information)
|
||||
</p>
|
||||
<h1>silly projects</h1>
|
||||
<p>the things i do at my computer :3</p>
|
||||
|
||||
<h2>talk to me. i dare u.</h2>
|
||||
<p>
|
||||
i'm available on matrix: @yukijoou:catgirl.cloud
|
||||
<br />
|
||||
i also have a temporary email, while i figure out how to host an
|
||||
email server:
|
||||
</p>
|
||||
<h2>site-inator</h2>
|
||||
<p>
|
||||
this is a dead simple HTML pages generator that makes making dead simple
|
||||
websites easy! it's written in bash, so really easy to run on all sorts of
|
||||
systems, and fairly simple to use. <br />learn more
|
||||
<a href="/site-inator.html">over here</a>
|
||||
</p>
|
||||
|
||||
<address><a href="#" id="email">[SHOW EMAIL]</a></address>
|
||||
<noscript>
|
||||
Please enable javascript :3 if you really don't want to, here is
|
||||
my base64-encoded email: eWlraWpvb3VAbGFwb3N0ZS5uZXQ=
|
||||
</noscript>
|
||||
<h2>convertablet</h2>
|
||||
<p>
|
||||
it's a dameon to get 2-in-1 laptop/tablet convertible devices to work well
|
||||
using wlroots-based compositors on linux. for now it's more or less
|
||||
specifically made for my own lenovo miix-320icr, but the goal is to make it
|
||||
so that all laptops that can act as tablets work smoothly on linux+wlroots.
|
||||
</p>
|
||||
<p>
|
||||
currently hosted at
|
||||
<a href="https://git.kemonomimi.gay/yukijoou/convvertablet"
|
||||
>yukijoou/convertablet</a
|
||||
>, no proper documentation yet, but if you want to get it working on your
|
||||
device, please get in touch! i'll be more than happy to make it work, and
|
||||
will include support for your device once i get it in a working state!
|
||||
</p>
|
||||
|
||||
<script>
|
||||
const email = atob("eWlraWpvb3VAbGFwb3N0ZS5uZXQ=");
|
||||
const emailDisplay = document.getElementById("email");
|
||||
emailDisplay.addEventListener(
|
||||
"click",
|
||||
(event) => {
|
||||
emailDisplay.href = "mailto:" + email;
|
||||
emailDisplay.innerText = email;
|
||||
event.preventDefault();
|
||||
},
|
||||
{ once: true }
|
||||
);
|
||||
</script>
|
||||
<h2>kemonomimi.gay</h2>
|
||||
<p>
|
||||
i do sysadmin work to keep the websites and services we host running! most
|
||||
of my work is behind the scene, and shoudln't be noticeable (i hope). at
|
||||
some point, i want to opensource most of the scripts i use to manage this
|
||||
infrastructure so that other people can see how it all works, and be
|
||||
inclined to selfhost their stuff ^_^
|
||||
</p>
|
||||
|
||||
<h1>silly projects</h1>
|
||||
<p>more coming soon here!</p>
|
||||
<p>
|
||||
i'm working on getting more services on
|
||||
<a href="https://kemonomimi.gay">kemonomimi.gay</a>, and
|
||||
bringing some web things i've already done to this website!
|
||||
</p>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>
|
||||
© 2023 - Yuki Joou.
|
||||
<br />
|
||||
This website is best viewed on the Firefox browser with the
|
||||
<a href="https://brailleinstitute.org/freefont">
|
||||
Atkinson Hyperlegible</a
|
||||
>
|
||||
font. I do not care about chromium-based browser compatibility.
|
||||
<br />
|
||||
<em>
|
||||
My content is available under the CC0 license, unless
|
||||
specified otherwise. Please consider crediting me if you use
|
||||
my work.
|
||||
</em>
|
||||
</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
<h2>reduced motion in opensource projects</h2>
|
||||
<p>
|
||||
i'm on a crusade to get as much of the software i'm using as possible to be
|
||||
reduced-motion friendly. as i'm quite motion-sensitive, i really don't like
|
||||
stuff that moves arounde everywhere, so i try to make websites and apps not
|
||||
have it when the "reduced motion" setting is enabled! <br />
|
||||
i don't have any page where i track this sort of thing, i just mostly do
|
||||
one-off contribution to projects and hope they accept it
|
||||
</p>
|
||||
|
|
|
|||
184
src/site-inator.html
Normal file
184
src/site-inator.html
Normal file
|
|
@ -0,0 +1,184 @@
|
|||
<h1>site-inator</h1>
|
||||
|
||||
<p>
|
||||
this is a silly webpage/websites generator i made mostly to help me make
|
||||
this website. its goals are:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<b>be as simple as possible</b>: very little code, very little
|
||||
functionality, no more, no less than what i need
|
||||
</li>
|
||||
<li>
|
||||
<b>no hidden secrets</b>: it's easy to see where the pieces of the
|
||||
generated code come from
|
||||
</li>
|
||||
<li>
|
||||
<b>generate html ahead-of-time</b>: no on-the-fly generation, cgi, or
|
||||
special server software, all the content is generated ahead of time, and
|
||||
can be served by any generic http server
|
||||
</li>
|
||||
<li>
|
||||
and most importantly, <b>have a good user experience for me</b>: i
|
||||
mostly made this tool to suite my purpose, while i'm happy if others
|
||||
want to use it or contribute code, i don't want for it to become harder
|
||||
to make my dead simple website with it!
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h1>making a website using it!</h1>
|
||||
|
||||
<p>
|
||||
if you want to make your own website using this tool, i recommend starting
|
||||
by learning how to write html pages. for this, you can check out one of the
|
||||
many tutorials about this online, like
|
||||
<a
|
||||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML"
|
||||
>the mdn html introduction</a
|
||||
>. once you're familiar with html, come back to this page!
|
||||
</p>
|
||||
|
||||
<h2>step zero: installing the tool</h2>
|
||||
<p>
|
||||
you can find the source code for it at
|
||||
<a href="https://git.kemonomimi.gay/yukijoou/site-inator"
|
||||
>yukijoou/site-inator</a
|
||||
>. i'll assume you know how to use git and can figure out how to download
|
||||
the file from there. if you don't, hit up your local ccomputer nerd on fedi,
|
||||
or me, and ask them, they'll know how to help you! <br />
|
||||
once you have the tool installed, run it in the <em>example/</em> folder to
|
||||
check everything works. this should make a <em>public/</em> folder with 2
|
||||
html files.
|
||||
</p>
|
||||
|
||||
<p class="tip">
|
||||
if you want to start experimenting with how the tool works, editing the
|
||||
example is a good place to start!
|
||||
</p>
|
||||
|
||||
<h2>step one: create the folder structure</h2>
|
||||
<p>
|
||||
you'll need to structure your site in a specific way for site-inator to know
|
||||
what to do with all your files.
|
||||
</p>
|
||||
|
||||
<p class="tip">
|
||||
check out the
|
||||
<a
|
||||
href="https://git.kemonomimi.gay/yukijoou/site-inator/src/branch/master/example"
|
||||
>example</a
|
||||
>
|
||||
if you're unsure of what goes in which folder/file!
|
||||
</p>
|
||||
|
||||
<h3>the <em>template/</em> folder</h3>
|
||||
<p>in this folder, you need to create two files:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<em>header.html</em><br />this will be your website's header. in this
|
||||
file, you should not only specify the <code><head></code> tag, but
|
||||
also part of the <code><body></code> that you want to keep
|
||||
consistant between pages (like, for example, your site's logo, or a bar
|
||||
with buttons to navigate around your website!)
|
||||
</li>
|
||||
<li>
|
||||
<em>footer.html</em><br />this works the same way the header file does,
|
||||
but for the bottom of your web page. you should add your copyright
|
||||
notice, or links to your social networks there! also, don't forget to
|
||||
close your <code><body></code> and <code><html></code> tags
|
||||
in there
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
those file will wrap around any other html file you use for your website!
|
||||
speaking of other html files...
|
||||
</p>
|
||||
|
||||
<h3>the <em>src/</em> folder</h3>
|
||||
<p>
|
||||
this folder will contain all the html source files for your website. any
|
||||
html file you put in here will be wrapped in the header and footer defined
|
||||
earlier. non-html files will (mostly, more on that later!) be ignored.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
the file structure inside this folder will be replicated in your final
|
||||
website, so if you create the file <em>foo/bar.html</em>, it'll correspond
|
||||
to the file <em>/foo/bar.html</em> on your final website, except it'll also
|
||||
have the header and footer surrounding it!
|
||||
</p>
|
||||
|
||||
<h3>the <em>static/</em> folder</h3>
|
||||
<p>
|
||||
this is the simplest one of the bunch: put file in, and they'll just be
|
||||
copied to your final website, exactly as you put them. no header/footer
|
||||
add-on, just the raw file.<br />
|
||||
this is where you put in your <em>style.css</em>, or your images and other
|
||||
assets!
|
||||
</p>
|
||||
|
||||
<p class="tip">
|
||||
you don't have to create a <em>static/</em> folder! if you don't,
|
||||
site-inator will just ignore it
|
||||
</p>
|
||||
|
||||
<h2>step two: configuration files</h2>
|
||||
<p>
|
||||
configuration files mostly allow you to configure a page's title for now,
|
||||
but will be able to do more in the future!<br />
|
||||
there is a global configuration file you're required to create, and you can
|
||||
optionally create one for each of your html file in <em>src/</em> if you
|
||||
want to!
|
||||
</p>
|
||||
|
||||
<p>
|
||||
the main config file is located at the root, so next to the
|
||||
<em>src/</em> and <em>template/</em> folders. it should be named
|
||||
<em>site-config</em>, and contain the following:
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
#!/bin/bash
|
||||
TITLE="<your title goes here!>"
|
||||
</pre>
|
||||
|
||||
<p>
|
||||
this 'title' isn't used by default, but whatever you set the title to will
|
||||
replace any occurence of <code>[ title ]</code> in the source or
|
||||
template html files!<br />
|
||||
on this website, i use it in the header to set the value of the
|
||||
<code><head></code> tag in the header, but you can use it in any place
|
||||
you want, or multiple times!
|
||||
</p>
|
||||
|
||||
<p>
|
||||
this title can then be overriden on a page-by-page basis by creating a
|
||||
page-specific config file. you can do so by making a file with the same name
|
||||
as your page, but with <em>.config</em> appended to the end.<br />
|
||||
so, for example, if i want to change the title of the page
|
||||
<em>src/foo/bar.html</em>, i would create a file named
|
||||
<em>src/foo/bar.html.config</em>. this file should contain the exact same
|
||||
thing as the global config file, except it will only be used for that one
|
||||
page!
|
||||
</p>
|
||||
|
||||
<h3>step three: generating and publishing your site!</h3>
|
||||
<p>
|
||||
you can now just run <code>site-inator</code> at the root of your website
|
||||
(in the folder where you have your <em>template/</em> and
|
||||
<em>src/</em> folders), and it will generate a <em>public/</em> folder with
|
||||
all your generated website code!<br />
|
||||
you can now test your website with something like
|
||||
<code>python -m http.server</code>, and copy it to wherever you need to have
|
||||
it shown to the internet!
|
||||
</p>
|
||||
|
||||
<hr />
|
||||
|
||||
<p>
|
||||
i hope this tool will be useful to some people! if you have any question or
|
||||
concern, feel free to reach out to me, my contact info is on the main page
|
||||
of this website!
|
||||
</p>
|
||||
2
src/site-inator.html.config
Normal file
2
src/site-inator.html.config
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
#!/bin/bash
|
||||
TITLE="site-inator: silly site generator - yukijoou"
|
||||
|
|
@ -73,3 +73,29 @@ footer {
|
|||
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
#site-navigation {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#site-navigation ul {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style-type: none;
|
||||
justify-content: space-evenly;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#site-navigation li {
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
.tip {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.tip::before {
|
||||
content: "TIP: ";
|
||||
font-style: normal;
|
||||
}
|
||||
21
template/footer.html
Normal file
21
template/footer.html
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
</main>
|
||||
|
||||
<footer>
|
||||
<p>
|
||||
© 2023 - Yuki Joou.
|
||||
<br />
|
||||
This website is best viewed on the Firefox browser with the
|
||||
<a href="https://brailleinstitute.org/freefont">
|
||||
Atkinson Hyperlegible</a
|
||||
>
|
||||
font. I do not care about chromium-based browser compatibility.
|
||||
<br />
|
||||
<em>
|
||||
My content is available under the CC0 license, unless
|
||||
specified otherwise. Please consider crediting me if you use
|
||||
my work.
|
||||
</em>
|
||||
</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
33
template/header.html
Normal file
33
template/header.html
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<meta content="yukijoou's web place" property="og:title" />
|
||||
<meta
|
||||
content="i'm yukijoou (ja: 雪女王), and i post things on the internet"
|
||||
property="og:description"
|
||||
/>
|
||||
<meta content="#bad2e0" data-react-helmet="true" name="theme-color" />
|
||||
|
||||
<title>[ title ]</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>yukijoou's webplace</h1>
|
||||
<p class="subtitle">雪女王</p>
|
||||
<p>
|
||||
i like posting silly things on the web! you can find a bunch of
|
||||
it here!
|
||||
</p>
|
||||
|
||||
<nav id="site-navigation">
|
||||
<ul>
|
||||
<li><a href="/index.html">Home</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
10
update.sh
10
update.sh
|
|
@ -11,11 +11,19 @@ WEBSITES_PATH="$HOME/www"
|
|||
|
||||
BACKUP_DIR=$(mktemp -d)
|
||||
|
||||
SITE_INATOR=${SITE_INATOR:-site-inator}
|
||||
|
||||
echo "Generating pages..."
|
||||
$SITE_INATOR;
|
||||
|
||||
exit;
|
||||
|
||||
|
||||
cp -rf "$WEBSITES_PATH" $BACKUP_DIR/$WEBSITE_NAME.bak
|
||||
echo "Made backup at $BACKUP_DIR"
|
||||
|
||||
rm -rf "$WEBSITES_PATH"
|
||||
mkdir -p "$WEBSITES_PATH"
|
||||
cp -rf src/* "$WEBSITES_PATH"
|
||||
cp -rf public/* "$WEBSITES_PATH"
|
||||
|
||||
echo "Installed $WEBSITE_NAME at $WEBSITES_PATH"
|
||||
|
|
|
|||
Loading…
Reference in a new issue