phpure-docs/index.html at main · mttk2004/phpure-docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PHPure - Modern PHP Framework</title>

    <!-- CRITICAL: Universal React fix - phải đặt trước mọi script khác -->
    <script>
      // Khởi tạo đối tượng React một cách đầy đủ trước khi bất kỳ module nào được tải
      (function initializeReact() {
        window.React = window.React || {};

        // Thêm các thuộc tính cốt lõi của React để tránh lỗi "Cannot set property of undefined"
        window.React.Children = window.React.Children || {};
        window.React.createRef = window.React.createRef || function() { return {current: null}; };
        window.React.Component = window.React.Component || function() {};
        window.React.PureComponent = window.React.PureComponent || function() {};
        window.React.createContext = window.React.createContext || function() { return {}; };
        window.React.Fragment = window.React.Fragment || Symbol('Fragment');
        window.React.Suspense = window.React.Suspense || function() {};
        window.React.createElement = window.React.createElement || function() { return {}; };
        window.React.cloneElement = window.React.cloneElement || function() { return {}; };
        window.React.createFactory = window.React.createFactory || function() { return function() {}; };
        window.React.isValidElement = window.React.isValidElement || function() { return false; };
        window.React.version = window.React.version || 'preload-script';
        window.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED =
          window.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED || {
            ReactCurrentOwner: {current: null},
            ReactCurrentDispatcher: {current: null}
          };
        window.React.default = window.React;
        window.React.__esModule = true;

        // Khởi tạo React Production
        window.react_production = window.react_production || {};
        window.react_production.jsx = window.react_production.jsx || function() { return {}; };
        window.react_production.jsxs = window.react_production.jsxs || function() { return {}; };
        window.react_production.Fragment = window.react_production.Fragment || Symbol('Fragment');

        // Khởi tạo ReactDOM
        window.ReactDOM = window.ReactDOM || {};
        window.ReactDOM.render = window.ReactDOM.render || function() {};
        window.ReactDOM.hydrate = window.ReactDOM.hydrate || function() {};
        window.ReactDOM.createPortal = window.ReactDOM.createPortal || function() {};
        window.ReactDOM.findDOMNode = window.ReactDOM.findDOMNode || function() { return null; };
        window.ReactDOM.createRoot = window.ReactDOM.createRoot || function() {
          return {
            render: function() {},
            unmount: function() {}
          };
        };
        window.ReactDOM.version = window.ReactDOM.version || 'preload-script';
        window.ReactDOM.default = window.ReactDOM;
        window.ReactDOM.__esModule = true;

        console.debug('[React Pre-Init] Initialized React global objects');
      })();
    </script>

    <!-- Inline React Production fallback - as a fallback -->
    <script>
      // Định nghĩa react_production để đảm bảo nó không bao giờ undefined
      window.react_production = window.react_production || {};
      // Thêm các phương thức quan trọng mà các module có thể gọi
      window.react_production.jsx = window.react_production.jsx || function() { return null; };
      window.react_production.jsxs = window.react_production.jsxs || function() { return null; };
      window.react_production.Fragment = window.react_production.Fragment || Symbol('Fragment');
    </script>

    <meta name="google-site-verification" content="7nq7RhtoVcqiZsU2S4c95sZhRDervDnQd6MqUB6yO5k" />
    <meta name="robots" content="index, follow" />

    <!-- Load React preload script first - Firefox thường xử lý async/defer khác Chrome -->
    <!-- Sửa: loại bỏ async=false và defer=false vì Firefox không xử lý chúng giống Chrome -->
    <!-- Thay vào đó, đặt type="text/javascript" và không sử dụng async/defer để đảm bảo blocking execution -->
    <script type="text/javascript" src="/preload-react.js"></script>

    <!-- Critical inline styles -->
    <style>
      :root {
        color-scheme: light dark;
      }
      body {
        background-color: #edf6f9;
        color: #181f30;
      }
      html.dark body {
        background-color: #181f30;
        color: #edf6f9;
      }
      /* Tránh hiệu ứng chớp khi chuyển theme */
      .syntax-block-preload {
        position: absolute;
        width: 0;
        height: 0;
        visibility: hidden;
        opacity: 0;
        overflow: hidden;
        z-index: -1;
      }
    </style>

    <!-- Preload theme script để tránh FOUC -->
    <script>
      (function() {
        // Lấy theme từ localStorage hoặc từ system preference
        const savedTheme = localStorage.getItem('theme');
        const systemDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
        const theme = savedTheme || (systemDarkMode ? 'dark' : 'light');

        // Áp dụng theme ngay lập tức để tránh flash
        document.documentElement.classList.toggle('dark', theme === 'dark');

        // Lưu theme vào localStorage nếu chưa có
        if (!savedTheme) {
          localStorage.setItem('theme', theme);
        }
      })();
    </script>

    <!-- DNS prefetch và preconnect -->
    <link rel="dns-prefetch" href="https://fonts.googleapis.com">
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <!-- Chỉ sử dụng preload cho critical font (Google font) -->
    <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>

    <!-- JavaScript sẽ cập nhật lang attribute dựa trên ngôn ngữ đã chọn -->
    <script>
      // Lấy ngôn ngữ từ localStorage (i18next lưu tại đây)
      const language = localStorage.getItem('i18nextLng') || 'vi';
      // Cập nhật thuộc tính lang cho thẻ html
      document.documentElement.lang = language;
    </script>
  </body>
</html>