Fix layout for landing page. (#18)

.eslintrc.cjs

@@ -6,15 +6,15 @@ module.exports = {
 	ignorePatterns: ['*.cjs'],
 	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
 	settings: {
-		'svelte3/typescript': () => require('typescript')
+		'svelte3/typescript': () => require('typescript'),
 	},
 	parserOptions: {
 		sourceType: 'module',
-		ecmaVersion: 2020
+		ecmaVersion: 2020,
 	},
 	env: {
 		browser: true,
 		es2017: true,
-		node: true
-	}
-};
+		node: true,
+	},
+}

postcss.config.cjs

@@ -1,6 +1,6 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
 }

src/i18n/formatters.ts

@@ -4,7 +4,7 @@ import { date } from 'typesafe-i18n/formatters'
 
 export const initFormatters: FormattersInitializer<Locales, Formatters> = (locale: Locales) => {
 	const formatters: Formatters = {
-		simpleDate: date(locale, { day: '2-digit', month: 'short', year: 'numeric' })
+		simpleDate: date(locale, { day: '2-digit', month: 'short', year: 'numeric' }),
 	}
 
 	return formatters

src/i18n/i18n-svelte.ts

@@ -5,7 +5,12 @@ import { initI18nSvelte } from 'typesafe-i18n/svelte'
 import type { Formatters, Locales, TranslationFunctions, Translations } from './i18n-types'
 import { loadedFormatters, loadedLocales } from './i18n-util'
 
-const { locale, LL, setLocale } = initI18nSvelte<Locales, Translations, TranslationFunctions, Formatters>(loadedLocales, loadedFormatters)
+const { locale, LL, setLocale } = initI18nSvelte<
+	Locales,
+	Translations,
+	TranslationFunctions,
+	Formatters
+>(loadedLocales, loadedFormatters)
 
 export { locale, LL, setLocale }
 

src/i18n/i18n-types.ts

@@ -5,9 +5,7 @@ import type { BaseTranslation as BaseTranslationType, LocalizedString } from 'ty
 export type BaseTranslation = BaseTranslationType
 export type BaseLocale = 'en'
 
-export type Locales =
-	| 'en'
-	| 'vi'
+export type Locales = 'en' | 'vi'
 
 export type Translation = RootTranslation
 

src/i18n/i18n-util.async.ts

@@ -11,7 +11,7 @@ const localeTranslationLoaders = {
 }
 
 const updateDictionary = (locale: Locales, dictionary: Partial<Translations>): Translations =>
-	loadedLocales[locale] = { ...loadedLocales[locale], ...dictionary }
+	(loadedLocales[locale] = { ...loadedLocales[locale], ...dictionary })
 
 export const importLocaleAsync = async (locale: Locales): Promise<Translations> =>
 	(await localeTranslationLoaders[locale]()).default as unknown as Translations

src/i18n/i18n-util.ts

@@ -1,35 +1,38 @@
 // This file was auto-generated by 'typesafe-i18n'. Any manual changes will be overwritten.
 /* eslint-disable */
 
-import { i18n as initI18n, i18nObject as initI18nObject, i18nString as initI18nString } from 'typesafe-i18n'
+import {
+	i18n as initI18n,
+	i18nObject as initI18nObject,
+	i18nString as initI18nString,
+} from 'typesafe-i18n'
 import type { LocaleDetector } from 'typesafe-i18n/detectors'
 import type { LocaleTranslationFunctions, TranslateByString } from 'typesafe-i18n'
 import { detectLocale as detectLocaleFn } from 'typesafe-i18n/detectors'
 import type { Formatters, Locales, Translations, TranslationFunctions } from './i18n-types'
 
 export const baseLocale: Locales = 'en'
 
-export const locales: Locales[] = [
-	'en',
-	'vi'
-]
+export const locales: Locales[] = ['en', 'vi']
 
 export const isLocale = (locale: string): locale is Locales => locales.includes(locale as Locales)
 
 export const loadedLocales: Record<Locales, Translations> = {} as Record<Locales, Translations>
 
 export const loadedFormatters: Record<Locales, Formatters> = {} as Record<Locales, Formatters>
 
-export const i18nString = (locale: Locales): TranslateByString => initI18nString<Locales, Formatters>(locale, loadedFormatters[locale])
+export const i18nString = (locale: Locales): TranslateByString =>
+	initI18nString<Locales, Formatters>(locale, loadedFormatters[locale])
 
 export const i18nObject = (locale: Locales): TranslationFunctions =>
 	initI18nObject<Locales, Translations, TranslationFunctions, Formatters>(
 		locale,
 		loadedLocales[locale],
-		loadedFormatters[locale]
+		loadedFormatters[locale],
 	)
 
 export const i18n = (): LocaleTranslationFunctions<Locales, Translations, TranslationFunctions> =>
 	initI18n<Locales, Translations, TranslationFunctions, Formatters>(loadedLocales, loadedFormatters)
 
-export const detectLocale = (...detectors: LocaleDetector[]): Locales => detectLocaleFn<Locales>(baseLocale, locales, ...detectors)
+export const detectLocale = (...detectors: LocaleDetector[]): Locales =>
+	detectLocaleFn<Locales>(baseLocale, locales, ...detectors)

src/routes/+layout.server.ts

@@ -1,6 +1,5 @@
 import type { LayoutServerLoad } from './$types'
-import { getTopTags } from '$lib/db/tag'
 
 export const load: LayoutServerLoad = async ({ locals: { locale } }) => {
-	return { locale, tags: await getTopTags({ posts: false }) }
+	return { locale }
 }

src/routes/+layout.svelte

@@ -1,54 +1,5 @@
 <script lang="ts">
 	import '../app.css'
-	import { setLocale } from '$i18n/i18n-svelte'
-	import Firebase from '$lib/Firebase.svelte'
-	import Navbar from '$ui/Navbar.svelte'
-	import type { LayoutData } from './$types'
-	import Sidebar from '$components/Sidebar.svelte'
-	import Rightbar from '$ui/Rightbar.svelte'
-	import dayjs from 'dayjs'
-	import 'dayjs/locale/vi'
-	import { page } from '$app/stores'
-	import { SvelteToast } from '@zerodevx/svelte-toast'
-	import relativeTime from 'dayjs/plugin/relativeTime'
-	import utc from 'dayjs/plugin/utc'
-
-	export let data: LayoutData
-
-	dayjs.extend(relativeTime)
-	dayjs.extend(utc)
-	setLocale(data.locale)
-	switch ($page.params.lang) {
-		case 'vi':
-			dayjs.locale('vi')
-			break
-	}
 </script>
 
-<Firebase />
-<div class="drawer">
-	<input id="drawer-left" type="checkbox" class="drawer-toggle" />
-	<div class="drawer-content flex flex-col min-h-screen bg-base-200">
-		<Navbar />
-
-		<div class="flex w-full mx-auto pt-4 overflow-hidden min-h-[90%]">
-			<aside class="w-72 hidden lg:block rounded-box bg-base-100">
-				<Sidebar />
-			</aside>
-			<main class="flex flex-col w-full max-w-5xl ml-auto overflow-auto">
-				<slot />
-			</main>
-			<aside class="w-72 mx-auto hidden lg:block">
-				<Rightbar tags={data.tags} />
-			</aside>
-		</div>
-	</div>
-	<div class="drawer-side">
-		<label for="drawer-left" class="drawer-overlay" />
-		<ul class="menu p-4 overflow-y-auto w-80 bg-base-100">
-			<Sidebar />
-		</ul>
-	</div>
-</div>
-
-<SvelteToast />
+<slot />