%svelte.body%
+
+
diff --git a/src/core/graphql.ts b/src/core/graphql.ts
new file mode 100644
index 000000000..a04b6c69d
--- /dev/null
+++ b/src/core/graphql.ts
@@ -0,0 +1,23 @@
+import schema from '../generated/graphql.schema.urql.json';
+import {initClient} from '@urql/svelte';
+import {cacheExchange} from '@urql/exchange-graphcache';
+import {persistedFetchExchange} from './persisted-query/persistedFetchExchange';
+import {multipartFetchExchange} from '@urql/exchange-multipart-fetch';
+
+export const initializeGraphQLClient = (): void => {
+ initClient({
+ url: 'https://api.ficsit.app/v2/query',
+ exchanges: [
+ cacheExchange({
+ schema,
+ keys: {
+ GetMods: () => null
+ }
+ }),
+ persistedFetchExchange({
+ preferGetForPersistedQueries: true,
+ }),
+ multipartFetchExchange,
+ ]
+ });
+}
diff --git a/src/core/index.ts b/src/core/index.ts
new file mode 100644
index 000000000..acae838cc
--- /dev/null
+++ b/src/core/index.ts
@@ -0,0 +1 @@
+export * from './graphql';
diff --git a/src/core/persisted-query/persistedFetchExchange.ts b/src/core/persisted-query/persistedFetchExchange.ts
new file mode 100644
index 000000000..4efa63584
--- /dev/null
+++ b/src/core/persisted-query/persistedFetchExchange.ts
@@ -0,0 +1,208 @@
+// TAKEN FROM https://github.com/FormidableLabs/urql/blob/main/exchanges/persisted-fetch/src/persistedFetchExchange.ts
+
+/* eslint-disable */
+import {
+ fromValue,
+ fromPromise,
+ filter,
+ merge,
+ mergeMap,
+ pipe,
+ share,
+ onPush,
+ takeUntil,
+} from 'wonka';
+
+import type {Source} from 'wonka';
+
+import {
+ makeOperation,
+} from '@urql/core';
+
+import type {
+ CombinedError,
+ ExchangeInput,
+ Exchange,
+ Operation,
+ OperationResult,
+} from '@urql/core';
+
+import {
+ makeFetchBody,
+ makeFetchURL,
+ makeFetchOptions,
+ makeFetchSource,
+} from '@urql/core/internal';
+
+import type {FetchBody} from '@urql/core/internal';
+
+import type { DocumentNode } from 'graphql';
+
+import { hash } from './sha256';
+
+interface PersistedFetchExchangeOptions {
+ preferGetForPersistedQueries?: boolean;
+ enforcePersistedQueries?: boolean;
+ generateHash?: (query: string, document: DocumentNode) => Promise
+
+
+
+
+
diff --git a/src/lib/mods/ModCard.svelte b/src/lib/mods/ModCard.svelte
new file mode 100644
index 000000000..6c176f3e7
--- /dev/null
+++ b/src/lib/mods/ModCard.svelte
@@ -0,0 +1,43 @@
+
+
+
+ { title }
+
+
+
+
+
diff --git a/src/lib/mods/ModGrid.svelte b/src/lib/mods/ModGrid.svelte
new file mode 100644
index 000000000..27dc83dc5
--- /dev/null
+++ b/src/lib/mods/ModGrid.svelte
@@ -0,0 +1,48 @@
+
+
+{#if totalMods}
+
+ 
+
+
+
+
+
+ {mod.name}
+
+
+
+
+ {mod.short_description}
+
+
+
+
+
+
+
+
+
+{/if}
+
+{#if $mods.fetching}
+ Loading...
+{:else if $mods.error} +Oh no... {$mods.error.message}
+{:else} +
+ {#each $mods.data.getMods.mods as mod}
+
+{/if}
+
+{#if totalMods}
+
+
+
+{/if}
diff --git a/src/lib/utils/PageControls.svelte b/src/lib/utils/PageControls.svelte
new file mode 100644
index 000000000..91f23ab23
--- /dev/null
+++ b/src/lib/utils/PageControls.svelte
@@ -0,0 +1,55 @@
+
+
+{#if $currentPage > startPage}
+
+
+{/if}
+
+{#if $currentPage > startPage + 1}
+ ...
+{/if}
+
+{#if $currentPage > startPage}
+
+{/if}
+
+
+
+{#if $currentPage < totalPages}
+
+{/if}
+
+{#if $currentPage < totalPages - 1}
+ ...
+{/if}
+
+{#if $currentPage < totalPages}
+
+
+{/if}
+
+
diff --git a/src/routes/$layout.svelte b/src/routes/$layout.svelte
new file mode 100644
index 000000000..34f9cc2d5
--- /dev/null
+++ b/src/routes/$layout.svelte
@@ -0,0 +1,14 @@
+
+
+
+ element in src/app.html
+ target: '#svelte',
+
+ vite: {
+ ssr: {
+ noExternal: ['node-fetch']
+ },
+ optimizeDeps: {
+ exclude: ["@urql/svelte"]
+ }
+ }
+ }
+};
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
new file mode 100644
index 000000000..15a12c710
--- /dev/null
+++ b/tailwind.config.cjs
@@ -0,0 +1,29 @@
+const { tailwindExtractor } = require('tailwindcss/lib/lib/purgeUnusedStyles');
+const colors = require('tailwindcss/colors');
+
+module.exports = {
+ purge: {
+ content: [
+ './src/**/*.html',
+ './src/**/*.svelte'
+ ],
+ options: {
+ defaultExtractor: (content) => [
+ ...tailwindExtractor(content),
+ // Match Svelte class: directives (https://github.com/tailwindlabs/tailwindcss/discussions/1731)
+ ...[...content.matchAll(/(?:class:)*([\w\d-/:%.]+)/gm)].map(([_match, group, ..._rest]) => group),
+ ],
+ keyframes: true,
+ },
+ },
+ darkMode: 'class',
+ theme: {
+ colors: {
+ gray: colors.trueGray,
+ }
+ },
+ variants: {
+ extend: {},
+ },
+ plugins: [],
+};
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 000000000..7d2e2894a
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,28 @@
+{
+ "compilerOptions": {
+ "moduleResolution": "node",
+ "target": "es2018",
+ /**
+ svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
+ to enforce using \`import type\` instead of \`import\` for Types.
+ */
+ "importsNotUsedAsValues": "error",
+ "isolatedModules": true,
+ /**
+ To have warnings/errors of the Svelte compiler at the correct position,
+ enable source maps by default.
+ */
+ "sourceMap": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "forceConsistentCasingInFileNames": true,
+ "baseUrl": ".",
+ "allowJs": true,
+ "checkJs": true,
+ "paths": {
+ "$app/*": [".svelte/dev/runtime/app/*", ".svelte/build/runtime/app/*"],
+ "$lib/*": ["src/lib/*"]
+ }
+ },
+ "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
+}