v1.0.0

package.json

@@ -36,8 +36,14 @@
     "lint-staged": "^15.5.0"
   },
   "lint-staged": {
-    "themes/*@develop/**/*.{css,js,jsx,ts,tsx,html}": [
+    "themes/**develop**/**/*.{css,js,jsx,ts,tsx,twig}": [
       "npm --prefix themes/develop run format"
+    ],
+    "themes/**develop**/**/*.{js,jsx,ts,tsx,vue,svelte}": [
+      "npm --prefix themes/develop run eslint"
+    ],
+    "themes/**develop**/**/*.{css,scss,sass,less,styl,vue,svelte}": [
+      "npm --prefix themes/develop run stylelint"
     ]
   }
 }

themes/develop/README.md

@@ -1,4 +1,4 @@
-# テーマ「develop」Ver.0.0.23
+# テーマ「develop」Ver.1.0.0
 
 ## バンドル環境の使い方
 

themes/develop/admin/blog/field-ogp.html

@@ -1,12 +1,5 @@
 <h3 class="acms-admin-admin-title2">OGP設定</h3>
 <table class="adminTable acms-admin-table-admin-edit">
-	<tr>
-		<th><label for="input-text-fb_admins">Facebook admins</label><i data-acms-tooltip="FacebookのIDを設定します。" class="acms-admin-icon-tooltip js-acms-tooltip-hover"></i></th>
-		<td>
-			<input type="text" name="fb_admins" value="{fb_admins}" size="20" id="input-text-fb_admins" />
-			<input type="hidden" name="field[]" value="fb_admins" />
-		</td>
-	</tr>
   <tr>
     <th>OGP画像<i class="acms-admin-icon-tooltip js-acms-tooltip" data-acms-tooltip="Facebook等で利用するOGP画像を設定します。"></i></th>
     <td class="js-media-field">

themes/develop/admin/dashboard-left.html

@@ -1,54 +1,3 @@
-<!-- BEGIN_MODULE Blog_Field -->
-<!-- BEGIN_IF [{ga_api_client_id}/nem/_and_/{ga_api_view_id}/nem] -->
-<script>
-	(function(w,d,s,g,js,fs){
-		g=w.gapi||(w.gapi=\\{\\});g.analytics=\\{q:[],ready:function(f)\\{this.q.push(f);\\}\\};
-		js=d.createElement(s);fs=d.getElementsByTagName(s)[0];
-		js.src='https://apis.google.com/js/platform.js';
-		fs.parentNode.insertBefore(js,fs);js.onload=function()\\{g.load('analytics');\\};
-	}(window,document,'script'));
-
-	gapi.analytics.ready(function() {
-		/**
-		 * Authorize the user immediately if the user has already granted access.
-		 * If no access has been created, render an authorize button inside the
-		 * element with the ID "embed-api-auth-container".
-		 */
-		gapi.analytics.auth.authorize({
-			container: 'embed-api-auth-container',
-			clientid: '{ga_api_client_id}'
-		});
-
-		/**
-		 * Create a new DataChart instance with the given query parameters
-		 * and Google chart options. It will be rendered inside an element
-		 * with the id "chart-container".
-		 */
-		new gapi.analytics.googleCharts.DataChart({
-			query: {
-				metrics: 'ga:sessions',
-				dimensions: 'ga:date',
-				ids: 'ga:{ga_api_view_id}',
-				'start-date': '30daysAgo',
-				'end-date': 'yesterday'
-			},
-			chart: {
-				container: 'chart-container',
-				type: 'LINE',
-				options: {
-					width: '100%'
-				}
-			}
-		}).execute();
-	});
-</script>
-
-<h2 class="acms-admin-admin-title2"><!--T-->Google Analytics<!--/T--></h2>
-<div id="embed-api-auth-container" style="margin-top: 10px;"></div>
-<div id="chart-container"></div>
-<!-- END_IF -->
-<!-- END_MODULE Blog_Field -->
-
 <!-- BEGIN_MODULE Links id="admin_link" -->
 <h2 class="acms-admin-admin-title2">リンク集</h2>
 <div>
@@ -65,4 +14,4 @@ <h2 class="acms-admin-admin-title2">リンク集</h2>
 	</tbody>
 </table>
 </div>
-<!-- END_MODULE Links -->
+<!-- END_MODULE Links -->

themes/develop/admin/entry/field-seo.html

@@ -68,7 +68,7 @@
         </td>
       </tr>
       <tr>
-        <th>OGP画像 - <small>og:image</small><i class="acms-admin-icon-tooltip js-acms-tooltip" data-acms-tooltip="Facebook等で利用するOGP画像を設定します。"></i></th>
+        <th>メイン画像 <i class="acms-admin-icon-tooltip js-acms-tooltip" data-acms-tooltip="サムネイル表示や、SNS等で利用するOGP画像を設定します。"></i></th>
         <td class="js-media-field">
           <div class="js-droparea" data-thumbnail="{entry_main_image@thumbnail}" data-type="image" style="width:200px"></div>
           <p class="js-text acms-admin-text-danger" style="display:none">許可されていないファイルのため挿入できません。</p>

