├── tsconfig.json
├── src
    ├── env.d.ts
    ├── templates
    │   ├── NotFoundPage.astro
    │   ├── DefaultPage.astro
    │   ├── BlogShowPage.astro
    │   ├── index.js
    │   ├── BlogIndexPage.astro
    │   └── HomePage.astro
    ├── widgets
    │   ├── RichTextWidget.astro
    │   ├── ImageWidget.astro
    │   ├── index.js
    │   ├── TwoColumnWidget.astro
    │   └── VideoWidget.astro
    └── pages
    │   └── [...slug].astro
├── .vscode
    ├── extensions.json
    └── launch.json
├── public
    ├── images
    │   └── image-widget-placeholder.jpg
    └── favicon.svg
├── README.md
├── .gitignore
├── package.json
└── astro.config.mjs


/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "astro/tsconfigs/base"
3 | }
4 | 


--------------------------------------------------------------------------------
/src/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference path="../.astro/types.d.ts" />
2 | /// <reference types="astro/client" />
3 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["astro-build.astro-vscode"],
3 |   "unwantedRecommendations": []
4 | }
5 | 


--------------------------------------------------------------------------------
/public/images/image-widget-placeholder.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apostrophecms/astro-frontend/main/public/images/image-widget-placeholder.jpg


--------------------------------------------------------------------------------
/src/templates/NotFoundPage.astro:
--------------------------------------------------------------------------------
1 | ---
2 | ---
3 | <section class="bp-content">
4 |   <h1>Not Found</h1>
5 |   <p>Sorry, that page was not found.</p>
6 | </section>  
7 | 


