migrate to sveltekit and mdsvex
continuous-integration/drone the build failed Details

pull/1/head
AAGaming 1 year ago
parent a22f910bc1
commit c4e3a4a053

5
.gitignore vendored

@ -1,6 +1,5 @@
.DS_Store
/node_modules/
/src/node_modules/@sapper/
yarn-error.log
/__sapper__/
functions/render/build
.yarn
.svelte-kit

@ -0,0 +1 @@
engine-strict=true

@ -1,7 +0,0 @@
"use strict";
process.env.NODE_ENV = process.env.NODE_ENV || "production";
process.env.PORT = process.env.PORT || 3000;
const serverless = require("serverless-http");
const server = require("./build/server/server");
module.exports.handler = serverless(server);

@ -0,0 +1,12 @@
const config = {
"extensions": [".svelte.md", ".md", ".svx"],
"smartypants": {
"dashes": "oldschool"
},
"remarkPlugins": [],
"rehypePlugins": []
};
export default config;

@ -1,4 +1,4 @@
[build]
command = "yarn build-netlify"
publish = "__sapper__/build"
publish = "build"
functions = "functions"

@ -1,40 +1,23 @@
{
"name": "bigdumb-gq",
"description": "AAGaming's website",
"license": "MIT",
"version": "0.0.1",
"scripts": {
"dev": "sapper dev",
"build": "sapper build --legacy",
"build-netlify": "node scripts/buildNetlify",
"export": "sapper export --legacy",
"start": "node __sapper__/build"
},
"dependencies": {
"compression": "^1.7.1",
"encoding": "^0.1.13",
"polka": "next",
"serverless-http": "^2.7.0",
"sirv": "^1.0.0",
"svelte-media": "^0.0.3"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/runtime": "^7.0.0",
"@jackfranklin/rollup-plugin-markdown": "^0.3.0",
"@rollup/plugin-babel": "^5.0.0",
"@rollup/plugin-commonjs": "^14.0.0",
"@rollup/plugin-node-resolve": "^8.0.0",
"@rollup/plugin-replace": "^2.4.0",
"@rollup/plugin-url": "^5.0.0",
"rollup": "^2.3.4",
"rollup-plugin-glob": "^1.0.2",
"rollup-plugin-svelte": "^7.0.0",
"rollup-plugin-terser": "^7.0.0",
"sapper": "^0.28.0",
"svelte": "^3.17.3"
}
}
"name": "bigdumb-gq",
"description": "AAGaming's website",
"license": "MIT",
"type": "module",
"version": "0.0.1",
"scripts": {
"dev": "svelte-kit dev",
"build": "svelte-kit build",
"build-netlify": "svelte-kit build",
"start": "node build"
},
"dependencies": {
"svelte-media": "^0.1.4"
},
"devDependencies": {
"@sveltejs/adapter-netlify": "next",
"@sveltejs/kit": "next",
"svelte": "^3.38.3",
"svelte-preprocess": "^4.7.4",
"mdsvex": "^0.9.7"
}
}

@ -1,133 +0,0 @@
import path from 'path';
import resolve from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import commonjs from '@rollup/plugin-commonjs';
import url from '@rollup/plugin-url';
import svelte from 'rollup-plugin-svelte';
import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';
import markdown from '@jackfranklin/rollup-plugin-markdown';
import glob from 'rollup-plugin-glob';
import config from 'sapper/config/rollup.js';
import pkg from './package.json';
const mode = process.env.NODE_ENV;
const dev = mode === 'development';
const legacy = !!process.env.SAPPER_LEGACY_BUILD;
const onwarn = (warning, onwarn) =>
(warning.code === 'MISSING_EXPORT' && /'preload'/.test(warning.message)) ||
(warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) ||
onwarn(warning);
export default {
client: {
input: config.client.input(),
output: config.client.output(),
plugins: [
markdown(),
glob(),
replace({
preventAssignment: true,
values:{
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode)
},
}),
svelte({
compilerOptions: {
dev,
hydratable: true
}
}),
url({
sourceDir: path.resolve(__dirname, 'src/node_modules/images'),
publicPath: '/client/'
}),
resolve({
browser: true,
dedupe: ['svelte']
}),
commonjs(),
legacy && babel({
extensions: ['.js', '.mjs', '.html', '.svelte'],
babelHelpers: 'runtime',
exclude: ['node_modules/@babel/**'],
presets: [
['@babel/preset-env', {
targets: '> 0.25%, not dead'
}]
],
plugins: [
'@babel/plugin-syntax-dynamic-import',
['@babel/plugin-transform-runtime', {
useESModules: true
}]
]
}),
!dev && terser({
module: true
})
],
preserveEntrySignatures: false,
onwarn,
},
server: {
input: config.server.input(),
output: config.server.output(),
plugins: [
markdown(),
glob(),
replace({
preventAssignment: true,
values:{
'process.browser': false,
'process.env.NODE_ENV': JSON.stringify(mode)
},
}),
svelte({
compilerOptions: {
dev,
generate: 'ssr',
hydratable: true
},
emitCss: false
}),
url({
sourceDir: path.resolve(__dirname, 'src/node_modules/images'),
publicPath: '/client/',
emitFiles: false // already emitted by client build
}),
resolve({
dedupe: ['svelte']
}),
commonjs()
],
external: Object.keys(pkg.dependencies).concat(require('module').builtinModules),
preserveEntrySignatures: 'strict',
onwarn,
},
serviceworker: {
input: config.serviceworker.input(),
output: config.serviceworker.output(),
plugins: [
resolve(),
replace({
preventAssignment: true,
values:{
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode)
},
}),
commonjs(),
!dev && terser()
],
preserveEntrySignatures: false,
onwarn,
}
};

