Compare commits

...

5 commits

Author SHA1 Message Date
yu-i-i
e747b28011 Fix missing Templates link on login page 2025-05-30 16:26:30 +02:00
yu-i-i
23a7f1707b Template Gallery: replace markdown-it with marked 2025-05-30 16:26:30 +02:00
yu-i-i
95894dacd8 Refactor Template Gallery; resolves #38 and #39
- Replace free-text license input with a select box
- Improve visual presentation of modals and enhance keyboard interaction
2025-05-30 16:26:30 +02:00
yu-i-i
7de7718eaf Make Template Gallery optional; rename environment variables 2025-05-30 16:26:29 +02:00
yu-i-i
c12b144cbb Add Template Gallery support 2025-05-30 16:26:29 +02:00
73 changed files with 3257 additions and 57 deletions

View file

@ -123,14 +123,14 @@ services:
dockerfile: services/real-time/Dockerfile
env_file:
- dev.env
redis:
image: redis:5
ports:
- "127.0.0.1:6379:6379" # for debugging
volumes:
- redis-data:/data
web:
build:
context: ..

View file

@ -111,6 +111,11 @@ if (settings.filestore.stores.template_files) {
keyBuilder.templateFileKeyMiddleware,
fileController.insertFile
)
app.delete(
'/template/:template_id/v/:version/:format',
keyBuilder.templateFileKeyMiddleware,
fileController.deleteFile
)
}
app.get(

View file

@ -5,7 +5,7 @@ const { callbackify } = require('node:util')
const safeExec = require('./SafeExec').promises
const { ConversionError } = require('./Errors')
const APPROVED_FORMATS = ['png']
const APPROVED_FORMATS = ['png', 'jpg']
const FOURTY_SECONDS = 40 * 1000
const KILL_SIGNAL = 'SIGTERM'
@ -34,16 +34,14 @@ async function convert(sourcePath, requestedFormat) {
}
async function thumbnail(sourcePath) {
const width = '260x'
return await convert(sourcePath, 'png', [
const width = '548x'
return await _convert(sourcePath, 'jpg', [
'convert',
'-flatten',
'-background',
'white',
'-density',
'300',
'-define',
`pdf:fit-page=${width}`,
`${sourcePath}[0]`,
'-resize',
width,
@ -51,16 +49,14 @@ async function thumbnail(sourcePath) {
}
async function preview(sourcePath) {
const width = '548x'
return await convert(sourcePath, 'png', [
const width = '794x'
return await _convert(sourcePath, 'jpg', [
'convert',
'-flatten',
'-background',
'white',
'-density',
'300',
'-define',
`pdf:fit-page=${width}`,
`${sourcePath}[0]`,
'-resize',
width,

View file

@ -150,7 +150,9 @@ async function _getConvertedFileAndCache(bucket, key, convertedKey, opts) {
let convertedFsPath
try {
convertedFsPath = await _convertFile(bucket, key, opts)
await ImageOptimiser.promises.compressPng(convertedFsPath)
if (convertedFsPath.toLowerCase().endsWith(".png")) {
await ImageOptimiser.promises.compressPng(convertedFsPath)
}
await PersistorManager.sendFile(bucket, convertedKey, convertedFsPath)
} catch (err) {
LocalFileWriter.deleteFile(convertedFsPath, () => {})

View file

@ -599,7 +599,7 @@ const _ProjectController = {
}
const isAdminOrTemplateOwner =
hasAdminAccess(user) || Settings.templates?.user_id === userId
hasAdminAccess(user) || Settings.templates?.nonAdminCanManage
const showTemplatesServerPro =
Features.hasFeature('templates-server-pro') && isAdminOrTemplateOwner

View file

@ -11,21 +11,22 @@ const TemplatesController = {
// Read split test assignment so that it's available for Pug to read
await SplitTestHandler.promises.getAssignment(req, res, 'core-pug-bs5')
const templateVersionId = req.params.Template_version_id
const templateId = req.query.id
if (!/^[0-9]+$/.test(templateVersionId) || !/^[0-9]+$/.test(templateId)) {
logger.err(
{ templateVersionId, templateId },
'invalid template id or version'
)
return res.sendStatus(400)
}
const templateId = req.params.Template_version_id
const templateVersionId = req.query.version
// if (!/^[0-9]+$/.test(templateVersionId) || !/^[0-9]+$/.test(templateId)) {
// logger.err(
// { templateVersionId, templateId },
// 'invalid template id or version'
// )
// return res.sendStatus(400)
// }
const data = {
templateVersionId,
templateId,
name: req.query.templateName,
compiler: ProjectHelper.compilerFromV1Engine(req.query.latexEngine),
imageName: req.query.texImage,
name: req.query.name,
compiler: req.query.compiler,
language: req.query.language,
imageName: req.query.imageName,
mainFile: req.query.mainFile,
brandVariationId: req.query.brandVariationId,
}
@ -40,6 +41,7 @@ const TemplatesController = {
async createProjectFromV1Template(req, res) {
const userId = SessionManager.getLoggedInUserId(req.session)
const project = await TemplatesManager.promises.createProjectFromV1Template(
req.body.brandVariationId,
req.body.compiler,
@ -48,7 +50,8 @@ const TemplatesController = {
req.body.templateName,
req.body.templateVersionId,
userId,
req.body.imageName
req.body.imageName,
req.body.language
)
delete req.session.templateData
if (!project) {

View file

@ -18,6 +18,7 @@ const crypto = require('crypto')
const Errors = require('../Errors/Errors')
const { pipeline } = require('stream/promises')
const ClsiCacheManager = require('../Compile/ClsiCacheManager')
const TIMEOUT = 30000 // 30 sec
const TemplatesManager = {
async createProjectFromV1Template(
@ -28,25 +29,19 @@ const TemplatesManager = {
templateName,
templateVersionId,
userId,
imageName
imageName,
language
) {
const zipUrl = `${settings.apis.v1.url}/api/v1/overleaf/templates/${templateVersionId}`
const zipUrl = `${settings.apis.filestore.url}/template/${templateId}/v/${templateVersionId}/zip`
const zipReq = await fetchStreamWithResponse(zipUrl, {
basicAuth: {
user: settings.apis.v1.user,
password: settings.apis.v1.pass,
},
signal: AbortSignal.timeout(settings.apis.v1.timeout),
signal: AbortSignal.timeout(TIMEOUT),
})
const projectName = ProjectDetailsHandler.fixProjectName(templateName)
const dumpPath = `${settings.path.dumpFolder}/${crypto.randomUUID()}`
const writeStream = fs.createWriteStream(dumpPath)
try {
const attributes = {
fromV1TemplateId: templateId,
fromV1TemplateVersionId: templateVersionId,
}
const attributes = {}
await pipeline(zipReq.stream, writeStream)
if (zipReq.response.status !== 200) {
@ -78,14 +73,9 @@ const TemplatesManager = {
await TemplatesManager._setCompiler(project._id, compiler)
await TemplatesManager._setImage(project._id, imageName)
await TemplatesManager._setMainFile(project._id, mainFile)
await TemplatesManager._setSpellCheckLanguage(project._id, language)
await TemplatesManager._setBrandVariationId(project._id, brandVariationId)
const update = {
fromV1TemplateId: templateId,
fromV1TemplateVersionId: templateVersionId,
}
await Project.updateOne({ _id: project._id }, update, {})
await prepareClsiCacheInBackground
return project
@ -102,11 +92,12 @@ const TemplatesManager = {
},
async _setImage(projectId, imageName) {
if (!imageName) {
imageName = 'wl_texlive:2018.1'
try {
await ProjectOptionsHandler.setImageName(projectId, imageName)
} catch {
logger.warn({ imageName: imageName }, 'not available')
await ProjectOptionsHandler.setImageName(projectId, settings.currentImageName)
}
await ProjectOptionsHandler.setImageName(projectId, imageName)
},
async _setMainFile(projectId, mainFile) {
@ -116,6 +107,13 @@ const TemplatesManager = {
await ProjectRootDocManager.setRootDocFromName(projectId, mainFile)
},
async _setSpellCheckLanguage(projectId, language) {
if (language == null) {
return
}
await ProjectOptionsHandler.setSpellCheckLanguage(projectId, language)
},
async _setBrandVariationId(projectId, brandVariationId) {
if (brandVariationId == null) {
return

View file

@ -428,7 +428,7 @@ module.exports = function (webRouter, privateApiRouter, publicApiRouter) {
labsEnabled: Settings.labs && Settings.labs.enable,
wikiEnabled: Settings.overleaf != null || Settings.proxyLearn,
templatesEnabled:
Settings.overleaf != null || Settings.templates?.user_id != null,
Settings.overleaf != null || Boolean(Settings.templates),
cioWriteKey: Settings.analytics?.cio?.writeKey,
cioSiteId: Settings.analytics?.cio?.siteId,
}

View file

@ -69,7 +69,7 @@ const Features = {
case 'oauth':
return Boolean(Settings.oauth)
case 'templates-server-pro':
return Boolean(Settings.templates?.user_id)
return Boolean(Settings.templates)
case 'affiliations':
case 'analytics':
return Boolean(_.get(Settings, ['apis', 'v1', 'url']))

View file

@ -262,6 +262,8 @@ async function initialize(webRouter, privateApiRouter, publicApiRouter) {
'/read-only/one-time-login'
)
await Modules.applyRouter(webRouter, privateApiRouter, publicApiRouter)
webRouter.post('/logout', UserController.logout)
webRouter.get('/restricted', AuthorizationMiddleware.restricted)
@ -285,8 +287,6 @@ async function initialize(webRouter, privateApiRouter, publicApiRouter) {
TokenAccessRouter.apply(webRouter)
HistoryRouter.apply(webRouter, privateApiRouter)
await Modules.applyRouter(webRouter, privateApiRouter, publicApiRouter)
if (Settings.enableSubscriptions) {
webRouter.get(
'/user/bonus',

View file

@ -146,6 +146,18 @@ nav.navbar.navbar-default.navbar-main.navbar-expand-lg(class={
event-segmentation={ page: currentUrl, item: 'register', location: 'top-menu' }
) #{translate('sign_up')}
// templates link
if settings.templates
+nav-item
+nav-link(
href="/templates"
event-tracking="menu-click"
event-tracking-action="clicked"
event-tracking-trigger="click"
event-tracking-mb="true"
event-segmentation={ page: currentUrl, item: 'templates', location: 'top-menu' }
) #{translate('templates')}
// login link
+nav-item
+nav-link(

View file

@ -140,6 +140,18 @@ nav.navbar.navbar-default.navbar-main(class={
// logged out
if !getSessionUser()
// templates link
if settings.templates
li
a(
href="/templates"
event-tracking="menu-click"
event-tracking-action="clicked"
event-tracking-trigger="click"
event-tracking-mb="true"
event-segmentation={ page: currentUrl, item: 'templates', location: 'top-menu' }
) #{translate('templates')}
// register link
if hasFeature('registration-page')
li.primary

View file

@ -31,8 +31,10 @@ block content
input(type="hidden" name="templateVersionId" value=templateVersionId)
input(type="hidden" name="templateName" value=name)
input(type="hidden" name="compiler" value=compiler)
input(type="hidden" name="imageName" value=imageName)
if imageName
input(type="hidden" name="imageName" value=imageName)
input(type="hidden" name="mainFile" value=mainFile)
input(type="hidden" name="language" value=language)
if brandVariationId
input(type="hidden" name="brandVariationId" value=brandVariationId)
input(hidden type="submit")

View file

@ -0,0 +1,18 @@
extends ../layout-react
block entrypointVar
- entrypoint = 'pages/template-gallery'
block vars
block vars
- const suppressNavContentLinks = true
- const suppressNavbar = true
- const suppressFooter = true
- bootstrap5PageStatus = 'enabled' // One of 'disabled', 'enabled', and 'queryStringOnly'
- isWebsiteRedesign = false
block append meta
meta(name="ol-templateCategory" data-type="string" content=category)
block content
#template-gallery-root

View file

@ -0,0 +1,20 @@
extends ../layout-react
block entrypointVar
- entrypoint = 'pages/template'
block vars
- const suppressNavContentLinks = true
- const suppressNavbar = true
- const suppressFooter = true
- bootstrap5PageStatus = 'enabled' // One of 'disabled', 'enabled', and 'queryStringOnly'
- isWebsiteRedesign = false
block append meta
meta(name="ol-template" data-type="json" content=template)
meta(name="ol-languages" data-type="json" content=languages)
meta(name="ol-userIsAdmin" data-type="boolean" content=hasAdminAccess())
block content
#template-root

View file

@ -981,7 +981,7 @@ module.exports = {
importProjectFromGithubModalWrapper: [],
importProjectFromGithubMenu: [],
editorLeftMenuSync: [],
editorLeftMenuManageTemplate: [],
editorLeftMenuManageTemplate: ['@/features/editor-left-menu/components/actions-manage-template'],
oauth2Server: [],
managedGroupSubscriptionEnrollmentNotification: [],
managedGroupEnrollmentInvite: [],
@ -1005,6 +1005,7 @@ module.exports = {
'launchpad',
'server-ce-scripts',
'user-activate',
'template-gallery',
],
viewIncludes: {},

View file

@ -23,6 +23,7 @@
"about_to_delete_cert": "",
"about_to_delete_projects": "",
"about_to_delete_tag": "",
"about_to_delete_template": "",
"about_to_delete_the_following_project": "",
"about_to_delete_the_following_projects": "",
"about_to_delete_user_preamble": "",
@ -124,6 +125,7 @@
"all_premium_features_including": "",
"all_projects": "",
"all_projects_will_be_transferred_immediately": "",
"all_templates": "",
"all_these_experiments_are_available_exclusively": "",
"allows_to_search_by_author_title_etc_possible_to_pull_results_directly_from_your_reference_manager_if_connected": "",
"already_have_a_papers_account": "",
@ -154,6 +156,7 @@
"ask_repo_owner_to_reconnect": "",
"ask_repo_owner_to_renew_overleaf_subscription": "",
"at_most_x_libraries_can_be_selected": "",
"author": "",
"auto_close_brackets": "",
"auto_compile": "",
"auto_complete": "",
@ -215,6 +218,8 @@
"card_must_be_authenticated_by_3dsecure": "",
"card_payment": "",
"careers": "",
"categories": "",
"category": "",
"category_arrows": "",
"category_greek": "",
"category_misc": "",
@ -352,6 +357,7 @@
"customize_your_group_subscription": "",
"customizing_figures": "",
"customizing_tables": "",
"date": "",
"date_and_owner": "",
"dealing_with_errors": "",
"decrease_indent": "",
@ -377,6 +383,7 @@
"delete_sso_config": "",
"delete_table": "",
"delete_tag": "",
"delete_template": "",
"delete_token": "",
"delete_user": "",
"delete_your_account": "",
@ -476,6 +483,7 @@
"edit_figure": "",
"edit_sso_configuration": "",
"edit_tag": "",
"edit_template": "",
"edit_your_custom_dictionary": "",
"editing": "",
"editing_captions": "",
@ -890,6 +898,7 @@
"last_name": "",
"last_resort_trouble_shooting_guide": "",
"last_suggested_fix": "",
"last_updated": "",
"last_updated_date_by_x": "",
"last_used": "",
"latam_discount_modal_info": "",
@ -898,6 +907,8 @@
"latex_in_thirty_minutes": "",
"latex_places_figures_according_to_a_special_algorithm": "",
"latex_places_tables_according_to_a_special_algorithm": "",
"latex_templates": "",
"latex_templates_for_journal_articles": "",
"layout": "",
"layout_options": "",
"layout_processing": "",
@ -921,7 +932,8 @@
"let_us_know_what_you_think": "",
"lets_get_those_premium_features": "",
"library": "",
"licenses": "",
"license": "",
"license_for_educational_purposes_confirmation": "",
"limited_document_history": "",
"limited_offer": "",
"limited_to_n_collaborators_per_project": "",
@ -1105,6 +1117,7 @@
"no_selection_select_file": "",
"no_symbols_found": "",
"no_thanks_cancel_now": "",
"no_templates_found": "",
"normal": "",
"normally_x_price_per_month": "",
"normally_x_price_per_year": "",
@ -1135,6 +1148,7 @@
"only_importer_can_refresh": "",
"open_action_menu": "",
"open_advanced_reference_search": "",
"open_as_template": "",
"open_file": "",
"open_link": "",
"open_path": "",
@ -1160,6 +1174,7 @@
"overleaf_is_easy_to_use": "",
"overleaf_labs": "",
"overleaf_logo": "",
"overleaf_template_gallery": "",
"overleafs_functionality_meets_my_needs": "",
"overview": "",
"overwrite": "",
@ -1222,6 +1237,7 @@
"please_change_primary_to_remove": "",
"please_check_your_inbox_to_confirm": "",
"please_compile_pdf_before_download": "",
"please_compile_pdf_before_publish_as_template": "",
"please_compile_pdf_before_word_count": "",
"please_confirm_primary_email_or_edit": "",
"please_confirm_secondary_email_or_edit": "",
@ -1256,6 +1272,7 @@
"premium_plan_label": "",
"presentation_mode": "",
"press_and_awards": "",
"prev": "",
"previous_page": "",
"price": "",
"primarily_work_study_question": "",
@ -1709,6 +1726,7 @@
"tell_the_project_owner_and_ask_them_to_upgrade": "",
"template": "",
"template_description": "",
"template_gallery": "",
"template_title_taken_from_project_title": "",
"templates": "",
"temporarily_hides_the_preview": "",

View file

@ -0,0 +1,72 @@
import { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import * as eventTracking from '../../../infrastructure/event-tracking'
import getMeta from '../../../utils/meta'
import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
import { useDetachCompileContext } from '../../../shared/context/detach-compile-context'
import EditorManageTemplateModalWrapper from '../../template/components/manage-template-modal/editor-manage-template-modal-wrapper'
import LeftMenuButton from './left-menu-button'
type TemplateManageResponse = {
template_id: string
}
export default function ActionsManageTemplate() {
const templatesAdmin = getMeta('ol-showTemplatesServerPro')
if (!templatesAdmin) {
return null
}
const [showModal, setShowModal] = useState(false)
const { pdfFile } = useDetachCompileContext()
const { t } = useTranslation()
const handleShowModal = useCallback(() => {
eventTracking.sendMB('left-menu-template')
setShowModal(true)
}, [])
const openTemplate = useCallback(
({ template_id: templateId }: TemplateManageResponse) => {
location.assign(`/template/${templateId}`)
},
[location]
)
return (
<>
{pdfFile ? (
<LeftMenuButton onClick={handleShowModal} icon='open_in_new'>
{t('publish_as_template')}
</LeftMenuButton>
) : (
<OLTooltip
id="disabled-publish-as-template"
description={t('please_compile_pdf_before_publish_as_template')}
overlayProps={{
placement: 'top',
}}
>
{/* OverlayTrigger won't fire unless the child is a non-react html element (e.g div, span) */}
<div>
<LeftMenuButton
icon='open_in_new'
disabled
disabledAccesibilityText={t(
'please_compile_pdf_before_publish_as_template'
)}
>
{t('publish_as_template')}
</LeftMenuButton>
</div>
</OLTooltip>
)}
<EditorManageTemplateModalWrapper
show={showModal}
handleHide={() => setShowModal(false)}
openTemplate={openTemplate}
/>
</>
)
}

View file

@ -0,0 +1,29 @@
import { useTranslation } from 'react-i18next'
import OLCol from '@/features/ui/components/ol/ol-col'
import OLRow from '@/features/ui/components/ol/ol-row'
export default function GalleryHeaderAll() {
const { t } = useTranslation()
return (
<div className="gallery-header">
<OLRow>
<OLCol md={12}>
<h1 className="gallery-title">
<span className="eyebrow-text">
<span aria-hidden="true">&#123;</span>
<span>{t('overleaf_template_gallery')}</span>
<span aria-hidden="true">&#125;</span>
</span>
{t('latex_templates')}
</h1>
</OLCol>
</OLRow>
<div className="row">
<div className="col-md-12">
<p className="gallery-summary">{t('latex_templates_for_journal_articles')}
</p>
</div>
</div>
</div>
)
}

View file

@ -0,0 +1,33 @@
import getMeta from '@/utils/meta'
import OLCol from '@/features/ui/components/ol/ol-col'
import OLRow from '@/features/ui/components/ol/ol-row'
import GallerySearchSortHeader from './gallery-search-sort-header'
export default function GalleryHeaderTagged({ category }) {
const title = getMeta('og:title')
const { templateLinks } = getMeta('ol-ExposedSettings') || []
const description = templateLinks?.find(link => link.url.split("/").pop() === category)?.description
const gotoAllLink = (category !== 'all')
return (
<div className="tagged-header-container">
<GallerySearchSortHeader
gotoAllLink={gotoAllLink}
/>
{ category && (
<>
<OLRow>
<OLCol xs={12}>
<h1 className="gallery-title">{title}</h1>
</OLCol>
</OLRow>
<OLRow>
<OLCol lg={8}>
<p className="gallery-summary">{description}</p>
</OLCol>
</OLRow>
</>
)}
</div>
)
}

View file

@ -0,0 +1,31 @@
import { useTranslation } from 'react-i18next'
import getMeta from '@/utils/meta'
export default function GalleryPopularTags() {
const { t } = useTranslation()
const { templateLinks } = getMeta('ol-ExposedSettings') || []
if(!templateLinks || templateLinks.length < 2) return null
return (
<div className="popular-tags">
<h1>{t('categories')}</h1>
<div className="row popular-tags-list">
{templateLinks?.filter(link => link.url.split("/").pop() !== "all").map((link, index) => (
<div key={index} className="gallery-thumbnail col-12 col-md-6 col-lg-4">
<a href={link.url}>
<div className="thumbnail-tag">
<img
src={`/img/website-redesign/gallery/${link.url.split("/").pop()}.svg`}
alt={link.name}
/>
</div>
<span className="caption-title">{link.name}</span>
</a>
<p>{link.description}</p>
</div>
))}
</div>
</div>
)
}

View file

@ -0,0 +1,78 @@
import { useTemplateGalleryContext } from '../context/template-gallery-context'
import { useTranslation } from 'react-i18next'
import SearchForm from './search-form'
import OLCol from '@/features/ui/components/ol/ol-col'
import OLRow from '@/features/ui/components/ol/ol-row'
import useSort from '../hooks/use-sort'
import withContent, { SortBtnProps } from './sort/with-content'
import MaterialIcon from '@/shared/components/material-icon'
function SortBtn({ onClick, text, iconType, screenReaderText }: SortBtnProps) {
return (
<button
className="gallery-header-sort-btn inline-block"
onClick={onClick}
aria-label={screenReaderText}
>
<span>{text}</span>
{iconType ? (
<MaterialIcon type={iconType} />
) : (
<MaterialIcon type="arrow_upward" style={{ visibility: 'hidden' }} />
)}
</button>
)
}
const SortByButton = withContent(SortBtn)
export default function GallerySearchSortHeader( { gotoAllLink }: { boolean } ) {
const { t } = useTranslation()
const {
searchText,
setSearchText,
sort,
} = useTemplateGalleryContext()
const { handleSort } = useSort()
return (
<OLRow className="align-items-center">
{gotoAllLink ? (
<OLCol className="col-auto">
<a className="previous-page-link" href="/templates/all">
<i className="material-symbols material-symbols-rounded" aria-hidden="true">arrow_left_alt</i>
{t('all_templates')}
</a>
</OLCol>
) : (
<OLCol className="col-auto">
<a className="previous-page-link" href="/templates">
<i className="material-symbols material-symbols-rounded" aria-hidden="true">arrow_left_alt</i>
{t('template_gallery')}
</a>
</OLCol>
)}
<OLCol className="d-flex justify-content-center gap-2">
<SortByButton
column="lastUpdated"
text={t('last_updated')}
sort={sort}
onClick={() => handleSort('lastUpdated')}
/>
<SortByButton
column="name"
text={t('title')}
sort={sort}
onClick={() => handleSort('name')}
/>
</OLCol>
<OLCol xs={3} className="ms-auto" >
<SearchForm
inputValue={searchText}
setInputValue={setSearchText}
/>
</OLCol>
</OLRow>
)
}

View file

@ -0,0 +1,80 @@
import { useTranslation } from 'react-i18next'
export default function Pagination({ currentPage, totalPages, onPageChange }) {
const { t } = useTranslation()
if (totalPages <= 1) return null
const pageNumbers = []
let startPage = Math.max(1, currentPage - 4)
let endPage = Math.min(totalPages, currentPage + 4)
if (startPage > 1) {
pageNumbers.push(1)
if (startPage > 2) {
pageNumbers.push("...")
}
}
for (let i = startPage; i <= endPage; i++) {
pageNumbers.push(i)
}
if (endPage < totalPages) {
if (endPage < totalPages - 1) {
pageNumbers.push("...")
}
pageNumbers.push(totalPages)
}
return (
<nav role="navigation" aria-label={t('pagination_navigation')}>
<ul className="pagination">
{/*
{currentPage > 1 && (
<li>
<button aria-label={t('go_to_first_page')} onClick={() => onPageChange(1)}>
&lt;&lt; {t('first')}
</button>
</li>
)}
*/}
{currentPage > 1 && (
<li>
<button aria-label={t('go_prev_page')} onClick={() => onPageChange(currentPage - 1)}>
&lt; {t('prev')}
</button>
</li>
)}
{pageNumbers.map((page, index) => (
<li key={index} className={page === currentPage ? "active" : ""}>
{page === "..." ? (
<span aria-hidden="true">{page}</span>
) : page === currentPage ? (
<span aria-label={t('page_current', { page })} aria-current="true">{page}</span>
) : (
<button aria-label={t('go_page', { page })} onClick={() => onPageChange(page)}>
{page}
</button>
)}
</li>
))}
{currentPage < totalPages && (
<li>
<button aria-label={t('go_next_page')} onClick={() => onPageChange(currentPage + 1)}>
{t('next')} &gt;
</button>
</li>
)}
{/*
{currentPage < totalPages && (
<li>
<button aria-label={t('go_to_last_page')} onClick={() => onPageChange(totalPages)}>
{t('last')} &gt;&gt;
</button>
</li>
)}
*/}
</ul>
</nav>
)
}

View file

@ -0,0 +1,61 @@
import { useTranslation } from 'react-i18next'
import { MergeAndOverride } from '../../../../../types/utils'
import OLForm from '@/features/ui/components/ol/ol-form'
import OLFormControl from '@/features/ui/components/ol/ol-form-control'
import MaterialIcon from '@/shared/components/material-icon'
type SearchFormOwnProps = {
inputValue: string
setInputValue: (input: string) => void
}
type SearchFormProps = MergeAndOverride<
React.ComponentProps<typeof OLForm>,
SearchFormOwnProps
>
export default function SearchForm({
inputValue,
setInputValue,
}: SearchFormProps) {
const { t } = useTranslation()
let placeholderMessage = t('search')
const placeholder = `${placeholderMessage}`
const handleChange: React.ComponentProps<typeof OLFormControl
>['onChange'] = e => {
setInputValue(e.target.value)
}
const handleClear = () => setInputValue('')
return (
<OLForm
role="search"
onSubmit={e => e.preventDefault()}
>
<OLFormControl
className="gallery-search-form-control"
id="gallery-search-form-control"
type="text"
value={inputValue}
onChange={handleChange}
placeholder={placeholder}
aria-label={placeholder}
prepend={<MaterialIcon type="search" />}
append={
inputValue.length > 0 && (
<button
type="button"
className="form-control-search-clear-btn"
aria-label={t('clear_search')}
onClick={handleClear}
>
<MaterialIcon type="clear" />
</button>
)
}
/>
</OLForm>
)
}

View file

@ -0,0 +1,46 @@
import { useTranslation } from 'react-i18next'
import { Sort } from '../../types/api'
type SortBtnOwnProps = {
column: string
sort: Sort
text: string
onClick: () => void
}
type WithContentProps = {
iconType?: string
screenReaderText: string
}
export type SortBtnProps = SortBtnOwnProps & WithContentProps
function withContent<T extends SortBtnOwnProps>(
WrappedComponent: React.ComponentType<T & WithContentProps>
) {
function WithContent(hocProps: T) {
const { t } = useTranslation()
const { column, text, sort } = hocProps
let iconType
let screenReaderText = t('sort_by_x', { x: text })
if (column === sort.by) {
iconType =
sort.order === 'asc' ? 'arrow_upward_alt' : 'arrow_downward_alt'
screenReaderText = t('reverse_x_sort_order', { x: text })
}
return (
<WrappedComponent
{...hocProps}
iconType={iconType}
screenReaderText={screenReaderText}
/>
)
}
return WithContent
}
export default withContent

View file

@ -0,0 +1,29 @@
import { memo } from 'react'
import { cleanHtml } from '../../../../../modules/template-gallery/app/src/CleanHtml.mjs'
function TemplateGalleryEntry({ template }) {
return (
<div className={"gallery-thumbnail col-12 col-md-6 col-lg-4"}>
<a href={`/template/${template.id}`} className="thumbnail-link">
<div className="thumbnail">
<img
src={`/template/${template.id}/preview?version=${template.version}&style=thumbnail`}
alt={template.name}
/>
</div>
<span className="gallery-list-item-title">
<span className="caption-title">{template.name}</span>
<span className="badge-container"></span>
</span>
</a>
<div className="caption">
<p className="caption-description" dangerouslySetInnerHTML={{ __html: cleanHtml(template.description, 'plainText') }} />
</div>
<div className="author-name">
<div dangerouslySetInnerHTML={{ __html: cleanHtml(template.author, 'plainText') }} />
</div>
</div>
)
}
export default memo(TemplateGalleryEntry)

View file

@ -0,0 +1,64 @@
import { TemplateGalleryProvider } from '../context/template-gallery-context'
import { useTranslation } from 'react-i18next'
import useWaitForI18n from '../../../shared/hooks/use-wait-for-i18n'
import withErrorBoundary from '../../../infrastructure/error-boundary'
import { GenericErrorBoundaryFallback } from '@/shared/components/generic-error-boundary-fallback'
import getMeta from '@/utils/meta'
import DefaultNavbar from '@/features/ui/components/bootstrap-5/navbar/default-navbar'
import Footer from '@/features/ui/components/bootstrap-5/footer/footer'
import GalleryHeaderTagged from './gallery-header-tagged'
import GalleryHeaderAll from './gallery-header-all'
import TemplateGallery from './template-gallery'
import GallerySearchSortHeader from './gallery-search-sort-header'
import GalleryPopularTags from './gallery-popular-tags'
function TemplateGalleryRoot() {
const { isReady } = useWaitForI18n()
if (!isReady) {
return null
}
return (
<TemplateGalleryProvider>
<TemplateGalleryPageContent />
</TemplateGalleryProvider>
)
}
function TemplateGalleryPageContent() {
const { t } = useTranslation()
const navbarProps = getMeta('ol-navbar')
const footerProps = getMeta('ol-footer')
const category = getMeta('ol-templateCategory')
return (
<>
<DefaultNavbar {...navbarProps} />
<main id="main-content"
className={`content content-page gallery ${category ? 'gallery-tagged' : ''}`}
>
<div className="container">
{category ? (
<>
<GalleryHeaderTagged category={category} />
<TemplateGallery />
</>
) : (
<>
<GalleryHeaderAll />
<GalleryPopularTags />
<hr className="w-full border-muted mb-5" />
<div className="recent-docs">
<GallerySearchSortHeader />
<h2>{t('all_templates')}</h2>
<TemplateGallery />
</div>
</>
)}
</div>
</main>
<Footer {...footerProps} />
</>
)
}
export default withErrorBoundary(TemplateGalleryRoot, GenericErrorBoundaryFallback)

View file

@ -0,0 +1,65 @@
import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import OLRow from '@/features/ui/components/ol/ol-row'
import { useTemplateGalleryContext } from '../context/template-gallery-context'
import TemplateGalleryEntry from './template-gallery-entry'
import Pagination from './pagination'
export default function TemplateGallery() {
const { t } = useTranslation()
const {
searchText,
sort,
visibleTemplates,
} = useTemplateGalleryContext()
const templatesPerPage = 6
const totalPages = Math.ceil(visibleTemplates.length / templatesPerPage)
const [currentPage, setCurrentPage] = useState(1)
useEffect(() => {
setCurrentPage(1)
}, [sort])
const [lastNonSearchPage, setLastNonSearchPage] = useState(1)
const [isSearching, setIsSearching] = useState(false)
useEffect(() => {
if (searchText.length > 0) {
if (!isSearching) {
setLastNonSearchPage(currentPage)
setIsSearching(true)
}
setCurrentPage(1)
} else {
if (isSearching) {
setCurrentPage(lastNonSearchPage)
setIsSearching(false)
}
}
}, [searchText])
const startIndex = (currentPage - 1) * templatesPerPage
const currentTemplates = visibleTemplates.slice(startIndex, startIndex + templatesPerPage)
return (
<>
<OLRow className="gallery-container">
{currentTemplates.length > 0 ? (
currentTemplates.map(p => (
<TemplateGalleryEntry
className="gallery-thumbnail col-12 col-md-6 col-lg-4"
key={p.id}
template={p}
/>
))
) : (
<OLRow>
<p className="text-center">{t('no_templates_found')}</p>
</OLRow>
)}
</OLRow>
<Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={setCurrentPage} />
</>
)
}

View file

@ -0,0 +1,129 @@
import {
createContext,
ReactNode,
useContext,
useEffect,
useMemo,
useRef,
useState,
} from 'react'
import { Template } from '../../../../../types/template'
import { GetTemplatesResponseBody, Sort } from '../types/api'
import getMeta from '../../../utils/meta'
import useAsync from '../../../shared/hooks/use-async'
import { getTemplates } from '../util/api'
import sortTemplates from '../util/sort-templates'
import { debugConsole } from '@/utils/debugging'
export type TemplateGalleryContextValue = {
visibleTemplates: Template[]
totalTemplatesCount: number
error: Error | null
sort: Sort
setSort: React.Dispatch<React.SetStateAction<Sort>>
searchText: string
setSearchText: React.Dispatch<React.SetStateAction<string>>
}
export const TemplateGalleryContext = createContext<
TemplateGalleryContextValue | undefined
>(undefined)
type TemplateGalleryProviderProps = {
children: ReactNode
}
export function TemplateGalleryProvider({ children }: TemplateGalleryProviderProps) {
const [loadedTemplates, setLoadedTemplates] = useState<Template[]>([])
const [visibleTemplates, setVisibleTemplates] = useState<Template[]>([])
const [totalTemplatesCount, setTotalTemplatesCount] = useState<number>(0)
const [sort, setSort] = useState<Sort>({
by: 'lastUpdated',
order: 'desc',
})
const prevSortRef = useRef<Sort>(sort)
const [searchText, setSearchText] = useState('')
const {
error,
runAsync,
} = useAsync<GetTemplatesResponseBody>()
const category = getMeta('ol-templateCategory') || 'all'
useEffect(() => {
runAsync(getTemplates(sort, category))
.then(data => {
setLoadedTemplates(data.templates)
setTotalTemplatesCount(data.totalSize)
})
.catch(debugConsole.error)
.finally(() => {
})
}, [runAsync])
useEffect(() => {
let filteredTemplates = [...loadedTemplates]
if (searchText.length) {
filteredTemplates = filteredTemplates.filter(template =>
template.name.toLowerCase().includes(searchText.toLowerCase()) ||
template.description.toLowerCase().includes(searchText.toLowerCase())
)
}
if (prevSortRef.current !== sort) {
filteredTemplates = sortTemplates(filteredTemplates, sort)
const loadedTemplatesSorted = sortTemplates(loadedTemplates, sort)
setLoadedTemplates(loadedTemplatesSorted)
}
setVisibleTemplates(filteredTemplates)
}, [
loadedTemplates,
searchText,
sort,
])
useEffect(() => {
prevSortRef.current = sort
}, [sort])
const value = useMemo<TemplateGalleryContextValue>(
() => ({
error,
searchText,
setSearchText,
setSort,
sort,
totalTemplatesCount,
visibleTemplates,
}),
[
error,
searchText,
setSearchText,
setSort,
sort,
totalTemplatesCount,
visibleTemplates,
]
)
return (
<TemplateGalleryContext.Provider value={value}>
{children}
</TemplateGalleryContext.Provider>
)
}
export function useTemplateGalleryContext() {
const context = useContext(TemplateGalleryContext)
if (!context) {
throw new Error(
'TemplateGalleryContext is only available inside TemplateGalleryProvider'
)
}
return context
}

View file

@ -0,0 +1,20 @@
import { useTemplateGalleryContext } from '../context/template-gallery-context'
import { Sort } from '../types/api'
import { SortingOrder } from '../../../../../types/sorting-order'
const toggleSort = (order: SortingOrder): SortingOrder => {
return order === 'asc' ? 'desc' : 'asc'
}
function useSort() {
const { sort, setSort } = useTemplateGalleryContext()
const handleSort = (by: Sort['by']) => {
setSort(prev => ({
by,
order: prev.by === by ? toggleSort(sort.order) : by === 'lastUpdated' ? 'desc' : 'asc',
}))
}
return { handleSort }
}
export default useSort

View file

@ -0,0 +1,12 @@
import { SortingOrder } from '../../../../../types/sorting-order'
import { Template } from '../../../../../types/template'
export type Sort = {
by: 'lastUpdated' | 'name'
order: SortingOrder
}
export type GetTemplatesResponseBody = {
totalSize: number
templates: Template[]
}

View file

@ -0,0 +1,12 @@
import { GetTemplatesResponseBody, Sort } from '../types/api'
import { getJSON } from '../../../infrastructure/fetch-json'
export function getTemplates(sortBy: Sort, category: string): Promise<GetTemplatesResponseBody> {
const queryParams = new URLSearchParams({
by: sortBy.by,
order: sortBy.order,
category,
}).toString()
return getJSON(`/api/templates?${queryParams}`)
}

View file

@ -0,0 +1,40 @@
import { Sort } from '../types/api'
import { Template } from '../../../../../types/template'
import { SortingOrder } from '../../../../../types/sorting-order'
import { Compare } from '../../../../../types/helpers/array/sort'
const order = (order: SortingOrder, templates: Template[]) => {
return order === 'asc' ? [...templates] : templates.reverse()
}
export const defaultComparator = (
v1: Template,
v2: Template,
key: 'name' | 'lastUpdated'
) => {
const value1 = v1[key].toLowerCase()
const value2 = v2[key].toLowerCase()
if (value1 !== value2) {
return value1 < value2 ? Compare.SORT_A_BEFORE_B : Compare.SORT_A_AFTER_B
}
return Compare.SORT_KEEP_ORDER
}
export default function sortTemplates(templates: Template[], sort: Sort) {
let sorted = [...templates]
if (sort.by === 'name') {
sorted = sorted.sort((...args) => {
return defaultComparator(...args, 'name')
})
}
if (sort.by === 'lastUpdated') {
sorted = sorted.sort((...args) => {
return defaultComparator(...args, 'lastUpdated')
})
}
return order(sort.order, sorted)
}

View file

@ -0,0 +1,48 @@
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import useIsMounted from '@/shared/hooks/use-is-mounted'
import OLButton from '@/features/ui/components/ol/ol-button'
import DeleteTemplateModal from './modals/delete-template-modal'
import { useTemplateContext } from '../context/template-context'
import { deleteTemplate } from '../util/api'
import type { Template } from '../../../../../types/template'
function DeleteTemplateButton() {
const { t } = useTranslation()
const [showModal, setShowModal] = useState(false)
const isMounted = useIsMounted()
const { template, setTemplate } = useTemplateContext()
const handleOpenModal = () => {
setShowModal(true)
}
const handleCloseModal = () => {
if (isMounted.current) {
setShowModal(false)
}
}
const handleDeleteTemplate = async (template: Template) => {
await deleteTemplate(template)
handleCloseModal()
const previousPage = document.referrer || '/templates'
window.location.href = previousPage
}
return (
<>
<OLButton variant="danger" onClick={handleOpenModal}>
{t('delete')}
</OLButton>
<DeleteTemplateModal
template={template}
actionHandler={handleDeleteTemplate}
showModal={showModal}
handleCloseModal={handleCloseModal}
/>
</>
)
}
export default DeleteTemplateButton

View file

@ -0,0 +1,46 @@
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import useIsMounted from '@/shared/hooks/use-is-mounted'
import OLButton from '@/features/ui/components/ol/ol-button'
import EditTemplateModal from './modals/edit-template-modal'
import { useTemplateContext } from '../context/template-context'
import { updateTemplate } from '../util/api'
import type { Template } from '../../../../../types/template'
export default function EditTemplateButton() {
const { t } = useTranslation()
const [showModal, setShowModal] = useState(false)
const isMounted = useIsMounted()
const { template, setTemplate } = useTemplateContext()
const handleOpenModal = () => {
setShowModal(true)
}
const handleCloseModal = () => {
if (isMounted.current) {
setShowModal(false)
}
}
const handleEditTemplate = async (editedTemplate: Template) => {
const updated = await updateTemplate({ editedTemplate, template })
if (updated) {
setTemplate(prev => ({ ...prev, ...updated }))
}
}
return (
<>
<OLButton variant="secondary" onClick={handleOpenModal}>
{t('edit')}
</OLButton>
<EditTemplateModal
showModal={showModal}
handleCloseModal={handleCloseModal}
actionHandler={handleEditTemplate}
/>
</>
)
}

View file

@ -0,0 +1,17 @@
import React from 'react'
import OLFormControl from '@/features/ui/components/ol/ol-form-control'
interface FormFieldInputProps extends React.ComponentProps<typeof OLFormControl> {
value: string
placeholder?: string
onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>
}
const FormFieldInput: React.FC<FormFieldInputProps> = ({
type = 'text',
...props
}) => (
<OLFormControl type={type} {...props} />
)
export default FormFieldInput

View file

@ -0,0 +1,26 @@
import React from 'react'
import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
import OLFormLabel from '@/features/ui/components/ol/ol-form-label'
interface LabeledRowFormGroupProps {
controlId: string
label: string
children: React.ReactNode
}
const LabeledRowFormGroup: React.FC<LabeledRowFormGroupProps> = ({
controlId,
label,
children,
}) => (
<OLFormGroup controlId={controlId} className="row">
<div className="col-2">
<OLFormLabel className="col-form-label col">{label}</OLFormLabel>
</div>
<div className="col-10">
{children}
</div>
</OLFormGroup>
)
export default React.memo(LabeledRowFormGroup)

View file

@ -0,0 +1,96 @@
import React, { useCallback } from 'react'
import LabeledRowFormGroup from '../form/labeled-row-form-group'
import FormFieldInput from '../form/form-field-input'
import SettingsTemplateCategory from '../settings/settings-template-category'
import SettingsLicense from '../settings/settings-license'
import SettingsLanguage from '../settings/settings-language'
import { useTranslation } from 'react-i18next'
import type { Template } from '../../../../../../types/template'
interface TemplateFormFieldsProps {
template: Partial<Template>
includeLanguage?: boolean
onChange: (changes: Partial<Template>) => void
onEnterKey?: () => void
}
function TemplateFormFields({
template,
includeLanguage = false,
onChange,
onEnterKey,
}: TemplateFormFieldsProps) {
const { t } = useTranslation()
const handleKeyDown = useCallback(
(e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
e.preventDefault()
onEnterKey?.()
}
},
[onEnterKey]
)
return (
<>
<LabeledRowFormGroup controlId="form-title" label={t('title') + ':'}>
<FormFieldInput
required
maxLength="255"
value={template.name ?? ''}
placeholder={t('title')}
onChange={e => onChange({ name: e.target.value })}
onKeyDown={handleKeyDown}
/>
</LabeledRowFormGroup>
<LabeledRowFormGroup controlId="form-author" label={t('author') + ':'}>
<FormFieldInput
maxLength="255"
value={template.authorMD ?? ''}
placeholder={t('author')}
onChange={e => onChange({ authorMD: e.target.value })}
onKeyDown={handleKeyDown}
/>
</LabeledRowFormGroup>
<LabeledRowFormGroup controlId="form-category" label={t('category') + ':'}>
<SettingsTemplateCategory
value={template.category}
onChange={val => onChange({ category: val })}
/>
</LabeledRowFormGroup>
<LabeledRowFormGroup controlId="form-description" label={t('description') + ':'}>
<FormFieldInput
as="textarea"
rows={8}
maxLength="5000"
value={template.descriptionMD ?? ''}
placeholder={t('description')}
onChange={e => onChange({ descriptionMD: e.target.value })}
autoFocus
/>
</LabeledRowFormGroup>
<LabeledRowFormGroup controlId="form-license" label={t('license') + ':'}>
<SettingsLicense
value={template.license}
onChange={val => onChange({ license: val })}
/>
</LabeledRowFormGroup>
{includeLanguage && (
<LabeledRowFormGroup controlId="form-language" label={t('language') + ':'}>
<SettingsLanguage
value={template.language}
onChange={val => onChange({ language: val })}
/>
</LabeledRowFormGroup>
)}
</>
)
}
export default React.memo(TemplateFormFields)

View file

@ -0,0 +1,40 @@
import React from 'react'
import withErrorBoundary from '@/infrastructure/error-boundary'
import { useProjectContext } from '@/shared/context/project-context'
import ManageTemplateModal from './manage-template-modal'
import type { Template } from '../../../../../../types/template'
interface EditorManageTemplateModalWrapperProps {
show: boolean
handleHide: () => void
openTemplate: (data: Template) => void
}
const EditorManageTemplateModalWrapper = React.memo(
function EditorManageTemplateModalWrapper({
show,
handleHide,
openTemplate,
}: EditorManageTemplateModalWrapperProps) {
const {
_id: projectId,
name: projectName,
} = useProjectContext()
if (!projectName) {
// wait for useProjectContext
return null
}
return (
<ManageTemplateModal
handleHide={handleHide}
show={show}
handleAfterPublished={openTemplate}
projectId={projectId}
projectName={projectName}
/>
)
}
)
export default withErrorBoundary(EditorManageTemplateModalWrapper)

View file

@ -0,0 +1,169 @@
import React, { useEffect, useState, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import { debugConsole } from '@/utils/debugging'
import { getJSON, postJSON } from '@/infrastructure/fetch-json'
import Notification from '@/shared/components/notification'
import {
OLModalBody,
OLModalFooter,
OLModalHeader,
OLModalTitle,
} from '@/features/ui/components/ol/ol-modal'
import OLForm from '@/features/ui/components/ol/ol-form'
import OLButton from '@/features/ui/components/ol/ol-button'
import { useDetachCompileContext } from '@/shared/context/detach-compile-context'
import { useUserContext } from '@/shared/context/user-context'
import { useFocusTrap } from '../../hooks/use-focus-trap'
import TemplateFormFields from '../form/template-form-fields'
import type { Template } from '../../../../../../types/template'
interface ManageTemplateModalContentProps {
handleHide: () => void
inFlight: boolean
setInFlight: (inFlight: boolean) => void
handleAfterPublished: (data: Template) => void
projectId: string
projectName: string
}
export default function ManageTemplateModalContent({
handleHide,
inFlight,
setInFlight,
handleAfterPublished,
projectId,
projectName,
}: ManageTemplateModalContentProps) {
const { t } = useTranslation()
const { pdfFile } = useDetachCompileContext()
const user = useUserContext()
const [template, setTemplate] = useState<Partial<Template>>({
name: projectName,
authorMD: `${user.first_name} ${user.last_name}`.trim(),
})
const [override, setOverride] = useState(false)
const [titleConflict, setTitleConflict] = useState(false)
const [error, setError] = useState<string | false>(false)
const [notificationType, setNotificationType] = useState<'error' | 'warning'>('error')
const [disablePublish, setDisablePublish] = useState(false)
// Only the trimmed name gates submission
const valid = (template.name ?? '').trim()
useEffect(() => {
const queryParams = new URLSearchParams({ key: 'name', val: projectName })
getJSON(`/api/template?${queryParams}`)
.then((data) => {
if (!data) return
setTemplate(prev => ({
...prev,
descriptionMD: data.descriptionMD,
authorMD: data.authorMD,
license: data.license,
category: data.category,
}))
})
.catch(debugConsole.error)
}, [])
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault()
if (!valid) return
setError(false)
setInFlight(true)
postJSON(`/template/new/${projectId}`, {
body: {
category: template.category,
name: valid,
authorMD: (template.authorMD ?? '').trim(),
license: template.license,
descriptionMD: (template.descriptionMD ?? '').trim(),
build: pdfFile.build,
override,
},
})
.then(data => {
handleHide()
handleAfterPublished(data)
})
.catch(({ response, data }) => {
if (response?.status === 409 && data.canOverride) {
setNotificationType('warning')
setOverride(true)
} else {
setNotificationType('error')
setDisablePublish(true)
}
setError(data.message)
if (response?.status === 409) setTitleConflict(true)
})
.finally(() => {
setInFlight(false)
})
}
const handleChange = (changes: Partial<Template>) => {
if ('name' in changes && titleConflict) {
setError(false)
setOverride(false)
if (disablePublish) setDisablePublish(false)
}
setTemplate(prev => ({ ...prev, ...changes }))
}
const handleEnterKey = () => {
document.getElementById('submit-publish-template')?.click()
}
const modalRef = useRef<HTMLDivElement>(null)
useFocusTrap(modalRef)
return (
<div ref={modalRef}>
<OLModalHeader closeButton>
<OLModalTitle>{t('publish_as_template')}</OLModalTitle>
</OLModalHeader>
<OLModalBody>
<div className="modal-body-publish">
<div className="content-as-table">
<OLForm id="publish-template-form" onSubmit={handleSubmit}>
<TemplateFormFields
template={template}
includeLanguage={false}
onChange={handleChange}
onEnterKey={handleEnterKey}
/>
</OLForm>
</div>
</div>
{error && (
<Notification
content={error.length ? error : t('generic_something_went_wrong')}
type={notificationType}
/>
)}
</OLModalBody>
<OLModalFooter>
<OLButton variant="secondary" disabled={inFlight} onClick={handleHide}>
{t('cancel')}
</OLButton>
<OLButton
id="submit-publish-template"
variant={override ? 'danger' : 'primary'}
disabled={inFlight || !valid || disablePublish}
form="publish-template-form"
type="submit"
>
{inFlight ? <>{t('publishing')}</> : override ? t('overwrite') : t('publish')}
</OLButton>
</OLModalFooter>
</div>
)
}

View file

@ -0,0 +1,52 @@
import React, { memo, useCallback, useState } from 'react'
import OLModal from '@/features/ui/components/ol/ol-modal'
import ManageTemplateModalContent from './manage-template-modal-content'
import type { Template } from '../../../../../../types/template'
interface ManageTemplateModalProps {
show: boolean
handleHide: () => void
handleAfterPublished: (data: Template) => void
projectId: string
projectName: string
}
function ManageTemplateModal({
show,
handleHide,
handleAfterPublished,
projectId,
projectName,
}: ManageTemplateModalProps) {
const [inFlight, setInFlight] = useState(false)
const onHide = useCallback(() => {
if (!inFlight) {
handleHide()
}
}, [handleHide, inFlight])
return (
<OLModal
size="lg"
animation
show={show}
onHide={onHide}
id="publish-template-modal"
// backdrop="static" will disable closing the modal by clicking
// outside of the modal element
backdrop='static'
>
<ManageTemplateModalContent
handleHide={onHide}
inFlight={inFlight}
setInFlight={setInFlight}
handleAfterPublished={handleAfterPublished}
projectId={projectId}
projectName={projectName}
/>
</OLModal>
)
}
export default memo(ManageTemplateModal)

View file

@ -0,0 +1,43 @@
import { useTranslation } from 'react-i18next'
import withErrorBoundary from '@/infrastructure/error-boundary'
import Notification from '@/shared/components/notification'
import TemplateActionModal from './template-action-modal'
type DeleteTemplateModalProps = Pick<
React.ComponentProps<typeof TemplateActionModal>,
'template' | 'actionHandler' | 'showModal' | 'handleCloseModal'
>
function DeleteTemplateModal({
template,
actionHandler,
showModal,
handleCloseModal,
}: DeleteTemplateModalProps) {
const { t } = useTranslation()
return (
<TemplateActionModal
action="delete"
actionHandler={actionHandler}
title={t('delete_template')}
showModal={showModal}
handleCloseModal={handleCloseModal}
template={template}
>
<p>{t('about_to_delete_template')}</p>
<ul>
<li key={`template-action-list-${template.id}`}>
<b>{template.name}</b>
</li>
</ul>
<Notification
content={t('this_action_cannot_be_undone')}
type="warning"
/>
</TemplateActionModal>
)
}
export default withErrorBoundary(DeleteTemplateModal)

View file

@ -0,0 +1,139 @@
import React, { useReducer, useState, useEffect, useRef, useCallback, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import OLForm from '@/features/ui/components/ol/ol-form'
import OLButton from '@/features/ui/components/ol/ol-button'
import withErrorBoundary from '@/infrastructure/error-boundary'
//import { useFocusTrap } from '../../hooks/use-focus-trap'
import TemplateActionModal from './template-action-modal'
import { useTemplateContext } from '../../context/template-context'
import TemplateFormFields from '../form/template-form-fields'
import type { Template } from '../../../../../../types/template'
type EditTemplateModalProps = {
showModal: boolean
handleCloseModal: () => void
actionHandler: (editedTemplate: Template) => void | Promise<void>
}
type ActionError = {
info?: {
statusCode?: number
}
}
type TemplateFormAction =
| { type: 'UPDATE'; payload: Partial<Template> }
| { type: 'RESET'; payload: Template }
| { type: 'CLEAR_FIELD'; field: keyof Template }
function templateFormReducer(state: Template, action: TemplateFormAction): Template {
switch (action.type) {
case 'UPDATE':
return { ...state, ...action.payload }
case 'RESET':
return { ...action.payload }
case 'CLEAR_FIELD':
return { ...state, [action.field]: '' }
default:
return state
}
}
function EditTemplateModal({
showModal,
handleCloseModal,
actionHandler,
}: EditTemplateModalProps) {
const { t } = useTranslation()
const { template } = useTemplateContext()
const [editedTemplate, dispatch] = useReducer(templateFormReducer, template)
const [actionError, setActionError] = useState<ActionError | null>(null)
const clearModalErrorRef = useRef<() => void>(() => {})
useEffect(() => {
if (showModal) {
dispatch({ type: 'RESET', payload: template })
setActionError(null)
}
}, [showModal, template])
const isConflictError = useMemo(
() => actionError?.info?.statusCode === 409,
[actionError]
)
const valid = useMemo(
() => editedTemplate.name.trim().length > 0,
[editedTemplate.name]
)
const handleChange = useCallback(
(changes: Partial<Template>) => {
dispatch({ type: 'UPDATE', payload: changes })
if ('name' in changes && isConflictError) {
setActionError(null)
clearModalErrorRef.current?.()
}
},
[isConflictError]
)
const handleEnterKey = useCallback(() => {
document.getElementById('submit-edit-template')?.click()
}, [])
const handleAction = useCallback(() => {
return Promise.resolve(actionHandler(editedTemplate)).catch(err => {
setActionError(err)
throw err
})
}, [actionHandler, editedTemplate])
const submitButtonDisabled = !valid || isConflictError
return (
<TemplateActionModal
action="edit"
title={t('edit_template')}
template={editedTemplate}
showModal={showModal}
handleCloseModal={handleCloseModal}
size="lg"
actionHandler={handleAction}
renderFooterButtons={({ onConfirm, onCancel, isProcessing }) => (
<>
<OLButton variant="secondary" onClick={onCancel}>
{t('cancel')}
</OLButton>
<OLButton
id="submit-edit-template"
onClick={onConfirm}
variant="primary"
disabled={submitButtonDisabled || isProcessing}
>
{t('save')}
</OLButton>
</>
)}
onClearError={fn => {
clearModalErrorRef.current = fn
}}
>
<div className="modal-body-publish">
<div className="content-as-table">
<OLForm onSubmit={e => e.preventDefault()}>
<TemplateFormFields
template={editedTemplate}
includeLanguage
onChange={handleChange}
onEnterKey={handleEnterKey}
/>
</OLForm>
</div>
</div>
</TemplateActionModal>
)
}
export default withErrorBoundary(React.memo(EditTemplateModal))

View file

@ -0,0 +1,145 @@
import { memo, useEffect, useState, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import { getUserFacingMessage } from '@/infrastructure/fetch-json'
import * as eventTracking from '@/infrastructure/event-tracking'
import { isSmallDevice } from '@/infrastructure/event-tracking'
import useIsMounted from '@/shared/hooks/use-is-mounted'
import Notification from '@/shared/components/notification'
import OLButton from '@/features/ui/components/ol/ol-button'
import OLModal, {
OLModalBody,
OLModalFooter,
OLModalHeader,
OLModalTitle,
} from '@/features/ui/components/ol/ol-modal'
import type { Template } from '../../../../../../types/template'
import { useFocusTrap } from '../../hooks/use-focus-trap'
type TemplateActionModalProps = {
title: string
size?: string
action: 'delete' | 'edit'
actionHandler: (template: Template) => Promise<void>
handleCloseModal: () => void
template: Template
showModal: boolean
children?: React.ReactNode
renderFooterButtons?: (props: {
onConfirm: () => void
onCancel: () => void
isProcessing: boolean
}) => React.ReactNode
onClearError?: (clear: () => void) => void
}
function TemplateActionModal({
title,
size,
action,
actionHandler,
handleCloseModal,
showModal,
template,
children,
renderFooterButtons,
onClearError,
}: TemplateActionModalProps) {
const { t } = useTranslation()
const [error, setError] = useState<false | { name: string; error: unknown }>(false)
const [isProcessing, setIsProcessing] = useState(false)
const isMounted = useIsMounted()
const modalRef = useRef<HTMLDivElement>(null)
useFocusTrap(modalRef, showModal)
useEffect(() => {
if (onClearError) {
onClearError(() => setError(false))
}
}, [onClearError])
async function handleActionForTemplate(template: Template) {
let errored
setIsProcessing(true)
setError(false)
try {
await actionHandler(template)
} catch (e) {
errored = { name: template.name, error: e }
}
if (isMounted.current) {
setIsProcessing(false)
}
if (!errored) {
handleCloseModal()
} else {
setError(errored)
}
}
useEffect(() => {
if (showModal) {
eventTracking.sendMB('template-info-page-interaction', {
action,
isSmallDevice,
})
} else {
setError(false)
}
}, [action, showModal])
return (
<OLModal
size={size}
show={showModal}
onHide={handleCloseModal}
id="action-tempate-modal"
backdrop="static"
>
<div ref={modalRef}>
<OLModalHeader closeButton>
<OLModalTitle>{title}</OLModalTitle>
</OLModalHeader>
<OLModalBody>
{children}
{!isProcessing && error && (
<Notification
type="error"
title={error.name}
content={getUserFacingMessage(error.error) as string}
/>
)}
</OLModalBody>
<OLModalFooter>
{renderFooterButtons ? (
renderFooterButtons({
onConfirm: () => handleActionForTemplate(template),
onCancel: handleCloseModal,
isProcessing,
})
) : (
<>
<OLButton variant="secondary" onClick={handleCloseModal}>
{t('cancel')}
</OLButton>
<OLButton
variant="danger"
onClick={() => handleActionForTemplate(template)}
disabled={isProcessing}
>
{t('confirm')}
</OLButton>
</>
)}
</OLModalFooter>
</div>
</OLModal>
)
}
export default memo(TemplateActionModal)

View file

@ -0,0 +1,42 @@
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import getMeta from '../../../../utils/meta'
import SettingsMenuSelect from './settings-menu-select'
import type { Optgroup } from './settings-menu-select'
interface SettingsLanguageProps {
value: string
onChange: (value: string) => void
}
export default function SettingsLanguage({
value,
onChange,
}: SettingsLanguageProps) {
const { t } = useTranslation()
const optgroup: Optgroup = useMemo(() => {
const options = (getMeta('ol-languages') ?? [])
// only include spell-check languages that are available in the client
.filter(language => language.dic !== undefined)
return {
label: 'Language',
options: options.map(language => ({
value: language.code,
label: language.name,
})),
}
}, [])
return (
<SettingsMenuSelect
onChange={onChange}
value={value}
options={[{ value: '', label: t('off') }]}
optgroup={optgroup}
label={t('spell_check')}
name="spellCheckLanguage"
/>
)
}

View file

@ -0,0 +1,33 @@
import { useTranslation } from 'react-i18next'
import SettingsMenuSelect from './settings-menu-select'
import type { Option } from './settings-menu-select'
export const licensesMap = {
'cc_by_4.0': 'Creative Commons CC BY 4.0',
'lppl_1.3c': 'LaTeX Project Public License 1.3c',
'other': 'Other (as stated in the work)',
}
interface SettingsLicenseProps {
value: string
onChange: (value: string) => void
}
export default function SettingsLicense({
value,
onChange,
}: SettingsLicenseProps) {
const { t } = useTranslation()
const options = Object.entries(licensesMap).map(([value, label]) => ({ value, label }))
return (
<SettingsMenuSelect
name="license"
label={t('license')}
value={value}
onChange={onChange}
options={options}
/>
)
}

View file

@ -0,0 +1,91 @@
import { ChangeEventHandler, useCallback, useRef, useEffect } from 'react'
import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
import OLFormLabel from '@/features/ui/components/ol/ol-form-label'
import OLFormSelect from '@/features/ui/components/ol/ol-form-select'
type PossibleValue = string | number | boolean
export type Option<T extends PossibleValue = string> = {
value: T
label: string
ariaHidden?: 'true' | 'false'
disabled?: boolean
}
export type Optgroup<T extends PossibleValue = string> = {
label: string
options: Array<Option<T>>
}
type SettingsMenuSelectProps<T extends PossibleValue = string> = {
name: string
options: Array<Option<T>>
optgroup?: Optgroup<T>
onChange: (val: T) => void
value?: T
disabled?: boolean
}
export default function SettingsMenuSelect<T extends PossibleValue = string>(
props: SettingsMenuSelectProps<T>
) {
const { name, options, optgroup, onChange, value, disabled = false } = props
const defaultApplied = useRef(false)
useEffect(() => {
if (value === undefined || value === null) {
onChange(options?.[0]?.value || optgroup?.options?.[0]?.value)
}
}, [value, options, onChange])
const handleChange: ChangeEventHandler<HTMLSelectElement> = useCallback(
event => {
const selectedValue = event.target.value
let onChangeValue: PossibleValue = selectedValue
if (typeof value === 'boolean') {
onChangeValue = selectedValue === 'true'
} else if (typeof value === 'number') {
onChangeValue = parseInt(selectedValue, 10)
}
onChange(onChangeValue as T)
},
[onChange, value]
)
const selectRef = useRef<HTMLSelectElement | null>(null)
return (
<>
<OLFormSelect
onChange={handleChange}
value={value?.toString()}
disabled={disabled}
ref={selectRef}
>
{options.map(option => (
<option
key={`${name}-${option.value}`}
value={option.value.toString()}
aria-hidden={option.ariaHidden}
disabled={option.disabled}
>
{option.label}
</option>
))}
{optgroup ? (
<optgroup label={optgroup.label}>
{optgroup.options.map(option => (
<option
value={option.value.toString()}
key={option.value.toString()}
>
{option.label}
</option>
))}
</optgroup>
) : null}
</OLFormSelect>
</>
)
}

View file

@ -0,0 +1,44 @@
import React, { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import getMeta from '@/utils/meta'
import SettingsMenuSelect from './settings-menu-select'
import type { Option } from './settings-menu-select'
interface SettingsTemplateCategoryProps {
value: string
onChange: (value: string) => void
}
const SettingsTemplateCategory: React.FC<SettingsTemplateCategoryProps> = ({
value,
onChange,
}) => {
const { t } = useTranslation()
const options: Option[] = useMemo(() => {
const { templateLinks = [] } = getMeta('ol-ExposedSettings') as {
templateLinks?: Array<{ name: string; url: string; description: string }>
}
return templateLinks.map(({ name, url }) => ({
value: url,
label: name,
}))
}, [])
if (options.length === 0) {
return null
}
return (
<SettingsMenuSelect
name="category"
label={`${t('category')}:`}
value={value}
onChange={onChange}
options={options}
/>
)
}
export default React.memo(SettingsTemplateCategory)

View file

@ -0,0 +1,104 @@
import { useTranslation } from 'react-i18next'
import getMeta from '@/utils/meta'
import OLCol from '@/features/ui/components/ol/ol-col'
import OLRow from '@/features/ui/components/ol/ol-row'
import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
import { formatDate, fromNowDate } from '../../../utils/dates'
import { cleanHtml } from '../../../../../modules/template-gallery/app/src/CleanHtml.mjs'
import { useTemplateContext } from '../context/template-context'
import DeleteTemplateButton from './delete-template-button'
import EditTemplateButton from './edit-template-button'
import { licensesMap } from './settings/settings-license'
function TemplateDetails() {
const { t } = useTranslation()
const {template, setTemplate} = useTemplateContext()
const lastUpdatedDate = fromNowDate(template.lastUpdated)
const tooltipText = formatDate(template.lastUpdated)
const loggedInUserId = getMeta('ol-user_id')
const loggedInUserIsAdmin = getMeta('ol-userIsAdmin')
const openAsTemplateParams = new URLSearchParams({
version: template.version,
...(template.brandVariationId && { brandVariationId: template.brandVariationId }),
name: template.name,
compiler: template.compiler,
mainFile: template.mainFile,
language: template.language,
...(template.imageName && { imageName: template.imageName })
}).toString()
const sanitizedAuthor = cleanHtml(template.author, 'linksOnly') || t('anonymous')
const sanitizedDescription = cleanHtml(template.description, 'reachText')
return (
<>
<OLRow>
<OLCol md={12}>
<div className={"gallery-item-title"}>
<h1 className="h2">{template.name}</h1>
</div>
</OLCol>
</OLRow>
<OLRow className="cta-links-container">
<OLCol md={12} className="cta-links">
<a className="btn btn-primary cta-link" href={`/project/new/template/${template.id}?${openAsTemplateParams}`}>{t('open_as_template')}</a>
<a className="btn btn-secondary cta-link" href={`/template/${template.id}/preview?version=${template.version}`}>{t('view_pdf')}</a>
</OLCol>
</OLRow>
<div className="template-details-container">
<div className="template-detail">
<div>
<b>{t('author')}:</b>
</div>
<div dangerouslySetInnerHTML={{ __html: sanitizedAuthor }} />
</div>
<div className="template-detail">
<div>
<b>{t('last_updated')}:</b>
</div>
<div>
<OLTooltip
id={`${template.id}`}
description={tooltipText}
overlayProps={{ placement: 'bottom', trigger: ['hover', 'focus'] }}
>
<span>
{lastUpdatedDate.trim()}
</span>
</OLTooltip>
</div>
</div>
<div className="template-detail">
<div>
<b>{t('license')}:</b>
</div>
<div>
{licensesMap[template.license]}
</div>
</div>
{sanitizedDescription && (
<div className="template-detail">
<div>
<b>{t('abstract')}:</b>
</div>
<div
className="gallery-abstract"
data-ol-mathjax=""
dangerouslySetInnerHTML={{ __html: sanitizedDescription }}>
</div>
</div>
)}
</div>
{loggedInUserId && (loggedInUserId === template.owner || loggedInUserIsAdmin) && (
<OLRow className="cta-links-container">
<OLCol md={12} className="text-end">
<EditTemplateButton />
<DeleteTemplateButton />
</OLCol>
</OLRow>
)}
</>
)
}
export default TemplateDetails

View file

@ -0,0 +1,23 @@
import OLCol from '@/features/ui/components/ol/ol-col'
import OLRow from '@/features/ui/components/ol/ol-row'
import { useTemplateContext } from '../context/template-context'
function TemplatePreview() {
const { template, setTemplate } = useTemplateContext()
return (
<div className="entry">
<OLRow>
<OLCol md={12}>
<div className="gallery-large-pdf-preview">
<img
src={`/template/${template.id}/preview?version=${template.version}&style=preview`}
alt={template.name}
/>
</div>
</OLCol>
</OLRow>
</div>
)
}
export default TemplatePreview

View file

@ -0,0 +1,70 @@
import { useTranslation } from 'react-i18next'
import useWaitForI18n from '../../../shared/hooks/use-wait-for-i18n'
import withErrorBoundary from '../../../infrastructure/error-boundary'
import { GenericErrorBoundaryFallback } from '@/shared/components/generic-error-boundary-fallback'
import DefaultNavbar from '@/features/ui/components/bootstrap-5/navbar/default-navbar'
import Footer from '@/features/ui/components/bootstrap-5/footer/footer'
import getMeta from '@/utils/meta'
import OLCol from '@/features/ui/components/ol/ol-col'
import OLRow from '@/features/ui/components/ol/ol-row'
import TemplateDetails from './template-details'
import TemplatePreview from './template-preview'
import { useTemplateContext, TemplateProvider } from '../context/template-context'
function TemplateRoot() {
const { isReady } = useWaitForI18n()
if (!isReady) {
return null
}
return (
<TemplateProvider>
<TemplatePageContent />
</TemplateProvider>
)
}
function TemplatePageContent() {
const { t } = useTranslation()
const navbarProps = getMeta('ol-navbar')
const footerProps = getMeta('ol-footer')
const { template } = useTemplateContext()
const { templateLinks } = getMeta('ol-ExposedSettings') || []
const categoryName = templateLinks?.find(link => link.url === template.category)?.name
return (
<>
<DefaultNavbar {...navbarProps} />
<main id="main-content" className="gallery content content-page">
<div className="container">
<OLRow className="previous-page-link-container">
<OLCol lg={6}>
<a className="previous-page-link" href={'/templates/all'}>
<i className="material-symbols material-symbols-rounded" aria-hidden="true">arrow_left_alt</i>
{t('all_templates')}
</a>
{categoryName && template.category !== '/templates/all' && (
<>
<span className="mx-2">/</span>
<a className="previous-page-link" href={template.category}>
{categoryName}
</a>
</>
)}
</OLCol>
</OLRow>
<OLRow>
<OLCol className="template-item-left-section" md={6}>
<TemplateDetails />
</OLCol>
<OLCol className="template-item-right-section" md={6}>
<TemplatePreview />
</OLCol>
</OLRow>
</div>
</main>
<Footer {...footerProps} />
</>
)
}
export default withErrorBoundary(TemplateRoot, GenericErrorBoundaryFallback)

View file

@ -0,0 +1,53 @@
import {
createContext,
FC,
useCallback,
useContext,
useState,
useMemo,
} from 'react'
import useEventListener from '@/shared/hooks/use-event-listener'
import getMeta from '@/utils/meta'
import { Template } from '../../../../../types/template'
type TemplateContextType = {
template: Template
setTemplate: (template: Template) => void
}
export const TemplateContext = createContext<TemplateContextType | undefined>(
undefined
)
type TemplateProviderProps = {
loadedTemplate: Template
}
export const TemplateProvider: FC<TemplateProviderProps> = ({ children }) => {
const loadedTemplate = useMemo(() => getMeta('ol-template'), [])
const [template, setTemplate] = useState(loadedTemplate)
const value = useMemo(
() => ({
template,
setTemplate,
}),
[template, setTemplate]
)
return (
<TemplateContext.Provider value={value}>
{children}
</TemplateContext.Provider>
)
}
export const useTemplateContext = () => {
const context = useContext(TemplateContext)
if (!context) {
throw new Error(
`useTemplateContext must be used within a TemplateProvider`
)
}
return context
}

View file

@ -0,0 +1,46 @@
import { useEffect } from 'react'
export function useFocusTrap(ref: React.RefObject<HTMLElement>, enabled = true) {
useEffect(() => {
if (!enabled || !ref.current) return
const element = ref.current
const previouslyFocusedElement = document.activeElement as HTMLElement
const focusableElements = element.querySelectorAll<HTMLElement>(
'a[href], button, textarea, input, select, [tabindex]:not([tabindex="-1"])'
)
const firstElement = focusableElements[0]
const lastElement = focusableElements[focusableElements.length - 1]
// Don't override if something inside already received focus
const isAlreadyFocusedInside = element.contains(document.activeElement)
function handleKeyDown(e: KeyboardEvent) {
if (e.key !== 'Tab') return
if (e.shiftKey) {
if (document.activeElement === firstElement) {
e.preventDefault()
lastElement?.focus()
}
} else {
if (document.activeElement === lastElement) {
e.preventDefault()
firstElement?.focus()
}
}
}
element.addEventListener('keydown', handleKeyDown)
if (!isAlreadyFocusedInside) {
firstElement?.focus()
}
return () => {
element.removeEventListener('keydown', handleKeyDown)
previouslyFocusedElement?.focus()
}
}, [ref, enabled])
}

View file

@ -0,0 +1,47 @@
import { deleteJSON, postJSON } from '@/infrastructure/fetch-json'
import { Template } from '../../../../../types/template'
export function deleteTemplate(template: Template) {
return deleteJSON(`/template/${template.id}/delete`, {
body: {
version: template.version,
},
})
}
type UpdateTemplateOptions = {
template: Template
initialTemplate: Template
descriptionEdited: boolean
}
export function updateTemplate({
editedTemplate,
template
}: UpdateTemplateOptions): Promise<Template | null> {
const updatedFields: Partial<Template> = {
name: editedTemplate.name.trim(),
license: editedTemplate.license.trim(),
category: editedTemplate.category,
language: editedTemplate.language,
authorMD: editedTemplate.authorMD.trim(),
descriptionMD: editedTemplate.descriptionMD.trim(),
}
const changedFields = Object.entries(updatedFields).reduce((diff, [key, value]) => {
if (value !== undefined && template[key as keyof Template] !== value) {
diff[key] = value
}
return diff
}, {} as Partial<Template>)
if (Object.keys(changedFields).length === 0) {
return null
}
const updated = postJSON(`/template/${editedTemplate.id}/edit`, {
body: changedFields
})
return updated
}

View file

@ -4,6 +4,7 @@ import type { NavbarSessionUser } from '@/features/ui/components/types/navbar'
import NavLinkItem from '@/features/ui/components/bootstrap-5/navbar/nav-link-item'
import { AccountMenuItems } from './account-menu-items'
import { useSendProjectListMB } from '@/features/project-list/components/project-list-events'
import getMeta from '@/utils/meta'
export default function LoggedInItems({
sessionUser,
@ -14,11 +15,18 @@ export default function LoggedInItems({
}) {
const { t } = useTranslation()
const sendProjectListMB = useSendProjectListMB()
const { templatesEnabled } = getMeta('ol-ExposedSettings')
return (
<>
<NavLinkItem href="/project" className="nav-item-projects">
{t('projects')}
</NavLinkItem>
{templatesEnabled && (
<NavLinkItem href="/templates" className="nav-item-templates">
{t('templates')}
</NavLinkItem>
)}
<NavDropdownMenu
title={t('Account')}
className="nav-item-account"

View file

@ -1,6 +1,7 @@
import { useTranslation } from 'react-i18next'
import NavLinkItem from '@/features/ui/components/bootstrap-5/navbar/nav-link-item'
import { useSendProjectListMB } from '@/features/project-list/components/project-list-events'
import getMeta from '@/utils/meta'
export default function LoggedOutItems({
showSignUpLink,
@ -9,9 +10,15 @@ export default function LoggedOutItems({
}) {
const { t } = useTranslation()
const sendMB = useSendProjectListMB()
const { templatesEnabled } = getMeta('ol-ExposedSettings')
return (
<>
{templatesEnabled && (
<NavLinkItem href="/templates" className="nav-item-templates">
{t('templates')}
</NavLinkItem>
)}
{showSignUpLink ? (
<NavLinkItem
href="/register"

View file

@ -0,0 +1,15 @@
import './../utils/meta'
import '../utils/webpack-public-path'
import './../infrastructure/error-reporter'
import '@/i18n'
import '../features/event-tracking'
import '../features/cookie-banner'
import '../features/link-helpers/slow-link'
import ReactDOM from 'react-dom/client'
import TemplateGalleryRoot from '../features/template-gallery/components/template-gallery-root'
const element = document.getElementById('template-gallery-root')
if (element) {
const root = ReactDOM.createRoot(element)
root.render(<TemplateGalleryRoot />)
}

View file

@ -0,0 +1,15 @@
import './../utils/meta'
import '../utils/webpack-public-path'
import './../infrastructure/error-reporter'
import '@/i18n'
import '../features/event-tracking'
import '../features/cookie-banner'
import '../features/link-helpers/slow-link'
import ReactDOM from 'react-dom/client'
import TemplateRoot from '../features/template/components/template-root'
const element = document.getElementById('template-root')
if (element) {
const root = ReactDOM.createRoot(element)
root.render(<TemplateRoot />)
}

View file

@ -24,6 +24,7 @@ import {
} from '../../../types/project/dashboard/notification'
import { Survey } from '../../../types/project/dashboard/survey'
import { GetProjectsResponseBody } from '../../../types/project/dashboard/api'
import { GetTemplatesResponseBody } from '../../../types/template/dashboard/api'
import { Tag } from '../../../app/src/Features/Tags/types'
import { Institution } from '../../../types/institution'
import {
@ -184,6 +185,7 @@ export interface Meta {
'ol-postCheckoutRedirect': string
'ol-postUrl': string
'ol-prefetchedProjectsBlob': GetProjectsResponseBody | undefined
'ol-prefetchedTemplatesBlob': GetTemplatesResponseBody | undefined
'ol-preventCompileOnLoad'?: boolean
'ol-primaryEmail': { email: string; confirmed: boolean }
'ol-project': any // TODO

View file

@ -9,5 +9,6 @@
i {
margin-right: var(--spacing-02);
padding-bottom: 3px;
vertical-align: middle;
}
}

View file

@ -23,6 +23,37 @@
.gallery {
padding-top: calc($header-height + var(--spacing-10)) !important;
.gallery-search-form-control {
padding-top: 0px;
padding-bottom: 0px;
}
.gallery-header-sort-btn {
font-size: var(--font-size-02);
border: 0;
text-align: left;
color: var(--neutral-90);
background-color: transparent;
padding: 0;
font-weight: bold;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
&:hover {
color: var(--neutral-90);
text-decoration: underline;
}
.material-symbols {
vertical-align: top;
font-size: var(--font-size-05);
}
}
.gallery-tagged-tags-container-spacing {
padding: 0 var(--spacing-09);
margin-bottom: var(--spacing-16);

View file

@ -19,6 +19,7 @@
"about_to_delete_cert": "Du bist dabei, das folgende Zertifikat zu löschen:",
"about_to_delete_projects": "Du bist kurz davor folgende Projekte zu löschen:",
"about_to_delete_tag": "Du bist dabei, das folgende Stichwort zu löschen (darin enthaltene Projekte werden nicht gelöscht):",
"about_to_delete_template": "Du bist dabei, die folgende Vorlage zu löschen:",
"about_to_delete_the_following_project": "Du bist dabei, das folgende Projekt zu löschen",
"about_to_delete_the_following_projects": "Du bist dabei, die folgenden Projekte zu löschen",
"about_to_delete_user_preamble": "Du bist dabei, __userName__ (__userEmail__) zu löschen. Das bedeutet:",
@ -161,6 +162,7 @@
"card_must_be_authenticated_by_3dsecure": "Deine Karte muss mit 3D Secure authentifiziert werden, bevor du fortfahren kannst",
"card_payment": "Kartenzahlung",
"careers": "Karriere",
"category": "Kategorie",
"category_arrows": "Pfeile",
"category_greek": "Griechisch",
"category_misc": "Sonstiges",
@ -297,6 +299,7 @@
"delete_figure": "Abbildung löschen",
"delete_projects": "Projekte archivieren",
"delete_tag": "Stichwort löschen",
"delete_template": "Vorlage löschen",
"delete_token": "Token löschen",
"delete_user": "Nutzer löschen",
"delete_your_account": "Lösche dein Konto",
@ -316,6 +319,7 @@
"do_not_have_acct_or_do_not_want_to_link": "Wenn du kein <b>__appName__</b>-Konto hast oder nicht mit deinem <b>__institutionName__</b>-Konto verknüpfen möchtest, klicke auf <b>„__clickText__“</b>.",
"do_not_link_accounts": "Konten nicht verknüpfen",
"do_you_want_to_change_your_primary_email_address_to": "Willst Du deine primäre E-Mail-Adresse in <b>__email__</b> ändern?",
"do_you_want_to_overwrite_it": "Möchtest du es überschreiben?",
"do_you_want_to_overwrite_them": "Willst Du sie überschreiben?",
"documentation": "Dokumentation",
"does_not_contain_or_significantly_match_your_email": "nicht mit Teilen deiner E-Mail-Adresse übereinstimmt",
@ -364,6 +368,7 @@
"edit_dictionary_remove": "Aus Wörterbuch entfernen",
"edit_figure": "Abbildung bearbeiten",
"edit_tag": "Schlagwort bearbeiten",
"edit_template": "Vorlage bearbeiten",
"editing": "Bearbeitung",
"editing_captions": "Beschriftungen bearbeiten",
"editor_and_pdf": "Editor & PDF",
@ -408,6 +413,7 @@
"expiry": "Ablaufdatum",
"export_csv": "CSV-Datei exportieren",
"export_project_to_github": "Projekt nach GitHub exportieren",
"failed_to_publish_as_a_template": "Veröffentlichung als Vorlage fehlgeschlagen.",
"failed_to_send_managed_user_invite_to_email": "Der Versand der Einladung für Verwaltete Benutzer an <0>__email__</0> hat nicht funktioniert. Bitte versuche es später noch einmal.",
"faq_how_does_free_trial_works_answer": "Während deines __len__-tägigen Probe-Abonnements erhältst du vollen Zugriff auf die Funktionen des von dir gewählten __appName__-Abonnements. Es besteht keine Verpflichtung, über die Testperiode hinaus fortzufahren. Deine Karte wird am Ende des __len__-tägigen Testzeitraums belastet, sofern du nicht vorher gekündigt hast. Um zu kündigen, gehe zu deinen Abonnementeinstellungen in deinem Konto.",
"fast": "Schnell",
@ -856,6 +862,7 @@
"no_search_results": "Keine Suchergebnisse",
"no_selection_select_file": "Derzeit ist keine Datei ausgewählt. Bitte wähle eine Datei aus dem Dateibaum aus.",
"no_symbols_found": "Keine Symbole gefunden",
"no_templates_found": "Keine Vorlagen gefunden.",
"no_thanks_cancel_now": "Nein, danke - Ich möchte nach wie vor jetzt stornieren",
"no_update_email": "Nein, E-Mail-Adresse aktualisieren",
"normal": "Normal",
@ -940,6 +947,7 @@
"please_change_primary_to_remove": "Bitte ändere deine primäre E-Mail-Adresse, um sie zu entfernen",
"please_check_your_inbox_to_confirm": "Bitte überprüfe deinen E-Mail-Postfach, um deine Zugehörigkeit zu <0>__institutionName__</0> zu bestätigen.",
"please_compile_pdf_before_download": "Bitte kompiliere dein Projekt, bevor du das PDF herunterlädst",
"please_compile_pdf_before_publish_as_template": "Bitte kompiliere dein Projekt, bevor du es als Vorlage veröffentlichst.",
"please_compile_pdf_before_word_count": "Bitte kompiliere dein Projekt, bevor du eine Wortzählung durchführst.",
"please_confirm_email": "Bitte bestätige deine E-Mail-Adresse __emailAddress__, indem du auf den Link in der Bestätigungs-E-Mail klickst",
"please_confirm_your_email_before_making_it_default": "Bitte bestätige deine E-Mail-Adresse, bevor du sie zur primären machst.",
@ -1198,6 +1206,7 @@
"template_not_found_description": "Diese Methode zum Erstellen von Projekten aus Vorlagen wurde entfernt. Besuche unsere Vorlagengalerie, um weitere Vorlagen zu finden.",
"template_title_taken_from_project_title": "Der Vorlagentitel wird automatisch aus dem Projekttitel übernommen",
"template_top_pick_by_overleaf": "Diese Vorlage wurde von Overleaf-Mitarbeitern aufgrund ihrer hohen Qualität ausgewählt",
"template_with_this_title_exists_and_owned_by_x": "Eine Vorlage mit diesem Namen existiert bereits, und der Besitzer ist: __x__.",
"templates": "Vorlagen",
"templates_admin_source_project": "Administration: Quellprojekt",
"templates_page_title": "Vorlagen - Zeitschriften, Lebensläufe, Präsentationen, Berichte und mehr",
@ -1267,6 +1276,7 @@
"try_it_for_free": "Probiere es kostenlos aus",
"try_now": "Jetzt versuchen",
"try_premium_for_free": "Teste Premium kostenlos",
"try_recompile_project": "Versuche bitte, das Projekt von Grund auf neu zu kompilieren.",
"try_recompile_project_or_troubleshoot": "Versuche bitte, das Projekt von Grund auf neu zu kompilieren. Wenn das Problem weiterhin besteht, findest Du im <0>Troubleshooting Guide</0> weitere Hilfe",
"try_to_compile_despite_errors": "Versuche, trotz Fehler zu kompilieren",
"turn_off_link_sharing": "Deaktiviere die Linkfreigabe",
@ -1279,6 +1289,7 @@
"unconfirmed": "Unbestätigt",
"unfold_line": "Zeile ausklappen",
"university": "Universität",
"unknown": "Unbekannt",
"unlimited": "Unbegrenzt",
"unlimited_collabs": "Unbeschränkt viele Mitarbeiter",
"unlimited_projects": "Unbegrenzte Projekte",
@ -1352,8 +1363,10 @@
"x_price_per_year": "__price__ pro Jahr",
"year": "Jahr",
"yes_that_is_correct": "Ja, das ist richtig",
"you": "Du",
"you_can_now_log_in_sso": "Du kannst dich jetzt über deine Institution anmelden und möglicherweise <0>kostenlose __appName__ „Professionell“-Funktionen</0> erhalten!",
"you_can_opt_in_and_out_of_the_program_at_any_time_on_this_page": "Du kannst dich jederzeit auf dieser Seite für das Beta-Programm an- und abmelden",
"you_cant_overwrite_it": "Überschreiben ist nicht möglich.",
"you_have_added_x_of_group_size_y": "Du hast <0>__addedUsersSize__</0> von <1>__groupSize__</1> verfügbaren Mitgliedern hinzugefügt",
"you_will_be_able_to_contact_us_any_time_to_share_your_feedback": "Du kannst uns jederzeit kontaktieren, um uns dein Feedback mitzuteilen",
"your_affiliation_is_confirmed": "Deine Zugehörigkeit zu <0>__institutionName__</0> ist bestätigt.",

View file

@ -26,6 +26,7 @@
"about_to_delete_cert": "You are about to delete the following certificate:",
"about_to_delete_projects": "You are about to delete the following projects:",
"about_to_delete_tag": "You are about to delete the following tag (any projects in them will not be deleted):",
"about_to_delete_template": "You are about to delete the following template:",
"about_to_delete_the_following_project": "You are about to delete the following project",
"about_to_delete_the_following_projects": "You are about to delete the following projects",
"about_to_delete_user_preamble": "Youre about to delete __userName__ (__userEmail__). Doing this will mean:",
@ -280,6 +281,7 @@
"card_payment": "Card payment",
"careers": "Careers",
"categories": "Categories",
"category": "Category",
"category_arrows": "Arrows",
"category_greek": "Greek",
"category_misc": "Misc",
@ -499,6 +501,7 @@
"delete_sso_config": "Delete SSO configuration",
"delete_table": "Delete table",
"delete_tag": "Delete Tag",
"delete_template": "Delete template",
"delete_token": "Delete token",
"delete_user": "Delete user",
"delete_your_account": "Delete your account",
@ -615,6 +618,7 @@
"edit_figure": "Edit figure",
"edit_sso_configuration": "Edit SSO Configuration",
"edit_tag": "Edit Tag",
"edit_template": "Edit template",
"edit_your_custom_dictionary": "Edit your custom dictionary",
"editing": "Editing",
"editing_and_collaboration": "Editing and collaboration",
@ -711,6 +715,7 @@
"explore_all_plans": "Explore all plans",
"export_csv": "Export CSV",
"export_project_to_github": "Export Project to GitHub",
"failed_to_publish_as_a_template": "Failed to publish as a template.",
"failed_to_send_group_invite_to_email": "Failed to send Group invite to <0>__email__</0>. Please try again later.",
"failed_to_send_managed_user_invite_to_email": "Failed to send Managed User invite to <0>__email__</0>. Please try again later.",
"failed_to_send_sso_link_invite_to_email": "Failed to send SSO invite reminder to <0>__email__</0>. Please try again later.",
@ -1444,6 +1449,7 @@
"no_search_results": "No Search Results",
"no_selection_select_file": "Currently, no file is selected. Please select a file from the file tree.",
"no_symbols_found": "No symbols found",
"no_templates_found": "No templates found.",
"no_thanks_cancel_now": "No thanks, I still want to cancel",
"no_update_email": "No, update email",
"non_deletable_entity": "The specified entity may not be deleted",
@ -1532,7 +1538,7 @@
"overleaf_labs": "Overleaf Labs",
"overleaf_logo": "Overleaf logo",
"overleaf_plans_and_pricing": "overleaf plans and pricing",
"overleaf_template_gallery": "overleaf template gallery",
"overleaf_template_gallery": "overleaf ce template gallery",
"overleafs_functionality_meets_my_needs": "Overleafs functionality meets my needs.",
"overview": "Overview",
"overwrite": "Overwrite",
@ -1624,6 +1630,7 @@
"please_change_primary_to_remove": "Please change your primary email in order to remove",
"please_check_your_inbox_to_confirm": "Please check your email inbox to confirm your <0>__institutionName__</0> affiliation.",
"please_compile_pdf_before_download": "Please compile your project before downloading the PDF",
"please_compile_pdf_before_publish_as_template": "Please compile your project before publishing it as a template",
"please_compile_pdf_before_word_count": "Please compile your project before performing a word count",
"please_confirm_email": "Please confirm your email __emailAddress__ by clicking on the link in the confirmation email ",
"please_confirm_primary_email_or_edit": "Please confirm your primary email address __emailAddress__. To edit it, go to <0>Account settings</0>.",
@ -1666,6 +1673,7 @@
"presentation": "Presentation",
"presentation_mode": "Presentation mode",
"press_and_awards": "Press & awards",
"prev": "Prev",
"previous_page": "Previous page",
"price": "Price",
"primarily_work_study_question": "Where do you primarily work or study?",
@ -1728,7 +1736,7 @@
"pt": "Portuguese",
"public": "Public",
"publish": "Publish",
"publish_as_template": "Manage Template",
"publish_as_template": "Publish as a Template",
"publisher_account": "Publisher Account",
"publishing": "Publishing",
"pull_github_changes_into_sharelatex": "Pull GitHub changes into __appName__",
@ -2215,6 +2223,7 @@
"template_not_found_description": "This way of creating projects from templates has been removed. Please visit our template gallery to find more templates.",
"template_title_taken_from_project_title": "The template title will be taken automatically from the project title",
"template_top_pick_by_overleaf": "This template was hand-picked by Overleaf staff for its high quality",
"template_with_this_title_exists_and_owned_by_x": "A template with this title already exists and is owned by __x__.",
"templates": "Templates",
"templates_admin_source_project": "Admin: Source Project",
"templates_lowercase": "templates",
@ -2418,6 +2427,7 @@
"try_now": "Try Now",
"try_papers_for_free": "Try Papers for free",
"try_premium_for_free": "Try Premium for free",
"try_recompile_project": "Please try recompiling the project from scratch.",
"try_recompile_project_or_troubleshoot": "Please try recompiling the project from scratch, and if that doesnt help, follow our <0>troubleshooting guide</0>.",
"try_relinking_provider": "It looks like you need to re-link your __provider__ account.",
"try_the_new_editor": "Try the new editor",
@ -2662,6 +2672,7 @@
"you_can_still_use_your_premium_features": "You can still use your premium features until the pause becomes active.",
"you_cant_add_or_change_password_due_to_sso": "You cant add or change your password because your group or organization uses <0>single sign-on (SSO)</0>.",
"you_cant_join_this_group_subscription": "You cant join this group subscription",
"you_cant_overwrite_it": "You cant overwrite it.",
"you_cant_reset_password_due_to_sso": "You cant reset your password because your group or organization uses SSO. <0>Log in with SSO</0>.",
"you_dont_have_any_add_ons_on_your_account": "You dont have any add-ons on your account.",
"you_dont_have_any_repositories": "You dont have any repositories",

View file

@ -20,6 +20,7 @@
"about_to_archive_projects": "Вы собираетесь архивировать следующие проекты:",
"about_to_delete_cert": "Вы собираетесь удалить следующий сертификат:",
"about_to_delete_projects": "Следующие проекты будут удалены:",
"about_to_delete_template": "Следующий шаблон будет удален:",
"about_to_delete_the_following_project": "Вы собираетесь удалить следующий проект:",
"about_to_delete_the_following_projects": "Вы собираетесь удалить следующие проекты:",
"about_to_leave_project": "Вы собираетесь покинуть этот проект:",
@ -69,6 +70,7 @@
"cancel_your_subscription": "Остановить подписку",
"cant_find_email": "Извините, данный адрес не зарегистрирован.",
"cant_find_page": "К сожалению, страница не найдена",
"category": "Категория",
"change": "Изменить",
"change_password": "Изменение пароля",
"change_plan": "Сменить тарифный план",
@ -127,9 +129,11 @@
"delete_account_warning_message_3": "Вы собираетесь <strong>удалить все данные Вашего аккаунта</strong>, включая все Ваши проекты и настройки. Пожалуйста, введите адрес электронной почты и пароль Вашего аккаунта в форму внизу для продолжения.",
"delete_and_leave_projects": "Удалить или оставить проекты",
"delete_projects": "Удалить проекты",
"delete_template": "Удалить шаблон",
"delete_your_account": "Удалить аккаунт",
"deleting": "Удаление",
"disconnected": "Разъединен",
"do_you_want_to_overwrite_it": "Перезаписать?",
"documentation": "Документация",
"doesnt_match": "Не совпадает",
"done": "Готово",
@ -138,6 +142,7 @@
"download_zip_file": "Скачать архив (.zip)",
"dropbox_sync": "Синхронизация с Dropbox",
"dropbox_sync_description": "Синхронизируйте Ваши __appName__ проекты с Вашим Dropbox. Изменения в __appName__ автоматически сохраняются в Вашем Dropbox, и наоборот.",
"edit_template": "Редактировать шаблон",
"editing": "Редактор",
"email": "Адрес электронной почты",
"email_already_registered": "Этот адрес уже зарегистрирован.",
@ -149,6 +154,7 @@
"example_project": "Использовать пример",
"expiry": "Срок действия",
"export_project_to_github": "Экспорт проекта на GitHub",
"failed_to_publish_as_a_template": "Не удалось создать шаблон.",
"fast": "быстрый",
"features": "Возможности",
"february": "Февраль",
@ -272,6 +278,7 @@
"no_projects": "Нет проектов",
"no_search_results": "Ничего не найдено",
"no_thanks_cancel_now": "Нет, спасибо - я хочу удалить сейчас",
"no_templates_found": "Шаблоны не найдены.",
"normal": "нормальный",
"not_now": "Не сейчас",
"notification_project_invite": "<b>__userName__</b> приглашает Вас принять участие в проекте __projectName__,<a class=\"ben btn-xs btn-info\" href=\"/project/__projectId__/invite/token/__token__\">Присоединиться</a>",
@ -300,7 +307,8 @@
"plans_amper_pricing": "Тарифы",
"plans_and_pricing": "Тарифные планы",
"please_compile_pdf_before_download": "Пожалуйста, скомпилируйте проект перед загрузкой PDF",
"please_compile_pdf_before_word_count": "Пожалуйста, скомпилируйте проект, прежде чем подсчитывать количество слов!",
"please_compile_pdf_before_publish_as_template": "Пожалуйста, скомпилируйте проект, прежде чем создавать из него шаблон",
"please_compile_pdf_before_word_count": "Пожалуйста, скомпилируйте проект, прежде чем подсчитывать количество слов.",
"please_enter_email": "Пожалуйста, введите адрес электронной почты",
"please_refresh": "Пожалуйста, обновите страницу для продолжения",
"please_set_a_password": "Пожалуйста, укажите пароль",
@ -409,6 +417,7 @@
"syntax_validation": "Проверка кода",
"take_me_home": "Вернуться в начало",
"template_description": "Описание шаблона",
"template_with_this_title_exists_and_owned_by_x": "Уже есть шаблон с таким названием, его владелец __x__.",
"templates": "Шаблоны",
"terminated": "Компиляция отменена",
"terms": "Условия",
@ -433,8 +442,10 @@
"total_words": "Количество слов",
"tr": "Турецкий",
"try_now": "Попробуйте",
"try_recompile_project": "Попробуйте скомпилировать проект заново.",
"uk": "Украинский",
"university": "Университет",
"unknown": "Неизвестный",
"unlimited_collabs": "Неограниченно число соавторов",
"unlimited_projects": "Неограниченное число проектов",
"unlink": "Отсоединить",
@ -462,6 +473,8 @@
"welcome_to_sl": "Добро пожаловать в __appName__",
"word_count": "Количество слов",
"year": "год",
"you": "Вы",
"you_cant_overwrite_it": "Перезаписать нельзя.",
"you_have_added_x_of_group_size_y": "Вы добавили <0>__addedUsersSize__</0> из <1>__groupSize__</1> доступных участников",
"your_plan": "Ваш тариф",
"your_projects": "Созданные мной",

View file

@ -0,0 +1,22 @@
import sanitizeHtml from 'sanitize-html'
const sanitizeOptions = {
linksOnly: {
allowedTags: ["a"],
allowedAttributes: { "a": ["href"] }
},
reachText: {
allowedTags: ["h1", "h2", "h3", "h4", "h5", "h6",
"p", "blockquote", "ul", "ol", "li",
"em", "strong", "s", "code", "pre", "hr", "a"],
allowedAttributes: { "a": ["href"] }
},
plainText: {
allowedTags: [],
allowedAttributes: {},
},
}
export function cleanHtml(text, sanitizeType) {
return sanitizeHtml(text, sanitizeOptions[sanitizeType])
}

View file

@ -0,0 +1,13 @@
import OError from '@overleaf/o-error'
export class TemplateNameConflictError extends OError {
constructor(ownerId, message = 'template_with_this_title_exists_and_owned_by_x') {
super(message, { ownerId })
}
}
export class RecompileRequiredError extends OError {
constructor(message = 'Recompile required') {
super(message, { status: 400 })
}
}

View file

@ -0,0 +1,162 @@
import logger from '@overleaf/logger'
import ErrorController from '../../../../app/src/Features/Errors/ErrorController.js'
import Errors from '../../../../app/src/Features/Errors/Errors.js'
import SessionManager from '../../../../app/src/Features/Authentication/SessionManager.js'
import TemplateGalleryManager from'./TemplateGalleryManager.mjs'
import { getUserName } from './TemplateGalleryHelper.mjs'
import { TemplateNameConflictError, RecompileRequiredError } from './TemplateErrors.mjs'
import Settings from '@overleaf/settings'
async function createTemplateFromProject(req, res, next) {
const t = req.i18n.translate
try {
const userId = SessionManager.getLoggedInUserId(req.session)
const result = await TemplateGalleryManager.createTemplateFromProject({
projectId: req.params.Project_id,
userId,
templateSource: req.body,
})
if (result.conflict) {
const ownerName = (result.templateOwnerName === 'you') ? t('you') : result.templateOwnerName
const message = `${t('template_with_this_title_exists_and_owned_by_x', { x: ownerName })} `
+ t(result.canOverride ? 'do_you_want_to_overwrite_it' : 'you_cant_overwrite_it')
return res.status(409).json({ canOverride: result.canOverride, message })
}
return res.status(200).json({ template_id: result.templateId })
} catch (error) {
if (error instanceof Errors.InvalidNameError) {
return res.status(error.info?.status || 400).json({ message: error.message })
}
const mainMessage = t('failed_to_publish_as_a_template')
if (error instanceof RecompileRequiredError) {
return res.status(error.info?.status || 400).json({
message: `${mainMessage} ${t('try_recompile_project')}`
})
}
return res.status(400).json({ message: mainMessage })
}
}
async function editTemplate(req, res, next) {
const t = req.i18n.translate
try {
const result = await TemplateGalleryManager.editTemplate({
templateId: req.params.template_id,
updates: req.body
})
res.status(200).json(result)
} catch (error) {
if (error instanceof TemplateNameConflictError) {
const ownerId = error.info?.ownerId
const userId = SessionManager.getLoggedInUserId(req.session)
const ownerName = (ownerId === userId)
? t('you')
: await getUserName(ownerId) || t('unknown')
const message = t(error.message, { x: ownerName })
return res.status(409).json({ message })
}
if (error instanceof Errors.InvalidNameError) {
return res.status(error.info?.status || 400).json({ message: error.message })
}
logger.error({ error }, 'Failure saving template')
return res.status(500).json({ message: t('something_went_wrong_server') })
}
}
async function deleteTemplate(req, res, next) {
const t = req.i18n.translate
try {
await TemplateGalleryManager.deleteTemplate({
templateId: req.params.template_id,
version: req.body.version
})
res.sendStatus(200)
} catch (error) {
logger.error({ error }, 'Failure deleting template')
return res.status(500).json({ message: t('something_went_wrong_server') })
}
}
async function getTemplatePreview(req, res, next) {
try {
const templateId = req.params.template_id
const { version, style } = req.query
const { stream, contentType } = await TemplateGalleryManager.fetchTemplatePreview({ templateId, version, style })
res.setHeader('Content-Type', contentType)
stream.pipe(res)
} catch (error) {
if (error.info?.status == 404) {
return ErrorController.notFound(req, res, next)
}
return res.status(error.info?.status || 400).json(error.info)
}
}
async function templatesCategoryPage(req, res, next) {
const t = req.i18n.translate
try {
let { category } = req.params
const result = await TemplateGalleryManager.getTemplatesPageData(category)
let title
if (result.categoryName) {
title = t('latex_templates') + ' — ' + result.categoryName
} else {
category = null
title = t('templates_page_title')
}
res.render('template_gallery/template-gallery', {
title,
category,
})
} catch (error) {
next(error)
}
}
async function templateDetailsPage(req, res, next) {
const t = req.i18n.translate
try {
const template = await TemplateGalleryManager.getTemplate('_id', req.params.template_id)
res.render('template_gallery/template', {
title: `${t('template')}: ${template.name}`,
template: JSON.stringify(template),
languages: Settings.languages,
})
} catch (error) {
return ErrorController.notFound(req, res, next)
}
}
async function getTemplateJSON(req, res, next) {
try {
const { key, val } = req.query
const template = await TemplateGalleryManager.getTemplate(key, val)
res.json(template)
} catch (error) {
next(error)
}
}
async function getCategoryTemplatesJSON(req, res, next) {
try {
const result = await TemplateGalleryManager.getCategoryTemplates(req.query)
res.json(result)
} catch (error) {
next(error)
}
}
export default {
createTemplateFromProject,
editTemplate,
deleteTemplate,
getTemplatePreview,
templatesCategoryPage,
templateDetailsPage,
getTemplateJSON,
getCategoryTemplatesJSON,
}

View file

@ -0,0 +1,238 @@
import { marked } from 'marked'
import request from 'request'
import logger from '@overleaf/logger'
import settings from '@overleaf/settings'
import Errors from '../../../../app/src/Features/Errors/Errors.js'
import ProjectGetter from '../../../../app/src/Features/Project/ProjectGetter.js'
import ProjectLocator from '../../../../app/src/Features/Project/ProjectLocator.js'
import ProjectZipStreamManager from '../../../../app/src/Features/Downloads/ProjectZipStreamManager.mjs'
import DocumentUpdaterHandler from '../../../../app/src/Features/DocumentUpdater/DocumentUpdaterHandler.js'
import ClsiManager from '../../../../app/src/Features/Compile/ClsiManager.js'
import CompileManager from '../../../../app/src/Features/Compile/CompileManager.js'
import UserGetter from '../../../../app/src/Features/User/UserGetter.js'
import { fetchStreamWithResponse } from '@overleaf/fetch-utils'
import { Template } from './models/Template.js'
import { RecompileRequiredError } from './TemplateErrors.mjs'
import { cleanHtml } from './CleanHtml.mjs'
const TIMEOUT = 30000
const MAX_PROJECT_NAME_LENGTH = 150
const MAX_FORM_INPUT_LENGTH = 512
const MAX_TEMPLATE_DESCRIPTION_LENGTH = 4096
// Configure marked for CommonMark-only parsing
marked.setOptions({
gfm: false,
breaks: false,
headerIds: false,
mangle: false,
})
marked.use({
renderer: {
html: () => '' // strips any HTML tags
}
})
function _createZipStreamForProjectAsync(projectId) {
return new Promise((resolve, reject) => {
ProjectZipStreamManager.createZipStreamForProject(projectId, (err, archive) => {
if (err) {
return reject(err)
}
archive.on('error', (err) => reject(err))
resolve(archive)
})
})
}
export function validateTemplateInput({ name, descriptionMD, authorMD, license }) {
if (name?.length > MAX_PROJECT_NAME_LENGTH) {
throw new Errors.InvalidNameError(`Template title exceeds the maximum length of ${MAX_PROJECT_NAME_LENGTH} characters.`)
}
if (descriptionMD?.length > MAX_TEMPLATE_DESCRIPTION_LENGTH) {
throw new Errors.InvalidNameError(`Template description exceeds the maximum length of ${MAX_TEMPLATE_DESCRIPTION_LENGTH} characters.`)
}
if (authorMD?.length > MAX_FORM_INPUT_LENGTH) {
throw new Errors.InvalidNameError('Author name is too long.')
}
if (license?.length > MAX_FORM_INPUT_LENGTH) {
throw new Errors.InvalidNameError('License name is too long.')
}
}
export async function canUserOverrideTemplate(template, userId) {
let templateOwnerId = template.owner
let templateOwnerName = 'you'
let userIsOwner = true
let userIsAdmin
if (templateOwnerId != userId) {
userIsOwner = false
try {
userIsAdmin = (await UserGetter.promises.getUser(userId, { isAdmin: 1 })).isAdmin
} catch {
logger.error({ error, userId }, 'Logged in user does not exist, strange...')
userIsAdmin = false
}
templateOwnerName = await getUserName(templateOwnerId) || 'unknown'
}
const canOverride = userIsOwner || userIsAdmin
return { canOverride, templateOwnerName }
}
export async function getUserName(userId) {
try {
const user = await UserGetter.promises.getUser(userId, {
first_name: 1,
last_name: 1,
})
return ((user?.first_name || "") + " " + (user?.last_name || "")).trim()
} catch (error) {
return 'unknown'
}
}
export async function generateTemplateData(projectId, {
descriptionMD,
authorMD,
category,
license,
name,
}) {
try {
await DocumentUpdaterHandler.promises.flushProjectToMongo(projectId)
const project = await ProjectGetter.promises.getProject(projectId, {
imageName: true,
compiler: true,
spellCheckLanguage: true,
rootDoc_id: true,
rootFolder: true,
})
const { path } = await ProjectLocator.promises.findRootDoc({ project })
const mainFile = path.fileSystem.replace(/^\/+/, '')
const template = {
name,
category,
authorMD,
descriptionMD,
license,
mainFile,
compiler: project.compiler,
imageName: project.imageName,
language: project.spellCheckLanguage,
lastUpdated: new Date(),
}
await renderTemplateHtmlFields(template)
return template
} catch (error) {
logger.error({ error, projectId }, 'Failed to retrieve project data')
throw error
}
}
export async function uploadTemplateAssets(projectId, userId, build, template) {
let zipStream, pdfStream
try {
[zipStream, pdfStream] = await Promise.all([
_createZipStreamForProjectAsync(projectId),
CompileManager.promises
.getProjectCompileLimits(projectId)
.then((limits) =>
ClsiManager.promises.getOutputFileStream(projectId, userId, limits, undefined, build, 'output.pdf')
)
])
} catch (error) {
logger.error({ error, projectId }, 'No output.pdf?')
throw new RecompileRequiredError()
}
try {
const templateUrl = `${settings.apis.filestore.url}/template/${template._id}/v/${template.version}`
const zipUrl = `${templateUrl}/zip`
const pdfUrl = `${templateUrl}/pdf`
const [zipReq, pdfReq] = await Promise.all([
fetchStreamWithResponse(zipUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/octet-stream',
},
body: zipStream,
signal: AbortSignal.timeout(TIMEOUT),
}),
fetchStreamWithResponse(pdfUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/pdf',
},
body: pdfStream,
signal: AbortSignal.timeout(TIMEOUT),
}),
])
const uploadErrors = []
if (zipReq?.response.status !== 200) {
uploadErrors.push({ file: 'zip', uri: zipUrl, statusCode: zipReq.response.status })
}
if (pdfReq?.response.status !== 200) {
uploadErrors.push({ file: 'pdf', uri: pdfUrl, statusCode: pdfReq.response.status })
}
if (uploadErrors.length > 0) {
logger.error({ uploadErrors }, 'Template upload failed')
throw new RecompileRequiredError()
}
} catch (error) {
if (error instanceof RecompileRequiredError) throw error
throw error
}
}
export async function deleteTemplateAssets(templateId, version, deleteFromDb) {
if (deleteFromDb) {
try {
await Template.deleteOne({ _id: templateId }).exec()
} catch (error) {
logger.error({ err, templateId }, 'Failed to delete template from MongoDB')
throw error
}
}
// kick off file deletions, but don't wait
const baseUrl = settings.apis.filestore.url
const urlTemplate = `${baseUrl}/template/${templateId}/v/${version}/zip`
const urlImages = `${baseUrl}/template/${templateId}/v/${version}/pdf`
const optsTemplate = {
method: 'DELETE',
uri: urlTemplate,
timeout: TIMEOUT,
}
const optsImages = {
method: 'DELETE',
uri: urlImages,
timeout: TIMEOUT,
}
request(optsTemplate, (err, response) => {
if (err)
logger.warn({ err, templateId }, 'Failed to delete template zip from filestore')
})
request(optsImages, (err, response) => {
if (err)
logger.warn({ err, templateId }, 'Failed to delete images from filestore')
})
}
export function renderTemplateHtmlFields(updates) {
if (updates.descriptionMD !== undefined) {
const descriptionRawHTML = marked.parse(updates.descriptionMD)
updates.description = cleanHtml(descriptionRawHTML, "reachText")
}
if (updates.authorMD !== undefined) {
const authorRawHTML = marked.parse(updates.authorMD)
updates.author = cleanHtml(authorRawHTML, "linksOnly")
}
}

View file

@ -0,0 +1,214 @@
import _ from 'lodash'
import logger from '@overleaf/logger'
import { Readable } from 'stream'
import settings from '@overleaf/settings'
import { OError } from '../../../../app/src/Features/Errors/Errors.js'
import { Template } from './models/Template.js'
import {
validateTemplateInput,
renderTemplateHtmlFields,
uploadTemplateAssets,
deleteTemplateAssets,
canUserOverrideTemplate,
generateTemplateData
} from './TemplateGalleryHelper.mjs'
import { cleanHtml } from './CleanHtml.mjs'
import { TemplateNameConflictError } from './TemplateErrors.mjs'
import { fetchStreamWithResponse } from '@overleaf/fetch-utils'
const TIMEOUT = 30000
async function editTemplate({ templateId, updates }) {
validateTemplateInput(updates)
const template = await Template.findById(templateId)
if (!template) {
throw new OError('Current template not found, strange...', { status: 500, templateId })
}
if (updates.name) {
const conflictingTemplate = await Template.findOne(
{ name: updates.name, _id: { $ne: templateId } },
{ owner: true }
).exec()
if (conflictingTemplate) {
throw new TemplateNameConflictError(String(conflictingTemplate.owner))
}
}
await renderTemplateHtmlFields(updates)
updates.lastUpdated = new Date()
Object.assign(template, updates)
await template.save()
return updates
}
async function deleteTemplate({ templateId, version }) {
await deleteTemplateAssets(templateId, version, true)
}
async function createTemplateFromProject({ projectId, userId, templateSource }) {
validateTemplateInput(templateSource)
let template = await Template.findOne({ name: templateSource.name }).exec()
if (template && !templateSource.override) {
const { canOverride, templateOwnerName } = await canUserOverrideTemplate(template, userId)
return {
conflict: true,
canOverride,
templateOwnerName
}
}
const templateData = await generateTemplateData(projectId, templateSource)
let previousVersionExists
if (!template) {
template = new Template(templateData)
template.owner = userId
previousVersionExists = false
} else {
Object.assign(template, templateData, {
version: template.version + 1,
})
previousVersionExists = true
}
await uploadTemplateAssets(projectId, userId, templateSource.build, template)
await template.save()
if (previousVersionExists) {
deleteTemplateAssets(template._id, template.version - 1, false)
}
return {
conflict: false,
templateId: template._id,
}
}
async function fetchTemplatePreview({ templateId, version, style }) {
if (!templateId || !version) {
throw new OError('Template ID and version are required', { status: 404 })
}
const styleParam = style ? `style=${style}` : ''
const isImage = (style === 'preview' || style === 'thumbnail')
if (style && !isImage) {
throw new OError('Wrong style', { status: 404, style })
}
const pdfUrl = `${settings.apis.filestore.url}/template/${templateId}/v/${version}/pdf?${styleParam}`
const { response } = await fetchStreamWithResponse(pdfUrl, {
method: 'GET',
signal: AbortSignal.timeout(TIMEOUT),
})
if (!response.ok) {
throw new OError(`Failed to fetch file: ${response.statusText}`, { status: 400, templateId, version, styleParam })
}
return {
stream: Readable.from(response.body),
contentType: isImage ? 'application/octet-stream' : 'application/pdf'
}
}
async function getTemplatesPageData(category) {
const categoryName = settings.templateLinks.find(item => item.url.endsWith(`/${category}`))?.name
const templateLinks = categoryName ? undefined : settings.templateLinks.filter(link => link.url !== '/templates/all')
return {
categoryName,
templateLinks
}
}
async function getTemplate(key, val) {
if (!key || !val) {
logger.warn('No key or val provided to getTemplate')
return null
}
const query = { [key]: val }
const template = await Template.findOne(query).exec()
if (!template) return null
return _formatTemplateForPage(template)
}
async function getCategoryTemplates(reqQuery) {
const {
category,
by = 'lastUpdated',
order = 'desc',
} = reqQuery || {}
const query = (category === 'all') ? {} : { category : '/templates/' + category }
const projection = { _id : 1, version : 1, name : 1, author : 1, description : 1, lastUpdated : 1 }
const allTemplates = await Template.find(query, projection).exec()
const formattedTemplates = allTemplates.map(_formatTemplateForList)
const sortedTemplates = _sortTemplates(formattedTemplates, { by, order })
return {
totalSize: sortedTemplates.length,
templates: sortedTemplates,
}
}
function _sortTemplates(templates, sort) {
if (
(sort.by && !['lastUpdated', 'name'].includes(sort.by)) ||
(sort.order && !['asc', 'desc'].includes(sort.order))
) {
throw new OError('Invalid sorting criteria', { status: 400, sort })
}
const sortedTemplates = _.orderBy(
templates,
[sort.by || 'lastUpdated'],
[sort.order || 'desc']
)
return sortedTemplates
}
function _formatTemplateForList(template) {
return {
id: String(template._id),
version: String(template.version),
name: template.name,
author: cleanHtml(template.author, "plainText"),
description: cleanHtml(template.description, "plainText"),
lastUpdated: template.lastUpdated,
}
}
function _formatTemplateForPage(template) {
return {
id: template._id.toString(),
version: template.version.toString(),
category: template.category,
name: template.name,
author: cleanHtml(template.author, "linksOnly"),
authorMD: template.authorMD,
description: cleanHtml(template.description, "reachText"),
descriptionMD: template.descriptionMD,
license: template.license,
lastUpdated: template.lastUpdated,
owner: template.owner,
mainFile: template.mainFile,
compiler: template.compiler,
imageName: template.imageName,
language: template.language,
}
}
export default {
createTemplateFromProject,
editTemplate,
deleteTemplate,
getTemplate,
getCategoryTemplates,
fetchTemplatePreview,
getTemplatesPageData,
}

View file

@ -0,0 +1,82 @@
import logger from '@overleaf/logger'
import AuthenticationController from '../../../../app/src/Features/Authentication/AuthenticationController.js'
import RateLimiterMiddleware from '../../../../app/src/Features/Security/RateLimiterMiddleware.js'
import { RateLimiter } from '../../../../app/src/infrastructure/RateLimiter.js'
import TemplateGalleryController from './TemplateGalleryController.mjs'
const rateLimiterNewTemplate = new RateLimiter('create-template-from-project', {
points: 20,
duration: 60,
})
const rateLimiter = new RateLimiter('template-gallery', {
points: 60,
duration: 60,
})
const rateLimiterThumbnails = new RateLimiter('template-gallery-thumbnails', {
points: 240,
duration: 60,
})
export default {
rateLimiter,
apply(webRouter) {
logger.debug({}, 'Init templates router')
webRouter.post(
'/template/new/:Project_id',
AuthenticationController.requireLogin(),
RateLimiterMiddleware.rateLimit(rateLimiterNewTemplate),
TemplateGalleryController.createTemplateFromProject
)
webRouter.get(
'/template/:template_id',
RateLimiterMiddleware.rateLimit(rateLimiter),
TemplateGalleryController.templateDetailsPage
)
webRouter.post(
'/template/:template_id/edit',
AuthenticationController.requireLogin(),
RateLimiterMiddleware.rateLimit(rateLimiter),
TemplateGalleryController.editTemplate
)
webRouter.delete(
'/template/:template_id/delete',
AuthenticationController.requireLogin(),
RateLimiterMiddleware.rateLimit(rateLimiter),
TemplateGalleryController.deleteTemplate
)
webRouter.get(
'/templates/:category?',
RateLimiterMiddleware.rateLimit(rateLimiter),
TemplateGalleryController.templatesCategoryPage
)
webRouter.get(
'/api/template',
RateLimiterMiddleware.rateLimit(rateLimiter),
TemplateGalleryController.getTemplateJSON
)
webRouter.get(
'/api/templates',
RateLimiterMiddleware.rateLimit(rateLimiter),
TemplateGalleryController.getCategoryTemplatesJSON
)
webRouter.get(
'/template/:template_id/preview',
(req, res, next) => {
req.query.style === 'thumbnail'
? RateLimiterMiddleware.rateLimit(rateLimiterThumbnails)(req, res, next)
: RateLimiterMiddleware.rateLimit(rateLimiter)(req, res, next)
},
TemplateGalleryController.getTemplatePreview
)
},
}

View file

@ -0,0 +1,33 @@
const mongoose = require('../../../../../app/src/infrastructure/Mongoose')
const { Schema } = mongoose
const { ObjectId } = Schema
const TemplateSchema = new Schema(
{
name: { type: String, required: true },
category: { type: String, required: true },
description: { type: String },
descriptionMD: { type: String },
author: { type: String },
authorMD: { type: String },
license: { type: String, required: true },
mainFile: { type: String, required: true },
compiler: { type: String, required: true },
imageName: { type: String },
language: { type: String },
version: { type: Number, default: 1, required: true },
owner: { type: ObjectId, ref: 'User' },
lastUpdated: {
type: Date,
default() {
return new Date()
},
required: true
},
},
{ minimize: false }
)
exports.Template = mongoose.model('Template', TemplateSchema)
exports.TemplateSchema = TemplateSchema

View file

@ -0,0 +1,42 @@
import Settings from '@overleaf/settings'
import TemplateGalleryRouter from './app/src/TemplateGalleryRouter.mjs'
function boolFromEnv(env) {
if (env === undefined || env === null) return undefined
if (typeof env === "string") {
const envLower = env.toLowerCase()
if (envLower === 'true') return true
if (envLower === 'false') return false
}
throw new Error("Invalid value for boolean environment variable")
}
let TemplateGalleryModule = {}
if (process.env.OVERLEAF_TEMPLATE_GALLERY === 'true') {
TemplateGalleryModule = {
router: TemplateGalleryRouter,
}
Settings.templates = {
nonAdminCanManage: boolFromEnv(process.env.OVERLEAF_NON_ADMIN_CAN_PUBLISH_TEMPLATES)
}
const templateKeys = process.env.OVERLEAF_TEMPLATE_CATEGORIES
? process.env.OVERLEAF_TEMPLATE_CATEGORIES + ' all'
: 'all'
Settings.templateLinks = templateKeys.split(/\s+/).map(key => {
const envKeyBase = key.toUpperCase().replace(/-/g, "_")
const name = process.env[`TEMPLATE_${envKeyBase}_NAME`] || ( key === 'all' ? 'All templates' : key)
const description = process.env[`TEMPLATE_${envKeyBase}_DESCRIPTION`] || ''
return {
name,
url: `/templates/${key}`,
description
}
})
}
export default TemplateGalleryModule

View file

@ -0,0 +1,16 @@
export type Template = {
id: string
version: number
name: string
lastUpdated: Date
author: string
authorMD: string
description: string
descriptionMD: string
license: string
category: string
compiler?: string
language?: string
owner: string
}