--------------------------------------------------------------------------------
/src/widgets/RichTextWidget.astro:
--------------------------------------------------------------------------------
1 | ---
2 | const { widget } = Astro.props;
3 | const { content } = widget;
4 | ---
5 | <!-- We know Astro so no needless div here -->
6 | <Fragment set:html={ content }></Fragment>
7 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "0.2.0",
 3 |   "configurations": [
 4 |     {
 5 |       "command": "./node_modules/.bin/astro dev",
 6 |       "name": "Development server",
 7 |       "request": "launch",
 8 |       "type": "node-terminal"
 9 |     }
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # apostrophecms/astro-frontend
2 | 
3 | > ⚠️ This legacy project is no longer maintained. You should use our [ApostropheCMS + Astro Essentials Starter Kit](https://github.com/apostrophecms/starter-kit-astro-essentials) instead. That project is actively maintained with our latest techniques for Astro integration.
4 | 
5 | 


--------------------------------------------------------------------------------
/src/templates/DefaultPage.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import AposArea from '@apostrophecms/apostrophe-astro/components/AposArea.astro';
 3 | const { page, user, query } = Astro.props.aposData;
 4 | const { main } = page;
 5 | ---
 6 | 
 7 | <section class="bp-content">
 8 |   <h1>{ page.title }</h1>
 9 |   <AposArea area={main} />
10 | </section>
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # build output
 2 | dist/
 3 | # generated types
 4 | .astro/
 5 | 
 6 | # dependencies
 7 | node_modules/
 8 | 
 9 | # logs
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | 
15 | 
16 | # environment variables
17 | .env
18 | .env.production
19 | 
20 | # macOS-specific files
21 | .DS_Store
22 | 


--------------------------------------------------------------------------------
/src/widgets/ImageWidget.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import placeholderImg from '../../public/images/image-widget-placeholder.jpg';
 3 | 
 4 | const { widget } = Astro.props;
 5 | const placeholder = widget?.aposPlaceholder;
 6 | 
 7 | const src = placeholder ?
 8 |   placeholderImg.src :
 9 |   widget?._image[0]?.attachment?._urls['full'];
10 | ---
11 | <style>
12 |   .img-widget {
13 |     width: 100%;
14 |   }
15 | </style>
16 | <img class="img-widget" {src} />
17 | 


--------------------------------------------------------------------------------
/src/templates/BlogShowPage.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import AposArea from '@apostrophecms/apostrophe-astro/components/AposArea.astro';
 3 | import dayjs from 'dayjs';
 4 | 
 5 | const { page, piece, user, query } = Astro.props.aposData;
 6 | const { main } = piece;
 7 | ---
 8 | 
 9 | <section class="bp-content">
10 |   <h1>{ piece.title }</h1>
11 |   <h4>
12 |     Released On { dayjs(piece.publishedAt).format('MMMM D, YYYY') }
13 |   </h4>
14 |   <AposArea area={main} />
15 | </section>
16 | 


--------------------------------------------------------------------------------
/src/widgets/index.js:
--------------------------------------------------------------------------------
 1 | import RichTextWidget from './RichTextWidget.astro';
 2 | import ImageWidget from './ImageWidget.astro';
 3 | import VideoWidget from './VideoWidget.astro';
 4 | import TwoColumnWidget from './TwoColumnWidget.astro';
 5 | 
 6 | const widgetComponents = {
 7 |   '@apostrophecms/rich-text': RichTextWidget,
 8 |   '@apostrophecms/image': ImageWidget,
 9 |   '@apostrophecms/video': VideoWidget,
10 |   'two-column': TwoColumnWidget
11 | };
12 | 
13 | export default widgetComponents;
14 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "astro-frontend",
 3 |   "type": "module",
 4 |   "version": "1.0.0",
 5 |   "scripts": {
 6 |     "dev": "astro dev",
 7 |     "start": "astro dev",
 8 |     "build": "astro build",
 9 |     "serve": "node ./dist/server/entry.mjs",
10 |     "preview": "astro preview",
11 |     "astro": "astro"
12 |   },
13 |   "dependencies": {
14 |     "@apostrophecms/apostrophe-astro": "^1.0.0",
15 |     "@astrojs/node": "^8.3.4",
16 |     "astro": "^4.0.0",
17 |     "dayjs": "^1.11.10",
18 |     "vite": "^5.0.7"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/widgets/TwoColumnWidget.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | const { widget, options } = Astro.props;
 3 | import AposArea from '@apostrophecms/apostrophe-astro/components/AposArea.astro';
 4 | ---
 5 | <style>
 6 |   .two-column-widget {
 7 |     display: flex;
 8 |   }
 9 |   .two-column-widget-column {
10 |     flex: 50%;
11 |   }
12 | </style>
13 | <div class="two-column-widget">
14 |   <div class="two-column-widget-column">
15 |     <AposArea area={widget.left} />
16 |   </div>
17 |   <div class="two-column-widget-column">
18 |     <AposArea area={widget.right} />
19 |   </div>
20 | </div>
21 | 


--------------------------------------------------------------------------------
/src/templates/index.js:
--------------------------------------------------------------------------------
 1 | import HomePage from './HomePage.astro';
 2 | import DefaultPage from './DefaultPage.astro';
 3 | import BlogIndexPage from './BlogIndexPage.astro';
 4 | import BlogShowPage from './BlogShowPage.astro';
 5 | import NotFoundPage from './NotFoundPage.astro';
 6 | 
 7 | const templateComponents = {
 8 |   '@apostrophecms/home-page': HomePage,
 9 |   'default-page': DefaultPage,
10 |   '@apostrophecms/blog-page:index': BlogIndexPage,
11 |   '@apostrophecms/blog-page:show': BlogShowPage,
12 |   '@apostrophecms/page:notFound': NotFoundPage
13 | };
14 | 
15 | export default templateComponents;
16 | 


--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
 2 |     <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
 3 |     <style>
 4 |         path { fill: #000; }
 5 |         @media (prefers-color-scheme: dark) {
 6 |             path { fill: #FFF; }
 7 |         }
 8 |     </style>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/src/pages/[...slug].astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import aposPageFetch from '@apostrophecms/apostrophe-astro/lib/aposPageFetch.js';
 3 | import AposLayout from '@apostrophecms/apostrophe-astro/components/layouts/AposLayout.astro';
 4 | import AposTemplate from '@apostrophecms/apostrophe-astro/components/AposTemplate.astro';
 5 | 
 6 | const aposData = await aposPageFetch(Astro.request);
 7 | const bodyClass = `myclass`;
 8 | 
 9 | if (aposData.redirect) {
10 |   return Astro.redirect(aposData.url, aposData.status);
11 | }
12 | if (aposData.notFound) {
13 |   Astro.response.status = 404;
14 | }
15 | ---
16 | <AposLayout title={aposData.page?.title} {aposData} {bodyClass}>
17 |     <Fragment slot="standardHead">
18 |       <meta name="description" content={aposData.page?.seoDescription} />
19 |       <meta name="viewport" content="width=device-width, initial-scale=1" />
20 |       <meta charset="UTF-8" />
21 |     </Fragment>
22 |     <AposTemplate {aposData} slot="main"/>
23 | </AposLayout>
24 | 


--------------------------------------------------------------------------------
/src/templates/BlogIndexPage.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import dayjs from 'dayjs';
 3 | import setParameter from '@apostrophecms/apostrophe-astro/lib/aposSetQueryParameter.js';
 4 | 
 5 | const {
 6 |   page,
 7 |   user,
 8 |   query,
 9 |   piecesFilters,
10 |   pieces,
11 |   currentPage,
12 |   totalPages
13 | } = Astro.props.aposData;
14 | 
15 | const pages = [];
16 | for (let i = 1; (i <= totalPages); i++) {
17 |   pages.push({
18 |     number: i,
19 |     current: page === currentPage,
20 |     url: setParameter(Astro.url, 'page', i)
21 |   });
22 | }
23 | ---
24 | 
25 | <section class="bp-content">
26 |   <h1>{ page.title }</h1>
27 | 
28 |   <h2>Blog Posts</h2>
29 | 
30 |   {pieces.map(piece => (
31 |     <h4>
32 |       Released On { dayjs(piece.publishedAt).format('MMMM D, YYYY') }
33 |     </h4>
34 |     <h3>
35 |       <a href={ piece._url }>{ piece.title }</a>
36 |     </h3>
37 |   ))}
38 | 
39 |   {pages.map(page => (
40 |     <a
41 |       class={(page === currentPage) ? 'current' : ''} 
42 |       href={page.url}>{page.number}
43 |     </a>
44 |   ))}
45 | </section>


--------------------------------------------------------------------------------
/astro.config.mjs:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'astro/config';
 2 | import node from '@astrojs/node';
 3 | import apostrophe from '@apostrophecms/apostrophe-astro';
 4 | 
 5 | export default defineConfig({
 6 |   output: 'server',
 7 |   adapter: node({
 8 |     mode: 'standalone'
 9 |   }),
10 |   integrations: [
11 |     apostrophe({
12 |       aposHost: 'http://localhost:3000',
13 |       widgetsMapping: './src/widgets',
14 |       templatesMapping: './src/templates',
15 |       forwardHeaders: [
16 |         'content-security-policy', 
17 |         'strict-transport-security', 
18 |         'x-frame-options',
19 |         'referrer-policy',
20 |         'cache-control',
21 |         // Should only be passed in multisite projects, and only if Apostrophe and Astro are hosted together
22 |         // 'host'
23 |       ]
24 |     })
25 |   ],
26 |   vite: {
27 |     ssr: {
28 |       // Do not externalize the @apostrophecms/apostrophe-astro plugin, we need
29 |       // to be able to use virtual: URLs there
30 |       noExternal: [ '@apostrophecms/apostrophe-astro' ],
31 |     }
32 |   }
33 | });
34 | 


--------------------------------------------------------------------------------
/src/templates/HomePage.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import AposArea from '@apostrophecms/apostrophe-astro/components/AposArea.astro';
 3 | const { page, user, query } = Astro.props.aposData;
 4 | const { main } = page;
 5 | ---
 6 | 
 7 | <section class="bp-welcome">
 8 |   <h1 class="bp-welcome__headline">
 9 |     Welcome to Apostrophe 3
10 |   </h1>
11 |   { user ? '' : 
12 |     <div>
13 |       <h3 class="bp-welcome__help">First time spinning up the Apostrophe Astro combined project?</h3>
14 |       <p>
15 |         Use the credentials created during setup with the Apostrophe CLI or create a new user with this command
16 |         in your apostrophe project folder (not Astro):
17 |       </p>
18 |       <pre class="bp-welcome__code">
19 |         <span class="bp-welcome__code__context">Command Line</span>
20 |         <code>
21 |           node app @apostrophecms/user:add myUsername admin
22 |         </code>
23 |       </pre>
24 |       <p class="bp-welcome__cta">
25 |         <a class="bp-button bp-button--cta" href="/login">Then log in here.</a>
26 |       </p>
27 |     </div>
28 | 
29 |   }
30 |   <p>
31 |     For a guide on how to configure and customize this project, <a href="https://github.com/apostrophecms/apostrophe-astro">please check out the apostrophe-astro documentation</a>.
32 |   </p>
33 |   <div class="bp-welcome__area">
34 |     { (user && !query?.['apos-edit']) ?
35 |       <p>
36 |         Enter <span class="bp-mode">Edit</span> mode from the admin bar <span style="display:inline-block; transform: rotate(45deg)">👆</span> to begin.
37 |       </p>
38 |     :
39 |       <p>
40 |         Add and edit content below in the content area. 👇
41 |       </p>
42 |     }
43 |     <AposArea area={main} />
44 |   </div>
45 | </section>
46 | 


--------------------------------------------------------------------------------
/src/widgets/VideoWidget.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | const { widget } = Astro.props;
 3 | const placeholder = widget?.aposPlaceholder ? 'true' : '';
 4 | const url = widget?.video?.url;
 5 | ---
 6 | <style>
 7 |   video-widget {
 8 |     width: 100%;
 9 |   }
10 | </style>
11 | <video-widget
12 |   url={placeholder ? 'https://youtu.be/Q5UX9yexEyM' : url }
13 | >
14 | </video-widget>
15 | <script>
16 |   class VideoWidget extends HTMLElement {
17 |     result: {
18 |       width: number,
19 |       height: number,
20 |       html: string
21 |     };
22 |     canvasEl: HTMLElement;
23 |     constructor() {
24 |       super();
25 |       this.init();
26 |     }
27 |     async init() {
28 |       const videoUrl = this.getAttribute('url');
29 | 
30 |       if (!videoUrl) {
31 |         return;
32 |       }
33 | 
34 |       this.result = await this.oembed(videoUrl);
35 | 
36 |       this.renderVideo();
37 |     }
38 |     async oembed(url) {
39 |       const response = await fetch('/api/v1/@apostrophecms/oembed/query?' + new URLSearchParams({
40 |         url
41 |       }));
42 |       if (response.status >= 400) {
43 |         throw new Error(`oembed error code: ${response.status}`);
44 |       }
45 |       return response.json();
46 |     }
47 | 
48 |     renderVideo() {
49 |       const shaker = document.createElement('div');
50 |       shaker.innerHTML = this.result.html;
51 |       const inner = shaker.firstChild;
52 |       if (!(inner && (inner instanceof HTMLElement))) {
53 |         throw new Error('First child must be an HTML element');
54 |       }
55 |       this.canvasEl = inner;
56 |       this.innerHTML = '';
57 |       if (!inner) {
58 |         return;
59 |       }
60 |       inner.removeAttribute('width');
61 |       inner.removeAttribute('height');
62 |       this.append(inner);
63 |       // wait for CSS width to be known
64 |       setTimeout(() => {
65 |         // If oembed results include width and height we can get the
66 |         // video aspect ratio right
67 |         if (this.result.width && this.result.height) {
68 |           inner.style.width = '100%';
69 |           this.resizeVideo();
70 |           // If we need to initially size the video, also resize it on window
71 |           // resize.
72 |           window.addEventListener('resize', this.resizeHandler.bind(this));
73 |         } else {
74 |           // No, so assume the oembed HTML code is responsive.
75 |         }
76 |       }, 0);
77 |     }
78 |     resizeVideo() {
79 |       this.canvasEl.style.height = ((this.result.height / this.result.width) * this.canvasEl.offsetWidth) + 'px';
80 |     }
81 |     resizeHandler() {
82 |       if (document.contains(this)) {
83 |         this.resizeVideo();
84 |       } else {
85 |         window.removeEventListener('resize', this.resizeHandler);
86 |       }
87 |     }
88 |   }
89 |   customElements.define('video-widget', VideoWidget);
90 | </script>


--------------------------------------------------------------------------------