themes/develop/include/entry/body.twig

@@ -15,6 +15,11 @@
         </div>
       {% endif %}
 
+      <!-- 編集ボタン -->
+      <div class="acms-box-medium">
+        {{ include('/admin/entry/action.twig', { entry }) }}
+      </div>
+
       <header class="text-gray-900">
         {% set updated = date(entry.updatedAt) %}
         {% set diff = date('now').diff(updated) %}
@@ -75,13 +80,13 @@
             data-listType="ol"
             data-listClassName="list-none"
             data-itemClassName="mt-2"
-            data-linkClassName="js-scroll no-underline hover:opacity-70"
+            data-linkClassName="no-underline hover:opacity-70"
             data-anchorName="heading-$1"
             data-levelLimit="2"
             data-exceptClass="js-except"
           >
             {% if entry.body %}
-              {{ entry.body|fixBlockEditorContents|raw }}
+              {{ entry.body|raw }}
             {% endif %}
           </div>
         </div>

themes/develop/include/entry/summary-card.twig

@@ -47,6 +47,7 @@
               height="193"
               alt="{{ entry.mainImage.alt }}"
               loading="lazy"
+              decoding="async"
               class="object-cover w-full mb-4 overflow-hidden rounded-md shadow-sm aspect-video"
             />
           {% else %}
@@ -56,6 +57,7 @@
               height="193"
               alt="画像なし"
               loading="lazy"
+              decoding="async"
               class="object-cover w-full mb-4 overflow-hidden rounded-md shadow-sm aspect-video"
             />
           {% endif %}

themes/develop/include/entry/summary-tiny.twig

@@ -34,6 +34,7 @@
                   height="96"
                   alt="{{ entry.mainImage.alt }}"
                   loading="lazy"
+                  decoding="async"
                   class="object-cover w-full h-full"
                 />
               {% else %}
@@ -43,6 +44,7 @@
                   width="96"
                   height="96"
                   loading="lazy"
+                  decoding="async"
                   class="object-cover w-full h-full"
                 />
               {% endif %}

themes/develop/include/entry/tag-relational-card.twig

@@ -11,6 +11,7 @@
               height="193"
               alt="{{ entry.mainImage.alt }}"
               loading="lazy"
+              decoding="async"
               class="object-cover w-full mb-4 overflow-hidden rounded-md shadow-sm aspect-video"
             />
           {% else %}
@@ -20,6 +21,7 @@
               height="193"
               alt=""
               loading="lazy"
+              decoding="async"
               class="object-cover w-full mb-4 overflow-hidden rounded-md shadow-sm aspect-video"
             />
           {% endif %}

themes/develop/include/entry/tag-relational-tiny.twig

@@ -12,6 +12,7 @@
                   height="96"
                   alt="{{ entry.mainImage.alt }}"
                   loading="lazy"
+                  decoding="async"
                   class="object-cover w-full h-full"
                 />
               {% else %}
@@ -21,6 +22,7 @@
                   width="96"
                   height="96"
                   loading="lazy"
+                  decoding="async"
                   class="object-cover w-full h-full"
                 />
               {% endif %}

themes/develop/include/head/meta.twig

@@ -43,9 +43,6 @@
   <meta name="twitter:creator" content="@{{ blogField.fields.twitter_creator.value }}" />
 {% endif %}
 
-{% if blogField.fields.fb_admins %}
-  <meta property="fb:admins" content="{{ blogField.fields.fb_admins.value }}" />
-{% endif %}
 {% if blogField.fields.google_site_verification %}
   <meta name="google-site-verification" content="{{ blogField.fields.google_site_verification.value }}" />
 {% endif %}

themes/develop/include/parts/navigation-sp.twig

@@ -70,7 +70,7 @@
 
 <div class="overflow-y-auto absolute top-14 left-0 right-0 border-box h-[calc(100dvh-3.5rem)] bg-gray-500/75">
   <div class="container max-h-100 mx-auto my-4">
-    <div class="border border-gray-200 rounded-md bg-white font-bold js-menu">
+    <div class="border border-gray-200 rounded-md bg-white font-bold">
       {{ include('/admin/module/setting.twig', { moduleInfo: navigation.moduleInfo }) }}
       {{ _self.renderNavigation(navigation.items) }}
 

themes/develop/package.json

@@ -1,6 +1,6 @@
 {
   "name": "develop",
-  "version": "0.0.23",
+  "version": "1.0.0",
   "description": "Webサイト制作プロジェクト",
   "type": "module",
   "main": "index.js",
@@ -9,7 +9,10 @@
     "dev": "vite",
     "build": "vite build",
     "analyze": "vite build --mode analyze",
+    "eslint": "eslint --fix './src/js/**/*.{js,jsx,ts,tsx,vue,svelte}'",
+    "stylelint": "stylelint --fix './src/style/**/*.{css,scss,sass,less,styl,vue,svelte}'",
     "format": "prettier --write '../**develop**/**/*.{js,ts,jsx,tsx,vue,css,twig}'",
+    "lint": "npm run eslint && npm run stylelint",
     "check-update": "npx -p npm-check-updates -c ncu"
   },
   "author": "com.appleple",

