Add static mode

src/modules/clock.ts

@@ -20,9 +20,9 @@ function updateProgressBar() {
 }
 
 async function updateTime() {
-  const time = store.getState('time') || getTime();
+  const time = store.get('time') || getTime();
 
-  if (store.getState('fade')) {
+  if (store.get('fade')) {
     fadeOutQuote();
   }
 
@@ -31,11 +31,11 @@ async function updateTime() {
       updateFavicon(time);
     }
 
-    if (store.getState('theme')?.startsWith('dynamic')) {
+    if (store.get('theme')?.startsWith('dynamic')) {
       setDayParameters();
     }
 
-    if (store.getState('theme')?.startsWith('photo')) {
+    if (store.get('theme')?.startsWith('photo')) {
       setDynamicBackgroundPicture();
     } else {
       removeBackgroundImage();
@@ -54,8 +54,8 @@ async function updateTime() {
 }
 
 export function initClock() {
-  const testTime = store.getState('time');
-  const testQuote = store.getState('quote');
+  const testTime = store.get('time');
+  const testQuote = store.get('quote');
   const isTest = !!(testTime || testQuote);
 
   updateTime();

src/modules/dynamic.test.ts

@@ -4,7 +4,7 @@ import { getDayParameters, getDayProgress } from './dynamic';
 vi.mock('../store', () => {
   return {
     store: {
-      getState: () => '',
+      get: () => '',
     },
   };
 });

src/modules/dynamic.ts

@@ -8,7 +8,7 @@ export function getDayProgress() {
   const seconds = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds();
   const progress = (seconds * 100) / 86400;
 
-  return parseFloat(store.getState('progress') || progress.toFixed(2));
+  return parseFloat(store.get('progress') || progress.toFixed(2));
 }
 
 export function getDayParameters() {
@@ -47,7 +47,7 @@ export function getDayParameters() {
   const period = progress < 50 ? 'am' : 'pm';
 
   return {
-    scene: store.getState('scene') || scene,
+    scene: store.get('scene') || scene,
     progress,
     period,
     segment,

src/modules/fade.ts

@@ -5,7 +5,7 @@ export function initFadeMode() {
 }
 
 function toggleFadeMode() {
-  const isFadeMode = store.toggleState('fade');
+  const isFadeMode = store.toggle('fade');
 
   if (!isFadeMode) {
     document.getElementById('quote')?.classList.remove('fade-in', 'fade-out');

src/modules/font.ts

@@ -38,23 +38,23 @@ function createOption(value: string) {
 }
 
 export function initFont() {
-  const font = store.getState('font');
+  const font = store.get('font');
   const fontSelect = document.querySelector<HTMLSelectElement>('#font-select');
 
   FONTS.forEach((fontName) => {
     fontSelect?.appendChild(createOption(fontName));
   });
 
   if (font !== 'default' && !FONTS.includes(font)) {
-    store.setState('custom-font', font);
+    store.set('custom-font', font);
   }
 
-  const customFont = store.getState('custom-font');
+  const customFont = store.get('custom-font');
   if (customFont && !FONTS.includes(customFont)) {
     fontSelect?.appendChild(createOption(customFont));
   }
 
-  store.setState('font', font, false);
+  store.set('font', font, false);
   if (fontSelect) {
     fontSelect.value = font;
   }
@@ -74,7 +74,7 @@ function setFont() {
   const root = document.querySelector<HTMLElement>(':root');
 
   if (font) {
-    store.setState('font', font);
+    store.set('font', font);
 
     if (font === 'default') {
       root?.style.removeProperty(CSS_FONT_VARIABLE);
@@ -95,5 +95,5 @@ export function resetFont() {
   if (fontSelect) {
     fontSelect.value = 'default';
   }
-  store.setState('font', 'default');
+  store.set('font', 'default');
 }

src/modules/index.ts

@@ -1,3 +1,4 @@
+import { initStatic } from './static';
 import { initClock } from './clock';
 import { initCopy } from './copy';
 import { initFadeMode } from './fade';
@@ -12,6 +13,7 @@ import { initWorkMode } from './work';
 import { initZenMode } from './zen';
 
 const MODULES = [
+  initStatic,
   initClock,
   initCopy,
   initFadeMode,

src/modules/locales.ts

@@ -46,11 +46,11 @@ export function resolveLocale(locale = navigator.language): Locale | 'random' {
 }
 
 export function initLocale() {
-  const locale = store.getState('locale');
+  const locale = store.get('locale');
   const localeSelect = document.querySelector<HTMLSelectElement>('#locale-select');
 
   if (locale !== 'random') {
-    store.setState('last-locale', locale);
+    store.set('last-locale', locale);
   }
 
   translateStrings(locale);
@@ -61,12 +61,12 @@ export function initLocale() {
   localeSelect?.addEventListener('change', (e) => {
     const languageSelectValue = (e.target as HTMLInputElement).value;
     const isRandomLocale = languageSelectValue === 'random';
-    const locale = isRandomLocale ? store.getState('last-locale') || 'en-US' : (languageSelectValue as Locale);
+    const locale = isRandomLocale ? store.get('last-locale') || 'en-US' : (languageSelectValue as Locale);
     translateStrings(locale);
-    store.setState('locale', languageSelectValue);
+    store.set('locale', languageSelectValue);
 
     if (!isRandomLocale) {
-      store.setState('last-locale', languageSelectValue);
+      store.set('last-locale', languageSelectValue);
       updateQuote({ useIndex: true });
     }
   });
@@ -75,14 +75,14 @@ export function initLocale() {
 export function getStrings(): Translations {
   const localeSelect = document.querySelector<HTMLSelectElement>('#locale-select');
   const resolvedLocale = resolveLocale(localeSelect?.value);
-  const lastLocale = store.getState('last-locale') as keyof typeof TRANSLATIONS;
+  const lastLocale = store.get('last-locale') as keyof typeof TRANSLATIONS;
 
   return TRANSLATIONS[resolvedLocale === 'random' ? lastLocale || 'en-US' : resolvedLocale];
 }
 
 function translateStrings(locale = navigator.language) {
   const time = getTime();
-  const lastLocale = store.getState('last-locale') as keyof typeof TRANSLATIONS;
+  const lastLocale = store.get('last-locale') as keyof typeof TRANSLATIONS;
   const strings = getStrings();
 
   document.documentElement.lang = locale === 'random' ? lastLocale?.substring(0, 2) || 'en' : locale.substring(0, 2);

src/modules/quotes.ts

@@ -31,7 +31,7 @@ async function getQuotes(time: string, locale: Locale): Promise<Quote[]> {
 
     let quotes = (await response.json()) as Quote[];
 
-    if (store.getState('work') && !store.getState('index')) {
+    if (store.get('work') && !store.get('index')) {
       quotes = quotes.filter((q) => q.sfw !== 'nsfw');
     }
 
@@ -63,8 +63,8 @@ async function getQuote(time: string, locale: Locale, useIndex: boolean = false)
     }
   }
 
-  if (store.getState('index')) {
-    const urlParamsIndex = parseInt(store.getState('index')!);
+  if (store.get('index')) {
+    const urlParamsIndex = parseInt(store.get('index')!);
     if (!isNaN(urlParamsIndex) && quotes[urlParamsIndex]) {
       quoteIndex = urlParamsIndex;
     }
@@ -79,7 +79,7 @@ async function getQuote(time: string, locale: Locale, useIndex: boolean = false)
     quote.fallback = true;
   }
 
-  if (store.getState('quote')) {
+  if (store.get('quote')) {
     quote.title = strings.title;
     quote.author = strings.author;
   }
@@ -88,14 +88,14 @@ async function getQuote(time: string, locale: Locale, useIndex: boolean = false)
 }
 
 export async function updateQuote({ time = getTime(), useIndex = false } = {}) {
-  const testQuote = store.getState('quote');
-  let locale = store.getState('locale') as Locale;
+  const testQuote = store.get('quote');
+  let locale = store.get('locale') as Locale;
 
   if (!locale) {
     return;
   }
 
-  if (store.getState('locale') === 'random') {
+  if (store.get('locale') === 'random') {
     locale = getRandomLocale();
   }
 
@@ -130,13 +130,13 @@ export async function updateQuote({ time = getTime(), useIndex = false } = {}) {
       blockquote.removeAttribute('data-fallback');
     }
 
-    if (store.getState('fade')) {
+    if (store.get('fade')) {
       fadeInQuote();
     }
 
     fitQuote();
 
-    if (store.getState('theme')?.includes('color')) {
+    if (store.get('theme')?.includes('color')) {
       setTheme();
     }
   }

src/modules/screensaver.ts

@@ -27,7 +27,7 @@ function screensaver() {
 }
 
 export function initScreensaver() {
-  if (store.getState('screensaver')) {
+  if (store.get('screensaver')) {
     startScreensaver();
   }
 
@@ -44,7 +44,7 @@ export function startScreensaver() {
 }
 
 function toggleScreensaverMode() {
-  if (store.toggleState('screensaver')) {
+  if (store.toggle('screensaver')) {
     startScreensaver();
     return;
   }
@@ -54,5 +54,5 @@ function toggleScreensaverMode() {
 
 export function exitScreensaverMode() {
   clearInterval(screensaverInterval);
-  store.setState('screensaver', false);
+  store.set('screensaver', false);
 }

src/modules/share.ts

@@ -56,8 +56,8 @@ async function shareQuote() {
       ];
 
       const url = new URL('https://literatureclock.netlify.app/');
-      const locale = store.getState('locale');
-      const theme = store.getState('theme');
+      const locale = store.get('locale');
+      const theme = store.get('theme');
 
       if (locale) {
         url.searchParams.append('locale', locale);

src/modules/static.ts

@@ -0,0 +1,7 @@
+import { store } from '../store';
+
+export function initStatic() {
+  if (store.get('static')) {
+    document.querySelector('footer')?.remove();
+  }
+}

src/modules/themes.ts

@@ -14,7 +14,7 @@ function getRandomThemeColor() {
 }
 
 export function initTheme() {
-  let [theme, variant = 'system'] = store.getState('theme').split('-');
+  let [theme, variant = 'system'] = store.get('theme').split('-');
   const themeSelect = document.querySelector<HTMLSelectElement>('#theme-select');
   const variantSelect = document.querySelector<HTMLSelectElement>('#variant-select');
   const preferDarkThemes = window.matchMedia('(prefers-color-scheme: dark)');
@@ -41,12 +41,12 @@ export function initTheme() {
   themeSelect?.addEventListener('change', () => setTheme());
   variantSelect?.addEventListener('change', () => setTheme({ isVariantChange: true }));
   preferDarkThemes.addEventListener('change', (e) => {
-    const [_, variant] = store.getState('theme').split('-');
+    const [_, variant] = store.get('theme').split('-');
 
     if (variant === 'system') {
-      const [theme] = store.getState('theme').split('-');
+      const [theme] = store.get('theme').split('-');
 
-      store.setState('theme', `${theme}-system`);
+      store.set('theme', `${theme}-system`);
       document.documentElement.dataset.theme = `${theme}-${e.matches ? 'dark' : 'light'}`;
     }
   });
@@ -68,7 +68,7 @@ export function setTheme({ isVariantChange = false } = {}) {
     });
     resetFont();
   }
-  store.setState('theme', `${theme}-${variant}`);
+  store.set('theme', `${theme}-${variant}`);
 
   if (theme === 'color') {
     theme = getRandomThemeColor();

src/modules/time.ts

@@ -1,5 +1,5 @@
 import { store } from '../store';
 
 export function initTimeMode() {
-  document.getElementById('showtime')?.addEventListener('click', () => store.toggleState('showtime'));
+  document.getElementById('showtime')?.addEventListener('click', () => store.toggle('showtime'));
 }

src/modules/work.ts

@@ -7,7 +7,7 @@ export function initWorkMode() {
 
 function toggleWorkMode() {
   const quote = document.getElementById('quote');
-  const isWorkMode = store.toggleState('work');
+  const isWorkMode = store.toggle('work');
 
   if ((isWorkMode && quote?.dataset.sfw === 'nsfw') || (!isWorkMode && quote?.dataset.fallback === 'true')) {
     updateQuote();

src/modules/zen.ts

@@ -2,14 +2,14 @@ import { exitScreensaverMode } from './screensaver';
 import { store } from '../store';
 
 export function initZenMode() {
-  if (store.getState('zen')) {
+  if (store.get('zen')) {
     exitScreensaverMode();
   }
 
   document.getElementById('zen')?.addEventListener('click', () => {
-    if (store.toggleState('zen')) {
+    if (store.toggle('zen')) {
       exitScreensaverMode();
     }
   });
-  document.getElementById('exit-zen')?.addEventListener('click', () => store.setState('zen', false));
+  document.getElementById('exit-zen')?.addEventListener('click', () => store.set('zen', false));
 }

src/store/index.ts

@@ -19,6 +19,7 @@ export interface Stateless {
   scene?: string;
   progress?: string;
   index?: string;
+  static?: boolean;
 }
 
 type State = Stateful & Stateless;
@@ -84,12 +85,12 @@ export class Store {
   }
 
   // Get current state
-  getState<K extends keyof State>(key: K) {
+  get<K extends keyof State>(key: K) {
     return this.state[key];
   }
 
   // Update a state property and synchronize to localStorage and URL (for this key)
-  setState<K extends keyof State>(key: K, value: State[K], syncToUrl: boolean = true) {
+  set<K extends keyof State>(key: K, value: State[K], syncToUrl: boolean = true) {
     const oldState = { ...this.state };
     this.state[key] = value;
 
@@ -107,10 +108,10 @@ export class Store {
     return value;
   }
 
-  toggleState(key: keyof State) {
+  toggle(key: keyof State) {
     if (typeof this.state[key] === 'boolean') {
-      const newValue = !this.getState(key);
-      this.setState(key, newValue);
+      const newValue = !this.get(key);
+      this.set(key, newValue);
 
       return newValue;
     } else {