supernova: start

.idea/inspectionProfiles/Project_Default.xml

@@ -16,6 +16,23 @@
       <scope name="Root Only" level="GRAMMAR_ERROR" enabled="true" />
     </inspection_tool>
     <inspection_tool class="HtmlRequiredAltAttribute" enabled="false" level="WARNING" enabled_by_default="false" />
+    <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="8">
+            <item index="0" class="java.lang.String" itemvalue="nobr" />
+            <item index="1" class="java.lang.String" itemvalue="noembed" />
+            <item index="2" class="java.lang.String" itemvalue="comment" />
+            <item index="3" class="java.lang.String" itemvalue="noscript" />
+            <item index="4" class="java.lang.String" itemvalue="embed" />
+            <item index="5" class="java.lang.String" itemvalue="script" />
+            <item index="6" class="java.lang.String" itemvalue="include" />
+            <item index="7" class="java.lang.String" itemvalue="module" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
     <inspection_tool class="HttpUrlsUsage" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
     <inspection_tool class="JSUnusedGlobalSymbols" enabled="false" level="WARNING" enabled_by_default="false" />
     <inspection_tool class="LanguageDetectionInspection" enabled="true" level="WARNING" enabled_by_default="false">

.idea/webResources.xml

@@ -6,6 +6,8 @@
         <entryData>
           <resourceRoots>
             <path value="file://$PROJECT_DIR$/sues_virtual_life" />
+            <path value="file://$PROJECT_DIR$/supernova" />
+            <path value="file://$PROJECT_DIR$" />
           </resourceRoots>
         </entryData>
       </entry>

gulpfile.js

@@ -1,6 +1,15 @@
 const {parallel} = require('gulp')
 
-const sues_virtual_life = require('./sues_virtual_life/gulpfile')
+const sites = {
-exports.sues_virtual_life = sues_virtual_life.watch
+    sues_virtual_life: require('./sues_virtual_life/gulpfile'),
+    supernova: require('./supernova/gulpfile')
+}
 
-exports.build = parallel(sues_virtual_life.build)
+let builds = []
+
+for (const [site, require] of Object.entries(sites)) {
+    exports[site] = require.watch
+    builds.push(require.build)
+}
+
+exports.build = parallel(...builds)

menu.js