themes/develop/src/js/lib/buildIn/focused-image.js

@@ -4,6 +4,6 @@ import { FocusedImage } from 'image-focus';
  * @param {HTMLImageElement} target
  */
 export default (target) => {
-  target.style.visibility = 'visible'; // eslint-disable-line no-param-reassign
-  new FocusedImage(target); // eslint-disable-line no-new
+  target.style.visibility = 'visible';
+  new FocusedImage(target);
 };

themes/develop/src/js/lib/buildIn/google-map.js

@@ -38,7 +38,6 @@ export default async (elm) => {
   const markerCollectionStack = [];
   const googleInfoWindow = new google.maps.InfoWindow();
   const googleMap = new google.maps.Map(output, {
-    // eslint-disable-line no-new
     center: { lat: parseFloat(centerLatLng[0]), lng: parseFloat(centerLatLng[1]) },
     zoom: parseInt(query.zoom, 10),
   });

themes/develop/src/js/lib/buildIn/modal-video.js

@@ -67,5 +67,5 @@ export default (context, options = {}) => {
     },
   };
 
-  new ModalVideo(context, Object.assign(defaultOptions, options)); // eslint-disable-line no-new
+  new ModalVideo(context, Object.assign(defaultOptions, options));
 };

themes/develop/src/js/lib/buildIn/validator/types.js

@@ -1,5 +1,3 @@
-import * as rules from './rules';
-
 /**
  * バリデーターの設定オプション
  * @typedef {Object} ValidatorOptions

themes/develop/src/js/lib/util.js

@@ -5,7 +5,7 @@ export const addClass = (element, className) => {
   if (element.classList) {
     element.classList.add(className);
   } else {
-    element.className += ` ${className}`; // eslint-disable-line
+    element.className += ` ${className}`;
   }
 };
 
@@ -16,11 +16,11 @@ export const removeClass = (element, className) => {
     element.className = element.className.replace(
       new RegExp(`(^|\\b)${className.split(' ').join('|')}(\\b|$)`, 'gi'),
       ' '
-    ); // eslint-disable-line
+    );
   }
 };
 
-export const getUniqId = () => (Date.now().toString(36) + Math.random().toString(36).substr(2, 5)).toUpperCase(); // eslint-disable-line
+export const getUniqId = () => (Date.now().toString(36) + Math.random().toString(36).substr(2, 5)).toUpperCase();
 
 export const addCSSToElement = (element, css) => {
   const id = getUniqId();
@@ -57,14 +57,13 @@ export const closest = (node, selector) =>
   (
     node.closest ||
     function (_selector) {
-      // eslint-disable-line
       do {
         // nodeとselectorがマッチしたら返す
         if ((node.matches || node.msMatchesSelector).call(node, _selector)) {
           return node;
         }
         // マッチしなかったら親要素を代入
-        node = node.parentElement || node.parentNode; // eslint-disable-line
+        node = node.parentElement || node.parentNode;
       } while (node !== null && node.nodeType === 1);
 
       return null;

themes/develop/src/style/_theme.css

@@ -6,11 +6,11 @@
 
 :root {
   --unit-margin-top: 0;
-  --unit-margin-bottom: 1.5rem;
-  --unit-gap-x: 1rem;
+  --unit-margin-bottom: 1.5em;
+  --unit-gap-x: 1em;
 
   @media (width >= 520px) {
-    --unit-margin-bottom: 2rem;
-    --unit-gap-x: 2rem;
+    --unit-margin-bottom: 2em;
+    --unit-gap-x: 2em;
   }
 }

themes/develop/src/style/editor.css

@@ -1,11 +1,11 @@
 /* @import 'tailwindcss'; */
+
 /* 管理画面側では、preflight を読み込まないようにする */
 @layer theme, base, components, utilities;
+
 @import 'tailwindcss/theme.css' layer(theme);
 @import 'tailwindcss/utilities.css' layer(utilities);
-
-@plugin "@tailwindcss/typography";
-
 @import './_theme.css';
-
 @import './editor/index.css';
+
+@plugin "@tailwindcss/typography";

themes/develop/src/style/editor/_base.css

@@ -1,3 +1,13 @@
+:where(.prose) *:first-child,
+:where(.prose) *:first-child.column-block-editor > *:first-child, /* ブロックエディター内 */
+/* stylelint-disable-next-line selector-class-pattern */
+:where(.prose) *:first-child.js-edit_inplace > *:first-child, /*ダイレクト編集時 */
+/* stylelint-disable-next-line selector-class-pattern */
+:where(.prose) *:first-child.js-edit_inplace-hovering + .js-edit_inplace > *:first-child /*ダイレクト編集時にホバー */ {
+  /* コンテンツの初めの要素には上余白をつけない */
+  margin-block-start: 0;
+}
+
 :where(.prose) .acms-cssgrid {
   --acms-gap: var(--unit-gap-x);
 }