Skip to content

Replace define:vars with data attributes in redirect scripts #164

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
masuP9 merged 4 commits into from
Mar 16, 2026
Merged

Replace define:vars with data attributes in redirect scripts #164

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a92ed4f
fix: replace define:vars with data attributes in redirect pages
claude Mar 16, 2026
a3b75a1
Merge branch 'main' into claude/fix-alert-redirect-6Yg8J
masuP9 Mar 16, 2026
7ffd366
refactor: replace remaining define:vars with data attributes
claude Mar 16, 2026
acb7541
fix: add is:inline to scripts after define:vars removal
claude Mar 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/components/ui/AiGuideActions.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ const llmMdUrl = withBase(
class:list={['ai-guide-actions relative inline-flex', className]}
data-pattern={pattern}
data-llm-url={llmMdUrl}
data-copied-text={t('ai.copied')}
data-download-file-name={mdFileName}
>
<div
class="button-group inline-flex items-center rounded-md border border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950"
Expand Down Expand Up @@ -141,10 +143,12 @@ const llmMdUrl = withBase(
}
</style>

<script define:vars={{ copiedText: t('ai.copied'), downloadFileName: mdFileName }}>
<script is:inline>
function initAiGuideActions() {
document.querySelectorAll('.ai-guide-actions').forEach((container) => {
const llmUrl = container.dataset.llmUrl;
const copiedText = container.dataset.copiedText;
const downloadFileName = container.dataset.downloadFileName;
const feedback = container.querySelector('.copied-feedback');
const dropdown = container.querySelector('details.dropdown');

Expand Down
4 changes: 3 additions & 1 deletion src/components/ui/PracticeDownload.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ const mdFileName = locale === 'ja' ? `${practice}.ja.md` : `${practice}.md`;
class:list={['practice-download relative inline-flex', className]}
data-practice={practice}
data-filename={mdFileName}
data-copied-text={t('ai.copied')}
>
<div
class="button-group inline-flex items-center rounded-md border border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950"
Expand Down Expand Up @@ -129,10 +130,11 @@ const mdFileName = locale === 'ja' ? `${practice}.ja.md` : `${practice}.md`;
}
</style>

<script define:vars={{ copiedText: t('ai.copied') }}>
<script is:inline>
function initPracticeDownload() {
document.querySelectorAll('.practice-download').forEach((container) => {
const filename = container.dataset.filename;
const copiedText = container.dataset.copiedText;
const template = container.querySelector('template.md-content');
const contentScript = template?.content.querySelector('script[type="text/markdown"]');
const content = contentScript?.textContent || '';
Expand Down
13 changes: 12 additions & 1 deletion src/pages/ja/patterns/[pattern]/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,18 @@ const defaultRedirectUrl = withBase(
<head>
<meta charset="UTF-8" />
<title>リダイレクト中...</title>
<script is:inline define:vars={{ pattern, defaultFramework, validFrameworks, basePath }}>
<script
is:inline
data-pattern={pattern}
data-default-framework={defaultFramework}
data-valid-frameworks={JSON.stringify(validFrameworks)}
data-base-path={basePath}
>
const el = document.currentScript;
const pattern = el.dataset.pattern;
const defaultFramework = el.dataset.defaultFramework;
const validFrameworks = JSON.parse(el.dataset.validFrameworks);
const basePath = el.dataset.basePath;
const framework = localStorage.getItem('apg-selected-framework') || defaultFramework;
const selectedFramework = validFrameworks.includes(framework) ? framework : defaultFramework;
window.location.replace(`${basePath}/ja/patterns/${pattern}/${selectedFramework}/`);
Expand Down
13 changes: 12 additions & 1 deletion src/pages/patterns/[pattern]/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,18 @@ const defaultRedirectUrl = withBase(`/patterns/${pattern}/${defaultFramework}/`)
<head>
<meta charset="UTF-8" />
<title>Redirecting...</title>
<script is:inline define:vars={{ pattern, defaultFramework, validFrameworks, basePath }}>
<script
is:inline
data-pattern={pattern}
data-default-framework={defaultFramework}
data-valid-frameworks={JSON.stringify(validFrameworks)}
data-base-path={basePath}
>
const el = document.currentScript;
const pattern = el.dataset.pattern;
const defaultFramework = el.dataset.defaultFramework;
const validFrameworks = JSON.parse(el.dataset.validFrameworks);
const basePath = el.dataset.basePath;
const framework = localStorage.getItem('apg-selected-framework') || defaultFramework;
const selectedFramework = validFrameworks.includes(framework) ? framework : defaultFramework;
window.location.replace(`${basePath}/patterns/${pattern}/${selectedFramework}/`);
Expand Down
11 changes: 9 additions & 2 deletions src/patterns/tree-view/DemoSection.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,11 @@ const activatedPlaceholder = isJa
const activatedPrefix = isJa ? 'アクティベート: ' : 'Activated: ';
---

<div class="border-border bg-background rounded-lg border p-6">
<div
class="border-border bg-background rounded-lg border p-6"
data-file-system-nodes={JSON.stringify(fileSystemNodes)}
data-activated-placeholder={activatedPlaceholder}
>
<div class="flex flex-col gap-8">
{
framework === 'react' && (
Expand Down Expand Up @@ -244,7 +248,10 @@ const activatedPrefix = isJa ? 'アクティベート: ' : 'Activated: ';
</div>
</div>

<script define:vars={{ fileSystemNodes, activatedPlaceholder }}>
<script is:inline>
const demoContainer = document.currentScript?.previousElementSibling;
const fileSystemNodes = JSON.parse(demoContainer?.dataset.fileSystemNodes || '[]');
const activatedPlaceholder = demoContainer?.dataset.activatedPlaceholder || '';
const treeview = document.querySelector('apg-treeview');
const activatedLabel = document.getElementById('activated-label');
const resetButton = document.getElementById('reset-button');
Expand Down
Loading