@@ -1,11 +1,13 @@
 (async () => {
+    // menu style
     const style = document.createElement('link')
     style.rel = 'stylesheet'
     style.href = '/style/menu.css'
     document.head.append(style)
 
+    // build menu
     const siteRoot = '/' + location.pathname.split('/')[1]
-    const {wayback} = await import(/* @vite-ignore */`${siteRoot}/config.js`)
+    const {wayback} = await import(`${siteRoot}/config.js`)
 
     let menu = document.createElement('div')
     menu.id = 'archive-menu'

package.json

@@ -5,8 +5,19 @@
   "devDependencies": {
     "browser-sync": "^2.29.3",
     "gulp": "^4.0.2",
+    "gulp-postcss": "^9.0.1",
     "gulp-posthtml": "^3.0.5",
     "gulp-rename": "^2.0.0",
+    "postcss-preset-env": "^8.5.0",
+    "posthtml-modules": "^0.9.1",
+    "posthtml-postcss": "^0.5.0",
     "posthtml-urls": "^1.0.0"
+  },
+  "dependencies": {
+    "css-blank-pseudo": "^5.0.2",
+    "css-has-pseudo": "^5.0.2",
+    "css-prefers-color-scheme": "^8.0.2",
+    "focus-visible": "^5.2.0",
+    "postcss-focus-within": "^7.0.2"
   }
 }

polyfills.js

@@ -0,0 +1,13 @@
+import cssBlankPseudoInit from 'css-blank-pseudo/browser'
+import focusWithinInit from 'postcss-focus-within/browser'
+import cssHasPseudo from 'css-has-pseudo/browser'
+import prefersColorSchemeInit from 'css-prefers-color-scheme/browser'
+
+cssBlankPseudoInit()
+focusWithinInit()
+cssHasPseudo()
+prefersColorSchemeInit()
+
+const focusVisible = document.createElement('script')
+focusVisible.src = '/node_modules/focus-visible/dist/focus-visible.min.js'
+document.body.append(focusVisible)

supernova/config.js

@@ -0,0 +1,16 @@
+let currentPage = location.pathname.split('/').at(-2)
+
+const waybackSiteBase = 'http://supernova.lokatt.se/'
+
+const pageMetadata = {
+    supernova: {
+        captureId: '20161225131523',
+        sourcePageName: '',
+    },
+}
+
+export const wayback =
+    pageMetadata[currentPage].captureId
+    + '/'
+    + waybackSiteBase
+    + pageMetadata[currentPage].sourcePageName

supernova/gulpfile.js

@@ -0,0 +1,78 @@
+const {src, dest, watch, parallel} = require('gulp')
+const posthtml = require('gulp-posthtml')
+const rename = require('gulp-rename')
+const browserSync = require('browser-sync').create()
+
+const htmlFiles = [
+    'supernova/**/*.html',
+    '!supernova/**/index.html',
+    '!supernova/includes/**/*'
+]
+
+const posthtmlPlugins = [
+    require('posthtml-urls')({
+        eachURL: (url) => {
+            if (url.endsWith('?@root')) {
+                return url.replace('?@root', '')
+            } else if (url.startsWith('/')) {
+                return `/supernova${url}`
+            } else {
+                return url
+            }
+        },
+    })
+]
+
+const postcssPlugins = [
+    require('postcss-preset-env')({
+        enableClientSidePolyfills: true,
+    }),
+]
+
+function html() {
+    const stream = src(htmlFiles)
+        .pipe(posthtml([
+            ...posthtmlPlugins,
+            require('posthtml-modules')({
+                root: 'supernova',
+                plugins: posthtmlPlugins
+            }),
+            require('posthtml-postcss')(postcssPlugins, /^text\/css$/),
+        ]))
+        .pipe(rename(path => {
+            path.basename = 'index'
+        }))
+        .pipe(dest('supernova'))
+
+    if (browserSync.active) {
+        stream.pipe(browserSync.stream())
+    }
+
+    return stream
+}
+
+const cssFiles = [
+    'supernova/**/*.css',
+    '!supernova/**/style.css',
+]
+
+function css() {
+    const stream = src(cssFiles)
+        .pipe(require('gulp-postcss')(postcssPlugins))
+        .pipe(dest('supernova'))
+
+    if (browserSync.active) {
+        stream.pipe(browserSync.stream())
+    }
+
+    return stream
+}
+
+exports.watch = function () {
+    browserSync.init(require('../bs-config'))
+
+    watch(htmlFiles, {ignoreInitial: false}, html)
+    watch(cssFiles, {ignoreInitial: false}, css)
+}
+
+exports.build = parallel(html, css)

supernova/includes/test.html

@@ -0,0 +1 @@
+<a href="/test">test</a>

supernova/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- from source -->
+    <title>Supernova</title>
+    <!--  -->
+
+    <link rel="stylesheet" href="/supernova/supernova.css">
+
+    <!-- archive menu -->
+    <script src="/menu.js" type="module"></script>
+
+    <!-- polyfills -->
+    <script src="/polyfills.js" type="module"></script>
+</head>
+<body>
+<a href="/supernova/test">test</a>
+
+</body>
+</html>

supernova/supernova.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- from source -->
+    <title>Supernova</title>
+    <!--  -->
+
+    <link rel="stylesheet" href="/supernova.css">
+
+    <!-- archive menu -->
+    <script src="/menu.js?@root" type="module"></script>
+
+    <!-- polyfills -->
+    <script src="/polyfills.js?@root" type="module"></script>
+</head>
+<body>
+<module href="/includes/test.html"></module>
+</body>
+</html>