feat-flag-drupal 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +76 -0
- package/build/main-0.0.4.js +66 -0
- package/build/main-0.0.5.js +66 -0
- package/build/main-0.0.6.js +1 -0
- package/build/manifest.json +17 -0
- package/build/style-0.0.4.css +1 -0
- package/build/style-0.0.5.css +1 -0
- package/build/style-0.0.6.css +1 -0
- package/package.json +19 -0
package/README.md
ADDED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
# Version Builder
|
|
2
|
+
|
|
3
|
+
This project is a simple versioning system for web assets. It uses Vite to bundle your code, supports Twig templates, and a custom script to automatically increment the version number with each build.
|
|
4
|
+
|
|
5
|
+
## Development vs. Production
|
|
6
|
+
|
|
7
|
+
This project has two main modes:
|
|
8
|
+
|
|
9
|
+
* **Development (`npm run dev`):** Uses a standard `index.html` file for a fast and reliable development experience with Hot Module Replacement (HMR).
|
|
10
|
+
* **Production Build (`npm run build`):** Uses `index.twig` as the source, compiles it to HTML, and generates versioned assets in the `build/` directory.
|
|
11
|
+
|
|
12
|
+
## How to Use
|
|
13
|
+
|
|
14
|
+
1. **Install dependencies:**
|
|
15
|
+
```bash
|
|
16
|
+
npm install
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
2. **Develop your application:**
|
|
20
|
+
* Run `npm run dev`.
|
|
21
|
+
* Make changes to your assets in the `src/` directory.
|
|
22
|
+
* The browser will automatically update as you save files.
|
|
23
|
+
|
|
24
|
+
3. **Prepare for production:**
|
|
25
|
+
* Modify `index.twig` to structure your final production HTML. You can use Twig syntax here.
|
|
26
|
+
|
|
27
|
+
4. **Build a new version:**
|
|
28
|
+
* When you are ready to create a new version of your assets, run the following command:
|
|
29
|
+
```bash
|
|
30
|
+
npm run build
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## How the Build Process Works
|
|
34
|
+
|
|
35
|
+
The `npm run build` command does the following:
|
|
36
|
+
|
|
37
|
+
1. **Determines New Version:** It checks for a `build/manifest.json`. If it exists, it increments the `latest_version` number to create a new version. If not, it uses the version from `package.json`. The `package.json` file itself is not modified.
|
|
38
|
+
2. **Builds Assets:** It runs Vite to build and bundle your assets, compiling your `index.twig` file into a final `index.html`.
|
|
39
|
+
3. **Outputs Versioned Files:** The output files are placed in the `build/` directory. The filenames will include the new version number, for example:
|
|
40
|
+
* `main-0.0.2.js`
|
|
41
|
+
* `style-0.0.2.css`
|
|
42
|
+
4. **Generates a Manifest:** It creates or updates a `build/manifest.json` file.
|
|
43
|
+
|
|
44
|
+
## Twig Support
|
|
45
|
+
|
|
46
|
+
This project uses `vite-plugin-twig-drupal` to compile `.twig` files during the **build process only**. You can write your final production markup in `index.twig` and it will be compiled to `index.html` in the `build` directory.
|
|
47
|
+
|
|
48
|
+
## Feature Flagging and the Manifest
|
|
49
|
+
|
|
50
|
+
To support feature flagging systems, the build process generates a `manifest.json` file. This file acts as a single source of truth for your system to look up which assets belong to which version.
|
|
51
|
+
|
|
52
|
+
Here is an example of the manifest structure:
|
|
53
|
+
|
|
54
|
+
```json
|
|
55
|
+
{
|
|
56
|
+
"versions": {
|
|
57
|
+
"0.0.1": {
|
|
58
|
+
"main.js": "/main-0.0.1.js",
|
|
59
|
+
"style.css": "/style-0.0.1.css"
|
|
60
|
+
},
|
|
61
|
+
"0.0.2": {
|
|
62
|
+
"main.js": "/main-0.0.2.js",
|
|
63
|
+
"style.css": "/style-0.0.2.css"
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
"latest_version": "0.0.2"
|
|
67
|
+
}
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
Your feature flagging system can consume this file to dynamically load the correct assets for a given version.
|
|
71
|
+
|
|
72
|
+
## Publishing as an NPM Package
|
|
73
|
+
|
|
74
|
+
This project is set up to be published as an NPM package. The `files` property in `package.json` is configured to only include the `build` directory when you publish the package.
|
|
75
|
+
|
|
76
|
+
The `main` entry in `package.json` points to `build/main.js`. After running a build, the actual filename will be versioned (e.g., `build/main-0.0.2.js`). You may need to adjust your package consumption logic to account for the versioned filenames.
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
/* empty css */document.querySelector("#app").innerHTML=`
|
|
2
|
+
<pre>
|
|
3
|
+
<code>
|
|
4
|
+
# Version Builder
|
|
5
|
+
|
|
6
|
+
This project is a simple versioning system for web assets. It uses Vite to bundle your code and a custom script to automatically increment the version number with each build.
|
|
7
|
+
|
|
8
|
+
## How to Use
|
|
9
|
+
|
|
10
|
+
1. **Place your code:** Put your HTML, CSS, JavaScript, and other asset files in the root directory of the project. The main entry point for the application is \`index.html\`.
|
|
11
|
+
|
|
12
|
+
2. **Install dependencies:**
|
|
13
|
+
\`\`\`bash
|
|
14
|
+
npm install
|
|
15
|
+
\`\`\`
|
|
16
|
+
|
|
17
|
+
3. **Modify your code:** Make any changes you need to your source files.
|
|
18
|
+
|
|
19
|
+
4. **Build a new version:** When you are ready to create a new version of your assets, run the following command:
|
|
20
|
+
\`\`\`bash
|
|
21
|
+
npm run build
|
|
22
|
+
\`\`\`
|
|
23
|
+
|
|
24
|
+
## How it Works
|
|
25
|
+
|
|
26
|
+
The \`npm run build\` command does the following:
|
|
27
|
+
|
|
28
|
+
1. **Increments Version:** It automatically increments the \`patch\` number (the last digit) of the version in \`package.json\`. For example, \`0.0.1\` becomes \`0.0.2\`.
|
|
29
|
+
2. **Builds Assets:** It runs Vite to build and bundle your assets.
|
|
30
|
+
3. **Outputs Versioned Files:** The output files are placed in the \`build/\` directory. The filenames will include the new version number, for example:
|
|
31
|
+
* \`main-0.0.2.js\`
|
|
32
|
+
* \`style-0.0.2.css\`
|
|
33
|
+
4. **Generates a Manifest:** It creates or updates a \`build/manifest.json\` file.
|
|
34
|
+
|
|
35
|
+
## Feature Flagging and the Manifest
|
|
36
|
+
|
|
37
|
+
To support feature flagging systems, the build process generates a \`manifest.json\` file. This file acts as a single source of truth for your system to look up which assets belong to which version.
|
|
38
|
+
|
|
39
|
+
Here is an example of the manifest structure:
|
|
40
|
+
|
|
41
|
+
\`\`\`json
|
|
42
|
+
{
|
|
43
|
+
"versions": {
|
|
44
|
+
"0.0.1": {
|
|
45
|
+
"main.js": "/main-0.0.1.js",
|
|
46
|
+
"style.css": "/style-0.0.1.css"
|
|
47
|
+
},
|
|
48
|
+
"0.0.2": {
|
|
49
|
+
"main.js": "/main-0.0.2.js",
|
|
50
|
+
"style.css": "/style-0.0.2.css"
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
"latest_version": "0.0.2"
|
|
54
|
+
}
|
|
55
|
+
\`\`\`
|
|
56
|
+
|
|
57
|
+
Your feature flagging system can consume this file to dynamically load the correct assets for a given version.
|
|
58
|
+
|
|
59
|
+
## Publishing as an NPM Package
|
|
60
|
+
|
|
61
|
+
This project is set up to be published as an NPM package. The \`files\` property in \`package.json\` is configured to only include the \`build\` directory when you publish the package.
|
|
62
|
+
|
|
63
|
+
The \`main\` entry in \`package.json\` points to \`build/main.js\`. After running a build, the actual filename will be versioned (e.g., \`build/main-0.0.2.js\`). You may need to adjust your package consumption logic to account for the versioned filenames.
|
|
64
|
+
</code>
|
|
65
|
+
</pre>
|
|
66
|
+
`;
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
document.querySelector("#app").innerHTML=`
|
|
2
|
+
<pre>
|
|
3
|
+
<code>
|
|
4
|
+
# Version Builder
|
|
5
|
+
|
|
6
|
+
This project is a simple versioning system for web assets. It uses Vite to bundle your code and a custom script to automatically increment the version number with each build.
|
|
7
|
+
|
|
8
|
+
## How to Use
|
|
9
|
+
|
|
10
|
+
1. **Place your code:** Put your HTML, CSS, JavaScript, and other asset files in the root directory of the project. The main entry point for the application is \`index.html\`.
|
|
11
|
+
|
|
12
|
+
2. **Install dependencies:**
|
|
13
|
+
\`\`\`bash
|
|
14
|
+
npm install
|
|
15
|
+
\`\`\`
|
|
16
|
+
|
|
17
|
+
3. **Modify your code:** Make any changes you need to your source files.
|
|
18
|
+
|
|
19
|
+
4. **Build a new version:** When you are ready to create a new version of your assets, run the following command:
|
|
20
|
+
\`\`\`bash
|
|
21
|
+
npm run build
|
|
22
|
+
\`\`\`
|
|
23
|
+
|
|
24
|
+
## How it Works
|
|
25
|
+
|
|
26
|
+
The \`npm run build\` command does the following:
|
|
27
|
+
|
|
28
|
+
1. **Increments Version:** It automatically increments the \`patch\` number (the last digit) of the version in \`package.json\`. For example, \`0.0.1\` becomes \`0.0.2\`.
|
|
29
|
+
2. **Builds Assets:** It runs Vite to build and bundle your assets.
|
|
30
|
+
3. **Outputs Versioned Files:** The output files are placed in the \`build/\` directory. The filenames will include the new version number, for example:
|
|
31
|
+
* \`main-0.0.2.js\`
|
|
32
|
+
* \`style-0.0.2.css\`
|
|
33
|
+
4. **Generates a Manifest:** It creates or updates a \`build/manifest.json\` file.
|
|
34
|
+
|
|
35
|
+
## Feature Flagging and the Manifest
|
|
36
|
+
|
|
37
|
+
To support feature flagging systems, the build process generates a \`manifest.json\` file. This file acts as a single source of truth for your system to look up which assets belong to which version.
|
|
38
|
+
|
|
39
|
+
Here is an example of the manifest structure:
|
|
40
|
+
|
|
41
|
+
\`\`\`json
|
|
42
|
+
{
|
|
43
|
+
"versions": {
|
|
44
|
+
"0.0.1": {
|
|
45
|
+
"main.js": "/main-0.0.1.js",
|
|
46
|
+
"style.css": "/style-0.0.1.css"
|
|
47
|
+
},
|
|
48
|
+
"0.0.2": {
|
|
49
|
+
"main.js": "/main-0.0.2.js",
|
|
50
|
+
"style.css": "/style-0.0.2.css"
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
"latest_version": "0.0.2"
|
|
54
|
+
}
|
|
55
|
+
\`\`\`
|
|
56
|
+
|
|
57
|
+
Your feature flagging system can consume this file to dynamically load the correct assets for a given version.
|
|
58
|
+
|
|
59
|
+
## Publishing as an NPM Package
|
|
60
|
+
|
|
61
|
+
This project is set up to be published as an NPM package. The \`files\` property in \`package.json\` is configured to only include the \`build\` directory when you publish the package.
|
|
62
|
+
|
|
63
|
+
The \`main\` entry in \`package.json\` points to \`build/main.js\`. After running a build, the actual filename will be versioned (e.g., \`build/main-0.0.2.js\`). You may need to adjust your package consumption logic to account for the versioned filenames.
|
|
64
|
+
</code>
|
|
65
|
+
</pre>
|
|
66
|
+
`;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
document.addEventListener("DOMContentLoaded",()=>{const e=document.getElementById("app");e.textContent="Hello from version-builder!"});
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{
|
|
2
|
+
"versions": {
|
|
3
|
+
"0.0.4": {
|
|
4
|
+
"main.js": "/main-0.0.4.js",
|
|
5
|
+
"style.css": "/style-0.0.4.css"
|
|
6
|
+
},
|
|
7
|
+
"0.0.5": {
|
|
8
|
+
"main.js": "/main-0.0.5.js",
|
|
9
|
+
"style.css": "/style-0.0.5.css"
|
|
10
|
+
},
|
|
11
|
+
"0.0.6": {
|
|
12
|
+
"main.js": "/main-0.0.6.js",
|
|
13
|
+
"style.css": "/style-0.0.6.css"
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
"latest_version": "0.0.6"
|
|
17
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--text: #6b6375;--text-h: #08060d;--bg: #fff;--border: #e5e4e7;--code-bg: #f4f3ec;--accent: #aa3bff;--accent-bg: rgba(170, 59, 255, .1);--accent-border: rgba(170, 59, 255, .5);--social-bg: rgba(244, 243, 236, .5);--shadow: rgba(0, 0, 0, .1) 0 10px 15px -3px, rgba(0, 0, 0, .05) 0 4px 6px -2px;--sans: system-ui, "Segoe UI", Roboto, sans-serif;--heading: system-ui, "Segoe UI", Roboto, sans-serif;--mono: ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media(max-width:1024px){:root{font-size:16px}}@media(prefers-color-scheme:dark){:root{--text: #9ca3af;--text-h: #f3f4f6;--bg: #16171d;--border: #2e303a;--code-bg: #1f2028;--accent: #c084fc;--accent-bg: rgba(192, 132, 252, .15);--accent-border: rgba(192, 132, 252, .5);--social-bg: rgba(47, 48, 58, .5);--shadow: rgba(0, 0, 0, .4) 0 10px 15px -3px, rgba(0, 0, 0, .25) 0 4px 6px -2px}#social .button-icon{filter:invert(1) brightness(2)}}body{margin:0}h1,h2{font-family:var(--heading);font-weight:500;color:var(--text-h)}h1{font-size:56px;letter-spacing:-1.68px;margin:32px 0}@media(max-width:1024px){h1{font-size:36px;margin:20px 0}}h2{font-size:24px;line-height:118%;letter-spacing:-.24px;margin:0 0 8px}@media(max-width:1024px){h2{font-size:20px}}p{margin:0}code{font-family:var(--mono);display:flex;flex-wrap:wrap;border-radius:4px;max-width:80vw;color:var(--text-h);overflow-x:auto}code{font-size:15px;line-height:135%;padding:4px 8px;background:var(--code-bg)}.counter{font-size:16px;padding:5px 10px;border-radius:5px;color:var(--accent);background:var(--accent-bg);border:2px solid transparent;transition:border-color .3s;margin-bottom:24px}.counter:hover{border-color:var(--accent-border)}.counter:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.hero{position:relative}.hero .base,.hero .framework,.hero .vite{inset-inline:0;margin:0 auto}.hero .base{width:170px;position:relative;z-index:0}.hero .framework,.hero .vite{position:absolute}.hero .framework{z-index:1;top:34px;height:28px;transform:perspective(2000px) rotate(300deg) rotateX(44deg) rotateY(39deg) scale(1.4)}.hero .vite{z-index:0;top:107px;height:26px;width:auto;transform:perspective(2000px) rotate(300deg) rotateX(40deg) rotateY(39deg) scale(.8)}#app{max-width:100%;margin:0 auto;border-inline:1px solid var(--border);min-height:100svh;display:flex;flex-direction:column;box-sizing:border-box}#center{display:flex;flex-direction:column;gap:25px;place-content:center;place-items:center;flex-grow:1}@media(max-width:1024px){#center{padding:32px 20px 24px;gap:18px}}#next-steps{display:flex;border-top:1px solid var(--border);text-align:left}#next-steps>div{flex:1 1 0;padding:32px}@media(max-width:1024px){#next-steps>div{padding:24px 20px}}#next-steps .icon{margin-bottom:16px;width:22px;height:22px}@media(max-width:1024px){#next-steps{flex-direction:column;text-align:center}}#docs{border-right:1px solid var(--border)}@media(max-width:1024px){#docs{border-right:none;border-bottom:1px solid var(--border)}}#next-steps ul{list-style:none;padding:0;display:flex;gap:8px;margin:32px 0 0}#next-steps ul .logo{height:18px}#next-steps ul a{color:var(--text-h);font-size:16px;border-radius:6px;background:var(--social-bg);display:flex;padding:6px 12px;align-items:center;gap:8px;text-decoration:none;transition:box-shadow .3s}#next-steps ul a:hover{box-shadow:var(--shadow)}#next-steps ul a .button-icon{height:18px;width:18px}@media(max-width:1024px){#next-steps ul{margin-top:20px;flex-wrap:wrap;justify-content:center}#next-steps ul li{flex:1 1 calc(50% - 8px)}#next-steps ul a{width:100%;justify-content:center;box-sizing:border-box}}#spacer{height:88px;border-top:1px solid var(--border)}@media(max-width:1024px){#spacer{height:48px}}.ticks{position:relative;width:100%}.ticks:before,.ticks:after{content:"";position:absolute;top:-4.5px;border:5px solid transparent}.ticks:before{left:0;border-left-color:var(--border)}.ticks:after{right:0;border-right-color:var(--border)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--text: #6b6375;--text-h: #08060d;--bg: #fff;--border: #e5e4e7;--code-bg: #f4f3ec;--accent: #aa3bff;--accent-bg: rgba(170, 59, 255, .1);--accent-border: rgba(170, 59, 255, .5);--social-bg: rgba(244, 243, 236, .5);--shadow: rgba(0, 0, 0, .1) 0 10px 15px -3px, rgba(0, 0, 0, .05) 0 4px 6px -2px;--sans: system-ui, "Segoe UI", Roboto, sans-serif;--heading: system-ui, "Segoe UI", Roboto, sans-serif;--mono: ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media(max-width:1024px){:root{font-size:16px}}@media(prefers-color-scheme:dark){:root{--text: #9ca3af;--text-h: #f3f4f6;--bg: #16171d;--border: #2e303a;--code-bg: #1f2028;--accent: #c084fc;--accent-bg: rgba(192, 132, 252, .15);--accent-border: rgba(192, 132, 252, .5);--social-bg: rgba(47, 48, 58, .5);--shadow: rgba(0, 0, 0, .4) 0 10px 15px -3px, rgba(0, 0, 0, .25) 0 4px 6px -2px}#social .button-icon{filter:invert(1) brightness(2)}}body{margin:0}h1,h2{font-family:var(--heading);font-weight:500;color:var(--text-h)}h1{font-size:56px;letter-spacing:-1.68px;margin:32px 0}@media(max-width:1024px){h1{font-size:36px;margin:20px 0}}h2{font-size:24px;line-height:118%;letter-spacing:-.24px;margin:0 0 8px}@media(max-width:1024px){h2{font-size:20px}}p{margin:0}code{font-family:var(--mono);display:flex;flex-wrap:wrap;border-radius:4px;max-width:80vw;color:var(--text-h);overflow-x:auto}code{font-size:15px;line-height:135%;padding:4px 8px;background:var(--code-bg)}.counter{font-size:16px;padding:5px 10px;border-radius:5px;color:var(--accent);background:var(--accent-bg);border:2px solid transparent;transition:border-color .3s;margin-bottom:24px}.counter:hover{border-color:var(--accent-border)}.counter:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.hero{position:relative}.hero .base,.hero .framework,.hero .vite{inset-inline:0;margin:0 auto}.hero .base{width:170px;position:relative;z-index:0}.hero .framework,.hero .vite{position:absolute}.hero .framework{z-index:1;top:34px;height:28px;transform:perspective(2000px) rotate(300deg) rotateX(44deg) rotateY(39deg) scale(1.4)}.hero .vite{z-index:0;top:107px;height:26px;width:auto;transform:perspective(2000px) rotate(300deg) rotateX(40deg) rotateY(39deg) scale(.8)}#app{max-width:100%;margin:0 auto;border-inline:1px solid var(--border);min-height:100svh;display:flex;flex-direction:column;box-sizing:border-box}#center{display:flex;flex-direction:column;gap:25px;place-content:center;place-items:center;flex-grow:1}@media(max-width:1024px){#center{padding:32px 20px 24px;gap:18px}}#next-steps{display:flex;border-top:1px solid var(--border);text-align:left}#next-steps>div{flex:1 1 0;padding:32px}@media(max-width:1024px){#next-steps>div{padding:24px 20px}}#next-steps .icon{margin-bottom:16px;width:22px;height:22px}@media(max-width:1024px){#next-steps{flex-direction:column;text-align:center}}#docs{border-right:1px solid var(--border)}@media(max-width:1024px){#docs{border-right:none;border-bottom:1px solid var(--border)}}#next-steps ul{list-style:none;padding:0;display:flex;gap:8px;margin:32px 0 0}#next-steps ul .logo{height:18px}#next-steps ul a{color:var(--text-h);font-size:16px;border-radius:6px;background:var(--social-bg);display:flex;padding:6px 12px;align-items:center;gap:8px;text-decoration:none;transition:box-shadow .3s}#next-steps ul a:hover{box-shadow:var(--shadow)}#next-steps ul a .button-icon{height:18px;width:18px}@media(max-width:1024px){#next-steps ul{margin-top:20px;flex-wrap:wrap;justify-content:center}#next-steps ul li{flex:1 1 calc(50% - 8px)}#next-steps ul a{width:100%;justify-content:center;box-sizing:border-box}}#spacer{height:88px;border-top:1px solid var(--border)}@media(max-width:1024px){#spacer{height:48px}}.ticks{position:relative;width:100%}.ticks:before,.ticks:after{content:"";position:absolute;top:-4.5px;border:5px solid transparent}.ticks:before{left:0;border-left-color:var(--border)}.ticks:after{right:0;border-right-color:var(--border)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--text: #6b6375;--text-h: #08060d;--bg: #fff;--border: #e5e4e7;--code-bg: #f4f3ec;--accent: #aa3bff;--accent-bg: rgba(170, 59, 255, .1);--accent-border: rgba(170, 59, 255, .5);--social-bg: rgba(244, 243, 236, .5);--shadow: rgba(0, 0, 0, .1) 0 10px 15px -3px, rgba(0, 0, 0, .05) 0 4px 6px -2px;--sans: system-ui, "Segoe UI", Roboto, sans-serif;--heading: system-ui, "Segoe UI", Roboto, sans-serif;--mono: ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media(max-width:1024px){:root{font-size:16px}}@media(prefers-color-scheme:dark){:root{--text: #9ca3af;--text-h: #f3f4f6;--bg: #16171d;--border: #2e303a;--code-bg: #1f2028;--accent: #c084fc;--accent-bg: rgba(192, 132, 252, .15);--accent-border: rgba(192, 132, 252, .5);--social-bg: rgba(47, 48, 58, .5);--shadow: rgba(0, 0, 0, .4) 0 10px 15px -3px, rgba(0, 0, 0, .25) 0 4px 6px -2px}#social .button-icon{filter:invert(1) brightness(2)}}body{margin:0}h1,h2{font-family:var(--heading);font-weight:500;color:var(--text-h)}h1{font-size:56px;letter-spacing:-1.68px;margin:32px 0}@media(max-width:1024px){h1{font-size:36px;margin:20px 0}}h2{font-size:24px;line-height:118%;letter-spacing:-.24px;margin:0 0 8px}@media(max-width:1024px){h2{font-size:20px}}p{margin:0}code{font-family:var(--mono);display:flex;flex-wrap:wrap;border-radius:4px;max-width:80vw;color:var(--text-h);overflow-x:auto}code{font-size:15px;line-height:135%;padding:4px 8px;background:var(--code-bg)}.counter{font-size:16px;padding:5px 10px;border-radius:5px;color:var(--accent);background:var(--accent-bg);border:2px solid transparent;transition:border-color .3s;margin-bottom:24px}.counter:hover{border-color:var(--accent-border)}.counter:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.hero{position:relative}.hero .base,.hero .framework,.hero .vite{inset-inline:0;margin:0 auto}.hero .base{width:170px;position:relative;z-index:0}.hero .framework,.hero .vite{position:absolute}.hero .framework{z-index:1;top:34px;height:28px;transform:perspective(2000px) rotate(300deg) rotateX(44deg) rotateY(39deg) scale(1.4)}.hero .vite{z-index:0;top:107px;height:26px;width:auto;transform:perspective(2000px) rotate(300deg) rotateX(40deg) rotateY(39deg) scale(.8)}#app{max-width:100%;margin:0 auto;border-inline:1px solid var(--border);min-height:100svh;display:flex;flex-direction:column;box-sizing:border-box}#center{display:flex;flex-direction:column;gap:25px;place-content:center;place-items:center;flex-grow:1}@media(max-width:1024px){#center{padding:32px 20px 24px;gap:18px}}#next-steps{display:flex;border-top:1px solid var(--border);text-align:left}#next-steps>div{flex:1 1 0;padding:32px}@media(max-width:1024px){#next-steps>div{padding:24px 20px}}#next-steps .icon{margin-bottom:16px;width:22px;height:22px}@media(max-width:1024px){#next-steps{flex-direction:column;text-align:center}}#docs{border-right:1px solid var(--border)}@media(max-width:1024px){#docs{border-right:none;border-bottom:1px solid var(--border)}}#next-steps ul{list-style:none;padding:0;display:flex;gap:8px;margin:32px 0 0}#next-steps ul .logo{height:18px}#next-steps ul a{color:var(--text-h);font-size:16px;border-radius:6px;background:var(--social-bg);display:flex;padding:6px 12px;align-items:center;gap:8px;text-decoration:none;transition:box-shadow .3s}#next-steps ul a:hover{box-shadow:var(--shadow)}#next-steps ul a .button-icon{height:18px;width:18px}@media(max-width:1024px){#next-steps ul{margin-top:20px;flex-wrap:wrap;justify-content:center}#next-steps ul li{flex:1 1 calc(50% - 8px)}#next-steps ul a{width:100%;justify-content:center;box-sizing:border-box}}#spacer{height:88px;border-top:1px solid var(--border)}@media(max-width:1024px){#spacer{height:48px}}.ticks{position:relative;width:100%}.ticks:before,.ticks:after{content:"";position:absolute;top:-4.5px;border:5px solid transparent}.ticks:before{left:0;border-left-color:var(--border)}.ticks:after{right:0;border-right-color:var(--border)}
|
package/package.json
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "feat-flag-drupal",
|
|
3
|
+
"version": "0.0.4",
|
|
4
|
+
"private": false,
|
|
5
|
+
"main": "build/main.js",
|
|
6
|
+
"files": [
|
|
7
|
+
"build"
|
|
8
|
+
],
|
|
9
|
+
"type": "module",
|
|
10
|
+
"scripts": {
|
|
11
|
+
"dev": "vite",
|
|
12
|
+
"build": "node scripts/build.js",
|
|
13
|
+
"preview": "vite preview"
|
|
14
|
+
},
|
|
15
|
+
"devDependencies": {
|
|
16
|
+
"sass-embedded": "^1.98.0",
|
|
17
|
+
"vite": "^7.0.0"
|
|
18
|
+
}
|
|
19
|
+
}
|