tq-bit

## a_setup_nginx.sh
#!/bin/bash

# Add your server's username & domain here
USER_NAME=tqbit
SERVER_DOMAIN=test.q-bit.me

SERVER_FRONTEND_PATH=/var/www/html                    # static, don't change
SERVER_API_PATH=/api                                  # Adjust to your backend's API path
SERVER_API_CACHE_NAME=api_cache                       # Adjust to your cache key
SERVER_API_CACHE_PATH=/var/tmp/nginx                  # Change if you have a specific place for your cache

## docker-compose-calibre.yaml
version: "2.1"
services:
  calibre:
    image: lscr.io/linuxserver/calibre:latest
    container_name: calibre
    environment:
      - PUID=1000
      - PGID=1000
      - TZ=Europe/London
      - PASSWORD= #optional

## docker-compose.yml
version: "3.5"

services:
  reverse-proxy:
    # The official v2 Traefik docker image
    image: traefik:v2.9
    # Enables the web UI and tells Traefik to listen to docker
    command: --providers.docker
    ports:
      # The HTTP port

## vue3-ts-lint-setup.sh
npm create vite@latest .
npm install
npm i -D eslint prettier @vue/eslint-config-typescript @rushstack/eslint-patch eslint-config-prettier eslint-plugin-prettier

echo """{
	\"bracketSpacing\": true,
	\"semi\": true,
	\"singleQuote\": true,
	\"trailingComma\": \"all\",
	\"printWidth\": 80,

## AppAudioPlayer.vue
<script setup lang="ts">
import { onMounted, ref, computed } from 'vue';

import iPlay from './icons/iPlay.vue';
import iPause from './icons/iPause.vue';

const DEFAULT_AUDIO_ADDRESS = 'https://www.americanrhetoric.com/mp3clips/politicalspeeches/gettysburgaddressjohnnycash.mp3';

const currentAudioFileSource = null;
const previousAudioFileSource = null;

## AppContainer.vue
<script setup lang="ts">
import { h, defineProps, withDefaults, Component } from 'vue';

interface AppContainerProps {
  tag?: keyof HTMLElementTagNameMap;
  flex?: boolean;
  page?: boolean;
  center?: boolean;
  cols?: number;
}

## Component.vue
<script setup>
import { ref, onMounted } from 'vue';
import AppForm from './components/AppForm.vue';
import AppList from './components/AppList.vue';
import AppLoading from './components/AppLoading.vue';

import useFetch from './use/useFetch';

const rootUrl = 'https://my-json-server.typicode.com/tq-bit/use-fetch-json-mock';
const { loading, results, getJson } = useFetch(rootUrl);

## docker-compose.yaml
version: "3.8"

volumes:
  nc_data:
  nc_conf:

services:
  db:
    image: postgres
    restart: always

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Learn to make API calls - My Pokedex</title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
		<link rel="stylesheet" href="styles.css" />
	</head>
	<body>
	#!/bin/bash

	# Add your server's username & domain here
	USER_NAME=tqbit
	SERVER_DOMAIN=test.q-bit.me

	SERVER_FRONTEND_PATH=/var/www/html # static, don't change
	SERVER_API_PATH=/api # Adjust to your backend's API path
	SERVER_API_CACHE_NAME=api_cache # Adjust to your cache key
	SERVER_API_CACHE_PATH=/var/tmp/nginx # Change if you have a specific place for your cache
	version: "2.1"
	services:
	calibre:
	image: lscr.io/linuxserver/calibre:latest
	container_name: calibre
	environment:
	- PUID=1000
	- PGID=1000
	- TZ=Europe/London
	- PASSWORD= #optional
	version: "3.5"

	services:
	reverse-proxy:
	# The official v2 Traefik docker image
	image: traefik:v2.9
	# Enables the web UI and tells Traefik to listen to docker
	command: --providers.docker
	ports:
	# The HTTP port
	npm create vite@latest .
	npm install
	npm i -D eslint prettier @vue/eslint-config-typescript @rushstack/eslint-patch eslint-config-prettier eslint-plugin-prettier

	echo """{
	\"bracketSpacing\": true,
	\"semi\": true,
	\"singleQuote\": true,
	\"trailingComma\": \"all\",
	\"printWidth\": 80,
	<script setup lang="ts">
	import { onMounted, ref, computed } from 'vue';

	import iPlay from './icons/iPlay.vue';
	import iPause from './icons/iPause.vue';

	const DEFAULT_AUDIO_ADDRESS = 'https://www.americanrhetoric.com/mp3clips/politicalspeeches/gettysburgaddressjohnnycash.mp3';

	const currentAudioFileSource = null;
	const previousAudioFileSource = null;
	<script setup lang="ts">
	import { h, defineProps, withDefaults, Component } from 'vue';

	interface AppContainerProps {
	tag?: keyof HTMLElementTagNameMap;
	flex?: boolean;
	page?: boolean;
	center?: boolean;
	cols?: number;
	}
	<script setup>
	import { ref, onMounted } from 'vue';
	import AppForm from './components/AppForm.vue';
	import AppList from './components/AppList.vue';
	import AppLoading from './components/AppLoading.vue';

	import useFetch from './use/useFetch';

	const rootUrl = 'https://my-json-server.typicode.com/tq-bit/use-fetch-json-mock';
	const { loading, results, getJson } = useFetch(rootUrl);
	version: "3.8"

	volumes:
	nc_data:
	nc_conf:

	services:
	db:
	image: postgres
	restart: always
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Learn to make API calls - My Pokedex</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
	<link rel="stylesheet" href="styles.css" />
	</head>
	<body>