{"slug":"parallel","title":"Parallel","date":"2022-02-25T00:00:00.000Z","excerpt":"I canceled the renewal of my WordPress.com subscription.","tags":["website","design"],"html":"

I canceled the renewal of my WordPress.com subscription, so that will end June 12th. I’ve been keeping my replacement site up to date with new posts. I will probably replace this site before the 13th though. Maybe 1 more week of fixes.

","css":{"code":"","map":null},"head":"","readingTime":"1 min read","relatedPosts":[{"slug":"another","title":"Another","date":"2022-02-23T00:00:00.000Z","excerpt":"Redesigning my website","tags":["code","website","design"],"html":"

I’m still stuck on the MDSveX/prismjs error. I found another site that uses sveltekit. It’s hosted on vercel, but I wonder if it will work if I just change the adapter to static in svelte.convig.js.

That worked. I think I’ll use this as a starting point for now.

Just kidding. Same kind of problem, but showing different errors. When I open a blog it gives an error. But if I refresh, I can navigate back and forth and see all posts without problem.

So, if I refresh I can’t go to a post the first time. Actually, now it’s not working at all. And now it’s working completely. I don’t know what’s happening - maybe browser caching something? Seems to work now, so I’ll move forward.

I’m going to see if I can host this page on GitHub with a custom url. I’ve had problems with routing before, so I think it’s worth testing early. I’ll install gh-pages to my developer dependencies using:

npm install gh-pages --save-dev

And I’ll add a script to package.json called deploy that runs:

gh-pages -d build

Now, let’s see if it will host on the default GitHub url. I think I need to check in the whole repository first, because I don’t think gh-pages will create a new one.

It’s mostly working now, but it’s looking for assets in BASEURL/… vs BASEURL/REPONAME?…, but I think that means it will work if I just use ihtfy.com or even a subdomain like blog.ihtfy.com.

It’s not working, but I forgot to add a .nojekyll file to the root. I’ll add it in the /static directory and rebuild. Apparently, Jekyll doesn’t post files or directories that start with an underscore.

GitHub or gh-pages keeps deleting my .nojekyll file. I tried adding some test inside, but that didn’t help. I have to manually add the file back in through GitHub.

If I open the site in a private window, it doesn’t load the css. If I then hard refresh, it works. But if I do a normal refresh it doesn’t. Ah, just saw that I had another browser window open so the private session never ended. The refresh stuff is gone now.

I just tried the old starter project again and noticed the build preview is working, but not the dev. Who knows…

Comparison#

There are some things I like from the different sites.

From Matt’s:

SVG animations - Background and logo
Hover animation on posts (but they’re not on the other cards)
Smooth scrolling
Code can show filename and language
Custom highlighting (sparkle wrapper and brush stroke)
Featured image for posts
Different shaped tiling
Image optimization

From Elianiva’s:

Link/page hover animation
Dark mode switch (Matt’s is automatic, but I like the option)
Fading transition between pages (doesn’t work as well on mobile - flashes)
Scrollbar styling
Scroll to top button
Color scheme, but needs more contrast on homepage post elements
Search in posts with live updating
Semi-sticky header with animations and mobile reactivity (Matt’s mobile nav loses the links)
Info bubbles can have header info: date and title

Matt’s site gives errors on dev, but build works. I’m not sure if I can work with that though. I think I may start with the Elianiva site and add component styling ideas from Matt.

SVG animations I’ll make on my own
Hover animations on posts shouldn’t be too hard
Smooth scrolling I think is just a CSS attribute on html, then maybe some logic to setting scroll points when navigating to different pages, i.e. backwards
I think I can add filename and language info pretty easily, but maybe it depends on the highlighter or markdown preprocessor, but both use MDSveX.
I’ll make my own highlighting classes
I don’t think adding images to posts will be difficult, but making them look nice might be
I’ll have to see if the tile shapes are automatic and if they depend on the post contents

The search on Elianiva’s I would guess is just a library but seems a bit daunting. The sticky header might be a little tricky but not sure. Scroll to top isn’t bad, and I think the fading is an option provided by Svelte, but not sure. Huh, they both have smooth-scrolling; maybe I just noticed it on Matt’s because it scrolls to points on the page.

If GitHub stops auto deleting my .nojekyll that would be nice. I just deployed again, and it seems to be sticking now.

","css":{"code":"","map":null},"head":"","readingTime":"4 min read"},{"slug":"migrating","title":"Migrating","date":"2022-02-19T00:00:00.000Z","excerpt":"Moving my site to GitHub","tags":["code","design","website"],"html":"

I’m going to try migrating this site from WordPress to a SvelteKit site hosted on GitHub. I’m paying $99 per year to host on wordpress.com; there’s a cheaper plan now, but I don’t see any way to downgrade - only upgrade. It’s also very limiting: I can’t add an SVG image, custom JS (expected), but even the additional CSS rules are very limited because the theme overrides them.

My hope is to export this site data. Find a way to “load” it into a SvelteKit site, then I’ll go through all the posts by hand and make sure everything is working correctly. I used to host a Jekyll blog site on gh pages, but it kept breaking because GitHub would update dependencies automatically.

One nice thing about WordPress is I can easily write from my phone and schedule posts. I’m actually starting this post on February 17th, but I’ll post it on the 19th.

There are some limitations on GitHub pages. They need to be static which is fine with me, but I’ll likely need to do some tweaking and use a different theme. The storage and bandwidth limitations on GitHub aren’t a concern to me since I don’t get much traffic to my site, and I plan on hosting most videos on YouTube.

Exporting#

I went to https://wordpress.com/export/frankiemercado.com to export all my website content. This gave me a big XML file with all my posts. The images are nested inside of month and year folders, so one file may be at ./2022/01/image.jpg.

The formatting of the XML is pretty cluttered; lots of “wp” comments and “wp:…” tags which is to be expected. I think I’d like my site to have each post structured as markdown. When I searched for “wordpress to markdown” I find this script.

From Windows PowerShell, I go to the folder containing all my data.

cd .\\\\Downloads\\\\wp20220218

Then I run the command:

\n\t

shell

\n\t

npx wordpress-export-to-markdown

I renamed the XML file to export.xml, and kept the default output folder name. These are the settings I used:

config

\n\t

shell

\n\t

Starting wizard…\n? Path to WordPress export file? export.xml\n? Path to output folder? output\n? Create year folders? No\n? Create month folders? No\n? Create a folder for each post? Yes\n? Prefix post folders/files with date? Yes\n? Save images attached to posts? Yes\n? Save images scraped from post body content? Yes\n? Include custom post types and pages? No

Now I have a folder called output filled with folders for each post named like: YYYY-MM-DD-PostTitle. Inside one of these folders is an index.md file which contains the text and formatting of the post. There is also a folder called images which contains any images from that post.

New Theme#

Next, I need to find a new theme to use.

This one looks nice, but has some server side code I’d need to work around if I host for free on GitHub
This one is simple and static.

After looking at the first one again, it looks like he’s hosted on github-pages too, so I think I’ll start there.

Setup#

I downloaded the .zip file from his GitHub, extract it, and open in VS Code. Looking at package.json I see the usual SvelteKit scripts: dev, build, preview. He also has a deploy script for gh-pages to publish the build folder, and some prettier stuff for linting and formatting.

I’ll run npm install and see what happens. No errors.

I think I’ll need to change the build script though, since I’m on Windows, and I don’t think it will recognize the rm -rf ... command, though PowerShell does use some Unix commands, so who knows.

Let’s try npm run dev. Errors: config.kit.target is no longer required, and should be removed.

In svelte.config.js I’ll remove the target from kit: {....

Now when I run, there are no errors in the console, but the page (localhost:3000) has an error: Unrecognized option 'enableSourcemap'.

After searching a bit, I may need to update svelte or some other decency. I’ll run npm update. That seemed to fix it.

I see the site, but when I scroll down and up, it crashes and gives another error: [plugin:vite-plugin-svelte] Error while preprocessing C:/Users/Frankie/Documents/Code/blog/src/lib/posts/web-workers.md - Cannot read property 'buildPlaceholders' of undefined.

I run npm install again to see if that fixes anything. Nope.

I’m able to open the resume page fine, but all of the blog posts are broken because of the issue.

I wonder if I need to run the postbuild script to run svelte-sitemap, just guessing. I’ll need to make the build script Windows PowerShell friendly first.

I added a file called .nojekyll to the /static directory. Then the build script just becomes svelte-kit build.

I’m also going to remove the Plausible analytics. I’ll just comment out the scripts in the head of app.html.

Still not working. I see someone posted the same issue. I was able to fix the latter issue that’s linked, but I haven’t been able to fix the mdsvex/prismjs problem.

","css":{"code":".code-block.svelte-y16rmy.svelte-y16rmy{display:block;position:relative;background-color:var(--code-background-color);color:var(--code-text-color);font-family:var(--mono-font);font-size:1rem;line-height:1.33em;border-radius:8px;box-shadow:var(--neumorphic-shading-concave), var(--neumorphic-shadow);padding:30px 15px;margin:30px 0}.code-block.svelte-y16rmy pre{overflow-x:auto;scrollbar-color:var(--primary-color) var(--scrollbar-track-color);scrollbar-width:thin;padding-bottom:5px}.code-block.svelte-y16rmy pre::-webkit-scrollbar{height:8px}.code-block.svelte-y16rmy pre::-webkit-scrollbar-thumb{background:var(--primary-color)}.code-block.svelte-y16rmy pre::-webkit-scrollbar-thumb:hover{background:var(--primary-light-color)}.code-block.svelte-y16rmy .filename.svelte-y16rmy{background:inherit;border-radius:8px;margin-bottom:-2px;padding:5px 10px;position:absolute;left:0px;top:-16px;z-index:1;box-shadow:var(--neumorphic-shading-convex), var(--neumorphic-shadow)}.code-block.svelte-y16rmy .lang.svelte-y16rmy{position:absolute;right:0;top:-16px;background:inherit;border-radius:8px;padding:5px 10px;z-index:2;font-size:0.85em;box-shadow:var(--neumorphic-shading-convex), var(--neumorphic-shadow)}","map":null},"head":"","readingTime":"5 min read"},{"slug":"scss","title":"SCSS","date":"2022-04-04T00:00:00.000Z","excerpt":"I've been changing the color palette for the new site.","tags":["website"],"html":"

I’ve been changing the color palette of the themes. Kind of made a mess, but got it sorted out. I wasn’t very familiar with how sass uses rgb variables and the rgb() and rgba() functions. There doesn’t seem to be a clean way to modify the alpha of a variable color.

Some docs said you can just use the rgb color as the 1st argument and the alpha as the second in a rgba() but that doesn’t work, unless you simply have the 3 values as the variable, not the actual color. But then you need to convert those numbers anywhere else you need to use the color. So you either need multiple variables, or you’re using rgb() and rgba() at every instance.

","css":{"code":"","map":null},"head":"","readingTime":"1 min read"}]}

Parallel

Related posts