@ -1,66 +0,0 @@
const path = require("path");
const fs = require("fs");
const child_process = require("child_process");
const buildPath = path.join(__dirname, "/../__sapper__/build");
const functionsBuildPath = path.join(__dirname, "/../functions/render/build");
const staticPath = path.join(__dirname, "/../static/");
run();
async function run() {
// Delete previous function build
await exec(`rm -rf ${functionsBuildPath}`);
// Build the sapper project
await exec(`yarn build`);
// Copy build to function
await exec(`rsync -av ${buildPath}/ ${functionsBuildPath} --exclude client`);
// Copy static files to project build
await exec(`cp -a ${staticPath}/. ${buildPath}`);
// Add _redirects file to build folder (publish folder)
addRedirectsFile();
// Fix the path in the function server.js file to work with the project structure
fixBuildDirPathInServerFile();
}
function addRedirectsFile() {
const _redirectsPath = path.join(buildPath, "_redirects");
fs.writeFileSync(_redirectsPath, "/* /.netlify/functions/render 200", {
encoding: "utf-8",
});
}
function fixBuildDirPathInServerFile() {
const server = path.join(functionsBuildPath, "server/server.js");
fs.readFile(server, "utf8", function (err, data) {
if (err) return console.log(err);
const result = data.replace(
`"__sapper__/build"`,
`path.join(__dirname + "/..")`
).replace(/\${protocol}:\/\/127\.0\.0\.1:\${process\.env\.PORT}/g, `http://127.0.0.1:80`);
fs.writeFile(server, result, "utf8", function (err) {
if (err) return console.log(err);
});
});
}
function exec(command) {
return new Promise((fulfil, reject) => {
child_process.exec(command, (err, stdout, stderr) => {
if (err) {
reject(err);
return;
}
fulfil({ stdout, stderr });
});
});
}

