Rewrite cosmetics and theme preferences (#1292)

- Cosmetics and theme preferences are now only stored in cookies instead
  of a combination of both cookies and state.

- The theme plugin now supports client hints. This allows the server
  to render a page using the client-preferred theme provided it supplies
  this information (any browser other than Firefox), helping to avoid an
  annoying flash while the page is hydrating.

- The previous workaround using the Nitro plugin has been removed. Its
  functionality is now handled by the Nuxt theme plugin with cleaner
  code.

- All pages and components now use the new plugins.
This commit is contained in:
Sasha Sorokin
2024-07-13 21:20:43 +02:00
committed by GitHub
parent ce4250281f
commit 8704d3acb3
21 changed files with 268 additions and 248 deletions

View File

@@ -152,7 +152,7 @@ export const analyticsSetToCSVString = (analytics) => {
return [header, ...data].join(newline);
};
export const processAnalytics = (category, projects, labelFn, sortFn, mapFn, chartName) => {
export const processAnalytics = (category, projects, labelFn, sortFn, mapFn, chartName, theme) => {
if (!category || !projects) {
return emptyAnalytics;
}
@@ -219,10 +219,9 @@ export const processAnalytics = (category, projects, labelFn, sortFn, mapFn, cha
},
],
colors: projectData.map((_, i) => {
const theme = useTheme();
const project = chartData[i];
return intToRgba(project.color, project.id, theme.value);
return intToRgba(project.color, project.id, theme);
}),
defaultColors: projectData.map((_, i) => {
const project = chartData[i];
@@ -282,10 +281,10 @@ const sortTimestamp = ([a], [b]) => a - b;
const roundValue = ([ts, value]) => [ts, Math.round(parseFloat(value) * 100) / 100];
const processCountryAnalytics = (c, projects) => processAnalyticsByCountry(c, projects, sortCount);
const processNumberAnalytics = (c, projects) =>
processAnalytics(c, projects, formatTimestamp, sortTimestamp, null, "Downloads");
const processRevAnalytics = (c, projects) =>
processAnalytics(c, projects, formatTimestamp, sortTimestamp, roundValue, "Revenue");
const processNumberAnalytics = (c, projects, theme) =>
processAnalytics(c, projects, formatTimestamp, sortTimestamp, null, "Downloads", theme);
const processRevAnalytics = (c, projects, theme) =>
processAnalytics(c, projects, formatTimestamp, sortTimestamp, roundValue, "Revenue", theme);
const useFetchAnalytics = (
url,
@@ -328,10 +327,12 @@ export const useFetchAllAnalytics = (
viewsByCountry: processCountryAnalytics(viewsByCountry.value, selectedProjects.value),
}));
const theme = useTheme();
const totalData = computed(() => ({
downloads: processNumberAnalytics(downloadData.value, projects.value),
views: processNumberAnalytics(viewData.value, projects.value),
revenue: processRevAnalytics(revenueData.value, projects.value),
downloads: processNumberAnalytics(downloadData.value, projects.value, theme.active),
views: processNumberAnalytics(viewData.value, projects.value, theme.active),
revenue: processRevAnalytics(revenueData.value, projects.value, theme.active),
}));
const fetchData = async (query) => {