@ -1,304 +0,0 @@
/**
* Run this script to convert the project to TypeScript. This is only guaranteed to work
* on the unmodified default template; if you have done code changes you are likely need
* to touch up the generated project manually.
*/
// @ts-check
const fs = require('fs');
const path = require('path');
const { argv } = require('process');
const projectRoot = argv[2] || path.join(__dirname, '..');
const isRollup = fs.existsSync(path.join(projectRoot, "rollup.config.js"));
function warn(message) {
console.warn('Warning: ' + message);
}
function replaceInFile(fileName, replacements) {
if (fs.existsSync(fileName)) {
let contents = fs.readFileSync(fileName, 'utf8');
let hadUpdates = false;
replacements.forEach(([from, to]) => {
const newContents = contents.replace(from, to);
const isAlreadyApplied = typeof to !== 'string' || contents.includes(to);
if (newContents !== contents) {
contents = newContents;
hadUpdates = true;
} else if (!isAlreadyApplied) {
warn(`Wanted to update "${from}" in ${fileName}, but did not find it.`);
}
});
if (hadUpdates) {
fs.writeFileSync(fileName, contents);
} else {
console.log(`${fileName} had already been updated.`);
}
} else {
warn(`Wanted to update ${fileName} but the file did not exist.`);
}
}
function createFile(fileName, contents) {
if (fs.existsSync(fileName)) {
warn(`Wanted to create ${fileName}, but it already existed. Leaving existing file.`);
} else {
fs.writeFileSync(fileName, contents);
}
}
function addDepsToPackageJson() {
const pkgJSONPath = path.join(projectRoot, 'package.json');
const packageJSON = JSON.parse(fs.readFileSync(pkgJSONPath, 'utf8'));
packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, {
...(isRollup ? { '@rollup/plugin-typescript': '^6.0.0' } : { 'ts-loader': '^8.0.4' }),
'@tsconfig/svelte': '^1.0.10',
'@types/compression': '^1.7.0',
'@types/node': '^14.11.1',
'@types/polka': '^0.5.1',
'svelte-check': '^1.0.46',
'svelte-preprocess': '^4.3.0',
tslib: '^2.0.1',
typescript: '^4.0.3'
});
// Add script for checking
packageJSON.scripts = Object.assign(packageJSON.scripts, {
validate: 'svelte-check --ignore src/node_modules/@sapper'
});
// Write the package JSON
fs.writeFileSync(pkgJSONPath, JSON.stringify(packageJSON, null, ' '));
}
function changeJsExtensionToTs(dir) {
const elements = fs.readdirSync(dir, { withFileTypes: true });
for (let i = 0; i < elements.length; i++) {
if (elements[i].isDirectory()) {
changeJsExtensionToTs(path.join(dir, elements[i].name));
} else if (elements[i].name.match(/^[^_]((?!json).)*js$/)) {
fs.renameSync(path.join(dir, elements[i].name), path.join(dir, elements[i].name).replace('.js', '.ts'));
}
}
}
function updateSingleSvelteFile({ view, vars, contextModule }) {
replaceInFile(path.join(projectRoot, 'src', `${view}.svelte`), [
[/(?:<script)(( .*?)*?)>/gm, (m, attrs) => `<script${attrs}${!attrs.includes('lang="ts"') ? ' lang="ts"' : ''}>`],
...(vars ? vars.map(({ name, type }) => [`export let ${name};`, `export let ${name}: ${type};`]) : []),
...(contextModule ? contextModule.map(({ js, ts }) => [js, ts]) : [])
]);
}
// Switch the *.svelte file to use TS
function updateSvelteFiles() {
[
{
view: 'components/Nav',
vars: [{ name: 'segment', type: 'string' }]
},
{
view: 'routes/_layout',
vars: [{ name: 'segment', type: 'string' }]
},
{
view: 'routes/_error',
vars: [
{ name: 'status', type: 'number' },
{ name: 'error', type: 'Error' }
]
},
{
view: 'routes/blog/index',
vars: [{ name: 'posts', type: '{ slug: string; title: string, html: any }[]' }],
contextModule: [
{
js: '.then(r => r.json())',
ts: '.then((r: { json: () => any; }) => r.json())'
},
{
js: '.then(posts => {',
ts: '.then((posts: { slug: string; title: string, html: any }[]) => {'
}
]
},
{
view: 'routes/blog/[slug]',
vars: [{ name: 'post', type: '{ slug: string; title: string, html: any }' }]
}
].forEach(updateSingleSvelteFile);
}
function updateRollupConfig() {
// Edit rollup config
replaceInFile(path.join(projectRoot, 'rollup.config.js'), [
// Edit imports
[
/'rollup-plugin-terser';\n(?!import sveltePreprocess)/,
`'rollup-plugin-terser';
import sveltePreprocess from 'svelte-preprocess';
import typescript from '@rollup/plugin-typescript';
`
],
// Edit inputs
[
/(?<!THIS_IS_UNDEFINED[^\n]*\n\s*)onwarn\(warning\);/,
`(warning.code === 'THIS_IS_UNDEFINED') ||\n\tonwarn(warning);`
],
[/input: config.client.input\(\)(?!\.replace)/, `input: config.client.input().replace(/\\.js$/, '.ts')`],
[
/input: config.server.input\(\)(?!\.replace)/,
`input: { server: config.server.input().server.replace(/\\.js$/, ".ts") }`
],
[
/input: config.serviceworker.input\(\)(?!\.replace)/,
`input: config.serviceworker.input().replace(/\\.js$/, '.ts')`
],
// Add preprocess
[/compilerOptions/g, 'preprocess: sveltePreprocess({ sourceMap: dev }),\n\t\t\t\tcompilerOptions'],
// Add TypeScript
[/commonjs\(\)(?!,\n\s*typescript)/g, 'commonjs(),\n\t\t\ttypescript({ sourceMap: dev })']
]);
}
function updateWebpackConfig() {
// Edit webpack config
replaceInFile(path.join(projectRoot, 'webpack.config.js'), [
// Edit imports
[
/require\('webpack-modules'\);\n(?!const sveltePreprocess)/,
`require('webpack-modules');\nconst sveltePreprocess = require('svelte-preprocess');\n`
],
// Edit extensions
[
/\['\.mjs', '\.js', '\.json', '\.svelte', '\.html'\]/,
`['.mjs', '.js', '.ts', '.json', '.svelte', '.html']`
],
// Edit entries
[
/entry: config\.client\.entry\(\)/,
`entry: { main: config.client.entry().main.replace(/\\.js$/, '.ts') }`
],
[
/entry: config\.server\.entry\(\)/,
`entry: { server: config.server.entry().server.replace(/\\.js$/, '.ts') }`
],
[
/entry: config\.serviceworker\.entry\(\)/,
`entry: { 'service-worker': config.serviceworker.entry()['service-worker'].replace(/\\.js$/, '.ts') }`
],
[
/loader: 'svelte-loader',\n\t\t\t\t\t\toptions: {/g,
'loader: \'svelte-loader\',\n\t\t\t\t\t\toptions: {\n\t\t\t\t\t\t\tpreprocess: sveltePreprocess({ sourceMap: dev }),'
],
// Add TypeScript rules for client and server
[
/module: {\n\s*rules: \[\n\s*(?!{\n\s*test: \/\\\.ts\$\/)/g,
`module: {\n\t\t\trules: [\n\t\t\t\t{\n\t\t\t\t\ttest: /\\.ts$/,\n\t\t\t\t\tloader: 'ts-loader'\n\t\t\t\t},\n\t\t\t\t`
],
// Add TypeScript rules for serviceworker
[
/output: config\.serviceworker\.output\(\),\n\s*(?!module)/,
`output: config.serviceworker.output(),\n\t\tmodule: {\n\t\t\trules: [\n\t\t\t\t{\n\t\t\t\t\ttest: /\\.ts$/,\n\t\t\t\t\tloader: 'ts-loader'\n\t\t\t\t}\n\t\t\t]\n\t\t},\n\t\t`
],
// Edit outputs
[
/output: config\.serviceworker\.output\(\),\n\s*(?!resolve)/,
`output: config.serviceworker.output(),\n\t\tresolve: { extensions: ['.mjs', '.js', '.ts', '.json'] },\n\t\t`
]
]);
}
function updateServiceWorker() {
replaceInFile(path.join(projectRoot, 'src', 'service-worker.ts'), [
[`shell.concat(files);`, `(shell as string[]).concat(files as string[]);`],
[`self.skipWaiting();`, `((self as any) as ServiceWorkerGlobalScope).skipWaiting();`],
[`self.clients.claim();`, `((self as any) as ServiceWorkerGlobalScope).clients.claim();`],
[`fetchAndCache(request)`, `fetchAndCache(request: Request)`],
[`self.addEventListener('activate', event =>`, `self.addEventListener('activate', (event: ExtendableEvent) =>`],
[`self.addEventListener('install', event =>`, `self.addEventListener('install', (event: ExtendableEvent) =>`],
[`addEventListener('fetch', event =>`, `addEventListener('fetch', (event: FetchEvent) =>`],
]);
}
function createTsConfig() {
const tsconfig = `{
"extends": "@tsconfig/svelte/tsconfig.json",
"compilerOptions": {
"lib": ["DOM", "ES2017", "WebWorker"]
},
"include": ["src/**/*", "src/node_modules/**/*"],
"exclude": ["node_modules/*", "__sapper__/*", "static/*"]
}`;
createFile(path.join(projectRoot, 'tsconfig.json'), tsconfig);
}
// Adds the extension recommendation
function configureVsCode() {
const dir = path.join(projectRoot, '.vscode');
if (!fs.existsSync(dir)) {
fs.mkdirSync(dir);
}
createFile(path.join(projectRoot, '.vscode', 'extensions.json'), `{"recommendations": ["svelte.svelte-vscode"]}`);
}
function deleteThisScript() {
fs.unlinkSync(path.join(__filename));
// Check for Mac's DS_store file, and if it's the only one left remove it
const remainingFiles = fs.readdirSync(path.join(__dirname));
if (remainingFiles.length === 1 && remainingFiles[0] === '.DS_store') {
fs.unlinkSync(path.join(__dirname, '.DS_store'));
}
// Check if the scripts folder is empty
if (fs.readdirSync(path.join(__dirname)).length === 0) {
// Remove the scripts folder
fs.rmdirSync(path.join(__dirname));
}
}
console.log(`Adding TypeScript with ${isRollup ? "Rollup" : "webpack" }...`);
addDepsToPackageJson();
changeJsExtensionToTs(path.join(projectRoot, 'src'));
updateSvelteFiles();
if (isRollup) {
updateRollupConfig();
} else {
updateWebpackConfig();
}
updateServiceWorker();
createTsConfig();
configureVsCode();
// Delete this script, but not during testing
if (!argv[2]) {
deleteThisScript();
}
console.log('Converted to TypeScript.');
if (fs.existsSync(path.join(projectRoot, 'node_modules'))) {
console.log(`
Next:
1. run 'npm install' again to install TypeScript dependencies
2. run 'npm run build' for the @sapper imports in your project to work
`);
}

@ -1,5 +0,0 @@
import {start} from '@sapper/app';
start({
target: document.querySelector('#sapper')
});

@ -27,11 +27,11 @@
</style>
<li>
<a rel=prefetch aria-current="{segment === (route === '.' ? undefined : route) ? 'page' : undefined}" href={route}>
<a rel=prefetch aria-current="{segment === (route === '.' ? "/" : "/" + route) ? 'page' : undefined}" href={"/" + route}>
<slot/>
</a>
{#if segment === (route === '.' ? undefined : route) ? 'page' : undefined}
{#if segment === (route === '.' ? "/" : "/" + route) ? 'page' : undefined}
<div
class=marker
in:receive="{{key: position}}"

@ -9,22 +9,22 @@
let matches = $media.noanimations;
function handleStart() {
document.getElementById('sapper').style.overflow = 'hidden';
document.getElementById('svelte').style.overflow = 'hidden';
}
function handleEnd() {
document.getElementById('sapper').style.overflow = '';
document.getElementById('svelte').style.overflow = '';
}
</script>
{#key segment}
<div
in:fly={(!matches) ? inOpts : {duration: 0, delay: 0}}
out:fly={(!matches) ? outOpts : {duration: 0, delay: 0}}
in:fly={(!matches && !segment.includes("blog/")) ? inOpts : {duration: 0, delay: 0}}
out:fly={(!matches && !segment.includes("blog/")) ? outOpts : {duration: 0, delay: 0}}
on:outrostart={!matches ? handleStart : () => {}}
on:introend={!matches ? handleEnd : () => {}}
on:outrostart={(!matches && !segment.includes("blog/")) ? handleStart : () => {}}
on:introend={(!matches && !segment.includes("blog/")) ? handleEnd : () => {}}
>
<slot/>
</div>

@ -1,8 +1,8 @@
<script>
import github from 'images/github.svg';
import gitlab from 'images/gitlab.svg';
import discord from 'images/discord.svg';
import matrix from 'images/matrix.svg';
import github from '$lib/images/github.svg';
import gitea from '$lib/images/gitea.svg';
import discord from '$lib/images/discord.svg';
import matrix from '$lib/images/matrix.svg';
</script>
<style>
@ -41,7 +41,7 @@
</a>
<a style="display: none;" href="https://git.catvibers.me/aa">
<img src={gitlab} alt="GitLab"/>
<img src={gitea} alt="Gitea"/>
</a>
<a style="display: none;" href="https://matrix.to/#/@aa:catvibers.me">

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

Before

Width:  |  Height:  |  Size: 378 KiB

After

Width:  |  Height:  |  Size: 378 KiB

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" style="enable-background:new 0 0 640 640" xml:space="preserve" width="32" height="32">
<path style="fill:#000" d="m395.9 484.2-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5 21.2-17.9 33.8-11.8 17.2 8.3 27.1 13 27.1 13l-.1-109.2 16.7-.1.1 117.1s57.4 24.2 83.1 40.1c3.7 2.3 10.2 6.8 12.9 14.4 2.1 6.1 2 13.1-1 19.3l-61 126.9c-6.2 12.7-21.4 18.1-33.9 12z"/>
<path style="fill:#fff" d="M622.7 149.8c-4.1-4.1-9.6-4-9.6-4s-117.2 6.6-177.9 8c-13.3.3-26.5.6-39.6.7v117.2c-5.5-2.6-11.1-5.3-16.6-7.9 0-36.4-.1-109.2-.1-109.2-29 .4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5c-9.8-.6-22.5-2.1-39 1.5-8.7 1.8-33.5 7.4-53.8 26.9C-4.9 212.4 6.6 276.2 8 285.8c1.7 11.7 6.9 44.2 31.7 72.5 45.8 56.1 144.4 54.8 144.4 54.8s12.1 28.9 30.6 55.5c25 33.1 50.7 58.9 75.7 62 63 0 188.9-.1 188.9-.1s12 .1 28.3-10.3c14-8.5 26.5-23.4 26.5-23.4S547 483 565 451.5c5.5-9.7 10.1-19.1 14.1-28 0 0 55.2-117.1 55.2-231.1-1.1-34.5-9.6-40.6-11.6-42.6zM125.6 353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6 321.8 60 295.4c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5 38.5-30c13.8-3.7 31-3.1 31-3.1s7.1 59.4 15.7 94.2c7.2 29.2 24.8 77.7 24.8 77.7s-26.1-3.1-43-9.1zm300.3 107.6s-6.1 14.5-19.6 15.4c-5.8.4-10.3-1.2-10.3-1.2s-.3-.1-5.3-2.1l-112.9-55s-10.9-5.7-12.8-15.6c-2.2-8.1 2.7-18.1 2.7-18.1L322 273s4.8-9.7 12.2-13c.6-.3 2.3-1 4.5-1.5 8.1-2.1 18 2.8 18 2.8L467.4 315s12.6 5.7 15.3 16.2c1.9 7.4-.5 14-1.8 17.2-6.3 15.4-55 113.1-55 113.1z"/>
<path style="fill:#fff" d="M326.8 380.1c-8.2.1-15.4 5.8-17.3 13.8-1.9 8 2 16.3 9.1 20 7.7 4 17.5 1.8 22.7-5.4 5.1-7.1 4.3-16.9-1.8-23.1l24-49.1c1.5.1 3.7.2 6.2-.5 4.1-.9 7.1-3.6 7.1-3.6 4.2 1.8 8.6 3.8 13.2 6.1 4.8 2.4 9.3 4.9 13.4 7.3.9.5 1.8 1.1 2.8 1.9 1.6 1.3 3.4 3.1 4.7 5.5 1.9 5.5-1.9 14.9-1.9 14.9-2.3 7.6-18.4 40.6-18.4 40.6-8.1-.2-15.3 5-17.7 12.5-2.6 8.1 1.1 17.3 8.9 21.3 7.8 4 17.4 1.7 22.5-5.3 5-6.8 4.6-16.3-1.1-22.6 1.9-3.7 3.7-7.4 5.6-11.3 5-10.4 13.5-30.4 13.5-30.4.9-1.7 5.7-10.3 2.7-21.3-2.5-11.4-12.6-16.7-12.6-16.7-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3 4.7-9.7 9.4-19.3 14.1-29-4.1-2-8.1-4-12.2-6.1-4.8 9.8-9.7 19.7-14.5 29.5-6.7-.1-12.9 3.5-16.1 9.4-3.4 6.3-2.7 14.1 1.9 19.8l-24.6 50.4z"/>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

Before

Width:  |  Height:  |  Size: 839 B

After

Width:  |  Height:  |  Size: 839 B

Before

Width:  |  Height:  |  Size: 956 B

After

Width:  |  Height:  |  Size: 956 B

@ -1 +0,0 @@
<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>GitLab icon</title><path fill="#fff" d="M4.845.904c-.435 0-.82.28-.955.692C2.639 5.449 1.246 9.728.07 13.335a1.437 1.437 0 00.522 1.607l11.071 8.045c.2.145.472.144.67-.004l11.073-8.04a1.436 1.436 0 00.522-1.61c-1.285-3.942-2.683-8.256-3.817-11.746a1.004 1.004 0 00-.957-.684.987.987 0 00-.949.69l-2.405 7.408H8.203l-2.41-7.408a.987.987 0 00-.942-.69h-.006zm-.006 1.42l2.173 6.678H2.675zm14.326 0l2.168 6.678h-4.341zm-10.593 7.81h6.862c-1.142 3.52-2.288 7.04-3.434 10.559L8.572 10.135zm-5.514.005h4.321l3.086 9.5zm13.567 0h4.325c-2.467 3.17-4.95 6.328-7.411 9.502 1.028-3.167 2.059-6.334 3.086-9.502zM2.1 10.762l6.977 8.947-7.817-5.682a.305.305 0 01-.112-.341zm19.798 0l.952 2.922a.305.305 0 01-.11.341v.002l-7.82 5.68.026-.035z"/></svg>

Before

Width:  |  Height:  |  Size: 814 B

@ -1,4 +1,5 @@
---
permalink: first-post
title: First post
summary: Hi!
date: 2021-4-12

@ -1,3 +1,15 @@
<script context="module">
/**
* @type {import('@sveltejs/kit').Load}
*/
export function load({ page: { path } }) {
return {
props: {
segment: path
}
}
}
</script>
<script>
import Nav from '../components/Nav.svelte';
import PageTransitions from '../components/PageTransitions.svelte';

@ -10,8 +10,8 @@
<h1>About</h1>
<h2>About me:</h2>
<p>I'm AAGaming, a self-taught web dev and tinkerer. I tend to start a lot of side-projects, most of which can be found on my <a href="https://github.com/AAGaming00">GitHub</a> and <a href="https://git.catvibers.me/aa">GitLab</a>.</p>
<p>I'm AAGaming, a self-taught web dev and tinkerer. I tend to start a lot of side-projects, most of which can be found on my <a href="https://github.com/AAGaming00">GitHub</a> and <a href="https://git.catvibers.me/aa">Gitea</a>.</p>
<h2>About this website:</h2>
<p>This website is made with Sapper and deployed to Netlify. It is based on the <a href="https://github.com/sveltejs/sapper-template/tree/rollup">Rollup Sapper Template</a>, with bits from <a href="https://github.com/noahsalvi/sapper-netlify"><code>sapper-netlify</code></a> and <a href="https://dev.to/joshnuss/create-a-blog-with-markdown-sapper-50ad">this wonderful DEV post</a>.
Its source can be found on <a href="https://git.catvibers.me/aa/website">GitLab</a></p>
<p>This website is made with SvelteKit and deployed to Netlify. It uses bits from <a href="https://dev.to/joshnuss/create-a-blog-with-markdown-sapper-50ad">this wonderful DEV post</a>.
Its source can be found on <a href="https://git.catvibers.me/aa/website">Catvibers Gitea</a></p>

@ -1,25 +1,29 @@
import {findPost} from './_posts.js';
export function get(req, res, next) {
export async function get({params}) {
// the `permalink` parameter is available because
// this file is called [permalink].json.js
const { permalink } = req.params;
const { permalink } = params;
const post = findPost(permalink);
const post = await findPost(permalink);
if (post) {
res.writeHead(200, {
'Content-Type': 'application/json'
});
res.end(JSON.stringify(post));
return {
headers: {
'Content-Type': 'application/json'
},
status: 200,
body: post
}
} else {
res.writeHead(404, {
'Content-Type': 'application/json'
});
res.end(JSON.stringify({
message: `Not found`
}));
return {
headers: {
'Content-Type': 'application/json'
},
status: 404,
body: {
message: "Not Found"
}
}
}
}

@ -1,23 +1,20 @@
<script context="module">
export async function preload({ params }) {
// the `permalink` parameter is available because
// this file is called [permalink].svelte
const res = await this.fetch(`blog/${params.permalink}.json`);
const data = await res.json();
if (res.status === 200) {
return { post: data };
} else {
this.error(res.status, data.message);
/**
* @type {import('@sveltejs/kit').Load}
*/
export async function load({ page }) {
return {
props: {
Post: await import(`../../posts/${page.params.permalink}.md`)
}
}
}
</script>
<script>
import Description from '../../components/Description.svelte';
import PageTransitions from '../../components/PageTransitions.svelte';
import Title from '../../components/Title.svelte';
export let post;
import Description from '../../components/Description.svelte';
export let Post;
</script>
<style>
@ -55,14 +52,22 @@
margin: 0 0 0.5em 0;
}
</style>
<Title content={Post.metadata.title}/>
<Description content={Post.metadata.summary}/>
<Title content={post.title}/>
<Description content={post.html.replace(/(<([^>]+)>)/gi, "").substring(0, 51) + '...'}/>
<PageTransitions inOpts={{ y: 50, duration: 250, delay: 250 }} outOpts={{ y: -50, duration: 250 }}>
<h1>{Post.metadata.title}</h1>
<PageTransitions inOpts={{ y: 50, duration: 250, delay: 250 }} outOpts={{ y: -50, duration: 250 }}>
<h1>{post.title}</h1>
<div class="content">
<svelte:component this={ Post.default } />
</div>
</PageTransitions>
<!-- <Title content="404"/>
<Description content="Post not found"/>
<PageTransitions inOpts={{ y: 50, duration: 250, delay: 250 }} outOpts={{ y: -50, duration: 250 }}>
<h1>404</h1>
<div class="content">
{@html post.html}
</div>
</PageTransitions>
<div class="content">
Post not found
</div>
</PageTransitions> -->

@ -5,23 +5,22 @@
// This file is called `_posts.js` rather than `posts.js`, because
// we don't want to create an `/blog/posts` route — the leading
// underscore tells Sapper not to do that.
import _posts from '../../posts/*.md';
const posts = _posts.map(transform);
function transform({filename, html, metadata}) {
// the permalink is the filename with the '.md' ending removed
const permalink = filename.replace(/\.md$/, '')
// underscore tells SvelteKit not to do that.
const actualPosts = import.meta.glob('../../posts/*');
const posts = Object.values(actualPosts).map(function (p) { return p().then(transform)});
function transform(p) {
// convert date string into a proper `Date`
const date = new Date(metadata.date)
const date = new Date(p.metadata.date)
// return the new shape
return {...metadata, filename, html, permalink, date}
return {...p.metadata, date, ...p}
}
export function findPost(link) {
return posts.find(({permalink}) => permalink === link)
export async function findPost(link) {
const p = await Promise.all(posts);
return p.find(({permalink}) => permalink === link);
}
export default posts;
export async function getPosts() {
const p = await Promise.all(posts);
return p;
}

@ -1,16 +1,17 @@
import posts from './_posts.js';
import {getPosts} from './_posts.js';
const contents = JSON.stringify(posts.map(post => {
export async function get() {
const posts = (await getPosts()).map(post => {
return {
title: post.title,
permalink: post.permalink
};
})
return {
title: post.title,
permalink: post.permalink
};
}));
export function get(req, res) {
res.writeHead(200, {
'Content-Type': 'application/json'
});
res.end(contents);
status: 200,
headers: {
'Content-Type': 'application/json'
},
body: posts
}
}

@ -1,7 +1,7 @@
<script context="module">
export function preload() {
return this.fetch(`blog.json`).then(r => r.json()).then(posts => {
return { posts };
export function load({ fetch }) {
return fetch(`/blog.json`).then(r => r.json()).then(posts => {
return { props: { posts } };
});
}
</script>

@ -1,6 +1,6 @@
<script>
import Description from "../components/Description.svelte";
import Title from "../components/Title.svelte";
import Title from "../components/Title.svelte";
</script>
<style>

@ -1,22 +0,0 @@
import sirv from "sirv";
import polka from "polka";
import compression from "compression";
import * as sapper from "@sapper/server";
const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === "development";
const server = polka(); // You can also use Express
server.use(compression({ threshold: 0 }));
if (dev) server.use(sirv("static", { dev }));
server.use(sapper.middleware());
if (dev)
server.listen(PORT, (err) => {
if (err) console.log("error", err);
});
module.exports = server;

@ -1,10 +1,10 @@
import { timestamp, files, shell } from '@sapper/service-worker';
import { timestamp, files, build } from '$service-worker';
const ASSETS = `cache${timestamp}`;
// `shell` is an array of all the files generated by the bundler,
// `build` is an array of all the files generated by the bundler,
// `files` is an array of everything in the `static` directory
const to_cache = shell.concat(files);
const to_cache = build.concat(files);
const staticAssets = new Set(to_cache);
self.addEventListener('install', event => {
@ -70,8 +70,8 @@ self.addEventListener('fetch', event => {
// set this variable to true for them and they will only be fetched once.
const cachedAsset = isStaticAsset && await caches.match(event.request);
// for pages, you might want to serve a shell `service-worker-index.html` file,
// which Sapper has generated for you. It's not right for every
// for pages, you might want to serve a build `service-worker-index.html` file,
// which SvelteKit has generated for you. It's not right for every
// app, but if it's right for yours then uncomment this section
/*
if (!cachedAsset && url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) {

@ -5,29 +5,17 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="theme-color" content="#eb5422">
%sapper.base%
<link rel="stylesheet" href="global.css">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="apple-touch-icon" href="favicon.png">
<!-- Sapper creates a <script> tag containing `src/client.js`
and anything else it needs to hydrate the app and
initialise the router -->
%sapper.scripts%
<!-- Sapper generates a <style> tag containing critical CSS
for the current page. CSS for the rest of the app is
lazily loaded when it precaches secondary pages -->
%sapper.styles%
<link rel="stylesheet" href="/global.css">
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="apple-touch-icon" href="/favicon.png">
<!-- This contains the contents of the <svelte:head> component, if
the current page has one -->
%sapper.head%
%svelte.head%
</head>
<body>
<!-- The application will be rendered inside this element,
because `src/client.js` references it -->
<div id="sapper">%sapper.html%</div>
<div id="svelte">%svelte.body%</div>
</body>
</html>

@ -4,11 +4,11 @@
--theme-text: #fff;
}
:root, body, #sapper {
:root, body, #svelte {
height: 100%;
}
#sapper {
#svelte {
display: flex;
flex-direction: column;
}

@ -0,0 +1,70 @@
import { mdsvex } from "mdsvex";
import mdsvexConfig from "./mdsvex.config.js";
// import preprocessor from 'svelte-preprocess';
import netlify from '@sveltejs/adapter-netlify';
/** @type {import('@sveltejs/kit').Config} */
const config = {
"extensions": [".svelte", ...mdsvexConfig.extensions],
// options passed to svelte.compile (https://svelte.dev/docs#svelte_compile)
compilerOptions: null,
// an array of file extensions that should be treated as Svelte components
extensions: ['.svelte', '.svx', '.md'],
kit: {
adapter: netlify(),
amp: false,
appDir: '_app',
files: {
assets: 'static',
hooks: 'src/hooks',
lib: 'src/lib',
routes: 'src/routes',
serviceWorker: 'src/service-worker.js',
template: 'src/template.html'
},
floc: false,
//host: null,
//hostHeader: null,
hydrate: true,
package: {
dir: 'package',
emitTypes: true,
exports: {
include: ['**'],
exclude: ['_*', '**/_*']
},
files: {
include: ['**'],
exclude: []
}
},
paths: {
assets: '',
base: ''
},
prerender: {
crawl: true,
enabled: true,
force: false,
pages: ['*']
},
router: true,
serviceWorker: {
exclude: []
},
ssr: true,
target: "#svelte",
trailingSlash: 'never',
vite: () => ({polyfillDynamicImport: false})
},
// options passed to svelte.preprocess (https://svelte.dev/docs#svelte_preprocess)
// preprocessConfig: () => preprocessor(),
preprocess: mdsvex(mdsvexConfig)
};
export default config;

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save